@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --bg: #e7eef5;
  --panel: #f7f9fc;
  --surface: #f7f9fc;
  --ink: #101828;
  --muted: #526174;
  --line: #cdd8e5;
  --accent: #00897f;
  --accent-2: #2557d6;
  --risk: #d92d5c;
  --warn: #c77700;
  --soft: #eef5f8;
  --hover: #e7f1f8;
  --body-bg:
    radial-gradient(circle at 16% -12%, rgba(37, 87, 214, .20), transparent 31%),
    radial-gradient(circle at 86% 2%, rgba(0, 137, 127, .22), transparent 30%),
    linear-gradient(180deg, #f5f9fc 0%, var(--bg) 62%, #dce7f1 100%);
  --panel-bg: linear-gradient(180deg, rgba(247, 249, 252, .98), rgba(238, 245, 250, .96));
  --field-bg: #f7f9fc;
  --ghost-bg: linear-gradient(180deg, #f7f9fc, #e7f1f8);
  --card-bg: linear-gradient(180deg, #f7f9fc, #eaf3f9);
  --table-head-bg: #e4edf6;
  --table-row-alt: rgba(37, 87, 214, .035);
  --shadow: 0 16px 38px rgba(18, 35, 61, .105);
  --shadow-strong: 0 26px 60px rgba(16, 24, 40, .24);
  --ring: 0 0 0 3px rgba(37, 87, 214, .17);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1b2a;
  --panel: #112236;
  --surface: #112236;
  --ink: #d6e4f0;
  --muted: #89a6ba;
  --line: #1e3a52;
  --accent: #00e5c7;
  --accent-2: #56ccf2;
  --risk: #ff5c7a;
  --warn: #ffd740;
  --soft: #16304a;
  --hover: #16304a;
  --body-bg:
    radial-gradient(circle at 16% -12%, rgba(86, 204, 242, .16), transparent 31%),
    radial-gradient(circle at 86% 2%, rgba(199, 125, 255, .14), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #0d1b2a 62%, #081220 100%);
  --panel-bg: linear-gradient(180deg, rgba(17, 34, 54, .96), rgba(13, 27, 42, .98));
  --field-bg: #0f2035;
  --ghost-bg: linear-gradient(180deg, #14283f, #0f2035);
  --card-bg: linear-gradient(180deg, #112236, #0d1b2a);
  --table-head-bg: #0f2035;
  --table-row-alt: rgba(86, 204, 242, .04);
  --shadow: 0 16px 38px rgba(0, 0, 0, .30);
  --shadow-strong: 0 26px 60px rgba(0, 0, 0, .50);
  --ring: 0 0 0 3px rgba(86, 204, 242, .20);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  background:
    radial-gradient(circle at 50% -8%, rgba(0, 193, 174, .28), transparent 38%),
    radial-gradient(circle at 10% 90%, rgba(37, 87, 214, .12), transparent 40%),
    linear-gradient(180deg, #0c1932 0%, #060e1c 100%);
  color: #f9fafb;
  padding: 16px 12px;
  box-shadow: 10px 0 40px rgba(10, 18, 40, .22);
  display: flex;
  flex-direction: column;
  z-index: 200;
}

.brand {
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 52px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(125, 249, 232, .14);
  flex-shrink: 0;
}
.brand-logo { width: 100%; max-width: 160px; height: auto; object-fit: contain; }

.mobile-menu-toggle {
  display: none;
}

/* ── Sidebar navigation ─────────────────────────────────── */

.sidebar-version {
  font-size: 10px;
  color: rgba(255,255,255,.22);
  text-align: center;
  padding: 10px 0 2px;
  letter-spacing: .4px;
  flex-shrink: 0;
  user-select: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-group {
  margin-bottom: 8px;
}

.nav-group-label {
  display: block;
  padding: 8px 10px 4px;
  color: rgba(0, 193, 174, .52);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #8db4ce;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-left: 3px solid transparent;
  transition: background .17s ease, color .17s ease, border-color .17s ease;
  cursor: pointer;
}

.nav-item:hover {
  background: rgba(0, 193, 178, .10);
  color: #d4eef8;
  border-left-color: rgba(0, 193, 178, .35);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(0, 193, 178, .18), rgba(0, 193, 178, .06));
  color: #fff;
  border-left-color: #00c1ae;
  font-weight: 700;
}

.nav-icon {
  font-size: 15px;
  line-height: 1;
  flex: 0 0 20px;
  text-align: center;
  opacity: .88;
}

.nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}

.shell {
  margin-left: 220px;
  padding: 18px 20px 24px;
  min-height: 100vh;
}

/* ── Section routing animations ─────────────────────────── */

.section-enter {
  animation: sectionFadeIn .28s cubic-bezier(.22, .68, 0, 1.08) both;
}

@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── API Usage page ──────────────────────────────────────── */

.api-usage-section {
  max-width: 780px;
}

.byoa-banner {
  display: flex;
  gap: 14px;
  background: linear-gradient(135deg, rgba(37,87,214,.06), rgba(0,137,127,.05));
  border: 1px solid rgba(37,87,214,.18);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.byoa-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.byoa-body { flex: 1; }
.byoa-body strong { font-size: 14px; color: var(--ink); display: block; margin-bottom: 8px; }
.byoa-body p { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.byoa-body p:last-child { margin-bottom: 0; }
.byoa-note { color: var(--accent) !important; font-size: 12.5px !important; }

.api-keys-guide {
  margin-top: 32px;
}
.api-keys-guide-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}
.api-key-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px 14px;
  margin-bottom: 14px;
}
.api-key-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.api-key-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .4px;
}
.api-key-badge.yt   { background: #ff0000; color: #fff; }
.api-key-badge.gemini { background: #1a73e8; color: #fff; }
.api-key-steps {
  margin: 0 0 10px 18px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
}
.api-key-steps a {
  color: var(--accent-2);
  text-decoration: none;
}
.api-key-steps a:hover { text-decoration: underline; }
.api-key-steps code {
  background: var(--soft);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
}
.api-key-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.api-key-video {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-2);
  text-decoration: none;
}
.api-key-video:hover { text-decoration: underline; }

.api-usage-section .panel-head {
  margin-bottom: 18px;
}

.api-usage-section .panel-head small {
  color: var(--muted);
  font-size: 12px;
}

.api-usage-section .usage-grid {
  margin-bottom: 0;
}

/* ── Inicio / Dashboard home section ─────────────────────── */

.inicio-header {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 137, 127, .18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 193, 178, .12), transparent 42%),
    linear-gradient(135deg, #fafcff, #eef5fb);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.inicio-header h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.inicio-header p {
  color: var(--muted);
  line-height: 1.4;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 8px 0 6px;
  border-bottom: 1px solid rgba(205, 216, 229, .50);
}
.topbar-left {
  display: flex;
  align-items: center;
}
.topbar-center { display: none; }
.topbar-logo   { display: none; }

h1, h2, p { margin: 0; }
h1 {
  font-size: 29px;
  letter-spacing: -.01em;
  font-weight: 750;
}
h2 {
  font-size: 16px;
  letter-spacing: -.005em;
  font-weight: 750;
}
p, span, td, th { font-size: 13px; }

#status {
  color: var(--muted);
  margin-top: 4px;
}

button, select, input {
  height: 38px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--field-bg);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
}

button {
  background: linear-gradient(180deg, #00a99d, var(--accent));
  color: #fff;
  border-color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 9px 20px rgba(0, 137, 127, .28);
}

button.ghost {
  background: var(--ghost-bg);
  color: var(--accent-2);
  border-color: var(--line);
  box-shadow: none;
}

button:hover:not(:disabled) {
  filter: brightness(.99);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 137, 127, .30);
}
button.ghost:hover:not(:disabled) {
  color: var(--accent-2);
  border-color: rgba(37, 87, 214, .32);
  box-shadow: 0 8px 16px rgba(37, 87, 214, .12);
}
button:disabled { opacity: .6; cursor: wait; }

input:focus,
select:focus {
  border-color: rgba(37, 87, 214, .62);
  box-shadow: var(--ring);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.metric, .panel, .usage-card, .table-panel, .video-panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
  display: grid;
  gap: 8px;
  position: relative;
  overflow: hidden;
  border-top: 0;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #00a99d, #2557d6);
}

.metric span, .usage-card span { color: var(--muted); }
.metric strong {
  font-size: 27px;
  letter-spacing: .2px;
  font-weight: 800;
  color: var(--ink);
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.usage-card {
  padding: 14px;
  min-width: 0;
}

.usage-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.usage-head > div {
  display: grid;
  gap: 4px;
}

.usage-head strong {
  color: var(--ink);
  font-size: 17px;
}

.usage-percent,
.usage-plan {
  display: inline-flex;
  min-width: 48px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #dce8ff;
  color: var(--accent-2) !important;
  font-size: 12px;
  font-weight: 750;
}

.quota-bar {
  height: 12px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

#quotaFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2557d6, #00a99d);
  transition: background 0.4s, width 0.4s;
}
#quotaFill[data-level="warn"] {
  background: linear-gradient(90deg, #e67e00, #f0c040);
}
#quotaFill[data-level="danger"] {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  animation: quotaPulse 1.4s ease-in-out infinite;
}
@keyframes quotaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.quota-alert {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  display: none;
}
.quota-alert.warn {
  display: block;
  background: #fff3cd;
  color: #7a4f00;
  border: 1px solid #ffe080;
}
.quota-alert.danger {
  display: block;
  background: #fde8e8;
  color: #8b1a1a;
  border: 1px solid #f5b7b7;
}
/* Mine section quota warning */
.mine-quota-warning {
  display: none;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  background: #fde8e8;
  color: #8b1a1a;
  border: 1px solid #f5b7b7;
}
.mine-quota-warning.visible { display: block; }

/* ── Mining Overlay (bloquea toda la UI mientras se mina) ─────────────── */
.mining-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 14, 28, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mining-overlay-card {
  background: linear-gradient(145deg, #0e1f3d 0%, #0a1426 100%);
  border: 1px solid rgba(88, 101, 242, .35);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(88,101,242,.12);
  padding: 44px 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.mining-overlay-spinner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(88,101,242,.2);
  border-top-color: #5865f2;
  border-right-color: #00c1ae;
  animation: spin .9s linear infinite;
  flex-shrink: 0;
}
.mining-overlay-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: -.2px;
}
.mining-overlay-counter {
  margin: 0;
  font-size: .88rem;
  color: #94a3b8;
  min-height: 1.4em;
  line-height: 1.5;
  max-width: 380px;
  word-break: break-word;
}
.mining-overlay-hint {
  margin: 0;
  font-size: .76rem;
  color: rgba(148,163,184,.55);
  letter-spacing: .1px;
}

#advisorUsageFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00897f, #2557d6);
}

.quota-methods {
  margin-top: 8px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-usage {
  color: var(--accent-2);
  font-weight: 650;
}

.panel {
  padding: 17px;
  margin-bottom: 13px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-head h2 {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

.panel-head p {
  margin-top: 2px;
  color: var(--muted);
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mini-help-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
}

.form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 24px;
}

.channel-tools {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(260px, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.target-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(120px, .8fr) minmax(120px, .6fr) minmax(120px, .6fr);
  gap: 10px;
}
.target-url-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.target-url-field input { width: 100%; }
.target-url-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

#mineStatus,
.status-line { color: var(--muted); }

.status-line {
  margin-top: 10px;
  min-height: 18px;
  font-family: Consolas, "Segoe UI", monospace;
  font-size: 12px;
}

.busy-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.1); }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(540px, 1.18fr) minmax(420px, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.table-panel, .video-panel { min-width: 0; }
.table-panel { padding: 15px; }

.table-wrap {
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
  scrollbar-color: #6b8aae #d4e1ed;
  scrollbar-width: thin;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 560px;
}

th, td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  vertical-align: top;
}

th:nth-child(1), td:nth-child(1) { width: 44px; text-align: center; }
th:nth-child(2), td:nth-child(2) { width: 94px; }
th:nth-child(3), td:nth-child(3) { width: auto; }
th:nth-child(4), td:nth-child(4) { width: 74px; }
th:nth-child(5), td:nth-child(5) { width: 68px; }
th:nth-child(6), td:nth-child(6) { width: 78px; }
th:nth-child(7), td:nth-child(7) { width: 54px; text-align: center; }
th:nth-child(8), td:nth-child(8) { width: 72px; text-align: center; }

th {
  color: var(--muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #eef5fb;
  box-shadow: inset 0 -1px 0 var(--line);
  z-index: 1;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
}

td {
  overflow-wrap: anywhere;
}

tr { cursor: pointer; }
tbody tr:nth-child(even) td { background: #f5f9fd; }
tr:hover td { background: #e6f3fb; }
tr.selected td {
  background: #d9f3ef;
  box-shadow: inset 3px 0 0 var(--accent);
}

.row-number {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #f4f8fb;
  color: #475467;
  font-size: 12px;
  font-weight: 750;
}

tr.selected .row-number {
  border-color: rgba(14, 111, 104, .35);
  background: #bff0e9;
  color: var(--accent);
}

.score100 {
  display: inline-flex;
  min-width: 42px;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #c9f2eb;
  color: var(--accent);
  font-weight: 700;
}

.signal-chip {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, #f7f9fc, #edf3f8);
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

tbody tr:hover .signal-chip,
tbody tr:hover .score100 {
  transform: translateY(-1px);
}

.video-panel { padding: 15px; }

.player-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 82%, var(--field-bg));
}

.player-toolbar span {
  color: var(--muted);
  font-weight: 600;
}

.player-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111827;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(255, 255, 255, .08);
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, .84));
}

.score-graph {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 118px;
  pointer-events: none;
}

.score-baseline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .42);
}

.score-bar {
  position: absolute;
  bottom: 0;
  width: 8px;
  min-height: 12px;
  margin-left: -4px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px 999px 2px 2px;
  background: rgba(20, 184, 166, .78);
  box-shadow: 0 0 16px rgba(20, 184, 166, .42);
  pointer-events: auto;
}

.score-bar.warm {
  background: rgba(59, 130, 246, .84);
  box-shadow: 0 0 18px rgba(59, 130, 246, .46);
}

.score-bar.hot {
  background: rgba(239, 68, 68, .9);
  box-shadow: 0 0 22px rgba(239, 68, 68, .55);
}

.score-labels {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 132px;
  height: 126px;
  pointer-events: none;
}

.overlay-chip {
  position: absolute;
  bottom: 0;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  align-items: center;
  max-width: min(220px, 34%);
  min-width: 128px;
  height: auto;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 6px;
  color: #f8fafc;
  background: rgba(15, 118, 110, .92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
  pointer-events: auto;
  transform: translateX(-50%);
}

.overlay-chip span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.overlay-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.overlay-chip em {
  font-style: normal;
  font-size: 11px;
  opacity: .88;
}

.overlay-chip.warm { background: rgba(37, 99, 235, .94); }
.overlay-chip.hot { background: rgba(220, 38, 38, .94); }

.overlay-empty {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  color: #f8fafc;
  background: rgba(17, 24, 39, .72);
}

.overlay-empty span {
  color: #d1d5db;
}

.timeline {
  position: relative;
  display: grid;
  gap: 4px;
  height: auto;
  min-height: 138px;
  margin: 12px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(15, 118, 110, .08) 0 1px, transparent 1px) 0 0 / 10% 100%,
    linear-gradient(180deg, #f7f9fc, #e9f2f8);
  overflow-x: auto;
  overflow-y: hidden;
}

.timeline-lane {
  display: grid;
  grid-template-columns: 88px minmax(520px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 17px;
}

.timeline-lane-label {
  overflow: hidden;
  color: var(--dna-color);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-lane-track {
  position: relative;
  height: 17px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .08) 0 1px, transparent 1px) 0 0 / 10% 100%,
    color-mix(in srgb, var(--dna-color) 7%, #edf4f9);
}

.marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 999px;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(15, 118, 110, .25);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  transform: translateY(-50%);
  transition: transform .15s, box-shadow .15s;
}

.marker span { pointer-events: none; }

.marker:hover,
.marker:focus-visible {
  z-index: 4;
  outline: none;
  transform: translateY(-50%) scale(1.18);
}

.moment-dna-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  margin: -3px 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.moment-dna-legend > strong { color: var(--ink); }
.dna-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.dna-legend-item i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  background: var(--dna-color);
}

:root {
  --dna-humor: #16a66a;
  --dna-controversy: #dc3545;
  --dna-surprise: #2878e8;
  --dna-emotion: #8b5cf6;
  --dna-brand: #d9a400;
  --dna-other: #64748b;
}

.dna-humor { --dna-color: var(--dna-humor); }
.dna-controversy { --dna-color: var(--dna-controversy); }
.dna-surprise { --dna-color: var(--dna-surprise); }
.dna-emotion { --dna-color: var(--dna-emotion); }
.dna-brand { --dna-color: var(--dna-brand); }
.dna-other { --dna-color: var(--dna-other); }

.marker[class*="dna-"],
.score-bar[class*="dna-"],
.overlay-chip[class*="dna-"] {
  background: var(--dna-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--dna-color) 48%, transparent);
}

.moment-summary-card[data-dna] {
  border-left: 5px solid var(--dna-color);
}

.moment-dna-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--dna-color);
  font-size: 10px;
  font-weight: 800;
  vertical-align: 2px;
}

.video-meta h2 {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-size: 18px;
}

.selected-metrics {
  color: var(--muted);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef7fb;
}

.video-insights {
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f7f9fc, #e7f2f8);
  box-shadow: 0 10px 22px rgba(16, 24, 40, .035);
}

.video-insights-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.video-insights-head h3 {
  margin: 0;
  font-size: 15px;
}

.video-insights-head span {
  color: var(--muted);
  font-weight: 600;
}

.video-kpi-bars {
  display: grid;
  gap: 8px;
}

.video-kpi-row {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(160px, 1fr) minmax(96px, .55fr);
  gap: 10px;
  align-items: center;
}

.video-kpi-insight {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.video-kpi-insight.tone-good {
  border-left-color: #0d9488;
  background: rgba(13, 148, 136, .14);
  color: #17c3b2;
}

.video-kpi-insight.tone-mid {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, .14);
  color: #f59e0b;
}

.video-kpi-insight.tone-low {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, .14);
  color: #f87171;
}

.video-kpi-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-kpi-copy strong {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.kpi-help {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid #8ba7be;
  border-radius: 999px;
  color: #31556f;
  background: #f7fbfe;
  box-shadow: none;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.kpi-help::after,
[data-tooltip]:not(.kpi-help)::after {
  position: absolute;
  z-index: 80;
  left: 50%;
  bottom: calc(100% + 9px);
  width: min(290px, 72vw);
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 8px;
  color: #f8fafc;
  background: #10233d;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .25);
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.38;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .14s, transform .14s;
}

[data-tooltip]:not(.kpi-help) { position: relative; }

.kpi-help:hover::after,
.kpi-help:focus-visible::after,
.kpi-help.is-open::after,
[data-tooltip]:not(.kpi-help):hover::after,
[data-tooltip]:not(.kpi-help):focus-visible::after,
[data-tooltip]:not(.kpi-help).is-open::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.kpi-help:hover,
.kpi-help:focus-visible,
.kpi-help.is-open {
  border-color: var(--accent-2);
  color: #fff;
  background: var(--accent-2);
  outline: none;
}

.video-kpi-copy span {
  color: var(--muted);
  line-height: 1.25;
}

.video-kpi-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f4f8fb;
  font-size: 14px;
}

.video-kpi-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .05) 0 1px, transparent 1px) 0 0 / 10% 100%,
    #d8e5ef;
}

.video-kpi-fill {
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #00c1b2);
}

.video-kpi-fill.blue {
  background: linear-gradient(90deg, var(--accent-2), #4f7cff);
}

.video-kpi-fill.warm {
  background: linear-gradient(90deg, var(--warn), #f2a900);
}

.video-kpi-fill.hot {
  background: linear-gradient(90deg, var(--risk), #ff5b7d);
}

.video-kpi-value {
  justify-self: end;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.narrative-flow-panel {
  margin-top: 12px;
  padding: 14px;
  overflow: visible;
  border: 1px solid rgba(40, 120, 232, .20);
  border-radius: 9px;
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 193, 178, .12), transparent 34%),
    linear-gradient(180deg, #fbfdff, #edf4f9);
}

.narrative-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.narrative-flow-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

.narrative-flow-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.narrative-help { margin-top: 2px; }

.narrative-help::after {
  top: calc(100% + 9px);
  right: 0;
  bottom: auto;
  left: auto;
  transform: translateY(-4px);
}

.narrative-help:hover::after,
.narrative-help:focus-visible::after,
.narrative-help.is-open::after {
  transform: translateY(0);
}

.narrative-flow-chart {
  position: relative;
  min-height: 190px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.narrative-flow-chart .empty-insight { margin: 12px; }

.narrative-flow-svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  font-family: inherit;
}

.flow-bands rect { opacity: .30; }
.flow-band-high { fill: #c8f1df; }
.flow-band-mid { fill: #fff0b8; }
.flow-band-low { fill: #ffd6d9; }

.flow-bands line {
  stroke: rgba(66, 85, 110, .13);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.flow-axis text {
  fill: #6b7c91;
  font-size: 10px;
  font-weight: 700;
}

.flow-line {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .10));
}
.flow-high { stroke: #16a66a; }
.flow-mid { stroke: #e2ad08; }
.flow-low { stroke: #dc3545; }
.flow-none {
  stroke: #94a3b8;
  stroke-width: 3;
  stroke-dasharray: 5 6;
}

.flow-marker {
  fill: var(--dna-color);
  stroke: #fff;
  stroke-width: 2.5;
  cursor: pointer;
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .26));
  transition: r .15s;
}
.flow-marker:hover,
.flow-marker:focus { r: 8; outline: none; }

.flow-annotation {
  pointer-events: none;
  color: #10243f;
}

.flow-annotation path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-dasharray: 3 4;
  opacity: .82;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .16));
}

.flow-annotation text {
  fill: currentColor;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}

.flow-annotation text tspan:not(.flow-annotation-title) {
  fill: #64748b;
  font-size: 9px;
  font-weight: 700;
}

.flow-annotation-title {
  text-transform: uppercase;
}

.flow-annotation-peak { color: #07865c; }
.flow-annotation-cold { color: #dc3545; }
.flow-annotation-rebound { color: #c58900; }

.flow-arrow-head { fill: currentColor; }
.flow-arrow-peak { fill: #07865c; }
.flow-arrow-cold { fill: #dc3545; }
.flow-arrow-rebound { fill: #c58900; }

.narrative-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}
.narrative-flow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.narrative-flow-legend i {
  width: 18px;
  height: 5px;
  border-radius: 999px;
}
.flow-legend-high i { background: #16a66a; }
.flow-legend-mid i { background: #e2ad08; }
.flow-legend-low i { background: #dc3545; }
.flow-legend-none i {
  background: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 7px);
}
.narrative-flow-legend b { font-weight: 700; }

.narrative-flow-disclaimer {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.panel-kicker {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.channel-hub-panel {
  background:
    radial-gradient(circle at top left, rgba(0, 153, 136, .10), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,250,255,.92));
}

.channel-hub-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
}

.channel-hub-content { display: grid; gap: 14px; }

.channel-pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.channel-pulse-card,
.channel-hub-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.channel-pulse-card { padding: 13px 14px; }
.channel-pulse-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.channel-pulse-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 24px;
}

.channel-hook-card {
  border: 1px solid rgba(0, 153, 136, .22);
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at top left, rgba(0, 153, 136, .12), transparent 34%),
    rgba(255, 255, 255, .82);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.channel-hook-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.channel-hook-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 16px;
}

.channel-hook-head > strong {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  color: #00695f;
  background: rgba(0, 153, 136, .12);
  font-size: 20px;
  line-height: 1;
}

.channel-hook-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.channel-hook-metrics span {
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(248, 251, 255, .74);
  font-size: 11px;
  font-weight: 800;
}

.channel-hook-metrics b {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.channel-hook-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.hook-video {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-areas:
    "time title"
    "time meta";
  gap: 2px 8px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .24);
  border-left: 4px solid #94a3b8;
  border-radius: 13px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .78);
  text-align: left;
}

.hook-video.instant { border-left-color: #10b981; }
.hook-video.early { border-left-color: #22c55e; }
.hook-video.mid { border-left-color: #eab308; }
.hook-video.late { border-left-color: #ef4444; }
.hook-video.nohook { border-left-color: #64748b; }

.hook-video i {
  grid-area: time;
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  border-radius: 10px;
  color: #064e3b;
  background: rgba(16, 185, 129, .12);
  font-style: normal;
  font-weight: 900;
  font-size: 12px;
}

.hook-video span {
  grid-area: title;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hook-video strong {
  grid-area: meta;
  color: var(--muted);
  font-size: 11px;
}

.channel-hook-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.channel-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.channel-hub-card {
  padding: 14px;
  min-height: 240px;
  overflow: hidden;
}
.channel-hub-card h3 { margin: 0 0 4px; font-size: 17px; }
.channel-hub-card p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }

.channel-signal-bars,
.clip-yield-list,
.channel-top-moments { display: grid; gap: 9px; }

.channel-signal-row {
  display: grid;
  grid-template-columns: 140px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.channel-signal-row span {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-signal-row div,
.clip-yield-list article div {
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .18);
  overflow: hidden;
}
.channel-signal-row i,
.clip-yield-list article i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--dna-color, var(--accent));
}
.channel-signal-row strong { text-align: right; color: var(--muted); }

.channel-matrix-scroll { overflow-x: auto; padding-bottom: 2px; }
.channel-matrix {
  display: block;
  width: 100%;
  min-width: 480px;
  font-family: inherit;
}
.channel-matrix .matrix-bg {
  fill: rgba(240, 249, 255, .76);
  stroke: rgba(148, 163, 184, .35);
}
.channel-matrix .matrix-zone {
  stroke: none;
  opacity: .62;
  cursor: pointer;
  transition: opacity .16s ease, filter .16s ease, stroke .16s ease, stroke-width .16s ease;
}
.channel-matrix .zone-star { fill: rgba(16, 185, 129, .10); }
.channel-matrix .zone-hook { fill: rgba(59, 130, 246, .07); }
.channel-matrix .zone-volume { fill: rgba(234, 179, 8, .08); }
.channel-matrix .zone-cold { fill: rgba(148, 163, 184, .06); }
.channel-matrix .matrix-zone:hover,
.channel-matrix .matrix-zone:focus,
.channel-matrix .matrix-zone.active {
  opacity: .9;
  stroke: rgba(15, 23, 42, .24);
  stroke-width: 1.6;
  outline: none;
  filter: drop-shadow(0 2px 7px rgba(15, 23, 42, .14));
}
.channel-matrix .matrix-axis {
  stroke: rgba(100, 116, 139, .18);
  stroke-dasharray: 4 5;
}
.channel-matrix .matrix-grid-tick line {
  stroke: rgba(100, 116, 139, .11);
  stroke-dasharray: 2 5;
}
.channel-matrix .matrix-grid-tick text {
  fill: rgba(71, 85, 105, .66);
  font-size: 8px;
  font-weight: 800;
  text-anchor: middle;
}
.channel-matrix .matrix-grid-tick.ytick text {
  text-anchor: end;
}
.channel-matrix text {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.channel-matrix .matrix-zone-label {
  fill: rgba(71, 85, 105, .46);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.channel-matrix .matrix-axis-title {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 900;
}
.channel-matrix-point {
  fill: var(--dna-color, var(--accent));
  stroke: #fff;
  stroke-width: 2;
  opacity: .92;
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .18));
}

.channel-matrix-node {
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.channel-matrix-node.dimmed {
  opacity: .22;
}

.channel-matrix-node.active {
  opacity: 1;
  transform: scale(1.22);
  filter: drop-shadow(0 9px 14px rgba(15, 23, 42, .34));
}

.channel-matrix-node.active .channel-matrix-point {
  stroke: #fff;
  stroke-width: 3.5;
}

.channel-matrix-index {
  fill: #fff !important;
  text-anchor: middle;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  pointer-events: none;
}

.channel-matrix-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 8px;
}

.channel-matrix-scale {
  margin: 7px 0 0 !important;
  color: var(--muted);
  font-size: 11px !important;
  font-weight: 700;
}

.channel-matrix-zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.channel-matrix-zone-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .24);
  color: var(--muted);
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 900;
}

.channel-matrix-zone-legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .7);
}

.channel-matrix-zone-legend .zone-star::before { background: #10b981; }
.channel-matrix-zone-legend .zone-hook::before { background: #3b82f6; }
.channel-matrix-zone-legend .zone-volume::before { background: #eab308; }
.channel-matrix-zone-legend .zone-cold::before { background: #64748b; }

.channel-matrix-action {
  margin-top: 8px;
}

.matrix-action-card {
  border: 1px solid rgba(148, 163, 184, .24);
  border-left: 4px solid rgba(100, 116, 139, .45);
  border-radius: 13px;
  padding: 10px 12px;
  background: rgba(248, 251, 255, .82);
}

.matrix-action-card.star {
  border-left-color: #10b981;
  background: rgba(209, 250, 229, .40);
}

.matrix-action-card.hook {
  border-left-color: #3b82f6;
  background: rgba(219, 234, 254, .42);
}

.matrix-action-card.volume {
  border-left-color: #eab308;
  background: rgba(254, 249, 195, .42);
}

.matrix-action-card.cold {
  border-left-color: #64748b;
  background: rgba(241, 245, 249, .78);
}

.matrix-action-card strong,
.matrix-action-card p,
.matrix-action-card span {
  display: block;
}

.matrix-action-card strong {
  color: var(--ink);
  font-size: 13px;
}

.matrix-action-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matrix-action-card span {
  margin-top: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.channel-matrix-key button {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  border: 1px solid transparent;
  border-left: 4px solid rgba(100, 116, 139, .42);
  border-radius: 999px;
  padding: 3px 7px 3px 3px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
}

.channel-matrix-key button.zone-star {
  border-left-color: #10b981;
  background: rgba(209, 250, 229, .32);
}

.channel-matrix-key button.zone-hook {
  border-left-color: #3b82f6;
  background: rgba(219, 234, 254, .34);
}

.channel-matrix-key button.zone-volume {
  border-left-color: #eab308;
  background: rgba(254, 249, 195, .36);
}

.channel-matrix-key button.zone-cold {
  border-left-color: #64748b;
  background: rgba(241, 245, 249, .72);
}

.channel-matrix-key button:hover,
.channel-matrix-key button:focus,
.channel-matrix-key button.active {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(148, 163, 184, .34);
  color: var(--ink);
  outline: none;
  transform: translateX(2px);
}

.channel-matrix-key button.dimmed {
  opacity: .38;
}

.channel-matrix-key .matrix-key-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-matrix-key .matrix-key-coord {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.channel-matrix-key i {
  display: inline-grid;
  place-items: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--dna-color, var(--accent));
  color: #fff;
  font-style: normal;
  font-size: 10px;
  box-shadow: 0 3px 7px rgba(15, 23, 42, .14);
}

.channel-matrix-notes {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.channel-matrix-notes article {
  border: 1px solid rgba(148, 163, 184, .25);
  border-left: 4px solid rgba(100, 116, 139, .45);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(248, 251, 255, .78);
}

.channel-matrix-notes article.good {
  border-left-color: #10b981;
  background: rgba(209, 250, 229, .38);
}

.channel-matrix-notes article.watch {
  border-left-color: #eab308;
  background: rgba(254, 249, 195, .38);
}

.channel-matrix-notes article.risk {
  border-left-color: #ef4444;
  background: rgba(254, 226, 226, .34);
}

.channel-matrix-notes strong,
.channel-matrix-notes span {
  display: block;
}

.channel-matrix-notes strong {
  color: var(--ink);
  font-size: 12px;
}

.channel-matrix-notes span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.clip-yield-list article,
.channel-top-moments article {
  border: 1px solid rgba(148, 163, 184, .25);
  border-left: 4px solid var(--dna-color, var(--accent));
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(248, 251, 255, .76);
}
.clip-yield-list article strong,
.channel-top-moments article strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}
.clip-yield-list article span,
.channel-top-moments article p,
.channel-top-moments article small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.channel-top-moments article strong span {
  color: var(--dna-color, var(--accent));
  font-size: 11px;
}

.channel-advisor-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(0, 153, 136, .28);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(230, 255, 250, .74), rgba(255, 255, 255, .84));
}

.channel-advisor-meta {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 153, 136, .08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.empty-insight {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--soft);
}

.emoji-strip,
.emoji-summary div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.emoji-strip {
  margin-top: 10px;
}

.emoji-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.emoji-summary strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.emoji-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, #f7f9fc, #e7f2f8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.emoji-chip strong {
  font-size: 18px;
  line-height: 1;
}

.emoji-chip em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.emoji-empty {
  color: var(--muted);
  font-size: 13px;
}

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  margin-bottom: 13px;
}

.insight-panel {
  display: flex;
  flex-direction: column;
  height: 700px;
  min-width: 0;
  margin-bottom: 0;
}

.moments-list,
.comments-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.moments-selector-bar {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.moments-selector-bar select { flex: 1; min-width: 160px; }
#momentsStatus { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

.insight-panel .moments-list,
.insight-panel .comments-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 3px;
  scrollbar-color: #6b8aae #d4e1ed;
  scrollbar-width: thin;
}

.moment-card,
.comment-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--card-bg);
  box-shadow: 0 8px 18px rgba(16, 24, 40, .04);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}

.moment-card:hover,
.comment-card:hover {
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}

.moment-card:active,
.comment-card:active {
  transform: scale(0.98);
}

/* Active (clicked) card */
.moment-card.mc-active,
.comment-card.mc-active {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, #e8efff, #d8e6ff);
  box-shadow: 0 0 0 2px rgba(37, 87, 214, .22), 0 12px 24px rgba(37, 87, 214, .10);
}

/* Linked (matching) card — glows and pulses */
.moment-card.mc-linked,
.comment-card.mc-linked {
  border-color: var(--accent);
  background: linear-gradient(180deg, #d4f5ee, #c2f0e7);
  box-shadow: 0 0 0 2px rgba(0, 137, 127, .28), 0 14px 28px rgba(0, 137, 127, .13);
  animation: mc-pulse .42s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes mc-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.022); }
  100% { transform: scale(1); }
}

.moment-card strong,
.comment-card strong { display: block; margin-bottom: 6px; }

.like-icon {
  display: inline-block;
  margin-right: 5px;
  font-size: 18px;
  line-height: 1;
  vertical-align: -2px;
}

.moment-card p,
.comment-card p { color: var(--muted); line-height: 1.35; }

.compact-btn {
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
}

.comments-filter-status {
  margin: -2px 0 10px;
  padding: 7px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.moment-summary-card {
  display: grid;
  gap: 8px;
}

.moment-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.moment-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moment-share-btn {
  padding: 3px 7px;
  min-width: auto;
  font-size: 0.8rem;
}

:root[data-theme="dark"] #moments {
  position: relative;
  padding: 1.25rem;
  border: 1px solid rgba(86,204,242,.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(86,204,242,.14), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(199,125,255,.12), transparent 32%),
    linear-gradient(180deg, #0c1932 0%, #060e1c 100%);
  color: var(--ink);
}

:root[data-theme="dark"] #moments .moments-selector-bar {
  padding: 10px;
  border: 1px solid rgba(86,204,242,.16);
  border-radius: 12px;
  background: rgba(17,34,54,.72);
}

:root[data-theme="dark"] #moments .insight-panel {
  border-color: rgba(86,204,242,.18);
  background: rgba(17,34,54,.86);
  box-shadow: 0 18px 38px rgba(0,0,0,.24);
}

:root[data-theme="dark"] #moments .panel-head h2 {
  color: #d6e4f0;
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
}

:root[data-theme="dark"] #moments .moment-card,
:root[data-theme="dark"] #moments .comment-card {
  border-color: rgba(86,204,242,.16);
  background: linear-gradient(180deg, rgba(17,34,54,.94), rgba(13,27,42,.98));
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

:root[data-theme="dark"] #moments .moment-card strong,
:root[data-theme="dark"] #moments .comment-card strong {
  color: #f2f7fb;
}

:root[data-theme="dark"] #moments .moment-card p,
:root[data-theme="dark"] #moments .comment-card p {
  color: #a9bfd1;
}

:root[data-theme="dark"] #moments .moment-card:hover,
:root[data-theme="dark"] #moments .comment-card:hover {
  border-color: rgba(86,204,242,.38);
  box-shadow: 0 16px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(86,204,242,.10);
}

:root[data-theme="dark"] #moments .moment-card.mc-active,
:root[data-theme="dark"] #moments .comment-card.mc-active {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(86,204,242,.16), rgba(17,34,54,.96));
  box-shadow: 0 0 0 2px rgba(86,204,242,.20), 0 14px 28px rgba(0,0,0,.28);
}

:root[data-theme="dark"] #moments .moment-card.mc-linked,
:root[data-theme="dark"] #moments .comment-card.mc-linked {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(0,229,199,.16), rgba(17,34,54,.96));
  box-shadow: 0 0 0 2px rgba(0,229,199,.24), 0 14px 28px rgba(0,0,0,.30);
}

:root[data-theme="dark"] #moments .comments-filter-status {
  border: 1px solid rgba(0,229,199,.22);
  background: rgba(0,229,199,.10);
}

.share-modal-card {
  width: min(820px, calc(100vw - 32px));
  max-width: 820px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  gap: 16px;
}

.share-room-heading,
.share-existing-head,
.share-room-row-title,
.share-created-link-row,
.share-pin-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-room-heading,
.share-existing-head,
.share-room-row-title {
  justify-content: space-between;
}

.share-room-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.share-security-badge,
.share-room-state {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .7rem;
  font-weight: 800;
}

.share-security-badge {
  background: #e6f7f4;
  color: #007f75;
}

.share-scope-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 87, 214, .18);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(37, 87, 214, .07), rgba(0, 137, 127, .06));
}

.share-scope-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.share-step-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  font-weight: 800;
}

.share-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.share-field {
  display: grid;
  align-content: start;
  gap: 7px;
}

.share-field-wide { grid-column: 1 / -1; }
.share-recipient-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.share-email-input { min-height: 38px; line-height: 1.45; }
.share-recipient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 46px;
  max-height: 136px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--field-bg);
}
.share-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 5px 0 10px;
  border: 1px solid rgba(0, 137, 127, .25);
  border-radius: 999px;
  background: #e6f7f4;
  color: #006e66;
}
.share-recipient-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-recipient-chip button {
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: rgba(0, 110, 102, .12);
  color: #006e66;
  line-height: 1;
}
.share-recipient-empty {
  align-self: center;
  color: var(--muted);
  font-size: .78rem;
}
.share-pin-row { align-items: stretch; }
.share-pin-input { letter-spacing: .35em; font-weight: 800; font-size: 1rem; }
.share-generate-pin { flex: 0 0 auto; }

.share-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.share-sections legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.share-sections label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: .8rem;
}

.share-sections input { accent-color: var(--accent-2); }

.share-status {
  min-height: 18px;
  margin: -4px 0 0;
  font-size: .8rem;
}

.share-status.success { color: #007f75; }
.share-status.warning { color: var(--warn); }
.share-status.error { color: var(--risk); }

.share-created-result {
  padding: 12px;
  border: 1px solid rgba(0, 137, 127, .3);
  border-radius: 10px;
  background: #effbf8;
}

.share-created-result[hidden] { display: none; }
.share-created-result p { margin: 3px 0 10px; color: var(--muted); font-size: .78rem; }
.share-created-link-row .modal-input { min-width: 0; }
.share-created-link-row button { flex: 0 0 auto; }

.share-created-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 137, 127, .2);
}

.share-created-pin-row small { display: block; color: var(--muted); }
.share-created-pin-row strong { font-size: 1.15rem; letter-spacing: .25em; }

.share-existing-head {
  margin-top: .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.share-existing-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 400;
}

.share-existing-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.share-existing-actions select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  background: rgba(255,255,255,.78);
  color: var(--ink);
}

.share-links-list {
  display: grid;
  gap: 8px;
  max-height: 250px;
  overflow: auto;
  padding-right: 3px;
}

.share-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.share-room-row-main { min-width: 0; }
.share-room-row-title { justify-content: flex-start; }
.share-room-row-title strong { overflow-wrap: anywhere; }
.share-link-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-link-row.inactive { opacity: .58; }
.share-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.share-add-recipient-panel {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.share-worklog-panel {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--line);
}
.share-room-recipients-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.62);
}
.share-room-recipients-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
}
.share-room-recipients-head small { color: var(--muted); }
.share-room-recipients-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}
.share-room-recipient-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #00897f;
  border-radius: 10px;
  background: var(--soft);
}
.share-room-recipient-row.revoked {
  opacity: .62;
  border-left-color: #94a3b8;
}
.share-room-recipient-row small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
.worklog-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.worklog-form-grid textarea { grid-column: 1 / 3; }
.agreements-list { display: grid; gap: 8px; max-height: 280px; overflow: auto; margin: 10px 0; }
.agreement-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: var(--soft);
}
.agreement-row.status-completed { border-left-color: #2563eb; }
.agreement-row.status-approved { border-left-color: #00897f; }
.agreement-row.status-rejected { border-left-color: #ef4444; }
.agreement-row small { display: block; color: var(--muted); margin-top: 3px; }
.agreement-row p { margin-top: 5px; color: var(--muted); }
.agreement-status-select { min-width: 120px; align-self: start; }
.worklog-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 700px) {
  .worklog-form-grid { grid-template-columns: 1fr; }
  .worklog-form-grid textarea { grid-column: auto; }
  .agreement-row { flex-direction: column; }
}
.share-room-state.active { background: #d9f4ef; color: #007f75; }
.share-room-state.expired { background: #fff3d6; color: #9a6500; }
.share-room-state.closed { background: #e8edf7; color: #40516f; }
.share-room-state.revoked { background: #fde8ee; color: var(--risk); }

@media (max-width: 640px) {
  .share-modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 24px 18px;
  }
  .share-room-heading { align-items: flex-start; }
  .share-security-badge { display: none; }
  .share-form-grid { grid-template-columns: 1fr; }
  .share-field-wide { grid-column: auto; }
  .share-sections { grid-template-columns: 1fr; }
  .share-created-link-row { align-items: stretch; flex-direction: column; }
  .share-link-row { align-items: flex-start; }
}

.moment-score {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #d9f4ef;
  color: #007f75;
  font-size: 0.82rem;
  font-weight: 800;
}

.moment-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.moment-stat-row span {
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(37, 87, 214, .07);
  color: var(--muted);
  font-size: 0.76rem;
}

.moment-summary-card small {
  color: var(--muted);
  font-size: 0.74rem;
}

.help-panel {
  margin-bottom: 0;
}

.help-modal {
  z-index: 1400;
  padding: clamp(10px, 2.4vw, 28px);
  background: rgba(7, 20, 39, .74);
  backdrop-filter: blur(10px);
}

.help-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  height: min(880px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(0, 137, 127, .22);
  border-radius: 18px;
  background: #f5f9fc;
  box-shadow: 0 32px 90px rgba(5, 20, 40, .38);
}

.help-dialog-head {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 20px 68px 17px 24px;
  border-bottom: 1px solid var(--line);
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 193, 178, .34), transparent 42%),
    #10233d;
}

.help-dialog-head h2 {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 29px);
}

.help-dialog-kicker {
  color: #51dfd1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.help-dialog-close {
  top: 18px;
  right: 20px;
  width: 36px;
  height: 36px;
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

.help-dialog-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .20);
}

.help-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #dce8f1;
  padding: 18px;
}

.help-dialog-body::-webkit-scrollbar { width: 10px; }
.help-dialog-body::-webkit-scrollbar-track { background: #dce8f1; }
.help-dialog-body::-webkit-scrollbar-thumb {
  border: 2px solid #dce8f1;
  border-radius: 999px;
  background: var(--accent);
}

.help-fab {
  position: fixed;
  z-index: 920;
  right: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #00a99d, #08786f);
  box-shadow: 0 12px 30px rgba(0, 92, 84, .34);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  transition: transform .16s, box-shadow .16s;
}

.help-fab:hover,
.help-fab:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 17px 34px rgba(0, 92, 84, .42);
  outline: none;
}

body.help-open {
  overflow: hidden;
}

.help-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.help-card, .legal-card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(247, 249, 252, .92), #edf4f9);
  box-shadow: 0 8px 18px rgba(16, 24, 40, .04);
}

.help-lang {
  display: inline-flex;
  height: 26px;
  align-items: center;
  padding: 0 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #c9f2eb;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.help-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: -.005em;
}

.help-intro {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.help-section {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.help-section h4 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 15px;
}

.help-section h5 {
  margin: 12px 0 6px;
  color: var(--accent-2);
  font-size: 13px;
}

.help-section p {
  margin: 7px 0;
  padding: 0;
  border: 0;
}

.help-section ul,
.help-section ol {
  margin: 7px 0 0;
  padding-left: 20px;
}

.help-section li {
  margin-bottom: 7px;
}

.help-formula {
  display: block;
  margin: 8px 0;
  padding: 9px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: rgba(0, 137, 127, .08);
  color: var(--ink);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.help-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.help-metric {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .48);
}

.help-metric strong {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-2);
}

.help-metric p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.help-note {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(37, 87, 214, .18);
  border-radius: 7px;
  background: rgba(37, 87, 214, .07);
  color: var(--ink);
  line-height: 1.45;
}

.help-target-pulse {
  outline: 2px solid rgba(0, 201, 183, .72);
  box-shadow: 0 0 0 6px rgba(0, 201, 183, .16);
}

.legal-draft-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.5;
}

.help-card ol {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.help-card li {
  margin-bottom: 8px;
  line-height: 1.38;
  font-size: 13px;
}

.help-card p {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.42;
}

@media (max-width: 640px) {
  .help-modal { padding: 6px; }
  .help-dialog {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 13px;
  }
  .help-dialog-head { padding: 16px 58px 14px 16px; }
  .help-dialog-close { top: 13px; right: 13px; }
  .help-dialog-body { padding: 10px; }
  .help-card { padding: 13px; }
  .help-fab {
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
  }
}

.plans-section {
  margin-top: 13px;
  padding: 20px;
  border: 1px solid rgba(37, 87, 214, .18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 193, 178, .20), transparent 34%),
    radial-gradient(circle at 94% 10%, rgba(37, 87, 214, .18), transparent 30%),
    linear-gradient(180deg, rgba(247, 249, 252, .98), rgba(226, 239, 248, .96));
  box-shadow: var(--shadow);
}

.plans-head {
  max-width: 760px;
  margin-bottom: 16px;
}

.plans-head span {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #c9f2eb;
  color: var(--accent);
  font-weight: 800;
}

.plans-head h2 {
  margin-bottom: 6px;
  font-size: 23px;
}

.plans-head p {
  color: var(--muted);
  line-height: 1.45;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.plan-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  min-height: 330px;
  padding: 16px;
  border: 1px solid #b9c8d8;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7f9fc, #e8f2f8);
  box-shadow: 0 12px 28px rgba(18, 35, 61, .08);
}

.plan-card.featured {
  border-color: rgba(0, 137, 127, .44);
  background:
    linear-gradient(180deg, rgba(201, 242, 235, .72), rgba(231, 242, 248, .96));
  box-shadow: 0 18px 38px rgba(0, 137, 127, .18);
}

.plan-card.enterprise {
  border-color: rgba(37, 87, 214, .34);
}

.plan-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.plan-badge {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #dce8f6;
  color: #173b68;
  font-weight: 800;
}

.featured .plan-badge {
  background: var(--accent);
  color: #fff;
}

.trial .plan-badge {
  background: #eef5f8;
  color: var(--muted);
}

.enterprise .plan-badge {
  background: var(--accent-2);
  color: #fff;
}

.plan-top strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.plans-billing-toggle {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid #b9c8d8;
  border-radius: 999px;
  background: #eef5f8;
}

.billing-toggle-btn {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: none;
}

.billing-toggle-btn.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
}

.billing-save-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.price-annual { display: none; }
.plans-grid.show-annual .price-monthly { display: none; }
.plans-grid.show-annual .price-annual { display: inline; }

.plan-card h3 {
  margin: 0;
  font-size: 18px;
}

.plan-card p {
  color: var(--muted);
  line-height: 1.4;
}

.plan-card ul {
  margin: 0;
  padding-left: 18px;
}

.plan-card li {
  margin-bottom: 8px;
  line-height: 1.35;
  font-size: 13px;
}

.plan-foot {
  padding-top: 10px;
  border-top: 1px solid rgba(82, 97, 116, .18);
  color: #173b68;
  font-weight: 800;
  font-size: 13px;
}

/* ── Topbar & language toggle ──────────────────────────────────────── */

.topbar-right {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.lang-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: none;
}

.lang-btn {
  height: 36px;
  padding: 0 13px;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, #f7f9fc, #e7f1f8);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  box-shadow: none;
  cursor: pointer;
}

.lang-btn:hover:not(:disabled) {
  background: #e0eef6;
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

.lang-btn.active {
  background: linear-gradient(180deg, #00a99d, var(--accent));
  color: #fff;
}

.theme-toggle {
  width: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

/* ── Player toolbar mined date + export actions ────────────────────── */

.toolbar-top-row {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(360px, 1.4fr);
  gap: 12px;
  min-width: 0;
}

.toolbar-group {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--field-bg) 72%, transparent);
}

.toolbar-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toolbar-status-line,
.toolbar-control-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

.toolbar-status-line {
  flex-wrap: nowrap;
}

.toolbar-mining .toolbar-control-row {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(165px, .72fr) 34px;
  gap: 8px;
}

.toolbar-actions {
  align-content: stretch;
}

.toolbar-actions .toolbar-control-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) repeat(3, minmax(132px, .8fr));
  gap: 10px;
  align-items: stretch;
}

.channel-hub-mining-ops {
  display: grid;
  gap: 14px;
  margin: 16px 0;
}

.channel-hub-mining-ops .panel {
  margin: 0;
}

.portal-toast {
  position: fixed;
  right: 22px;
  top: 22px;
  z-index: 5000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(0, 137, 127, .25);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(224,255,252,.96));
  box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.portal-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.portal-toast small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
}

.compact-select {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 34px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12px;
}

.export-btn {
  width: 100%;
  height: 34px;
  font-size: 12px;
  padding: 5px 12px;
  white-space: nowrap;
  justify-content: center;
}

.mine-video-action {
  width: 100%;
  height: 34px;
  white-space: nowrap;
  color: #e8fbff;
  border-color: rgba(0, 201, 183, .42);
  background: linear-gradient(180deg, rgba(0, 169, 157, .22), rgba(37, 87, 214, .12));
}

/* ── Advisor actions row ───────────────────────────────────────────── */

.advisor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mined-date {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #c9f2eb;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

/* ── Schedule section ──────────────────────────────────────────────── */

.schedule-panel { margin-bottom: 13px; }

.schedule-form {
  display: grid;
  grid-template-columns: 110px minmax(230px, 1fr) 120px minmax(150px, .7fr) minmax(150px, .7fr) 110px;
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 980px) {
  .schedule-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .schedule-form { grid-template-columns: 1fr; }
}

.jobs-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.job-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f7f9fc, #eaf3f9);
  box-shadow: 0 4px 10px rgba(16, 24, 40, .04);
}

.job-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-info strong {
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.job-info span {
  color: var(--muted);
  font-size: 12px;
}

.job-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 14px;
}

:root[data-theme="dark"] .schedule-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(86,204,242,.10), transparent 32%),
    var(--panel-bg);
  border-color: rgba(86,204,242,.18);
}

:root[data-theme="dark"] .schedule-panel .panel-head h2 {
  color: #f2f7fb;
}

:root[data-theme="dark"] .schedule-panel .panel-head span,
:root[data-theme="dark"] .schedule-panel #schedStatus {
  color: #a9bfd1 !important;
}

:root[data-theme="dark"] .job-card {
  border-color: rgba(86,204,242,.18);
  background: linear-gradient(180deg, rgba(17,34,54,.94), rgba(13,27,42,.98));
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

:root[data-theme="dark"] .job-info strong {
  color: #f2f7fb;
}

:root[data-theme="dark"] .job-info span {
  color: #a9bfd1;
}

:root[data-theme="dark"] .job-delete-btn {
  border-color: rgba(86,204,242,.30);
  background: rgba(86,204,242,.10);
  color: var(--accent-2);
}

:root[data-theme="dark"] .job-delete-btn:hover:not(:disabled),
:root[data-theme="dark"] .job-delete-btn:focus-visible {
  background: rgba(86,204,242,.18);
  color: #f2f7fb;
  transform: none;
}

:root[data-theme="dark"] .share-modal-card {
  border-color: rgba(86,204,242,.18);
  background:
    radial-gradient(circle at 8% 0%, rgba(0,229,199,.10), transparent 34%),
    linear-gradient(180deg, rgba(17,34,54,.98), rgba(8,18,32,.98));
  color: #d6e4f0;
}

:root[data-theme="dark"] .share-modal-card .modal-brand,
:root[data-theme="dark"] .share-modal-card .share-existing-head strong,
:root[data-theme="dark"] .share-modal-card .share-room-row-title strong,
:root[data-theme="dark"] .share-modal-card .share-scope-card strong,
:root[data-theme="dark"] .share-modal-card .share-room-recipients-head strong {
  color: #f2f7fb;
}

:root[data-theme="dark"] .share-modal-card .share-room-subtitle,
:root[data-theme="dark"] .share-modal-card .share-existing-head small,
:root[data-theme="dark"] .share-modal-card .share-scope-card p,
:root[data-theme="dark"] .share-modal-card .share-link-row small,
:root[data-theme="dark"] .share-modal-card .share-room-recipients-head small,
:root[data-theme="dark"] .share-modal-card .share-room-recipient-row small {
  color: #a9bfd1;
}

:root[data-theme="dark"] .share-modal-card .share-scope-card {
  border-color: rgba(86,204,242,.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(0,229,199,.10), transparent 34%),
    rgba(17,34,54,.72);
}

:root[data-theme="dark"] .share-modal-card .share-security-badge {
  background: rgba(0,229,199,.14);
  color: #dffcf7;
}

:root[data-theme="dark"] .share-modal-card .share-existing-head {
  border-top-color: rgba(86,204,242,.18);
}

:root[data-theme="dark"] .share-existing-actions select {
  border-color: rgba(86,204,242,.24);
  background: #0f2035;
  color: #f2f7fb;
}

:root[data-theme="dark"] .share-existing-actions select:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(86,204,242,.18);
}

:root[data-theme="dark"] .share-modal-card .empty-insight {
  border-color: rgba(86,204,242,.18);
  background: rgba(86,204,242,.08);
  color: #b9ccdc;
}

:root[data-theme="dark"] .share-modal-card .share-link-row,
:root[data-theme="dark"] .share-modal-card .share-room-recipients-panel,
:root[data-theme="dark"] .share-modal-card .share-room-recipient-row {
  border-color: rgba(86,204,242,.18);
  background: rgba(17,34,54,.82);
}

:root[data-theme="dark"] .share-modal-card .share-room-recipient-row.revoked {
  opacity: .78;
}

:root[data-theme="dark"] .share-modal-card .share-room-state.active {
  background: rgba(0,229,199,.14);
  color: #dffcf7;
}

:root[data-theme="dark"] .share-modal-card .share-room-state.expired {
  background: rgba(255,215,64,.14);
  color: #ffe999;
}

:root[data-theme="dark"] .share-modal-card .share-room-state.closed {
  background: rgba(86,204,242,.14);
  color: #dceeff;
}

:root[data-theme="dark"] .share-modal-card .share-room-state.revoked {
  background: rgba(255,92,122,.14);
  color: #ffb3c0;
}

/* ── Advisor panel ─────────────────────────────────────────────────── */

.video-advisor {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(0, 137, 127, .30);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(201, 242, 235, .22), rgba(231, 244, 248, .94));
  box-shadow: 0 8px 22px rgba(0, 137, 127, .07);
}

.advisor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.advisor-head h3 {
  margin: 0 0 3px;
  font-size: 15px;
  letter-spacing: -.005em;
}

.advisor-meta {
  color: var(--muted);
  font-size: 12px;
}

.advisor-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 137, 127, .22);
  border-radius: 999px;
  background: rgba(0, 137, 127, .08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.advisor-result {
  max-height: 460px;
  overflow-y: auto;
  scrollbar-color: #6b8aae #d4e1ed;
  scrollbar-width: thin;
  padding-right: 4px;
}

.advisor-result .advisor-p {
  margin: 0 0 8px;
  line-height: 1.5;
  font-size: 13px;
}

.advisor-result .advisor-list {
  margin: 0 0 10px;
  padding-left: 20px;
}

.advisor-result .advisor-list li {
  margin-bottom: 7px;
  line-height: 1.48;
  font-size: 13px;
}

.advisor-result .advisor-hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

.advisor-result strong { color: var(--ink); }

.advisor-result em {
  color: var(--accent-2);
  font-style: italic;
}

.advisor-notice {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(185, 120, 20, .28);
  border-radius: 9px;
  background: linear-gradient(135deg, #fffaf0, #fffdf8);
}

.advisor-notice-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f6e4b8;
  color: #805b0b;
  font-size: 20px;
  font-weight: 800;
}

.advisor-notice h4 {
  margin: 1px 0 6px;
  color: var(--ink);
  font-size: 15px;
}

.advisor-notice p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.advisor-notice .advisor-notice-time {
  color: var(--ink);
}

.advisor-notice .advisor-notice-hint {
  margin-bottom: 0;
  font-size: 12px;
}

.advisor-notice-error {
  border-color: rgba(185, 55, 55, .25);
  background: #fff7f7;
}

.advisor-notice-error .advisor-notice-icon {
  background: #f7dddd;
  color: var(--risk);
}

.advisor-result .advisor-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--accent);
  margin: 16px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid rgba(0,137,127,.2);
}
.advisor-result .advisor-section-head:first-child { margin-top: 4px; }

/* Panorama General — primera sección, franja destacada */
.advisor-result .advisor-section-head:first-child {
  background: var(--ink);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 6px;
  border-bottom: none;
  margin-bottom: 4px;
}
.advisor-result .advisor-section-head:first-child + .advisor-p {
  background: rgba(0,137,127,.07);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
  line-height: 1.5;
}

.advisor-result .advisor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 4px 0 12px;
  table-layout: fixed;
}
.advisor-result .advisor-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
/* Timestamp */ .advisor-result .advisor-table th:nth-child(1),
               .advisor-result .advisor-table td:nth-child(1) { width: 62px; white-space: nowrap; }
/* Signal */   .advisor-result .advisor-table th:nth-child(2),
               .advisor-result .advisor-table td:nth-child(2) { width: 110px; }
/* Score */    .advisor-result .advisor-table th:nth-child(3),
               .advisor-result .advisor-table td:nth-child(3) { width: 56px; white-space: nowrap; }
/* Evidence */  .advisor-result .advisor-table th:nth-child(4),
               .advisor-result .advisor-table td:nth-child(4) { width: auto; }
/* Action */   .advisor-result .advisor-table th:nth-child(5),
               .advisor-result .advisor-table td:nth-child(5) { width: 28%; }
.advisor-result .advisor-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.4;
  overflow: hidden;
  word-break: break-word;
}
.advisor-result .advisor-table tr:last-child td { border-bottom: none; }
.advisor-result .advisor-table tr:nth-child(even) td { background: var(--bg); }

.term-search-panel {
  margin-top: 14px;
}

.panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.mining-settings-bar {
  background: rgba(88,101,242,.07);
  border: 1px solid rgba(88,101,242,.18);
  border-radius: 12px;
  padding: 14px 18px 10px;
  margin: 0 0 12px;
}
.msb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.msb-row select {
  flex: 1;
  min-width: 180px;
}
.msb-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--accent);
  min-height: 16px;
}

.term-search-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.term-search-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.term-search-summary > div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.term-search-summary span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
}

.term-search-summary strong {
  color: var(--ink);
  font-size: 16px;
}

.term-timestamps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.term-time-btn {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
}

.term-comments {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.term-comments article {
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 137, 127, .05);
}

.term-comments article strong {
  font-size: 11px;
  color: var(--muted);
}

.term-comments article p {
  margin: 5px 0 0;
  line-height: 1.45;
  font-size: 13px;
}

.brand-term-highlight {
  background: rgba(245, 158, 11, .22);
  color: var(--ink);
  border-radius: 5px;
  padding: 0 .18em;
  font-weight: 800;
}

@media (max-width: 980px) {
  .sidebar { position: static; width: auto; }
  .shell { margin-left: 0; padding: 16px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .usage-grid { grid-template-columns: 1fr; }
  .target-grid { grid-template-columns: 1fr; }
  .channel-tools { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .term-search-summary { grid-template-columns: repeat(2, 1fr); }
  .term-search-controls { grid-template-columns: 1fr; }
  .insight-panel .moments-list,
  .insight-panel .comments-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .insight-panel { height: auto; }
  .video-kpi-row { grid-template-columns: 1fr; }
  .video-kpi-value { justify-self: start; text-align: left; }
  .help-grid { grid-template-columns: 1fr; }
  .help-metrics { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .kpi-help::after {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    transform: translateY(8px);
  }
  .kpi-help:hover::after,
  .kpi-help:focus-visible::after,
  .kpi-help.is-open::after {
    transform: translateY(0);
  }
  .narrative-flow-panel { padding: 11px; }
  .narrative-flow-chart { min-height: 180px; }
  .narrative-flow-svg { min-width: 560px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .channel-hub-controls,
  .channel-pulse-grid,
  .channel-hub-grid,
  .channel-hook-metrics,
  .channel-hook-list {
    grid-template-columns: 1fr;
  }
  .channel-hook-head {
    display: grid;
  }
  .channel-hook-head > strong {
    justify-self: start;
  }
  .channel-signal-row {
    grid-template-columns: 116px 1fr 34px;
  }
  .plans-section { padding: 16px; }
  .plans-head h2 { font-size: 20px; }
  .plans-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
}

/* ── Comparison table ─────────────────────────────────────────────────── */

.compare-wrap {
  margin-bottom: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}

.compare-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.compare-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 540px;
}

.compare-table th,
.compare-table td {
  word-break: break-word;
  vertical-align: top;
}

.compare-table th:nth-child(1),
.compare-table td:nth-child(1) { width: 28%; }

.compare-table th:nth-child(2),
.compare-table td:nth-child(2) { width: 20%; }

.compare-table th:nth-child(3),
.compare-table td:nth-child(3) { width: 20%; }

.compare-table th:nth-child(4),
.compare-table td:nth-child(4) { width: 32%; }

.compare-table th {
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}

.compare-table th.col-ours {
  color: var(--accent);
  background: rgba(0,137,127,.06);
  border-radius: 8px 8px 0 0;
}

.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  line-height: 1.35;
}

.compare-table tr:last-child td { border-bottom: none; }

.compare-table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.cell-no {
  color: var(--muted);
  font-style: italic;
  padding: 8px 10px;
}

.cell-yes {
  color: var(--accent);
  font-weight: 600;
  background: rgba(0,137,127,.05);
  padding: 8px 10px;
}

.compare-note {
  margin: 14px 0 0 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  text-align: right;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq-wrap {
  margin-top: 28px;
}

.faq-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color .15s;
}

.faq-item:hover {
  border-color: rgba(0,137,127,.35);
}

.faq-item[open] {
  border-color: rgba(0,137,127,.4);
  background: rgba(0,137,127,.03);
}

.faq-item summary {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
}

.faq-item summary::after {
  content: "+";
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .2s;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.faq-link {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}
.faq-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr; }
  .compare-table { font-size: 12px; }
}

/* ── Demo / Freshness badges ─────────────────────────────────────────── */

.badge-demo {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(37, 87, 214, .12);
  color: var(--accent-2);
  border: 1px solid rgba(37, 87, 214, .22);
  margin-right: 5px;
  vertical-align: middle;
}

.badge-fresh {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--accent);
  margin-right: 4px;
  vertical-align: middle;
}

.badge-stale {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--warn);
  margin-right: 4px;
  vertical-align: middle;
}

.freshness-indicator {
  font-size: 12px;
  min-height: 16px;
  line-height: 1.25;
  transition: color .2s;
}

.freshness-fresh  { color: var(--accent); }
.freshness-stale  { color: var(--warn); font-weight: 600; }
.freshness-ok     { color: var(--muted); }
.freshness-unmined { color: var(--muted); }

/* ── Auth modals ─────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .28);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.modal-close:hover { background: var(--soft); color: var(--ink); }

.modal-guest-row {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  text-align: center;
}

.modal-brand {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.modal-brand .brand-yt { color: var(--ink); }

.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.modal-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--field-bg);
  color: var(--ink);
  transition: border-color .15s;
}

.modal-input:focus {
  outline: none;
  border-color: var(--accent-2);
}

.modal-primary {
  width: 100%;
  padding: 11px;
  background: var(--accent-2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.modal-primary:hover { background: #1a4ab8; }
.modal-primary:disabled { background: var(--line); cursor: default; }

.modal-error {
  font-size: 13px;
  color: var(--risk);
  margin: 0;
  min-height: 18px;
}

.modal-switch {
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: underline;
}

.auth-card {
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  padding: 38px 40px 34px;
  gap: 0;
  border: 1px solid rgba(86,204,242,.14);
  background:
    radial-gradient(circle at 8% 0%, rgba(0,229,199,.10), transparent 34%),
    linear-gradient(180deg, rgba(17,34,54,.98), rgba(8,18,32,.98));
  color: #d6e4f0;
}

.auth-card .modal-close {
  top: 16px;
  right: 16px;
  background: rgba(86,204,242,.08);
  color: #a9bfd1;
}

.auth-card .modal-close:hover {
  background: rgba(86,204,242,.16);
  color: #f2f7fb;
}

.auth-card .modal-brand {
  margin: 0 0 20px;
  color: #f2f7fb;
  font-size: 23px;
  font-weight: 800;
}

.auth-card .modal-brand .brand-yt {
  color: var(--accent-2);
}

.auth-card .modal-title {
  margin: 0 0 12px;
  color: #f2f7fb;
  font-size: 18px;
  font-weight: 800;
}

.auth-card #loginFormSection,
.auth-card #registerFormSection {
  display: grid;
  gap: 10px;
}

.auth-card #registerFormSection[style*="display:none"],
.auth-card #loginFormSection[style*="display:none"] {
  display: none !important;
}

.auth-card .modal-input {
  height: 42px;
  border-color: rgba(86,204,242,.22);
  background: #f7fbff;
  color: #0f2035;
}

.auth-card .modal-input::placeholder {
  color: #64748b;
}

.auth-card .modal-input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(86,204,242,.18);
}

.auth-card .modal-primary {
  height: 42px;
  margin-top: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06111e;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(0,229,199,.18);
}

.auth-card .modal-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #20f1d4, #6bd8ff);
}

.auth-card .modal-error {
  min-height: 16px;
  color: #ff8aa0;
}

.auth-card .modal-switch {
  justify-self: start;
  width: auto;
  margin-top: 2px;
  padding: 0;
  color: var(--accent-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(86,204,242,.45);
}

.auth-card .modal-switch:hover,
.auth-card .modal-switch:focus-visible {
  color: #f2f7fb;
  box-shadow: inset 0 -1px 0 #f2f7fb;
  outline: none;
}

.auth-card .modal-guest-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(86,204,242,.16);
}

.auth-card #guestModeBtn {
  justify-self: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(86,204,242,.22);
  border-radius: 8px;
  background: rgba(86,204,242,.08);
  box-shadow: none;
  text-decoration: none;
}

.auth-card #guestModeBtn:hover,
.auth-card #guestModeBtn:focus-visible {
  background: rgba(86,204,242,.14);
  border-color: rgba(86,204,242,.38);
}

.profile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.modal-footer-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.mining-auth-hint {
  margin: 0 0 12px 0;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(37,87,214,.07), rgba(0,137,127,.06));
  border: 1px solid rgba(37,87,214,.18);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mining-auth-hint .ghost {
  padding: 3px 10px;
  font-size: 12px;
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.modal-hint {
  font-size: 11px;
  color: var(--muted);
  margin: -6px 0 0 0;
  line-height: 1.5;
}

.modal-link {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}
.modal-link:hover { text-decoration: underline; }

button.danger { color: var(--risk); }
button.danger:hover { background: rgba(217, 45, 92, .08); }

.user-badge {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--soft);
  gap: 5px;
  display: flex;
  align-items: center;
}

/* ── Mining Coverage Badge ────────────────────────────────────────────── */

.mining-coverage {
  background: var(--bg, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-left: 4px solid var(--accent, #00897f);
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 12px;
}

.coverage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--line, #e2e8f0);
}

.coverage-row:last-child { border-bottom: none; }

.coverage-label { color: var(--muted, #64748b); }

.coverage-val { font-weight: 600; color: var(--ink, #0f172a); }

.confidence-high   { color: #16a34a; }
.confidence-medium { color: #d97706; }
.confidence-low    { color: #dc2626; }

/* ── Brand chips ──────────────────────────────────────────────────────────── */
.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 4px;
}

.workspace-scope {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(0, 137, 127, .22);
  border-radius: 999px;
  background: rgba(0, 137, 127, .07);
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
}

.brand-source {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
}

.brand-comment-times {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.brand-comment-times button {
  height: 26px;
  padding: 0 8px;
  font-size: 11px;
}

.brand-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.brand-reaction-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(37, 87, 214, .2);
  border-radius: 999px;
  background: rgba(37, 87, 214, .07);
  color: #173b68;
  font-size: 12px;
  font-weight: 650;
}

.brand-reaction-empty {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed rgba(0, 160, 150, .28);
  border-radius: 12px;
  background: rgba(0, 160, 150, .06);
  color: var(--muted);
  font-size: 13px;
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0f6ff, #e4eefb);
  border: 1px solid #b8d0ef;
  color: #1a3a6b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.brand-chip:hover:not(:disabled) {
  background: linear-gradient(180deg, #ddeeff, #cce0f8);
  border-color: #6fa8dc;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(37,87,214,.15);
}
.brand-chip.active {
  background: linear-gradient(180deg, #2557d6, #1a44b0);
  border-color: #1a44b0;
  color: #fff;
}
.chip-count {
  background: rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.brand-chip.active .chip-count { background: rgba(255,255,255,.22); }

.term-search-manual {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.term-search-manual input { flex: 1; }

.status-error {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid rgba(217, 45, 92, .25);
  border-radius: 6px;
  background: rgba(217, 45, 92, .07);
  color: var(--risk);
  font-weight: 650;
}

/* ── WhatsApp floating button ─────────────────────────────────────────────── */
#waBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: transform .2s, box-shadow .2s;
}
#waBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
}
#waBtn svg { width: 56px; height: 56px; }

/* ── Admin Panel ─────────────────────────────────────────────────────────── */
.admin-panel { padding: 1.5rem; }

.admin-tabs { display: flex; gap: 0.5rem; }
.tab-btn {
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab-btn:hover { border-color: var(--accent); color: var(--accent); }
.tab-btn.tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.admin-tab-content { margin-top: 1.25rem; }

.admin-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.admin-table th,
.admin-table td {
  width: auto;
  min-width: 0;
  text-align: left;
}
.admin-table th {
  background: var(--soft);
  color: var(--muted);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.admin-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--soft); }

.admin-users-table { min-width: 1430px; }
.admin-users-table th:nth-child(4) { min-width: 285px; }
.admin-users-table th:last-child { min-width: 250px; }
.admin-jobs-table { min-width: 1120px; }
.admin-jobs-table th:nth-child(1) { width: 58px; }
.admin-jobs-table th:nth-child(2) { width: 105px; }
.admin-jobs-table th:nth-child(3) { width: 155px; }
.admin-jobs-table th:nth-child(4) { min-width: 360px; }
.admin-jobs-table th:nth-child(5) { width: 120px; }
.admin-jobs-table th:nth-child(6) { width: 120px; }
.admin-jobs-table th:nth-child(7) { width: 95px; }
.admin-jobs-table th:nth-child(8) { width: 115px; }
.admin-jobs-table th:nth-child(9) { min-width: 220px; }
.admin-jobs-table td:nth-child(4) {
  min-width: 360px;
  overflow-wrap: normal;
  word-break: normal;
}

.admin-toolbar-actions,
.admin-create-user-head,
.admin-create-user-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.admin-create-user {
  margin: .75rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--soft);
}
.admin-create-user[hidden] { display: none; }
.admin-create-user-head h3 { margin: 0; }
.admin-create-user-head p {
  margin: .25rem 0 0;
  color: var(--muted);
}
.admin-create-user-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.admin-create-user-grid label {
  display: grid;
  gap: .35rem;
  min-width: 0;
}
.admin-create-user-grid label > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}
.admin-create-user-grid input,
.admin-create-user-grid select {
  width: 100%;
  min-width: 0;
  background: var(--field-bg);
}
.admin-create-user-wide { grid-column: span 2; }
.admin-courtesy-check {
  display: flex !important;
  align-items: center;
  align-self: end;
  grid-column: span 2;
  min-height: 38px;
}
.admin-courtesy-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.admin-create-user-footer { margin-top: .85rem; }
.admin-create-user-footer .status-line { color: var(--accent); }

.admin-plan-editor {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 76px auto;
  gap: .4rem;
  align-items: end;
  min-width: 265px;
}
.admin-plan-editor select,
.admin-plan-editor input,
.admin-plan-editor button {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 .55rem;
  font-size: .76rem;
}
.admin-extra-credits {
  display: grid;
  gap: 2px;
}
.admin-extra-credits span {
  color: var(--muted);
  font-size: .65rem;
  line-height: 1;
}
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 235px;
}
.admin-row-action {
  height: 34px;
  padding: 0 .6rem;
  font-size: .75rem;
  white-space: nowrap;
}
.status-line.error { color: var(--risk); }

.enterprise-calc-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.enterprise-calc-head h3 { margin: .2rem 0 .35rem; }
.enterprise-calc-head p {
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}
.enterprise-calc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
.enterprise-calc-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, .9fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
.enterprise-calc-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.enterprise-calc-form label {
  display: grid;
  gap: .35rem;
  min-width: 0;
}
.enterprise-calc-form label > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.enterprise-calc-form input,
.enterprise-calc-form select,
.enterprise-calc-form textarea {
  width: 100%;
  min-width: 0;
  background: var(--field-bg);
}
.enterprise-calc-form input,
.enterprise-calc-form select {
  height: 44px;
  line-height: 1.35;
  padding: 0 14px;
}
.enterprise-calc-form select {
  padding-right: 34px;
}
.enterprise-calc-form select option {
  min-height: 30px;
  line-height: 1.5;
  padding: 8px 12px;
}
.enterprise-calc-wide { grid-column: 1 / -1; }
.enterprise-calc-result {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel));
}
.enterprise-quote-card {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, var(--soft));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.enterprise-quote-card span,
.enterprise-quote-grid span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.enterprise-quote-card strong {
  color: var(--accent);
  font-size: 1.9rem;
  line-height: 1.1;
}
.enterprise-quote-card small,
.enterprise-quote-grid small,
.enterprise-quote-note {
  color: var(--muted);
}
.enterprise-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.enterprise-quote-grid article {
  display: grid;
  gap: .2rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.enterprise-quote-grid strong {
  color: var(--ink);
  font-size: 1.05rem;
}
.enterprise-quote-section {
  padding-top: .25rem;
  border-top: 1px solid var(--line);
}
.enterprise-quote-section h4 {
  margin: .25rem 0 .45rem;
}
.enterprise-quote-section ul {
  margin: 0;
  padding-left: 1.1rem;
}
.enterprise-quote-section li {
  margin: .3rem 0;
  color: var(--muted);
}

.plan-badge-sm {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.plan-badge-sm.basic   { background: #e8f4ff; color: #2557d6; }
.plan-badge-sm.medium  { background: #fff3e0; color: #c77700; }
.plan-badge-sm.premium { background: #f3e8ff; color: #7c3aed; }
.plan-badge-sm.admin   { background: #fde8f0; color: #d92d5c; }

.account-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.account-badge.normal { background: #edf1f5; color: #536273; }
.account-badge.courtesy { background: #e6fbf7; color: #007f75; border: 1px solid #8edfd5; }
.coverage-badge {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.coverage-badge.paid { background: #e7efff; color: #2557d6; }
.coverage-badge.courtesy { background: #e6fbf7; color: #007f75; }
.coverage-badge.expired { background: #fde8ee; color: var(--risk); }
.ghost.danger { color: var(--risk); border-color: color-mix(in srgb, var(--risk) 45%, var(--line)); }

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
.status-dot.active   { background: var(--accent); }
.status-dot.inactive { background: var(--muted); }

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.monitor-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
}
.monitor-card .monitor-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; }
.monitor-card .monitor-value { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1; }
.monitor-card .monitor-value-text { font-size: 1.05rem; }
.monitor-card small { display: block; margin-top: .35rem; color: var(--muted); }
.monitor-card.warn .monitor-value { color: var(--warn); }
.monitor-card.alert .monitor-value { color: var(--risk); }
.monitor-card.ok .monitor-value { color: var(--accent); }

.payment-form {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.pay-grid input, .pay-grid select, .pay-grid button {
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--field-bg);
  color: var(--ink);
}
.pay-coverage-field {
  display: grid;
  gap: 3px;
}
.pay-coverage-field span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.revenue-report {
  margin-top: 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.revenue-report-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.revenue-report-head h3,
.revenue-breakdowns h4 { margin: 0; }
.revenue-report-head p {
  margin: .3rem 0 0;
  color: var(--muted);
}
.revenue-filters {
  display: flex;
  align-items: end;
  gap: .55rem;
}
.revenue-filters label {
  display: grid;
  gap: 3px;
}
.revenue-filters span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}
.revenue-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}
.revenue-total-card {
  display: grid;
  gap: .35rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(0, 137, 127, .24);
  border-radius: 9px;
  background: #effbf8;
}
.revenue-total-card span { color: var(--muted); }
.revenue-total-card strong { color: var(--accent); font-size: 1.25rem; }
.revenue-breakdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.revenue-breakdowns > div {
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.revenue-summary-list {
  display: grid;
  gap: .4rem;
  max-height: 220px;
  margin-top: .6rem;
  overflow-y: auto;
}
.revenue-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.revenue-summary-row span { min-width: 0; overflow-wrap: anywhere; }
.revenue-summary-row small { color: var(--muted); }
.revenue-summary-row strong { white-space: nowrap; }
.revenue-table-wrap { max-height: 420px; }
.revenue-table { min-width: 900px; }
.pay-grid button {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
.pay-grid button:hover { background: #007a72; }

@media (max-width: 640px) {
  .admin-tabs { flex-wrap: wrap; }
  .monitor-grid { grid-template-columns: repeat(2, 1fr); }
  .pay-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .admin-create-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enterprise-calc-layout { grid-template-columns: 1fr; }
  .enterprise-calc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .admin-panel { padding: 1rem; }
  .admin-users-toolbar,
  .admin-create-user-head,
  .admin-create-user-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-toolbar-actions {
    width: 100%;
  }
  .admin-toolbar-actions button {
    flex: 1 1 0;
  }
  .admin-create-user-grid { grid-template-columns: 1fr; }
  .admin-create-user-wide,
  .admin-courtesy-check { grid-column: auto; }
  .admin-create-user-footer button { width: 100%; }
  .enterprise-calc-head {
    align-items: stretch;
    flex-direction: column;
  }
  .enterprise-calc-actions button { flex: 1 1 auto; }
  .enterprise-calc-form,
  .enterprise-quote-grid { grid-template-columns: 1fr; }
  .enterprise-calc-wide { grid-column: auto; }
  .revenue-report-head,
  .revenue-filters {
    align-items: stretch;
    flex-direction: column;
  }
  .revenue-filters label,
  .revenue-filters button { width: 100%; }
  .revenue-breakdowns { grid-template-columns: 1fr; }
  .share-recipient-entry { grid-template-columns: 1fr; }
  .share-recipient-entry button { width: 100%; }
}

@media (max-width: 640px) {
  #waBtn { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  #waBtn svg { width: 50px; height: 50px; }
}

/* ── Dashboard hero + pillars ──────────────────────────────────────────── */
.dashboard-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}
.dashboard-hero {
  --signal-bg: #0D1B2A;
  --signal-surface: #112236;
  --signal-surface2: #172D44;
  --signal-border: #1E3A52;
  --signal-text: #D6E4F0;
  --signal-muted: #6A8FA8;
  --signal-humor: #00E676;
  --signal-polemica: #FF1744;
  --signal-sorpresa: #56CCF2;
  --signal-emocion: #C77DFF;
  --signal-marca: #FFD740;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 1.5rem;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(86,204,242,.22), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(199,125,255,.18), transparent 34%),
    linear-gradient(135deg, #0D1B2A 0%, #112236 54%, #0D1B2A 100%);
  border: 1px solid rgba(86,204,242,.22);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  color: var(--signal-text);
}
.dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(86,204,242,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,204,242,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18));
  pointer-events: none;
}
.dashboard-hero-text,
.dashboard-signal-visual {
  position: relative;
  z-index: 1;
}
.dashboard-hero .panel-kicker {
  color: #56CCF2;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 0.4rem;
}
.dashboard-hero h2 {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  font-weight: 800;
  color: var(--signal-text);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.dashboard-hero p {
  color: rgba(214,228,240,0.86);
  font-size: 0.95rem;
  margin: 0;
  max-width: 56ch;
  line-height: 1.5;
}
.dashboard-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 1rem 0 0;
}
.dashboard-hero-actions span {
  border: 1px solid rgba(86,204,242,.25);
  border-radius: 999px;
  color: #56CCF2;
  background: rgba(86,204,242,.10);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
}
.dashboard-signal-visual {
  min-height: 260px;
}
.signal-monitor-card {
  position: relative;
  min-height: 210px;
  padding: 14px;
  border: 1px solid rgba(86,204,242,.24);
  border-radius: 14px;
  background: rgba(17,34,54,.86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 38px rgba(0,0,0,.22);
}
.signal-monitor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #D6E4F0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.signal-monitor-head strong {
  margin-left: auto;
  color: #00E676;
  font-size: 10px;
}
.signal-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 10px #00E676;
  animation: signalPulse 1.8s ease-in-out infinite;
}
.signal-lane {
  position: relative;
  height: 28px;
  margin: 8px 0;
  padding-left: 82px;
}
.signal-lane span {
  position: absolute;
  left: 0;
  top: 5px;
  width: 72px;
  font-size: 10px;
  font-weight: 700;
  color: #6A8FA8;
}
.signal-lane::before {
  content: "";
  position: absolute;
  left: 82px;
  right: 0;
  top: 13px;
  height: 1px;
  background: #1E3A52;
}
.signal-lane i {
  position: absolute;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  transform: translateX(82px);
}
.signal-lane.humor i { background: #00E676; box-shadow: 0 0 9px #00E676; }
.signal-lane.sorpresa i { background: #56CCF2; box-shadow: 0 0 9px #56CCF2; }
.signal-lane.emocion i { background: #C77DFF; box-shadow: 0 0 9px #C77DFF; }
.signal-lane.marca i { background: #FFD740; box-shadow: 0 0 9px #FFD740; }
.signal-wave {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  width: calc(100% - 28px);
  height: 58px;
  opacity: .9;
}
.signal-wave path {
  fill: none;
  stroke: #56CCF2;
  stroke-width: 4;
  filter: drop-shadow(0 0 7px rgba(86,204,242,.70));
}
.advisor-mini-card {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 245px;
  padding: 14px;
  border: 1px solid rgba(0,230,118,.22);
  border-radius: 12px;
  background: rgba(13,27,42,.92);
  box-shadow: 0 18px 30px rgba(0,0,0,.22);
}
.advisor-mini-card small {
  color: #00E676;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
}
.advisor-mini-card strong {
  display: block;
  margin: 6px 0;
  color: #D6E4F0;
  font-size: 15px;
}
.advisor-mini-card p {
  color: #6A8FA8;
  font-size: 12px;
}
.dashboard-toolkit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.toolkit-card {
  position: relative;
  overflow: hidden;
  min-height: 145px;
  padding: 16px;
  border: 1px solid rgba(30,58,82,.95);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 8%, rgba(86,204,242,.13), transparent 36%),
    linear-gradient(180deg, #112236, #0D1B2A);
  color: #D6E4F0;
}
.toolkit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 2px solid #56CCF2;
  opacity: .75;
}
.toolkit-kicker {
  color: #56CCF2;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}
.toolkit-card strong {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  display: block;
  margin: 8px 0 5px;
  font-size: 16px;
}
.toolkit-card p {
  max-width: 34ch;
  color: #6A8FA8;
  line-height: 1.45;
}
.toolkit-bars {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: end;
  gap: 6px;
  height: 52px;
}
.toolkit-bars i {
  width: 10px;
  border-radius: 6px 6px 2px 2px;
  background: #00E676;
  box-shadow: 0 0 8px rgba(0,230,118,.75);
}
.toolkit-bars i:nth-child(1) { height: 18px; opacity: .65; }
.toolkit-bars i:nth-child(2) { height: 38px; }
.toolkit-bars i:nth-child(3) { height: 26px; opacity: .78; }
.toolkit-bars i:nth-child(4) { height: 48px; background: #FF1744; box-shadow: 0 0 8px rgba(255,23,68,.72); }
.toolkit-matrix {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 96px;
  height: 58px;
  border: 1px solid #1E3A52;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(86,204,242,.18) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(86,204,242,.18) 50%, transparent 51%);
}
.toolkit-matrix b {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0D1B2A;
  background: #56CCF2;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(86,204,242,.62);
}
.toolkit-matrix b:nth-child(1) { left: 12px; bottom: 8px; }
.toolkit-matrix b:nth-child(2) { right: 10px; top: 8px; background: #C77DFF; }
.toolkit-matrix b:nth-child(3) { right: 26px; bottom: 12px; background: #00E676; }
.toolkit-chips {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: end;
  max-width: 190px;
}
.toolkit-chips span {
  border: 1px solid rgba(255,215,64,.28);
  border-radius: 999px;
  color: #FFD740;
  background: rgba(255,215,64,.12);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}
.dashboard-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pillar-card {
  background: linear-gradient(180deg, rgba(247,249,252,.98), rgba(238,245,250,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pillar-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.pillar-card h3 {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--accent);
}
.pillar-card p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .dashboard-pillars { grid-template-columns: repeat(2, 1fr); }
  .dashboard-hero {
    grid-template-columns: 1fr;
    padding: 1.25rem 1.25rem;
  }
  .dashboard-hero h2 { font-size: 1.2rem; }
  .dashboard-toolkit { grid-template-columns: 1fr; }
  .dashboard-signal-visual { min-height: 240px; }
}
@media (max-width: 480px) {
  .dashboard-pillars { grid-template-columns: 1fr; }
  .dashboard-hero-actions span { font-size: 10px; }
  .signal-lane { padding-left: 64px; }
  .signal-lane span { width: 58px; }
  .signal-lane::before { left: 64px; }
  .signal-lane i { transform: translateX(64px); }
  .advisor-mini-card {
    position: relative;
    max-width: none;
    margin-top: 10px;
  }
}

@keyframes signalPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .48; transform: scale(.82); }
}

/* ── Video section — Signal Dark preview (trial, scoped to #videos only) ── */
#videos {
  --bg: #0D1B2A;
  --panel: #112236;
  --ink: #D6E4F0;
  --muted: #6A8FA8;
  --line: #1E3A52;
  --accent: #00E5C7;
  --accent-2: #56CCF2;
  --risk: #FF5C7A;
  --warn: #FFD740;
  --dna-humor: #00E676;
  --dna-controversy: #FF1744;
  --dna-surprise: #56CCF2;
  --dna-emotion: #C77DFF;
  --dna-brand: #FFD740;
  --dna-other: #6A8FA8;
  --soft: #16304a;
  position: relative;
  padding: 1.5rem;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(86,204,242,.14), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(199,125,255,.12), transparent 32%),
    linear-gradient(180deg, #0c1932 0%, #060e1c 100%);
  border: 1px solid rgba(86,204,242,.18);
  color: var(--ink);
}

#videos .panel-head h2,
#videos .video-meta h2,
#videos .narrative-flow-head h3,
#videos .advisor-head h3,
#videos .video-insights-head h3 {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
}

#videos .table-panel,
#videos .video-panel {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

#videos button.ghost {
  background: rgba(86,204,242,.08);
  color: var(--accent-2);
  border-color: rgba(86,204,242,.30);
}
#videos button.ghost:hover:not(:disabled) {
  color: #fff;
  border-color: var(--accent-2);
  box-shadow: 0 8px 16px rgba(86,204,242,.20);
}
#videos select,
#videos input {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

#videos .table-wrap {
  background: var(--panel);
  border-color: var(--line);
  scrollbar-color: #3a5876 var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#videos th { background: #0f2035; color: var(--muted); box-shadow: inset 0 -1px 0 var(--line); }
#videos tbody tr:nth-child(even) td { background: rgba(86,204,242,.04); }
#videos tr:hover td { background: rgba(86,204,242,.10); }
#videos tr.selected td { background: rgba(0,229,199,.14); box-shadow: inset 3px 0 0 var(--accent); }
#videos .row-number { border-color: var(--line); background: var(--panel); color: var(--muted); }
#videos tr.selected .row-number { border-color: rgba(0,229,199,.4); background: rgba(0,229,199,.18); color: var(--accent); }
#videos .score100 { background: rgba(0,229,199,.16); color: var(--accent); }
#videos .signal-chip { border-color: var(--line); background: linear-gradient(180deg, #14283f, #0f2035); box-shadow: none; }

#videos .top-videos-methodology {
  margin: 10px 2px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(86,204,242,.06);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

#videos .selected-metrics { background: rgba(86,204,242,.06); border-color: var(--line); }

#videos .video-insights {
  background: linear-gradient(180deg, rgba(17,34,54,.9), rgba(13,27,42,.94));
  border-color: var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
#videos .kpi-help { border-color: rgba(86,204,242,.4); color: var(--accent-2); background: rgba(86,204,242,.08); }
#videos .video-kpi-icon { background: var(--panel); border-color: var(--line); }
#videos .video-kpi-track {
  background:
    linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px) 0 0 / 10% 100%,
    #16304a;
}

#videos .timeline {
  border-color: var(--line);
  background:
    linear-gradient(90deg, rgba(86,204,242,.08) 0 1px, transparent 1px) 0 0 / 10% 100%,
    linear-gradient(180deg, #0f2035, #0a1626);
}
#videos .timeline-lane-track {
  background:
    linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px) 0 0 / 10% 100%,
    color-mix(in srgb, var(--dna-color) 16%, #0a1626);
}
#videos .moment-dna-legend > strong { color: var(--ink); }

#videos .narrative-flow-panel {
  border-color: rgba(86,204,242,.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(0,229,199,.12), transparent 34%),
    linear-gradient(180deg, #0f2035, #0a1626);
}
#videos .narrative-flow-chart {
  border-color: rgba(86,204,242,.16);
  background: rgba(13,27,42,.6);
}
#videos .narrative-flow-kicker { color: var(--accent-2); }

#videos .video-advisor {
  border-color: rgba(0,229,199,.28);
  background: linear-gradient(180deg, rgba(17,34,54,.92), rgba(13,27,42,.96));
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
#videos .advisor-meta-line {
  border-color: rgba(0,229,199,.28);
  background: rgba(0,229,199,.1);
  color: var(--accent);
}
#videos .advisor-result .advisor-hr { border-top-color: var(--line); }
#videos .advisor-result .advisor-section-head { color: var(--accent-2); border-bottom-color: rgba(86,204,242,.24); }
#videos .advisor-result .advisor-section-head:first-child {
  background: rgba(0,229,199,.14);
  color: var(--accent);
}
#videos .advisor-result .advisor-section-head:first-child + .advisor-p {
  background: rgba(0,229,199,.06);
  border-left-color: var(--accent);
}
#videos .advisor-result .advisor-table th { color: var(--muted); border-bottom-color: var(--line); }
#videos .advisor-result .advisor-table td { border-bottom-color: var(--line); }
#videos .advisor-result .advisor-table tr:nth-child(even) td { background: rgba(86,204,242,.04); }
#videos .advisor-notice h4,
#videos .advisor-notice .advisor-notice-time { color: #10233d; }
#videos .advisor-notice p { color: #6b5a2c; }

/* ── Channel Hub™ — Signal Dark preview (trial, scoped to #channelHub only) ── */
#channelHub {
  --bg: #0D1B2A;
  --panel: #112236;
  --ink: #D6E4F0;
  --muted: #6A8FA8;
  --line: #1E3A52;
  --accent: #00E5C7;
  --accent-2: #56CCF2;
  --risk: #FF5C7A;
  --warn: #FFD740;
  --soft: #16304a;
  --dna-humor: #00E676;
  --dna-controversy: #FF1744;
  --dna-surprise: #56CCF2;
  --dna-emotion: #C77DFF;
  --dna-brand: #FFD740;
  --dna-other: #6A8FA8;
  position: relative;
  padding: 1.5rem;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(86,204,242,.14), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(199,125,255,.12), transparent 32%),
    linear-gradient(180deg, #0c1932 0%, #060e1c 100%);
  border: 1px solid rgba(86,204,242,.18);
  color: var(--ink);
}

#channelHub .panel-head h2,
#channelHub .channel-hub-card h3,
#channelHub .channel-hook-head h3,
#channelHub .hub-channel-chip-name {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
}

#channelHub button.ghost {
  background: rgba(86,204,242,.08);
  color: var(--accent-2);
  border-color: rgba(86,204,242,.30);
}
#channelHub button.ghost:hover:not(:disabled) {
  color: #fff;
  border-color: var(--accent-2);
  box-shadow: 0 8px 16px rgba(86,204,242,.20);
}
#channelHub select,
#channelHub input {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

#channelHub .metric,
#channelHub .panel,
#channelHub .usage-card,
#channelHub .channel-pulse-card,
#channelHub .channel-hub-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
}

#channelHub .table-wrap {
  background: var(--panel);
  border-color: var(--line);
  scrollbar-color: #3a5876 var(--panel);
  box-shadow: none;
}
#channelHub th { background: #0f2035; color: var(--muted); box-shadow: inset 0 -1px 0 var(--line); }
#channelHub tbody tr:nth-child(even) td { background: rgba(86,204,242,.03); }
#channelHub tr:hover td { background: rgba(86,204,242,.08); }

#channelHub .workspace-scope { color: var(--accent-2); border-color: rgba(86,204,242,.28); background: rgba(86,204,242,.08); }

#channelHub .channel-hook-card {
  border-color: rgba(0,229,199,.26);
  background:
    radial-gradient(circle at top left, rgba(0,229,199,.14), transparent 34%),
    var(--panel);
}
#channelHub .channel-hook-head > strong { color: var(--accent); background: rgba(0,229,199,.14); }
#channelHub .channel-hook-metrics span { border-color: var(--line); background: rgba(86,204,242,.06); }
#channelHub .hook-video { border-color: var(--line); background: var(--panel); }
#channelHub .hook-video i { background: rgba(0,230,118,.16); color: #6ff0ab; }

#channelHub .channel-signal-row div,
#channelHub .clip-yield-list article div { background: rgba(0,0,0,.28); }
#channelHub .channel-top-moments article,
#channelHub .clip-yield-list article { border-color: var(--line); background: var(--panel); }

#channelHub .channel-matrix .matrix-bg { fill: var(--panel); stroke: var(--line); }
#channelHub .channel-matrix .matrix-axis { stroke: rgba(86,204,242,.28); }
#channelHub .channel-matrix .matrix-grid-tick line { stroke: rgba(86,204,242,.14); }
#channelHub .channel-matrix .matrix-grid-tick text { fill: var(--muted); }
#channelHub .channel-matrix .matrix-zone-label { fill: var(--muted); }
#channelHub .channel-matrix .zone-star { fill: rgba(0,230,118,.14); }
#channelHub .channel-matrix .zone-hook { fill: rgba(86,204,242,.12); }
#channelHub .channel-matrix .zone-volume { fill: rgba(255,215,64,.12); }
#channelHub .channel-matrix .zone-cold { fill: rgba(106,143,168,.10); }
#channelHub .channel-matrix-zone-legend span { border-color: var(--line); background: var(--panel); color: var(--muted); }

#channelHub .matrix-action-card { border-color: var(--line); background: var(--panel); }
#channelHub .matrix-action-card.star { background: rgba(0,230,118,.10); }
#channelHub .matrix-action-card.hook { background: rgba(86,204,242,.10); }
#channelHub .matrix-action-card.volume { background: rgba(255,215,64,.10); }
#channelHub .matrix-action-card.cold { background: rgba(106,143,168,.10); }
#channelHub .matrix-action-card strong { color: #F2F7FB; }
#channelHub .matrix-action-card p { color: #C3D6E6; }
#channelHub .matrix-action-card span { color: var(--accent); }

#channelHub .scatter-legend { color: var(--muted); }
#channelHub .scatter-svg text { fill: var(--muted); }

#channelHub .diag-row.diag-good td { background: rgba(0,230,118,.08); }
#channelHub .diag-row.diag-warn td { background: rgba(255,215,64,.08); }
#channelHub .diag-row.diag-passive td { background: rgba(255,92,122,.08); }
#channelHub .diag-table .diag-link { color: var(--ink); }
#channelHub .diag-table .diag-link:hover { color: var(--accent); }

#channelHub .channel-advisor-box {
  border-color: rgba(0,229,199,.26);
  background: linear-gradient(180deg, rgba(17,34,54,.92), rgba(13,27,42,.96));
}
#channelHub .channel-advisor-meta { background: rgba(0,229,199,.1); color: var(--accent); }

#channelHub .hub-channel-chip { background: var(--accent); color: #0D1B2A; }

/* ── Workspace Hub (Owner panel) ─────────────────────────────────────── */
.ws-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ws-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.1rem; }
.ws-section-desc { font-size: 0.82rem; color: var(--muted); margin: 0; }

.ws-keys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 680px) { .ws-keys-grid { grid-template-columns: 1fr; } }

.ws-key-row { display: flex; flex-direction: column; gap: 0.3rem; }
.ws-key-row label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.ws-key-hint { font-size: 0.75rem; color: var(--muted); font-style: italic; margin: 0; }
.ws-input-wrap { position: relative; display: flex; }
.ws-key-input { flex: 1; border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
.ws-key-toggle { border-radius: 0 var(--radius) var(--radius) 0; border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 0 0.6rem; font-size: 0.85rem; color: var(--muted); transition: background 0.15s; }
.ws-key-toggle:hover { background: var(--hover); }

.ws-key-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; }
.ws-status-msg { font-size: 0.82rem; min-height: 1.2em; }

.ws-logo-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ws-logo-preview-wrap { width: 160px; height: 60px; border: 1px dashed var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: var(--bg); flex: 0 0 auto; overflow: hidden; padding: 0.4rem; }
.ws-logo-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ws-logo-preview-empty { font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.3; }
.ws-logo-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.ws-members-table { width: auto; min-width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.ws-members-table th { text-align: left; padding: 0.5rem 0.75rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ws-members-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.ws-members-table tr:last-child td { border-bottom: none; }
.ws-members-table th:nth-child(1), .ws-members-table td:nth-child(1) { width: 140px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ws-members-table th:nth-child(2), .ws-members-table td:nth-child(2) { width: 80px; }
.ws-members-table th:nth-child(3), .ws-members-table td:nth-child(3) { width: 160px; }
.ws-members-table th:nth-child(4), .ws-members-table td:nth-child(4) { width: 160px; }
.ws-members-table th:nth-child(5), .ws-members-table td:nth-child(5) { width: 70px; text-align: right; }
#wsMembersTableWrap { overflow-x: auto; }

.ws-role-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.ws-role-badge.ws-role-owner { background: rgba(20,184,166,0.15); color: var(--accent); }
.ws-role-badge.ws-role-member { background: var(--hover); color: var(--muted); }

.ws-key-badge { display: inline-block; font-size: 0.72rem; padding: 2px 7px; border-radius: 999px; }
.ws-key-badge.ws-key-set { background: rgba(34,197,94,0.12); color: #16a34a; }
.ws-key-badge.ws-key-none { background: var(--hover); color: var(--muted); }
.ws-slots-badge { font-size: 0.78rem; font-weight: 600; color: var(--muted); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; }
.ws-slots-badge.ws-slots-full { color: var(--risk); border-color: var(--risk); }
.ws-you-badge { font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.ws-member-actions { display: flex; gap: .4rem; align-items: center; }
.ws-remove-btn { color: var(--risk) !important; }
.ws-credential-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem .6rem; background: var(--hover); border-radius: var(--radius-sm); font-size: .88rem; }
.ws-invite-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .75rem; background: var(--hover); border-radius: var(--radius); margin-bottom: .75rem; }
.ws-invite-form input, .ws-invite-form select { flex: 1; min-width: 180px; }

/* ── Global theme switcher overrides ───────────────────────────────────── */
:root[data-theme="dark"] .topbar {
  border-bottom-color: rgba(86,204,242,.18);
}

:root[data-theme="dark"] .lang-toggle {
  border-color: var(--line);
  background: rgba(17,34,54,.72);
}

:root[data-theme="dark"] .lang-btn {
  background: transparent;
  color: var(--muted);
}

:root[data-theme="dark"] .lang-btn:hover:not(:disabled) {
  background: rgba(86,204,242,.08);
  color: var(--ink);
}

:root[data-theme="dark"] .lang-btn.active {
  background: linear-gradient(180deg, #00a99d, var(--accent));
  color: #06111e;
}

:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .revenue-table-wrap {
  background: var(--panel);
  border-color: var(--line);
  scrollbar-color: #3a5876 var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] .admin-table th,
:root[data-theme="dark"] .compare-table th {
  background: var(--table-head-bg);
  color: var(--muted);
  box-shadow: inset 0 -1px 0 var(--line);
}

:root[data-theme="dark"] td,
:root[data-theme="dark"] .admin-table td,
:root[data-theme="dark"] .compare-table td {
  color: var(--ink);
  border-bottom-color: var(--line);
}

:root[data-theme="dark"] tbody tr:nth-child(even) td {
  background: var(--table-row-alt);
}

:root[data-theme="dark"] tr:hover td,
:root[data-theme="dark"] .admin-table tr:hover td {
  background: rgba(86,204,242,.09);
}

:root[data-theme="dark"] tr.selected td {
  background: rgba(0,229,199,.14);
  box-shadow: inset 3px 0 0 var(--accent);
}

:root[data-theme="dark"] .revenue-total-card {
  background: rgba(0,229,199,.08);
  border-color: rgba(0,229,199,.24);
}

:root[data-theme="dark"] .share-created-result {
  background: rgba(0,229,199,.08);
  border-color: rgba(0,229,199,.24);
}

:root[data-theme="dark"] .row-number,
:root[data-theme="dark"] .signal-chip,
:root[data-theme="dark"] .score100,
:root[data-theme="dark"] .usage-percent,
:root[data-theme="dark"] .usage-plan {
  background: rgba(86,204,242,.10);
  border-color: var(--line);
  color: var(--accent-2) !important;
}

:root[data-theme="dark"] .selected-metrics,
:root[data-theme="dark"] .emoji-summary,
:root[data-theme="dark"] .term-search-result,
:root[data-theme="dark"] .advisor-section,
:root[data-theme="dark"] .modal-card {
  background: var(--panel-bg);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .empty-insight,
:root[data-theme="dark"] .emoji-empty,
:root[data-theme="dark"] .panel-head p,
:root[data-theme="dark"] .quota-methods,
:root[data-theme="dark"] .workspace-scope,
:root[data-theme="dark"] .share-room-subtitle,
:root[data-theme="dark"] .api-key-note {
  color: var(--muted);
}

:root[data-theme="dark"] .api-key-card,
:root[data-theme="dark"] .byoa-banner,
:root[data-theme="dark"] .term-search-summary > div,
:root[data-theme="dark"] .share-scope-card,
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .pillar-card {
  background: var(--card-bg);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .plan-card.featured,
:root[data-theme="dark"] .plan-card.enterprise {
  background:
    radial-gradient(circle at 92% 8%, rgba(86,204,242,.10), transparent 34%),
    var(--card-bg);
}

/* ── Channel Hub active-channel chip ───────────────────────────────────── */
.hub-channel-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.hub-channel-chip-name {
  font-weight: 700;
  font-size: 1rem;
}
.hub-channel-chip-meta {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-left: auto;
}

/* ── Advisor dual-bar ──────────────────────────────────────────────────── */
.advisor-type-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
}
.advisor-type-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Views vs Focus Peak scatter ───────────────────────────────────────── */
.channel-hub-wide { grid-column: 1 / -1; }
.scatter-card { }
.scatter-wrap { overflow-x: auto; }
.scatter-svg { width: 100%; max-width: 640px; height: auto; display: block; }
.scatter-dot { cursor: pointer; transition: opacity 0.15s; }
.scatter-dot:hover { opacity: 1 !important; stroke-width: 2.5; }
.scatter-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.scatter-legend-item { display: flex; align-items: center; gap: 0.3rem; }

/* ── Evidence Diagnostic table ──────────────────────────────────────────── */
.diag-table .diag-title { max-width: 28ch; }
.diag-table .diag-link { color: var(--text); text-decoration: none; }
.diag-table .diag-link:hover { text-decoration: underline; color: var(--accent); }
.diag-table .diag-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.diag-table .diag-of { color: var(--muted); font-size: 0.8em; }
.diag-row.diag-good td { background: #f0fdf4; }
.diag-row.diag-warn td { background: #fffbeb; }
.diag-row.diag-passive td { background: #fff1f2; }
.diag-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
              font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.diag-badge-good    { background: #dcfce7; color: #15803d; }
.diag-badge-warn    { background: #fef9c3; color: #a16207; }
.diag-badge-passive { background: #ffe4e6; color: #b91c1c; }

/* ── Activity Log ──────────────────────────────────────────────────────── */
.activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.activity-filters select,
.activity-filters input[type="date"] {
  height: 2.2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  background: var(--card);
  color: var(--text);
}
.activity-log-table .activity-date { white-space: nowrap; font-size: 0.8rem; color: var(--muted); }
.activity-log-table .activity-detail { font-size: 0.8rem; color: var(--muted); max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--soft);
  color: var(--muted);
}
.action-badge.badge-advisor { background: #e8f4ff; color: #2557d6; }
.action-badge.badge-mine    { background: #e8fff4; color: #0a7a4c; }
.action-badge.badge-share   { background: #fff3e0; color: #c77700; }
.action-badge.badge-pdf     { background: #f3e8ff; color: #7c3aed; }
.activity-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

/* ── Viewport-safe responsive layer ───────────────────────────────────────
   Kept at the end so these rules win over the desktop modal definitions. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe {
  max-width: 100%;
}

.modal-overlay {
  width: 100%;
  min-width: 0;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-card {
  width: min(100%, 400px);
  min-width: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-card.share-modal-card {
  width: min(820px, 100%);
  max-width: 820px;
}

@media (max-width: 980px) {
  .sidebar {
    position: sticky;
    inset: auto;
    top: 0;
    z-index: 900;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .sidebar .brand {
    flex: 0 1 170px;
    width: min(170px, calc(100% - 110px));
    height: 40px;
    margin: 0;
    padding: 3px 8px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 13px;
    background: rgba(0, 137, 127, .2);
    border-color: rgba(125, 249, 232, .3);
    color: #fff;
    box-shadow: none;
  }

  .mobile-menu-icon {
    font-size: 19px;
    line-height: 1;
  }

  .sidebar nav {
    flex: 0 0 100%;
    min-width: 0;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding-top: 4px;
  }

  .sidebar.menu-open nav {
    display: grid;
  }

  .sidebar a {
    padding: 9px 10px;
    white-space: normal;
  }

  .shell {
    width: 100%;
    margin-left: 0;
    padding: 14px;
  }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .topbar-center {
    order: -1;
    width: 100%;
  }

  .topbar-logo {
    width: min(240px, 70vw);
    height: 72px;
  }

  .topbar-left {
    min-width: 0;
    flex: 1 1 180px;
  }

  .topbar-right {
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: wrap;
  }

  .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .shell { padding: 10px; }

  .sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    align-items: stretch;
    margin-bottom: 12px;
  }

  .topbar-logo {
    width: min(210px, 72vw);
    height: 60px;
  }

  .topbar-left,
  .topbar-right {
    width: 100%;
    flex-basis: 100%;
  }

  .topbar-right {
    justify-content: flex-start;
    gap: 7px;
  }

  .topbar-right button {
    min-width: 0;
    padding-inline: 9px;
  }

  .panel,
  .table-panel,
  .video-panel,
  .usage-card {
    min-width: 0;
  }

  .panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .panel-head > button,
  .target-grid > button,
  .target-grid > input,
  .target-grid > .target-url-field,
  .target-grid > select,
  .channel-tools > input,
  .channel-tools > select {
    width: 100%;
    min-width: 0;
  }

  .usage-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .usage-head strong {
    overflow-wrap: anywhere;
  }

  .insight-panel .moments-list,
  .insight-panel .comments-list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .modal-overlay {
    align-items: flex-start;
    justify-content: center;
    padding: 8px;
  }

  .modal-card,
  .modal-card.share-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 24px 18px 18px;
    border-radius: 12px;
  }

  .modal-input,
  .modal-primary {
    min-width: 0;
    font-size: 16px;
  }

  .modal-footer-btns,
  .share-pin-row,
  .share-created-pin-row,
  .share-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-footer-btns button,
  .share-pin-row button,
  .share-created-link-row button,
  .share-row-actions button {
    width: 100%;
  }

  .share-link-row {
    flex-direction: column;
  }

  .share-link-row small {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── Mobile sidebar ──────────────────────────────────────── */

@media (max-width: 980px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22, .68, 0, 1.08);
    box-shadow: none;
  }
  .sidebar.menu-open {
    transform: translateX(0);
    box-shadow: 10px 0 48px rgba(10, 18, 40, .34);
  }
  .shell {
    margin-left: 0;
  }
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 300;
    height: 38px;
    padding: 0 13px;
    border-radius: 8px;
    background: #0c1932;
    color: #d4eef8;
    border: 1px solid rgba(125, 249, 232, .20);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(10, 18, 40, .30);
  }
  .shell {
    padding-top: 62px;
  }
}

/* Final dark-theme coverage for plan and help surfaces. */
:root[data-theme="dark"] .plans-section {
  border-color: rgba(86,204,242,.20);
  background:
    radial-gradient(circle at 8% 0%, rgba(0,229,199,.14), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(86,204,242,.13), transparent 31%),
    linear-gradient(180deg, #0c1932 0%, #06101f 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
  color: var(--ink);
}

:root[data-theme="dark"] .plans-head span,
:root[data-theme="dark"] .help-lang {
  background: rgba(0,229,199,.13);
  color: var(--accent);
}

:root[data-theme="dark"] .plans-head h2,
:root[data-theme="dark"] .compare-title,
:root[data-theme="dark"] .plan-card h3,
:root[data-theme="dark"] .help-card h3,
:root[data-theme="dark"] .help-section h4 {
  color: #f2f7fb;
}

:root[data-theme="dark"] .plans-head p,
:root[data-theme="dark"] .compare-note,
:root[data-theme="dark"] .plan-card p,
:root[data-theme="dark"] .plan-card li,
:root[data-theme="dark"] .help-intro,
:root[data-theme="dark"] .help-card p,
:root[data-theme="dark"] .help-card li,
:root[data-theme="dark"] .help-section p,
:root[data-theme="dark"] .help-section li,
:root[data-theme="dark"] .help-metric p {
  color: var(--muted);
}

:root[data-theme="dark"] .compare-wrap {
  background: rgba(17,34,54,.88);
  border-color: rgba(86,204,242,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 38px rgba(0,0,0,.20);
}

:root[data-theme="dark"] .compare-table th.col-ours {
  background: rgba(0,229,199,.08);
  color: var(--accent);
}

:root[data-theme="dark"] .compare-table td:first-child {
  color: #dbe8f3;
}

:root[data-theme="dark"] .compare-table .cell-no {
  color: #b7c8d8;
}

:root[data-theme="dark"] .compare-table .cell-yes {
  background: rgba(0,229,199,.08);
  color: #dffcf7;
}

:root[data-theme="dark"] .plan-top strong,
:root[data-theme="dark"] .plan-foot {
  color: var(--accent-2);
}

:root[data-theme="dark"] .plans-billing-toggle {
  background: rgba(86,204,242,.08);
  border-color: rgba(86,204,242,.22);
}
:root[data-theme="dark"] .billing-toggle-btn {
  color: var(--muted);
}
:root[data-theme="dark"] .billing-toggle-btn.active {
  background: var(--panel);
  color: #f2f7fb;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

:root[data-theme="dark"] .plan-foot,
:root[data-theme="dark"] .help-section,
:root[data-theme="dark"] .help-card p {
  border-color: rgba(86,204,242,.15);
}

:root[data-theme="dark"] .plan-badge {
  background: rgba(86,204,242,.13);
  color: #dceeff;
}

:root[data-theme="dark"] .trial .plan-badge {
  background: rgba(214,230,241,.13);
  color: #d9e8f5;
}

:root[data-theme="dark"] .featured .plan-badge {
  background: var(--accent);
  color: #06111e;
}

:root[data-theme="dark"] .enterprise .plan-badge {
  background: var(--accent-2);
  color: #06111e;
}

:root[data-theme="dark"] .help-modal {
  background: rgba(4,10,18,.78);
}

:root[data-theme="dark"] .help-dialog {
  border-color: rgba(86,204,242,.22);
  background:
    radial-gradient(circle at 10% 0%, rgba(0,229,199,.12), transparent 34%),
    linear-gradient(180deg, #0c1932 0%, #06101f 100%);
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
}

:root[data-theme="dark"] .help-dialog-head {
  border-bottom-color: rgba(86,204,242,.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(0,229,199,.22), transparent 42%),
    #10233d;
}

:root[data-theme="dark"] .help-dialog-body {
  scrollbar-color: #3a5876 #081625;
}

:root[data-theme="dark"] .help-dialog-body::-webkit-scrollbar-track {
  background: #081625;
}

:root[data-theme="dark"] .help-dialog-body::-webkit-scrollbar-thumb {
  border-color: #081625;
  background: #3a5876;
}

:root[data-theme="dark"] .help-card,
:root[data-theme="dark"] .legal-card {
  background: rgba(17,34,54,.88);
  border-color: rgba(86,204,242,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .help-section h5,
:root[data-theme="dark"] .help-metric strong,
:root[data-theme="dark"] .help-note strong {
  color: var(--accent-2);
}

:root[data-theme="dark"] .help-formula {
  background: rgba(0,229,199,.10);
  border-left-color: var(--accent);
  color: #dffcf7;
}

:root[data-theme="dark"] .help-metric,
:root[data-theme="dark"] .help-note {
  background: rgba(86,204,242,.07);
  border-color: rgba(86,204,242,.18);
  color: var(--muted);
}

/* Channel Hub must follow the theme switch, including Trace Map internals. */
:root[data-theme="light"] #channelHub {
  --bg: #e7eef5;
  --panel: #f7f9fc;
  --ink: #101828;
  --muted: #526174;
  --line: #cdd8e5;
  --accent: #00897f;
  --accent-2: #2557d6;
  --risk: #d92d5c;
  --warn: #c77700;
  --soft: #eef5f8;
  background:
    radial-gradient(circle at 14% 0%, rgba(0,137,127,.14), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(37,87,214,.13), transparent 32%),
    linear-gradient(180deg, #f7f9fc 0%, #e8f2f8 100%);
  border-color: rgba(37,87,214,.18);
  color: var(--ink);
}

:root[data-theme="light"] #channelHub button.ghost {
  background: var(--ghost-bg);
  color: #173b68;
  border-color: #b9c8d8;
  box-shadow: none;
}

:root[data-theme="light"] #channelHub select,
:root[data-theme="light"] #channelHub input {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--line);
}

:root[data-theme="light"] #channelHub .metric,
:root[data-theme="light"] #channelHub .panel,
:root[data-theme="light"] #channelHub .usage-card,
:root[data-theme="light"] #channelHub .channel-pulse-card,
:root[data-theme="light"] #channelHub .channel-hub-card,
:root[data-theme="light"] #channelHub .table-wrap {
  background: var(--panel-bg);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

:root[data-theme="light"] #channelHub th {
  background: var(--table-head-bg);
  color: var(--muted);
  box-shadow: inset 0 -1px 0 var(--line);
}

:root[data-theme="light"] #channelHub tbody tr:nth-child(even) td {
  background: var(--table-row-alt);
}

:root[data-theme="light"] #channelHub tr:hover td {
  background: rgba(37,87,214,.06);
}

:root[data-theme="light"] #channelHub .workspace-scope {
  color: var(--accent-2);
  border-color: rgba(37,87,214,.22);
  background: rgba(37,87,214,.06);
}

:root[data-theme="light"] #channelHub .channel-hook-card {
  border-color: rgba(0,137,127,.22);
  background:
    radial-gradient(circle at top left, rgba(0,137,127,.10), transparent 34%),
    var(--panel);
}

:root[data-theme="light"] #channelHub .channel-hook-head > strong {
  color: var(--accent);
  background: rgba(0,137,127,.10);
}

:root[data-theme="light"] #channelHub .channel-hook-metrics span,
:root[data-theme="light"] #channelHub .hook-video {
  border-color: var(--line);
  background: var(--panel);
}

:root[data-theme="light"] #channelHub .channel-signal-row div,
:root[data-theme="light"] #channelHub .clip-yield-list article div {
  background: rgba(15,23,42,.08);
}

:root[data-theme="light"] #channelHub .channel-top-moments article,
:root[data-theme="light"] #channelHub .clip-yield-list article {
  border-color: var(--line);
  background: var(--panel);
}

:root[data-theme="light"] #channelHub .channel-matrix .matrix-bg {
  fill: rgba(240,249,255,.76);
  stroke: rgba(148,163,184,.35);
}

:root[data-theme="light"] #channelHub .channel-matrix .matrix-axis {
  stroke: rgba(100,116,139,.18);
}

:root[data-theme="light"] #channelHub .channel-matrix .matrix-grid-tick line {
  stroke: rgba(100,116,139,.11);
}

:root[data-theme="light"] #channelHub .channel-matrix .matrix-grid-tick text,
:root[data-theme="light"] #channelHub .channel-matrix .matrix-zone-label,
:root[data-theme="light"] #channelHub .channel-matrix-zone-legend span,
:root[data-theme="light"] #channelHub .scatter-legend,
:root[data-theme="light"] #channelHub .scatter-svg text {
  color: var(--muted);
  fill: var(--muted);
}

:root[data-theme="light"] #channelHub .channel-matrix-zone-legend span {
  border-color: rgba(148,163,184,.24);
  background: rgba(255,255,255,.72);
}

:root[data-theme="light"] #channelHub .matrix-action-card {
  border-color: rgba(148,163,184,.24);
  background: rgba(248,251,255,.82);
}

:root[data-theme="light"] #channelHub .matrix-action-card.star { background: rgba(209,250,229,.40); }
:root[data-theme="light"] #channelHub .matrix-action-card.hook { background: rgba(219,234,254,.42); }
:root[data-theme="light"] #channelHub .matrix-action-card.volume { background: rgba(254,249,195,.42); }
:root[data-theme="light"] #channelHub .matrix-action-card.cold { background: rgba(241,245,249,.78); }

:root[data-theme="light"] #channelHub .matrix-action-card strong {
  color: var(--ink);
}

:root[data-theme="light"] #channelHub .matrix-action-card p {
  color: var(--muted);
}

:root[data-theme="light"] #channelHub .matrix-action-card span {
  color: var(--accent);
}

:root[data-theme="light"] #channelHub .channel-advisor-box {
  border-color: rgba(0,137,127,.22);
  background: linear-gradient(135deg, rgba(230,255,250,.74), rgba(255,255,255,.84));
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

:root[data-theme="light"] #channelHub .channel-advisor-box h3,
:root[data-theme="light"] #channelHub .channel-advisor-box strong {
  color: var(--ink);
}

:root[data-theme="light"] #channelHub .channel-advisor-box p,
:root[data-theme="light"] #channelHub .channel-advisor-box .muted,
:root[data-theme="light"] #channelHub .channel-advisor-box .advisor-status {
  color: var(--muted);
}

:root[data-theme="light"] #channelHub .channel-advisor-meta {
  background: rgba(0,137,127,.08);
  color: var(--muted);
}

:root[data-theme="light"] #channelHub .channel-advisor-box .advisor-result,
:root[data-theme="light"] #channelHub .channel-advisor-box .empty-insight {
  border-color: var(--line);
  background: rgba(255,255,255,.72);
  color: var(--ink);
}

:root[data-theme="light"] #channelHub .channel-advisor-box button.ghost {
  background: var(--ghost-bg);
  color: #173b68;
  border-color: #b9c8d8;
}

:root[data-theme="dark"] #channelHub .channel-matrix-point {
  stroke: #e8f7ff;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.34));
}

:root[data-theme="dark"] #channelHub .channel-matrix-key button {
  background: rgba(17,34,54,.72);
  border-color: rgba(86,204,242,.14);
  color: #b9ccdc;
}

:root[data-theme="dark"] #channelHub .channel-matrix-key button.zone-star {
  border-left-color: #00e676;
  background: rgba(0,230,118,.12);
}

:root[data-theme="dark"] #channelHub .channel-matrix-key button.zone-hook {
  border-left-color: #56ccf2;
  background: rgba(86,204,242,.12);
}

:root[data-theme="dark"] #channelHub .channel-matrix-key button.zone-volume {
  border-left-color: #ffd740;
  background: rgba(255,215,64,.13);
}

:root[data-theme="dark"] #channelHub .channel-matrix-key button.zone-cold {
  border-left-color: #6a8fa8;
  background: rgba(106,143,168,.13);
}

:root[data-theme="dark"] #channelHub .channel-matrix-key button:hover,
:root[data-theme="dark"] #channelHub .channel-matrix-key button:focus,
:root[data-theme="dark"] #channelHub .channel-matrix-key button.active {
  background: rgba(86,204,242,.16);
  border-color: rgba(86,204,242,.34);
  color: #f2f7fb;
}

:root[data-theme="dark"] #channelHub .channel-matrix-key .matrix-key-title {
  color: #bcd0df;
}

:root[data-theme="dark"] #channelHub .channel-matrix-key .matrix-key-coord {
  background: rgba(0,0,0,.24);
  color: var(--accent-2);
}

:root[data-theme="dark"] #channelHub .channel-matrix-key i {
  box-shadow: 0 4px 9px rgba(0,0,0,.30);
}

:root[data-theme="dark"] #channelHub .channel-matrix-notes article {
  border-color: rgba(86,204,242,.18);
  background: rgba(17,34,54,.84);
}

:root[data-theme="dark"] #channelHub .channel-matrix-notes article.good {
  border-left-color: #00e676;
  background: rgba(0,230,118,.10);
}

:root[data-theme="dark"] #channelHub .channel-matrix-notes article.watch {
  border-left-color: #ffd740;
  background: rgba(255,215,64,.10);
}

:root[data-theme="dark"] #channelHub .channel-matrix-notes article.risk {
  border-left-color: #ff5c7a;
  background: rgba(255,92,122,.10);
}

:root[data-theme="dark"] #channelHub .channel-matrix-notes strong {
  color: #f2f7fb;
}

:root[data-theme="dark"] #channelHub .channel-matrix-notes span {
  color: #a9bfd1;
}

:root[data-theme="light"] #videos {
  --bg: #e7eef5;
  --panel: #f7f9fc;
  --ink: #101828;
  --muted: #526174;
  --line: #cdd8e5;
  --accent: #00897f;
  --accent-2: #2557d6;
  --risk: #d92d5c;
  --warn: #c77700;
  --soft: #eef5f8;
  background:
    radial-gradient(circle at 14% 0%, rgba(0,137,127,.14), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(37,87,214,.13), transparent 32%),
    linear-gradient(180deg, #f7f9fc 0%, #e8f2f8 100%);
  border-color: rgba(37,87,214,.18);
  color: var(--ink);
}

:root[data-theme="light"] #videos .table-panel,
:root[data-theme="light"] #videos .video-panel,
:root[data-theme="light"] #videos .table-wrap {
  background: var(--panel-bg);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

:root[data-theme="light"] #videos .top-videos-methodology {
  background: rgba(14, 165, 233, .07);
  color: #496279;
}

:root[data-theme="light"] #videos button.ghost {
  background: var(--ghost-bg);
  color: #173b68;
  border-color: #b9c8d8;
  box-shadow: none;
}

:root[data-theme="light"] #videos button.ghost:hover:not(:disabled) {
  color: var(--ink);
  border-color: rgba(37,87,214,.30);
  box-shadow: 0 8px 16px rgba(37,87,214,.12);
}

:root[data-theme="light"] #videos select,
:root[data-theme="light"] #videos input {
  background: var(--field-bg);
  color: var(--ink);
  border-color: var(--line);
}

:root[data-theme="light"] #videos th {
  background: var(--table-head-bg);
  color: var(--muted);
  box-shadow: inset 0 -1px 0 var(--line);
}

:root[data-theme="light"] #videos tbody tr:nth-child(even) td {
  background: var(--table-row-alt);
}

:root[data-theme="light"] #videos tr:hover td {
  background: rgba(37,87,214,.06);
}

:root[data-theme="light"] #videos tr.selected td {
  background: rgba(0,137,127,.09);
  box-shadow: inset 3px 0 0 var(--accent);
}

:root[data-theme="light"] #videos .row-number {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
}

:root[data-theme="light"] #videos tr.selected .row-number {
  border-color: rgba(0,137,127,.34);
  background: rgba(0,137,127,.12);
  color: var(--accent);
}

:root[data-theme="light"] #videos .score100 {
  background: rgba(0,137,127,.11);
  color: var(--accent);
}

:root[data-theme="light"] #videos .signal-chip {
  border-color: var(--line);
  background: var(--ghost-bg);
  box-shadow: none;
}

:root[data-theme="light"] #videos .selected-metrics {
  background: rgba(37,87,214,.04);
  border-color: var(--line);
}

:root[data-theme="light"] #videos .video-insights {
  background: var(--card-bg);
  border-color: var(--line);
  box-shadow: 0 8px 18px rgba(16,24,40,.04);
}

:root[data-theme="light"] #videos .kpi-help {
  border-color: rgba(37,87,214,.24);
  color: var(--accent-2);
  background: rgba(37,87,214,.06);
}

:root[data-theme="light"] #videos .video-kpi-icon {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="light"] #videos .video-kpi-track {
  background:
    linear-gradient(90deg, rgba(15,23,42,.06) 0 1px, transparent 1px) 0 0 / 10% 100%,
    #d4e1ed;
}

:root[data-theme="light"] #videos .timeline {
  border-color: var(--line);
  background:
    linear-gradient(90deg, rgba(15,23,42,.06) 0 1px, transparent 1px) 0 0 / 10% 100%,
    linear-gradient(180deg, #f7f9fc, #eaf3f9);
}

:root[data-theme="light"] #videos .timeline-lane-track {
  background:
    linear-gradient(90deg, rgba(15,23,42,.06) 0 1px, transparent 1px) 0 0 / 10% 100%,
    color-mix(in srgb, var(--dna-color) 14%, #edf4f9);
}

:root[data-theme="light"] #videos .narrative-flow-panel {
  border-color: rgba(37,87,214,.18);
  background:
    radial-gradient(circle at 10% 0%, rgba(0,137,127,.10), transparent 34%),
    linear-gradient(180deg, #f7f9fc, #eaf3f9);
}

:root[data-theme="light"] #videos .narrative-flow-chart {
  border-color: var(--line);
  background: rgba(255,255,255,.62);
}

:root[data-theme="light"] #videos .narrative-flow-kicker {
  color: var(--accent-2);
}

:root[data-theme="light"] #videos .video-advisor {
  border-color: rgba(0,137,127,.22);
  background: var(--card-bg);
  box-shadow: 0 8px 18px rgba(16,24,40,.04);
}

:root[data-theme="light"] #videos .advisor-meta-line {
  border-color: rgba(0,137,127,.22);
  background: rgba(0,137,127,.08);
  color: var(--accent);
}

:root[data-theme="light"] #videos .advisor-result .advisor-hr {
  border-top-color: var(--line);
}

:root[data-theme="light"] #videos .advisor-result .advisor-section-head {
  color: var(--accent-2);
  border-bottom-color: rgba(37,87,214,.18);
}

:root[data-theme="light"] #videos .advisor-result .advisor-section-head:first-child {
  background: rgba(0,137,127,.08);
  color: var(--accent);
}

:root[data-theme="light"] #videos .advisor-result .advisor-section-head:first-child + .advisor-p {
  background: rgba(0,137,127,.05);
  border-left-color: var(--accent);
}

:root[data-theme="light"] #videos .advisor-result .advisor-table th {
  color: var(--muted);
  border-bottom-color: var(--line);
}

:root[data-theme="light"] #videos .advisor-result .advisor-table td {
  border-bottom-color: var(--line);
}

:root[data-theme="light"] #videos .advisor-result .advisor-table tr:nth-child(even) td {
  background: rgba(37,87,214,.035);
}

@media (max-width: 1180px) {
  .toolbar-top-row {
    grid-template-columns: 1fr;
  }

  .toolbar-actions .toolbar-control-row {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .toolbar-mining .toolbar-control-row {
    grid-template-columns: minmax(190px, 1fr) minmax(160px, .8fr) 34px;
  }
}

@media (max-width: 720px) {
  .player-toolbar {
    padding: 7px;
  }

  .toolbar-mining .toolbar-control-row,
  .toolbar-actions .toolbar-control-row {
    grid-template-columns: 1fr;
  }

  .toolbar-status-line {
    flex-wrap: wrap;
  }

  .compact-select,
  .mine-video-action,
  .export-btn {
    width: 100%;
    max-width: none;
  }

  .mini-help-btn {
    width: 34px;
    flex: 0 0 34px;
  }
}
/* Clip Points Studio */
.clip-points-studio { max-width: 1440px; }
.clip-studio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.clip-studio-head h2 { margin: 2px 0 4px; font-size: 26px; letter-spacing: 0; }
.clip-studio-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(120px, .65fr) minmax(130px, .65fr) minmax(130px, .65fr) minmax(130px, .65fr) 92px minmax(120px, .55fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
  margin: 14px 0;
}
.clip-studio-controls label { display: grid; gap: 5px; min-width: 0; }
.clip-studio-controls label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.clip-studio-controls select,
.clip-studio-controls input { width: 100%; min-height: 38px; }
.clip-channel-context {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.5fr);
  align-items: stretch;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid rgba(0, 201, 183, .42);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 201, 183, .16), rgba(37, 87, 214, .08)),
    var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.14);
}
.clip-channel-name {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid rgba(0, 201, 183, .22);
}
.clip-channel-name span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.clip-channel-name strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.clip-channel-metrics {
  display: grid;
  grid-template-columns: minmax(105px, .65fr) minmax(135px, .75fr) minmax(260px, 1.35fr) minmax(240px, 1.25fr);
  gap: 10px;
  min-width: 0;
}
.clip-channel-metrics span {
  display: grid;
  align-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 201, 183, .14);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}
.clip-channel-metrics .clip-tier-summary {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.clip-tier-summary b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}
.clip-tier-summary .tier-high {
  color: #047857;
  background: rgba(16,185,129,.16);
}
.clip-tier-summary .tier-medium {
  color: #1d4ed8;
  background: rgba(37,99,235,.14);
}
.clip-tier-summary .tier-low {
  color: #b45309;
  background: rgba(245,158,11,.16);
}
:root[data-theme="dark"] .clip-tier-summary .tier-high {
  color: #4ade80;
  background: rgba(34,197,94,.22);
}
:root[data-theme="dark"] .clip-tier-summary .tier-medium {
  color: #60a5fa;
  background: rgba(59,130,246,.22);
}
:root[data-theme="dark"] .clip-tier-summary .tier-low {
  color: #fbbf24;
  background: rgba(245,158,11,.22);
}
.clip-studio-layout {
  display: grid;
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
.clip-mobile-tabs {
  display: none;
}
.clip-videos-panel,
.clip-points-panel,
.clip-detail-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  min-width: 0;
}
.clip-videos-panel,
.clip-detail-panel { padding: 12px; }
.clip-videos-panel {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.clip-points-panel {
  grid-column: 2;
  grid-row: 1;
}
.clip-detail-panel {
  grid-column: 2;
  grid-row: 2;
}
.clip-points-panel { overflow: hidden; }
.clip-points-panel .clip-section-title {
  padding: 12px 12px 0;
}
.clip-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.clip-section-title h3 { margin: 0; font-size: 15px; }
.clip-section-title span { color: var(--muted); font-size: 12px; font-weight: 900; }
.clip-package-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.clip-package-actions .compact-btn {
  min-height: 30px;
  padding: 6px 10px;
}
.clip-package-actions span {
  min-width: 42px;
  text-align: right;
}
.clip-points-context {
  margin: 4px 0 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}
.clip-video-list { display: grid; gap: 8px; max-height: 650px; overflow: auto; }
.clip-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title tier" "meta meta" "rec rec";
  gap: 7px 10px;
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.clip-video-card:hover,
.clip-video-card.active {
  border-color: rgba(0, 137, 127, .7);
  box-shadow: 0 0 0 2px rgba(0, 137, 127, .12);
}
.clip-video-title {
  grid-area: title;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: break-word;
  white-space: normal;
}
.clip-video-meta {
  grid-area: meta;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
.clip-video-rec {
  grid-area: rec;
  display: block;
  padding: 7px 8px;
  border-left: 3px solid rgba(0, 201, 183, .72);
  border-radius: 6px;
  background: rgba(0, 201, 183, .07);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
}
.clip-yield-tier {
  grid-area: tier;
  align-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.clip-yield-tier.tier-high { color: #047857; background: rgba(16,185,129,.14); }
.clip-yield-tier.tier-medium { color: #1d4ed8; background: rgba(37,99,235,.13); }
.clip-yield-tier.tier-low { color: #b45309; background: rgba(245,158,11,.14); }
:root[data-theme="dark"] .clip-yield-tier.tier-high { color: #4ade80; background: rgba(34,197,94,.22); }
:root[data-theme="dark"] .clip-yield-tier.tier-medium { color: #60a5fa; background: rgba(59,130,246,.22); }
:root[data-theme="dark"] .clip-yield-tier.tier-low { color: #fbbf24; background: rgba(245,158,11,.22); }
.clip-table-wrap { overflow: auto; max-height: 330px; }
.clip-points-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  table-layout: fixed;
}
.clip-points-table th,
.clip-points-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 12px;
}
.clip-points-table th:nth-child(1),
.clip-points-table td:nth-child(1) { width: 42px; text-align: center; }
.clip-points-table th:nth-child(2),
.clip-points-table td:nth-child(2) { width: 72px; }
.clip-points-table th:nth-child(3),
.clip-points-table td:nth-child(3) { width: 110px; }
.clip-points-table th:nth-child(4),
.clip-points-table td:nth-child(4) { width: 112px; }
.clip-points-table th:nth-child(5),
.clip-points-table td:nth-child(5) { width: 86px; }
.clip-points-table th:nth-child(6),
.clip-points-table td:nth-child(6) { width: 300px; }
.clip-points-table th:nth-child(7),
.clip-points-table td:nth-child(7) { width: 82px; }
.clip-points-table th:nth-child(8),
.clip-points-table td:nth-child(8) { width: 88px; }
.clip-points-table th:nth-child(9),
.clip-points-table td:nth-child(9) { width: 88px; }
.clip-points-table th:nth-child(2),
.clip-points-table td:nth-child(2),
.clip-points-table td:nth-child(2) a {
  white-space: nowrap;
  word-break: keep-all;
}
.clip-points-table td:nth-child(3) {
  overflow-wrap: anywhere;
}
.clip-points-table.mode-video th:nth-child(3),
.clip-points-table.mode-video td:nth-child(3) {
  display: none;
}
.clip-points-table.mode-video th:nth-child(6),
.clip-points-table.mode-video td:nth-child(6) {
  width: 320px;
}
.clip-points-table .clip-select-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.clip-video-inline {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}
.clip-points-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-head-bg);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.clip-points-table tr { cursor: pointer; }
.clip-points-table tbody tr:hover,
.clip-points-table tbody tr.selected { background: rgba(0, 137, 127, .08); }
.clip-points-table tbody tr.brand-risk { background: rgba(245, 158, 11, .045); }
.clip-points-table a { color: var(--accent); font-weight: 900; text-decoration: none; }
.clip-timestamp-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
}
.clip-timestamp-link:hover,
.clip-timestamp-link:focus-visible {
  text-decoration: underline;
  outline: none;
}
.clip-points-table small { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.clip-risk-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 6px 4px 0;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(217, 119, 6, .16);
  color: #b45309;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
:root[data-theme="dark"] .clip-risk-chip {
  background: rgba(245, 158, 11, .22);
  color: #fbbf24;
}
.clip-evidence {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  line-height: 1.4;
  cursor: help;
}
.clip-signal,
.clip-format,
.clip-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(0, 137, 127, .10);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.clip-status.status-selected { color: #0f766e; background: rgba(20,184,166,.14); }
.clip-status.status-produced { color: #047857; background: rgba(34,197,94,.14); }
.clip-status.status-discarded { color: #be123c; background: rgba(244,63,94,.13); }
:root[data-theme="dark"] .clip-status.status-selected { color: #2dd4bf; background: rgba(45,212,191,.20); }
:root[data-theme="dark"] .clip-status.status-produced { color: #4ade80; background: rgba(34,197,94,.20); }
:root[data-theme="dark"] .clip-status.status-discarded { color: #fb7185; background: rgba(244,63,94,.20); }
.clip-detail-panel {
  position: static;
  top: auto;
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 12px 14px;
  align-items: start;
}
.clip-detail-empty { color: var(--muted); font-size: 13px; line-height: 1.5; }
.clip-detail-empty {
  grid-column: 1 / -1;
}
.clip-detail-titlebar {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 201, 183, .2);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0, 201, 183, .13), rgba(37, 87, 214, .07));
}
.clip-detail-titlebar div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.clip-detail-titlebar span {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clip-detail-titlebar strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.clip-detail-titlebar small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}
.clip-detail-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.clip-detail-tabs button {
  display: grid;
  gap: 2px;
  align-content: center;
  text-align: left;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ghost-bg);
  color: var(--muted);
  font-weight: 900;
}
.clip-detail-tabs button strong {
  color: inherit;
  font-size: 12px;
  line-height: 1.1;
}
.clip-detail-tabs button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.clip-detail-tabs button.active {
  border-color: rgba(0, 229, 199, .5);
  background: rgba(0, 201, 183, .14);
  color: var(--accent);
}
.clip-tab-note {
  grid-column: 1 / -1;
  margin: -2px 0 2px;
  padding: 8px 10px;
  border-left: 3px solid rgba(0, 201, 183, .68);
  border-radius: 6px;
  background: rgba(0, 137, 127, .055);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}
.clip-detail-tab-section[hidden] {
  display: none !important;
}
.clip-algorithmic-label {
  grid-column: 2;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clip-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.clip-detail-head,
.clip-detail-panel > h3,
.clip-detail-meta,
.clip-production-metrics,
.clip-platform-row,
.clip-detail-actions {
  grid-column: 1;
}
.clip-production-brief {
  grid-column: 2;
}
.clip-samples,
.clip-curation-box,
.clip-advisor-box {
  grid-column: 1 / -1;
}
.clip-detail-timestamp {
  display: grid;
  gap: 7px;
  justify-items: start;
}
.clip-detail-timestamp span {
  color: var(--accent);
  font-size: 22px;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 900;
}
.clip-open-timestamp {
  border-color: rgba(0, 229, 199, .42);
  color: var(--accent);
}
.clip-detail-head strong {
  display: grid;
  gap: 1px;
  justify-items: end;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(0, 137, 127, .13);
  color: var(--accent);
}
.clip-detail-head strong small {
  color: var(--muted);
  font-size: 9px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.clip-detail-panel h3 { margin: 10px 0 10px; font-size: 15px; line-height: 1.28; }
.clip-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.clip-detail-meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}
.clip-production-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 12px;
}
.clip-production-metrics div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(0, 137, 127, .14);
  border-radius: 7px;
  background: var(--soft);
}
.clip-production-metrics span,
.clip-production-brief span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.clip-production-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.clip-production-brief {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.clip-production-brief div {
  padding: 8px 9px;
  border-left: 3px solid rgba(0, 201, 183, .68);
  border-radius: 6px;
  background: rgba(0, 137, 127, .055);
}
.clip-production-brief p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.42;
}
.clip-platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.clip-platform-row span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .12);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 900;
}
.clip-samples { display: grid; gap: 8px; }
.clip-evidence-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 201, 183, .16);
  border-radius: 7px;
  background: rgba(0, 137, 127, .055);
}
.clip-evidence-head span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clip-evidence-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.clip-evidence-support-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.clip-evidence-support-meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}
.clip-samples blockquote {
  margin: 0;
  padding: 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: rgba(0, 137, 127, .08);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}
.clip-curation-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(0, 137, 127, .18);
  border-radius: 8px;
  background: rgba(0, 137, 127, .06);
}
.clip-curation-box label {
  display: grid;
  gap: 5px;
}
.clip-curation-box label span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.clip-curation-box select,
.clip-curation-box textarea {
  width: 100%;
}
.clip-curation-box textarea {
  resize: vertical;
  min-height: 78px;
}
.clip-advisor-box {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 8px;
  background: rgba(37, 99, 235, .07);
}
.clip-advisor-box label {
  display: grid;
  gap: 5px;
}
.clip-advisor-box label span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.clip-advisor-box select {
  width: 100%;
}
.clip-advisor-box small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.clip-advisor-note {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid rgba(37, 99, 235, .55);
  border-radius: 6px;
  background: rgba(37, 99, 235, .08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}
.clip-advisor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.clip-advisor-result {
  display: grid;
  gap: 8px;
}
.clip-advisor-result p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.clip-advisor-result pre {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px;
  border-radius: 7px;
  background: var(--soft);
}
.clip-advisor-markdown {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  border-radius: 7px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.48;
}
.clip-advisor-markdown h3,
.clip-advisor-markdown h4,
.clip-advisor-markdown h5 {
  margin: 6px 0 0;
  color: var(--accent);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.25;
}
.clip-advisor-markdown p {
  margin: 0;
  color: var(--ink);
}
.clip-advisor-markdown ul {
  margin: 0;
  padding-left: 18px;
}
.clip-advisor-markdown li {
  margin: 4px 0;
}
.clip-advisor-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.clip-advisor-meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}
.clip-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.clip-inline-player {
  margin-top: 12px;
  border: 1px solid rgba(0, 201, 183, .2);
  border-radius: 8px;
  background: rgba(8, 27, 45, .42);
  overflow: hidden;
}
.clip-inline-player:focus {
  outline: 2px solid rgba(0, 229, 199, .5);
  outline-offset: 3px;
}
.clip-inline-player-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.clip-inline-player-head {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(0, 201, 183, .14);
}
.clip-inline-player-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.clip-inline-player-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.clip-inline-player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
.clip-player-modal {
  z-index: 1800;
  padding: 18px;
  background: rgba(3, 10, 22, .78);
  backdrop-filter: blur(8px);
}
.clip-player-dialog {
  width: min(1040px, 96vw);
  max-height: 92vh;
  border: 1px solid rgba(0, 201, 183, .3);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  overflow: hidden;
}
.clip-player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 201, 183, .18);
  background: linear-gradient(90deg, rgba(0, 201, 183, .12), rgba(37, 87, 214, .08));
}
.clip-player-head span {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clip-player-head h3 {
  margin: 3px 0 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}
.clip-player-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.clip-player-close {
  position: static;
  flex: 0 0 34px;
}
.clip-player-frame {
  background: #000;
}
.clip-player-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

@media (max-width: 1180px) {
  .clip-studio-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clip-search-control { grid-column: span 2; }
  .clip-channel-context { grid-template-columns: 1fr; }
  .clip-channel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clip-channel-name { border-right: 0; border-bottom: 1px solid rgba(0, 201, 183, .22); padding: 0 0 12px; }
  .clip-studio-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .clip-table-wrap { max-height: 300px; }
  .clip-detail-panel {
    grid-template-columns: 1fr;
  }
  .clip-detail-head,
  .clip-detail-panel > h3,
  .clip-detail-meta,
  .clip-production-metrics,
  .clip-algorithmic-label,
  .clip-production-brief,
  .clip-platform-row,
  .clip-samples,
  .clip-curation-box,
  .clip-advisor-box,
  .clip-detail-actions {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .clip-studio-head { display: grid; }
  .clip-studio-controls { grid-template-columns: 1fr; }
  .clip-search-control { grid-column: auto; }
  .clip-channel-metrics { grid-template-columns: 1fr; }
  .clip-production-metrics { grid-template-columns: 1fr; }
  .clip-channel-metrics span,
  .clip-points-context { white-space: normal; }
  .clip-studio-layout { grid-template-columns: 1fr; }
  .clip-mobile-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    grid-column: 1;
    padding: 6px;
    border: 1px solid rgba(0, 201, 183, .22);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
  }
  .clip-mobile-tabs button {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--ghost-bg);
    color: var(--muted);
    font-weight: 900;
  }
  .clip-mobile-tabs button.active {
    border-color: rgba(0, 229, 199, .52);
    background: rgba(0, 201, 183, .16);
    color: var(--accent);
  }
  .clip-videos-panel,
  .clip-points-panel,
  .clip-detail-panel {
    grid-column: 1;
    grid-row: auto;
    display: none;
  }
  .clip-studio-layout.mobile-tab-videos .clip-videos-panel,
  .clip-studio-layout.mobile-tab-candidates .clip-points-panel,
  .clip-studio-layout.mobile-tab-brief .clip-detail-panel {
    display: block;
  }
  .clip-studio-layout.mobile-tab-brief .clip-detail-panel {
    display: grid;
  }
  .clip-video-list {
    max-height: 66vh;
  }
  .clip-table-wrap {
    max-height: 62vh;
  }
  .clip-points-table { min-width: 860px; }
}