/* ─── Ticket Accept v2 ───────────────────────────────────────────────
 * Mid-dark palette · 2 panels · 5-field filter form per panel.
 * Panel theme (color/label) derives from Ticket type filter value.
 * 2026-05-11
 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

:root {
  --ta-bg:           #0f1620;
  --ta-pane:         #1a2330;
  --ta-pane-elev:    #232c3d;
  --ta-card:         #232c3d;
  --ta-card-hover:   #2b3548;
  --ta-card-elev:    #2a3548;
  --ta-card-head:    #1d2738;
  --ta-border:       #2c3a52;
  --ta-border-hi:    #3d4f6e;
  --ta-line:         #1f2a3a;
  --ta-line-soft:    #182234;
  --ta-leg-grid-4:   minmax(220px, 2.4fr) minmax(160px, 1.8fr) 50px 56px;
  --ta-leg-grid-5:   minmax(220px, 2.4fr) minmax(160px, 1.8fr) 50px 56px 92px;

  --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-both:         #a78bff;
  --ta-both-bg:      rgba(167, 139, 255, .12);
  --ta-both-border:  rgba(167, 139, 255, .35);

  --ta-all:          #93a0b8;
  --ta-all-bg:       rgba(147, 160, 184, .12);

  --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-accent:       #5a8cff;
  --ta-accent-bg:    rgba(90, 140, 255, .15);
  --ta-accent-border:rgba(90, 140, 255, .4);

  --ta-merge:        #ffb155;
  --ta-merge-bg:     rgba(255, 177, 85, .12);
  --ta-merge-border: rgba(255, 177, 85, .4);

  --ta-radius:       10px;
  --ta-radius-sm:    7px;
  --ta-radius-pill:  999px;
  --ta-shadow:       0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --ta-shadow-hover: 0 4px 18px rgba(0,0,0,.35);
  --ta-shadow-modal: 0 24px 60px rgba(0,0,0,.6);

  --ta-mono:         ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

.ta-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 36px;
  color: var(--ta-text);
  font-size: 14px;
  background: var(--ta-bg);
  min-height: 100vh;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Page head — 3 columns: title · clock · meta ───────────────────── */
.ta-page-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.ta-page-head-left { display: flex; flex-direction: column; gap: 2px; }
.ta-page-head .ta-meta-row { justify-content: flex-end; }

/* ── Clock widget (centered, Europe/Tirane) — tight ────────────────── */
.ta-clock-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 14px 5px;
  background: linear-gradient(180deg, var(--ta-pane) 0%, var(--ta-pane-elev) 100%);
  border: 1px solid var(--ta-border);
  border-radius: 8px;
  box-shadow: var(--ta-shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  min-width: 130px;
}
.ta-clock-widget::before {
  content: ""; position: absolute; top: -1px; left: 18%; right: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ta-accent), transparent);
  opacity: .5;
  border-radius: 2px;
}
.ta-clock-time {
  font-family: var(--ta-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--ta-text);
  letter-spacing: .02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(90,140,255,.18);
}
.ta-clock-date {
  font-size: 10px;
  color: var(--ta-text-3);
  font-weight: 600;
  font-family: var(--ta-mono);
  letter-spacing: .04em;
  margin-top: 2px;
}
.ta-clock-tz {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ta-text-dim);
  font-weight: 700;
  margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.ta-clock-tz::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ta-ok);
  box-shadow: 0 0 5px var(--ta-ok);
  animation: ta-clock-blip 2.6s ease-in-out infinite;
}
@keyframes ta-clock-blip {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}
.ta-page-title {
  font-size: 24px; font-weight: 700;
  color: var(--ta-text); letter-spacing: -.02em;
  display: flex; align-items: center; gap: 14px;
  margin: 0;
}
.ta-page-title::before {
  content: ""; width: 4px; height: 24px;
  background: linear-gradient(180deg, var(--ta-live), var(--ta-pre));
  border-radius: 2px;
}
.ta-page-sub { color: var(--ta-text-3); font-size: 13px; margin-top: 4px; }
.ta-meta-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ta-text-3);
  font-family: var(--ta-mono);
}

/* ── Panes ─────────────────────────────────────────────────────────── */
.ta-panes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
.ta-pane {
  background: var(--ta-pane);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 700px;
  box-shadow: var(--ta-shadow);
}
.ta-pane-live { border-top: 3px solid var(--ta-live); background: linear-gradient(180deg, rgba(255,88,112,.05) 0%, var(--ta-pane) 140px); }
.ta-pane-pre  { border-top: 3px solid var(--ta-pre);  background: linear-gradient(180deg, rgba(90,140,255,.05) 0%, var(--ta-pane) 140px); }
.ta-pane-both { border-top: 3px solid var(--ta-both); background: linear-gradient(180deg, rgba(167,139,255,.05) 0%, var(--ta-pane) 140px); }
.ta-pane-all  { border-top: 3px solid var(--ta-all); }

/* ── Pane head ─────────────────────────────────────────────────────── */
.ta-pane-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ta-line);
  background: var(--ta-card-head);
  gap: 14px;
}
.ta-pane-head-left { display: flex; align-items: center; gap: 14px; }
.ta-select-all-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid var(--ta-border);
  background: var(--ta-card);
  transition: all .12s;
}
.ta-select-all-wrap:hover { border-color: var(--ta-accent); background: var(--ta-accent-bg); }
.ta-select-all { width: 14px; height: 14px; accent-color: var(--ta-accent); cursor: pointer; margin: 0; }

.ta-pane-title {
  font-size: 15px; font-weight: 700; letter-spacing: .03em;
  display: flex; align-items: center; gap: 11px;
  color: var(--ta-text);
}
.ta-pane-title-sub {
  font-size: 11px; letter-spacing: .14em;
  color: var(--ta-text-3);
  font-weight: 700; text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--ta-radius-pill);
  background: var(--ta-all-bg);
  border: 1px solid var(--ta-border);
}
.ta-pane-live .ta-pane-title-sub { color: var(--ta-live); background: var(--ta-live-bg); border-color: var(--ta-live-border); }
.ta-pane-pre  .ta-pane-title-sub { color: var(--ta-pre);  background: var(--ta-pre-bg);  border-color: var(--ta-pre-border); }
.ta-pane-both .ta-pane-title-sub { color: var(--ta-both); background: var(--ta-both-bg); border-color: var(--ta-both-border); }

.ta-pane-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ta-pane-dot.dot-live { background: var(--ta-live); box-shadow: 0 0 12px var(--ta-live); animation: ta-pulse 1.6s ease-in-out infinite; }
.ta-pane-dot.dot-pre  { background: var(--ta-pre);  box-shadow: 0 0 12px var(--ta-pre); }
.ta-pane-dot.dot-both { background: var(--ta-both); box-shadow: 0 0 12px var(--ta-both); }
.ta-pane-dot.dot-all  { background: var(--ta-all); }
@keyframes ta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.85); }
}

.ta-pane-meta { display: flex; align-items: center; gap: 10px; }
.ta-pane-count {
  background: var(--ta-accent-bg);
  color: var(--ta-accent);
  font-size: 13px; font-weight: 700;
  padding: 4px 14px; border-radius: var(--ta-radius-pill);
  font-family: var(--ta-mono);
  border: 1px solid var(--ta-accent-border);
  min-width: 28px; text-align: center;
}
.ta-pane-merged-note {
  font-size: 11px; color: var(--ta-merge);
  font-family: var(--ta-mono);
  background: var(--ta-merge-bg);
  padding: 3px 9px; border-radius: var(--ta-radius-pill);
  border: 1px solid var(--ta-merge-border);
}

/* ── Filter form (labeled grid) ────────────────────────────────────── */
.ta-filter-form {
  padding: 10px 14px 12px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid var(--ta-line);
  display: flex; flex-direction: column; gap: 9px;
}

/* Preset chip row */
.ta-preset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ta-preset-row-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ta-text-dim);
  margin-right: 4px;
}
.ta-preset-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ta-card);
  border: 1px solid var(--ta-border);
  color: var(--ta-text-2);
  padding: 4px 10px 4px 9px;
  border-radius: var(--ta-radius-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .12s;
}
.ta-preset-chip:hover {
  border-color: var(--ta-accent);
  background: var(--ta-accent-bg);
  color: var(--ta-accent);
}
.ta-preset-chip.active {
  background: var(--ta-accent);
  color: white;
  border-color: var(--ta-accent);
  box-shadow: 0 0 12px rgba(90,140,255,.45);
}
.ta-preset-chip.saved {
  border-color: var(--ta-warn-border);
  color: var(--ta-warn);
  background: var(--ta-warn-bg);
}
.ta-preset-chip.saved.active {
  background: var(--ta-warn);
  color: #2a1d05;
  border-color: var(--ta-warn);
  box-shadow: 0 0 12px rgba(255,200,87,.5);
}
.ta-preset-icon { font-size: 11px; line-height: 1; }
.ta-preset-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  color: inherit; opacity: .6; cursor: pointer; font-size: 10px;
}
.ta-preset-x:hover { background: rgba(0,0,0,.25); opacity: 1; }
.ta-preset-save {
  background: transparent;
  border: 1px dashed var(--ta-border-hi);
  color: var(--ta-text-3);
  padding: 4px 12px;
  border-radius: var(--ta-radius-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.ta-preset-save:hover {
  border-color: var(--ta-ok);
  border-style: solid;
  color: var(--ta-ok);
  background: var(--ta-ok-bg);
}
.ta-preset-custom-pip {
  background: var(--ta-warn-bg);
  color: var(--ta-warn);
  border: 1px solid var(--ta-warn-border);
  border-radius: var(--ta-radius-pill);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ta-preset-reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--ta-border);
  color: var(--ta-text-3);
  padding: 4px 11px;
  border-radius: var(--ta-radius-pill);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ta-preset-reset:hover { border-color: var(--ta-bad); color: var(--ta-bad); background: var(--ta-bad-bg); }
.ta-preset-add-rule { border-color: var(--ta-accent-border) !important; color: var(--ta-accent) !important; }
.ta-preset-add-rule:hover { background: var(--ta-accent-bg) !important; border-style: solid !important; }

/* Highlight chips — color-coded resting + active states */
.ta-hl-chip { border-style: dashed; }
.ta-hl-chip.hl-red    { color: var(--ta-bad);  border-color: var(--ta-bad-border); }
.ta-hl-chip.hl-gold   { color: var(--ta-merge); border-color: var(--ta-merge-border); }
.ta-hl-chip.hl-purple { color: var(--ta-both); border-color: var(--ta-both-border); }
.ta-hl-chip.hl-blue   { color: var(--ta-accent); border-color: var(--ta-accent-border); }
.ta-hl-chip.hl-yellow { color: var(--ta-warn); border-color: var(--ta-warn-border); }
.ta-hl-chip.active            { border-style: solid; box-shadow: 0 0 14px currentColor; }
.ta-hl-chip.hl-red.active     { background: var(--ta-bad);    color: white; border-color: var(--ta-bad); }
.ta-hl-chip.hl-gold.active    { background: var(--ta-merge);  color: #2a1d05; border-color: var(--ta-merge); }
.ta-hl-chip.hl-purple.active  { background: var(--ta-both);   color: white; border-color: var(--ta-both); }
.ta-hl-chip.hl-blue.active    { background: var(--ta-accent); color: white; border-color: var(--ta-accent); }
.ta-hl-chip.hl-yellow.active  { background: var(--ta-warn);   color: #2a1d05; border-color: var(--ta-warn); }

/* Card highlight states — colored border + soft glow per preset color */
.ta-ticket-card.is-highlighted { position: relative; }
.ta-ticket-card.is-highlighted.hl-red {
  border-color: var(--ta-bad);
  box-shadow: 0 0 0 1px var(--ta-bad-border), 0 2px 8px rgba(255,107,107,.22), 0 8px 22px rgba(0,0,0,.28);
}
.ta-ticket-card.is-highlighted.hl-gold {
  border-color: var(--ta-merge);
  box-shadow: 0 0 0 1px var(--ta-merge-border), 0 2px 8px rgba(255,177,85,.22), 0 8px 22px rgba(0,0,0,.28);
}
.ta-ticket-card.is-highlighted.hl-purple {
  border-color: var(--ta-both);
  box-shadow: 0 0 0 1px var(--ta-both-border), 0 2px 8px rgba(167,139,255,.22), 0 8px 22px rgba(0,0,0,.28);
}
.ta-ticket-card.is-highlighted.hl-blue {
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 1px var(--ta-accent-border), 0 2px 8px rgba(90,140,255,.22), 0 8px 22px rgba(0,0,0,.28);
}
.ta-ticket-card.is-highlighted.hl-yellow {
  border-color: var(--ta-warn);
  box-shadow: 0 0 0 1px var(--ta-warn-border), 0 2px 8px rgba(255,200,87,.22), 0 8px 22px rgba(0,0,0,.28);
}
/* Stacked highlights — multiple colors layered as outer rings */
.ta-ticket-card.is-highlighted.hl-red.hl-gold    { box-shadow: 0 0 0 1px var(--ta-bad), 0 0 0 3px var(--ta-merge-border), 0 8px 22px rgba(0,0,0,.28); }
.ta-ticket-card.is-highlighted.hl-red.hl-purple  { box-shadow: 0 0 0 1px var(--ta-bad), 0 0 0 3px var(--ta-both-border), 0 8px 22px rgba(0,0,0,.28); }
.ta-ticket-card.is-highlighted.hl-gold.hl-purple { box-shadow: 0 0 0 1px var(--ta-merge), 0 0 0 3px var(--ta-both-border), 0 8px 22px rgba(0,0,0,.28); }

/* Custom rules block */
.ta-custom-rules {
  background: var(--ta-card);
  border: 1px solid var(--ta-border);
  border-radius: 8px;
  padding: 9px 12px 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.ta-custom-rules-head {
  display: flex; justify-content: space-between; align-items: center;
}
.ta-custom-rule {
  display: grid;
  grid-template-columns: 48px minmax(140px,1.4fr) 70px 1fr 28px;
  gap: 7px;
  align-items: center;
}
.ta-custom-rule-when {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ta-text-dim);
  text-align: right;
}
.ta-custom-rule-x {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ta-border);
  color: var(--ta-text-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-family: inherit;
}
.ta-custom-rule-x:hover { background: var(--ta-bad-bg); border-color: var(--ta-bad); color: var(--ta-bad); }
.ta-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ta-ff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ta-ff-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  height: 16px;  /* fixed so all field heads align bottom-to-top of input */
}
.ta-ff-label {
  color: var(--ta-text-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}
.ta-ff-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: var(--ta-card-elev);
  border: 1px solid var(--ta-border);
  color: var(--ta-text-3);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}
.ta-ff-help:hover { background: var(--ta-accent-bg); color: var(--ta-accent); border-color: var(--ta-accent); }
/* 2026-05-12 — suffix sits inline next to the ? help icon (was right-aligned
 * via margin-left:auto which pushed it across the whole row). */
.ta-ff-suffix {
  color: var(--ta-text-dim);
  font-family: var(--ta-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}
.ta-ff .ta-input { font-size: 12px; padding: 6px 9px; }
.ta-ff select.ta-input { padding-right: 26px; }

/* ── Bulk row ──────────────────────────────────────────────────────── */
.ta-bulk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: var(--ta-pane-elev);
  border-bottom: 1px solid var(--ta-line);
}
.ta-bulk-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ta-text-3);
  font-family: var(--ta-mono);
}
.ta-bulk-count {
  padding: 4px 11px; border-radius: var(--ta-radius-pill);
  background: var(--ta-card); color: var(--ta-text-2);
  font-weight: 700; font-size: 12px;
  border: 1px solid var(--ta-border);
}
.ta-bulk-count.active {
  background: var(--ta-accent-bg);
  color: var(--ta-accent);
  border-color: var(--ta-accent-border);
}
.ta-bulk-clear {
  background: transparent; border: none;
  color: var(--ta-text-dim);
  text-decoration: underline;
  cursor: pointer; font-size: 11px;
  padding: 0; font-family: inherit;
}
.ta-bulk-clear:hover { color: var(--ta-bad); }
.ta-bulk-spacer { flex: 1; }

/* ── Field / Input / Button ───────────────────────────────────────── */
.ta-field { display: flex; flex-direction: column; gap: 5px; }
.ta-field label {
  font-size: 10px;
  color: var(--ta-text-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ta-input {
  background: var(--ta-bg);
  border: 1px solid var(--ta-border);
  color: var(--ta-text);
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: all .12s;
}
.ta-input:focus {
  outline: none;
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 3px var(--ta-accent-bg);
}
.ta-input::placeholder { color: var(--ta-text-dim); }
select.ta-input {
  appearance: none;
  background: var(--ta-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%2393a0b8' d='M0 0l6 8 6-8z'/></svg>") no-repeat right 11px center / 10px;
  padding-right: 30px;
  color-scheme: dark;
}
select.ta-input option {
  background-color: var(--ta-pane-elev);
  color: var(--ta-text);
  padding: 6px 8px;
}
select.ta-input option:hover,
select.ta-input option:focus,
select.ta-input option:checked {
  background-color: var(--ta-accent-bg);
  color: var(--ta-accent);
}
.ta-range-row { display: flex; align-items: center; gap: 7px; }
.ta-range-row .ta-input { flex: 1; min-width: 0; }
.ta-range-sep { color: var(--ta-text-dim); font-size: 12px; padding: 0 2px; }

.ta-btn {
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--ta-border);
  background: var(--ta-card);
  color: var(--ta-text-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  transition: all .12s;
  white-space: nowrap;
}
.ta-btn:hover {
  background: var(--ta-card-hover);
  border-color: var(--ta-border-hi);
  color: var(--ta-text);
}
.ta-btn:active { transform: translateY(1px); }
.ta-btn:disabled { opacity: .4; cursor: not-allowed; }
.ta-btn-sm { padding: 5px 10px; font-size: 11px; }
.ta-btn-ok   { background: var(--ta-ok-bg); color: var(--ta-ok); border-color: var(--ta-ok-border); }
.ta-btn-ok:hover   { background: var(--ta-ok); color: #062017; border-color: var(--ta-ok); }
.ta-btn-bad  { background: var(--ta-bad-bg); color: var(--ta-bad); border-color: var(--ta-bad-border); }
.ta-btn-bad:hover  { background: var(--ta-bad); color: #200707; border-color: var(--ta-bad); }
.ta-btn-warn { background: var(--ta-warn-bg); color: var(--ta-warn); border-color: var(--ta-warn-border); }
.ta-btn-warn:hover { background: var(--ta-warn); color: #2a1d05; border-color: var(--ta-warn); }
.ta-btn-ghost { background: transparent; }
.ta-btn-icon { padding: 7px 11px; font-size: 14px; }
.ta-btn-primary {
  background: var(--ta-accent); color: white;
  border-color: var(--ta-accent);
}
.ta-btn-primary:hover { background: #4070d8; border-color: #4070d8; }

/* ── Red links (per spec) ─────────────────────────────────────────── */
.ta-link {
  color: var(--ta-live);
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
  font-weight: 600;
}
.ta-link:hover { text-decoration: underline; filter: brightness(1.15); }

/* ── Card list (per ticket, dynamic size) ─────────────────────────── */
.ta-grid-wrap {
  flex: 1;
  min-height: 420px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  background: var(--ta-pane);
}
.ta-grid-wrap::-webkit-scrollbar { width: 9px; }
.ta-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.ta-grid-wrap::-webkit-scrollbar-thumb { background: var(--ta-border); border-radius: 5px; }
.ta-grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--ta-border-hi); }

.ta-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

/* Alert banner — appears at top of list when Max Win Alert is set */
.ta-alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--ta-bad-bg) 0%, transparent 100%);
  border: 1px solid var(--ta-bad-border);
  border-left: 4px solid var(--ta-bad);
  border-radius: var(--ta-radius-sm);
  font-size: 12px;
  color: var(--ta-text-2);
  animation: ta-alert-pulse 2.4s ease-in-out infinite;
}
@keyframes ta-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,107,107,.18); }
}
.ta-alert-banner-icon {
  width: 28px; height: 28px;
  background: var(--ta-bad); color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.ta-alert-banner-text { line-height: 1.4; }

.ta-loading-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 14px 0;
  padding: 9px 12px;
  background: var(--ta-accent-bg);
  border: 1px solid var(--ta-accent-border);
  border-left: 4px solid var(--ta-accent);
  border-radius: var(--ta-radius-sm);
  color: var(--ta-text-2);
  font-size: 12px;
  font-family: var(--ta-mono);
}
.ta-loading-strip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ta-accent);
  box-shadow: 0 0 10px var(--ta-accent);
  animation: ta-pulse 1.4s ease-in-out infinite;
}

.ta-ticket-card {
  background: var(--ta-card);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0,0,0,.32),
    0 4px 12px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.ta-ticket-card:hover {
  border-color: var(--ta-border-hi);
  box-shadow:
    0 2px 6px rgba(0,0,0,.4),
    0 8px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
  transform: translateY(-1px);
}
.ta-ticket-card.is-selected {
  border-color: var(--ta-accent);
  box-shadow:
    0 0 0 3px var(--ta-accent-bg),
    0 2px 6px rgba(0,0,0,.4),
    0 8px 20px rgba(90,140,255,.18);
}
.ta-ticket-card.is-actioning {
  opacity: .72;
  pointer-events: none;
}
.ta-ticket-card.is-merged {
  border-color: var(--ta-bad-border);
  box-shadow:
    0 0 0 1px var(--ta-bad-border),
    0 2px 6px rgba(255,107,107,.18),
    0 8px 20px rgba(0,0,0,.28);
}
.ta-ticket-card.is-merged::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ta-bad);
  border-radius: var(--ta-radius) 0 0 var(--ta-radius);
  box-shadow: 0 0 12px var(--ta-bad);
  animation: ta-alert-edge 2s ease-in-out infinite;
}

/* ALERT state — when ticket exceeds Max Win Alert threshold */
.ta-ticket-card.is-alert {
  border-color: var(--ta-bad);
  background: linear-gradient(180deg, rgba(255,107,107,.06) 0%, var(--ta-card) 80px);
  box-shadow:
    0 0 0 1px var(--ta-bad-border),
    0 2px 8px rgba(255,107,107,.18),
    0 8px 22px rgba(0,0,0,.28);
}
.ta-ticket-card.is-alert::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ta-bad);
  border-radius: var(--ta-radius) 0 0 var(--ta-radius);
  box-shadow: 0 0 12px var(--ta-bad);
  animation: ta-alert-edge 2s ease-in-out infinite;
}
@keyframes ta-alert-edge {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* 2026-05-14 — under the new semantic, .is-alert (red) marks the
   AUTO-ACCEPT band (≤ threshold). Cards OUTSIDE the band are "needs
   manual review" — they get a yellow/warn tint so operator knows they
   require attention rather than a (misleading) green OK. */
.ta-grid-wrap.alert-mode .ta-ticket-card:not(.is-alert) {
  box-shadow:
    0 0 0 1px var(--ta-warn-border),
    0 1px 3px rgba(0,0,0,.32),
    0 4px 12px rgba(0,0,0,.18);
}

/* Quick preset active mode — paints visible cards' border in the preset's color.
   Same visual language as Max Win Alert (.is-alert) but matched to the chip. */
.ta-grid-wrap.preset-active.preset-red    .ta-ticket-card { border-color: var(--ta-bad); box-shadow: 0 0 0 1px var(--ta-bad-border), 0 2px 8px rgba(255,107,107,.18), 0 8px 22px rgba(0,0,0,.28); }
.ta-grid-wrap.preset-active.preset-gold   .ta-ticket-card { border-color: var(--ta-merge); box-shadow: 0 0 0 1px var(--ta-merge-border), 0 2px 8px rgba(255,177,85,.18), 0 8px 22px rgba(0,0,0,.28); }
.ta-grid-wrap.preset-active.preset-purple .ta-ticket-card { border-color: var(--ta-both); box-shadow: 0 0 0 1px var(--ta-both-border), 0 2px 8px rgba(167,139,255,.18), 0 8px 22px rgba(0,0,0,.28); }
.ta-grid-wrap.preset-active.preset-blue   .ta-ticket-card { border-color: var(--ta-accent); box-shadow: 0 0 0 1px var(--ta-accent-border), 0 2px 8px rgba(90,140,255,.18), 0 8px 22px rgba(0,0,0,.28); }
.ta-grid-wrap.preset-active.preset-yellow .ta-ticket-card { border-color: var(--ta-warn); box-shadow: 0 0 0 1px var(--ta-warn-border), 0 2px 8px rgba(255,200,87,.18), 0 8px 22px rgba(0,0,0,.28); }
.ta-grid-wrap.preset-active.preset-ok     .ta-ticket-card { border-color: var(--ta-ok); box-shadow: 0 0 0 1px var(--ta-ok-border), 0 2px 8px rgba(34,209,139,.18), 0 8px 22px rgba(0,0,0,.28); }
.ta-grid-wrap.alert-mode .ta-ticket-card:not(.is-alert) .ta-card-head::after {
  content: "REVIEW"; margin-left: auto;
  font-size: 10px; font-weight: 800;
  color: var(--ta-warn);
  background: var(--ta-warn-bg);
  border: 1px solid var(--ta-warn-border);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: .1em;
}

.ta-ticket-card.flash-new { animation: ta-card-flash 1.5s ease-out; }
@keyframes ta-card-flash {
  0%   { box-shadow: 0 0 0 3px var(--ta-warn-border), 0 4px 12px rgba(0,0,0,.18); }
  100% { box-shadow: 0 1px 3px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.18); }
}

/* ── Card head ─────────────────────────────────────────────────────── */
.ta-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--ta-card-head);
  border-bottom: 1px solid var(--ta-line);
  flex-wrap: wrap;
  min-height: 46px;
  row-gap: 7px;
}
.ta-card-date {
  color: var(--ta-text); font-family: var(--ta-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ta-card-id {
  font-family: var(--ta-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
}
.ta-card-tree {
  color: var(--ta-text-3);
  font-family: var(--ta-mono);
  font-size: 12px;
  flex: 1;
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-card-tree-rest { color: var(--ta-text-dim); }
.ta-card-head-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-height: 26px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ta-card-head-right > * {
  flex: 0 0 auto;
}
.ta-repeated-pip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: var(--ta-radius-pill);
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid;
  min-height: 24px;
  box-sizing: border-box;
}
.ta-repeated-pip strong { font-size: 12px; letter-spacing: .02em; }
.ta-repeated-pip.lvl-0 { background: var(--ta-card-elev); color: var(--ta-text-3); border-color: var(--ta-border); }
.ta-repeated-pip.lvl-1 {
  background: var(--ta-warn-bg); color: var(--ta-warn);
  border-color: var(--ta-warn-border);
}
.ta-repeated-pip.lvl-2 {
  background: rgba(255,138,40,.16); color: #ff8a28;
  border-color: rgba(255,138,40,.45);
  box-shadow: 0 0 8px rgba(255,138,40,.25);
}
.ta-repeated-pip.lvl-3 {
  background: var(--ta-bad-bg); color: var(--ta-bad);
  border-color: var(--ta-bad-border);
  box-shadow: 0 0 10px rgba(255,107,107,.3);
  animation: ta-rep-pulse 2s ease-in-out infinite;
}
@keyframes ta-rep-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,107,107,.3); }
  50%      { box-shadow: 0 0 14px rgba(255,107,107,.55); }
}

/* ── Card body (legs) ──────────────────────────────────────────────── */
.ta-card-body {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,.16);
}
.ta-leg-row {
  display: grid;
  grid-template-columns: var(--ta-leg-grid-4);
  gap: 14px;
  padding: 9px 14px;
  align-items: center;
  border-bottom: 1px solid var(--ta-line-soft);
  font-size: 13px;
}
.ta-leg-row:last-child { border-bottom: none; }
.ta-leg-headers {
  background: rgba(0,0,0,.22);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ta-text-dim);
  padding: 6px 14px;
}
.ta-leg-headers span:nth-child(3),
.ta-leg-headers span:nth-child(4) { text-align: right; }
.ta-leg-channel-hdr { text-align: center !important; }
.ta-leg-odd-hdr { text-align: right; }

.ta-leg-teams {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.ta-leg-sport-tag {
  font-size: 10px;
  color: var(--ta-text-dim);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ta-leg-match {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.ta-leg-market {
  color: var(--ta-text-2);
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-leg-channel {
  font-size: 9px; font-weight: 800;
  padding: 3px 5px; border-radius: 4px;
  text-align: center; letter-spacing: .08em;
  width: 38px;
  justify-self: center;
}
.ta-leg-channel.live { background: var(--ta-live-bg); color: var(--ta-live); border: 1px solid var(--ta-live-border); }
.ta-leg-channel.pre  { background: var(--ta-pre-bg);  color: var(--ta-pre);  border: 1px solid var(--ta-pre-border); }
.ta-leg-odd {
  font-family: var(--ta-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ta-accent);
  text-align: right;
}

/* ── Card foot ─────────────────────────────────────────────────────── */
.ta-card-foot {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0,0,0,.22);
  border-top: 1px solid var(--ta-line);
  flex-wrap: wrap;
}
.ta-money-pair { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.ta-money-label {
  font-size: 10px;
  color: var(--ta-text-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ta-money-val {
  font-family: var(--ta-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ta-ok);
  text-shadow: 0 0 12px rgba(34,209,139,.22);
}
.ta-money-win {
  color: var(--ta-warn);
  text-shadow: 0 0 12px rgba(255,200,87,.28);
  font-size: 17px;
}
/* 2026-05-14 — EUR equivalent shown next to non-EUR amounts so operator can
   eyeball whether a ticket falls under the Max Win Alert / Accept Multi
   threshold (both in EUR) without converting in their head. */
.ta-money-eur {
  font-family: var(--ta-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ta-text-3);
  text-shadow: none;
  margin-left: 4px;
  opacity: .8;
}
.ta-money-win.is-won {
  color: var(--ta-ok);
  text-shadow: 0 0 12px rgba(34,209,139,.24);
}
.ta-money-odd { color: var(--ta-accent); text-shadow: 0 0 12px rgba(90,140,255,.22); }
.ta-card-foot-spacer { flex: 1; }

.ta-btn-shiko {
  background: var(--ta-accent-bg);
  color: var(--ta-accent);
  border-color: var(--ta-accent-border);
  font-weight: 700;
}
.ta-btn-shiko:hover { background: var(--ta-accent); color: white; border-color: var(--ta-accent); }

.ta-btn-flag {
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  color: var(--ta-text-3);
  border-color: var(--ta-border);
}
.ta-btn-flag:hover {
  background: var(--ta-bad-bg);
  color: var(--ta-bad);
  border-color: var(--ta-bad-border);
}

/* All user-tree nodes look clickable (player + agent + manager) */
.ta-tree-link {
  color: var(--ta-text-2);
  cursor: pointer;
  transition: color .12s;
}
.ta-tree-link:hover {
  color: var(--ta-live);
  text-decoration: underline;
}
.ta-tree-link.ta-user {
  color: var(--ta-live);
  font-weight: 700;
}
.ta-tree-merge-pip {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: var(--ta-radius-pill);
  background: var(--ta-bad-bg);
  color: var(--ta-bad);
  border: 1px solid var(--ta-bad-border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: help;
  vertical-align: middle;
}

/* ── Merge list (collapsable, fingerprint-duplicate = ANTI-ARB DANGER) ── */
.ta-merge-list {
  background: linear-gradient(90deg, var(--ta-bad-bg) 0%, rgba(255,107,107,.04) 100%);
  border-top: 2px solid var(--ta-bad);
  position: relative;
}
.ta-merge-list::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--ta-bad);
  box-shadow: 0 0 12px var(--ta-bad);
  animation: ta-merge-pulse 2.2s ease-in-out infinite;
}
@keyframes ta-merge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
.ta-merge-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ta-bad);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ta-merge-title:hover { background: rgba(255,107,107,.12); }
.ta-merge-title strong { color: var(--ta-bad); text-shadow: 0 0 14px rgba(255,107,107,.35); }
.ta-merge-title::before {
  content: "⚠";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--ta-bad);
  color: white;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
  margin-right: 6px;
  flex-shrink: 0;
}
.ta-merge-caret {
  display: inline-block;
  width: 14px;
  color: var(--ta-bad);
  font-size: 12px;
  font-weight: 700;
}
.ta-merge-title-sub {
  color: var(--ta-text-2);
  font-weight: 500;
  font-family: var(--ta-mono);
  font-size: 11px;
}
.ta-merge-toggle-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--ta-bad);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--ta-bad-bg);
  border: 1px solid var(--ta-bad-border);
  padding: 3px 8px;
  border-radius: var(--ta-radius-pill);
}
.ta-merge-list.is-open {
  background: linear-gradient(180deg, var(--ta-bad-bg) 0%, rgba(255,107,107,.04) 100%);
}
.ta-merge-rows {
  padding: 4px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: ta-slidein .15s ease-out;
}
.ta-merge-list-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  gap: 12px;
  padding: 5px 8px;
  font-size: 12px;
  border-top: 1px solid var(--ta-line-soft);
  border-radius: 4px;
  align-items: center;
  transition: background .12s;
}
.ta-merge-list-row:hover { background: rgba(255, 107, 107, .08); }
.ta-merge-list-row:first-of-type { border-top: 1px solid var(--ta-line); }
.ta-merge-row-actions { display: inline-flex; gap: 4px; }

.ta-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  min-width: 100%;
}

/* Each ticket = one card containing summary row + legs */
.ta-ticket-card {
  background: var(--ta-card);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
  box-shadow: var(--ta-shadow-sm);
}
.ta-ticket-card:hover { border-color: var(--ta-border-hi); box-shadow: var(--ta-shadow); }
.ta-ticket-card:has(.ta-ticket-row.is-selected) {
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 2px var(--ta-accent-bg), var(--ta-shadow);
}
.ta-ticket-card:has(.ta-ticket-row.is-merged) {
  border-color: var(--ta-merge-border);
}
.ta-ticket-card:has(.ta-ticket-row.is-alert) {
  border-left: 3px solid var(--ta-bad);
}

/* Column template — used by both header and row.
 * Tight widths to fit a pane ~700px.
 *   ☐ ▸ Time   ID    User    Type   Repeats   Stake    Win    Odd   Actions */
.ta-grid-row {
  display: grid;
  grid-template-columns:
    24px               /* checkbox */
    20px               /* expand chevron */
    64px               /* time */
    minmax(72px,auto)  /* id */
    minmax(80px,1fr)   /* user */
    72px               /* type */
    minmax(86px,auto)  /* repeats */
    minmax(70px,auto)  /* stake */
    minmax(70px,auto)  /* win */
    44px               /* odd */
    minmax(120px,auto); /* actions */
  gap: 8px;
  padding: 7px 12px;
  align-items: center;
  border-bottom: 1px solid var(--ta-line);
  font-size: 12px;
  transition: background .12s;
}

.ta-grid-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--ta-card-head);
  border-bottom: 2px solid var(--ta-border);
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ta-text-dim);
}
.ta-gh-cb, .ta-gh-exp { /* no label */ }
.ta-gh-rep { text-align: center; }
.ta-gh-num { text-align: center; }
.ta-gh-money, .ta-gh-odd { text-align: right; }
.ta-gh-actions { text-align: right; }

.ta-ticket-row {
  background: var(--ta-card-head);
  border-bottom: 1px solid var(--ta-line);
}
.ta-ticket-row.is-selected { background: rgba(90,140,255,.08); }
.ta-ticket-row.flash-new { animation: ta-flash-row 1.5s ease-out; }
.ta-row-spacer { width: 0; }
@keyframes ta-flash-row {
  0%   { background: var(--ta-warn-bg); }
  100% { background: var(--ta-card-head); }
}

.ta-row-expand {
  background: transparent; border: none;
  color: var(--ta-text-3);
  cursor: pointer;
  font-size: 13px;
  padding: 2px;
  border-radius: 3px;
}
.ta-row-expand:hover { background: var(--ta-card-elev); color: var(--ta-text); }

.ta-cell-time {
  color: var(--ta-text); font-family: var(--ta-mono);
  font-size: 12px; font-weight: 600;
}
.ta-cell-id {
  font-family: var(--ta-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
}
.ta-cell-user {
  font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-cell-user.merged { color: var(--ta-merge); }
.ta-cell-tree-rest {
  color: var(--ta-text-dim);
  font-family: var(--ta-mono);
  font-size: 11px;
  margin-left: 4px;
}
.ta-cell-type { display: flex; align-items: center; }
.ta-cell-type .ta-tk-type {
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Merged repeats cell (ru / ra / rA together) */
.ta-cell-reps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ta-mono);
  font-size: 11px;
  font-weight: 700;
}
.ta-rep-mini {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--ta-border);
  color: var(--ta-text-2);
  cursor: help;
  min-width: 14px;
  text-align: center;
}
.ta-rep-mini.hot  { background: var(--ta-bad-bg);  border-color: var(--ta-bad-border); color: var(--ta-bad); }
.ta-rep-mini.warm { background: var(--ta-warn-bg); border-color: var(--ta-warn-border); color: var(--ta-warn); }
.ta-rep-sep { color: var(--ta-text-dim); font-size: 10px; opacity: .6; }

.ta-cell-num {
  text-align: center;
  font-family: var(--ta-mono);
  font-size: 12px; font-weight: 700;
  color: var(--ta-text-2);
  display: inline-flex; gap: 4px; justify-content: center; align-items: center;
}
.ta-merge-pip {
  background: var(--ta-merge); color: #2a1d05;
  font-size: 10px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px;
  letter-spacing: .04em;
}
.ta-alert-pip {
  color: var(--ta-bad); font-size: 12px; font-weight: 700;
}

.ta-cell-money {
  font-family: var(--ta-mono);
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--ta-text);
}
.ta-cell-win { color: var(--ta-warn); }
.ta-cell-odd {
  font-family: var(--ta-mono);
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--ta-accent);
}
.ta-cell-actions {
  display: flex; gap: 4px; justify-content: flex-end;
  align-items: center;
}
.ta-cell-actions .ta-btn { padding: 4px 8px; font-size: 11px; }
.ta-cell-actions .ta-other-btn { padding: 4px 8px; font-size: 11px; }

/* Row expansion (now always present, no animation) */
.ta-row-expansion {
  padding: 10px 12px;
  background: var(--ta-card);
  display: flex; flex-direction: column; gap: 10px;
}
.ta-exp-title {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ta-exp-title-sub { color: var(--ta-text-dim); text-transform: none; letter-spacing: 0; font-size: 11px; }

.ta-exp-merged { border: 1px solid var(--ta-merge-border); border-radius: 7px; padding: 10px 12px; background: rgba(255,177,85,.04); }
.ta-exp-merge-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  border-top: 1px solid var(--ta-line-soft);
  align-items: center;
}
.ta-exp-merge-row:first-of-type { border-top: 1px solid var(--ta-line); margin-top: 4px; padding-top: 9px; }

.ta-exp-legs { background: var(--ta-card); border: 1px solid var(--ta-border); border-radius: 7px; overflow: hidden; }
.ta-exp-legs .ta-exp-title { padding: 8px 12px 0; margin-bottom: 0; }

.ta-exp-user {
  font-size: 12px; color: var(--ta-text-3);
  display: flex; align-items: center; gap: 8px;
}
.ta-exp-user-label { color: var(--ta-text-dim); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; font-weight: 700; }

.ta-empty {
  text-align: center; color: var(--ta-text-dim);
  font-size: 13px; padding: 60px 16px;
  font-style: italic;
}

/* ── Ticket card ──────────────────────────────────────────────────── */
.ta-ticket {
  background: var(--ta-card);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .15s;
  box-shadow: var(--ta-shadow);
}
.ta-ticket:hover { border-color: var(--ta-border-hi); box-shadow: var(--ta-shadow-hover); }
.ta-ticket.flash-new { animation: ta-flash 1.5s ease-out; }
.ta-ticket.is-merged {
  border-color: var(--ta-merge-border);
  box-shadow: 0 0 0 1px rgba(255, 177, 85, .12), var(--ta-shadow);
}
.ta-ticket.is-merged:hover { border-color: var(--ta-merge); }
.ta-ticket.is-selected {
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 2px var(--ta-accent-bg), var(--ta-shadow);
  background: linear-gradient(180deg, rgba(90,140,255,.06) 0%, var(--ta-card) 100%);
}
.ta-ticket.is-alert { border-left: 3px solid var(--ta-bad); }
@keyframes ta-flash {
  0%   { box-shadow: 0 0 0 3px var(--ta-warn), var(--ta-shadow); }
  100% { box-shadow: 0 0 0 0 transparent, var(--ta-shadow); }
}

.ta-tk-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ta-tk-checkbox { width: 16px; height: 16px; accent-color: var(--ta-accent); cursor: pointer; margin: 0; }

/* Left-edge stripe — quiet row marker colored by ticket TYPE.
   Tells you the bet type at a glance AND clearly marks where each ticket starts.
   Alert/merged/selected states override with their own treatment. */
.ta-ticket-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--ta-text-dim);
  opacity: .35;
  pointer-events: none;
  border-radius: var(--ta-radius) 0 0 var(--ta-radius);
}
.ta-ticket-card.type-single::after   { background: var(--ta-pre);  opacity: .55; }
.ta-ticket-card.type-combined::after { background: var(--ta-ok);   opacity: .55; }
.ta-ticket-card.type-system::after   { background: var(--ta-warn); opacity: .55; }

/* When card is in a danger state, the existing ::before red strip wins;
   hide the type stripe so it doesn't compete */
.ta-ticket-card.is-alert::after,
.ta-ticket-card.is-merged::after { display: none; }
.ta-ticket-card.is-selected::after { background: var(--ta-accent); opacity: .9; }
.ta-tk-head-mid { display: flex; align-items: center; gap: 7px; }

/* Head row: [☐] #ID  TIME  AGE                          USER ▸ AGENT ▸ MGR */
.ta-tk-head {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid var(--ta-line);
  align-items: center;
}
.ta-tk-time { color: var(--ta-text); font-family: var(--ta-mono); font-size: 14px; font-weight: 700; }
.ta-tk-age { color: var(--ta-text-dim); font-size: 11px; font-weight: 500; }
.ta-tk-id { font-weight: 700; font-family: var(--ta-mono); font-size: 14px; letter-spacing: .02em; }

/* Repeated banner */
.ta-repeated-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(255,200,87,.15) 0%, transparent 70%);
  border-bottom: 1px solid var(--ta-warn-border);
  border-left: 3px solid var(--ta-warn);
  font-size: 12px;
  color: var(--ta-text-2);
}
.ta-rb-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ta-warn);
  color: #2a1d05;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* Merged banner */
.ta-merged-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(255,177,85,.18) 0%, transparent 80%);
  border-bottom: 1px solid var(--ta-merge-border);
  border-left: 3px solid var(--ta-merge);
  font-size: 12px;
  color: var(--ta-text-2);
}
.ta-mb-text { color: var(--ta-text-3); }
.ta-alert-pip { color: var(--ta-bad); font-size: 13px; margin-left: 6px; cursor: help; }
.ta-card-head-right .ta-alert-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 0;
  line-height: 1;
}
.ta-tk-tree { color: var(--ta-text-3); font-size: 12px; text-align: right; font-family: var(--ta-mono); }
.ta-tk-tree-node { color: var(--ta-text-3); }
.ta-tk-tree-sep { color: var(--ta-text-dim); margin: 0 6px; font-weight: 400; opacity: .55; }

.ta-merge-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ta-merge); color: #2a1d05;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: var(--ta-radius-pill);
  letter-spacing: .05em; cursor: pointer;
  border: none; font-family: inherit;
}
.ta-merge-badge:hover { filter: brightness(1.12); }
.ta-merge-expanded { background: rgba(0,0,0,.25); border-top: 1px solid var(--ta-line); }
.ta-merge-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: 12px; padding: 7px 16px;
  font-size: 12px; color: var(--ta-text-2);
  border-top: 1px solid var(--ta-line-soft);
  font-family: var(--ta-mono);
  align-items: center;
}
.ta-merge-row:first-child { border-top: none; }

/* Summary row — 8 cells per xlsx Ticket Model */
.ta-tk-summary {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr auto auto auto;
  gap: 14px;
  padding: 12px 16px;
  background: var(--ta-card);
  border-bottom: 1px solid var(--ta-line);
  align-items: center;
}
.ta-tk-type {
  display: inline-flex; align-items: center;
  background: var(--ta-card-elev);
  color: var(--ta-text-2);
  font-size: 10px; font-weight: 800;
  padding: 4px 11px; border-radius: var(--ta-radius-pill);
  text-transform: uppercase; letter-spacing: .1em;
  border: 1px solid var(--ta-border);
  min-height: 24px;
  box-sizing: border-box;
}
.ta-tk-type.single   { background: var(--ta-pre-bg);  color: var(--ta-pre);  border-color: var(--ta-pre-border); }
.ta-tk-type.combined { background: var(--ta-ok-bg);   color: var(--ta-ok);   border-color: var(--ta-ok-border); }
.ta-tk-type.system   { background: var(--ta-warn-bg); color: var(--ta-warn); border-color: var(--ta-warn-border); }

.ta-rep {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--ta-border);
  border-radius: 5px; padding: 4px 9px;
  color: var(--ta-text-2);
  cursor: help; font-size: 12px; font-weight: 600;
  font-family: var(--ta-mono);
  display: inline-flex; align-items: center; gap: 4px;
}
.ta-rep.hot  { background: var(--ta-bad-bg);  border-color: var(--ta-bad-border); color: var(--ta-bad); }
.ta-rep.warm { background: var(--ta-warn-bg); border-color: var(--ta-warn-border); color: var(--ta-warn); }
.ta-rep-label { color: var(--ta-text-dim); font-weight: 500; }

.ta-tk-spacer { }

.ta-tk-stake, .ta-tk-win, .ta-tk-odd {
  font-family: var(--ta-mono);
  text-align: right; white-space: nowrap;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 1px;
}
.ta-tk-amount-label {
  font-size: 10px; color: var(--ta-text-dim);
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.ta-tk-amount { font-size: 16px; font-weight: 700; line-height: 1.1; }
.ta-tk-stake .ta-tk-amount { color: var(--ta-text); }
.ta-tk-win   .ta-tk-amount { color: var(--ta-warn); }
.ta-tk-odd   .ta-tk-amount { color: var(--ta-accent); }

/* Legs section (inside row expansion) */
.ta-tk-legs { display: flex; flex-direction: column; background: rgba(0,0,0,.22); }

.ta-legs-header {
  display: grid;
  grid-template-columns: 30px 56px 70px minmax(140px,1.4fr) 44px minmax(160px,1.8fr) 56px;
  gap: 8px; padding: 7px 12px;
  background: rgba(0,0,0,.32);
  border-bottom: 1px solid var(--ta-line);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ta-text-dim);
}
.ta-legs-header span:nth-child(7) { text-align: right; }

.ta-leg {
  display: grid;
  grid-template-columns: 30px 56px 70px minmax(140px,1.4fr) 44px minmax(160px,1.8fr) 56px;
  gap: 8px; padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--ta-line);
  align-items: center;
}
.ta-leg:last-child { border-bottom: none; }
.ta-leg:hover { background: rgba(255,255,255,.02); }

.ta-leg-num {
  font-family: var(--ta-mono);
  color: var(--ta-text-dim);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
}
.ta-leg-time {
  color: var(--ta-text-2);
  font-family: var(--ta-mono);
  font-size: 12px;
  font-weight: 600;
}
.ta-leg-sport {
  color: var(--ta-text-3);
  font-size: 12px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-leg-match {
  color: var(--ta-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}
.ta-leg-channel {
  font-size: 9px; font-weight: 800;
  padding: 3px 6px; border-radius: 4px;
  text-align: center; letter-spacing: .1em;
}
.ta-leg-channel.live { background: var(--ta-live-bg); color: var(--ta-live); border: 1px solid var(--ta-live-border); }
.ta-leg-channel.pre  { background: var(--ta-pre-bg);  color: var(--ta-pre);  border: 1px solid var(--ta-pre-border); }
.ta-leg-pick {
  color: var(--ta-text-2);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-leg-score {
  font-family: var(--ta-mono);
  color: var(--ta-warn);
  font-size: 11px;
  background: var(--ta-warn-bg);
  padding: 3px 7px;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  border: 1px solid var(--ta-warn-border);
}
.ta-leg-odd {
  font-family: var(--ta-mono);
  color: var(--ta-accent);
  font-weight: 700;
  text-align: right;
  font-size: 15px;
}

/* Action row */
.ta-tk-actions {
  display: flex; gap: 8px;
  padding: 11px 16px;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--ta-line);
  align-items: center;
  position: relative;
}
.ta-tk-actions .ta-spacer { flex: 1; }
.ta-action-note { font-size: 12px; color: var(--ta-text-3); margin-right: 8px; }

/* Other dropdown */
.ta-other-wrap { position: relative; }
.ta-other-btn { font-size: 12px; padding: 8px 13px; }
.ta-other-caret { font-size: 10px; margin-left: 3px; opacity: .7; }
.ta-other-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  z-index: 100; min-width: 220px;
  background: var(--ta-pane-elev);
  border: 1px solid var(--ta-border-hi);
  border-radius: 9px;
  box-shadow: var(--ta-shadow-modal);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  animation: ta-slidein .15s ease-out;
}
@keyframes ta-slidein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ta-other-item {
  background: transparent; border: none;
  color: var(--ta-text-2); text-align: left;
  padding: 9px 12px; border-radius: 6px;
  cursor: pointer; font-family: inherit; font-size: 13px;
  display: flex; align-items: center; gap: 11px;
  transition: all .1s;
}
.ta-other-item:hover { background: var(--ta-card-hover); color: var(--ta-text); }
.ta-other-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ta-text-3); }
.ta-other-item-highlight { color: var(--ta-warn); font-weight: 600; }
.ta-other-item-highlight .ta-other-icon { color: var(--ta-warn); }
.ta-other-sep { height: 1px; background: var(--ta-line); margin: 4px 6px; }

/* ── Modal ─────────────────────────────────────────────────────────── */
.ta-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 12, 20, .75);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: ta-fade .12s ease-out;
}
@keyframes ta-fade { from { opacity: 0; } to { opacity: 1; } }
.ta-modal {
  background: var(--ta-pane);
  border: 1px solid var(--ta-border-hi);
  border-radius: 14px;
  width: 540px; max-width: 90vw;
  box-shadow: var(--ta-shadow-modal);
  overflow: hidden;
  animation: ta-slidein .18s ease-out;
}
.ta-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ta-line);
}
.ta-modal-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--ta-text); }
.ta-modal-close {
  background: transparent; border: none;
  color: var(--ta-text-3);
  font-size: 18px; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
}
.ta-modal-close:hover { background: var(--ta-card); color: var(--ta-bad); }
.ta-modal-body { padding: 22px; }
.ta-modal-sub { color: var(--ta-text-3); font-size: 13px; margin: 0 0 16px; }
.ta-modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 16px 22px;
  border-top: 1px solid var(--ta-line);
  background: rgba(0,0,0,.2);
}
.ta-settings-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ta-offer-modal { width: 760px; }
.ta-offer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(58vh, 620px);
  overflow: auto;
}
.ta-offer-ticket {
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  background: rgba(0,0,0,.16);
  overflow: hidden;
}
.ta-offer-ticket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--ta-card-head);
  border-bottom: 1px solid var(--ta-line);
  font-size: 13px;
  font-family: var(--ta-mono);
}
.ta-offer-ticket-meta {
  margin-left: auto;
  color: var(--ta-text-3);
  font-size: 12px;
}
.ta-offer-leg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 96px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid var(--ta-line-soft);
}
.ta-offer-leg:first-of-type { border-top: none; }
.ta-offer-leg-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ta-offer-old-odd {
  color: var(--ta-text-3);
  font-family: var(--ta-mono);
  font-weight: 700;
  text-align: right;
}
.ta-offer-odd-input {
  width: 96px;
  text-align: right;
  font-family: var(--ta-mono);
}
.ta-offer-error {
  margin-bottom: 12px;
  color: var(--ta-bad);
  background: var(--ta-bad-bg);
  border: 1px solid var(--ta-bad-border);
  border-radius: var(--ta-radius-sm);
  padding: 9px 11px;
  font-size: 13px;
}

.ta-fraud-pip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--ta-radius-pill);
  border: 1px solid var(--ta-bad-border);
  background: var(--ta-bad-bg);
  color: var(--ta-bad);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 0 10px rgba(255,107,107,.24);
  min-height: 24px;
  box-sizing: border-box;
}
.ta-fraud-pip.cluster {
  background: var(--ta-bad);
  color: white;
  border-color: var(--ta-bad);
}
.ta-fraud-pip.payout {
  background: rgba(255,138,40,.16);
  color: #ff8a28;
  border-color: rgba(255,138,40,.45);
}
.ta-fraud-pip.time {
  background: var(--ta-warn-bg);
  color: var(--ta-warn);
  border-color: var(--ta-warn-border);
}

/* ── Toast ─────────────────────────────────────────────────────────── */
.ta-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ta-pane-elev);
  border: 1px solid var(--ta-accent);
  color: var(--ta-text);
  padding: 12px 18px;
  border-radius: 9px;
  font-size: 13px;
  box-shadow: var(--ta-shadow-modal);
  z-index: 9999;
  transition: opacity .2s;
}

/* ─── 2026-05-12 — Fullscreen mode for Pranimi i Biletave ─────────────
 * Brother wants this page to use the whole viewport. mount() adds
 * `.ta-fullscreen` on <body>; we collapse .app-shell's grid so topbar +
 * sidebar shrink to 0, hide them, and pad #content for the cards.
 * The body class is removed by a hashchange listener when leaving the
 * #/ticket-accept route, so other pages keep their normal chrome.
 */
body.ta-fullscreen .app-shell {
  grid-template-rows: 0 1fr !important;
  grid-template-columns: 0 1fr !important;
}
body.ta-fullscreen .topbar,
body.ta-fullscreen .sidebar,
body.ta-fullscreen .sidebar-backdrop,
body.ta-fullscreen .bottom-nav { display: none !important; }
body.ta-fullscreen #content,
body.ta-fullscreen .content {
  padding: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  overflow-x: hidden;
}
/* 2026-05-12 — Compact + sticky header in fullscreen so panels get max
 * vertical space. Header shrinks to ~48px, stays put while panels scroll
 * inside themselves (no page-level scroll).
 *
 * Strict-viewport rules scoped to pages with the dual-pane .ta-panes layout
 * (Page 1 #ta-root, Page 2 #st-root). Page 3 (#at-root) has a different
 * layout (tab strip + filter form + grid + drawer) and just gets the sticky
 * header treatment — no overflow constraint on the root. */
/* 2026-05-12 — panels auto-size to content; page scrolls when needed.
 * Earlier version locked #ta-root to 100dvh + gave each panel its own
 * internal scroll, producing "blank space" at the bottom of whichever
 * panel had fewer cards. Now window scrolls, sticky header stays pinned. */
body.ta-fullscreen #ta-root,
body.ta-fullscreen #st-root {
  padding: 0;
  gap: 0;
  min-height: 0;
  height: auto;
  background: var(--ta-bg);
}
/* The base .ta-root sets min-height:100vh which made the page body extend
 * to viewport bottom even when content was shorter — that was the "black
 * space below the last ticket" Page 1/2 panels showed. Reset to auto. */
body.ta-fullscreen .ta-root { min-height: 0 !important; }
/* Same for Page 3 grid-wrap — its min-height:420px enforced dead space
 * even when fewer cards were loaded. */
body.ta-fullscreen .ta-grid-wrap { min-height: 0 !important; max-height: none !important; overflow-y: visible !important; }
body.ta-fullscreen #at-root {
  padding: 0 14px 14px;
}
body.ta-fullscreen .ta-page-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ta-bg);
  border-bottom: 1px solid var(--ta-border);
  /* ≡ button is now inline (.ta-inline-menu-btn). Reclaim left padding. */
  padding: 3px 10px;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  min-height: 32px;
}
body.ta-fullscreen .ta-page-head-left { justify-self: start; }
body.ta-fullscreen .ta-clock-widget   { justify-self: center; }
body.ta-fullscreen .ta-page-head .ta-meta-row { justify-self: end; }
body.ta-fullscreen .ta-page-title {
  font-size: 12px;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0;
}
body.ta-fullscreen .ta-page-title::before {
  width: 3px; height: 12px;
}
body.ta-fullscreen .ta-page-sub { display: none; }
/* 2026-05-12 — Minimal clock: just HH:MM:SS in a tight pill. Date + TZ
 * hidden — operator only needs the time. Saves header height. */
body.ta-fullscreen .ta-clock-widget {
  padding: 2px 8px;
  min-width: 0;
  border-radius: 6px;
  flex-direction: row;
}
body.ta-fullscreen .ta-clock-widget::before { display: none; }
body.ta-fullscreen .ta-clock-time { font-size: 12px; letter-spacing: 0; line-height: 1.4; }
body.ta-fullscreen .ta-clock-date,
body.ta-fullscreen .ta-clock-tz   { display: none; }
body.ta-fullscreen .ta-meta-row { font-size: 10px; gap: 4px; }
body.ta-fullscreen .ta-meta-row .ta-btn-icon { width: 22px; height: 22px; font-size: 12px; }
body.ta-fullscreen .ta-fs-menu-btn { top: 3px; left: 3px; width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }

/* 2026-05-12 — Panels auto-size to content. Each panel's height = its
 * cards' height (no flex-fill). Whole page scrolls in the window. Killed
 * the blank-tail at the bottom of the panel with fewer cards. */
body.ta-fullscreen .ta-panes {
  gap: 10px;
  padding: 10px 14px 10px;
  align-items: start;
}
body.ta-fullscreen .ta-pane { min-height: 0 !important; height: auto !important; }
body.ta-fullscreen .ta-tickets { min-height: 0; }

/* Floating menu button repositioned to clear sticky header */
body.ta-fullscreen .ta-fs-menu-btn { top: 7px; left: 7px; width: 32px; height: 32px; font-size: 18px; }

/* Floating "≡" menu toggle — only visible in fullscreen */
.ta-fs-menu-btn {
  position: fixed;
  top: 10px; left: 10px;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--ta-pane-elev);
  border: 1px solid var(--ta-border-hi);
  color: var(--ta-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 9998;
  display: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
  transition: background .15s, transform .12s;
}
.ta-fs-menu-btn:hover { background: var(--ta-card-hover); transform: scale(1.05); }
body.ta-fullscreen .ta-fs-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

/* Paused fullscreen — chrome restored as a fixed overlay.
 * The app-shell grid stays collapsed so ticket panes do not resize/reflow
 * when the menu opens. */
body.ta-fullscreen.ta-fullscreen-paused .app-shell {
  grid-template-rows: 0 minmax(0, 1fr) !important;
  grid-template-columns: 0 minmax(0, 1fr) !important;
}
body.ta-fullscreen.ta-fullscreen-paused .topbar,
body.ta-fullscreen.ta-fullscreen-paused .sidebar { display: flex !important; }
body.ta-fullscreen.ta-fullscreen-paused .topbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 52px;
  min-height: 52px;
  padding: 0 14px !important;
  z-index: 240;
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
}
body.ta-fullscreen.ta-fullscreen-paused .sidebar {
  position: fixed !important;
  top: 52px !important;
  left: 0; bottom: 0;
  width: 220px;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  padding-top: 8px !important;
  z-index: 241;
  box-shadow: 18px 0 34px rgba(0,0,0,.45);
}
body.ta-fullscreen.ta-fullscreen-paused .sidebar-backdrop {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 220;
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
body.ta-fullscreen.ta-fullscreen-paused .sidebar .nav-item {
  padding: 9px 16px !important;
  font-size: 13px;
  gap: 10px;
}
body.ta-fullscreen.ta-fullscreen-paused .sidebar .nav-icon { font-size: 13px; width: 15px; }
body.ta-fullscreen.ta-fullscreen-paused .sidebar-account,
body.ta-fullscreen.ta-fullscreen-paused .nav-label,
body.ta-fullscreen.ta-fullscreen-paused .nav-tag,
body.ta-fullscreen.ta-fullscreen-paused .sidebar-foot { display: revert !important; }
body.ta-fullscreen.ta-fullscreen-paused .sidebar-foot { font-size: 10px; padding: 8px 12px; }
body.ta-fullscreen.ta-fullscreen-paused .bottom-nav { display: none !important; }

/* 2026-05-12 — Compact panels in fullscreen: tighter pane heads + card
 * spacing so Live panel especially gets more vertical real estate for
 * cards. Hides the (now-deleted) preset row's old anchor padding. */
body.ta-fullscreen .ta-pane { min-height: 0 !important; height: auto !important; }
body.ta-fullscreen .ta-pane-head { padding: 7px 10px; }
body.ta-fullscreen .ta-pane-head-left { gap: 8px; }
body.ta-fullscreen .ta-filter-form {
  padding: 6px 10px 8px !important;
  gap: 6px !important;
}
body.ta-fullscreen .ta-filter-grid {
  gap: 6px !important;
}
body.ta-fullscreen .ta-ff-label { font-size: 10px !important; }
body.ta-fullscreen .ta-tickets { padding: 8px 10px 14px !important; gap: 8px !important; }
body.ta-fullscreen .ta-ticket-card { padding: 9px 12px !important; }
body.ta-fullscreen .ta-card-head { gap: 8px !important; }
body.ta-fullscreen .ta-card-foot { padding-top: 6px !important; }

/* Compact filter form input heights */
body.ta-fullscreen .ta-filter-form select,
body.ta-fullscreen .ta-filter-form input { height: 26px !important; font-size: 12px !important; }

/* 2026-05-12 — Tier 3 compaction. Header ≈32px, pane head ≈30px, cards
 * use less vertical padding. Goal: maximize cards visible per viewport. */
body.ta-fullscreen .ta-pane-head { padding: 4px 10px; min-height: 30px; }
body.ta-fullscreen .ta-pane-title { font-size: 12px; }
body.ta-fullscreen .ta-pane-title-sub { font-size: 10px; padding: 1px 6px; }
body.ta-fullscreen .ta-pane-dot { width: 7px; height: 7px; }
body.ta-fullscreen .ta-pane-meta { font-size: 10px; }

/* Cards: 7/10 padding, 6px gap */
body.ta-fullscreen .ta-tickets { padding: 6px 8px 12px !important; gap: 6px !important; }
body.ta-fullscreen .ta-ticket-card { padding: 7px 10px !important; }
body.ta-fullscreen .ta-card-head { gap: 6px !important; font-size: 11px; }
body.ta-fullscreen .ta-card-id { font-size: 12px !important; }
body.ta-fullscreen .ta-leg-row { padding: 4px 0 !important; font-size: 11px !important; }
body.ta-fullscreen .ta-card-foot { padding-top: 5px !important; gap: 6px !important; }
body.ta-fullscreen .ta-card-foot .ta-btn { padding: 4px 10px !important; font-size: 11px !important; }

/* Pane gap is between Panel 1 and Panel 2 — keep tiny */
body.ta-fullscreen .ta-panes { gap: 6px !important; padding: 6px 8px 8px !important; }

/* 2026-05-12 — Inline menu toggle: sits next to the title separator in the
 * page head. Replaces the floating ≡ overlay. Tiny: 18px square. */
.ta-inline-menu-btn {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--ta-pane-elev);
  border: 1px solid var(--ta-border);
  color: var(--ta-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
  transition: background .12s, transform .12s, border-color .12s;
}
.ta-inline-menu-btn:hover { background: var(--ta-card-hover); border-color: var(--ta-border-hi); transform: scale(1.06); }

/* .ta-page-head-left now needs to be a horizontal row so button sits next to title */
body.ta-fullscreen .ta-page-head-left {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

/* Old floating ≡ btn — keep CSS rule disabled in case any other page still appends it (Page 2/3 still do). */
.ta-fs-menu-btn { display: none; }
body.ta-fullscreen .ta-fs-menu-btn { display: none; }

/* 2026-05-12 — Duplicate badge in card head. Replaces the merged-card UX.
 * Clicking navigates to Të Gjitha Biletat filtered to the dup group. */
.ta-dup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--ta-radius-pill);
  background: var(--ta-warn-bg);
  border: 1px solid var(--ta-warn-border);
  color: var(--ta-warn);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: filter .12s, transform .12s;
}
.ta-dup-badge:hover { filter: brightness(1.15); transform: scale(1.03); }
.ta-dup-badge strong { font-weight: 800; }

/* Page 3 dup-filter banner */
.at-dup-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  margin: 8px 14px 0;
  background: var(--ta-warn-bg);
  border: 1px solid var(--ta-warn-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ta-text);
}
.at-dup-icon { font-size: 16px; color: var(--ta-warn); }
.at-dup-text { flex: 1; }
.at-dup-clear {
  background: var(--ta-pane-elev);
  color: var(--ta-text);
  border: 1px solid var(--ta-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s;
}
.at-dup-clear:hover { background: var(--ta-card-hover); }

/* User-filter banner on Page 3 — shown when arriving from a clicked
 * breadcrumb (boli / shop1 / manager1 / centrala). One-click dismiss. */
.at-user-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  margin: 8px 14px 0;
  background: linear-gradient(90deg, rgba(90,140,255,.10), rgba(167,139,255,.05));
  border: 1px solid var(--ta-accent-border, var(--ta-border-hi));
  border-radius: 8px;
  font-size: 12px;
  color: var(--ta-text);
}
.at-user-icon { font-size: 15px; }
.at-user-text { flex: 1; }
.at-user-clear {
  background: var(--ta-pane-elev);
  color: var(--ta-text);
  border: 1px solid var(--ta-border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.at-user-clear:hover { background: var(--ta-card-hover); }

/* 2026-05-12 — Nuclear option: force EVERY height constraint off in
 * fullscreen + match body bg to panel bg so even if any residual blank
 * space exists, it visually blends in (no harsh black void below cards). */
body.ta-fullscreen,
body.ta-fullscreen html {
  background: var(--ta-bg) !important;
}
body.ta-fullscreen .app-shell,
body.ta-fullscreen .content,
body.ta-fullscreen #content,
body.ta-fullscreen #ta-root,
body.ta-fullscreen #st-root,
body.ta-fullscreen .ta-root,
body.ta-fullscreen .ta-panes,
body.ta-fullscreen .ta-pane,
body.ta-fullscreen .ta-tickets {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
body.ta-fullscreen .ta-panes { align-items: start !important; }
body.ta-fullscreen .app-shell { overflow: visible !important; }
body.ta-fullscreen .content,
body.ta-fullscreen #content { overflow: visible !important; }

/* 2026-05-12 — Make WINDOW scrollable (was overflow:hidden on body which
 * killed all scroll after the nuclear height reset). Now: page grows with
 * content; window scrolls naturally; sticky header pins to viewport top. */
body.ta-fullscreen {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100dvh;
}
html.ta-fs-html, body.ta-fullscreen { scroll-behavior: smooth; }

/* 2026-05-12 — Inline bulk action buttons in pane head (replaced the
 * separate bulk-bar row). Keeps them compact + flex-wrappable. */
.ta-pane-meta { gap: 6px; flex-wrap: nowrap; }
.ta-btn-sm { padding: 4px 10px !important; font-size: 11px !important; height: 26px; }
body.ta-fullscreen .ta-pane-meta { gap: 4px; }
body.ta-fullscreen .ta-btn-sm { padding: 3px 8px !important; font-size: 10px !important; height: 24px; }

/* Ensure the head's left side can flex around the count + select-all */
.ta-pane-head-left { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.ta-pane-head { gap: 8px; flex-wrap: wrap; row-gap: 4px; }

/* Selected-count "clear" chip in head */
.ta-pane-head-left .ta-bulk-clear {
  background: var(--ta-accent-bg, var(--ta-card-elev));
  color: var(--ta-accent, var(--ta-text));
  border: 1px solid var(--ta-accent-border, var(--ta-border-hi));
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
}

/* 2026-05-12 — "Filtered" chip in Page 3 page-head. Pulses subtly so the
 * operator can't miss that a filter is silently restricting results. */
.at-filtered-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--ta-radius-pill, 12px);
  background: var(--ta-warn-bg);
  border: 1px solid var(--ta-warn-border);
  color: var(--ta-warn);
  font-size: 11px;
  font-family: var(--ta-mono);
  cursor: pointer;
  transition: filter .12s;
  animation: at-filtered-pulse 2s ease-in-out infinite;
}
.at-filtered-chip:hover { filter: brightness(1.15); }
.at-filtered-icon { font-size: 13px; }
.at-filtered-clear {
  color: var(--ta-text);
  background: var(--ta-pane-elev);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10px;
}
@keyframes at-filtered-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,87,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,200,87,.18); }
}

/* 2026-05-12 — Money inputs: hide spinner arrows (text input has none
 * anyway, but if any browser shows them on inputmode=numeric, kill them)
 * and right-pad room for the inline EUR badge. */
.ta-input-money {
  font-variant-numeric: tabular-nums;
  font-family: var(--ta-mono);
  text-align: left;
  letter-spacing: .02em;
}
.ta-input-money::-webkit-outer-spin-button,
.ta-input-money::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ta-input-money[type="number"] { -moz-appearance: textfield; }

/* 2026-05-12 — Leg teams column now stacks two lines:
 *   1) sport-tag + kickoff label (when known)
 *   2) team names (the existing match link)
 * Aligns the kickoff time next to the sport label so the operator sees
 * Soccer · Tue 17/06 19:00 above the team names. */
.ta-leg-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ta-leg-sport-line { display: inline-flex; align-items: center; gap: 8px; }
.ta-leg-kickoff {
  font-family: var(--ta-mono);
  font-size: 10px;
  color: var(--ta-text-3);
  background: var(--ta-card-elev);
  border: 1px solid var(--ta-border);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .02em;
}

/* 2026-05-12 — Bulk action confirmation modal. Forces operator to verify
 * totals before chain-approving N tickets (audit showed 23 approvals in 1.5s
 * via accidental rapid-click; this modal stops that). */
.ta-bulk-confirm {
  width: 460px;
  max-width: 90vw;
  background: var(--ta-pane-elev);
  border: 1px solid var(--ta-border-hi);
  border-radius: 12px;
  box-shadow: var(--ta-shadow-modal);
  padding: 0;
  overflow: hidden;
}
.ta-bulk-confirm .ta-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ta-border);
  background: var(--ta-pane);
}
.ta-bulk-confirm .ta-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ta-text);
}
.ta-bulk-confirm .ta-modal-warn-icon { color: var(--ta-warn); }
.ta-bulk-confirm .ta-modal-close {
  background: transparent; border: none; color: var(--ta-text-3);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.ta-bulk-confirm-body { padding: 14px 16px; color: var(--ta-text-2); font-size: 13px; }
.ta-bulk-confirm-warn {
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--ta-warn-bg);
  border: 1px solid var(--ta-warn-border);
  color: var(--ta-warn);
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 600;
}
.ta-bulk-confirm-stats { width: 100%; border-collapse: collapse; font-size: 12px; }
.ta-bulk-confirm-stats td { padding: 6px 4px; border-bottom: 1px solid var(--ta-line); }
.ta-bulk-confirm-stats td:first-child { color: var(--ta-text-3); font-weight: 600; width: 110px; }
.ta-bulk-confirm-stats td:last-child  { color: var(--ta-text); font-family: var(--ta-mono); }
.ta-bulk-confirm-stats tr:last-child td { border-bottom: none; }
.ta-bulk-confirm .ta-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ta-border);
  background: var(--ta-pane);
}
.ta-bulk-confirm.ta-modal-ok   { border-color: var(--ta-ok-border, var(--ta-border-hi)); }
.ta-bulk-confirm.ta-modal-bad  { border-color: var(--ta-bad-border, var(--ta-border-hi)); }
.ta-bulk-confirm.ta-modal-warn { border-color: var(--ta-warn-border, var(--ta-border-hi)); }


/* ─── Phase 0 polish 2026-05-12 — live minute & live score chips on leg row */
.ta-leg-livemin {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 8px;
  font-family: var(--ta-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  background: rgba(255,88,112,.14);
  color: var(--ta-live, #ff5870);
  border: 1px solid rgba(255,88,112,.4);
  letter-spacing: .02em;
  animation: ta-livemin-pulse 2s ease-in-out infinite;
}
.ta-leg-livescore {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 8px;
  font-family: var(--ta-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  background: var(--ta-card-elev, #1a1f2e);
  color: var(--ta-text-hi, #fff);
  border: 1px solid var(--ta-border, #222);
}
@keyframes ta-livemin-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.7; }
}


/* 2026-05-13 — sticky filter bar across all ticket pages.
   Lives inside each panel's scroll container; pins to top on scroll. */
.ta-filter-form, .at-filter-form {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ta-pane, #131722);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 0 var(--ta-line, rgba(255,255,255,.06));
}
.ta-pane-head {
  position: sticky;
  top: 0;
  z-index: 7;
  /* opaque so tickets scrolling underneath don't bleed through */
  background: var(--ta-card-head);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Filter form sits directly below pane-head — pin at ~52px (pane-head height) */
.ta-pane .ta-filter-form {
  top: 52px;
}
.ta-pane {
  overflow: visible !important;
}
.ta-pane-head {
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--ta-card-head);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Filter form sits directly below pane-head — pin at ~42px (pane-head height) */
.ta-pane .ta-filter-form {
  top: 42px;
  z-index: 6;
}
.ta-pane {
  overflow: visible !important;
}
/* Both panels stretch to the taller sibling so the shorter panel's
   sticky header stays pinned for the full body scroll, not just its own
   content range. */
.ta-panes {
  align-items: stretch !important;
}
.ta-pane-head {
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--ta-card-head);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Filter form sits directly below pane-head — pin at ~42px (pane-head height) */
.ta-pane .ta-filter-form {
  top: 42px;
  z-index: 6;
}


/* 2026-05-13 — sticky pane-head + filter-form stacked; page-head NOT sticky.
   Critical: .ta-pane had overflow:hidden which kills position:sticky inside
   it. Override to visible so sticky pins relative to the body scroll. */
body.ta-fullscreen .ta-page-head {
  position: static !important;
}
.ta-pane {
  overflow: visible !important;
}
/* Both panels stretch to the taller sibling so the shorter panel's
   sticky header stays pinned for the full body scroll, not just its own
   content range. Must use body.ta-fullscreen specificity to beat an
   earlier rule that pinned align-items: start. */
.ta-panes,
body.ta-fullscreen .ta-panes {
  align-items: stretch !important;
}
.ta-pane-head {
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--ta-card-head);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Filter form sits directly below pane-head — pin at ~42px (pane-head height) */
.ta-pane .ta-filter-form {
  top: 42px;
  z-index: 6;
}

/* 2026-05-15 — unified "match ended" leg pill (Pranimi/Verdikt/Të Gjitha).
 * Driven by leg.match_state via OpShared.matchEndedLabel, independent of
 * the live-minute gate so a finished match never looks not-yet-started. */
.ta-leg-ended{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:1px 6px;border-radius:4px;margin-left:6px;
  text-transform:uppercase;white-space:nowrap;line-height:1.4;
}
.ta-leg-ended.ended{ background:rgba(90,169,255,.16); color:#5aa9ff; border:1px solid rgba(90,169,255,.42); }
.ta-leg-ended.void { background:var(--ta-card-elev,#1c232e); color:var(--ta-text-dim,#8a96a6); border:1px solid var(--ta-border,#283549); }
.ta-leg-ended.warn { background:rgba(255,170,40,.15); color:#ffaa28; border:1px solid rgba(255,170,40,.42); }