/* ─── Ticket Detail v2 — Bileta · Detaje ────────────────────────────
 * Full-page ticket view. Inherits palette from ticket-accept-v2.css.
 * 2026-05-14
 */

.td-root {
  padding: 14px 18px 80px;
  color: var(--ta-text);
  font-size: 13px;
  max-width: 1320px;
  margin: 0 auto;
}

/* 2026-05-14 — Fixed scroll bug.
 * Previously this rule fought ticket-accept-v2.css's body-scroll pattern
 * (which sets #content overflow:visible + body overflow-y:auto). The
 * conflict locked scroll on /#/ticket/<id> pages. Removed override —
 * we inherit the unified body-scroll pattern: #content lets content grow,
 * body scrolls. .td-root has padding-bottom:80px for breathing room. */

/* ─── Header ───────────────────────────────────────────────────────── */
.td-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--ta-line);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.td-head-l {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.td-head-r {
  display: flex;
  gap: 8px;
}
.td-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: .3px;
}

.td-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--ta-text-2);
}
.td-pill-ok   { background: var(--ta-ok-bg);   color: var(--ta-ok);   border: 1px solid var(--ta-ok-border); }
.td-pill-bad  { background: var(--ta-bad-bg);  color: var(--ta-bad);  border: 1px solid var(--ta-bad-border); }
.td-pill-warn { background: var(--ta-warn-bg); color: var(--ta-warn); border: 1px solid var(--ta-warn-border); }
.td-pill-info { background: rgba(120, 160, 240, .12); color: #89b4ff; border: 1px solid rgba(120, 160, 240, .35); }

.td-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--ta-card);
  color: var(--ta-text-2);
  border: 1px solid var(--ta-line);
}
.td-tag-ok { color: var(--ta-ok); border-color: var(--ta-ok-border); background: var(--ta-ok-bg); }

.td-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.td-kv-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ta-text-3);
  font-weight: 600;
}
.td-kv-v {
  font-size: 14px;
  color: var(--ta-text);
  font-weight: 500;
}

/* ─── 2-col layout ─────────────────────────────────────────────────── */
.td-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
}

.td-col-l, .td-col-r {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ─── Cards ────────────────────────────────────────────────────────── */
.td-card {
  background: var(--ta-card);
  border: 1px solid var(--ta-line);
  border-radius: 8px;
  overflow: hidden;
}
.td-card-head {
  background: var(--ta-card-head);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ta-text-2);
  border-bottom: 1px solid var(--ta-line);
}
.td-card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.td-empty {
  padding: 24px;
  text-align: center;
  color: var(--ta-text-3);
  font-size: 13px;
}
.td-empty-bad { color: var(--ta-bad); }

/* ─── Money grid ───────────────────────────────────────────────────── */
.td-grid-money {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 14px;
}

/* ─── User card ────────────────────────────────────────────────────── */
.td-user-row {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.td-user-name { font-size: 16px; }
.td-user-name strong { color: var(--ta-text); }
.td-user-role {
  font-size: 12px;
  color: var(--ta-text-3);
  background: var(--ta-card-head);
  padding: 3px 8px;
  border-radius: 4px;
}

.td-muted { color: var(--ta-text-3); }
.td-sm { font-size: 11px; }

/* ─── Selections table ─────────────────────────────────────────────── */
.td-sel-table {
  display: flex;
  flex-direction: column;
}

.td-sel-head {
  background: rgba(0,0,0,.18);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ta-text-3);
  font-weight: 600;
}
.td-sel-match a {
  color: #89b4ff;
  text-decoration: none;
}
.td-sel-match a:hover { text-decoration: underline; }

.td-sug {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(120, 160, 240, .12);
  color: #89b4ff;
  border: 1px solid rgba(120, 160, 240, .25);
}

/* ─── Audit timeline ───────────────────────────────────────────────── */
.td-aud-list {
  display: flex;
  flex-direction: column;
}
.td-aud-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ta-line-soft);
}
.td-aud-row:last-child { border-bottom: none; }
.td-aud-time { font-size: 12px; color: var(--ta-text-2); }
.td-aud-body { min-width: 0; }
.td-aud-head-line { font-size: 13px; }
.td-aud-head-line strong {
  color: var(--ta-text);
  font-weight: 700;
}
.td-aud-reason {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ta-text-2);
  white-space: pre-wrap;
}
.td-aud-diff {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0,0,0,.22);
  border-left: 2px solid var(--ta-text-3);
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 11px;
  color: var(--ta-text-2);
}
.td-aud-diff-line { padding: 1px 0; }

/* ─── Actions ──────────────────────────────────────────────────────── */
.td-act-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px;
}
.td-act-box {
  background: rgba(0,0,0,.16);
  border: 1px solid var(--ta-line);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td-act-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ta-text);
}
.td-act-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.td-act-buttons {
  display: flex;
  gap: 8px;
}

.td-textarea {
  width: 100%;
  background: var(--ta-bg);
  border: 1px solid var(--ta-line);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--ta-text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
}
.td-textarea:focus {
  outline: none;
  border-color: rgba(120, 160, 240, .55);
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.td-btn {
  background: var(--ta-card);
  color: var(--ta-text);
  border: 1px solid var(--ta-line);
  border-radius: 4px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-btn:hover:not(:disabled) {
  background: var(--ta-card-hover);
  border-color: rgba(255,255,255,.15);
}
.td-btn:disabled { opacity: .45; cursor: not-allowed; }
.td-btn-sm  { padding: 4px 8px; font-size: 11px; }
.td-btn-ghost { background: transparent; }
.td-btn-ok   { background: var(--ta-ok-bg);   color: var(--ta-ok);   border-color: var(--ta-ok-border); }
.td-btn-warn { background: var(--ta-warn-bg); color: var(--ta-warn); border-color: var(--ta-warn-border); }
.td-btn-bad  { background: var(--ta-bad-bg);  color: var(--ta-bad);  border-color: var(--ta-bad-border); }

/* ─── Loading + error fallbacks ────────────────────────────────────── */
.td-loading {
  padding: 60px 24px;
  text-align: center;
  color: var(--ta-text-3);
  font-size: 14px;
}
.td-error-box {
  max-width: 540px;
  margin: 60px auto;
  background: var(--ta-card);
  border: 1px solid var(--ta-line);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
}
.td-error-box h1 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--ta-text);
}

/* ─── Toast ────────────────────────────────────────────────────────── */
.td-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ta-card);
  border: 1px solid var(--ta-line);
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--ta-text);
  z-index: 9999;
  transition: opacity .25s;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.td-toast-ok { border-color: var(--ta-ok-border); color: var(--ta-ok); }
.td-toast-bad { border-color: var(--ta-bad-border); color: var(--ta-bad); }

/* ─── Smart selection cards (v3, 2026-05-14) ─────────────────────── */
.td-sel-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.td-sel-card {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--ta-line);
  border-radius: 7px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 3px solid var(--ta-line);
}
.td-sel-card.is-live    { border-left-color: var(--ta-bad);  background: linear-gradient(90deg, rgba(255,107,107,.06), rgba(0,0,0,.18) 30%); }
.td-sel-card.is-prematch{ border-left-color: rgba(120,160,240,.55); }
.td-sel-card.has-sig-bad{ box-shadow: 0 0 0 1px rgba(255,107,107,.30); }

.td-sel-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.td-sel-idx {
  font-family: var(--ta-mono);
  background: var(--ta-card-head);
  color: var(--ta-text-3);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 11px;
}
.td-sel-sport {
  color: var(--ta-text-2);
  font-weight: 600;
}
.td-pill-sm { padding: 1px 7px; font-size: 10px; }
.td-sel-state { display: inline-flex; }

.td-sel-score {
  margin-left: auto;
  font-family: var(--ta-mono);
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
}
.td-sel-score-final { background: rgba(34,209,139,.10); border: 1px solid var(--ta-ok-border); color: var(--ta-ok); }
.td-sel-score-live  { background: rgba(255,107,107,.10); border: 1px solid var(--ta-bad-border); color: var(--ta-bad); }

.td-sel-match-block {
  font-size: 15px;
  line-height: 1.35;
}
.td-sel-match-link {
  color: var(--ta-text);
  text-decoration: none;
}
.td-sel-match-link:hover { text-decoration: underline; }
.td-sel-home, .td-sel-away { color: var(--ta-text); }
.td-sel-vs { color: var(--ta-text-3); padding: 0 5px; font-weight: 400; }
.td-sel-mid { margin-left: 10px; font-family: var(--ta-mono); font-size: 10px; }

.td-sel-bet-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding-top: 4px;
}
.td-sel-market { color: var(--ta-text-2); }
.td-sel-sep { color: var(--ta-text-dim); }
.td-sel-outcome { color: var(--ta-text); font-weight: 700; }
.td-sel-odds { color: var(--ta-warn); font-family: var(--ta-mono); font-size: 14px; }

.td-sel-times {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px dashed var(--ta-line-soft);
}
.td-sel-kickoff, .td-sel-betmin {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.td-bet-min {
  font-family: var(--ta-mono);
  color: var(--ta-bad);
  font-weight: 700;
}

/* ─── Signal section (shopify-style stat strip) ────────────────────── */
.td-sel-signal {
  background: rgba(0,0,0,.20);
  border: 1px solid var(--ta-line-soft);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.td-sel-signal-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ta-text-3);
  font-weight: 700;
}
.td-sig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ta-line);
  color: var(--ta-text-2);
  width: fit-content;
}
.td-sig-dot { font-size: 8px; line-height: 1; }
.td-sig-ok   { border-color: var(--ta-ok-border);   color: var(--ta-ok);   background: var(--ta-ok-bg); }
.td-sig-warn { border-color: var(--ta-warn-border); color: var(--ta-warn); background: var(--ta-warn-bg); }
.td-sig-bad  { border-color: var(--ta-bad-border);  color: var(--ta-bad);  background: var(--ta-bad-bg); }
.td-sig-score { font-family: var(--ta-mono); opacity: .85; }
.td-sig-anom { font-weight: 700; }
.td-sig-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.td-sig-reason-chip {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--ta-card-head);
  color: var(--ta-text-3);
  border: 1px solid var(--ta-line);
  font-family: var(--ta-mono);
}
.td-sig-rates {
  font-family: var(--ta-mono);
}

/* ─── Audit timeline (v3) ──────────────────────────────────────────── */
.td-aud-timeline {
  position: relative;
  padding: 8px 14px 12px;
}
.td-aud-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: none;
}
.td-aud-stem {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.td-aud-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--ta-card);
  border: 1px solid var(--ta-line);
  color: var(--ta-text-2);
  flex-shrink: 0;
  font-family: monospace;
}
.td-aud-icon-ok   { background: var(--ta-ok-bg);   border-color: var(--ta-ok-border);   color: var(--ta-ok);   }
.td-aud-icon-bad  { background: var(--ta-bad-bg);  border-color: var(--ta-bad-border);  color: var(--ta-bad);  }
.td-aud-icon-warn { background: var(--ta-warn-bg); border-color: var(--ta-warn-border); color: var(--ta-warn); }
.td-aud-icon-info { background: rgba(120,160,240,.12); border-color: rgba(120,160,240,.35); color: #89b4ff; }
.td-aud-icon-dim  { background: var(--ta-card); border-color: var(--ta-line); color: var(--ta-text-3); }
.td-aud-bar {
  flex: 1;
  width: 2px;
  background: var(--ta-line);
  margin: 2px 0;
}
.td-aud-row:last-child .td-aud-bar { display: none; }
.td-aud-operator {
  font-weight: 700;
  color: var(--ta-text);
}

/* ─── Phase 4 (2026-05-14): header tags, hierarchy chain, offer banner ─ */
.td-tag-mono {
  font-family: var(--ta-mono);
  letter-spacing: .3px;
}

/* Hierarchy chain on player card */
.td-user-chain {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 14px;
  flex-wrap: wrap;
}
.td-chain-nodes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.td-chain-node {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ta-card-head);
  border: 1px solid var(--ta-line);
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ta-text-2);
  font-size: 12px;
  transition: background .12s;
}
.td-chain-node:hover { background: var(--ta-card-hover); color: var(--ta-text); }
.td-chain-self {
  border-color: rgba(120,160,240,.35);
  background: rgba(120,160,240,.10);
  color: #89b4ff;
}
.td-chain-role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ta-text-3);
  background: rgba(0,0,0,.30);
  padding: 1px 5px;
  border-radius: 3px;
}
.td-chain-self .td-chain-role { color: #89b4ff; background: rgba(120,160,240,.20); }
.td-chain-name { font-weight: 600; }
.td-chain-sep { color: var(--ta-text-dim); margin: 0 2px; }

/* Pending offer banner */
.td-offer-banner {
  background: var(--ta-warn-bg);
  border: 1px solid var(--ta-warn-border);
  border-left: 3px solid var(--ta-warn);
  border-radius: 6px;
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.td-offer-banner-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.td-offer-banner-head strong { color: var(--ta-warn); }
.td-offer-banner-body {
  font-family: var(--ta-mono);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.td-offer-new { color: var(--ta-warn); }
.td-offer-overlays {
  width: 100%;
  margin-top: 6px;
  font-family: var(--ta-mono);
}
.td-sep { color: var(--ta-text-dim); padding: 0 4px; }

/* ─── Inline Rezultatet button + panel on selection cards (2026-05-14) ─ */
.td-mres-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ta-card);
  border: 1px solid var(--ta-line);
  color: var(--ta-text-2);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.td-mres-btn:hover { background: var(--ta-card-hover); color: var(--ta-text); border-color: rgba(120,160,240,.40); }
.td-mres-btn.is-open {
  background: rgba(120,160,240,.14);
  color: #89b4ff;
  border-color: rgba(120,160,240,.45);
}
.td-mres-btn-label { letter-spacing: .3px; }

.td-sel-mres {
  margin-top: 6px;
  border-top: 1px dashed var(--ta-line-soft);
  padding-top: 8px;
}

/* The .mres-wrap classes from MatchResultsTable inherit main.css styling,
 * but we want the panel to feel native to the card — small tweaks: */
.td-sel-mres .mres-wrap {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--ta-line);
  border-radius: 6px;
  padding: 10px;
}
.td-sel-mres .mres-head {
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ta-line-soft);
}

/* 2026-05-14 — SCROLL SAFETY for /#/ticket/<id> page.
 * Belt-and-suspenders: regardless of which CSS bundle conflicts, this
 * ensures the .td-root content can ALWAYS be scrolled by either:
 *   1. body scrolling (when ta-fullscreen overrides apply)
 *   2. #content scrolling (when normal grid layout applies)
 * The :has() selector targets #content WHEN it contains .td-root, so
 * this rule only affects the ticket-detail page — not other pages. */
#content:has(> .td-root),
.content:has(> .td-root) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
/* Ensure body can also scroll as fallback (in case #content doesn't have
 * height to scroll inside) */
body:has(#content > .td-root) {
  overflow-y: auto !important;
}
.td-root {
  min-height: 0;
}

/* ─── Ticket Detail — CONSERVATIVE compact (2026-05-14 v2) ──────────
 * Tight density without restructuring grid layout.
 * Just smaller paddings + smaller fonts + tighter card spacing.
 * No grid-template-areas tricks. Keeps existing DOM happy. */

.td-root {
  padding: 10px 14px 60px;
  max-width: 1480px;
  font-size: 12px;
}

/* Header: sticky + compact */
.td-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ta-bg);
  padding: 8px 0 10px;
  margin-bottom: 10px;
  gap: 10px;
}
.td-title { font-size: 17px; }

/* 2-col layout: more space for legs */
.td-cols {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10px;
}
.td-col-l, .td-col-r { gap: 8px; }

/* Cards: tighter heads */
.td-card-head {
  padding: 6px 12px;
  font-size: 11px;
}

/* Money tiles: smaller padding */
.td-grid-money { padding: 8px 10px; gap: 8px; }

/* User row: tighter */
.td-user-row { padding: 6px 12px; gap: 8px; }

/* Selection cards: SAFE tightening (NO grid restructure)
 * Goal: shrink per-leg vertical space ~30% via padding + font cuts.
 * Keep the existing flex/block structure intact. */
.td-sel-cards { padding: 8px; gap: 6px; }
.td-sel-card {
  padding: 8px 10px;
  border-radius: 5px;
  gap: 4px;
}
.td-sel-card-head {
  gap: 6px;
  font-size: 11px;
}
.td-sel-card-head > .td-pill,
.td-sel-card-head > .td-pill-sm {
  font-size: 9px;
  padding: 1px 6px;
}
.td-sel-match-link { font-size: 12px; }
.td-sel-mid { font-size: 9px; }
.td-sel-betmin, .td-sel-kickoff {
  font-size: 10px;
  padding: 2px 0;
}
.td-sig {
  font-size: 10px;
  padding: 2px 6px;
}
.td-sig-rates, .td-sig-reasons {
  font-size: 9px;
}
.td-mres-btn {
  padding: 3px 9px;
  font-size: 11px;
}

/* Audit: denser */
.td-aud-row { padding: 6px 10px; font-size: 11px; }
.td-aud-time { font-size: 9px; }

/* Buttons: smaller */
.td-btn { padding: 5px 11px; font-size: 11px; }
.td-btn-sm { padding: 4px 9px; font-size: 10px; }

/* ─── Polish (2026-05-14 v3) — uses VERIFIED real selectors ─────────
 * Codex audit confirmed real DOM classes:
 *   .td-sel-card-head, .td-sel-match-block, .td-sel-bet-line, .td-sel-times
 *   (NOT .td-sel-bet — that's why earlier compact block was broken)
 * Conservative density without restructuring. */

/* Shrink kickoff + bet-time to inline chips on one row */
.td-sel-times {
  gap: 10px !important;
  font-size: 10px !important;
  padding-top: 2px !important;
  flex-wrap: wrap !important;
}
.td-sel-kickoff,
.td-sel-betmin {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
.td-sel-kickoff .td-kv-k,
.td-sel-betmin .td-kv-k {
  font-size: 8px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
}

/* bet-line cleaner */
.td-sel-bet-line {
  font-size: 12px !important;
  padding-top: 3px !important;
  gap: 6px !important;
}
.td-sel-odds { font-size: 13px !important; }
.td-sel-outcome { font-size: 12px !important; }

/* card-head tighter */
.td-sel-card-head { gap: 6px !important; }
.td-sel-card-head .td-sel-score {
  margin-left: auto !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
}

/* match-block: shrink vertical space */
.td-sel-match-block {
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.td-sel-mid {
  font-size: 9px !important;
  margin-left: 8px !important;
  opacity: 0.6 !important;
}

/* Whole leg card target: max ~80px vertical (was ~140px) */
.td-sel-card { gap: 4px !important; }

/* Signal sigs collapsed by default — show on hover */
.td-sig-rates,
.td-sig-reasons {
  font-size: 9px !important;
  opacity: 0.65 !important;
}
.td-sig-reasons {
  margin-top: 0 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
}
.td-sig-reason-chip {
  padding: 1px 4px !important;
  font-size: 9px !important;
}

/* ─── Smart facts (2026-05-14) — replaces verbose diff dump ──────────── */
.td-aud-facts {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.td-aud-fact {
  display: inline-block;
  padding: 2px 7px; border-radius: 3px;
  font-size: 10px; font-family: ui-monospace, "SF Mono", monospace;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--ta-text-2, #8fa2c7);
}
.td-aud-fact-state { background: rgba(110,200,255,0.10); color: #6ec8ff; border-color: rgba(110,200,255,0.25); }
.td-aud-fact-money { background: rgba(255,227,90,0.10); color: #ffe35a; border-color: rgba(255,227,90,0.25); font-weight: 700; }
.td-aud-fact-odds  { background: rgba(255,184,102,0.10); color: #ffb866; border-color: rgba(255,184,102,0.25); }
.td-aud-fact-lines { background: rgba(200,151,255,0.08); color: #c897ff; border-color: rgba(200,151,255,0.2); }
.td-aud-fact-edit  { background: rgba(255,255,255,0.04); color: #cad5e2; }
.td-aud-fact-match { background: rgba(110,251,177,0.08); color: #6efbb1; border-color: rgba(110,251,177,0.2); }
.td-aud-fact-paid  { background: rgba(110,251,177,0.12); color: #6efbb1; font-weight: 700; }
.td-aud-fact-soon  { background: rgba(140,170,200,0.06); color: #8fa2c7; }

.td-aud-count {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  color: #ffe35a;
  font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px;
  margin-left: 4px;
}
.td-aud-sys { opacity: 0.85; }
.td-aud-sys .td-aud-icon { opacity: 0.7; }

/* ─── Actor labels (2026-05-14) — narrative attribution ─────────────── */
.td-aud-actor {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
}
.td-aud-actor-player { background: rgba(110,200,255,0.12); color: #6ec8ff; border: 1px solid rgba(110,200,255,0.3); }
.td-aud-actor-system { background: rgba(140,170,200,0.08); color: #8fa2c7; border: 1px solid rgba(140,170,200,0.2); }
.td-aud-actor-op     { background: rgba(255,227,90,0.12); color: #ffe35a; border: 1px solid rgba(255,227,90,0.3); }
.td-aud-actor-name {
  font-weight: 700;
  margin-right: 6px;
  font-size: 12px;
}
.td-aud-actor-name.td-aud-actor-player { color: #6ec8ff; }
.td-aud-actor-name.td-aud-actor-system { color: #8fa2c7; }
.td-aud-actor-name.td-aud-actor-op     { color: #ffe35a; }

/* ─── 2026-05-14 — RICH PER-LEG PANELS ─────────────────────────────────
 * Triple-panel layout per selection card: Match Info / Signal / Verdict
 * Each panel is a tight grid of K:V rows with subtle accent border.
 * Panels flow horizontally on desktop, stack on mobile.
 * ──────────────────────────────────────────────────────────────────── */
.td-sel-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "head head head"
    "match match match"
    "bet bet bet"
    "pnlm pnls pnlv"
    "mres mres mres";
  gap: 6px 10px;
}
.td-sel-card-head { grid-area: head; }
.td-sel-match-block { grid-area: match; }
.td-sel-bet-line { grid-area: bet; }
.td-sel-pnl-match { grid-area: pnlm; }
.td-sel-pnl-signal { grid-area: pnls; }
.td-sel-pnl-verdict { grid-area: pnlv; }
.td-sel-mres { grid-area: mres; }

.td-sel-pnl {
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 6px 8px 7px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.td-sel-pnl-match   { border-left: 3px solid #6ec8ff; }
.td-sel-pnl-signal  { border-left: 3px solid #ffb866; }
.td-sel-pnl-verdict { border-left: 3px solid #ffe35a; }

.td-sel-pnl-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ta-text-2, #8fa2c7);
  font-weight: 700;
  padding-bottom: 3px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  margin-bottom: 2px;
}
.td-sel-pnl-icon { font-size: 13px; }
.td-sel-pnl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.td-sel-pnl-kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 1px 0;
  min-width: 0;
}
.td-sel-pnl-k {
  font-size: 10px;
  color: var(--ta-text-2, #8fa2c7);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.td-sel-pnl-v {
  font-size: 11.5px;
  font-weight: 600;
  word-break: break-word;
  min-width: 0;
}
.td-sel-pnl-v-wrap {
  font-weight: 400;
  font-style: italic;
  color: var(--ta-text-2, #8fa2c7);
  font-size: 11px;
  line-height: 1.35;
}

.td-sig-reason-chip {
  display: inline-block;
  background: rgba(255,184,102,0.10);
  color: #ffb866;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  font-family: monospace;
  border: 1px solid rgba(255,184,102,0.2);
}

/* Hide deprecated unstyled blocks if they ever leak through */

/* ─── 2026-05-14 — 5-PANEL LAYOUT + SPARKLINE + EVENTS ────────────── */
.td-sel-card {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "head head head"
    "match match match"
    "bet bet bet"
    "pnlm pnls pnlv"
    "pnlh pnlh pnlh"
    "pnle pnle pnle"
    "mres mres mres";
}
.td-sel-pnl-history { grid-area: pnlh; border-left: 3px solid #b06bff; }
.td-sel-pnl-events  { grid-area: pnle; border-left: 3px solid #6efbb1; }

/* Events panel — clickable head, expandable */
.td-sel-pnl-head-clk {
  cursor: pointer;
  user-select: none;
}
.td-sel-pnl-head-clk:hover { color: #6ec8ff; }

/* ─── 2026-05-14 — RISK ASSESSMENT HERO (Shopify-style) ─────────────── */
.td-risk-hero {
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(20,30,45,0.7) 0%, rgba(15,20,30,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.td-risk-hero.td-risk-low  { border-left: 4px solid #6efbb1; }
.td-risk-hero.td-risk-med  { border-left: 4px solid #ffb866; }
.td-risk-hero.td-risk-high { border-left: 4px solid #ff6b6b; box-shadow: 0 4px 24px rgba(255,107,107,0.15); }

.td-risk-loading, .td-risk-err {
  border-left-color: var(--ta-line);
  font-size: 11px;
  color: var(--ta-text-2);
  padding: 8px 14px;
}
.td-risk-loading-msg { font-style: italic; }

/* TOP ROW: score gauge + factors */
.td-risk-top {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.td-risk-score-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ta-text-2);
  text-transform: uppercase;
  font-weight: 700;
}
.td-risk-score-number {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 4px 0;
}
.td-risk-score-num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.td-risk-low  .td-risk-score-num { color: #6efbb1; }
.td-risk-med  .td-risk-score-num { color: #ffb866; }
.td-risk-high .td-risk-score-num { color: #ff6b6b; }
.td-risk-score-max {
  font-size: 13px;
  color: var(--ta-text-2);
  font-weight: 600;
}
.td-risk-level {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 3px;
  margin: 2px 0 6px;
}
.td-risk-level-low  { background: rgba(110,251,177,0.15); color: #6efbb1; border: 1px solid rgba(110,251,177,0.3); }
.td-risk-level-med  { background: rgba(255,184,102,0.15); color: #ffb866; border: 1px solid rgba(255,184,102,0.3); }
.td-risk-level-high { background: rgba(255,107,107,0.18); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.4); animation: tdRiskPulse 2.5s ease-in-out infinite; }
@keyframes tdRiskPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.td-risk-gauge-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.td-risk-gauge-fill {
  height: 100%;
  background: #6efbb1;
  transition: width 0.5s ease, background 0.3s ease;
}
.td-risk-gauge-low  { background: linear-gradient(90deg, #6efbb1, #6efbb1); }
.td-risk-gauge-med  { background: linear-gradient(90deg, #6efbb1, #ffb866); }
.td-risk-gauge-high { background: linear-gradient(90deg, #ffb866, #ff6b6b); }

.td-risk-factors-head {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ta-text-2);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.td-risk-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.td-risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.06);
}
.td-risk-chip-bad  { background: rgba(255,107,107,0.10); color: #ff8a8a; border-color: rgba(255,107,107,0.3); }
.td-risk-chip-warn { background: rgba(255,184,102,0.10); color: #ffb866; border-color: rgba(255,184,102,0.3); }
.td-risk-chip-info { background: rgba(110,200,255,0.10); color: #6ec8ff; border-color: rgba(110,200,255,0.25); }
.td-risk-chip-ok   { background: rgba(110,251,177,0.10); color: #6efbb1; border-color: rgba(110,251,177,0.3); }
.td-risk-chip-w {
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: -0.02em;
}

/* PLAYER INTEL GRID */
.td-risk-pi-head, .td-risk-recs-head {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ta-text-2);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
  padding-top: 4px;
}
.td-risk-pi-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.td-risk-stat {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.td-risk-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ta-text-2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-risk-stat-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-risk-stat-bad  .td-risk-stat-value { color: #ff8a8a; }
.td-risk-stat-warn .td-risk-stat-value { color: #ffb866; }
.td-risk-stat-ok   .td-risk-stat-value { color: #6efbb1; }
.td-risk-stat-bad  { border-color: rgba(255,107,107,0.25); background: rgba(255,107,107,0.05); }
.td-risk-stat-warn { border-color: rgba(255,184,102,0.25); background: rgba(255,184,102,0.05); }
.td-risk-stat-ok   { border-color: rgba(110,251,177,0.25); background: rgba(110,251,177,0.04); }

/* SYNDICATE */
.td-risk-synd {
  background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.25);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.td-risk-synd-head {
  font-size: 11px;
  font-weight: 700;
  color: #ff8a8a;
  margin-bottom: 6px;
}
.td-risk-synd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.td-risk-synd-user {
  background: rgba(0,0,0,0.25);
  padding: 3px 8px;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
  font-size: 11px;
}
.td-risk-synd-user:hover { background: rgba(255,107,107,0.2); }

/* RECOMMENDATIONS */
.td-risk-recs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-risk-rec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid var(--ta-line);
  line-height: 1.4;
}
.td-risk-rec-bad  { border-left-color: #ff6b6b; background: rgba(255,107,107,0.06); }
.td-risk-rec-warn { border-left-color: #ffb866; background: rgba(255,184,102,0.05); }
.td-risk-rec-info { border-left-color: #6ec8ff; background: rgba(110,200,255,0.04); }
.td-risk-rec-ok   { border-left-color: #6efbb1; background: rgba(110,251,177,0.04); }
.td-risk-rec-icon {
  font-size: 13px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH PASS · v=polish-2026051730
 * Goal: bring ticket detail to Shopify-tier visual quality.
 * Strategy: scoped design tokens + selective overrides via specificity
 * (`.td-root .x` beats `.x`). No JS changes required.
 * ═════════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS (scoped) ────────────────────────────────────────── */
.td-root {
  --tdp-bg-0:        #0a0e14;
  --tdp-bg-1:        rgba(255,255,255,0.022);
  --tdp-bg-2:        rgba(255,255,255,0.045);
  --tdp-bg-3:        rgba(255,255,255,0.07);
  --tdp-line:        rgba(255,255,255,0.06);
  --tdp-line-strong: rgba(255,255,255,0.11);
  --tdp-line-accent: rgba(110,200,255,0.25);

  --tdp-text:        #eef1f7;
  --tdp-text-2:      #95a3bf;
  --tdp-text-3:      #5a6886;

  --tdp-accent:      #6ec8ff;
  --tdp-warn:        #ffb866;
  --tdp-bad:         #ff6b6b;
  --tdp-ok:          #6efbb1;
  --tdp-money:       #ffe35a;
  --tdp-purple:      #b06bff;

  --tdp-shadow-sm:   0 2px 6px rgba(0,0,0,0.18);
  --tdp-shadow:      0 4px 16px rgba(0,0,0,0.28);
  --tdp-shadow-lg:   0 8px 32px rgba(0,0,0,0.4);
  --tdp-shadow-glow: 0 0 0 1px rgba(110,200,255,0.18), 0 8px 24px rgba(110,200,255,0.10);

  --tdp-r-sm:        4px;
  --tdp-r:           6px;
  --tdp-r-lg:        10px;

  --tdp-trans:       180ms cubic-bezier(0.4, 0, 0.2, 1);
  --tdp-trans-slow:  280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── PAGE FRAME ──────────────────────────────────────────────────── */
.td-root {
  padding: 14px 16px 80px !important;
  max-width: 1480px;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tdp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── HEADER ──────────────────────────────────────────────────────── */
.td-root .td-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 12px !important;
  padding: 10px 14px !important;
  margin: 0 0 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%) !important;
  border: 1px solid var(--tdp-line) !important;
  border-radius: var(--tdp-r-lg) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--tdp-shadow-sm);
}
.td-root .td-head-l {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px !important;
}
.td-root .td-head-r {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0;
}
.td-root .td-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 8px 0 0 !important;
  line-height: 1.1 !important;
}

/* ─── STATE PILLS (consistent) ────────────────────────────────────── */
.td-root .td-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
}
.td-root .td-pill-sm { font-size: 9.5px !important; padding: 2px 6px !important; }
.td-root .td-pill-ok   { background: rgba(110,251,177,0.13); color: var(--tdp-ok);   border-color: rgba(110,251,177,0.3); }
.td-root .td-pill-bad  { background: rgba(255,107,107,0.13); color: var(--tdp-bad);  border-color: rgba(255,107,107,0.3); }
.td-root .td-pill-warn { background: rgba(255,184,102,0.13); color: var(--tdp-warn); border-color: rgba(255,184,102,0.3); }
.td-root .td-pill-info { background: rgba(110,200,255,0.13); color: var(--tdp-accent); border-color: rgba(110,200,255,0.3); }
.td-root .td-pill-dim  { background: var(--tdp-bg-2); color: var(--tdp-text-2); border-color: var(--tdp-line-strong); }

.td-root .td-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--tdp-bg-2);
  color: var(--tdp-text-2);
  border: 1px solid var(--tdp-line);
}
.td-root .td-tag-mono { font-family: 'JetBrainsMono Nerd Font', 'Fira Code', monospace; font-size: 10.5px; }
.td-root .td-tag-ok { background: rgba(110,251,177,0.10); color: var(--tdp-ok); border-color: rgba(110,251,177,0.25); }

/* ─── BUTTONS ─────────────────────────────────────────────────────── */
.td-root .td-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: var(--tdp-r) !important;
  border: 1px solid var(--tdp-line-strong) !important;
  background: var(--tdp-bg-2) !important;
  color: var(--tdp-text) !important;
  cursor: pointer;
  transition: background var(--tdp-trans), transform var(--tdp-trans), box-shadow var(--tdp-trans), border-color var(--tdp-trans);
  white-space: nowrap;
}
.td-root .td-btn:hover {
  background: var(--tdp-bg-3) !important;
  border-color: var(--tdp-line-accent) !important;
  transform: translateY(-1px);
  box-shadow: var(--tdp-shadow-sm);
}
.td-root .td-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.td-root .td-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.td-root .td-btn-sm { padding: 3px 8px !important; font-size: 10.5px !important; }
.td-root .td-btn-ghost { background: transparent !important; }
.td-root .td-btn-ok    { background: rgba(110,251,177,0.12) !important; color: var(--tdp-ok) !important; border-color: rgba(110,251,177,0.35) !important; }
.td-root .td-btn-warn  { background: rgba(255,184,102,0.12) !important; color: var(--tdp-warn) !important; border-color: rgba(255,184,102,0.35) !important; }
.td-root .td-btn-bad   { background: rgba(255,107,107,0.12) !important; color: var(--tdp-bad) !important; border-color: rgba(255,107,107,0.35) !important; }

/* ─── CARDS (universal) ───────────────────────────────────────────── */
.td-root .td-card {
  background: linear-gradient(180deg, var(--tdp-bg-2) 0%, var(--tdp-bg-1) 100%) !important;
  border: 1px solid var(--tdp-line) !important;
  border-radius: var(--tdp-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--tdp-shadow-sm);
  transition: border-color var(--tdp-trans), box-shadow var(--tdp-trans);
}
.td-root .td-card:hover { border-color: var(--tdp-line-strong) !important; }
.td-root .td-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--tdp-text-2);
  text-transform: uppercase;
  background: var(--tdp-bg-2);
  border-bottom: 1px solid var(--tdp-line);
}

/* ─── 2-COL LAYOUT ────────────────────────────────────────────────── */
.td-root .td-cols {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important;
  gap: 12px !important;
  align-items: start;
}
.td-root .td-col-l, .td-root .td-col-r {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ─── MONEY CARD ──────────────────────────────────────────────────── */
.td-root .td-grid-money {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.td-root .td-grid-money .td-kv {
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  border-right: 1px solid var(--tdp-line) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  position: relative;
  transition: background var(--tdp-trans);
}
.td-root .td-grid-money .td-kv:hover { background: var(--tdp-bg-1) !important; }
.td-root .td-grid-money .td-kv:last-child { border-right: none !important; }
.td-root .td-grid-money .td-kv-k {
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tdp-text-3) !important;
  font-weight: 700;
}
.td-root .td-grid-money .td-kv-v {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--tdp-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* Hero stake highlight */
.td-root .td-grid-money .td-kv:first-child .td-kv-v { color: var(--tdp-accent); }
.td-root .td-grid-money .td-kv:nth-child(3) .td-kv-v { color: var(--tdp-money); }

/* ─── PLAYER CARD ─────────────────────────────────────────────────── */
.td-root .td-user-row {
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap;
}
.td-root .td-user-name { font-size: 13.5px !important; }
.td-root .td-user-name strong { color: var(--tdp-accent); font-weight: 700; }
.td-root .td-user-role {
  background: var(--tdp-bg-2);
  color: var(--tdp-text-2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
}
.td-root .td-user-chain {
  padding: 8px 14px 12px !important;
  border-top: 1px dashed var(--tdp-line);
}
.td-root .td-chain-nodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.td-root .td-chain-node {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line);
  padding: 3px 9px;
  border-radius: var(--tdp-r);
  text-decoration: none;
  font-size: 11px;
  color: var(--tdp-text);
  transition: all var(--tdp-trans);
}
.td-root .td-chain-node:hover {
  background: var(--tdp-bg-3);
  border-color: var(--tdp-line-accent);
  transform: translateY(-1px);
}
.td-root .td-chain-self { background: rgba(110,200,255,0.10) !important; border-color: rgba(110,200,255,0.3) !important; }
.td-root .td-chain-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tdp-text-3);
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 3px;
}
.td-root .td-chain-sep { color: var(--tdp-text-3); font-size: 11px; }

/* ─── SELECTIONS ──────────────────────────────────────────────────── */
.td-root .td-sel-cards {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
}
.td-root .td-sel-card {
  padding: 10px 12px !important;
  background: var(--tdp-bg-1) !important;
  border: 1px solid var(--tdp-line) !important;
  border-left-width: 3px !important;
  border-left-color: var(--tdp-text-3) !important;
  border-radius: var(--tdp-r) !important;
  transition: border-color var(--tdp-trans), background var(--tdp-trans);
}
.td-root .td-sel-card:hover {
  background: var(--tdp-bg-2) !important;
  border-color: var(--tdp-line-strong) !important;
}
.td-root .td-sel-card.is-live {
  border-left-color: var(--tdp-bad) !important;
}
.td-root .td-sel-card.is-prematch {
  border-left-color: var(--tdp-accent) !important;
}
.td-root .td-sel-card.has-sig-bad {
  background: linear-gradient(90deg, rgba(255,107,107,0.04) 0%, var(--tdp-bg-1) 50%) !important;
}

.td-root .td-sel-card-head {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--tdp-line);
}
.td-root .td-sel-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tdp-bg-3);
  color: var(--tdp-text);
  font-size: 11px !important;
  font-weight: 700;
  border: 1px solid var(--tdp-line-strong);
}
.td-root .td-sel-sport {
  font-size: 11px;
  font-weight: 600;
  color: var(--tdp-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.td-root .td-sel-state {
  margin-left: auto;
}
.td-root .td-mres-btn {
  padding: 4px 10px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border-radius: var(--tdp-r) !important;
  background: var(--tdp-bg-2) !important;
  color: var(--tdp-accent) !important;
  border: 1px solid var(--tdp-line-accent) !important;
  cursor: pointer;
  transition: all var(--tdp-trans);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.td-root .td-mres-btn:hover {
  background: rgba(110,200,255,0.18) !important;
  transform: translateY(-1px);
}

.td-root .td-sel-match-block {
  display: flex !important;
  align-items: baseline;
  gap: 8px !important;
  flex-wrap: wrap;
  padding: 4px 0 !important;
  margin-bottom: 4px !important;
}
.td-root .td-sel-match-link {
  color: var(--tdp-text);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: color var(--tdp-trans);
}
.td-root .td-sel-match-link:hover { color: var(--tdp-accent); }
.td-root .td-sel-home, .td-root .td-sel-away { font-weight: 700; }
.td-root .td-sel-vs {
  color: var(--tdp-text-3);
  font-size: 11px;
  font-weight: 500;
}
.td-root .td-sel-mid {
  font-family: monospace;
  font-size: 10px !important;
  color: var(--tdp-text-3) !important;
  background: var(--tdp-bg-2);
  padding: 1px 5px;
  border-radius: 3px;
}

.td-root .td-sel-bet-line {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px !important;
  padding: 6px 8px !important;
  margin-bottom: 8px !important;
  background: var(--tdp-bg-2);
  border-radius: var(--tdp-r);
  border: 1px solid var(--tdp-line);
}
.td-root .td-sel-market {
  font-size: 11.5px !important;
  color: var(--tdp-text-2);
  font-weight: 500;
}
.td-root .td-sel-sep { color: var(--tdp-text-3); }
.td-root .td-sel-outcome {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--tdp-text);
}
.td-root .td-sel-odds {
  margin-left: auto !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--tdp-money) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: rgba(255,227,90,0.08);
  padding: 2px 10px !important;
  border-radius: var(--tdp-r);
  border: 1px solid rgba(255,227,90,0.2);
  text-align: right !important;
}

/* ─── PER-LEG PANELS (5-panel grid) — refined ─────────────────────── */
.td-root .td-sel-pnl {
  background: var(--tdp-bg-1) !important;
  border: 1px solid var(--tdp-line) !important;
  border-radius: var(--tdp-r) !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.td-root .td-sel-pnl-match   { border-left: 3px solid var(--tdp-accent) !important; }
.td-root .td-sel-pnl-signal  { border-left: 3px solid var(--tdp-warn) !important; }
.td-root .td-sel-pnl-verdict { border-left: 3px solid var(--tdp-money) !important; }
.td-root .td-sel-pnl-history { border-left: 3px solid var(--tdp-purple) !important; }
.td-root .td-sel-pnl-events  { border-left: 3px solid var(--tdp-ok) !important; }

.td-root .td-sel-pnl-head {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: var(--tdp-text-2) !important;
  text-transform: uppercase;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px dashed var(--tdp-line) !important;
  margin-bottom: 4px !important;
}
.td-root .td-sel-pnl-icon { font-size: 13px; opacity: 0.85; }
.td-root .td-sel-pnl-head-clk { cursor: pointer; transition: color var(--tdp-trans); }
.td-root .td-sel-pnl-head-clk:hover { color: var(--tdp-accent) !important; }

.td-root .td-sel-pnl-kv {
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  gap: 8px !important;
  padding: 2px 0 !important;
  align-items: baseline;
  min-width: 0;
  border-radius: 3px;
  transition: background var(--tdp-trans);
}
.td-root .td-sel-pnl-kv:hover { background: var(--tdp-bg-2); }
.td-root .td-sel-pnl-k {
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tdp-text-3) !important;
  font-weight: 600;
}
.td-root .td-sel-pnl-v {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--tdp-text);
  word-break: break-word;
}

/* ─── AUDIT TIMELINE ──────────────────────────────────────────────── */
.td-root .td-aud-list {
  padding: 8px !important;
  max-height: 760px !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tdp-line-strong) transparent;
}
.td-root .td-aud-list::-webkit-scrollbar { width: 6px; }
.td-root .td-aud-list::-webkit-scrollbar-thumb { background: var(--tdp-line-strong); border-radius: 3px; }

.td-root .td-aud-row {
  padding: 8px 10px !important;
  margin-bottom: 4px !important;
  background: var(--tdp-bg-1) !important;
  border-radius: var(--tdp-r) !important;
  border: 1px solid transparent;
  transition: background var(--tdp-trans), border-color var(--tdp-trans), transform var(--tdp-trans);
  position: relative;
}
.td-root .td-aud-row:hover {
  background: var(--tdp-bg-2) !important;
  border-color: var(--tdp-line) !important;
  transform: translateX(2px);
}
.td-root .td-aud-row-bad  { border-left: 3px solid var(--tdp-bad)    !important; }
.td-root .td-aud-row-warn { border-left: 3px solid var(--tdp-warn)   !important; }
.td-root .td-aud-row-ok   { border-left: 3px solid var(--tdp-ok)     !important; }
.td-root .td-aud-row-info { border-left: 3px solid var(--tdp-accent) !important; }
.td-root .td-aud-row-dim  { border-left: 3px solid var(--tdp-text-3) !important; }

.td-root .td-aud-stem { gap: 0 !important; }
.td-root .td-aud-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  background: var(--tdp-bg-3);
}
.td-root .td-aud-icon-bad  { background: rgba(255,107,107,0.18) !important; }
.td-root .td-aud-icon-warn { background: rgba(255,184,102,0.18) !important; }
.td-root .td-aud-icon-ok   { background: rgba(110,251,177,0.18) !important; }
.td-root .td-aud-icon-info { background: rgba(110,200,255,0.18) !important; }
.td-root .td-aud-icon-dim  { background: var(--tdp-bg-3) !important; color: var(--tdp-text-2); }

.td-root .td-aud-head-line {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px !important;
  font-size: 11.5px !important;
  margin-bottom: 2px;
}
.td-root .td-aud-head-line strong { font-size: 12px; font-weight: 700; }
.td-root .td-aud-fact {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line);
  margin-right: 3px;
  margin-top: 2px;
}
.td-root .td-aud-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--tdp-purple);
  color: #fff;
  margin-left: 4px;
}

/* ─── ACTIONS PANEL ───────────────────────────────────────────────── */
.td-root .td-act-box {
  padding: 12px 14px !important;
}
.td-root .td-act-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
}

/* ─── PENDING OFFER BANNER ────────────────────────────────────────── */
.td-root .td-offer-banner {
  background: linear-gradient(90deg, rgba(255,184,102,0.10) 0%, rgba(255,184,102,0.04) 100%) !important;
  border: 1px solid rgba(255,184,102,0.3) !important;
  border-left: 4px solid var(--tdp-warn) !important;
  border-radius: var(--tdp-r-lg) !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  position: relative;
  overflow: hidden;
}
.td-root .td-offer-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,184,102,0.06) 50%, transparent 100%);
  animation: tdpShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tdpShimmer { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }
.td-root .td-offer-banner-head { font-size: 12.5px; margin-bottom: 4px; }
.td-root .td-offer-new { color: var(--tdp-warn); }

/* ─── RISK HERO REFINEMENT ────────────────────────────────────────── */
.td-root .td-risk-hero {
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  background: linear-gradient(135deg, rgba(20,30,45,0.85) 0%, rgba(15,20,30,0.95) 100%) !important;
  border-radius: var(--tdp-r-lg) !important;
  position: relative;
  overflow: hidden;
}
.td-root .td-risk-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tdp-line-accent), transparent);
}
.td-root .td-risk-hero.td-risk-high {
  box-shadow: 0 8px 32px rgba(255,107,107,0.18), inset 0 1px 0 rgba(255,107,107,0.2) !important;
}
.td-root .td-risk-score-num { font-size: 44px !important; }
.td-root .td-risk-stat {
  transition: all var(--tdp-trans);
  cursor: default;
}
.td-root .td-risk-stat:hover {
  transform: translateY(-2px);
  border-color: var(--tdp-line-accent) !important;
  box-shadow: var(--tdp-shadow-sm);
}
.td-root .td-risk-chip {
  transition: transform var(--tdp-trans);
  cursor: default;
}
.td-root .td-risk-chip:hover {
  transform: translateY(-1px) scale(1.02);
}
.td-root .td-risk-rec {
  transition: background var(--tdp-trans), padding-left var(--tdp-trans);
}
.td-root .td-risk-rec:hover {
  padding-left: 14px !important;
}

/* ─── EMPTY / LOADING STATES ──────────────────────────────────────── */
.td-root .td-loading,
.td-root .td-empty,
.td-root .td-error-box {
  padding: 32px !important;
  text-align: center;
  color: var(--tdp-text-2);
  font-size: 13px;
  background: var(--tdp-bg-1);
  border: 1px dashed var(--tdp-line);
  border-radius: var(--tdp-r-lg);
}
.td-root .td-loading::after {
  content: " ●";
  animation: tdpDots 1.4s infinite;
}
@keyframes tdpDots { 0% { content: " ●"; } 33% { content: " ● ●"; } 66% { content: " ● ● ●"; } }

/* ─── TOAST ───────────────────────────────────────────────────────── */
.td-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  padding: 10px 16px;
  border-radius: var(--tdp-r);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--tdp-shadow-lg);
  transition: opacity 250ms ease;
  border: 1px solid;
}
.td-toast-ok  { background: rgba(110,251,177,0.18); color: #6efbb1; border-color: rgba(110,251,177,0.4); }
.td-toast-bad { background: rgba(255,107,107,0.18); color: #ff8a8a; border-color: rgba(255,107,107,0.4); }

/* ─── MOBILE ──────────────────────────────────────────────────────── */

/* ─── MICRO-INTERACTIONS: focus rings ─────────────────────────────── */
.td-root *:focus-visible {
  outline: 2px solid var(--tdp-accent);
  outline-offset: 2px;
  border-radius: var(--tdp-r);
}
.td-root .td-btn:focus-visible {
  outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 2 · v=polish-2026051740
 * Focus: audit timeline rail, skeleton loaders, stat tooltips, micro-fixes
 * ═════════════════════════════════════════════════════════════════════ */

/* ─── AUDIT TIMELINE: continuous vertical rail ────────────────────── */
.td-root .td-aud-list {
  position: relative;
  padding: 8px 8px 8px 14px !important;
}
/* Vertical spine running down the icon column — single continuous line */
.td-root .td-aud-list::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--tdp-line-strong) 8%,
    var(--tdp-line-strong) 92%,
    transparent 100%);
  border-radius: 1px;
  pointer-events: none;
}
.td-root .td-aud-row {
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  gap: 10px !important;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.td-root .td-aud-stem {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}
.td-root .td-aud-bar {
  display: none !important;  /* spine handles it via list::before */
}
.td-root .td-aud-icon {
  position: relative;
  z-index: 2;
  border: 2px solid var(--tdp-bg-0);
  box-shadow: 0 0 0 1px var(--tdp-line-strong);
  transition: transform var(--tdp-trans), box-shadow var(--tdp-trans);
}
.td-root .td-aud-row:hover .td-aud-icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--tdp-accent), 0 0 16px rgba(110,200,255,0.4);
}
.td-root .td-aud-icon-bad  { box-shadow: 0 0 0 1px rgba(255,107,107,0.5); }
.td-root .td-aud-icon-warn { box-shadow: 0 0 0 1px rgba(255,184,102,0.5); }
.td-root .td-aud-icon-ok   { box-shadow: 0 0 0 1px rgba(110,251,177,0.5); }
.td-root .td-aud-icon-info { box-shadow: 0 0 0 1px rgba(110,200,255,0.5); }

/* Reason text — softer */
.td-root .td-aud-reason {
  margin-top: 4px;
  padding: 5px 8px;
  background: var(--tdp-bg-2);
  border-left: 2px solid var(--tdp-line-strong);
  border-radius: 3px;
  font-size: 11px;
  color: var(--tdp-text-2);
  font-style: italic;
  line-height: 1.45;
}

.td-root .td-aud-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Actor pill: tighten + flow */
.td-root .td-aud-actor {
  font-size: 9.5px !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  letter-spacing: 0.06em !important;
  margin-right: 2px;
  border: none !important;
}
.td-root .td-aud-actor-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-right: 4px;
}

/* ─── SKELETON LOADERS (animated shimmer) ─────────────────────────── */
.td-root .td-loading {
  position: relative;
  background: var(--tdp-bg-1) !important;
  border: 1px solid var(--tdp-line) !important;
  border-radius: var(--tdp-r-lg) !important;
  padding: 24px !important;
  text-align: center;
  color: var(--tdp-text-2);
  overflow: hidden;
}
.td-root .td-loading::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: tdpSkel 1.6s linear infinite;
}
@keyframes tdpSkel { from { left: -100%; } to { left: 200%; } }

/* Skeleton lines for cards in loading state */
.td-skel {
  background: linear-gradient(90deg,
    var(--tdp-bg-2) 0%,
    var(--tdp-bg-3) 50%,
    var(--tdp-bg-2) 100%);
  background-size: 200% 100%;
  animation: tdpShimmerBg 1.4s ease-in-out infinite;
  border-radius: var(--tdp-r-sm);
  display: inline-block;
}
@keyframes tdpShimmerBg { 0%, 100% { background-position: 0% 0; } 50% { background-position: -200% 0; } }
.td-skel-line  { height: 12px; width: 100%; margin: 4px 0; }
.td-skel-title { height: 18px; width: 40%; margin: 4px 0 8px; }
.td-skel-pill  { height: 14px; width: 60px; margin: 0 4px 4px 0; border-radius: 10px; }

/* ─── RISK STAT TOOLTIPS via title + visual hint ──────────────────── */
.td-root .td-risk-stat[title] {
  position: relative;
}
.td-root .td-risk-stat[title]::after {
  content: "ⓘ";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  color: var(--tdp-text-3);
  opacity: 0;
  transition: opacity var(--tdp-trans);
}
.td-root .td-risk-stat[title]:hover::after {
  opacity: 1;
}

/* ─── RISK FACTOR CHIPS: weight badge polished ────────────────────── */
.td-root .td-risk-chip {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 14px !important;
  gap: 6px !important;
}
.td-root .td-risk-chip-w {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,0.4) !important;
  letter-spacing: -0.02em;
  font-family: 'JetBrainsMono Nerd Font', 'Fira Code', monospace;
}

/* ─── DAY DIVIDER (date marker between days in audit) ─────────────── */
.td-root .td-aud-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tdp-text-3);
  font-weight: 700;
}
.td-root .td-aud-day::before,
.td-root .td-aud-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tdp-line);
}

/* ─── PRINT STYLES (clean printout for record-keeping) ───────────── */

/* ─── KEYBOARD HINTS ──────────────────────────────────────────────── */
.td-root kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--tdp-bg-3);
  border: 1px solid var(--tdp-line-strong);
  border-radius: 3px;
  font-family: 'JetBrainsMono Nerd Font', monospace;
  font-size: 10px;
  color: var(--tdp-text-2);
  box-shadow: inset 0 -1px 0 var(--tdp-line-strong);
}

/* ─── SCROLLBAR (global polish for the whole page) ────────────────── */
.td-root *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.td-root *::-webkit-scrollbar-track {
  background: transparent;
}
.td-root *::-webkit-scrollbar-thumb {
  background: var(--tdp-line-strong);
  border-radius: 3px;
}
.td-root *::-webkit-scrollbar-thumb:hover {
  background: var(--tdp-text-3);
}

/* ─── ANIMATIONS: subtle entrance for newly loaded cards ──────────── */
@keyframes tdpFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.td-root .td-card,
.td-root .td-risk-hero,
.td-root .td-sel-card {
  animation: tdpFadeIn 280ms ease-out backwards;
}
.td-root .td-cols .td-col-l > .td-card:nth-child(1) { animation-delay: 0.05s; }
.td-root .td-cols .td-col-l > .td-card:nth-child(2) { animation-delay: 0.10s; }
.td-root .td-cols .td-col-l > .td-card:nth-child(3) { animation-delay: 0.15s; }
.td-root .td-cols .td-col-r > .td-card:nth-child(1) { animation-delay: 0.20s; }
.td-root .td-cols .td-col-r > .td-card:nth-child(2) { animation-delay: 0.25s; }

/* ─── HEAD-LINE refinement: actor + verb readability ───────────── */
.td-root .td-aud-head-line {
  line-height: 1.5 !important;
}
.td-root .td-aud-head-line strong {
  color: var(--tdp-text);
}
.td-root .td-aud-fulldate { display: none; }  /* tooltip only */

/* ─── HOVER PREVIEW for muted timestamps ──────────────────────────── */
.td-root .td-muted[title]:hover {
  cursor: help;
  color: var(--tdp-text);
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 3 · v=polish-2026051750
 * Selection card visual hierarchy: sport icon badge, country tag,
 * score-on-match-line, LIVE pulsing dot, refined separator
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-sel-card-head {
  align-items: center !important;
}
.td-root .td-sel-sport-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line);
  border-radius: 50%;
}
.td-root .td-sel-co-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  background: var(--tdp-bg-2);
  color: var(--tdp-text-2);
  border-radius: 10px;
  border: 1px solid var(--tdp-line);
  white-space: nowrap;
  margin-left: 2px;
}

/* LIVE pulsing dot */
.td-root .td-live-dot {
  display: inline-block;
  color: #ff3b3b;
  animation: tdpLivePulse 1.4s ease-in-out infinite;
  font-size: 10px;
  margin-right: 1px;
}
@keyframes tdpLivePulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Match block now has right-floating score */
.td-root .td-sel-match-block {
  position: relative;
}
.td-root .td-sel-score {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line);
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.td-root .td-sel-score-final { background: rgba(110,251,177,0.08); border-color: rgba(110,251,177,0.25); }
.td-root .td-sel-score-final strong { color: var(--tdp-ok); }
.td-root .td-sel-score-live  { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.25); }
.td-root .td-sel-score-live strong { color: var(--tdp-bad); }

/* Bet line: cleaner separator, market subtler */
.td-root .td-sel-bet-line {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.td-root .td-sel-market {
  font-size: 11.5px !important;
  color: var(--tdp-text-2) !important;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.td-root .td-sel-sep {
  color: var(--tdp-text-3);
  font-size: 11px;
  margin: 0 4px;
  flex-shrink: 0;
}
.td-root .td-sel-outcome {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tdp-text);
  flex-shrink: 0;
}
.td-root .td-sel-odds {
  margin-left: auto !important;
  flex-shrink: 0;
  font-size: 17px !important;
  padding: 3px 14px !important;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -2px 0 rgba(255,227,90,0.25);
}

/* Card hover lifts subtly */
.td-root .td-sel-card {
  transition: all var(--tdp-trans);
}
.td-root .td-sel-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--tdp-shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 5 · v=polish-2026051770
 * Risk Hero stat tiles regrouped into 4 logical sections:
 * Aktiviteti / Volumi / Profili / Llogaria
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-risk-pi-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.td-root .td-risk-pi-section {
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--tdp-line);
  border-radius: var(--tdp-r);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--tdp-trans);
}
.td-root .td-risk-pi-section:hover {
  border-color: var(--tdp-line-strong);
}
.td-root .td-risk-pi-section-head {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdp-text-2);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--tdp-line);
}

/* Override the old 8-col grid to be 4-col (1 group = 4 tiles) */
.td-root .td-risk-pi-section .td-risk-pi-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}

/* Hide the legacy flat 8-col grid if it still exists somewhere */

/* Tile refinement inside groups */
.td-root .td-risk-pi-section .td-risk-stat {
  background: var(--tdp-bg-1);
  border: 1px solid var(--tdp-line);
}
.td-root .td-risk-pi-section .td-risk-stat-label { font-size: 9px; }
.td-root .td-risk-pi-section .td-risk-stat-value { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 7 · v=polish-2026051790
 * Network intelligence panel: burst, siblings, cluster ROI
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-risk-net {
  background: rgba(110,200,255,0.04);
  border: 1px solid rgba(110,200,255,0.18);
  border-radius: var(--tdp-r);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.td-root .td-risk-net-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--tdp-accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(110,200,255,0.18);
}
.td-root .td-risk-net-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px;
}
.td-root .td-risk-net-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--tdp-r-sm);
  background: var(--tdp-bg-1);
  border-left: 3px solid var(--tdp-text-3);
  transition: background var(--tdp-trans), transform var(--tdp-trans);
}
.td-root .td-risk-net-item:hover {
  background: var(--tdp-bg-2);
  transform: translateX(2px);
}
.td-root .td-risk-net-bad  { border-left-color: var(--tdp-bad);    background: rgba(255,107,107,0.06); }
.td-root .td-risk-net-warn { border-left-color: var(--tdp-warn);   background: rgba(255,184,102,0.05); }
.td-root .td-risk-net-info { border-left-color: var(--tdp-accent); background: rgba(110,200,255,0.04); }
.td-root .td-risk-net-ok   { border-left-color: var(--tdp-ok);     background: rgba(110,251,177,0.04); }

.td-root .td-risk-net-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  height: 100%;
}
.td-root .td-risk-net-body { min-width: 0; }
.td-root .td-risk-net-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tdp-text-2);
  font-weight: 600;
  margin-bottom: 2px;
}
.td-root .td-risk-net-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tdp-text);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.td-root .td-risk-net-bad  .td-risk-net-val { color: var(--tdp-bad); }
.td-root .td-risk-net-warn .td-risk-net-val { color: var(--tdp-warn); }
.td-root .td-risk-net-ok   .td-risk-net-val { color: var(--tdp-ok); }
.td-root .td-risk-net-hint {
  font-size: 10.5px;
  color: var(--tdp-text-2);
  font-style: italic;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 8 · v=polish-2026051800
 * Money card rebuilt: hero stake → odds × → potential → actual flow
 * with secondary stats below
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-money-card .td-card-head-row {
  justify-content: space-between;
}
.td-root .td-money-state-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.td-root .td-money-state-won  { background: rgba(110,251,177,0.15); color: var(--tdp-ok);  border: 1px solid rgba(110,251,177,0.35); }
.td-root .td-money-state-lost { background: rgba(255,107,107,0.15); color: var(--tdp-bad); border: 1px solid rgba(255,107,107,0.35); }
.td-root .td-money-state-void { background: rgba(140,170,200,0.10); color: var(--tdp-text-2); border: 1px solid var(--tdp-line-strong); }

/* Flow row: hero ── arrow ── hero ── arrow ── hero */
.td-root .td-money-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 14px 14px 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.td-root .td-money-flow::-webkit-scrollbar { display: none; }

.td-root .td-money-hero {
  flex: 1 1 0;
  min-width: 130px;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line);
  border-radius: var(--tdp-r);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: border-color var(--tdp-trans), transform var(--tdp-trans);
}
.td-root .td-money-hero:hover {
  border-color: var(--tdp-line-strong);
  transform: translateY(-1px);
}
.td-root .td-money-hero-label {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tdp-text-3);
  font-weight: 700;
}
.td-root .td-money-hero-value {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tdp-text);
}
.td-root .td-money-hero-sub {
  font-size: 10px;
  color: var(--tdp-text-2);
  font-weight: 600;
}
.td-root .td-money-hero-stake { border-left: 3px solid var(--tdp-accent); }
.td-root .td-money-hero-stake .td-money-hero-value { color: var(--tdp-accent); }
.td-root .td-money-hero-pot   { border-left: 3px solid var(--tdp-money); }
.td-root .td-money-hero-pot .td-money-hero-value { color: var(--tdp-money); }
.td-root .td-money-hero-won   { border-left: 3px solid var(--tdp-ok); background: rgba(110,251,177,0.06); }
.td-root .td-money-hero-won .td-money-hero-value { color: var(--tdp-ok); }
.td-root .td-money-hero-lost  { border-left: 3px solid var(--tdp-bad); background: rgba(255,107,107,0.06); }
.td-root .td-money-hero-lost .td-money-hero-value { color: var(--tdp-bad); }
.td-root .td-money-hero-void  { border-left: 3px solid var(--tdp-text-3); background: rgba(140,170,200,0.05); }

/* v4p32 iter5 — money flow connectors. Was 13px text floating between
 * three big hero cards (looked like orphan annotations). Now each arrow
 * is a proper visual connector: fixed-width pill, dotted under-line that
 * reinforces left→right flow, accent color tier matching the adjacent card. */
.td-root .td-money-arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--tdp-text-2, #8a93a6);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 8px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 80px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 0%, rgba(140,150,170,0.06) 30%, rgba(140,150,170,0.06) 70%, transparent 100%);
}
.td-root .td-money-arrow::before,
.td-root .td-money-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(140,150,170,0.25);
}
.td-root .td-money-arrow::before { left: -8px; }
.td-root .td-money-arrow::after  { right: -8px; }
.td-root .td-money-arrow-result {
  font-size: 24px;
  color: var(--tdp-text, #c9d2e3);
  font-weight: 900;
  background: rgba(140,150,170,0.10);
  border: 1px solid rgba(140,150,170,0.20);
}

/* Secondary stats row */
.td-root .td-money-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--tdp-line);
}
.td-root .td-money-stat {
  padding: 10px 14px;
  border-right: 1px solid var(--tdp-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background var(--tdp-trans);
}
.td-root .td-money-stat:hover { background: var(--tdp-bg-1); }
.td-root .td-money-stat:last-child { border-right: none; }
.td-root .td-money-stat-k {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tdp-text-3);
  font-weight: 700;
}
.td-root .td-money-stat-v {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tdp-text);
  letter-spacing: -0.01em;
}
.td-root .td-money-stat-sub {
  font-size: 10px;
  color: var(--tdp-text-2);
}

/* Override the old grid-money styles since we no longer use them */

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 9 · v=polish-2026051810
 * Header: state-aware subtitle + condensed risk score badge
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-head-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.td-root .td-head-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.td-root .td-head-subtitle {
  font-size: 11.5px;
  color: var(--tdp-text-2);
  font-weight: 500;
  letter-spacing: 0.005em;
  margin-left: 1px;
}

/* Condensed risk badge — clickable, scrolls to hero */
.td-root .td-head-risk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--tdp-trans);
}
.td-root .td-head-risk:hover {
  transform: translateY(-1px);
  box-shadow: var(--tdp-shadow-sm);
}
.td-root .td-head-risk-low  { background: rgba(110,251,177,0.10); color: var(--tdp-ok);  border-color: rgba(110,251,177,0.35); }
.td-root .td-head-risk-med  { background: rgba(255,184,102,0.12); color: var(--tdp-warn); border-color: rgba(255,184,102,0.4); }
.td-root .td-head-risk-high { background: rgba(255,107,107,0.15); color: var(--tdp-bad); border-color: rgba(255,107,107,0.45); animation: tdpRiskBadgePulse 2.5s ease-in-out infinite; }
/* v4p32 iter13 — LOJTARI player quick-stats row fills the card stretch
 * space when paired with PARA. 4 KPIs in a row: Fituese / Bast mes. / 24h / CLV. */
.td-root .td-user-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ta-line);
  margin-top: auto; /* pin to bottom of stretched card */
}
.td-root .td-user-stat {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: help;
  transition: background 140ms ease-out;
}
.td-root .td-user-stat:hover { background: rgba(255,255,255,0.025); }
.td-root .td-user-stat::after {
  content: "";
  position: absolute;
  right: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(140,150,170,0.18) 30%, rgba(140,150,170,0.18) 70%, transparent 100%);
}
.td-root .td-user-stat:last-child::after { display: none; }
.td-root .td-user-stat-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tdp-text-3, #6b7280);
}
.td-root .td-user-stat-v {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tdp-text, #c9d2e3);
}
.td-root .td-user-stat-v.is-bad { color: #ff8090; }

/* v4p32 iter14 — DETAJE SHTESË tabs: dim empty (count=0) tabs, brighten
 * tabs with content. Operator's eye lands on the useful tabs first. */
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head.is-empty {
  opacity: 0.45;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head.is-empty:hover {
  opacity: 1;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head.has-data {
  opacity: 1;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head.has-data .td-drawer-count {
  background: var(--ta-accent-bg, rgba(90,140,255,0.10)) !important;
  color: var(--ta-accent, #5a8cff) !important;
  border-color: var(--ta-accent-border, rgba(90,140,255,0.4)) !important;
}

/* v4p32 iter11 — HISTORIKU summary chips inline in card head */
.td-root .td-aud-sum-chips {
  display: inline-flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  margin-right: 8px;
  flex-wrap: wrap;
}
.td-root .td-aud-sum-chip {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--ta-mono, 'Fira Code', monospace);
  white-space: nowrap;
  cursor: help;
}
.td-root .td-aud-sum-player { background: rgba(90,140,255,0.10); color: #5a8cff; border: 1px solid rgba(90,140,255,0.30); }
.td-root .td-aud-sum-op     { background: rgba(255,200,87,0.10); color: #ffc857; border: 1px solid rgba(255,200,87,0.28); }
.td-root .td-aud-sum-sys    { background: rgba(140,150,170,0.08); color: #a8b2c4; border: 1px solid rgba(140,150,170,0.25); }
.td-root .td-aud-sum-slow   { background: rgba(255,88,112,0.10); color: #ff8090; border: 1px solid rgba(255,88,112,0.30); }

/* v4p32 iter6 — risk-error variant: warn yellow, click reloads */
.td-root .td-head-risk-err { background: rgba(255,200,87,0.12); color: #ffc857; border-color: rgba(255,200,87,0.35); cursor: pointer; }
.td-root .td-head-risk-err:hover { background: rgba(255,200,87,0.18); }

@keyframes tdpRiskBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(255,107,107,0); }
}

.td-root .td-head-risk-dot {
  font-size: 8px;
  line-height: 1;
}
.td-root .td-head-risk-num {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.td-root .td-head-risk-lbl {
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

/* Make sure subtitle wraps gracefully */

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 10 · v=polish-2026051820
 * Actions panel: quick-actions strip, hint banners, structured sections
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-act-card { display: flex; flex-direction: column; }

/* Quick action strip — 4 small icon buttons */
.td-root .td-act-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--tdp-line);
}
.td-root .td-act-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  background: var(--tdp-bg-1);
  border: 1px solid var(--tdp-line);
  border-radius: var(--tdp-r-sm);
  font-size: 10px;
  color: var(--tdp-text-2);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--tdp-trans);
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.td-root .td-act-quick-btn:hover {
  background: var(--tdp-bg-3);
  color: var(--tdp-accent);
  border-color: var(--tdp-line-accent);
  transform: translateY(-1px);
}
.td-root .td-act-quick-icon {
  font-size: 16px;
  line-height: 1;
}

/* Hint banners */
/* v4p32 iter16 — hint chips inline horizontal (was 2 stacked banners) */
.td-root .td-act-hints {
  padding: 8px 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--tdp-line);
}
.td-root .td-act-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--tdp-r-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid;
}
.td-root .td-act-hint-info { background: rgba(110,200,255,0.06); color: #6ec8ff; border-color: rgba(110,200,255,0.22); }
.td-root .td-act-hint-warn { background: rgba(255,200,87,0.07);  color: #ffc857; border-color: rgba(255,200,87,0.25); }
.td-root .td-act-hint-bad  { background: rgba(255,88,112,0.08);  color: #ff8090; border-color: rgba(255,88,112,0.30); }
.td-root .td-act-hint-icon { font-size: 13px; flex-shrink: 0; line-height: 1.2; }

/* Structured action sections */
.td-root .td-act-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* v4p32 iter4 — when VEPRIME card spans full page width, lay note + reopen
 * sections side-by-side instead of stacked. Saves vertical space + makes
 * the compact card feel intentional rather than half-empty. */
.td-root-stacked > .td-act-card .td-act-sections {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}
.td-root-stacked > .td-act-card .td-act-sections > .td-act-section {
  border-right: 1px solid var(--ta-line) !important;
}
.td-root-stacked > .td-act-card .td-act-sections > .td-act-section:last-child {
  border-right: none !important;
}
@media (max-width: 900px) {
  .td-root-stacked > .td-act-card .td-act-sections {
    grid-template-columns: 1fr !important;
  }
}
.td-root .td-act-section {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--tdp-line);
  transition: background var(--tdp-trans);
}
.td-root .td-act-section:last-child { border-bottom: none; }
.td-root .td-act-section:hover { background: var(--tdp-bg-1); }
.td-root .td-act-section.is-disabled { opacity: 0.55; }

.td-root .td-act-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.td-root .td-act-section-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}
.td-root .td-act-section-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-root .td-act-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tdp-text);
}
.td-root .td-act-section-desc {
  font-size: 10.5px;
  color: var(--tdp-text-2);
  line-height: 1.4;
}

/* Form polish */
.td-root .td-act-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.td-root .td-textarea {
  width: 100%;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line-strong);
  border-radius: var(--tdp-r-sm);
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--tdp-text);
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--tdp-trans);
}
.td-root .td-textarea:focus {
  outline: none;
  border-color: var(--tdp-accent);
  box-shadow: 0 0 0 2px rgba(110,200,255,0.15);
}
.td-root .td-act-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.td-root .td-act-form-hint { flex: 1; min-width: 100px; }
.td-root .td-act-buttons { display: flex; gap: 6px; }

/* ─── CARD-LEVEL HEALTH GLOW ─────────────────────────────────────── */
.td-root .td-sel-card {
  border-left-width: 4px !important;
  transition: all 220ms cubic-bezier(0.4,0,0.2,1);
}

/* Bad — RED card glow */
.td-root .td-sel-card.has-sig-bad {
  border-left-color: #ff3b3b !important;
  background: linear-gradient(90deg, rgba(255,59,59,0.10) 0%, rgba(255,59,59,0.025) 35%, var(--tdp-bg-1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,59,59,0.25),
    -2px 0 12px -2px rgba(255,59,59,0.30),
    var(--tdp-shadow-sm) !important;
}
.td-root .td-sel-card.has-sig-bad:hover {
  box-shadow:
    0 0 0 1px rgba(255,59,59,0.45),
    -2px 0 18px -2px rgba(255,59,59,0.50),
    var(--tdp-shadow) !important;
}

/* Warn — AMBER card glow */
.td-root .td-sel-card.has-sig-warn {
  border-left-color: #ffa726 !important;
  background: linear-gradient(90deg, rgba(255,167,38,0.07) 0%, rgba(255,167,38,0.02) 35%, var(--tdp-bg-1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,167,38,0.18),
    -2px 0 10px -2px rgba(255,167,38,0.22),
    var(--tdp-shadow-sm) !important;
}

/* Ok — GREEN card glow */
.td-root .td-sel-card.has-sig-ok {
  border-left-color: #5dff9b !important;
  background: linear-gradient(90deg, rgba(93,255,155,0.05) 0%, rgba(93,255,155,0.015) 35%, var(--tdp-bg-1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(93,255,155,0.15),
    -2px 0 8px -2px rgba(93,255,155,0.18),
    var(--tdp-shadow-sm) !important;
}

/* ─── PANEL LEFT-BORDER ACCENTS — bumped to 4px and brighter ───── */
.td-root .td-sel-pnl-match   { border-left-width: 4px !important; border-left-color: #4ec5ff !important; }
.td-root .td-sel-pnl-signal  { border-left-width: 4px !important; border-left-color: #ffa726 !important; }
.td-root .td-sel-pnl-verdict { border-left-width: 4px !important; border-left-color: #ffe35a !important; }
.td-root .td-sel-pnl-history { border-left-width: 4px !important; border-left-color: #c285ff !important; }
.td-root .td-sel-pnl-events  { border-left-width: 4px !important; border-left-color: #5dff9b !important; }

@keyframes tdpHealthPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* ─── 5-PANEL SECTION HEADERS — bolder color ─────────────────── */
.td-root .td-sel-pnl-match   .td-sel-pnl-icon { filter: drop-shadow(0 0 3px rgba(78,197,255,0.4)); }
.td-root .td-sel-pnl-signal  .td-sel-pnl-icon { filter: drop-shadow(0 0 3px rgba(255,167,38,0.4)); }
.td-root .td-sel-pnl-verdict .td-sel-pnl-icon { filter: drop-shadow(0 0 3px rgba(255,227,90,0.4)); }
.td-root .td-sel-pnl-history .td-sel-pnl-icon { filter: drop-shadow(0 0 3px rgba(194,133,255,0.4)); }
.td-root .td-sel-pnl-events  .td-sel-pnl-icon { filter: drop-shadow(0 0 3px rgba(93,255,155,0.4)); }

/* ─── TICKETS LIST: more visible row-bg gradient on health ──────── */
.td-root .td-sel-card.has-sig-bad::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #ff3b3b 0%, #d4001f 100%);
  box-shadow: 0 0 12px rgba(255,59,59,0.6);
  z-index: 1;
  pointer-events: none;
}
.td-root .td-sel-card { position: relative; }

/* ─── STATE PILLS — brighter saturation ──────────────────────── */
.td-root .td-pill-ok   { background: rgba(93,255,155,0.18) !important; color: #5dff9b !important; border-color: rgba(93,255,155,0.45) !important; }
.td-root .td-pill-bad  { background: rgba(255,59,59,0.18) !important; color: #ff5a5a !important; border-color: rgba(255,59,59,0.45) !important; }
.td-root .td-pill-warn { background: rgba(255,167,38,0.18) !important; color: #ffa726 !important; border-color: rgba(255,167,38,0.45) !important; }
.td-root .td-pill-info { background: rgba(78,197,255,0.18) !important; color: #4ec5ff !important; border-color: rgba(78,197,255,0.45) !important; }

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 12 · v=polish-2026051840
 * Risk Score: linear bar → premium circular SVG progress ring with
 * animated fill, glow filter, and centered score number.
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-risk-score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Hide old number display (score now lives inside the ring) */
.td-root .td-risk-score-block .td-risk-score-number { display: none; }

.td-root .td-risk-ring-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-root .td-risk-ring {
  width: 112px;
  height: 112px;
  display: block;
}

/* Track circle — subtle dark background ring */
.td-root .td-risk-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 8;
}

/* Progress arc — colored stroke, glow via filter */
.td-root .td-risk-ring-prog {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.td-root .td-risk-ring-prog-low  { stroke: #5dff9b; }
.td-root .td-risk-ring-prog-med  { stroke: #ffa726; }
.td-root .td-risk-ring-prog-high { stroke: #ff5a5a; }

/* Center number overlay */
.td-root .td-risk-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}
.td-root .td-risk-ring-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px currentColor;
}
.td-root .td-risk-ring-num-low  { color: #5dff9b; }
.td-root .td-risk-ring-num-med  { color: #ffa726; }
.td-root .td-risk-ring-num-high { color: #ff5a5a; }

.td-root .td-risk-ring-max {
  font-size: 10px;
  color: var(--tdp-text-3);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Pulse the high-risk ring subtly */
.td-root .td-risk-ring-prog-high {
  animation: tdpRingPulseHigh 2.6s ease-in-out infinite;
}
@keyframes tdpRingPulseHigh {
  0%, 100% { stroke-width: 8; opacity: 1; }
  50%      { stroke-width: 9; opacity: 0.85; }
}

/* Adjust top row layout for new ring proportions */
.td-root .td-risk-top {
  grid-template-columns: 200px 1fr !important;
  gap: 22px !important;
  align-items: center;
}

/* Override old gauge-track bar (no longer used as primary) */

/* Keep level pill — refine its position under the ring */
.td-root .td-risk-score-block .td-risk-level {
  margin-top: 4px;
  align-self: center;
}

/* Score block label uppercase tighter */
.td-root .td-risk-score-block .td-risk-score-label {
  align-self: center;
  text-align: center;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 14 · v=polish-2026051860
 * Selections card head: disposition summary (won/lost/pending counts,
 * live-leg count, signal-dead leg count) + sug rollup
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-sel-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px !important;
}
.td-root .td-sel-cards-head-l {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.td-root .td-sel-cards-count {
  background: var(--tdp-bg-3);
  color: var(--tdp-text);
  border-radius: 12px;
  padding: 1px 10px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--tdp-line-strong);
}
.td-root .td-sel-sum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.td-root .td-sel-sum-total {
  font-size: 10px;
  color: var(--tdp-text-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  display: none;  /* count is in the head now, this is redundant */
}
.td-root .td-sel-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 11px;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
.td-root .td-sel-sum-won     { background: rgba(93,255,155,0.13); color: #5dff9b; border-color: rgba(93,255,155,0.4); }
.td-root .td-sel-sum-lost    { background: rgba(255,90,90,0.13);  color: #ff5a5a; border-color: rgba(255,90,90,0.4); }
.td-root .td-sel-sum-voided  { background: rgba(140,170,200,0.10); color: var(--tdp-text-2); border-color: var(--tdp-line-strong); }
.td-root .td-sel-sum-pending { background: rgba(255,167,38,0.13);  color: #ffa726; border-color: rgba(255,167,38,0.4); }
.td-root .td-sel-sum-sug     { background: rgba(194,133,255,0.13); color: #c285ff; border-color: rgba(194,133,255,0.4); }
.td-root .td-sel-sum-live    { background: rgba(255,90,90,0.13);   color: #ff5a5a; border-color: rgba(255,90,90,0.4); animation: tdpLivePulseChip 1.5s ease-in-out infinite; }
.td-root .td-sel-sum-sigbad  { background: rgba(255,90,90,0.18);   color: #ffb0b0; border-color: rgba(255,90,90,0.5); }

@keyframes tdpLivePulseChip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,90,0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(255,90,90,0); }
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 15 · v=polish-2026051870
 * Recommendations grouped by kind with section headers + count badges,
 * bullet markers replacing icons for cleaner visual rhythm
 * ═══════════════════════════════════════════════════════════════════ */

.td-root .td-risk-recs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-root .td-risk-recs-group {
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--tdp-line);
  border-radius: var(--tdp-r);
  padding: 8px 10px 10px;
  border-left-width: 3px;
}
.td-root .td-risk-recs-group-bad  { border-left-color: #ff5a5a; background: rgba(255,90,90,0.04); }
.td-root .td-risk-recs-group-warn { border-left-color: #ffa726; background: rgba(255,167,38,0.03); }
.td-root .td-risk-recs-group-info { border-left-color: #4ec5ff; background: rgba(78,197,255,0.03); }
.td-root .td-risk-recs-group-ok   { border-left-color: #5dff9b; background: rgba(93,255,155,0.03); }

.td-root .td-risk-recs-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--tdp-line);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
}
.td-root .td-risk-recs-group-icon {
  font-size: 12px;
  line-height: 1;
}
.td-root .td-risk-recs-group-title {
  flex: 1;
}
.td-root .td-risk-recs-group-bad  .td-risk-recs-group-title,
.td-root .td-risk-recs-group-bad  .td-risk-recs-group-icon  { color: #ff5a5a; }
.td-root .td-risk-recs-group-warn .td-risk-recs-group-title,
.td-root .td-risk-recs-group-warn .td-risk-recs-group-icon  { color: #ffa726; }
.td-root .td-risk-recs-group-info .td-risk-recs-group-title,
.td-root .td-risk-recs-group-info .td-risk-recs-group-icon  { color: #4ec5ff; }
.td-root .td-risk-recs-group-ok   .td-risk-recs-group-title,
.td-root .td-risk-recs-group-ok   .td-risk-recs-group-icon  { color: #5dff9b; }

.td-root .td-risk-recs-group-count {
  background: rgba(0,0,0,0.3);
  color: var(--tdp-text);
  font-family: 'JetBrainsMono Nerd Font', monospace;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 800;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.td-root .td-risk-recs-group-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Override flat .td-risk-rec — now lives inside groups */
.td-root .td-risk-recs-group .td-risk-rec {
  background: transparent !important;
  border-left: none !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
  color: var(--tdp-text);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
  transition: padding-left var(--tdp-trans);
}
.td-root .td-risk-recs-group .td-risk-rec:hover {
  padding-left: 4px !important;
}
.td-root .td-risk-rec-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.td-root .td-risk-rec-bullet-bad  { background: #ff5a5a; box-shadow: 0 0 6px rgba(255,90,90,0.6); }
.td-root .td-risk-rec-bullet-warn { background: #ffa726; box-shadow: 0 0 6px rgba(255,167,38,0.5); }
.td-root .td-risk-rec-bullet-info { background: #4ec5ff; box-shadow: 0 0 5px rgba(78,197,255,0.45); }
.td-root .td-risk-rec-bullet-ok   { background: #5dff9b; box-shadow: 0 0 6px rgba(93,255,155,0.5); }

.td-root .td-risk-rec-text {
  flex: 1;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 16 · v=polish-2026051880
 * Selection legs: COMPACT LIST ROWS by default. Click row to expand.
 * Solves "15 matches scrolling forever" — each leg is now ~36px tall.
 * ═══════════════════════════════════════════════════════════════════ */

/* List container: tight gap between rows */
.td-root .td-sel-cards-list {
  padding: 4px !important;
  gap: 2px !important;
}

@keyframes tdpExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-05-14 — POLISH ITER 17 · v=polish-2026051890
 * Dedup pass: removed Meta strip (Created/Settled/Updated/#id all
 * already in header subtitle + tags). Slimmed Player card to focus
 * on hierarchy chain (Risk Hero already shows username + stats).
 * ═══════════════════════════════════════════════════════════════════ */

/* Hierarchy chain becomes the hero of the Player card */
.td-root .td-user-chain-prominent {
  padding: 12px 14px !important;
  border-top: none !important;
}
.td-root .td-user-chain-prominent .td-chain-nodes {
  margin-top: 0 !important;
  gap: 6px;
}
.td-root .td-user-chain-prominent .td-chain-node {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.td-root .td-user-chain-prominent .td-chain-role {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4 — Pranim-style flat leg list + 4 collapsible drawer sections
 * Mirrors ticket-accept-v2.css `.ta-leg-row` / `.ta-card-body` pattern.
 * Premium Shopify-tier polish: clean cards, proper rhythm, eye-friendly.
 * ═════════════════════════════════════════════════════════════════════ */

/* ─── Selections card head — count + summary chips, no expand toggle ─── */
.td-root .td-sel-cards-head {
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tdp-line);
}
.td-root .td-sel-cards-head-l {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* ─── FLAT LEG LIST — Pranim-style horizontal rows ─────────────────── */
.td-root .td-leg-list {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.td-root .td-leg-row {
  display: grid;
  /* L# | sport | LIVE/PRE+score | match-name | bet | suggestion | odds | state | btn */
  grid-template-columns: 36px 130px 160px minmax(180px, 2.2fr) minmax(160px, 1.7fr) auto 64px 92px 38px;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--tdp-line);
  border-left: 3px solid transparent;
  background: var(--tdp-bg-1);
  transition: background var(--tdp-trans), border-left-color var(--tdp-trans);
  font-size: 12.5px;
  min-height: 38px;
}
.td-root .td-leg-row:hover {
  background: var(--tdp-bg-2);
}
.td-root .td-leg-row:last-child { border-bottom: none; }
.td-root .td-leg-row.is-live { border-left-color: rgba(255,90,90,0.4); }
.td-root .td-leg-row.has-sig-bad  { border-left-color: #ff3b3b !important; background: linear-gradient(90deg, rgba(255,59,59,0.08) 0%, var(--tdp-bg-1) 30%) !important; }
.td-root .td-leg-row.has-sig-warn { border-left-color: #ffa726 !important; background: linear-gradient(90deg, rgba(255,167,38,0.05) 0%, var(--tdp-bg-1) 30%) !important; }
.td-root .td-leg-row.has-sig-ok   { border-left-color: #5dff9b !important; }

/* Header row (column titles) */
.td-root .td-leg-headers {
  background: var(--tdp-bg-2) !important;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tdp-text-3);
  font-weight: 700;
  padding: 6px 14px;
  border-left: none;
  border-bottom: 1px solid var(--tdp-line);
  min-height: auto;
}
.td-root .td-leg-headers:hover { background: var(--tdp-bg-2) !important; }

/* L# pill */
.td-root .td-leg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  background: var(--tdp-bg-3);
  color: var(--tdp-accent);
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 11px;
  border: 1px solid var(--tdp-line-strong);
  font-variant-numeric: tabular-nums;
}

/* Sport */
.td-root .td-leg-sport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--tdp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-root .td-leg-sport-ico { font-size: 14px; line-height: 1; }
.td-root .td-leg-sport-name { color: var(--tdp-text-2); font-weight: 500; }

/* LIVE/PRE channel chip */
.td-root .td-leg-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid;
  white-space: nowrap;
}
.td-root .td-leg-channel.is-live {
  background: rgba(255,59,59,0.13);
  color: #ff5a5a;
  border-color: rgba(255,59,59,0.4);
}
.td-root .td-leg-channel.is-pre {
  background: rgba(78,197,255,0.13);
  color: #4ec5ff;
  border-color: rgba(78,197,255,0.35);
}
.td-root .td-leg-channel-bits {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-left: 2px;
  text-transform: none;
}
.td-root .td-leg-channel .td-live-dot {
  font-size: 8px;
  animation: tdpLivePulse 1.4s ease-in-out infinite;
}

/* Match name link */
.td-root .td-leg-match {
  color: var(--tdp-text);
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--tdp-trans);
}
.td-root .td-leg-match:hover { color: var(--tdp-accent); }
.td-root .td-leg-match strong { font-weight: 700; }
.td-root .td-leg-vs { color: var(--tdp-text-3); font-weight: 500; padding: 0 2px; }

/* Bet (market · pick) */
.td-root .td-leg-bet {
  font-size: 11.5px;
  color: var(--tdp-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.td-root .td-leg-market { color: var(--tdp-text-2); font-weight: 500; }
.td-root .td-leg-sep { color: var(--tdp-text-3); }
.td-root .td-leg-pick { color: var(--tdp-text); font-weight: 700; }

/* Suggestion mini-pill (only when pending) */
.td-root .td-leg-sug {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(194,133,255,0.12);
  color: #c285ff;
  border: 1px solid rgba(194,133,255,0.35);
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Odds chip */
.td-root .td-leg-odds {
  font-size: 14px;
  font-weight: 800;
  color: var(--tdp-money);
  background: rgba(255,227,90,0.10);
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255,227,90,0.25);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
  box-shadow: inset 0 -1px 0 rgba(255,227,90,0.3);
}

/* State pill */
.td-root .td-leg-state { display: inline-flex; }

/* Result button — icon only */
.td-root .td-leg-result-btn {
  width: 30px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line-strong);
  border-radius: 5px;
  color: var(--tdp-accent);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--tdp-trans);
}
.td-root .td-leg-result-btn:hover {
  background: rgba(110,200,255,0.15);
  border-color: var(--tdp-line-accent);
  transform: translateY(-1px);
}

/* ─── DRAWER SECTIONS — collapsible per-leg detail ──────────────────── */
.td-root .td-drawer {
  margin: 0;
  overflow: hidden;
}
.td-root .td-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  background: var(--tdp-bg-2);
  border-bottom: 1px solid transparent;
  transition: background var(--tdp-trans), border-color var(--tdp-trans);
  user-select: none;
}
.td-root .td-drawer-head:hover {
  background: var(--tdp-bg-3);
}
.td-root .td-drawer.is-open .td-drawer-head {
  border-bottom-color: var(--tdp-line);
}
.td-root .td-drawer-chev {
  display: inline-block;
  font-size: 9px;
  color: var(--tdp-text-3);
  width: 12px;
  transition: transform var(--tdp-trans);
}
.td-root .td-drawer-chev.is-open {
  transform: rotate(90deg);
  color: var(--tdp-accent);
}
.td-root .td-drawer-icon { font-size: 16px; line-height: 1; }
.td-root .td-drawer-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tdp-text);
  letter-spacing: 0.02em;
}
.td-root .td-drawer-count {
  background: var(--tdp-bg-3);
  color: var(--tdp-text-2);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--tdp-line-strong);
}
.td-root .td-drawer-badge {
  font-size: 10px;
  color: var(--tdp-text-3);
  font-style: italic;
}
.td-root .td-drawer-toggle {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tdp-text-2);
  letter-spacing: 0.05em;
}

.td-root .td-drawer-body {
  background: var(--tdp-bg-1);
}
.td-root .td-drawer-row {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--tdp-line);
  font-size: 12px;
  transition: background var(--tdp-trans);
}
.td-root .td-drawer-row:hover { background: var(--tdp-bg-2); }
.td-root .td-drawer-row:last-child { border-bottom: none; }
.td-root .td-drawer-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  background: var(--tdp-bg-3);
  color: var(--tdp-accent);
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  border: 1px solid var(--tdp-line-strong);
  font-variant-numeric: tabular-nums;
}
.td-root .td-drawer-match {
  font-size: 12px;
  color: var(--tdp-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Signals drawer specifics */
.td-root .td-drawer-sig-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 11px;
  border: 1px solid;
  white-space: nowrap;
}
.td-root .td-drawer-sig-pill.td-sig-bad,
.td-root .td-drawer-sig-pill.td-sig-tdsig-bad { background: rgba(255,59,59,0.13); color: #ff5a5a; border-color: rgba(255,59,59,0.4); }
.td-root .td-drawer-sig-pill.td-sig-warn,
.td-root .td-drawer-sig-pill.td-sig-tdsig-warn { background: rgba(255,167,38,0.13); color: #ffa726; border-color: rgba(255,167,38,0.4); }
.td-root .td-drawer-sig-pill.td-sig-ok,
.td-root .td-drawer-sig-pill.td-sig-tdsig-ok { background: rgba(93,255,155,0.13); color: #5dff9b; border-color: rgba(93,255,155,0.4); }
.td-root .td-drawer-sig-pill.td-sig-unk,
.td-root .td-drawer-sig-pill.td-sig-tdsig-unk { background: var(--tdp-bg-2); color: var(--tdp-text-2); border-color: var(--tdp-line-strong); }
.td-root .td-drawer-sig-pill .td-sig-dot { font-size: 7px; margin-right: 2px; }

.td-root .td-drawer-speed {
  font-size: 11px;
  color: var(--tdp-text-2);
  font-style: italic;
  white-space: nowrap;
}

.td-root .td-drawer-spark {
  display: flex;
  gap: 1px;
  height: 16px;
  background: rgba(0,0,0,0.3);
  padding: 1px;
  border-radius: 3px;
  border: 1px solid var(--tdp-line);
  width: 200px;
  align-items: stretch;
}
.td-root .td-drawer-spark-loading,
.td-root .td-drawer-spark-err {
  width: auto;
  padding: 2px 8px;
  background: transparent;
  border: none;
  font-size: 10px;
  color: var(--tdp-text-3);
  font-style: italic;
  align-items: center;
  justify-content: center;
}
.td-root .td-spk-sliver {
  flex: 1 1 auto;
  border-radius: 1px;
  min-width: 2px;
  background: #2a3145;
}
.td-root .td-spk-sliver.td-spk-bad   { background: linear-gradient(180deg, #ff5a5a 0%, #d4001f 100%); }
.td-root .td-spk-sliver.td-spk-warn  { background: linear-gradient(180deg, #ffd24a 0%, #ff9f1a 100%); }
.td-root .td-spk-sliver.td-spk-ok    { background: linear-gradient(180deg, #5dff9b 0%, #2dd278 100%); }
.td-root .td-spk-sliver.td-spk-unk   { background: #2a3145; opacity: 0.55; }

/* Suggestions drawer */
.td-root .td-drawer-sug-row.is-divergent {
  background: rgba(255,90,90,0.05);
}
.td-root .td-drawer-sug-row.is-matched {
  background: rgba(93,255,155,0.04);
}
.td-root .td-sug-from {
  font-size: 11.5px;
  color: #c285ff;
  font-weight: 700;
  white-space: nowrap;
}
.td-root .td-sug-final {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tdp-text);
  white-space: nowrap;
}
.td-root .td-drawer-arrow { color: var(--tdp-text-3); font-size: 12px; }
.td-root .td-sug-conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-root .td-sug-conf-bar {
  display: inline-block;
  width: 60px;
  height: 5px;
  background: var(--tdp-bg-3);
  border-radius: 3px;
  overflow: hidden;
}
.td-root .td-sug-conf-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffa726, #5dff9b);
}
.td-root .td-sug-conf-num {
  font-size: 10px;
  color: var(--tdp-text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.td-root .td-sug-flag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  border: 1px solid;
  white-space: nowrap;
}
.td-root .td-sug-flag-bad { background: rgba(255,90,90,0.13); color: #ff5a5a; border-color: rgba(255,90,90,0.4); }
.td-root .td-sug-flag-ok  { background: rgba(93,255,155,0.13); color: #5dff9b; border-color: rgba(93,255,155,0.4); }

/* Events drawer */
.td-root .td-evt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.td-root .td-evt-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: var(--tdp-bg-2);
  border: 1px solid var(--tdp-line);
  border-radius: 9px;
  font-size: 10px;
  color: var(--tdp-text-2);
  white-space: nowrap;
}
.td-root .td-evt-pill-icon { font-size: 11px; }
.td-root .td-evt-pill-min { color: #ffe35a; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-root .td-evt-score_change { background: rgba(255,227,90,0.12); border-color: rgba(255,227,90,0.35); color: #fff3a8; }
.td-root .td-evt-health_transition { background: rgba(194,133,255,0.12); border-color: rgba(194,133,255,0.35); color: #e9ceff; }
.td-root .td-evt-state_change { background: rgba(78,197,255,0.12); border-color: rgba(78,197,255,0.35); color: #c5ecff; }
.td-root .td-drawer-empty {
  font-size: 11px;
  color: var(--tdp-text-3);
  font-style: italic;
}

/* Tech drawer */
.td-root .td-drawer-tech-row {
  align-items: flex-start;
  grid-template-columns: 36px minmax(160px, 1fr) auto;
}
.td-root .td-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px 16px;
  width: 100%;
}
.td-root .td-tech-kv {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-root .td-tech-k {
  color: var(--tdp-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
  font-weight: 700;
}
.td-root .td-tech-v {
  color: var(--tdp-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P — Pranim-color polish · v=v4p-2026051930
 * Brings ticket-detail v4 leg list + drawers into visual parity with the
 * Pranim ticket-accept page. Pure CSS, no JS changes.
 *
 * Codex audit decisions (v4-pranim-color-audit) materialized:
 *   • Remap to Pranim --ta-* palette (live=#ff5870, pre=#5a8cff, accent blue)
 *   • Flatten L# pill to Pranim quiet style
 *   • Hide LIVE pulsing dot — Pranim uses plain "LIVE" text
 *   • PRE chip: cyan → Pranim blue
 *   • Remove yellow odds chip → mono blue accent text (Pranim style)
 *   • Suggestion pill quieter purple
 *   • Drawer head: --ta-card-head bg + Pranim-like card-head feel
 *   • Health-glow harmonized with --ta-bad / --ta-warn / --ta-ok
 * ═════════════════════════════════════════════════════════════════════ */

/* ─── Pranim palette tokens scoped to ticket-detail root ───────────── */
.td-root {
  --ta-bg:           #0f1620;
  --ta-pane:         #1a2330;
  --ta-pane-elev:    #232c3d;
  --ta-card:         #232c3d;
  --ta-card-hover:   #2b3548;
  --ta-card-head:    #1d2738;
  --ta-border:       #2c3a52;
  --ta-line:         #1f2a3a;
  --ta-line-soft:    #182234;

  --ta-text:         #f1f4f9;
  --ta-text-2:       #c8d2e2;
  --ta-text-3:       #93a0b8;
  --ta-text-dim:     #6a7689;

  --ta-live:         #ff5870;
  --ta-live-bg:      rgba(255, 88, 112, .12);
  --ta-live-border:  rgba(255, 88, 112, .35);
  --ta-pre:          #5a8cff;
  --ta-pre-bg:       rgba(90, 140, 255, .12);
  --ta-pre-border:   rgba(90, 140, 255, .35);
  --ta-accent:       #5a8cff;
  --ta-accent-bg:    rgba(90, 140, 255, .15);
  --ta-accent-border:rgba(90, 140, 255, .4);
  --ta-ok:           #22d18b;
  --ta-ok-bg:        rgba(34, 209, 139, .12);
  --ta-ok-border:    rgba(34, 209, 139, .35);
  --ta-warn:         #ffc857;
  --ta-warn-bg:      rgba(255, 200, 87, .12);
  --ta-warn-border:  rgba(255, 200, 87, .35);
  --ta-bad:          #ff6b6b;
  --ta-bad-bg:       rgba(255, 107, 107, .12);
  --ta-bad-border:   rgba(255, 107, 107, .35);
  --ta-mono:         ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ─── Selections card head — Pranim-card-head feel ──────────────────── */
.td-root .td-sel-cards-head {
  padding: 10px 14px !important;
  background: var(--ta-card-head) !important;
  border-bottom: 1px solid var(--ta-line) !important;
  min-height: 46px;
  row-gap: 7px;
}

/* ─── LEG ROW — exact Pranim spec ──────────────────────────────────── */
.td-root .td-leg-row {
  /* Pranim grid: cols + 14px gap + 9px 14px pad + 1px line-soft + 13px font */
  grid-template-columns: 30px 110px 50px minmax(220px, 2.4fr) minmax(160px, 1.8fr) auto 70px 78px 32px !important;
  gap: 14px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--ta-line-soft) !important;
  border-left: 3px solid transparent;
  background: transparent !important;
  font-size: 13px !important;
  min-height: 38px;
  transition: background 140ms;
}
.td-root .td-leg-row:hover {
  background: rgba(0, 0, 0, 0.18) !important;
  /* iter75 — accent left-edge + match-name underline on hover so the
     row reads as interactive (clicking the match name opens the
     all-tickets filter for that fixture). */
  box-shadow: inset 3px 0 0 rgba(90, 140, 255, 0.55);
}
.td-root .td-leg-row:hover .td-leg-match {
  text-decoration: underline;
  text-decoration-color: rgba(90, 140, 255, 0.45);
  text-underline-offset: 2px;
}
.td-root .td-leg-row.is-live { border-left-color: var(--ta-live-border); }
.td-root .td-leg-row.has-sig-bad  { border-left-color: var(--ta-bad)  !important; background: linear-gradient(90deg, var(--ta-bad-bg) 0%, transparent 30%) !important; }
.td-root .td-leg-row.has-sig-warn { border-left-color: var(--ta-warn) !important; background: linear-gradient(90deg, var(--ta-warn-bg) 0%, transparent 30%) !important; }
.td-root .td-leg-row.has-sig-ok   { border-left-color: var(--ta-ok)   !important; }

/* Header row — Pranim style: bg .22, 10px, 700, uppercase, letter-spacing .1em */
.td-root .td-leg-row.td-leg-headers {
  background: rgba(0, 0, 0, 0.22) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ta-text-dim) !important;
  padding: 6px 14px !important;
  min-height: auto;
  border-bottom: 1px solid var(--ta-line) !important;
}
.td-root .td-leg-row.td-leg-headers:hover { background: rgba(0,0,0,.22) !important; }

/* ─── L# pill — quiet Pranim badge style ──────────────────────────── */
.td-root .td-leg-num {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--ta-text-2) !important;
  border: none !important;
  border-radius: 3px !important;
  height: auto !important;
  padding: 2px 6px !important;
  font-family: var(--ta-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* ─── Sport — Pranim sport-tag aesthetic (italic uppercase dim) ─── */
.td-root .td-leg-sport {
  font-size: 11px !important;
  color: var(--ta-text-dim) !important;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-root .td-leg-sport-ico { font-size: 13px !important; font-style: normal; }
.td-root .td-leg-sport-name { color: var(--ta-text-dim) !important; font-weight: 600; }

/* ─── LIVE/PRE channel — Pranim 9px 800 chip ────────────────────── */
.td-root .td-leg-channel {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 5px !important;
  border-radius: 4px !important;
  text-align: center !important;
  letter-spacing: 0.08em !important;
  width: 56px !important;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.td-root .td-leg-channel.is-live {
  background: var(--ta-live-bg) !important;
  color: var(--ta-live) !important;
  border: 1px solid var(--ta-live-border) !important;
}
.td-root .td-leg-channel.is-pre {
  background: var(--ta-pre-bg) !important;
  color: var(--ta-pre) !important;
  border: 1px solid var(--ta-pre-border) !important;
}
/* v4p30 iter8 — sharp-lookahead prematch tiers */
.td-root .td-leg-channel.is-pre-early {
  background: rgba(255,200,87,0.08) !important;
  color: #ffc857 !important;
  border: 1px solid rgba(255,200,87,0.28) !important;
}
.td-root .td-leg-channel.is-pre-veryearly {
  background: rgba(194,133,255,0.10) !important;
  color: #c285ff !important;
  border: 1px solid rgba(194,133,255,0.32) !important;
  animation: tdpVeryEarlyPulse 3.2s ease-in-out infinite;
}
@keyframes tdpVeryEarlyPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(194,133,255,0.0); }
  50%     { box-shadow: 0 0 0 3px rgba(194,133,255,0.15); }
}
/* v4p26 — settled / refused channel chip variants. Visually distinct
 * from LIVE so an operator can never confuse a stale live cache with
 * the post-settlement state. */
.td-root .td-leg-channel.is-settled {
  background: rgba(140, 150, 170, 0.10) !important;
  color: #a8b2c4 !important;
  border: 1px solid rgba(140, 150, 170, 0.30) !important;
  opacity: 0.9;
}
.td-root .td-leg-channel.is-refused {
  background: rgba(255, 88, 112, 0.08) !important;
  color: #ff8090 !important;
  border: 1px solid rgba(255, 88, 112, 0.25) !important;
  opacity: 0.85;
}
/* 2026-05-15 v4p32 iter59 — restore the LIVE dot WITH pulse animation
   so actively-played matches visually breathe vs ended-pending (amber, no
   dot) and FUND (gray, no dot). Only renders inside is-live channel. */
.td-root .td-leg-channel.is-live .td-live-dot {
  display: inline-flex !important;
  align-items: center;
  margin-right: 2px;
  color: #ff5870;
  font-size: 8px;
  line-height: 1;
  animation: tdLiveDotPulse 1.4s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255, 88, 112, 0.55);
}
@keyframes tdLiveDotPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1.0;  transform: scale(1.10); }
}
/* Score bits inside LIVE/PRE: tiny, mono, no extra weight */
.td-root .td-leg-channel-bits {
  font-size: 9px !important;
  font-family: var(--ta-mono) !important;
  font-weight: 700 !important;
  margin-left: 3px;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Match link — Pranim 13px 600 ───────────────────────────────── */
.td-root .td-leg-match {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ta-text) !important;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms;
}
.td-root .td-leg-match:hover { color: var(--ta-accent) !important; }
.td-root .td-leg-match strong { font-weight: 700 !important; }
.td-root .td-leg-vs { color: var(--ta-text-dim) !important; font-weight: 500 !important; padding: 0 2px; font-size: 12px; }

/* ─── Bet (market › pick) — Pranim market: text-2, 12px ─────────── */
.td-root .td-leg-bet {
  font-size: 12px !important;
  color: var(--ta-text-2) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-root .td-leg-market { color: var(--ta-text-2) !important; font-weight: 500 !important; }
.td-root .td-leg-sep { color: var(--ta-text-dim) !important; }
.td-root .td-leg-pick { color: var(--ta-text) !important; font-weight: 700 !important; }

/* ─── Suggestion mini-pill — quieter purple ────────────────────── */
.td-root .td-leg-sug {
  background: rgba(167, 139, 255, 0.10) !important;
  color: #a78bff !important;
  border: 1px solid rgba(167, 139, 255, 0.28) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Odds — Pranim mono accent text, NO chip ──────────────────── */
.td-root .td-leg-odds {
  font-family: var(--ta-mono) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ta-accent) !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: right !important;
  box-shadow: none !important;
  letter-spacing: 0;
}

/* ─── State pill (Fituese/Humbëse/Pending) — Pranim chip feel ───── */
.td-root .td-leg-state .td-pill-sm {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ─── Result button — quieter ──────────────────────────────────── */
.td-root .td-leg-result-btn {
  width: 28px;
  height: 24px;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: 3px !important;
  color: var(--ta-text-2) !important;
  font-size: 12px !important;
}
.td-root .td-leg-result-btn:hover {
  background: var(--ta-accent-bg) !important;
  color: var(--ta-accent) !important;
  border-color: var(--ta-accent-border) !important;
  transform: none !important;
}

/* ─── Selections card body bg — Pranim card body ───────────────── */
.td-root .td-leg-list {
  background: rgba(0, 0, 0, 0.16) !important;
}

/* ─── DRAWER cards — Pranim card-head feel ─────────────────────── */
.td-root .td-drawer.td-card {
  background: var(--ta-card) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: 6px;
  margin-top: 0;
  overflow: hidden;
}
.td-root .td-drawer-head {
  background: var(--ta-card-head) !important;
  padding: 10px 14px !important;
  gap: 14px !important;
  min-height: 42px;
  border-bottom: 1px solid transparent;
  transition: background 140ms;
}
.td-root .td-drawer-head:hover {
  background: var(--ta-card-hover) !important;
}
.td-root .td-drawer.is-open .td-drawer-head {
  border-bottom-color: var(--ta-line) !important;
}
.td-root .td-drawer-chev {
  color: var(--ta-text-dim) !important;
  font-size: 9px;
}
.td-root .td-drawer-chev.is-open {
  color: var(--ta-accent) !important;
}
.td-root .td-drawer-icon { font-size: 15px !important; }
.td-root .td-drawer-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ta-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.td-root .td-drawer-count {
  background: rgba(0, 0, 0, 0.3) !important;
  color: var(--ta-text-2) !important;
  border: 1px solid var(--ta-border) !important;
  font-family: var(--ta-mono) !important;
  font-size: 10.5px !important;
  padding: 1px 7px !important;
  border-radius: 3px !important;
}
.td-root .td-drawer-toggle {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--ta-text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.td-root .td-drawer.is-open .td-drawer-toggle { color: var(--ta-accent) !important; }

/* Drawer body */
.td-root .td-drawer-body {
  background: rgba(0, 0, 0, 0.16) !important;
}
.td-root .td-drawer-row {
  padding: 9px 14px !important;
  gap: 14px !important;
  border-bottom: 1px solid var(--ta-line-soft) !important;
  font-size: 13px !important;
  background: transparent !important;
}
.td-root .td-drawer-row:hover {
  background: rgba(0, 0, 0, 0.18) !important;
}
.td-root .td-drawer-num {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--ta-text-2) !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: var(--ta-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  height: auto !important;
}
.td-root .td-drawer-match {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ta-text) !important;
}

/* Signal pill in drawer — Pranim chip palette */
.td-root .td-drawer-sig-pill {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
.td-root .td-drawer-sig-pill.td-sig-bad,
.td-root .td-drawer-sig-pill.td-sig-tdsig-bad { background: var(--ta-bad-bg) !important; color: var(--ta-bad) !important; border-color: var(--ta-bad-border) !important; }
.td-root .td-drawer-sig-pill.td-sig-warn,
.td-root .td-drawer-sig-pill.td-sig-tdsig-warn { background: var(--ta-warn-bg) !important; color: var(--ta-warn) !important; border-color: var(--ta-warn-border) !important; }
.td-root .td-drawer-sig-pill.td-sig-ok,
.td-root .td-drawer-sig-pill.td-sig-tdsig-ok { background: var(--ta-ok-bg) !important; color: var(--ta-ok) !important; border-color: var(--ta-ok-border) !important; }
.td-root .td-drawer-sig-pill.td-sig-unk,
.td-root .td-drawer-sig-pill.td-sig-tdsig-unk { background: rgba(0,0,0,0.25) !important; color: var(--ta-text-dim) !important; border-color: var(--ta-border) !important; }

.td-root .td-drawer-speed {
  font-size: 11px !important;
  color: var(--ta-text-3) !important;
  font-style: italic;
}

.td-root .td-drawer-spark {
  border: 1px solid var(--ta-border) !important;
  background: rgba(0, 0, 0, 0.32) !important;
}
.td-root .td-spk-sliver.td-spk-bad   { background: var(--ta-bad)  !important; }
.td-root .td-spk-sliver.td-spk-warn  { background: var(--ta-warn) !important; }
.td-root .td-spk-sliver.td-spk-ok    { background: var(--ta-ok)   !important; }

/* Suggestion drawer */
.td-root .td-sug-from {
  font-family: var(--ta-mono) !important;
  font-size: 11.5px !important;
  color: #a78bff !important;
  font-weight: 700 !important;
}
.td-root .td-sug-final {
  font-family: var(--ta-mono) !important;
  font-size: 11.5px !important;
  color: var(--ta-text) !important;
  font-weight: 700 !important;
}
.td-root .td-drawer-arrow { color: var(--ta-text-dim) !important; }
.td-root .td-sug-conf-bar { background: rgba(0,0,0,0.28) !important; }
.td-root .td-sug-conf-fill { background: linear-gradient(90deg, var(--ta-warn), var(--ta-ok)) !important; }
.td-root .td-sug-conf-num {
  font-family: var(--ta-mono) !important;
  color: var(--ta-text-3) !important;
}
.td-root .td-sug-flag {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.td-root .td-sug-flag-bad { background: var(--ta-bad-bg)  !important; color: var(--ta-bad) !important; border-color: var(--ta-bad-border)  !important; }
.td-root .td-sug-flag-ok  { background: var(--ta-ok-bg)   !important; color: var(--ta-ok)  !important; border-color: var(--ta-ok-border)   !important; }
.td-root .td-drawer-sug-row.is-divergent { background: var(--ta-bad-bg) !important; }
.td-root .td-drawer-sug-row.is-matched   { background: var(--ta-ok-bg)  !important; }

/* Events drawer pills */
.td-root .td-evt-pill {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-text-2) !important;
  font-family: var(--ta-mono) !important;
  font-size: 10.5px !important;
}
.td-root .td-evt-pill-min { color: var(--ta-warn) !important; font-weight: 700 !important; }
.td-root .td-evt-score_change      { background: var(--ta-warn-bg) !important; border-color: var(--ta-warn-border) !important; color: var(--ta-warn) !important; }
.td-root .td-evt-health_transition { background: rgba(167,139,255,0.10) !important; border-color: rgba(167,139,255,0.32) !important; color: #a78bff !important; }
.td-root .td-evt-state_change      { background: var(--ta-pre-bg) !important; border-color: var(--ta-pre-border) !important; color: var(--ta-pre) !important; }

/* Tech drawer */
.td-root .td-tech-k { color: var(--ta-text-dim) !important; }
.td-root .td-tech-v { color: var(--ta-text) !important; font-family: var(--ta-mono) !important; }
.td-root .td-drawer-empty { color: var(--ta-text-dim) !important; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-2 — pixel-perfection iter 1 · v=v4p2-2026051940
 * Unify all .td-card surfaces to Pranim .ta-ticket-card foundation:
 *   bg --ta-card · border --ta-border · radius --ta-radius
 *   3-layer box-shadow · hover-lift translateY(-1px)
 * Money values get Pranim mono accent treatment.
 * ═════════════════════════════════════════════════════════════════════ */

/* Add Pranim radius tokens */
.td-root {
  --ta-radius:    10px;
  --ta-radius-sm: 7px;
}

/* ─── ALL CARDS — Pranim foundation ───────────────────────────────── */
.td-root .td-card {
  background: var(--ta-card) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius) !important;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.32),
    0 4px 12px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms !important;
  position: relative;
}
.td-root .td-card:hover {
  border-color: var(--ta-border-hi) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 8px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transform: translateY(-1px);
}

/* All card heads use Pranim card-head bg + line */
.td-root .td-card-head {
  background: var(--ta-card-head) !important;
  border-bottom: 1px solid var(--ta-line) !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  color: var(--ta-text-2) !important;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ─── MONEY CARD — Pranim mono accent values ──────────────────────── */
.td-root .td-money-flow {
  padding: 14px !important;
  background: rgba(0, 0, 0, 0.16) !important;
  border-bottom: 1px solid var(--ta-line);
  gap: 10px !important;
}
.td-root .td-money-hero {
  background: var(--ta-card-head) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
  padding: 12px 14px !important;
  transition: border-color 150ms !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.td-root .td-money-hero:hover {
  border-color: var(--ta-border-hi) !important;
  transform: none !important;
}
.td-root .td-money-hero-label {
  color: var(--ta-text-dim) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
}
.td-root .td-money-hero-value {
  font-family: var(--ta-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--ta-text) !important;
}
.td-root .td-money-hero-sub {
  font-size: 10.5px !important;
  color: var(--ta-text-3) !important;
  font-weight: 600;
}
.td-root .td-money-hero-stake { border-left: 3px solid var(--ta-accent) !important; }
.td-root .td-money-hero-stake .td-money-hero-value { color: var(--ta-accent) !important; text-shadow: 0 0 10px rgba(90,140,255,0.18); }
.td-root .td-money-hero-pot   { border-left: 3px solid var(--ta-warn) !important; }
.td-root .td-money-hero-pot .td-money-hero-value { color: var(--ta-warn) !important; }
.td-root .td-money-hero-won   { border-left: 3px solid var(--ta-ok) !important; background: var(--ta-ok-bg) !important; }
.td-root .td-money-hero-won .td-money-hero-value { color: var(--ta-ok) !important; text-shadow: 0 0 12px rgba(34,209,139,0.22); }
.td-root .td-money-hero-lost  { border-left: 3px solid var(--ta-bad) !important; background: var(--ta-bad-bg) !important; }
.td-root .td-money-hero-lost .td-money-hero-value { color: var(--ta-bad) !important; }
.td-root .td-money-hero-void  { border-left: 3px solid var(--ta-text-dim) !important; background: rgba(147,160,184,0.05) !important; }

.td-root .td-money-arrow {
  font-family: var(--ta-mono) !important;
  color: var(--ta-text-dim) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.td-root .td-money-arrow-result {
  font-size: 22px !important;
  color: var(--ta-text-3) !important;
}

/* Secondary stats below money flow */
.td-root .td-money-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ta-card) !important;
  border-top: 1px solid var(--ta-line) !important;
}
.td-root .td-money-stat {
  padding: 12px 18px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent !important;
  transition: background 140ms ease-out;
}
/* v4p29 iter4 — premium vertical dividers via ::after, half-height for breath */
.td-root .td-money-stat::after {
  content: "";
  position: absolute;
  right: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(140,150,170,0.18) 30%, rgba(140,150,170,0.18) 70%, transparent 100%);
  pointer-events: none;
}
.td-root .td-money-stat:last-child::after { display: none; }
.td-root .td-money-stat:hover { background: rgba(255,255,255,0.025) !important; }
.td-root .td-money-stat-k {
  color: var(--ta-text-dim) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
}
.td-root .td-money-stat-v {
  font-family: var(--ta-mono) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ta-text) !important;
  letter-spacing: 0 !important;
}
.td-root .td-money-stat-sub {
  font-size: 10.5px !important;
  color: var(--ta-text-3) !important;
  font-weight: 600;
}

/* Money state-tag (won/lost/void) — Pranim chip */
.td-root .td-money-state-tag {
  font-family: var(--ta-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-left: auto;
}
.td-root .td-money-state-won  { background: var(--ta-ok-bg) !important; color: var(--ta-ok) !important; border: 1px solid var(--ta-ok-border) !important; }
.td-root .td-money-state-lost { background: var(--ta-bad-bg) !important; color: var(--ta-bad) !important; border: 1px solid var(--ta-bad-border) !important; }
.td-root .td-money-state-void { background: rgba(147,160,184,0.10) !important; color: var(--ta-text-dim) !important; border: 1px solid var(--ta-border) !important; }

/* ─── PLAYER CARD — Pranim feel ──────────────────────────────────── */
.td-root .td-user-chain-prominent {
  padding: 14px !important;
  background: rgba(0, 0, 0, 0.16) !important;
}
.td-root .td-chain-node {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
  font-family: var(--ta-mono) !important;
  font-size: 11.5px !important;
  color: var(--ta-text) !important;
  padding: 5px 10px !important;
}
.td-root .td-chain-node:hover {
  border-color: var(--ta-accent-border) !important;
  background: var(--ta-accent-bg) !important;
}
.td-root .td-chain-self {
  background: var(--ta-accent-bg) !important;
  border-color: var(--ta-accent-border) !important;
}
.td-root .td-chain-role {
  font-size: 9px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: var(--ta-text-dim) !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  letter-spacing: 0.06em;
}
.td-root .td-chain-sep { color: var(--ta-text-dim) !important; }

/* ─── ACTIONS CARD — Pranim feel ──────────────────────────────────── */
.td-root .td-act-quick {
  background: rgba(0, 0, 0, 0.16) !important;
  border-bottom: 1px solid var(--ta-line) !important;
  padding: 10px !important;
}
.td-root .td-act-quick-btn {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
  color: var(--ta-text-2) !important;
}
.td-root .td-act-quick-btn:hover {
  background: var(--ta-accent-bg) !important;
  color: var(--ta-accent) !important;
  border-color: var(--ta-accent-border) !important;
}

.td-root .td-act-hint {
  background: var(--ta-accent-bg) !important;
  border: 1px solid var(--ta-accent-border) !important;
  border-radius: var(--ta-radius-sm) !important;
  color: var(--ta-text-2) !important;
}
.td-root .td-act-section {
  border-bottom: 1px solid var(--ta-line) !important;
  padding: 12px 14px !important;
}
.td-root .td-act-section:hover { background: rgba(0,0,0,0.16) !important; }

/* ─── AUDIT TIMELINE — Pranim feel ────────────────────────────────── */
.td-root .td-aud-list {
  background: rgba(0, 0, 0, 0.16) !important;
  padding: 8px 8px 8px 14px !important;
}
.td-root .td-aud-row {
  background: transparent !important;
  border-bottom: 1px solid var(--ta-line-soft) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 8px 10px !important;
}
.td-root .td-aud-row:hover { background: rgba(0, 0, 0, 0.18) !important; transform: none !important; }
.td-root .td-aud-day {
  color: var(--ta-text-dim) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  padding: 12px 0 6px !important;
}
.td-root .td-aud-day::before, .td-root .td-aud-day::after {
  background: var(--ta-line) !important;
}
.td-root .td-aud-list::before { background: linear-gradient(180deg, transparent 0%, var(--ta-border) 8%, var(--ta-border) 92%, transparent 100%) !important; }

/* Audit row icons — Pranim status colors */
.td-root .td-aud-icon {
  border: 2px solid var(--ta-card) !important;
}
.td-root .td-aud-icon-bad  { background: var(--ta-bad-bg) !important;  box-shadow: 0 0 0 1px var(--ta-bad-border) !important;  }
.td-root .td-aud-icon-warn { background: var(--ta-warn-bg) !important; box-shadow: 0 0 0 1px var(--ta-warn-border) !important; }
.td-root .td-aud-icon-ok   { background: var(--ta-ok-bg) !important;   box-shadow: 0 0 0 1px var(--ta-ok-border) !important;   }
.td-root .td-aud-icon-info { background: var(--ta-accent-bg) !important; box-shadow: 0 0 0 1px var(--ta-accent-border) !important; }

/* Audit row left-border accent matching Pranim status palette */
.td-root .td-aud-row-bad  { border-left: 3px solid var(--ta-bad) !important; }
.td-root .td-aud-row-warn { border-left: 3px solid var(--ta-warn) !important; }
.td-root .td-aud-row-ok   { border-left: 3px solid var(--ta-ok) !important; }
.td-root .td-aud-row-info { border-left: 3px solid var(--ta-accent) !important; }
.td-root .td-aud-row-dim  { border-left: 3px solid var(--ta-text-dim) !important; }

.td-root .td-aud-actor {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}
.td-root .td-aud-actor-player { background: var(--ta-accent-bg) !important; color: var(--ta-accent) !important; border: 1px solid var(--ta-accent-border) !important; }
.td-root .td-aud-actor-system { background: rgba(167,139,255,0.12) !important; color: #a78bff !important; border: 1px solid rgba(167,139,255,0.32) !important; }
.td-root .td-aud-actor-op     { background: var(--ta-warn-bg) !important; color: var(--ta-warn) !important; border: 1px solid var(--ta-warn-border) !important; }
.td-root .td-aud-fact {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-text-2) !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
}
.td-root .td-aud-count {
  background: rgba(167,139,255,0.18) !important;
  color: #a78bff !important;
  border: 1px solid rgba(167,139,255,0.4) !important;
  font-family: var(--ta-mono) !important;
}
.td-root .td-aud-reason {
  background: rgba(0, 0, 0, 0.22) !important;
  border-left: 2px solid var(--ta-border) !important;
  color: var(--ta-text-3) !important;
  font-size: 11px;
}

/* ─── HEADER — Pranim card-head harmonization ───────────────────── */
.td-root .td-head {
  background: var(--ta-card-head) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius) !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18);
}
.td-root .td-title {
  font-family: var(--ta-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ta-text) !important;
  letter-spacing: 0.02em !important;
}
.td-root .td-tag {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-text-2) !important;
  font-family: var(--ta-mono) !important;
  font-size: 10.5px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
}
.td-root .td-tag-ok { background: var(--ta-ok-bg) !important; color: var(--ta-ok) !important; border-color: var(--ta-ok-border) !important; }

.td-root .td-head-subtitle {
  color: var(--ta-text-3) !important;
  font-size: 11.5px !important;
}

/* Header risk badge — Pranim accent feel */
.td-root .td-head-risk {
  font-family: var(--ta-mono) !important;
  letter-spacing: 0.06em !important;
}
.td-root .td-head-risk-low  { background: var(--ta-ok-bg) !important; color: var(--ta-ok) !important; border-color: var(--ta-ok-border) !important; }
.td-root .td-head-risk-med  { background: var(--ta-warn-bg) !important; color: var(--ta-warn) !important; border-color: var(--ta-warn-border) !important; }
.td-root .td-head-risk-high { background: var(--ta-bad-bg) !important; color: var(--ta-bad) !important; border-color: var(--ta-bad-border) !important; }

/* ─── BUTTONS — Pranim button feel ─────────────────────────────── */
.td-root .td-btn {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-text-2) !important;
  border-radius: var(--ta-radius-sm) !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}
.td-root .td-btn:hover {
  background: var(--ta-accent-bg) !important;
  color: var(--ta-accent) !important;
  border-color: var(--ta-accent-border) !important;
  transform: translateY(-1px);
}
.td-root .td-btn-ok    { background: var(--ta-ok-bg) !important; color: var(--ta-ok) !important; border-color: var(--ta-ok-border) !important; }
.td-root .td-btn-warn  { background: var(--ta-warn-bg) !important; color: var(--ta-warn) !important; border-color: var(--ta-warn-border) !important; }
.td-root .td-btn-bad   { background: var(--ta-bad-bg) !important; color: var(--ta-bad) !important; border-color: var(--ta-bad-border) !important; }
.td-root .td-btn-ghost { background: transparent !important; }

/* Page bg (the area outside cards) */
body:has(#content > .td-root) {
  background: var(--ta-bg, #0f1620);
}

/* Risk hero — keep its hero treatment but harmonize with --ta-* */
.td-root .td-risk-hero {
  background: linear-gradient(135deg, var(--ta-pane) 0%, var(--ta-bg) 100%) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18) !important;
  padding: 16px 18px !important;
}
.td-root .td-risk-hero.td-risk-high { box-shadow: 0 1px 3px rgba(0,0,0,0.32), 0 8px 28px rgba(255,107,107,0.18) !important; }
.td-root .td-risk-pi-section {
  background: rgba(0, 0, 0, 0.16) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
}
.td-root .td-risk-stat {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
}
.td-root .td-risk-stat:hover { border-color: var(--ta-border-hi) !important; }
.td-root .td-risk-stat-bad  { background: var(--ta-bad-bg) !important; border-color: var(--ta-bad-border) !important; }
.td-root .td-risk-stat-warn { background: var(--ta-warn-bg) !important; border-color: var(--ta-warn-border) !important; }
.td-root .td-risk-stat-ok   { background: var(--ta-ok-bg) !important; border-color: var(--ta-ok-border) !important; }
.td-root .td-risk-stat-value { font-family: var(--ta-mono) !important; }
.td-root .td-risk-recs-group {
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
}
.td-root .td-risk-recs-group-bad  { border-left: 3px solid var(--ta-bad) !important; background: var(--ta-bad-bg) !important; }
.td-root .td-risk-recs-group-warn { border-left: 3px solid var(--ta-warn) !important; background: var(--ta-warn-bg) !important; }
.td-root .td-risk-recs-group-info { border-left: 3px solid var(--ta-accent) !important; background: var(--ta-accent-bg) !important; }
.td-root .td-risk-recs-group-ok   { border-left: 3px solid var(--ta-ok) !important; background: var(--ta-ok-bg) !important; }

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-3 — Token alias pass · v=v4p3-2026051950
 * Single high-impact win: alias all 369 --tdp-* references to Pranim --ta-*
 * tokens at the .td-root level. Override by source order (last definition
 * wins for equal specificity).
 *
 * This unifies every leftover surface (toast, offer banner, summary chips,
 * scrollbars, focus rings, fade animations, skeleton loaders, etc.) onto
 * the Pranim palette in one swing.
 * ═════════════════════════════════════════════════════════════════════ */

.td-root {
  /* Background tints */
  --tdp-bg-0:        var(--ta-bg);
  --tdp-bg-1:        rgba(0, 0, 0, 0.16);
  --tdp-bg-2:        rgba(0, 0, 0, 0.22);
  --tdp-bg-3:        rgba(0, 0, 0, 0.28);

  /* Lines + strokes */
  --tdp-line:        var(--ta-line-soft);
  --tdp-line-strong: var(--ta-border);
  --tdp-line-accent: var(--ta-accent-border);

  /* Text scale */
  --tdp-text:        var(--ta-text);
  --tdp-text-2:      var(--ta-text-2);
  --tdp-text-3:      var(--ta-text-dim);

  /* Status colors */
  --tdp-accent:      var(--ta-accent);
  --tdp-warn:        var(--ta-warn);
  --tdp-bad:         var(--ta-bad);
  --tdp-ok:          var(--ta-ok);
  --tdp-money:       var(--ta-warn);
  --tdp-purple:      #a78bff;

  /* Shadows */
  --tdp-shadow-sm:   0 1px 3px rgba(0,0,0,0.32);
  --tdp-shadow:      0 1px 3px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18);
  --tdp-shadow-lg:   0 2px 6px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.25);
  --tdp-shadow-glow: 0 0 0 1px var(--ta-accent-border), 0 8px 24px rgba(90,140,255,0.10);

  /* Radii */
  --tdp-r-sm:        var(--ta-radius-sm);
  --tdp-r:           var(--ta-radius-sm);
  --tdp-r-lg:        var(--ta-radius);

  /* Transitions — Pranim 140-150ms feel */
  --tdp-trans:       150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tdp-trans-slow:  240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Repave legacy .td-toast (the duplicated raw-hex one at line 2195) ─── */
.td-root .td-toast,
.td-toast {
  background: var(--ta-card-head, #1d2738) !important;
  border: 1px solid var(--ta-border, #2c3a52) !important;
  border-radius: var(--ta-radius-sm, 7px) !important;
  font-family: var(--ta-mono) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.25) !important;
}
.td-root .td-toast-ok,
.td-toast-ok  { background: var(--ta-ok-bg, rgba(34,209,139,.12)) !important; color: var(--ta-ok, #22d18b) !important; border-color: var(--ta-ok-border, rgba(34,209,139,.35)) !important; }
.td-root .td-toast-bad,
.td-toast-bad { background: var(--ta-bad-bg, rgba(255,107,107,.12)) !important; color: var(--ta-bad, #ff6b6b) !important; border-color: var(--ta-bad-border, rgba(255,107,107,.35)) !important; }

/* ─── Pending offer banner — polish to Pranim warn ─────────────────── */
.td-root .td-offer-banner {
  background: var(--ta-warn-bg) !important;
  border: 1px solid var(--ta-warn-border) !important;
  border-left: 4px solid var(--ta-warn) !important;
  border-radius: var(--ta-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18);
}
.td-root .td-offer-banner-head { color: var(--ta-text); }
.td-root .td-offer-banner-head strong { color: var(--ta-warn); }
.td-root .td-offer-new { color: var(--ta-warn) !important; font-family: var(--ta-mono) !important; font-weight: 700; }

/* ─── Selections summary chips — Pranim chip palette ─────────────── */
.td-root .td-sel-sum-chip {
  font-family: var(--ta-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  border: 1px solid !important;
}
.td-root .td-sel-sum-won     { background: var(--ta-ok-bg) !important;   color: var(--ta-ok) !important;    border-color: var(--ta-ok-border) !important; }
.td-root .td-sel-sum-lost    { background: var(--ta-bad-bg) !important;  color: var(--ta-bad) !important;   border-color: var(--ta-bad-border) !important; }
.td-root .td-sel-sum-voided  { background: rgba(0,0,0,0.25) !important;   color: var(--ta-text-dim) !important; border-color: var(--ta-border) !important; }
.td-root .td-sel-sum-pending { background: var(--ta-warn-bg) !important; color: var(--ta-warn) !important;  border-color: var(--ta-warn-border) !important; }
.td-root .td-sel-sum-sug     { background: rgba(167,139,255,0.12) !important; color: #a78bff !important; border-color: rgba(167,139,255,0.32) !important; }
.td-root .td-sel-sum-live    { background: var(--ta-live-bg) !important; color: var(--ta-live) !important;  border-color: var(--ta-live-border) !important; animation: none !important; }
.td-root .td-sel-sum-sigbad  { background: var(--ta-bad-bg) !important;  color: var(--ta-bad) !important;   border-color: var(--ta-bad-border) !important; }

.td-root .td-sel-cards-count {
  font-family: var(--ta-mono) !important;
  background: rgba(0,0,0,0.25) !important;
  color: var(--ta-text-2) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 1px 7px !important;
}

/* ─── Skeleton loader shimmer — softer with Pranim palette ───────── */
.td-root .td-loading {
  background: rgba(0, 0, 0, 0.16) !important;
  border: 1px dashed var(--ta-border) !important;
  border-radius: var(--ta-radius) !important;
  color: var(--ta-text-3) !important;
}
.td-skel {
  background: linear-gradient(90deg, var(--ta-card-head) 0%, var(--ta-card-hover) 50%, var(--ta-card-head) 100%) !important;
  background-size: 200% 100%;
}

/* ─── Focus rings — Pranim accent ─────────────────────────────────── */
.td-root *:focus-visible {
  outline: 2px solid var(--ta-accent) !important;
  outline-offset: 2px;
}

/* ─── Scrollbars — Pranim feel ───────────────────────────────────── */
.td-root *::-webkit-scrollbar-thumb {
  background: var(--ta-border) !important;
}
.td-root *::-webkit-scrollbar-thumb:hover {
  background: var(--ta-text-dim) !important;
}

/* ─── Headers in cards (sub-heads like td-card-head-row) ──────────── */
.td-root .td-card-head-row {
  background: var(--ta-card-head) !important;
}

/* ─── Risk Hero score ring — re-tinted to --ta-* ──────────────────── */
.td-root .td-risk-ring-track { stroke: rgba(255,255,255,0.06); }
.td-root .td-risk-ring-prog-low  { stroke: var(--ta-ok)   !important; }
.td-root .td-risk-ring-prog-med  { stroke: var(--ta-warn) !important; }
.td-root .td-risk-ring-prog-high { stroke: var(--ta-bad)  !important; }
.td-root .td-risk-ring-num-low   { color: var(--ta-ok)   !important; }
.td-root .td-risk-ring-num-med   { color: var(--ta-warn) !important; }
.td-root .td-risk-ring-num-high  { color: var(--ta-bad)  !important; }
.td-root .td-risk-ring-num       { font-family: var(--ta-mono) !important; }
.td-root .td-risk-level-low  { background: var(--ta-ok-bg) !important;   color: var(--ta-ok) !important;   border-color: var(--ta-ok-border) !important; }
.td-root .td-risk-level-med  { background: var(--ta-warn-bg) !important; color: var(--ta-warn) !important; border-color: var(--ta-warn-border) !important; }
.td-root .td-risk-level-high { background: var(--ta-bad-bg) !important;  color: var(--ta-bad) !important;  border-color: var(--ta-bad-border) !important; }

/* Network panel inside risk hero */
.td-root .td-risk-net {
  background: rgba(0, 0, 0, 0.16) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
}
.td-root .td-risk-net-head {
  color: var(--ta-accent) !important;
  border-bottom: 1px dashed var(--ta-border) !important;
}
.td-root .td-risk-net-item {
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: var(--ta-radius-sm) !important;
}
.td-root .td-risk-net-bad  { background: var(--ta-bad-bg) !important;    border-left-color: var(--ta-bad) !important; }
.td-root .td-risk-net-warn { background: var(--ta-warn-bg) !important;   border-left-color: var(--ta-warn) !important; }
.td-root .td-risk-net-info { background: var(--ta-accent-bg) !important; border-left-color: var(--ta-accent) !important; }
.td-root .td-risk-net-ok   { background: var(--ta-ok-bg) !important;     border-left-color: var(--ta-ok) !important; }

/* ─── Action panel sections — refine ──────────────────────────────── */
.td-root .td-act-section-icon { color: var(--ta-text-3); }
.td-root .td-act-section-title { color: var(--ta-text); }
.td-root .td-act-section-desc  { color: var(--ta-text-3); }
.td-root .td-textarea {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-text) !important;
  border-radius: var(--ta-radius-sm) !important;
}
.td-root .td-textarea:focus {
  border-color: var(--ta-accent) !important;
  box-shadow: 0 0 0 2px var(--ta-accent-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-7 — drawer micro-interactions polish · v=v4p7-2026052000
 * Slide-down entrance for opened drawers, chevron rotation transition,
 * stronger drawer-head hover feedback. Pure CSS, no JS changes.
 * ═════════════════════════════════════════════════════════════════════ */

/* Drawer body slides down on open */
.td-root .td-drawer.is-open .td-drawer-body {
  animation: tdpDrawerSlide 220ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top center;
}
@keyframes tdpDrawerSlide {
  from {
    opacity: 0;
    transform: translateY(-4px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

/* Chevron rotation transition — smoother */
.td-root .td-drawer-chev {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms;
}

/* Drawer head — Pranim ta-other-btn hover feel (definitive feedback) */
.td-root .td-drawer-head {
  transition: background 140ms, border-bottom-color 140ms, padding 140ms;
}
.td-root .td-drawer-head:hover {
  background: var(--ta-card-hover) !important;
}
.td-root .td-drawer-head:active {
  background: var(--ta-pane-elev) !important;
}
.td-root .td-drawer.is-open .td-drawer-head {
  background: var(--ta-pane-elev) !important;
}
.td-root .td-drawer.is-open .td-drawer-head:hover {
  background: var(--ta-card-hover) !important;
}

/* v4p29 iter5 — slim CLOSED drawer head; collapse 4 closed drawers from
 * ~210px chrome → ~130px while keeping touch target ≥28px. Open state
 * stays roomy via .is-open override below. */
.td-root .td-drawer:not(.is-open) .td-drawer-head {
  padding: 6px 14px !important;
  min-height: 30px !important;
}
.td-root .td-drawer:not(.is-open) .td-drawer-icon {
  font-size: 13px !important;
  opacity: 0.85;
}
.td-root .td-drawer:not(.is-open) .td-drawer-title {
  font-size: 11px !important;
  letter-spacing: 0.09em;
  color: var(--ta-text-2, #8a93a6) !important;
}
.td-root .td-drawer:not(.is-open):hover .td-drawer-title {
  color: var(--ta-text) !important;
}
.td-root .td-drawer:not(.is-open) .td-drawer-toggle {
  font-size: 10px !important;
  opacity: 0.55;
  letter-spacing: 0.06em;
}
.td-root .td-drawer:not(.is-open):hover .td-drawer-toggle {
  opacity: 1;
}

/* Toggle text color shift on hover */
.td-root .td-drawer-head:hover .td-drawer-toggle {
  color: var(--ta-accent) !important;
}

/* Drawer rows: stagger-fade on open (each row slightly delayed) */
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row {
  animation: tdpDrawerRowFade 180ms ease-out backwards;
}
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(1)  { animation-delay:  0ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(2)  { animation-delay: 30ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(3)  { animation-delay: 60ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(4)  { animation-delay: 90ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(5)  { animation-delay: 120ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(6)  { animation-delay: 150ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(7)  { animation-delay: 180ms; }
.td-root .td-drawer.is-open .td-drawer-body .td-drawer-row:nth-child(n+8) { animation-delay: 210ms; }
@keyframes tdpDrawerRowFade {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .td-root .td-drawer.is-open .td-drawer-body,
  .td-root .td-drawer.is-open .td-drawer-body .td-drawer-row {
    animation: none !important;
  }
  .td-root .td-drawer-chev { transition: color 150ms !important; }
}

/* Selections card head — match drawer-head hover feel */
.td-root .td-sel-cards-head {
  transition: background 140ms;
}

/* Polish drawer count pill — slight glow when drawer is open */
.td-root .td-drawer.is-open .td-drawer-count {
  background: var(--ta-accent-bg) !important;
  color: var(--ta-accent) !important;
  border-color: var(--ta-accent-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-8 — leg row redesign · v=v4p8-2026052010
 *
 * Brother feedback: team names + market not showing well, bet time minute
 * of match played not visible.
 *
 * Fixes:
 *   • 8-col grid (was 9-col with empty/missing sug shifting layout)
 *   • Wider match cell (allow proper team name display)
 *   • Wider bet cell (allow market to breathe)
 *   • New "@ 67'" bet-time chip below team names
 *   • Team names wrap on 2 lines if needed (no harsh ellipsis on long names)
 *   • Sug pill folded into bet cell as inline trailing chip
 * ═════════════════════════════════════════════════════════════════════ */

/* New 8-col grid — symmetric with the headers row */
.td-root .td-leg-row {
  grid-template-columns:
    34px        /* L# */
    100px       /* Sport */
    62px        /* LIVE/PRE chip */
    minmax(220px, 2.6fr)  /* Match cell (home vs away + bet-min chip) */
    minmax(180px, 2fr)    /* Bet cell (market › pick + sug) */
    72px        /* Odds */
    96px        /* State pill */
    32px        /* Result btn */
    !important;
  gap: 14px !important;
  align-items: center !important;
}
.td-root .td-leg-headers {
  align-items: center !important;
}

/* ─── MATCH CELL — flex column with bet-min chip below team line ─── */
.td-root .td-leg-match-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.td-root .td-leg-match {
  font-size: 13px;
  font-weight: 600;
  color: var(--ta-text);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;            /* allow wrap if super long */
  line-height: 1.25;
  transition: color 140ms;
  overflow: hidden;
}
.td-root .td-leg-match:hover { color: var(--ta-accent); }
.td-root .td-leg-team-home,
.td-root .td-leg-team-away {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}
.td-root .td-leg-vs {
  color: var(--ta-text-dim);
  font-weight: 500;
  font-size: 12px;
  padding: 0 1px;
  flex-shrink: 0;
}

/* Bet-time minute chip — appears under team line when leg was placed live */
.td-root .td-leg-betmin {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--ta-warn-bg);
  color: var(--ta-warn);
  border: 1px solid var(--ta-warn-border);
  font-family: var(--ta-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: help;
  transition: transform 130ms ease-out;
}
.td-root .td-leg-betmin:hover { transform: translateY(-1px); }
/* v4p30 iter2 — danger-tier coloring on bet-time chip */
.td-root .td-leg-betmin.is-early { background: rgba(93,255,155,0.10); color: #5dff9b; border-color: rgba(93,255,155,0.30); }
.td-root .td-leg-betmin.is-mid   { background: rgba(255,200,87,0.12); color: #ffc857; border-color: rgba(255,200,87,0.32); }
.td-root .td-leg-betmin.is-late  { background: rgba(255,88,112,0.12); color: #ff5870; border-color: rgba(255,88,112,0.35); animation: tdpBetLatePulse 2.4s ease-in-out infinite; }
@keyframes tdpBetLatePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,88,112,0.0); }
  50%     { box-shadow: 0 0 0 3px rgba(255,88,112,0.18); }
}

/* ─── BET CELL — market › pick + suggestion pill inline ─────────── */
.td-root .td-leg-bet-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--ta-text-2);
  line-height: 1.4;
}
.td-root .td-leg-bet-cell .td-leg-market {
  color: var(--ta-text-2);
  font-weight: 500;
  white-space: normal;        /* allow wrap if long market name */
  overflow-wrap: break-word;
  word-break: break-word;
}
.td-root .td-leg-bet-cell .td-leg-sep {
  color: var(--ta-text-dim);
  flex-shrink: 0;
}
.td-root .td-leg-bet-cell .td-leg-pick {
  color: var(--ta-text);
  font-weight: 700;
  white-space: normal;
  overflow-wrap: break-word;
}
.td-root .td-leg-bet-cell .td-leg-sug {
  display: inline-flex;
  margin-left: 4px;
  flex-shrink: 0;
}

/* The .td-leg-bet legacy class no longer used — hide if it slips through */
.td-root .td-leg-bet:not(.td-leg-bet-cell) { display: none; }

/* Slight allow row to grow when content wraps (taller match/bet cell) */
.td-root .td-leg-row { min-height: 42px !important; }
.td-root .td-leg-headers { min-height: auto !important; padding: 6px 14px !important; }

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-9 — L# alignment + drawer empty-state polish ·
 *                    v=v4p9-2026052020
 *
 * Fixes:
 *   • L# pill in drawer-row exact-aligned with L# in leg-row (34px vs 36px)
 *   • Drawer empty states get proper styling (italic, dim, centered chip)
 *   • Drawer-row first-column width unified
 *   • L# pill is interactive: hover-tint to accent (preview cross-reference)
 *   • Headers row fully baseline-aligned with leg row
 * ═════════════════════════════════════════════════════════════════════ */

/* Drawer row: align first col with leg row (34px), bump padding a touch
   to match leg row's 9px 14px exactly */
.td-root .td-drawer-row {
  grid-template-columns: 34px minmax(180px, 1fr) auto auto auto auto auto !important;
  padding: 9px 14px !important;
  gap: 14px !important;
  align-items: center !important;
}

/* Drawer L# — exact same chip style as leg L# (so they line up across cards) */
.td-root .td-drawer-num {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--ta-text-2) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: 4px !important;
  font-family: var(--ta-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  height: 22px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms, color 140ms, border-color 140ms;
  cursor: default;
}
.td-root .td-leg-num {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--ta-text-2) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: 4px !important;
  font-family: var(--ta-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  height: 22px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms, color 140ms, border-color 140ms;
}

/* Hover tint on either L# pill — visual hint that they cross-reference */
.td-root .td-drawer-row:hover .td-drawer-num,
.td-root .td-leg-row:hover .td-leg-num {
  background: var(--ta-accent-bg) !important;
  color: var(--ta-accent) !important;
  border-color: var(--ta-accent-border) !important;
}

/* Header row L# col — same width to align */
.td-root .td-leg-headers {
  grid-template-columns:
    34px        /* L# */
    100px       /* Sport */
    62px        /* Channel */
    minmax(220px, 2.6fr)
    minmax(180px, 2fr)
    72px
    96px
    32px
    !important;
  gap: 14px !important;
  align-items: center !important;
}

/* ─── Drawer empty states — Pranim-quality polish ─────────────────── */
.td-root .td-drawer-empty {
  font-family: var(--ta-mono) !important;
  font-size: 10.5px !important;
  color: var(--ta-text-dim) !important;
  font-style: italic !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px dashed var(--ta-border) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Drawer sparkline loading/error states share the empty-state visual */
.td-root .td-drawer-spark-loading,
.td-root .td-drawer-spark-err {
  font-family: var(--ta-mono) !important;
  font-size: 10.5px !important;
  color: var(--ta-text-dim) !important;
  font-style: italic !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px dashed var(--ta-border) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin: 0;
}

/* Drawer-empty when LOADING — subtle amber tint */
.td-root .td-drawer-spark-loading,
.td-root .td-drawer-empty[data-state="loading"] {
  color: var(--ta-warn) !important;
  border-color: var(--ta-warn-border) !important;
  background: var(--ta-warn-bg) !important;
}

/* Drawer-empty when ERROR — subtle bad tint */
.td-root .td-drawer-spark-err,
.td-root .td-drawer-empty[data-state="error"] {
  color: var(--ta-bad) !important;
  border-color: var(--ta-bad-border) !important;
  background: var(--ta-bad-bg) !important;
}

/* Drawer head: badge "asnjë" when 0-count drawer — quieter style */
.td-root .td-drawer-badge {
  font-family: var(--ta-mono) !important;
  font-size: 10px !important;
  color: var(--ta-text-dim) !important;
  font-style: italic !important;
  letter-spacing: 0.04em;
}

/* Tech drawer row alignment */
.td-root .td-drawer-tech-row {
  grid-template-columns: 34px minmax(180px, 1fr) auto !important;
  align-items: flex-start !important;
}
.td-root .td-drawer-tech-row .td-drawer-num {
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-10 — L# cross-hover highlight · v=v4p10-2026052030
 *
 * Hover any L# pill (in selections OR in any drawer) and ALL L# pills
 * matching that label across the page light up — visual cross-reference.
 * Bet-minute chip (@ N') now also shown in drawer rows for context parity.
 * ═════════════════════════════════════════════════════════════════════ */

/* Cross-hover state — applied dynamically by _installLnCrossHover JS */
.td-root .td-leg-num.is-cross-hover,
.td-root .td-drawer-num.is-cross-hover {
  background: var(--ta-accent) !important;
  color: #fff !important;
  border-color: var(--ta-accent) !important;
  box-shadow: 0 0 0 2px var(--ta-accent-bg), 0 0 12px var(--ta-accent-bg);
  transform: scale(1.05);
  transition: all 120ms ease-out;
}

/* Bet-min chip inside drawer match cell — same look as in leg row */
.td-root .td-drawer-match .td-leg-betmin {
  background: var(--ta-warn-bg);
  color: var(--ta-warn);
  border: 1px solid var(--ta-warn-border);
  font-family: var(--ta-mono);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-left: 4px;
  vertical-align: middle;
  display: inline-flex;
}

/* Subtle row hover when its L# is cross-highlighted — extra visual link */
.td-root .td-leg-row:has(.td-leg-num.is-cross-hover),
.td-root .td-drawer-row:has(.td-drawer-num.is-cross-hover) {
  background: rgba(90, 140, 255, 0.04) !important;
  outline: 1px solid var(--ta-accent-border);
  outline-offset: -1px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-11 — anti-FOUC + layout-shift kill · v=v4p11-2026052040
 *
 * Fixes:
 *   • Risk Hero loading state reserves min-height (no CLS when data arrives)
 *   • Loading state shows skeleton placeholder bars (occupies the space)
 *   • Fade-in animation only runs on initial card mount, not re-renders
 *     (kills the flicker every time risk/audit refreshes)
 * ═════════════════════════════════════════════════════════════════════ */

/* Risk Hero loading state — reserve space matching real data height */
.td-root .td-risk-hero.td-risk-loading {
  min-height: 280px;
  padding: 16px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.td-root .td-risk-loading-msg {
  font-style: italic;
  color: var(--ta-text-dim);
  font-size: 11px;
  text-align: center;
  padding: 6px 0;
}

/* Skeleton bars for loading state — give the space visual weight */
.td-root .td-risk-hero.td-risk-loading::before {
  content: "";
  display: block;
  height: 112px;
  width: 200px;
  margin: 8px auto;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--ta-card-head) 0%,
    var(--ta-card-hover) 50%,
    var(--ta-card-head) 100%);
  background-size: 200% 200%;
  animation: tdpRiskSkelShimmer 1.6s ease-in-out infinite;
}

.td-root .td-risk-hero.td-risk-loading::after {
  content: "";
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px 60px;
  gap: 8px;
  height: 128px;
  background:
    linear-gradient(90deg, var(--ta-card-head) 0%, var(--ta-card-hover) 50%, var(--ta-card-head) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: tdpRiskSkelShimmer 1.6s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes tdpRiskSkelShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: -200% 50%; }
}

/* Risk Hero error state — also reserve some space */
.td-root .td-risk-hero.td-risk-err {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px !important;
}

/* ─── KILL FADE-IN ON RERENDER ────────────────────────────────────
 * Original animation triggers on every DOM mount including replaceWith
 * during rerender — causes flicker every audit/risk poll. Disable
 * the entrance animation entirely. The cards now appear instantly
 * (we already have hover transitions for interactivity).
 * Initial-page-load delay is ~50ms anyway so users won't notice.
 * ────────────────────────────────────────────────────────────── */
.td-root .td-card,
.td-root .td-risk-hero,
.td-root .td-sel-card {
  animation: none !important;
}

/* Also kill the staggered card animation delays — no longer relevant */
.td-root .td-cols .td-col-l > .td-card:nth-child(n),
.td-root .td-cols .td-col-r > .td-card:nth-child(n) {
  animation-delay: 0s !important;
}

/* Drawer slide-down stays — that one IS user-triggered, not auto-rerender */

/* ─── Audit timeline loading: reserve space ──────────────────────── */
.td-root .td-aud-list {
  min-height: 200px;
}

/* v4p29 iter6 — was min-height:180px reserving space during load that left
 * a 40px dead band on 1-leg tickets. Drop to 0; rely on the card's own
 * head+headers+row to size naturally. Skeleton placeholders inside the
 * leg-list still reserve their own height during fetch. */
.td-root .td-sel-card-wrap {
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-12 — sticky leg-headers row · v=v4p12-2026052050
 *
 * Pranim's "Të Pranimit" page keeps the column headers visible while
 * scrolling through tickets. We get the same: the "L# · Sport · Statusi
 * · Ndeshja & basti @ · Tregu · ..." header row sticks at the top while
 * scrolling through 15+ legs, then scrolls away with the card naturally.
 * ═════════════════════════════════════════════════════════════════════ */

/* Selection card cannot use overflow:hidden if we want internal sticky */
.td-root .td-sel-card-wrap {
  overflow: visible !important;
}

/* Leg headers (column titles) — sticky beneath the page header */
.td-root .td-leg-row.td-leg-headers {
  position: sticky;
  top: 50px;            /* below the page header (~48px tall) + 2px buffer */
  z-index: 4;
  /* Stronger bg so leg rows scrolling under don't bleed through */
  background: var(--ta-card-head) !important;
  /* Extra visual depth when stuck */
  box-shadow:
    0 1px 0 var(--ta-line),
    0 2px 6px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* When the headers row is stuck (scrolled past its origin), give a
   subtle indicator via :has() — most modern browsers support this */
.td-root .td-sel-card-wrap:has(.td-leg-headers:not([data-not-stuck])) .td-leg-headers {
  /* No-op for now — left as hook for future "is-stuck" styling */
}

/* Drawer cards: same treatment for their drawer-head when scrolling
   through long event/sig lists. Drawer head sticks at the same top:50. */
.td-root .td-drawer.td-card {
  overflow: visible !important;
}
.td-root .td-drawer.is-open .td-drawer-head {
  position: sticky;
  top: 50px;
  z-index: 3;
  box-shadow:
    0 1px 0 var(--ta-line),
    0 2px 6px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The page header (already sticky) — bump its z-index to stay above
   the new sticky headers below */
.td-root .td-head {
  z-index: 50 !important;
}

/* Ensure card heads (Money, Player, Audit) keep their non-sticky behavior
   — only leg-headers + open drawer-heads are sticky */
.td-root .td-card .td-card-head:not(.td-sel-cards-head):not(.td-drawer-head) {
  position: static;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-13 — quoted_odds drift chip · v=v4p13-2026052060
 *
 * When the player saw odds 1.85 at slip-time but the bet committed at
 * 1.78 (line moved before commit), surface a small chip in the bet cell.
 * Color-coded: red if odds dropped (worse for player → operator scrutiny),
 * green if odds rose (better for player → no concern but informative).
 * ═════════════════════════════════════════════════════════════════════ */

.td-root .td-leg-drift {
  display: inline-flex;
  align-items: center;
  font-family: var(--ta-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  margin-left: 6px;
  border: 1px solid;
  white-space: nowrap;
  cursor: help;
}
.td-root .td-leg-drift.is-down {
  background: var(--ta-bad-bg);
  color: var(--ta-bad);
  border-color: var(--ta-bad-border);
}
.td-root .td-leg-drift.is-up {
  background: var(--ta-ok-bg);
  color: var(--ta-ok);
  border-color: var(--ta-ok-border);
}
.td-root .td-leg-drift::before {
  content: "Δ";
  margin-right: 3px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-14 — audit refresh visibility · v=v4p14-2026052070
 *
 * The audit timeline auto-loads on mount + refreshes on demand. Previously
 * background loads were silent — operator couldn't tell if the data shown
 * was stale. Now:
 *   • Refresh button shows a spinning ⟳ while loading + disabled state
 *   • Title row shows a pulsing dot when loading happens in background
 *     (i.e. user already sees data but a refresh is in flight)
 *   • Count badge promoted to its own pill (cleaner than inline text)
 * ═════════════════════════════════════════════════════════════════════ */

.td-root .td-aud-title-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.td-root .td-aud-count {
  display: inline-flex;
  align-items: center;
  font-family: var(--ta-mono);
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ta-text-2);
  border: 1px solid var(--ta-border);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0;
  text-transform: none;
}

.td-root .td-aud-bg-loading {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.td-root .td-aud-dot-pulse {
  color: var(--ta-accent);
  font-size: 10px;
  animation: tdpAudDotPulse 1.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes tdpAudDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Refresh button spin animation while loading */
.td-root .td-aud-refresh.is-spinning {
  cursor: wait !important;
  opacity: 0.6;
}
.td-root .td-aud-refresh.is-spinning::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: -2px;
  border: 1.5px solid var(--ta-text-dim);
  border-top-color: var(--ta-accent);
  border-radius: 50%;
  animation: tdpAudSpin 700ms linear infinite;
  vertical-align: middle;
}
.td-root .td-aud-refresh.is-spinning {
  font-size: 0;  /* hide the ↻ char while showing the spinner */
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes tdpAudSpin {
  to { transform: rotate(360deg); }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .td-root .td-aud-dot-pulse,
  .td-root .td-aud-refresh.is-spinning::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-17 — fix sticky drawer-head overlap · v=v4p17-2026052100
 *
 * Issue: in v4p12 we made open-drawer heads `position: sticky; top: 50px`
 * along with the leg-headers row at the same top value. When multiple
 * drawers are open, ALL their heads try to stick at top:50px → they
 * visually overlap each other AND the leg-headers.
 *
 * Fix: drawer heads scroll naturally with the body. Only the
 * leg-headers row stays sticky — that's the high-value table-header
 * pattern. Drawer bodies are short enough (3-15 rows) that sticky
 * drawer heads add little value and create overlap headaches.
 * ═════════════════════════════════════════════════════════════════════ */

.td-root .td-drawer.is-open .td-drawer-head {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Drawer cards can go back to overflow: hidden since no internal sticky */
.td-root .td-drawer.td-card {
  overflow: hidden !important;
}

/* The leg-headers row stays sticky (that's the high-value pattern) */
.td-root .td-sel-card-wrap {
  overflow: visible !important;  /* sticky leg-headers still needs this */
}
.td-root .td-leg-row.td-leg-headers {
  position: sticky;
  top: 50px;
  z-index: 4;
  background: var(--ta-card-head) !important;
  box-shadow:
    0 1px 0 var(--ta-line),
    0 2px 6px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2026-05-14 V4P-18 — ticket_type tag · v=v4p18-2026052110
 *
 * Header now shows Albanian human label for ticket type:
 *   "single"   → "1 këmbë"
 *   "combined" → "Multi · N"   (with leg count)
 *   "system"   → "Sistem · N"
 *
 * Visually distinguished from the #id tag with its own subtle accent so
 * operator scans the header and instantly groks: ID + type + leg-count
 * without parsing tag text.
 * ═════════════════════════════════════════════════════════════════════ */

.td-root .td-tag-type {
  background: var(--ta-accent-bg) !important;
  color: var(--ta-accent) !important;
  border-color: var(--ta-accent-border) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: none;
  padding: 2px 8px !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * v4p20 (2026-05-14) — STACKED FULL-WIDTH LAYOUT
 * Brother: leg list needs the full page width; Veprime + Historiku move
 * below the drawers so nothing is cramped. Old `.td-cols` 2-col split
 * collapses into a single column (the rules above with !important still
 * exist for back-compat but are overridden here).
 * ═════════════════════════════════════════════════════════════════════ */

.td-root.td-root-stacked {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-width: none !important;
  width: 100% !important;
}

/* The old .td-cols / .td-col-l / .td-col-r are no longer rendered in
 * stacked mode, but in case a stale cache resolves them, force single-col. */
.td-root-stacked .td-cols { display: block !important; }
.td-root-stacked .td-col-l, .td-root-stacked .td-col-r {
  display: contents !important;
}

/* v4p32 iter2 — pair grids align stretch so left/right cards are equal
 * height. Was align-items:start which left LOJTARI a tiny 114px next to
 * a 248px PARA, looking like a layout glitch. Now both cards fill the
 * row's natural max height; their inner content uses justify-content
 * to distribute space sensibly. */
.td-root .td-cols-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.td-root .td-cols-pair > .td-card {
  display: flex;
  flex-direction: column;
}
.td-root .td-cols-pair > .td-card > :last-child {
  flex: 1;
}
@media (max-width: 1100px) {
  .td-root .td-cols-pair { grid-template-columns: 1fr !important; }
}

/* Bottom pair: Veprime | Historiku — actions card is compact (note + reopen),
 * audit timeline is naturally tall. v4p32 iter3: don't stretch bottom pair —
 * VEPRIME would gain ~360px of empty space. Align both to top so VEPRIME
 * hugs its content height and HISTORIKU runs full natural length next to it. */
.td-root .td-cols-pair-bottom {
  grid-template-columns: minmax(280px, 0.4fr) minmax(0, 1fr) !important;
  align-items: start !important;
}
.td-root .td-cols-pair-bottom > .td-card {
  align-self: start !important;
}

/* v4p32 iter2 — drawer group: 4 collapsed drawers were 4 orphan cards
 * with rounded corners + their own backgrounds, looked unanchored. Now
 * wrap them in a single titled card with internal dividers between rows. */
/* v4p32 iter9 — DETAJE SHTESË as horizontal TAB STRIP per brother spec.
 * Was: 4 drawer rows stacked vertically (~120px chrome closed). Now: tab
 * strip across the top, closed drawers occupy 1 column each (~38px row);
 * an open drawer spans full width (grid-column: 1/-1) and CSS grid
 * auto-flow pushes siblings into the next row's slots. */
.td-root .td-drawer-group {
  padding: 0 !important;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
}
.td-root .td-drawer-group-head {
  grid-column: 1 / -1;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--tdp-line, #2a3145) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdp-text-2, #8a93a6);
  display: none; /* iter15 — title dropped, tabs self-label */
}
.td-root .td-drawer-group .td-drawer {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--tdp-line, #2a3145) !important;
  border-bottom: 1px solid var(--tdp-line, #2a3145) !important;
  background: transparent !important;
}
.td-root .td-drawer-group .td-drawer:nth-child(5) { /* last column in first row */
  border-right: none !important;
}
/* Open drawer takes the full width, body renders below the tab cell */
.td-root .td-drawer-group .td-drawer.is-open {
  grid-column: 1 / -1 !important;
  background: var(--tdp-bg-1, #1a2030) !important;
  border-right: none !important;
}
/* Hide chevron when in tab-strip mode — tab is a button, not an accordion */
.td-root .td-drawer-group .td-drawer-chev {
  display: none;
}
/* Slim head when not open, tighten icon+title spacing for tab feel */
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head {
  padding: 8px 12px !important;
  min-height: 36px !important;
  justify-content: center;
  gap: 6px !important;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-toggle {
  display: none;
}

/* The selections card itself fills the row */
.td-root-stacked .td-sel-card-wrap,
.td-root-stacked .td-drawer,
.td-root-stacked .td-risk-hero,
.td-root-stacked .td-offer-banner {
  width: 100% !important;
}

/* v4p20 — leg-row grid retuned for ~1880px usable width.
 * Was: 34px 100px 62px 2.6fr 2fr 72px 96px 32px (cramped channel chip).
 * Now: 40px 110px 170px 3fr 3fr 90px 120px 38px — channel chip gets
 * 170px so "PRE · E enjte 21:00" fits without truncation. */
.td-root-stacked .td-leg-row {
  grid-template-columns: 40px 110px 170px minmax(0, 3fr) minmax(0, 3fr) 90px 120px 38px !important;
  column-gap: 14px !important;
  padding: 10px 16px !important;
  align-items: center !important;
}

/* Channel chip — fill the 170px grid cell instead of shrinking to text width */
.td-root-stacked .td-leg-channel {
  display: flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start;
  min-width: 0;
}
/* Header title clears the floating .ta-global-menu-btn (≡) at top-left */
.td-root-stacked .td-head {
  padding-left: 56px !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * v4p23 (2026-05-14) — RISK HERO COMPACT (Shopify-style)
 * Single row at default. Full intel hidden behind "Shiko detaje" toggle.
 * ═════════════════════════════════════════════════════════════════════ */
.td-root .td-risk-hero.td-risk-compact {
  padding: 8px 14px !important;
  background: var(--tdp-bg-1, #1a2030) !important;
  border: 1px solid var(--tdp-line, #2a3145) !important;
  border-left: 3px solid var(--tdp-line, #2a3145) !important;
  border-radius: 6px !important;
  display: block !important;
}
.td-root .td-risk-compact.td-risk-high { border-left-color: #ff5870 !important; }
.td-root .td-risk-compact.td-risk-med  { border-left-color: #ffc857 !important; }
.td-root .td-risk-compact.td-risk-low  { border-left-color: #5dff9b !important; }

.td-root .td-risk-compact-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap;
  min-height: 28px;
}
.td-root .td-risk-compact-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.td-root .td-risk-compact-score .td-risk-score-num {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.td-root .td-risk-compact-score .td-risk-score-num.td-risk-score-high { color: #ff5870 !important; }
.td-root .td-risk-compact-score .td-risk-score-num.td-risk-score-med  { color: #ffc857 !important; }
.td-root .td-risk-compact-score .td-risk-score-num.td-risk-score-low  { color: #5dff9b !important; }
.td-root .td-risk-compact-score .td-risk-score-max {
  font-size: 13px !important;
  color: var(--tdp-text-2, #8a93a6) !important;
}
.td-root .td-risk-compact-score .td-risk-level {
  margin-left: 6px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.td-root .td-risk-compact .td-risk-level-high { background: rgba(255,88,112,0.15); color: #ff5870; }
.td-root .td-risk-compact .td-risk-level-med  { background: rgba(255,200,87,0.15); color: #ffc857; }
.td-root .td-risk-compact .td-risk-level-low  { background: rgba(93,255,155,0.15); color: #5dff9b; }

.td-root .td-risk-compact-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.td-root .td-risk-compact-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.td-root .td-risk-compact-factors .td-risk-chip {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  line-height: 1.4;
}
.td-root .td-risk-compact-factors .td-risk-chip-bad  { background: rgba(255,88,112,0.10); color: #ff5870; border: 1px solid rgba(255,88,112,0.3); }
.td-root .td-risk-compact-factors .td-risk-chip-warn { background: rgba(255,200,87,0.10); color: #ffc857; border: 1px solid rgba(255,200,87,0.3); }
.td-root .td-risk-compact-factors .td-risk-chip-info { background: rgba(90,140,255,0.10); color: #5a8cff; border: 1px solid rgba(90,140,255,0.3); }
.td-root .td-risk-compact-factors .td-risk-chip-ok   { background: rgba(93,255,155,0.10); color: #5dff9b; border: 1px solid rgba(93,255,155,0.3); }

.td-root .td-risk-compact-rec {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 0 !important;
  line-height: 1.4;
}
.td-root .td-risk-compact-rec.td-risk-rec-bad  { color: #ff8090; }
.td-root .td-risk-compact-rec.td-risk-rec-warn { color: #ffc857; }
.td-root .td-risk-compact-rec.td-risk-rec-info { color: var(--tdp-text-1, #c9d2e3); }
.td-root .td-risk-compact-rec.td-risk-rec-ok   { color: #5dff9b; }
.td-root .td-risk-compact-rec-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.td-root .td-risk-compact-toggle {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--tdp-line, #2a3145);
  color: var(--tdp-text-1, #c9d2e3);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.td-root .td-risk-compact-toggle:hover {
  background: var(--tdp-bg-2, #232c3d);
  border-color: var(--ta-accent, #5a8cff);
  color: var(--ta-accent, #5a8cff);
}

.td-root .td-risk-compact-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--tdp-line, #2a3145);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: td-risk-fade-in 200ms ease-out;
}
.td-root .td-risk-compact-section { display: flex; flex-direction: column; gap: 5px; }
.td-root .td-risk-compact-section-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tdp-text-2, #8a93a6);
}
.td-root .td-risk-compact-recs {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.td-root .td-risk-compact-recs li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.4;
}
.td-root .td-risk-compact-recs li.td-risk-rec-bad  { color: #ff8090; }
.td-root .td-risk-compact-recs li.td-risk-rec-warn { color: #ffc857; }
.td-root .td-risk-compact-recs li.td-risk-rec-info { color: var(--tdp-text-1, #c9d2e3); }
.td-root .td-risk-compact-recs li.td-risk-rec-ok   { color: #5dff9b; }
.td-root .td-risk-compact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.td-root .td-risk-cstat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
}
.td-root .td-risk-cstat-k {
  color: var(--tdp-text-2, #8a93a6);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.td-root .td-risk-cstat-v {
  font-weight: 700;
  color: var(--tdp-text-1, #c9d2e3);
}
.td-root .td-risk-cstat-v.is-bad { color: #ff8090; }
.td-root .td-risk-cstat-v.is-ok  { color: #5dff9b; }
@keyframes td-risk-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* v4p22 — header right-side action cluster (quick actions inlined) */
.td-root-stacked .td-head-r-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px !important;
  justify-content: flex-end;
}
.td-root-stacked .td-head-r-actions .td-btn-sm {
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  white-space: nowrap;
}
.td-root-stacked .td-head-r-actions .td-head-risk {
  margin-right: 4px;
}
.td-root-stacked .td-leg-channel-bits {
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-left: 4px;
}

/* Match cell — clear separation from the channel chip column */
.td-root-stacked .td-leg-match-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.td-root-stacked .td-leg-match {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bet cell — give market name room before the › arrow */
.td-root-stacked .td-leg-bet-cell {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Headers row matches the new template exactly */
.td-root-stacked .td-leg-row.td-leg-headers {
  grid-template-columns: 40px 110px 170px minmax(0, 3fr) minmax(0, 3fr) 90px 120px 38px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ta-text-2, #8a93a6) !important;
  padding: 10px 16px !important;
}

/* Drawer rows mirror the same Nr column width */
.td-root-stacked .td-drawer-row {
  padding: 10px 16px !important;
  column-gap: 14px !important;
}

/* Veprime card is narrower at bottom; tighten its internal padding */
.td-root .td-cols-pair-bottom .td-act-card { min-height: 0; }

/* v4p31 iter1 — empty-state message inside open drawers (no legs to render) */
.td-root .td-drawer-body-empty {
  padding: 18px 20px !important;
}
.td-root .td-drawer-empty-msg {
  font-size: 12.5px;
  color: var(--ta-text-2, #8a93a6);
  line-height: 1.5;
  font-style: italic;
}

/* v4p30 iter9 — audit timeline delta chip ("+3h 29m") between consecutive events.
 * Tier color: fast<5m green, mid 5m-1h amber, slow>1h red. Helps operator
 * spot approval/settlement latency at a glance. */
.td-root .td-aud-delta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-family: var(--ta-mono, 'Fira Code', monospace);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.04em;
  cursor: help;
  vertical-align: baseline;
}
.td-root .td-aud-delta.is-fast { background: rgba(93,255,155,0.08); color: #5dff9b; border: 1px solid rgba(93,255,155,0.22); }
.td-root .td-aud-delta.is-mid  { background: rgba(255,200,87,0.10); color: #ffc857; border: 1px solid rgba(255,200,87,0.28); }
.td-root .td-aud-delta.is-slow { background: rgba(255,88,112,0.10); color: #ff8090; border: 1px solid rgba(255,88,112,0.30); }

/* v4p30 iter4 — settlement basis attribution badge.
 * Sits next to the verdict pill, monospace shop-tag style.
 * OP = operator override (warm), AUTO = engine (cool), VND/CLS = system. */
.td-root .td-leg-basis {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-family: var(--ta-mono, 'Fira Code', monospace);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 2px;
  vertical-align: middle;
  cursor: help;
}
.td-root .td-leg-basis-operator       { background: rgba(255,200,87,0.13); color: #ffc857; border: 1px solid rgba(255,200,87,0.35); }
.td-root .td-leg-basis-auto_resolver  { background: rgba(90,140,255,0.10); color: #5a8cff; border: 1px solid rgba(90,140,255,0.30); }
.td-root .td-leg-basis-vendor_verdict { background: rgba(140,150,170,0.10); color: #a8b2c4; border: 1px solid rgba(140,150,170,0.28); }
.td-root .td-leg-basis-classifier     { background: rgba(194,133,255,0.10); color: #c285ff; border: 1px solid rgba(194,133,255,0.30); }
.td-root .td-leg-basis-unknown        { background: rgba(140,150,170,0.06); color: #6b7280; border: 1px dashed rgba(140,150,170,0.30); }

/* v4p29 iter3 — slim inline risk-error strip (was 80px banner) */
.td-root .td-risk-hero.td-risk-err-slim {
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 200, 87, 0.06) !important;
  border: 1px solid rgba(255, 200, 87, 0.15) !important;
  border-left: 3px solid #ffc857 !important;
  border-radius: 5px !important;
  min-height: 28px !important;
  font-size: 11.5px !important;
}
.td-root .td-risk-err-icon {
  color: #ffc857;
  font-size: 12px;
  flex-shrink: 0;
}
.td-root .td-risk-err-msg {
  color: #ffc857;
  font-weight: 600;
}
.td-root .td-risk-err-detail {
  color: var(--ta-text-2, #8a93a6);
  font-family: var(--ta-mono, 'Fira Code', monospace);
  font-size: 10.5px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-root .td-risk-err-retry {
  background: transparent;
  border: 1px solid rgba(255, 200, 87, 0.3);
  color: #ffc857;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 130ms ease-out;
}
.td-root .td-risk-err-retry:hover {
  background: rgba(255, 200, 87, 0.15);
  transform: rotate(180deg);
}

/* v4p29 iter1 — premium PAY pill: dim mono, hover lifts to accent + clipboard cursor */
.td-root .td-tag-pay {
  letter-spacing: 0.04em !important;
  color: var(--ta-text-2, #8a93a6) !important;
  background: rgba(140, 150, 170, 0.06) !important;
  border-color: rgba(140, 150, 170, 0.18) !important;
  transition: all 130ms ease-out;
}
.td-root .td-tag-pay:hover {
  color: var(--ta-accent, #5a8cff) !important;
  border-color: var(--ta-accent-border, rgba(90, 140, 255, 0.4)) !important;
  background: var(--ta-accent-bg, rgba(90, 140, 255, 0.08)) !important;
  transform: translateY(-1px);
}


/* v4p32 iter18 — slim empty audit card: single-line header with inline
   "Asnjë veprim ende" pill instead of stacked head + centered empty text.
   Reclaims ~90px on prematch tickets that have no audit history yet. */
.td-root .td-aud-card-empty {
  padding: 8px 14px !important;
  min-height: 0 !important;
}
.td-root .td-aud-card-empty .td-card-head {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.td-root .td-aud-empty-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.td-root .td-aud-empty-pill {
  margin-left: auto;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ta-text-2, #8a93a6);
  background: rgba(140, 150, 170, 0.06);
  border: 1px solid rgba(140, 150, 170, 0.16);
  border-radius: 999px;
}
.td-root .td-aud-card-empty .td-aud-refresh {
  margin-left: 4px;
}

/* v4p32 iter19 — kill empty void in LOJTARI when player_intel stats are
   absent. Default top-pair stretch made the user card 247px tall to match
   PARA but the chain row only fills ~85px → 160px of dead space. When
   LOJTARI has no .td-user-stats, drop stretch and let each card hug its
   natural height. PARA stays prominent, LOJTARI becomes a tight 85px row. */
.td-root .td-cols-pair:not(.td-cols-pair-bottom):not(:has(.td-user-stats)) {
  align-items: start !important;
}
.td-root .td-cols-pair:not(.td-cols-pair-bottom):not(:has(.td-user-stats)) > .td-card {
  align-self: start !important;
}
/* 2026-05-15 v4p32 iter85 — when LOJTARI has only the chain (no stats) it
   sits 84px shorter than PARA, leaving dead grid space below it. Centering
   the LOJTARI card within the row track (NOT stretching it — height stays
   natural) balances the pair visually: chain breadcrumb floats mid-row
   opposite PARA's flow instead of clinging to the top with a void below. */
.td-root .td-cols-pair:not(.td-cols-pair-bottom):not(:has(.td-user-stats)) > .td-user-card {
  align-self: center !important;
}

/* v4p32 iter20 — compact PARA secondary stats from 3-line stack to inline
   single-row pills. Was 86px (3 cells × 3 stacked lines: key/value/sub).
   Now ~36px (single row: KUOTA 5.01 · 3 këmbë  |  KOMIS 700 L · 7%  |
   MONEDHA LEK). PARA card drops ~50px overall, evens the visual weight
   against the now-compact LOJTARI sibling. */
.td-root .td-money-stat {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  flex-wrap: wrap;
  min-height: 0 !important;
}
.td-root .td-money-stat-k {
  flex: 0 0 auto !important;
  font-size: 9.5px !important;
  opacity: 0.78;
}
.td-root .td-money-stat-v {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}
.td-root .td-money-stat-sub {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  opacity: 0.7;
  position: relative;
  padding-left: 8px;
}
.td-root .td-money-stat-sub::before {
  content: "·";
  position: absolute;
  left: 1px;
  opacity: 0.55;
}

/* v4p32 iter21 — inline VEPRIME single info-hint into the card head as a
   pill chip. Reclaims the 43px hint row when it was carrying just one info
   line (e.g. "Aktive — verdikti aplikohet automatikisht."). Warn/bad
   hints and multi-hint cases keep the dedicated row for prominence. */
.td-root .td-act-head-hint {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  color: var(--ta-text-2, #8a93a6);
  background: rgba(140, 150, 170, 0.06);
  border: 1px solid rgba(140, 150, 170, 0.16);
}
.td-root .td-act-head-hint-info {
  color: #8eb4ff;
  background: rgba(90, 140, 255, 0.07);
  border-color: rgba(90, 140, 255, 0.22);
}
.td-root .td-act-head-hint .td-act-hint-icon {
  font-size: 11px;
  line-height: 1;
}

/* v4p32 iter23 — proportional drawer-tab widths. Default grid was
   repeat(4, 1fr) = equal width regardless of which tabs carry data.
   Now: data-bearing tabs flex-grow; empty tabs shrink to indicator-only.
   Open drawer still spans full width (overrides flex via flex-basis:100%).
   When all 4 are empty (no signals/sugjerime/events/details on this
   ticket), grid fallback applies and they sit equal-width. */
.td-root .td-drawer-group:has(.td-drawer-head.has-data) {
  display: flex !important;
  flex-wrap: wrap;
  grid-template-columns: none !important;
}
.td-root .td-drawer-group:has(.td-drawer-head.has-data) > .td-drawer {
  flex: 0 1 140px;
  min-width: 0;
  width: auto !important;
}
.td-root .td-drawer-group:has(.td-drawer-head.has-data) > .td-drawer:has(.td-drawer-head.has-data) {
  flex: 1 1 240px;
}
.td-root .td-drawer-group:has(.td-drawer-head.has-data) > .td-drawer.is-open {
  flex: 1 1 100% !important;
}

/* v4p32 iter24 — when one VEPRIME section is disabled (e.g. Rihap on an
   active ticket), give the active section more breathing room and demote
   the disabled one to a slim explanatory pill. Was 50/50 split with the
   disabled card at 0.55 opacity but full width; now 2fr/1fr with the
   disabled section using slim typography and no full button row. */
.td-root-stacked > .td-act-card .td-act-sections:has(.td-act-section.is-disabled) {
  grid-template-columns: 2.2fr 1fr !important;
}
.td-root .td-act-section.is-disabled {
  padding: 10px 12px !important;
}
.td-root .td-act-section.is-disabled .td-act-section-icon {
  font-size: 14px !important;
}
.td-root .td-act-section.is-disabled .td-act-section-title {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.td-root .td-act-section.is-disabled .td-act-section-desc {
  font-size: 10px !important;
  line-height: 1.3 !important;
}
.td-root .td-act-section.is-disabled .td-btn {
  display: none !important;
}
@media (max-width: 900px) {
  .td-root-stacked > .td-act-card .td-act-sections:has(.td-act-section.is-disabled) {
    grid-template-columns: 1fr !important;
  }
}

/* v4p32 iter25 — inline subtitle chip in the header title row. The previous
   .td-head-subtitle line ate ~22px of vertical space below the title row.
   Now the unique part of the subtitle (after stripping the redundant state
   word that the pill already conveys) renders as a dim italicized chip in
   the title row itself. Header drops 64px → ~46px on every ticket page. */
.td-root .td-tag-subtitle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--ta-text-3, #6e768a) !important;
  font-style: italic;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}
.td-root .td-head-title-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* v4p32 iter26 — give VEPRIME's primary CTA real visual weight. The
   "+ Shto shënim" button was rendering at td-btn-sm size (26px tall, ghost-
   like) — same prominence as the "Anulo" cancel button in the form. As the
   only action an operator can take on most tickets, it deserves a proper
   call-to-action treatment: bigger height, bolder type, gradient bg with
   subtle lift on hover. */
.td-root .td-btn.td-btn-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  width: 100% !important;
  background: linear-gradient(180deg,
    var(--ta-ok-soft, rgba(70, 200, 130, 0.18)) 0%,
    var(--ta-ok-soft-2, rgba(70, 200, 130, 0.10)) 100%) !important;
  border: 1px solid rgba(70, 200, 130, 0.35) !important;
  color: #6fe6a3 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 130ms ease-out, box-shadow 130ms ease-out, background 130ms ease-out;
}
.td-root .td-btn.td-btn-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg,
    rgba(70, 200, 130, 0.26) 0%,
    rgba(70, 200, 130, 0.16) 100%) !important;
  border-color: rgba(70, 200, 130, 0.55) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 12px rgba(70, 200, 130, 0.18);
}
.td-root .td-btn.td-btn-cta:active {
  transform: translateY(0);
}

/* v4p32 iter27 — empty drawer tabs in the strip were wrapping their titles
   to 2 lines (e.g. "SUGJERIME / AUTO" at 140px width), pushing the strip
   from 39px to 50px and breaking the row's visual rhythm. Force titles to
   single-line with ellipsis so all 4 tabs share a consistent slim height. */
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head {
  flex-wrap: nowrap !important;
  min-height: 36px !important;
  align-items: center;
}

/* v4p32 iter27b — Ngjarjet drawer head carries a "3 këmbë" badge that
   wraps to a 2nd line at 140px tab-strip width. Hide the badge in compact
   tab mode (it's contextual info that belongs in the open body, not the
   tab indicator). Drawer count chip on the title still shows the real
   number when populated. */
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-badge {
  display: none !important;
}

/* v4p32 iter28 — state-colored frame around the ticket root.
   won=green, lost=red, voided/refused=yellow. Bold inner ring + outer
   glow + 4px top/bottom accent stripes. Verdict reaches the operator's
   peripheral vision before they read any text. */
.td-root.td-state-won,
.td-root.td-state-lost,
.td-root.td-state-voided {
  position: relative;
  border-radius: 14px;
  padding: 6px !important;
  margin: 4px 0 !important;
}
.td-root.td-state-won {
  background: linear-gradient(180deg, rgba(70, 200, 130, 0.06) 0%, transparent 280px);
  box-shadow:
    inset 0 0 0 2px rgba(70, 200, 130, 0.55),
    0 0 0 1px rgba(70, 200, 130, 0.18),
    0 0 56px rgba(70, 200, 130, 0.28);
}
.td-root.td-state-lost {
  background: linear-gradient(180deg, rgba(240, 80, 95, 0.07) 0%, transparent 280px);
  box-shadow:
    inset 0 0 0 2px rgba(240, 80, 95, 0.62),
    0 0 0 1px rgba(240, 80, 95, 0.22),
    0 0 56px rgba(240, 80, 95, 0.32);
}
.td-root.td-state-voided {
  background: linear-gradient(180deg, rgba(245, 195, 70, 0.08) 0%, transparent 280px);
  box-shadow:
    inset 0 0 0 2px rgba(245, 195, 70, 0.65),
    0 0 0 1px rgba(245, 195, 70, 0.22),
    0 0 56px rgba(245, 195, 70, 0.32);
}
/* Top + bottom accent stripes — solid 4px bars across both edges */
.td-root.td-state-won::before,
.td-root.td-state-lost::before,
.td-root.td-state-voided::before,
.td-root.td-state-won::after,
.td-root.td-state-lost::after,
.td-root.td-state-voided::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  pointer-events: none;
  z-index: 10;
}
.td-root.td-state-won::before,
.td-root.td-state-lost::before,
.td-root.td-state-voided::before { top: 0; border-radius: 14px 14px 0 0; }
.td-root.td-state-won::after,
.td-root.td-state-lost::after,
.td-root.td-state-voided::after  { bottom: 0; border-radius: 0 0 14px 14px; }
.td-root.td-state-won::before,
.td-root.td-state-won::after     { background: linear-gradient(90deg, rgba(70, 200, 130, 0.5) 0%, rgba(70, 200, 130, 1) 50%, rgba(70, 200, 130, 0.5) 100%); }
.td-root.td-state-lost::before,
.td-root.td-state-lost::after    { background: linear-gradient(90deg, rgba(240, 80, 95, 0.5) 0%, rgba(240, 80, 95, 1)  50%, rgba(240, 80, 95, 0.5)  100%); }
.td-root.td-state-voided::before,
.td-root.td-state-voided::after  { background: linear-gradient(90deg, rgba(245, 195, 70, 0.5) 0%, rgba(245, 195, 70, 1) 50%, rgba(245, 195, 70, 0.5) 100%); }

/* v4p32 iter32 — SMART STATE-DRIVEN ACTION PANEL.
   Sits below header, above NDESHJET. Tier-colored bar + status message
   + action buttons that change per ticket state. Operator's first scan
   after the title sees: WHAT state · WHY · what BUTTONS to press. */
.td-root .td-smart-state {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 14px 18px !important;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.td-root .td-smart-state::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  pointer-events: none;
}
/* iter73 — bumped tier alpha + added a soft top→bottom radial highlight
   on each tier for richer visual presence. The panel was a bit flat
   given how important it is. Border + bg gradient + a 10% vignette
   from the top corner. */
.td-root .td-smart-tier-warn {
  background:
    radial-gradient(circle at 10% 20%, rgba(245, 195, 70, 0.10), transparent 320px),
    linear-gradient(90deg, rgba(245, 195, 70, 0.16) 0%, rgba(245, 195, 70, 0.05) 100%);
  border: 1px solid rgba(245, 195, 70, 0.36);
}
.td-root .td-smart-tier-warn::before { background: linear-gradient(180deg, rgba(245, 195, 70, 0.95), rgba(245, 195, 70, 0.55)); }
.td-root .td-smart-tier-info {
  background:
    radial-gradient(circle at 10% 20%, rgba(90, 140, 255, 0.10), transparent 320px),
    linear-gradient(90deg, rgba(90, 140, 255, 0.13) 0%, rgba(90, 140, 255, 0.04) 100%);
  border: 1px solid rgba(90, 140, 255, 0.32);
}
.td-root .td-smart-tier-info::before { background: linear-gradient(180deg, rgba(90, 140, 255, 0.95), rgba(90, 140, 255, 0.55)); }
.td-root .td-smart-tier-bad {
  background:
    radial-gradient(circle at 10% 20%, rgba(240, 80, 95, 0.10), transparent 320px),
    linear-gradient(90deg, rgba(240, 80, 95, 0.16) 0%, rgba(240, 80, 95, 0.05) 100%);
  border: 1px solid rgba(240, 80, 95, 0.38);
}
.td-root .td-smart-tier-bad::before { background: linear-gradient(180deg, rgba(240, 80, 95, 0.95), rgba(240, 80, 95, 0.55)); }
.td-root .td-smart-msg {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 8px;
}
.td-root .td-smart-title {
  font-size: 15.5px;          /* iter62 — bumped from 14 for prominence */
  font-weight: 700;
  color: var(--ta-text, #e8ecf5);
  margin-bottom: 4px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* iter62 — make the leading emoji larger so it carries the panel's tier
   color visually. Targets the first character cluster up to the first
   space so titles like "⏳ Pret aprovimin tënd" get the icon scaled. */
.td-root .td-smart-title::first-letter {
  font-size: 1.35em;
  margin-right: 4px;
}
.td-root .td-smart-sub {
  font-size: 12.5px;          /* iter62 — bumped from 11.5 for readability */
  color: var(--ta-text-2, #a0a8bf);
  font-weight: 500;
}
.td-root .td-smart-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}
.td-root .td-smart-actions .td-btn {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 800px) {
  .td-root .td-smart-state { flex-direction: column; align-items: stretch; }
  .td-root .td-smart-actions { width: 100%; }
  .td-root .td-smart-actions .td-btn { flex: 1 1 auto; }
}

/* v4p32 iter35 — tint the PARA result-arrow to match the verdict tier.
   Was dim text-3 (gray) regardless of outcome — neutral, almost invisible.
   Now: ✓ (won) → green, ✕ (lost) → red, ↩ (void) → yellow, ✗ (refused)
   → red. The arrow becomes a deliberate visual bridge between FITIMI and
   the actual outcome, echoing the page's state-color frame from iter28. */
.td-root.td-state-won .td-money-arrow-result {
  color: rgba(70, 200, 130, 0.95) !important;
  text-shadow: 0 0 14px rgba(70, 200, 130, 0.30);
}
.td-root.td-state-lost .td-money-arrow-result {
  color: rgba(240, 80, 95, 0.95) !important;
  text-shadow: 0 0 14px rgba(240, 80, 95, 0.30);
}
.td-root.td-state-voided .td-money-arrow-result {
  color: rgba(245, 195, 70, 0.95) !important;
  text-shadow: 0 0 14px rgba(245, 195, 70, 0.30);
}

/* v4p32 iter36 — symmetry: lost + void outcome panels in PARA now get
   a text-shadow glow on the value, matching the won panel from before.
   Symmetry across outcomes makes the page feel intentional rather than
   "won got more love than lost". Void hero also gets a value color rule
   to look cohesive (was inheriting default text). */
.td-root .td-money-hero-lost .td-money-hero-value {
  text-shadow: 0 0 12px rgba(240, 80, 95, 0.28);
}
.td-root .td-money-hero-void .td-money-hero-value {
  color: rgba(245, 195, 70, 0.92) !important;
  text-shadow: 0 0 12px rgba(245, 195, 70, 0.22);
}

/* v4p32 iter37 — uniform-disposition styling for the NDESHJET total chip.
   When all legs share the same state the chip carries the disposition
   itself ("3 PEZULL" / "3 FITUAR" / "3 HUMBUR" / "3 ANULLUAR") instead
   of generic "3 këmbë" + a separate disposition pill. */
.td-root .td-sel-sum-total-uniform-won {
  background: rgba(70, 200, 130, 0.10) !important;
  border-color: rgba(70, 200, 130, 0.32) !important;
  color: rgba(120, 220, 160, 0.95) !important;
}
.td-root .td-sel-sum-total-uniform-lost {
  background: rgba(240, 80, 95, 0.10) !important;
  border-color: rgba(240, 80, 95, 0.32) !important;
  color: rgba(255, 130, 140, 0.95) !important;
}
.td-root .td-sel-sum-total-uniform-voided {
  background: rgba(245, 195, 70, 0.10) !important;
  border-color: rgba(245, 195, 70, 0.32) !important;
  color: rgba(255, 215, 130, 0.95) !important;
}
.td-root .td-sel-sum-total-uniform-pending {
  background: rgba(140, 150, 170, 0.10) !important;
  border-color: rgba(140, 150, 170, 0.32) !important;
  color: rgba(180, 195, 220, 0.95) !important;
}

/* v4p32 iter39 — uniform-state leg list: hide per-row STATUSI pills when
   all rows share the same state. The head's tier-tinted total chip from
   iter37 already conveys "3 PEZULL". Removes 3-30 redundant pills from
   tickets where every leg ended in the same disposition. */
.td-root .td-leg-list.td-leg-list-uniform .td-leg-state {
  visibility: hidden;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v4p32 iter40 — reclaim the 120px STATE grid column when leg list is
   uniform-state (iter39 hid the pill content but the grid slot was still
   reserved). New grid template drops the state cell entirely; match cell
   gets a 4fr / bet cell 2fr split since "1x2 › 1" doesn't need equal
   weight with the team-vs-team match name. */
.td-root-stacked .td-leg-list-uniform .td-leg-row {
  grid-template-columns: 40px 110px 170px minmax(0, 4fr) minmax(0, 2fr) 90px 38px !important;
}
.td-root-stacked .td-leg-list-uniform .td-leg-row .td-leg-state {
  display: none !important;
}

/* v4p32 iter42 — when uniform list has zero result buttons (all-prematch
   ticket where iter41 hid every 📊), drop the 38px result-btn column.
   Otherwise grid kept a trailing empty slot between odds and row's right
   edge. With this rule the row perfectly hugs its rightmost data cell. */
.td-root-stacked .td-leg-list-uniform:not(:has(.td-leg-result-btn)) .td-leg-row {
  grid-template-columns: 40px 110px 170px minmax(0, 4fr) minmax(0, 2fr) 90px !important;
}

/* v4p32 iter44 — WAYBACK MATCH-EVENT TIMELINE.
   Lives at the bottom of each SINJALI drawer row. Horizontal bar showing
   every match event (goals, cards, corners, subs) at its minute position,
   plus a vertical BAST flag at the minute the operator's bet was placed,
   plus a half-time tick at min 45, plus minute-axis labels and a play
   button that animates a scrubber across the bar. */
.td-root .td-drawer-row-with-tl {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px !important;
}
.td-root .td-drawer-row-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.td-root .td-timeline {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(140, 150, 170, 0.18);
  border-radius: 8px;
  padding: 12px 18px 28px 18px;
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}
.td-root .td-drawer-row-with-tl {
  align-items: stretch !important;
}
.td-root .td-timeline-loading,
.td-root .td-timeline-err,
.td-root .td-timeline-empty {
  color: var(--ta-text-3, #6e768a);
  text-align: center;
  font-style: italic;
  padding: 14px !important;
}
.td-root .td-tl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--ta-text-2, #a0a8bf);
  font-weight: 600;
}
.td-root .td-tl-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ta-text, #e8ecf5);
}
.td-root .td-tl-meta {
  margin-left: auto;
  font-family: var(--ta-mono, monospace);
  font-weight: 500;
  opacity: 0.7;
}
.td-root .td-tl-play {
  background: rgba(90, 140, 255, 0.10);
  border: 1px solid rgba(90, 140, 255, 0.30);
  border-radius: 999px;
  color: #8eb4ff;
  width: 28px;
  height: 24px;
  font-size: 11px;
  cursor: pointer;
  transition: all 130ms ease-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.td-root .td-tl-play:hover {
  background: rgba(90, 140, 255, 0.20);
  border-color: rgba(90, 140, 255, 0.60);
  transform: scale(1.05);
}
.td-root .td-tl-bar {
  position: relative;
  height: 48px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.04));
  border-radius: 4px;
  border: 1px solid rgba(140, 150, 170, 0.14);
  margin: 4px 0;
}
.td-root .td-tl-halftime {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(140, 150, 170, 0.35);
  border-left: 1px dashed rgba(140, 150, 170, 0.45);
  transform: translateX(-1px);
}
.td-root .td-tl-bet {
  position: absolute;
  top: -8px; bottom: -8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(90, 140, 255, 1) 0%, rgba(90, 140, 255, 0.5) 100%);
  box-shadow: 0 0 8px rgba(90, 140, 255, 0.55);
  z-index: 5;
  transform: translateX(-1px);
}
.td-root .td-tl-bet-flag {
  position: absolute;
  top: -16px;
  left: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8eb4ff;
  background: rgba(90, 140, 255, 0.15);
  border: 1px solid rgba(90, 140, 255, 0.50);
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.td-root .td-tl-dots {
  position: absolute;
  inset: 0;
}
.td-root .td-tl-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  cursor: help;
  transition: transform 130ms ease-out;
}
.td-root .td-tl-dot:hover {
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 10;
}
.td-root .td-tl-dot-ok    { background: rgba(70, 200, 130, 0.18); border: 1px solid rgba(70, 200, 130, 0.55); }
.td-root .td-tl-dot-warn  { background: rgba(245, 195, 70, 0.18); border: 1px solid rgba(245, 195, 70, 0.55); }
.td-root .td-tl-dot-bad   { background: rgba(240, 80, 95, 0.18); border: 1px solid rgba(240, 80, 95, 0.55); }
.td-root .td-tl-dot-info  { background: rgba(90, 140, 255, 0.18); border: 1px solid rgba(90, 140, 255, 0.45); }
.td-root .td-tl-dot-muted { background: rgba(140, 150, 170, 0.10); border: 1px solid rgba(140, 150, 170, 0.25); opacity: 0.55; }
.td-root .td-tl-dot-multi {
  font-weight: 700;
  width: 26px;
}
.td-root .td-tl-dot-count {
  position: absolute;
  top: -4px; right: -4px;
  font-size: 8px;
  background: var(--ta-bg-2, #20283a);
  color: var(--ta-text-2, #a0a8bf);
  padding: 1px 3px;
  border-radius: 6px;
  border: 1px solid var(--ta-border, rgba(140,150,170,0.3));
}
.td-root .td-tl-scrub {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.40);
  z-index: 6;
  pointer-events: none;
}
.td-root .td-tl-ticks {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 14px;
  margin-top: 4px;
}
.td-root .td-tl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--ta-text-3, #6e768a);
  font-family: var(--ta-mono, monospace);
}

/* v4p32 iter46 — playable timeline state. Pre-play: dots are "ghosted"
   (60% opacity); during play they "fire" (full opacity + lift + ring) as
   the scrubber sweeps past their minute. Current-minute readout updates
   live so operator can read the time as it ticks. */
.td-root .td-tl-dots .td-tl-dot {
  opacity: 0.55;
  transition: opacity 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}
.td-root .td-tl-dot-fired {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
  box-shadow: 0 0 12px currentColor;
}
.td-root .td-tl-dot-fired.td-tl-dot-ok    { box-shadow: 0 0 14px rgba(70, 200, 130, 0.6); }
.td-root .td-tl-dot-fired.td-tl-dot-warn  { box-shadow: 0 0 14px rgba(245, 195, 70, 0.6); }
.td-root .td-tl-dot-fired.td-tl-dot-bad   { box-shadow: 0 0 14px rgba(240, 80, 95, 0.6); }
.td-root .td-tl-dot-fired.td-tl-dot-info  { box-shadow: 0 0 14px rgba(90, 140, 255, 0.6); }
.td-root .td-tl-cur-min {
  font-family: var(--ta-mono, monospace);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(140, 150, 170, 0.18);
  color: var(--ta-text, #e8ecf5);
  min-width: 48px;
  text-align: center;
}
.td-root .td-tl-scrub {
  transition: left 80ms linear;
}

/* v4p32 iter47 — bar is now click-to-seek; show pointer cursor + subtle
   hover lift on the rail to communicate interactivity. */
.td-root .td-tl-bar {
  cursor: pointer;
  transition: border-color 130ms ease-out;
}
.td-root .td-tl-bar:hover {
  border-color: rgba(140, 150, 170, 0.35);
}

/* v4p32 iter49 — final score chip in leg row, shown when match has ended.
   Sits inline next to home-vs-away + bet-minute chip. Tier-colored: decisive
   wins/losses get a stronger frame; draws use a neutral tone. */
.td-root .td-leg-final-score {
  display: inline-flex;
  align-self: flex-start;     /* iter50 — shrink to content in flex-column parent */
  align-items: center;
  margin-left: 0;
  margin-top: 2px;
  padding: 2px 8px;
  font-family: var(--ta-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  border: 1px solid rgba(140, 150, 170, 0.30);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ta-text, #e8ecf5);
  width: max-content;
}
.td-root .td-leg-final-score-decisive {
  border-color: rgba(90, 140, 255, 0.45);
  background: rgba(90, 140, 255, 0.08);
  color: #8eb4ff;
}
.td-root .td-leg-final-score-draw {
  border-color: rgba(245, 195, 70, 0.40);
  background: rgba(245, 195, 70, 0.08);
  color: #ffd685;
}

/* v4p32 iter54 — ended-pending channel chip. Match has finished but the
   leg hasn't been settled yet — sits in the same warn tone as the smart
   panel (yellow/amber) so operator instantly sees "needs verdict" via
   peripheral vision. Distinct from LIVE (info-blue with pulse dot) and
   FUND (neutral gray for already-settled). */
.td-root .td-leg-channel.is-ended-pending {
  background: rgba(245, 195, 70, 0.10) !important;
  border-color: rgba(245, 195, 70, 0.42) !important;
  color: #ffd685 !important;
  letter-spacing: 0.04em;
}
.td-root .td-leg-channel.is-ended-pending .td-leg-channel-bits {
  color: rgba(255, 214, 133, 0.70) !important;
}

/* v4p32 iter55 — pending/needs-verdict page frame.
   Same family as iter28 won/lost/voided frames but in amber to match the
   smart-state warn panel and the iter54 ended-pending leg chips. The page
   peripheral-vision says "this needs your attention" before the operator
   reads any text. */
.td-root.td-state-pending {
  position: relative;
  border-radius: 14px;
  padding: 6px !important;
  margin: 4px 0 !important;
  background: linear-gradient(180deg, rgba(245, 195, 70, 0.05) 0%, transparent 280px);
  box-shadow:
    inset 0 0 0 2px rgba(245, 195, 70, 0.50),
    0 0 0 1px rgba(245, 195, 70, 0.15),
    0 0 56px rgba(245, 195, 70, 0.22);
}
.td-root.td-state-pending::before,
.td-root.td-state-pending::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(90deg, rgba(245, 195, 70, 0.5) 0%, rgba(245, 195, 70, 1) 50%, rgba(245, 195, 70, 0.5) 100%);
}
.td-root.td-state-pending::before { top: 0; border-radius: 14px 14px 0 0; }
.td-root.td-state-pending::after  { bottom: 0; border-radius: 0 0 14px 14px; }

/* v4p32 iter57 — tighten tab-strip drawer-head spacing so titles like
   "Sugjerime" (9 chars) don't ellipsize at 140px cell width. Smaller gap,
   smaller font, smaller icon. */
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head {
  gap: 4px !important;
  padding: 8px 8px !important;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-title {
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-icon {
  font-size: 13px !important;
}
.td-root .td-drawer-group:has(.td-drawer-head.has-data) > .td-drawer {
  flex: 0 1 160px;
}

/* v4p32 iter60 — smart-state panel fade-in animation. When the page loads
   for an action-required ticket, the panel slides in from above with a
   subtle stagger so operator's eye is naturally drawn to it. Premium
   touch — feels alive instead of static. Respects reduced-motion. */
.td-root .td-smart-state {
  animation: tdSmartFadeIn 320ms ease-out both;
}
.td-root .td-smart-state .td-smart-msg {
  animation: tdSmartFadeIn 360ms 80ms ease-out both;
}
.td-root .td-smart-state .td-smart-actions {
  animation: tdSmartFadeIn 380ms 140ms ease-out both;
}
@keyframes tdSmartFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .td-root .td-smart-state,
  .td-root .td-smart-state .td-smart-msg,
  .td-root .td-smart-state .td-smart-actions {
    animation: none !important;
  }
}

/* v4p32 iter61 — same-match continuation rows. When two adjacent legs
   bet on the same fixture (e.g. Total Goals over + Total Corners over),
   the second row hides the team-name + score chip and shows a small
   "↳ same match" stub. Operator's eye groups the variants into one
   visual cluster instead of reading the team names twice. */
.td-root .td-leg-row.is-cont .td-leg-match-cell .td-leg-match {
  visibility: hidden;
  position: relative;
}
.td-root .td-leg-row.is-cont .td-leg-match-cell .td-leg-match::before {
  content: "↳  ndeshje e njëjtë";
  position: absolute;
  left: 0; top: 0;
  visibility: visible;
  font-size: 11px;
  font-weight: 500;
  color: var(--ta-text-3, #6e768a);
  font-style: italic;
  letter-spacing: 0.02em;
}
.td-root .td-leg-row.is-cont .td-leg-final-score,
.td-root .td-leg-row.is-cont .td-leg-betmin {
  display: none !important;
}
/* 2026-05-15 v4p32 iter97 — the channel chip (MBAROI 5-0 / LIVE 5-0 90' /
   FUND / PRE) is match-level data, identical on every same-fixture leg.
   iter61 hid the match name + score + bet-min on continuation rows but
   left the channel chip repeating L1's verbatim. Dim+shrink it to a tiny
   sport-icon-adjacent marker so the row still aligns columns but stops
   visually duplicating the fixture's status. Completes the same-match
   dedup arc (iter61/88/89/90/91/92) for the bet card's last repeated
   match-level element. */
.td-root .td-leg-row.is-cont .td-leg-channel {
  opacity: 0.32 !important;
  filter: grayscale(0.6);
  font-size: 0 !important;            /* hide the text label */
}
.td-root .td-leg-row.is-cont .td-leg-channel::after {
  content: "·";
  font-size: 12px;
  opacity: 0.5;
}
.td-root .td-leg-row.is-cont .td-leg-channel .td-leg-channel-bits,
.td-root .td-leg-row.is-cont .td-leg-channel .td-live-dot {
  display: none !important;
}
/* Tighter row padding on continuation since match cell is mostly empty */
.td-root .td-leg-row.is-cont {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
/* Subtle left border tint on continuation rows so visual grouping is clear */
.td-root .td-leg-row.is-cont {
  border-left: 2px solid rgba(140, 150, 170, 0.18) !important;
  margin-left: 0;
}

/* v4p32 iter63 — pulsing tier stripe on the smart-state panel.
   The 4px left-edge stripe (warn-amber / info-blue / bad-red) softly
   breathes opacity 0.7 → 1 → 0.7 every 2.4s — subtle motion catches
   peripheral vision without being distracting. Matches the LIVE-dot
   pulse pattern from iter59 for visual language consistency. Respects
   prefers-reduced-motion. */
.td-root .td-smart-state::before {
  animation: tdSmartStripePulse 2.4s ease-in-out infinite;
}
@keyframes tdSmartStripePulse {
  0%, 100% { opacity: 0.70; }
  50%      { opacity: 1.00; }
}
@media (prefers-reduced-motion: reduce) {
  .td-root .td-smart-state::before { animation: none !important; }
}

/* v4p32 iter67 — promote LOJTARI's "Bileta të lojtarit" link with a
   subtle blue tint so it reads as an actual action button rather than
   a footer note. Hover lifts to brighter accent. */
.td-root .td-user-tickets-link.td-btn-ghost {
  color: #8eb4ff !important;
  background: rgba(90, 140, 255, 0.06) !important;
  border: 1px solid rgba(90, 140, 255, 0.22) !important;
  transition: all 130ms ease-out;
}
.td-root .td-user-tickets-link.td-btn-ghost:hover {
  background: rgba(90, 140, 255, 0.14) !important;
  border-color: rgba(90, 140, 255, 0.50) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(90, 140, 255, 0.18);
}

/* v4p32 iter69 — on continuation rows the bet cell is the meaningful
   differentiator from L1, so promote it visually: bolder market name,
   accent-blue underline on hover, slight scale. The "↳ ndeshje e njëjtë"
   stub on the left says "match same as above"; the eye should immediately
   flow to "what's different" — the bet. */
.td-root .td-leg-row.is-cont .td-leg-market {
  font-weight: 700 !important;
  color: var(--ta-text, #e8ecf5) !important;
}
.td-root .td-leg-row.is-cont .td-leg-pick {
  color: #8eb4ff !important;
  text-shadow: 0 0 8px rgba(90, 140, 255, 0.20);
}

/* v4p32 iter70 — gentle attention-pull on the per-leg suggestion chip
   (🤖 void / 🤖 lost / 🤖 won). When the system has formed an opinion
   the operator should notice — subtle 3.5s pulse on opacity (not
   transform, to avoid layout thrash). Respects reduced-motion. */
.td-root .td-leg-sug {
  animation: tdLegSugPulse 3.5s ease-in-out infinite;
}
@keyframes tdLegSugPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .td-root .td-leg-sug { animation: none !important; }
}

/* v4p32 iter74 — odds-magnitude tier coloring on the leg row.
   Default (accent-blue) for <5, gold/amber for medium 5-9.99, purple+
   subtle text-shadow for big ≥10. Operator scanning a multi-leg ticket
   spots the high-payout long-shots without comparing decimals. */
.td-root .td-leg-odds.is-medodds {
  color: #ffd685 !important;
  text-shadow: 0 0 6px rgba(245, 195, 70, 0.20);
}
.td-root .td-leg-odds.is-bigodds {
  color: #c4a4ff !important;
  text-shadow: 0 0 8px rgba(167, 139, 255, 0.30);
  font-size: 16px !important;
}

/* v4p32 iter79 — payment-status sub on the Monedha money-stat. Green for
   done (paid / cash collected), amber for a won ticket still awaiting
   payout. Falls back to plain currency name otherwise. */
.td-root .td-money-stat-sub.td-pay-done {
  color: #6fe6a3 !important;
  font-weight: 700 !important;
}
.td-root .td-money-stat-sub.td-pay-pending {
  color: #ffd685 !important;
  font-weight: 700 !important;
}

/* v4p32 iter80 — compact styling for the _system_echo collapse marker.
   It's a "the system mechanically applied what the operator just did"
   acknowledgement — render it dim + tight so it reads as a sub-line of
   the operator action above, not a full peer event. */
.td-root .td-aud-row:has(.td-aud-actor[data-echo]) ,
.td-root .td-aud-row.td-aud-echo {
  opacity: 0.6;
}
.td-root .td-aud-echo .td-aud-body { padding-top: 2px !important; padding-bottom: 2px !important; }
.td-root .td-aud-echo .td-aud-icon { transform: scale(0.8); opacity: 0.7; }

/* v4p32 iter83 — clearer click affordance on closed drawer tabs. The
   tab-strip drawers (SINJALI/SUGJERIME/NGJARJET/DETAJE) had only a faint
   bg change on hover; nothing said "click to expand". Add a lift +
   accent top-border + cursor on hover so the strip reads as interactive
   tabs, not static labels. */
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head {
  cursor: pointer;
  transition: background 130ms ease-out, box-shadow 130ms ease-out;
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head:hover {
  background: rgba(90, 140, 255, 0.07) !important;
  box-shadow: inset 0 2px 0 rgba(90, 140, 255, 0.45);
}
.td-root .td-drawer-group .td-drawer:not(.is-open) .td-drawer-head:hover .td-drawer-title {
  color: #8eb4ff !important;
}

/* v4p32 iter84 — prematch bet marker variant. Dashed instead of solid
   so operator instantly reads "bet locked in BEFORE kickoff" vs an
   in-play bet (solid line). Flag tinted the same accent. */
.td-root .td-tl-bet-prematch {
  background: repeating-linear-gradient(180deg,
    rgba(90,140,255,0.9) 0 4px, transparent 4px 8px) !important;
  box-shadow: none !important;
}
.td-root .td-tl-bet-prematch .td-tl-bet-flag {
  background: rgba(90, 140, 255, 0.18);
  border-color: rgba(90, 140, 255, 0.55);
}

/* v4p32 iter88 — drawer same-match continuation stub, mirrors iter61's
   NDESHJET treatment. Dim italic so the 2nd+ same-fixture row reads as a
   grouped variant, not a fresh match. */
.td-root .td-drawer-match-cont-stub {
  color: var(--ta-text-3, #6e768a);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* v4p32 iter91 — dim "see events above" pointer for same-match
   continuation rows in the NGJARJET drawer. */
.td-root .td-drawer-cont-ptr {
  color: var(--ta-text-3, #6e768a) !important;
  font-style: italic;
  font-size: 11px;
  opacity: 0.7;
}