/* ==========================================================================
   Versionary — Titles Console (V1 drop-in)
   Scoped to .tcx (canvas + player) and .tcx-tools (existing tools sidebar).
   Light is default; dark via body.dark-mode (same pattern as v1-main.css).
   Load in <head> after v1-main.css.
   ========================================================================== */

.tcx, .tcx-tools {
  --tcx-bg: var(--th-bg, #f2f0eb); --tcx-canvas: var(--th-bg, #f2f0eb); --tcx-surface: var(--th-sf, #ffffff);
  --tcx-surface-2: rgba(0,0,0,.03); --tcx-hover: rgba(0,0,0,.045); --tcx-active: rgba(0,0,0,.065);
  --tcx-border: rgba(0,0,0,.09); --tcx-border-2: rgba(0,0,0,.05);
  --tcx-tx: #1a1a2e; --tcx-tx2: rgba(26,26,46,.66); --tcx-tx3: rgba(26,26,46,.5);
  --tcx-id: #5b4dc7; --tcx-green: #059669; --tcx-violet: #5b4dc7; --tcx-red: #dc2626; --tcx-blue: #3B66F1;
  --tcx-thumb: #e7e7ec; --tcx-pop: rgba(255,255,255,.98); --tcx-shadow: 0 8px 24px rgba(0,0,0,.12);
  --tcx-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
  --tcx-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --tcx-dot-grid: var(--dot-grid, radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px));
  --tcx-dot-grid-size: var(--dot-grid-size, 20px 20px);
}
.tcx-force-dark { --th-bg: #0a0a0f; --th-sf: #111318; }
body.dark-mode .tcx, body.dark-mode .tcx-tools, .tcx.tcx-player, .tcx-force-dark .tcx, .tcx-force-dark .tcx-tools {
  --tcx-bg: var(--th-bg, #0a0a0f); --tcx-canvas: var(--th-bg, #0a0a0f); --tcx-surface: var(--th-sf, #111318);
  --tcx-surface-2: rgba(255,255,255,.04); --tcx-hover: rgba(255,255,255,.055); --tcx-active: rgba(255,255,255,.08);
  --tcx-border: rgba(255,255,255,.08); --tcx-border-2: rgba(255,255,255,.045);
  --tcx-tx: #e8e8ec; --tcx-tx2: rgba(255,255,255,.64); --tcx-tx3: rgba(255,255,255,.45);
  --tcx-id: #a295f7; --tcx-green: #34d399; --tcx-violet: #8b7bf2; --tcx-red: #f05252;
  --tcx-thumb: #0c0d12; --tcx-pop: rgba(18,18,24,.97); --tcx-shadow: 0 10px 28px rgba(0,0,0,.5);
  --tcx-dot-grid: var(--dot-grid, radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px));
  --tcx-dot-grid-size: var(--dot-grid-size, 20px 20px);
}

@keyframes tcx-grad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes tcx-glow { 0%,100% { opacity: .22; } 50% { opacity: .45; } }
@keyframes tcx-spin { to { transform: rotate(360deg); } }
@keyframes tcx-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tcx-blob { 0%,100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; } 33% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; } 66% { border-radius: 50% 60% 30% 60%/30% 50% 70% 50%; } }
@keyframes tcx-hue { to { filter: hue-rotate(360deg); } }
@keyframes tcx-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- base ---------- */
.tcx { position: relative; flex: 1; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--tcx-bg); background-image: var(--tcx-dot-grid); background-size: var(--tcx-dot-grid-size); color: var(--tcx-tx); font-family: var(--tcx-sans); }
.tcx *, .tcx-tools * { box-sizing: border-box; }
.tcx button, .tcx-tools button { font-family: inherit; }
.tcx .is-approved, .tcx-tools .is-approved { --s: var(--tcx-green); }
.tcx .is-in-progress, .tcx-tools .is-in-progress { --s: var(--tcx-violet); }
.tcx .is-needs-review, .tcx-tools .is-needs-review { --s: var(--tcx-red); }
.tcx .is-errors, .tcx-tools .is-errors { --s: #F59E0B; }
.tcx-ic { width: 14px; height: 14px; flex-shrink: 0; display: block; }
.tcx-ic-sm { width: 10px !important; height: 10px !important; }
.tcx-flex { flex: 1; }
.tcx-sep { width: 1px; height: 14px; background: var(--tcx-border); flex-shrink: 0; }

.tcx-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--tcx-border); background: var(--tcx-surface); color: var(--tcx-tx2); font: 600 11px var(--tcx-sans); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.tcx-btn:hover { background: var(--tcx-hover); color: var(--tcx-tx); }
.tcx-btn:disabled { opacity: .45; cursor: default; }
.tcx-btn .tcx-ic { width: 12px; height: 12px; }
.tcx-btn-accent { color: var(--tcx-violet); border-color: color-mix(in srgb, var(--tcx-violet) 30%, transparent); background: color-mix(in srgb, var(--tcx-violet) 10%, transparent); }
.tcx-btn-accent:hover { color: var(--tcx-violet); background: color-mix(in srgb, var(--tcx-violet) 16%, transparent); }

/* ---------- view switching ---------- */
.tcx-stage { position: absolute; inset: 0; transition: opacity .35s ease, transform .35s ease; }
.tcx[data-view="node"] .tcx-console, .tcx[data-view="console"] .tcx-node-stage { opacity: 0; pointer-events: none; }
.tcx[data-view="node"] .tcx-console { transform: scale(.985); }
.tcx[data-view="console"] .tcx-node-stage { transform: scale(1.03); }

.tcx-empty { position: absolute; inset: 0; z-index: 5; padding: 60px 20px; text-align: center; background: var(--tcx-bg); }
.tcx-empty-title { margin: 0 0 8px; font-size: 16px; color: var(--tcx-tx2); }
.tcx-empty-sub { margin: 0 0 20px; font-size: 13px; color: var(--tcx-tx3); }

/* ---------- summary node ---------- */
.tcx-node-stage { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--tcx-canvas); background-image: var(--tcx-dot-grid); background-size: var(--tcx-dot-grid-size); overflow: auto; }
.tcx-node { position: relative; width: 820px; max-width: 100%; }
.tcx-node-glow { position: absolute; inset: -6px; border-radius: 14px; background: linear-gradient(60deg,#7c6aef,#34d399,#60a5fa,#7c6aef); background-size: 300% 300%; filter: blur(20px); opacity: .22; animation: tcx-grad 6s ease infinite; }
body.dark-mode .tcx-node-glow, .tcx-force-dark .tcx-node-glow { opacity: .38; }
.tcx-node-frame { position: relative; border-radius: 12px; padding: 1px; background: linear-gradient(60deg,#7c6aef,#34d399,#60a5fa,#7c6aef); background-size: 300% 300%; animation: tcx-grad 6s ease infinite; }
.tcx-node-inner { border-radius: 11px; background: var(--tcx-surface); overflow: hidden; }
.tcx-node-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--tcx-border); }
.tcx-blob { width: 22px; height: 22px; flex-shrink: 0; opacity: .85; background: linear-gradient(135deg,#7c6aef,#34d399); animation: tcx-blob 3s ease-in-out infinite, tcx-hue 10s linear infinite; }
.tcx-node-title { font-weight: 700; font-size: 14px; letter-spacing: -.3px; white-space: nowrap; }
.tcx-node-job { font: 500 10px var(--tcx-mono); color: var(--tcx-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcx-alerts { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 5px; border: 0; background: none; cursor: pointer; font: 700 10px var(--tcx-mono); letter-spacing: .3px; color: var(--tcx-red); white-space: nowrap; }
.tcx-alerts:hover { background: color-mix(in srgb, var(--tcx-red) 10%, transparent); }
.tcx-alerts i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tcx-blink 1.5s ease-in-out infinite; }
.tcx-node-body { display: flex; gap: 24px; align-items: center; padding: 20px; }
.tcx-ring { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.tcx-ring-glow { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 0deg, var(--tcx-green), var(--tcx-violet), var(--tcx-red), var(--tcx-green)); filter: blur(14px); opacity: .28; animation: tcx-spin 8s linear infinite; }
.tcx-ring svg { position: relative; display: block; width: 160px; height: 160px; }
.tcx-ring-track { fill: none; stroke: var(--tcx-border); stroke-width: 9; }
.tcx-ring-seg { fill: none; stroke-width: 9; }
.tcx-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tcx-ring-center b { font: 700 32px var(--tcx-mono); letter-spacing: -1px; }
.tcx-ring-center span { font: 500 10px var(--tcx-mono); color: var(--tcx-tx3); }
.tcx-node-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tcx-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.tcx-legend span { white-space: nowrap; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tcx-tx2); }
.tcx-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--s, var(--tcx-tx3)); }
.tcx-legend b { font: 600 12px var(--tcx-mono); color: var(--tcx-tx); }
.tcx-legend em { font-style: normal; font-size: 10px; color: var(--tcx-tx3); }
.tcx-mrows { display: flex; flex-direction: column; gap: 4px; }
.tcx-mrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--tcx-border-2); background: var(--tcx-surface-2); color: var(--tcx-tx); cursor: pointer; text-align: left; }
.tcx-mrow:hover { border-color: var(--tcx-border); }
.tcx-mrow.is-alert { background: color-mix(in srgb, var(--tcx-red) 6%, transparent); border-color: color-mix(in srgb, var(--tcx-red) 20%, transparent); }
.tcx-mrow.is-ok { background: color-mix(in srgb, var(--tcx-green) 5%, transparent); border-color: color-mix(in srgb, var(--tcx-green) 16%, transparent); }
.tcx-mrow-bar { width: 3px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.tcx-mrow-name { width: 104px; font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcx-stack { flex: 1; display: flex; gap: 1px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--tcx-border); }
.tcx-stack i { background: var(--s); }
.tcx-mrow-flag { min-width: 36px; text-align: right; font: 700 9px var(--tcx-mono); color: var(--tcx-tx3); white-space: nowrap; }
.tcx-mrow.is-alert .tcx-mrow-flag { color: var(--tcx-red); }
.tcx-mrow.is-ok .tcx-mrow-flag { color: var(--tcx-green); }
.tcx-mmore { padding-left: 4px; font: 500 10px var(--tcx-mono); color: var(--tcx-tx3); }
.tcx-node-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--tcx-border); flex-wrap: wrap; }
.tcx-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.tcx-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--s) 26%, transparent); background: color-mix(in srgb, var(--s) 8%, transparent); color: var(--tcx-tx); font: 600 10px var(--tcx-mono); cursor: pointer; }
.tcx-chip:hover { background: color-mix(in srgb, var(--s) 15%, transparent); }
.tcx-chip b { color: var(--s); }
.tcx-ratio-ic { display: block; flex-shrink: 0; border: 1.5px solid currentColor; border-radius: 2px; opacity: .55; }
.tcx-progress { width: 120px; height: 4px; border-radius: 2px; background: var(--tcx-border); overflow: hidden; }
.tcx-progress i { display: block; height: 100%; border-radius: 2px; background: var(--tcx-green); }
.tcx-progress-label { font: 700 10px var(--tcx-mono); color: var(--tcx-tx3); white-space: nowrap; }
@media (max-width: 640px) { .tcx-node-body { flex-direction: column; align-items: stretch; } .tcx-ring { align-self: center; } }

/* ---------- console ---------- */
.tcx-console { display: flex; flex-direction: column; background: var(--tcx-bg); background-image: var(--tcx-dot-grid); background-size: var(--tcx-dot-grid-size); }
.tcx-console-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--tcx-border); flex-shrink: 0; }
.tcx-head-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tcx-head-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.tcx-head-ratio { padding: 2px 6px; border-radius: 4px; border: 1px solid var(--tcx-border); font: 600 10px var(--tcx-mono); color: var(--tcx-tx3); }
.tcx-head-count { white-space: nowrap; font: 500 10px var(--tcx-mono); color: var(--tcx-tx3); }
.tcx-pill { --s: var(--tcx-violet); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--s) 26%, transparent); background: color-mix(in srgb, var(--s) 10%, transparent); color: var(--s); font: 600 10px var(--tcx-sans); cursor: pointer; }
.tcx-pill .tcx-ic { width: 10px; height: 10px; }
.tcx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.tcx-group { margin-bottom: 28px; }
.tcx-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tcx-group-head i { width: 3px; height: 14px; border-radius: 2px; background: var(--m); }
.tcx-group-head span { font: 600 11px var(--tcx-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--tcx-tx); }
.tcx-group-head hr { flex: 1; height: 1px; margin: 0; border: 0; background: var(--tcx-border); }
.tcx-group-head em { font: 500 10px var(--tcx-mono); font-style: normal; color: var(--tcx-tx3); }
.tcx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; isolation: isolate; }
.tcx-none { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; color: var(--tcx-tx3); font-size: 13px; }
.tcx-none p { margin: 0; }

/* ---------- card ---------- */
.tcx-card { position: relative; border-radius: 12px; padding: 2px; background: var(--g); background-size: 300% 300%; animation: tcx-grad 4s ease infinite; }
.tcx-card.is-approved { --g: linear-gradient(60deg,#34d399,#10b981,#6ee7b7,#34d399); }
.tcx-card.is-in-progress { --g: linear-gradient(60deg,#7c6aef,#a78bfa,#60a5fa,#7c6aef); }
.tcx-card.is-needs-review { --g: linear-gradient(60deg,#ef4444,#f97316,#fb7185,#ef4444); }
.tcx-card-glow { position: absolute; inset: -6px; z-index: -1; border-radius: 18px; background: var(--g); filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tcx-card.is-needs-review .tcx-card-glow { animation: tcx-glow 3s ease-in-out infinite; }
.tcx-card.is-error { --g: linear-gradient(60deg,#F59E0B,#F97316,#FBBF24,#F59E0B); }
.tcx-card.is-error .tcx-card-glow { animation: tcx-glow 3s ease-in-out infinite; }
.tcx-card:hover .tcx-card-glow { opacity: .4; }
.tcx-card-inner { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 10px; background: var(--tcx-surface); }
.tcx-card-error { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 2px 7px; border-radius: 6px; background: rgba(245,158,11,0.9); color: #fff; font: 600 9px var(--tcx-mono); letter-spacing: 0.3px; pointer-events: none; }
.tcx-card-strip { height: 3px; border-radius: 10px 10px 0 0; flex-shrink: 0; }
.tcx-thumb { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--tcx-thumb); color: var(--tcx-tx3); cursor: pointer; }
.tcx-card-inner > .tcx-thumb:first-child { border-radius: 10px 10px 0 0; }
.tcx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tcx-thumb-ph .tcx-ic { width: 28px; height: 28px; opacity: .5; }
.tcx-thumb-fmt { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font: 700 9px var(--tcx-mono); letter-spacing: .3px; }
.tcx-thumb-play { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); color: #fff; opacity: 0; transform: scale(.9); transition: opacity .18s, transform .18s; }
.tcx-thumb-play .tcx-ic { width: 16px; height: 16px; margin-left: 2px; }
.tcx-thumb:hover .tcx-thumb-play { opacity: 1; transform: scale(1); }
.tcx-thumb.is-loading .tcx-thumb-play { opacity: .5; transform: scale(1); animation: tcx-pulse 1.8s ease-in-out infinite; }
@keyframes tcx-pulse { 0%,100% { opacity: .35; } 50% { opacity: .65; } }
.tcx-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--tcx-border-2); }
.tcx-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tcx-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px var(--tcx-mono); color: var(--tcx-id); }
.tcx-meta { margin-top: -2px; font: 500 10px var(--tcx-mono); letter-spacing: .3px; text-transform: uppercase; color: var(--tcx-tx3); }
.tcx-lines { display: flex; flex-direction: column; gap: 2px; }
.tcx-line { display: flex; gap: 6px; min-width: 0; font-size: 10.5px; color: var(--tcx-tx2); }
.tcx-line i { width: 10px; flex-shrink: 0; font-style: normal; text-align: center; }
.tcx-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-line.is-ok i { color: var(--tcx-green); }
.tcx-line.is-warn, .tcx-line.is-warn i { color: var(--tcx-red); }
.tcx-line.is-none { color: var(--tcx-tx3); }
.tcx-studio-pill { align-self: flex-start; padding: 2px 8px; border-radius: 10px; font: 600 9.5px var(--tcx-sans); color: var(--tcx-violet); background: color-mix(in srgb, var(--tcx-violet) 11%, transparent); }
.tcx-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; }
.tcx-act { flex: 1 1 0; min-width: 64px; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--tcx-border); background: var(--tcx-surface-2); color: var(--tcx-tx2); font: 500 10.5px var(--tcx-sans); white-space: nowrap; cursor: pointer; }
.tcx-act:hover { background: var(--tcx-hover); color: var(--tcx-tx); }
.tcx-act-preview { color: var(--tcx-blue); border-color: rgba(59,102,241,.24); background: rgba(59,102,241,.08); }
.tcx-act-edit-text, .tcx-act-studio { color: var(--tcx-violet); border-color: color-mix(in srgb, var(--tcx-violet) 26%, transparent); background: color-mix(in srgb, var(--tcx-violet) 8%, transparent); }
.tcx-act-preview:hover { color: var(--tcx-blue); background: rgba(59,102,241,.14); }
.tcx-act-edit-text:hover, .tcx-act-studio:hover { color: var(--tcx-violet); background: color-mix(in srgb, var(--tcx-violet) 14%, transparent); }

/* ---------- status control (cards + player) ---------- */
.tcx-status { position: relative; flex-shrink: 0; }
.tcx-status.is-open { z-index: 60; }
.tcx-status-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 11px; border: 0; background: color-mix(in srgb, var(--s) 14%, transparent); color: var(--s); font: 600 10px var(--tcx-sans); white-space: nowrap; cursor: pointer; }
.tcx-status-badge:hover { background: color-mix(in srgb, var(--s) 22%, transparent); }
.tcx-status-badge .tcx-ic { width: 9px; height: 9px; }
.tcx-status-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; width: 150px; padding: 4px; border-radius: 8px; border: 1px solid var(--tcx-border); background: var(--tcx-pop); box-shadow: var(--tcx-shadow); backdrop-filter: blur(16px); }
.tcx-status.is-open .tcx-status-menu { display: block; }
.tcx-status-opt { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 9px; border: 0; border-radius: 5px; background: none; color: var(--s); font: 500 11px var(--tcx-sans); text-align: left; cursor: pointer; }
.tcx-status-opt:hover { background: var(--tcx-hover); }
.tcx-status-opt i { width: 7px; height: 7px; border-radius: 50%; background: var(--s); flex-shrink: 0; }
.tcx-status-opt .tcx-ic { width: 11px; height: 11px; margin-left: auto; }

/* ---------- bottom bar ---------- */
.tcx-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--tcx-border); background: color-mix(in srgb, var(--tcx-surface) 82%, transparent); backdrop-filter: blur(12px); flex-shrink: 0; }
.tcx-bottom-left, .tcx-bottom-right { display: flex; align-items: center; gap: 10px; }
.tcx-summary { margin: 0; white-space: nowrap; font: 500 10px var(--tcx-mono); letter-spacing: .3px; color: var(--tcx-tx3); }
.tcx-hint { font-size: 11px; color: var(--tcx-tx3); white-space: nowrap; }
.tcx .tcx-share { color: var(--tcx-blue); border-color: rgba(59,102,241,.26); background: rgba(59,102,241,.08); }
.tcx .tcx-share:hover { color: var(--tcx-blue); background: rgba(59,102,241,.14); }
.tcx .tcx-confirm { white-space: nowrap; position: relative; isolation: isolate; height: 30px; padding: 0 14px; border-radius: 7px; border: 0; background: linear-gradient(45deg,#0ce39a,#69007f,#fc0987); color: var(--tcx-tx); font: 600 11px var(--tcx-sans); cursor: pointer; }
.tcx .tcx-confirm::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 6px; background: var(--tcx-surface); transition: opacity .15s; }
.tcx .tcx-confirm:hover::before { opacity: .88; }

/* ---------- tools sidebar (renders into existing #titles-tools-mount) ---------- */
.tcx-tools { display: flex; flex-direction: column; gap: 16px; color: var(--tcx-tx); font-family: var(--tcx-sans); }
.tcx-tools-sec { display: flex; flex-direction: column; gap: 2px; }
.tcx-tools-label { margin-bottom: 6px; font: 700 9px var(--tcx-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--tcx-tx3); }
.tcx-tools-search { position: relative; }
.tcx-tools-search .tcx-ic { position: absolute; left: 9px; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--tcx-tx3); pointer-events: none; }
.tcx-tools-input { width: 100%; height: 32px; padding: 0 10px 0 28px; border-radius: 7px; border: 1px solid var(--tcx-border); background: var(--tcx-surface-2); color: var(--tcx-tx); font: 400 12px var(--tcx-sans); outline: none; transition: border-color .15s, box-shadow .15s; }
.tcx-tools-input::placeholder { color: var(--tcx-tx3); }
.tcx-tools-input:focus { border-color: color-mix(in srgb, var(--tcx-violet) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcx-violet) 16%, transparent); }
.tcx-tools-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 5px 9px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--tcx-tx2); font: 500 12px var(--tcx-sans); text-align: left; cursor: pointer; }
.tcx-tools-row:hover { background: var(--tcx-hover); color: var(--tcx-tx); }
.tcx-tools-row.is-active { background: var(--tcx-active); border-color: var(--tcx-border); color: var(--tcx-tx); }
.tcx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s); flex-shrink: 0; }
.tcx-tools-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcx-tools-count { margin-left: auto; font: 500 10px var(--tcx-mono); color: var(--tcx-tx3); }
.tcx-ratio-box { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tcx-tx2); }
.tcx-tools-row.is-active .tcx-ratio-ic { opacity: 1; color: var(--tcx-violet); }
.tcx-ratio-ic.is-all { border-style: dashed; }
.tcx-tools-ratio-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tcx-tools-ratio-txt b { font-size: 12px; font-weight: 600; }
.tcx-tools-ratio-txt em { font: 500 9.5px var(--tcx-mono); font-style: normal; color: var(--tcx-tx3); }
.tcx-tools-flag { padding: 1px 6px; border-radius: 8px; background: var(--tcx-red); color: #fff; font: 700 9px var(--tcx-mono); }
.tcx-tools-stats { padding-top: 12px; border-top: 1px solid var(--tcx-border); font: 500 10px var(--tcx-mono); color: var(--tcx-tx3); }

/* ---------- full-screen player (appended to <body>) ---------- */
body.tcx-player-open { overflow: hidden; }
.tcx.tcx-player { position: fixed; inset: 0; z-index: 100000; height: auto; display: flex; flex-direction: column; background: rgba(6,6,10,.94); backdrop-filter: blur(24px); color: #fff; animation: tcx-in .2s ease; }
.tcx-player-top { display: flex; align-items: center; gap: 10px; padding: 12px 20px; flex-shrink: 0; }
.tcx-pbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; font: 600 11px var(--tcx-sans); white-space: nowrap; cursor: pointer; }
.tcx-pbtn:hover { background: rgba(255,255,255,.12); }
.tcx-pbtn:disabled { opacity: .35; cursor: default; }
.tcx-pbtn .tcx-ic { width: 13px; height: 13px; }
.tcx-pbtn-ic { width: 32px; padding: 0; justify-content: center; }
.tcx-pbtn-round { border-radius: 50%; }
.tcx-pbtn-approve { color: var(--tcx-green); border-color: color-mix(in srgb, var(--tcx-green) 32%, transparent); background: color-mix(in srgb, var(--tcx-green) 12%, transparent); }
.tcx-pbtn-approve:hover { background: color-mix(in srgb, var(--tcx-green) 20%, transparent); }
.tcx-player-id { font: 700 14px var(--tcx-mono); color: var(--tcx-id); white-space: nowrap; }
.tcx-player-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px var(--tcx-mono); color: rgba(255,255,255,.5); }
.tcx-player-pos { font: 500 10px var(--tcx-mono); color: rgba(255,255,255,.5); white-space: nowrap; }
.tcx-player .tcx-status-badge { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 11px; }
.tcx-player-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 48px; }
.tcx-player-col { display: flex; flex-direction: column; }
.tcx-player-frame { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.08); border-bottom: 0; border-radius: 12px 12px 0 0; }
.tcx-player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.tcx-player-frame:fullscreen { border-radius: 0; border: 0; }
.tcx-player-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.45); font: 500 11px var(--tcx-mono); }
.tcx-player-empty .tcx-ic { width: 32px; height: 32px; }
.tcx-player-fmt { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.6); color: rgba(255,255,255,.8); font: 600 10px var(--tcx-mono); pointer-events: none; }
.tcx-player-big { position: relative; z-index: 2; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.5); backdrop-filter: blur(12px); color: #fff; cursor: pointer; transition: transform .15s, opacity .2s; }
.tcx-player-big:hover { transform: scale(1.06); }
.tcx-player-big .tcx-ic { width: 26px; height: 26px; margin-left: 3px; }
.tcx-player.is-playing .tcx-player-big { opacity: 0; pointer-events: none; }
.tcx-transport { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.08); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(255,255,255,.04); }
.tcx-transport.is-disabled { opacity: .4; pointer-events: none; }
.tcx-tbtn { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.tcx-tbtn:hover { background: rgba(255,255,255,.15); }
.tcx-tbtn .tcx-ic { width: 14px; height: 14px; }
.tcx-when-playing, .tcx-when-muted { display: none; }
.tcx-player.is-playing .tcx-when-paused, .tcx-player.is-muted .tcx-when-sound { display: none; }
.tcx-player.is-playing .tcx-when-playing, .tcx-player.is-muted .tcx-when-muted { display: block; }
.tcx-scrub { flex: 1; height: 4px; margin: 0; border-radius: 2px; -webkit-appearance: none; appearance: none; cursor: pointer; background: linear-gradient(90deg,#7c6aef,#34d399) 0 0 / var(--p, 0%) 100% no-repeat, rgba(255,255,255,.14); }
.tcx-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; border: 0; background: #fff; }
.tcx-scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 0; background: #fff; }
.tcx-time { min-width: 92px; text-align: right; font: 500 11px var(--tcx-mono); color: rgba(255,255,255,.6); white-space: nowrap; }
.tcx-player-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; flex-shrink: 0; }
@media (max-width: 720px) { .tcx-player-stage { padding: 0 12px; } .tcx-player-meta, .tcx-player-pos { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tcx *, .tcx-tools * { animation: none !important; transition: none !important; }
}