/* ═══════════════════════════════════════════════════════
   Trend Scanner V2 — Signal Panel
   ═══════════════════════════════════════════════════════ */

#tab-trending-coins.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header bar ─────────────────────────────────────── */
.ts-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0,229,255,0.04);
    border-bottom: 1px solid rgba(0,229,255,0.10);
    flex-shrink: 0;
}
.ts-header-left {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; color: #00e5ff; font-weight: 700; letter-spacing: 0.5px;
}
.ts-live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #00e5ff;
    animation: ts-pulse 1.8s ease-in-out infinite;
}
@keyframes ts-pulse {
    0%,100% { opacity:1; box-shadow:0 0 5px #00e5ff; }
    50%      { opacity:0.25; box-shadow:none; }
}
.ts-header-right { font-size: 10px; color: #444; }
.ts-status-text  { color: #555; }

/* ── Stats bar (Faz 9 — hit rate) ───────────────────── */
.ts-stats-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 10px; color: #555;
    flex-shrink: 0;
}
.ts-stat-item { display: flex; align-items: center; gap: 4px; }
.ts-stat-label { color: #444; }
.ts-stat-val   { color: #888; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.ts-stat-val.positive { color: #00e676; }
.ts-stat-val.negative { color: #ff5252; }

/* ── Help (?-button + how-to-read panel) ────────────── */
.ts-help-btn {
    margin-left: auto;
    width: 18px; height: 18px;
    border-radius: 50%; border: 1px solid rgba(0,229,255,0.30);
    background: rgba(0,229,255,0.06); color: #00e5ff;
    font-size: 10px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
}
.ts-help-btn:hover { background: rgba(0,229,255,0.14); }

.ts-help-panel {
    background: rgba(0,229,255,0.025);
    border-bottom: 1px solid rgba(0,229,255,0.10);
    padding: 10px 14px; flex-shrink: 0;
    font-size: 10px; color: #aaa;
    display: flex; flex-direction: column; gap: 8px;
}
.ts-help-section { display: flex; flex-direction: column; gap: 4px; }
.ts-help-title {
    font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
    color: #00e5ff; text-transform: uppercase;
}
.ts-help-row { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.ts-help-row .ts-quality { cursor: default; }
.ts-help-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
    font-size: 10px; color: #999;
}
.ts-help-grid b { color: #ddd; }
.ts-help-note { font-size: 9px; color: #777; font-style: italic; }
@media (max-width: 768px) {
    .ts-help-grid { grid-template-columns: 1fr; }
}

/* ── Table wrapper ───────────────────────────────────── */
.ts-table-wrap {
    overflow-y: auto; flex: 1;
    background: #080808;
}
.ts-table-wrap::-webkit-scrollbar { width: 3px; }
.ts-table-wrap::-webkit-scrollbar-thumb { background: #1e1e2a; border-radius: 2px; }

/* ── Table ───────────────────────────────────────────── */
.ts-table {
    width: 100%; border-collapse: collapse; font-size: 11px;
}
.ts-table thead th {
    padding: 5px 10px; text-align: left;
    color: #3a3a5a; font-weight: 600; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap; user-select: none;
    position: sticky; top: 0; background: #080808; z-index: 1;
}

/* ── Rows ────────────────────────────────────────────── */
.ts-row {
    border-bottom: 1px solid rgba(255,255,255,0.025);
    transition: background 0.12s;
    cursor: pointer;
}
.ts-row:hover { background: rgba(255,255,255,0.03); }
.ts-row td    { padding: 8px 10px; vertical-align: middle; }

/* Direction accent strip */
.ts-row.long-row  { border-left: 2px solid rgba(0,230,118,0.35); }
.ts-row.short-row { border-left: 2px solid rgba(255,23,68,0.35); }

.ts-layer-chip {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 3px; font-size: 9px;
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    white-space: nowrap;
}
.ts-layer-chip.pos {
    background: rgba(0,230,118,0.08); color: #69f0ae;
    border: 1px solid rgba(0,230,118,0.18);
}
.ts-layer-chip.mid {
    background: rgba(255,152,0,0.08); color: #ffb74d;
    border: 1px solid rgba(255,152,0,0.18);
}
.ts-layer-chip.neg {
    background: rgba(255,23,68,0.06); color: #ff5252;
    border: 1px solid rgba(255,23,68,0.12);
}

/* ── Cell: Coin ──────────────────────────────────────── */
.ts-coin { display: flex; align-items: baseline; gap: 3px; }
.ts-coin-name { font-weight: 700; color: #fff; font-size: 12px; letter-spacing: 0.3px; }
.ts-coin-pair { font-size: 8px; color: #333; }

/* ── Cell: Direction badge ───────────────────────────── */
.ts-dir {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 9px; border-radius: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    white-space: nowrap;
}
.ts-dir.long  { background: rgba(0,230,118,0.10); color: #00e676; border: 1px solid rgba(0,230,118,0.22); }
.ts-dir.short { background: rgba(255,23,68,0.10); color: #ff1744; border: 1px solid rgba(255,23,68,0.22); }

/* ── Cell: Quality verdict ───────────────────────────── */
.ts-quality-cell { display: flex; flex-direction: column; gap: 3px; min-width: 84px; }
.ts-quality {
    display: inline-block; padding: 3px 9px; border-radius: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    white-space: nowrap; cursor: help; align-self: flex-start;
}
.ts-quality.strong {
    background: rgba(0,230,118,0.14); color: #00e676;
    border: 1px solid rgba(0,230,118,0.35);
    box-shadow: 0 0 6px rgba(0,230,118,0.18);
}
.ts-quality.good {
    background: rgba(255,215,64,0.10); color: #ffd740;
    border: 1px solid rgba(255,215,64,0.28);
}
.ts-quality.marginal {
    background: rgba(255,152,0,0.08); color: #ffb74d;
    border: 1px solid rgba(255,152,0,0.22);
}
.ts-warn-row { display: flex; flex-wrap: wrap; gap: 2px; max-width: 200px; }
.ts-warn-chip {
    font-size: 8px; padding: 1px 5px; border-radius: 2px;
    background: rgba(255,82,82,0.06); color: #ff8a65;
    border: 1px solid rgba(255,82,82,0.14);
    white-space: nowrap; cursor: help;
}

/* ── Cell: Confidence ────────────────────────────────── */
.ts-conf { display: flex; flex-direction: column; gap: 3px; min-width: 60px; }
.ts-conf-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 12px;
}
.ts-conf-val.conf-high   { color: #ffd740; }   /* ≥80% */
.ts-conf-val.conf-good   { color: #69f0ae; }   /* 65-80% */
.ts-conf-val.conf-ok     { color: #ffb74d; }   /* 55-65% */
.ts-conf-val.conf-low    { color: #666; }       /* <55% */
.ts-conf-bar-track {
    height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06);
    overflow: hidden; width: 56px;
}
.ts-conf-bar {
    height: 100%; border-radius: 2px; transition: width 0.4s ease;
}
.ts-conf-bar.conf-high   { background: #ffd740; }
.ts-conf-bar.conf-good   { background: #00e676; }
.ts-conf-bar.conf-ok     { background: #ff9800; }
.ts-conf-bar.conf-low    { background: #444; }

/* ── Cell: Regime badge ──────────────────────────────── */
.ts-regime {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    font-size: 8px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; white-space: nowrap;
}
.ts-regime.alt-season    { background:rgba(0,229,255,0.08); color:#00e5ff; border:1px solid rgba(0,229,255,0.2); }
.ts-regime.melt-up       { background:rgba(255,215,0,0.08); color:#ffd740; border:1px solid rgba(255,215,0,0.2); }
.ts-regime.btc-dominant  { background:rgba(33,150,243,0.08); color:#64b5f6; border:1px solid rgba(33,150,243,0.2); }
.ts-regime.risk-off      { background:rgba(244,67,54,0.08); color:#ef5350; border:1px solid rgba(244,67,54,0.2); }
.ts-regime.chop          { background:rgba(255,255,255,0.04); color:#555; border:1px solid rgba(255,255,255,0.07); }

/* ── Cell: Layer scores ──────────────────────────────── */
.ts-layers { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }

/* ── Cell: AI verdict ────────────────────────────────── */
.ts-ai { display: flex; align-items: center; gap: 5px; }
.ts-ai-verdict {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap;
}
.ts-ai-verdict.long    { background:rgba(0,230,118,0.08); color:#00e676; border:1px solid rgba(0,230,118,0.18); }
.ts-ai-verdict.short   { background:rgba(255,23,68,0.08); color:#ff1744; border:1px solid rgba(255,23,68,0.18); }
.ts-ai-verdict.neutral { background:rgba(255,255,255,0.04); color:#666; border:1px solid rgba(255,255,255,0.08); }
.ts-ai-verdict.none    { color: #2a2a3a; font-size: 8px; letter-spacing: 0; font-weight: 400; }
.ts-ai-conf {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: #555;
}

/* ── Cell: Entry price ───────────────────────────────── */
.ts-entry { white-space: nowrap; min-width: 110px; }
.ts-entry-line {
    display: flex; align-items: baseline; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.ts-entry-label {
    font-size: 8px; color: #3a3a5a; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.5px;
    width: 32px; flex-shrink: 0;
}
.ts-entry-price {
    font-weight: 600; color: #ccc;
}
.ts-entry-now {
    font-weight: 500; color: #888;
}
.ts-entry-move {
    font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 2px;
}
.ts-entry-move.pos { color: #00e676; background: rgba(0,230,118,0.08); }
.ts-entry-move.neg { color: #ff5252; background: rgba(255,82,82,0.08); }
.ts-entry-age { display: block; font-size: 9px; color: #3a3a5a; margin-top: 2px; }

/* ── Empty state ─────────────────────────────────────── */
.ts-empty { text-align: center; color: #2a2a3a; padding: 40px 20px; font-size: 11px; }
.ts-empty-icon { font-size: 24px; margin-bottom: 8px; opacity: 0.4; }

/* ── Tab badge ───────────────────────────────────────── */
.tc-badge {
    background: rgba(0,229,255,0.14); color: #00e5ff;
    border: 1px solid rgba(0,229,255,0.25);
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ts-table thead { display: none; }
    .ts-table, .ts-table tbody, .ts-row, .ts-row td { display: block; width: 100%; }
    .ts-row {
        margin: 0 0 4px;
        padding: 10px 12px;
        background: rgba(255,255,255,0.02);
        border-radius: 5px;
        border: 1px solid rgba(255,255,255,0.04);
        border-left-width: 3px;
    }
    .ts-row td { padding: 2px 0; border: none; }
    .ts-stat-label { display: none; }
    .ts-layers { gap: 2px; }
}