/* Content block UI/UX polish (design candidate 2026-11-11).
   Additive stylesheet for the Content module pages: overview, materials, approvals, calendar (month/week/day/backlog), creation.
   It does not change demo.js. Remove the <link> in demo/index.html to restore the previous look.
   Selectors start with #eqvola-demo so they win over module styles injected later at the same specificity.
   Class names are the ones present in the bundle this file ships with; re-check them after a rebuild of demo.js. */

/* ── 1. Less chrome above the work ───────────────────────────────────── */
/* The page spent ~500px on breadcrumb, status banner, duplicate navigation and two stacked titles. */
#eqvola-demo main:has(.tu-workspace-nav) > .eqv_f833a8_workspaceBreadcrumb { display: none; }
#eqvola-demo main:has(.tu-workspace-nav) { padding-top: 16px; }
#eqvola-demo main:has(.tu-workspace-nav) > .eqv_f833a8_modeBar {
  margin-bottom: 10px; padding: 5px 10px; min-height: 0; font-size: 11px; border-radius: 8px;
}
#eqvola-demo .tu-workspace-nav { padding-bottom: 10px; margin-bottom: 14px; }
#eqvola-demo .tu-workspace-nav a { min-height: 36px; padding: 7px 12px; }
#eqvola-demo .eqv_7834e1_root > .eqv_7834e1_heading { margin-bottom: 14px; align-items: center; }
#eqvola-demo .eqv_7834e1_root > .eqv_7834e1_heading .eqv_7834e1_eyebrow { display: none; }
#eqvola-demo .eqv_7834e1_root > .eqv_7834e1_heading h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.4px; margin: 0; }
#eqvola-demo .eqv_7834e1_root > .eqv_7834e1_heading p { margin-top: 3px; font-size: 12.5px; line-height: 1.5; }

/* Second title of the same page: keep only what adds information. */
#eqvola-demo .tu-calendar .eqv_fb2b7e_toolbar .eqv_fb2b7e_heading h2 { display: none; }
#eqvola-demo .tu-calendar .eqv_fb2b7e_toolbar .eqv_fb2b7e_heading p { margin: 0; font-size: 12px; }
#eqvola-demo .source-hub-heading { align-items: center; margin-bottom: 10px; }
#eqvola-demo .source-hub-heading .source-hub-eyebrow,
#eqvola-demo .source-hub-heading > div:first-child > p:not(.source-hub-eyebrow) { display: none; }
#eqvola-demo .source-hub-heading h2 { font-size: 16px; line-height: 1.3; letter-spacing: -.2px; margin: 0; }

/* Standing disclaimers stay readable but stop competing with the content. */
#eqvola-demo .source-hub-permissions, #eqvola-demo .source-hub-scope-note,
#eqvola-demo .tu-calendar > .source-hub-permissions {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--theme-subtle);
}
#eqvola-demo .source-content-hub > .source-hub-permissions + .source-hub-scope-note { margin-top: -8px; }

/* ── 2. Materials and approvals ──────────────────────────────────────── */
/* Counters as one compact strip instead of a 110px block. */
#eqvola-demo .source-hub-stats > div {
  display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; min-height: 0; height: auto;
}
#eqvola-demo .source-hub-stats strong { font-size: 22px; line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
#eqvola-demo .source-hub-stats span { font-size: 12px; }
#eqvola-demo .source-hub-card { transition: border-color .12s ease, transform .12s ease; }
#eqvola-demo .source-hub-card:hover { border-color: var(--theme-accent-line); transform: translateY(-1px); }
#eqvola-demo .source-hub-card:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
#eqvola-demo .source-hub-card h3 { overflow-wrap: anywhere; }
#eqvola-demo .source-hub-card-bottom span:last-child { color: var(--theme-accent-text); font-weight: 600; }
#eqvola-demo .source-hub-filters input:focus-visible, #eqvola-demo .source-hub-filters select:focus-visible {
  outline: none; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

/* ── 3. Expandable sections ──────────────────────────────────────────── */
/* Bare browser disclosure triangles looked unfinished; make them clear, clickable rows.
   Studio editor (.tc-native) and classed <details> keep their own styling. */
#eqvola-demo .eqv_7834e1_root details:not([class]):not(.tc-native *) > summary {
  display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; user-select: none;
  padding: 10px 14px; border: 1px solid var(--theme-border); border-radius: 10px;
  background: var(--theme-panel-soft); color: var(--theme-text); font-size: 13px; font-weight: 600; line-height: 1.4;
}
#eqvola-demo .eqv_7834e1_root details:not([class]):not(.tc-native *) > summary::-webkit-details-marker { display: none; }
#eqvola-demo .eqv_7834e1_root details:not([class]):not(.tc-native *) > summary::before {
  content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px;
  border-right: 2px solid var(--theme-muted); border-bottom: 2px solid var(--theme-muted);
  transform: rotate(-45deg); transition: transform .15s ease;
}
#eqvola-demo .eqv_7834e1_root details[open]:not([class]):not(.tc-native *) > summary::before { transform: rotate(45deg); }
#eqvola-demo .eqv_7834e1_root details[open]:not([class]):not(.tc-native *) > summary { margin-bottom: 12px; }
#eqvola-demo .eqv_7834e1_root details:not([class]):not(.tc-native *) > summary:hover { border-color: var(--theme-accent-line); }
#eqvola-demo .eqv_7834e1_root details:not([class]):not(.tc-native *) > summary:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
#eqvola-demo .eqv_7834e1_root details:not([class]):not(.tc-native *) + details:not([class]) { margin-top: 8px; }

/* ── 4. Calendar ─────────────────────────────────────────────────────── */
/* Period switcher follows the scroll, so changing day/week never needs scrolling back up. */
@media (min-width: 901px) {
  #eqvola-demo .tu-calendar .eqv_fb2b7e_periodBar {
    position: sticky; top: 70px; z-index: 6; margin: 0 -8px; padding: 8px;
    background: var(--theme-bg); border-radius: 0 0 12px 12px;
  }
}
#eqvola-demo .tu-calendar .eqv_fb2b7e_tile { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; }
#eqvola-demo .tu-calendar .eqv_fb2b7e_tile strong { font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
#eqvola-demo .tu-backlog-notice { padding: 12px 16px; gap: 14px; margin: 0 0 4px; }
#eqvola-demo .tu-backlog-number { font-size: 24px; letter-spacing: -1px; }
#eqvola-demo .tu-backlog-notice p { margin-top: 2px; }

/* Month cells: the status badge was cut mid-word; let it wrap under the time instead. */
#eqvola-demo .tu-calendar .eqv_fb2b7e_entryLine { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
#eqvola-demo .tu-calendar .eqv_fb2b7e_entryLine .eqv_7834e1_badge { font-size: 9px; padding: 1px 5px; white-space: nowrap; }
#eqvola-demo .tu-calendar .eqv_fb2b7e_entry:focus-visible, #eqvola-demo .tu-calendar .eqv_fb2b7e_dayButton:focus-visible {
  outline: 2px solid var(--theme-primary); outline-offset: 1px;
}

/* Hour list: an empty hour is one quiet line, not a heading plus a paragraph. */
#eqvola-demo .tu-calendar .eqv_fb2b7e_agendaDay:has(> p.eqv_f833a8_muted:only-of-type):not(:has(.eqv_fb2b7e_cards)) {
  flex-direction: row; align-items: baseline; gap: 12px; padding: 3px 0; opacity: .6;
}
#eqvola-demo .tu-calendar .eqv_fb2b7e_agendaDay:has(> p.eqv_f833a8_muted:only-of-type):not(:has(.eqv_fb2b7e_cards)) h4 {
  font-size: 12px; font-weight: 500; min-width: 48px; font-variant-numeric: tabular-nums;
}
#eqvola-demo .tu-calendar .eqv_fb2b7e_agendaDay:has(> p.eqv_f833a8_muted:only-of-type):not(:has(.eqv_fb2b7e_cards)) p { margin: 0; font-size: 11.5px; }

/* ── 5. Day review ───────────────────────────────────────────────────── */
#eqvola-demo .tu-calendar > details > p.eqv_f833a8_muted { margin: 0 0 8px; font-size: 11.5px; }
#eqvola-demo .tu-calendar > details > div:not([class]) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
#eqvola-demo .tu-calendar > details > div:not([class]) > p { flex-basis: 100%; margin: 0; font-size: 11.5px; }
#eqvola-demo .eqv_0f7e96_day { gap: 16px; }
#eqvola-demo .eqv_0f7e96_summary strong { font-size: 16px; }
#eqvola-demo .eqv_0f7e96_summary p { margin: 6px 0 0; font-size: 13px; }
#eqvola-demo .eqv_0f7e96_summary small { display: block; margin-top: 8px; color: var(--theme-subtle); line-height: 1.5; }
#eqvola-demo .eqv_0f7e96_scheduleRow:hover { background: var(--theme-panel-soft); }
#eqvola-demo .eqv_0f7e96_scheduleRow time { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Material blocks: one clear title, quiet technical line, status as badges. */
#eqvola-demo .eqv_0f7e96_block > h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-muted); margin-bottom: 8px;
}
#eqvola-demo .eqv_0f7e96_block article > h3 { font-size: 16px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
#eqvola-demo .eqv_0f7e96_block article > h3 + p { margin: 2px 0 12px; font-size: 11.5px; color: var(--theme-subtle); }
#eqvola-demo .eqv_0f7e96_block article > p:not(:first-of-type) { font-variant-numeric: tabular-nums; }
#eqvola-demo .eqv_0f7e96_block article > div > span {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; margin: 2px 0;
  border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--theme-panel-soft); color: var(--theme-muted);
}
#eqvola-demo .eqv_0f7e96_block article > div > span + p { margin: 4px 0 0 2px; font-size: 12.5px; color: var(--theme-text); }

/* The "prepare fields" action was an unstyled grey bar. */
#eqvola-demo .eqv_0f7e96_publication > button {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content; justify-self: start; align-self: flex-start; min-height: 38px; padding: 8px 14px; margin: 4px 0 10px;
  border: 1px solid var(--theme-control-border); border-radius: 9px; background: var(--theme-panel);
  color: var(--theme-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
#eqvola-demo .eqv_0f7e96_publication > button:hover:not(:disabled) { border-color: var(--theme-accent-line); background: var(--theme-panel-soft); }
#eqvola-demo .eqv_0f7e96_publication > button:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
#eqvola-demo .eqv_0f7e96_publication > button:disabled { opacity: .55; cursor: not-allowed; }

/* Technical details are for support, not for the editor: keep them reachable but out of the way. */
#eqvola-demo .eqv_7834e1_root .eqv_0f7e96_block article > details:not([class]) > summary {
  display: inline-flex; padding: 4px 0; border: 0; background: none; font-size: 11px; font-weight: 500; color: var(--theme-subtle);
}
#eqvola-demo .eqv_0f7e96_block article > details pre {
  max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: 8px; font-size: 11px; line-height: 1.5;
  background: var(--theme-input); border: 1px solid var(--theme-border);
}
#eqvola-demo .eqv_0f7e96_block article > details > p { font-size: 11.5px; color: var(--theme-muted); overflow-wrap: anywhere; }

/* ── 6. Shared ───────────────────────────────────────────────────────── */
#eqvola-demo .eqv_7834e1_overduePanel { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  #eqvola-demo .source-hub-card, #eqvola-demo .eqv_7834e1_root details > summary::before { transition: none; }
  #eqvola-demo .source-hub-card:hover { transform: none; }
}
@media (max-width: 760px) {
  #eqvola-demo .source-hub-stats > div { padding: 10px 12px; }
  #eqvola-demo .eqv_7834e1_root > .eqv_7834e1_heading h1 { font-size: 20px; }
  #eqvola-demo .tu-calendar .eqv_fb2b7e_tile { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── 7. "Як у мережі": phone mock-up of a post ───────────────────────── */
#eqvola-demo .tnp-open {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; justify-self: start; align-self: flex-start; min-height: 32px; padding: 5px 11px; margin: 6px 0;
  border: 1px solid var(--theme-accent-line); border-radius: 999px; background: var(--theme-accent-soft); color: var(--theme-accent-text);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
#eqvola-demo .tnp-open:hover { border-color: var(--theme-primary); }
#eqvola-demo .tnp-open:focus-visible, #eqvola-demo .tnp-dialog button:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
#eqvola-demo .tnp-dialog {
  width: min(430px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 14px; overflow: auto;
  border: 1px solid var(--theme-border); border-radius: 18px; background: var(--theme-panel); color: var(--theme-text); box-shadow: var(--theme-modal-shadow);
}
#eqvola-demo .tnp-dialog::backdrop { background: var(--theme-backdrop); }
#eqvola-demo .tnp-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#eqvola-demo .tnp-bar > strong { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eqvola-demo .tnp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--theme-panel-soft); border: 1px solid var(--theme-border); }
#eqvola-demo .tnp-seg button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--theme-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#eqvola-demo .tnp-seg button[aria-pressed=true] { background: var(--theme-raised); color: var(--theme-text); box-shadow: 0 0 0 1px var(--theme-accent-line); }
#eqvola-demo .tnp-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--theme-border); border-radius: 9px; background: transparent; color: var(--theme-muted); cursor: pointer; }
#eqvola-demo .tnp-note { margin: 10px 2px 0; font-size: 11px; line-height: 1.5; color: var(--theme-subtle); }

/* The phone keeps its own neutral light/dark surface so the post reads like in an app, whatever the product theme is. */
#eqvola-demo .tnp-phone {
  --p-bg: #fff; --p-text: #14141a; --p-muted: #6b6b7a; --p-line: #e6e6ec; --p-soft: #f1f1f5;
  width: 100%; max-width: 380px; margin: 0 auto; border-radius: 26px; overflow: hidden; border: 6px solid #1b1b20;
  background: var(--p-bg); color: var(--p-text); font-size: 13.5px; line-height: 1.45;
}
#eqvola-demo .tnp-phone[data-layout=vertical], #eqvola-demo .tnp-phone[data-net=x], #eqvola-demo .tnp-phone[data-net=threads] {
  --p-bg: #0b0b0d; --p-text: #f3f3f6; --p-muted: #9a9aa8; --p-line: #26262c; --p-soft: #17171b;
}
#eqvola-demo .tnp-appbar { display: flex; align-items: center; min-height: 42px; padding: 0 14px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--p-line); }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-appbar { display: none; }
#eqvola-demo .tnp-scroll { max-height: min(640px, calc(100dvh - 230px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#eqvola-demo .tnp-post { position: relative; display: grid; gap: 8px; padding: 12px 0; margin: 0; }
#eqvola-demo .tnp-post > :not(.tnp-media) { padding: 0 12px; }
#eqvola-demo .tnp-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
#eqvola-demo .tnp-head > span:last-child, #eqvola-demo .tnp-head > strong { display: grid; min-width: 0; }
#eqvola-demo .tnp-head strong { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
#eqvola-demo .tnp-head small { font-size: 11px; color: var(--p-muted); }
#eqvola-demo .tnp-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #6c5ce7; color: #fff; font-size: 12px; font-weight: 700; }
#eqvola-demo .tnp-title { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#eqvola-demo .tnp-media { position: relative; width: 100%; background: var(--p-soft); overflow: hidden; }
#eqvola-demo .tnp-media[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
#eqvola-demo .tnp-media[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
#eqvola-demo .tnp-media[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
#eqvola-demo .tnp-phone[data-layout=timeline] .tnp-media { width: auto; margin: 0 12px; border-radius: 12px; border: 1px solid var(--p-line); }
#eqvola-demo .tnp-thumb { display: grid; place-items: center; width: 100%; height: 100%; }
#eqvola-demo .tnp-media .tnp-thumb { position: absolute; inset: 0; }
#eqvola-demo .tnp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#eqvola-demo .tnp-thumb[data-state=loading] { background: linear-gradient(100deg, transparent 30%, rgba(127,127,140,.18) 50%, transparent 70%) 0 0 / 200% 100%; animation: tnp-shimmer 1.4s linear infinite; }
#eqvola-demo .tnp-thumb-text { padding: 10px; font-size: 11px; text-align: center; color: var(--theme-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
@keyframes tnp-shimmer { to { background-position: -200% 0; } }
#eqvola-demo .tnp-media-empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 18px; text-align: center; color: var(--p-muted); }
#eqvola-demo .tnp-media-empty b { color: var(--p-text); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
#eqvola-demo .tnp-media-empty small { font-size: 11px; }
#eqvola-demo .tnp-actions { display: flex; align-items: center; gap: 14px; color: var(--p-text); }
#eqvola-demo .tnp-spacer { flex: 1; }
#eqvola-demo .tnp-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#eqvola-demo .tnp-caption i { color: var(--p-muted); }
#eqvola-demo .tnp-tags { color: #3b6fd8; }
#eqvola-demo .tnp-more { padding: 0; border: 0; background: none; color: var(--p-muted); font: inherit; cursor: pointer; }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-post { padding: 0; color: #fff; }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-overlay { position: absolute; left: 0; right: 56px; bottom: 0; display: grid; gap: 6px; padding: 40px 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-overlay .tnp-avatar { width: 30px; height: 30px; }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-side { position: absolute; right: 0; bottom: 18px; display: grid; gap: 18px; padding: 0 14px; color: #fff; }
#eqvola-demo .tnp-ghost { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--p-line); opacity: .7; }
#eqvola-demo .tnp-ghost + .tnp-post { border-bottom: 1px solid var(--p-line); }
#eqvola-demo .tnp-ghost span { width: 45%; height: 12px; border-radius: 6px; background: var(--p-soft); }
#eqvola-demo .tnp-ghost i { display: block; height: 10px; border-radius: 5px; background: var(--p-soft); }
#eqvola-demo .tnp-ghost i:last-child { width: 70%; height: 90px; border-radius: 10px; width: 100%; }
#eqvola-demo .source-hub-variant .tnp-open { margin: 2px 0 8px; }
@media (prefers-reduced-motion: reduce) { #eqvola-demo .tnp-thumb[data-state=loading] { animation: none; } }

/* ── 8. Profile preview in the look of each network's app ────────────── */
#eqvola-demo .tsp-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 400px) minmax(200px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { #eqvola-demo .tsp-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; } #eqvola-demo .tsp-side, #eqvola-demo .tsp-info { width: 100%; max-width: 400px; } }
#eqvola-demo .tsp-nets { display: grid; gap: 6px; }
#eqvola-demo .tsp-nets button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 1px solid var(--theme-border); border-radius: 10px; background: var(--theme-panel); color: var(--theme-text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
#eqvola-demo .tsp-nets button[aria-pressed=true] { background: var(--theme-accent-soft); border-color: var(--theme-accent-line); font-weight: 600; }
#eqvola-demo .tsp-nets small { color: var(--theme-muted); font-variant-numeric: tabular-nums; }
#eqvola-demo .tsp-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--theme-subtle); }
#eqvola-demo .tsp-info { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--theme-border); border-radius: 14px; background: var(--theme-panel); font-size: 13px; }
#eqvola-demo .tsp-info p { margin: 0; color: var(--theme-muted); line-height: 1.5; }
#eqvola-demo .tsp-info > strong { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
#eqvola-demo .tsp-steps { display: flex; gap: 8px; flex-wrap: wrap; }
#eqvola-demo .tsp-steps button, #eqvola-demo .tsp-open { min-height: 36px; padding: 0 12px; border: 1px solid var(--theme-control-border); border-radius: 9px; background: var(--theme-panel-soft); color: var(--theme-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
#eqvola-demo .tsp-steps button:disabled { opacity: .45; cursor: not-allowed; }
#eqvola-demo .tsp-open { background: var(--theme-primary); border-color: var(--theme-primary); color: var(--theme-primary-text); justify-self: start; }
#eqvola-demo .tsp-layout button:focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 2px; }

/* Phone. Colours inside are the apps' own neutral light/dark surfaces, independent of the product theme. */
#eqvola-demo .tsp-phone {
  --p-bg: #fff; --p-text: #0f1419; --p-muted: #737373; --p-line: #dbdbdb; --p-soft: #efefef; --p-accent: #0095f6; --p-link: #00376b;
  position: relative; width: 100%; max-width: 390px; height: min(780px, calc(100dvh - 150px)); min-height: 560px; margin: 0 auto; overflow: hidden;
  border: 8px solid #17171c; border-radius: 40px; background: var(--p-bg); color: var(--p-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.35;
}
#eqvola-demo .tsp-phone[data-dark=true] { --p-bg: #000; --p-text: #f5f5f5; --p-muted: #a8a8a8; --p-line: #262626; --p-soft: #1a1a1a; --p-link: #e0f1ff; }
#eqvola-demo .tsp-phone[data-net=facebook] { --p-accent: #0866ff; --p-soft: #e4e6eb; --p-line: #ced0d4; --p-muted: #65676b; --p-text: #050505; }
#eqvola-demo .tsp-phone[data-net=tiktok] { --p-accent: #fe2c55; }
#eqvola-demo .tsp-phone[data-net=linkedin] { --p-accent: #0a66c2; }
#eqvola-demo .tsp-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
#eqvola-demo .tsp-scroll::-webkit-scrollbar { display: none; }
#eqvola-demo .tsp-screen { position: relative; min-height: 100%; background: var(--p-bg); }
#eqvola-demo .tsp-phone button { font: inherit; color: inherit; }
#eqvola-demo .tsp-spacer { flex: 1; }
#eqvola-demo .tsp-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; background: var(--p-bg); }
#eqvola-demo .tsp-handle { font-size: 20px; font-weight: 700; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eqvola-demo .tsp-top-title { display: grid; line-height: 1.2; }
#eqvola-demo .tsp-top-title small { font-size: 11px; color: var(--p-muted); font-weight: 600; }
#eqvola-demo .tsp-top-title strong { font-size: 16px; }
#eqvola-demo .tsp-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
#eqvola-demo .tsp-avatar { display: grid; place-items: center; flex: none; border-radius: 50%; padding: 0; }
#eqvola-demo .tsp-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #6c5ce7; color: #fff; font-weight: 700; }
#eqvola-demo .tsp-avatar[data-ring=true] { padding: 3px; background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); }
#eqvola-demo .tsp-avatar[data-ring=true] > span { border: 3px solid var(--p-bg); }
#eqvola-demo .tsp-phone[data-net=facebook] .tsp-avatar[data-ring=true] { background: var(--p-accent); }
#eqvola-demo .tsp-avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
#eqvola-demo .tsp-avatar-btn:disabled { cursor: default; }
#eqvola-demo .tsp-stat { display: grid; justify-items: center; gap: 1px; flex: 1; min-width: 0; }
#eqvola-demo .tsp-stat b { font-size: 16px; font-weight: 700; }
#eqvola-demo .tsp-stat small { font-size: 13px; color: var(--p-text); }
#eqvola-demo .tsp-ig-head { display: flex; align-items: center; gap: 14px; padding: 6px 16px 10px; }
#eqvola-demo .tsp-bio { display: grid; gap: 2px; padding: 0 16px 10px; }
#eqvola-demo .tsp-bio p, #eqvola-demo .tsp-fb-id p, #eqvola-demo .tsp-center p, #eqvola-demo .tsp-yt-bio { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
#eqvola-demo .tsp-bio small, #eqvola-demo .tsp-fb-id small, #eqvola-demo .tsp-yt-id small { color: var(--p-muted); font-size: 13px; }
#eqvola-demo .tsp-name { font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
#eqvola-demo .tsp-buttons { display: flex; gap: 6px; padding: 0 16px 12px; }
#eqvola-demo .tsp-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 32px; padding: 0 14px; border-radius: 8px; background: var(--p-soft); color: var(--p-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
#eqvola-demo .tsp-btn[data-tone=primary] { background: var(--p-accent); color: #fff; }
#eqvola-demo .tsp-btn[data-tone=dark] { flex: none; border-radius: 999px; background: var(--p-text); color: var(--p-bg); }
#eqvola-demo .tsp-btn[data-tone=ghost] { flex: none; min-height: 26px; padding: 0 10px; background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; font-size: 12px; }
#eqvola-demo .tsp-btn-icon { flex: none; padding: 0 9px; }
#eqvola-demo .tsp-highlights { display: flex; gap: 14px; padding: 2px 16px 12px; overflow-x: auto; scrollbar-width: none; }
#eqvola-demo .tsp-highlights button { display: grid; justify-items: center; gap: 4px; flex: none; width: 66px; padding: 0; border: 0; background: none; cursor: pointer; }
#eqvola-demo .tsp-hl { display: block; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 1px solid var(--p-line); padding: 2px; background: var(--p-bg); }
#eqvola-demo .tsp-hl > * { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: block; object-fit: cover; }
#eqvola-demo .tsp-highlights small { max-width: 100%; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eqvola-demo .tsp-tabs { display: flex; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); }
#eqvola-demo .tsp-phone[data-net=instagram] .tsp-tabs, #eqvola-demo .tsp-phone[data-net=tiktok] .tsp-tabs { border-top: 0; }
#eqvola-demo .tsp-tabs > * { display: grid; place-items: center; flex: 1; min-height: 44px; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--p-muted); font-size: 14px; font-weight: 600; cursor: pointer; }
#eqvola-demo .tsp-tabs > [aria-pressed=true], #eqvola-demo .tsp-tabs > [data-on=true] { color: var(--p-text); border-bottom-color: var(--p-text); }
#eqvola-demo .tsp-phone[data-net=facebook] .tsp-tabs > [aria-pressed=true] { color: var(--p-accent); border-bottom-color: var(--p-accent); }
#eqvola-demo .tsp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
#eqvola-demo .tsp-tile { position: relative; display: block; padding: 0; border: 0; background: var(--p-soft); overflow: hidden; cursor: pointer; }
#eqvola-demo .tsp-tile[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
#eqvola-demo .tsp-tile[data-ratio="9:16"] { aspect-ratio: 9 / 16; }
#eqvola-demo .tsp-tile > img, #eqvola-demo .tsp-tile > .tnp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#eqvola-demo .tsp-tile-mark { position: absolute; top: 6px; right: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#eqvola-demo .tsp-nomedia { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; font-size: 11px; line-height: 1.3; text-align: center; color: var(--p-muted); overflow: hidden; }
#eqvola-demo .tsp-empty { margin: 0; padding: 36px 24px; text-align: center; color: var(--p-muted); font-size: 13px; }
#eqvola-demo .tsp-cover { height: 120px; background: linear-gradient(135deg, #6c5ce7, #a855f7); }
#eqvola-demo .tsp-cover-small { height: 84px; }
#eqvola-demo .tsp-fb-id { display: grid; gap: 3px; padding: 0 16px 12px; margin-top: -40px; }
#eqvola-demo .tsp-fb-id .tsp-avatar { border: 4px solid var(--p-bg); box-sizing: content-box; }
#eqvola-demo .tsp-fb-id .tsp-avatar[data-ring=true] { border: 0; box-sizing: border-box; }
#eqvola-demo .tsp-feed { display: grid; gap: 8px; background: var(--p-soft); }
#eqvola-demo .tsp-phone[data-timeline=true] .tsp-feed, #eqvola-demo .tsp-phone[data-net=youtube] .tsp-feed { gap: 0; background: var(--p-bg); }
#eqvola-demo .tsp-card { display: grid; gap: 8px; padding: 12px 0; margin: 0; background: var(--p-bg); }
#eqvola-demo .tsp-card > :not(.tsp-media) { padding: 0 12px; }
#eqvola-demo .tsp-card[aria-current=true] { box-shadow: inset 3px 0 0 var(--p-accent); }
#eqvola-demo .tsp-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
#eqvola-demo .tsp-card-head > span:not(.tsp-avatar):not(.tsp-spacer):not(.tsp-btn) { display: grid; min-width: 0; }
#eqvola-demo .tsp-card-head strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#eqvola-demo .tsp-card-head small { font-size: 12px; color: var(--p-muted); display: inline-flex; align-items: center; gap: 4px; }
#eqvola-demo .tsp-card-timeline { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border-bottom: 1px solid var(--p-line); }
#eqvola-demo .tsp-card-timeline > :not(.tsp-media) { padding: 0; }
#eqvola-demo .tsp-card-timeline > div { display: grid; gap: 6px; min-width: 0; }
#eqvola-demo .tsp-card-timeline .tsp-media { border-radius: 14px; border: 1px solid var(--p-line); }
#eqvola-demo .tsp-media { position: relative; display: block; width: 100%; background: var(--p-soft); overflow: hidden; }
#eqvola-demo .tsp-media[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
#eqvola-demo .tsp-media[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
#eqvola-demo .tsp-media > img, #eqvola-demo .tsp-media > .tnp-thumb, #eqvola-demo .tsp-full-media > img, #eqvola-demo .tsp-full-media > .tnp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#eqvola-demo .tsp-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; }
#eqvola-demo .tsp-actions { display: flex; align-items: center; gap: 16px; color: var(--p-text); }
#eqvola-demo .tsp-card-timeline .tsp-actions { justify-content: space-between; max-width: 260px; color: var(--p-muted); }
#eqvola-demo .tsp-text { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
#eqvola-demo .tsp-text b { font-weight: 600; }
#eqvola-demo .tsp-tags { color: var(--p-link); }
#eqvola-demo .tsp-more { padding: 0; border: 0; background: none; color: var(--p-muted); cursor: pointer; }
#eqvola-demo .tsp-title { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#eqvola-demo .tsp-fb-bar { display: flex; justify-content: space-around; padding-top: 8px !important; margin: 0 12px; border-top: 1px solid var(--p-line); color: var(--p-muted); font-size: 13px; font-weight: 600; }
#eqvola-demo .tsp-fb-bar span { display: inline-flex; align-items: center; gap: 6px; }
#eqvola-demo .tsp-center { display: grid; justify-items: center; gap: 8px; padding: 8px 16px 12px; text-align: center; }
#eqvola-demo .tsp-center .tsp-buttons { padding: 0; }
#eqvola-demo .tsp-center .tsp-btn { flex: none; min-width: 150px; min-height: 40px; border-radius: 6px; }
#eqvola-demo .tsp-center .tsp-btn-icon { min-width: 40px; }
#eqvola-demo .tsp-stats { display: flex; gap: 22px; }
#eqvola-demo .tsp-center .tsp-stat small { color: var(--p-muted); font-size: 12px; }
#eqvola-demo .tsp-yt-id { display: flex; align-items: center; gap: 12px; padding: 12px 16px 6px; }
#eqvola-demo .tsp-yt-id > span:last-child { display: grid; min-width: 0; }
#eqvola-demo .tsp-yt-bio { padding: 0 16px 8px; color: var(--p-muted); }
#eqvola-demo .tsp-phone[data-net=youtube] .tsp-buttons .tsp-btn { flex: 1; min-height: 36px; }
#eqvola-demo .tsp-video { display: grid; gap: 10px; width: 100%; padding: 0 0 14px; border: 0; background: none; text-align: left; cursor: pointer; }
#eqvola-demo .tsp-video > .tsp-card-head { padding: 0 12px; align-items: flex-start; }
#eqvola-demo .tsp-video-info { display: grid; gap: 12px; padding: 12px; }
#eqvola-demo .tsp-desc { padding: 10px 12px; border-radius: 12px; background: var(--p-soft); }
#eqvola-demo .tsp-tl-id { display: flex; align-items: flex-end; padding: 0 16px 8px; margin-top: -30px; }
#eqvola-demo .tsp-tl-id .tsp-avatar { border: 4px solid var(--p-bg); box-sizing: content-box; }
#eqvola-demo .tsp-phone[data-net=threads] .tsp-tl-id, #eqvola-demo .tsp-phone[data-net=telegram] .tsp-tl-id { margin-top: 8px; }

/* Full-screen viewers: reels / shorts and stories. */
#eqvola-demo .tsp-full { height: 100%; min-height: 0; overflow: hidden; color: #fff; background: #000; }
#eqvola-demo .tsp-full-media { position: absolute; inset: 0; }
#eqvola-demo .tsp-full .tsp-nomedia { color: #bbb; font-size: 14px; padding: 40px; }
#eqvola-demo .tsp-reel-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 12px 10px 28px; font-size: 20px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
#eqvola-demo .tsp-reel-side { position: absolute; right: 10px; bottom: 96px; display: grid; gap: 22px; justify-items: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
#eqvola-demo .tsp-reel-bottom { position: absolute; left: 0; right: 58px; bottom: 0; display: grid; gap: 8px; padding: 48px 12px 18px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
#eqvola-demo .tsp-reel-bottom .tsp-text { font-size: 13.5px; }
#eqvola-demo .tsp-reel-bottom .tsp-more, #eqvola-demo .tsp-reel-bottom .tsp-tags { color: #fff; opacity: .85; }
#eqvola-demo .tsp-story-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: grid; gap: 10px; padding: 10px 10px 30px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
#eqvola-demo .tsp-progress { display: flex; gap: 3px; }
#eqvola-demo .tsp-progress i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.4); }
#eqvola-demo .tsp-progress i[data-done=true] { background: #fff; }
#eqvola-demo .tsp-tap { position: absolute; top: 70px; bottom: 70px; width: 40%; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; }
#eqvola-demo .tsp-tap-left { left: 0; } #eqvola-demo .tsp-tap-right { right: 0; }
#eqvola-demo .tsp-tap:disabled { cursor: default; }
#eqvola-demo .tsp-story-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 30px 12px 14px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
#eqvola-demo .tsp-reply { flex: 1; min-height: 42px; display: flex; align-items: center; padding: 0 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; font-size: 14px; }

/* ── 9. Profile preview: closer to the apps (status bar, bottom navigation, YouTube, Reels, profile data) ── */
#eqvola-demo .tsp-phone { display: flex; flex-direction: column; }
#eqvola-demo .tsp-scroll { flex: 1; min-height: 0; height: auto; }
#eqvola-demo .tsp-status { display: flex; align-items: center; gap: 5px; flex: none; height: 30px; padding: 0 22px 0 26px; background: var(--p-bg); color: var(--p-text); font-size: 13px; }
#eqvola-demo .tsp-nav { display: flex; align-items: center; justify-content: space-around; flex: none; height: 52px; padding: 0 6px; border-top: 1px solid var(--p-line); background: var(--p-bg); color: var(--p-text); }
#eqvola-demo .tsp-nav > span { display: grid; place-items: center; width: 44px; height: 44px; }
#eqvola-demo .tsp-phone[data-net=youtube] .tsp-nav { border-top: 0; height: 58px; }
#eqvola-demo .tsp-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
#eqvola-demo .tsp-avatar[data-ring=true] > img { border: 3px solid var(--p-bg); box-sizing: border-box; }
#eqvola-demo .tsp-cover, #eqvola-demo .tsp-yt-banner { background-size: cover; background-position: center; }
#eqvola-demo .tsp-btn[data-tone=light] { flex: none; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; color: #0f0f0f; font-size: 12.5px; text-shadow: none; }

/* YouTube channel, after the mobile app in its dark theme. */
#eqvola-demo .tsp-phone[data-net=youtube][data-dark=true] { --p-bg: #0f0f0f; --p-text: #f1f1f1; --p-muted: #aaa; --p-line: #3f3f3f; --p-soft: #272727; }
#eqvola-demo .tsp-phone[data-net=youtube] { --p-muted: #606060; --p-soft: #f2f2f2; --p-text: #0f0f0f; }
#eqvola-demo .tsp-phone[data-net=youtube] .tsp-top { min-height: 52px; padding: 0 16px; gap: 22px; }
#eqvola-demo .tsp-yt-banner { height: 76px; margin: 0 16px 8px; border-radius: 12px; }
#eqvola-demo .tsp-yt-id { gap: 16px; padding: 6px 16px 10px; }
#eqvola-demo .tsp-yt-id .tsp-name { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
#eqvola-demo .tsp-yt-id b { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
#eqvola-demo .tsp-yt-id small { margin-top: 3px; }
#eqvola-demo .tsp-yt-bio { padding: 0 16px 8px; font-size: 13.5px; }
#eqvola-demo .tsp-yt-bio b { color: var(--p-text); font-weight: 600; }
#eqvola-demo .tsp-yt-link { margin: 0; padding: 0 16px 10px; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
#eqvola-demo .tsp-phone[data-net=youtube] .tsp-buttons .tsp-btn[data-tone=dark] { flex: 1; min-height: 40px; font-size: 14.5px; }
#eqvola-demo .tsp-phone[data-net=youtube] .tsp-tabs { justify-content: flex-start; gap: 26px; padding: 0 16px; border: 0; }
#eqvola-demo .tsp-phone[data-net=youtube] .tsp-tabs > * { flex: none; padding: 0; min-height: 46px; font-size: 17px; font-weight: 700; border-bottom-width: 3px; }
#eqvola-demo .tsp-yt-sort { display: flex; gap: 8px; padding: 12px 16px; }
#eqvola-demo .tsp-yt-sort span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--p-soft); font-size: 13.5px; font-weight: 600; }
#eqvola-demo .tsp-yt-sort span[data-on=true] { background: var(--p-text); color: var(--p-bg); }
#eqvola-demo .tsp-yt-row { display: grid; grid-template-columns: 42% minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 8px 16px; border: 0; background: none; text-align: left; cursor: pointer; }
#eqvola-demo .tsp-yt-row .tsp-media { border-radius: 10px; }
#eqvola-demo .tsp-yt-row > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
#eqvola-demo .tsp-yt-row .tsp-title { font-size: 14.5px; font-weight: 400; line-height: 1.3; -webkit-line-clamp: 3; }
#eqvola-demo .tsp-yt-row small { font-size: 12.5px; color: var(--p-muted); }
#eqvola-demo .tsp-yt-row > svg { color: var(--p-text); margin-top: 2px; }
#eqvola-demo .tsp-player { position: sticky; top: 0; z-index: 2; background: #000; }
#eqvola-demo .tsp-player-back { position: absolute; top: 6px; left: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#eqvola-demo .tsp-yt-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
#eqvola-demo .tsp-yt-chips { display: flex; gap: 8px; overflow: hidden; }
#eqvola-demo .tsp-yt-chips span { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--p-soft); font-size: 13px; font-weight: 600; }
#eqvola-demo .tsp-reel-title { font-size: 14px; font-weight: 600; }

/* Reels / Shorts: text sits directly on the video, no dark panel. */
#eqvola-demo .tsp-reel-top { background: none; text-shadow: 0 1px 3px rgba(0,0,0,.55); padding: 10px 12px; gap: 14px; }
#eqvola-demo .tsp-reel-top svg, #eqvola-demo .tsp-reel-bottom svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
#eqvola-demo .tsp-reel-bottom { right: 64px; padding: 10px 12px 14px; background: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#eqvola-demo .tsp-reel-bottom .tsp-card-head strong { font-size: 14px; font-weight: 700; }
#eqvola-demo .tsp-reel-side { right: 12px; bottom: 22px; gap: 20px; }
#eqvola-demo .tsp-full-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.26)); pointer-events: none; }
#eqvola-demo .tsp-btn[data-tone=ghost] { min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid #fff; font-size: 13px; font-weight: 700; text-shadow: none; }
#eqvola-demo .tsp-full[data-bar=true] .tsp-full-media, #eqvola-demo .tsp-full[data-bar=true] .tsp-reel-bottom { bottom: 58px; }
#eqvola-demo .tsp-full[data-bar=true] .tsp-reel-side { bottom: 80px; }
#eqvola-demo .tsp-comment-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; padding: 0 12px; background: #000; }
#eqvola-demo .tsp-comment-bar span { flex: 1; display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #262626; color: #f5f5f5; font-size: 14px; }
#eqvola-demo .tsp-story-top, #eqvola-demo .tsp-story-bottom { background: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-overlay { background: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); padding-top: 10px; }
#eqvola-demo .tnp-phone[data-layout=vertical] .tnp-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.26)); pointer-events: none; }

/* Theme switch and profile data form beside the phone. */
#eqvola-demo .tsp-theme { display: flex; gap: 2px; padding: 3px; margin-top: 12px; border-radius: 10px; background: var(--theme-panel-soft); border: 1px solid var(--theme-border); }
#eqvola-demo .tsp-theme button { flex: 1; min-height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--theme-muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
#eqvola-demo .tsp-theme button[aria-pressed=true] { background: var(--theme-raised); color: var(--theme-text); box-shadow: 0 0 0 1px var(--theme-accent-line); }
#eqvola-demo .tsp-editor { margin-top: 12px; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-panel); }
#eqvola-demo .tsp-editor > summary { padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--theme-text); }
#eqvola-demo .tsp-editor[open] { padding-bottom: 12px; }
#eqvola-demo .tsp-editor > :not(summary) { margin-left: 14px; margin-right: 14px; }
#eqvola-demo .tsp-field { display: grid; gap: 5px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--theme-muted); }
#eqvola-demo .tsp-field input:not([type=file]), #eqvola-demo .tsp-field textarea { width: 100%; min-height: 36px; padding: 7px 10px; box-sizing: border-box; border: 1px solid var(--theme-field-border); border-radius: 8px; background: var(--theme-input); color: var(--theme-text); font: inherit; font-size: 13px; font-weight: 400; resize: vertical; }
#eqvola-demo .tsp-field input[type=file] { font-size: 12px; color: var(--theme-muted); max-width: 100%; }
#eqvola-demo .tsp-field input:focus-visible, #eqvola-demo .tsp-field textarea:focus-visible { outline: none; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-accent-soft); }
#eqvola-demo .tsp-reset { margin-top: 12px; min-height: 32px; padding: 0 12px; border: 1px solid var(--theme-danger-border); border-radius: 8px; background: var(--theme-danger-bg); color: var(--theme-danger); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }

/* ── 10. Material detail: version cards and editor beside the network preview ── */
#eqvola-demo .source-hub-variant { display: flex; flex-direction: column; gap: 8px; transition: border-color .12s ease; }
#eqvola-demo .source-hub-variant[data-open=true] { border-color: var(--theme-primary); box-shadow: 0 0 0 1px var(--theme-primary); }
#eqvola-demo .source-hub-variant > button:last-child { margin-top: auto; }
#eqvola-demo .source-hub-variant[data-open=true] > button:last-child { background: var(--theme-accent-soft); border-color: var(--theme-accent-line); color: var(--theme-accent-text); }
#eqvola-demo .tsp-variant-thumb { position: relative; height: 168px; border-radius: 10px; overflow: hidden; background: var(--theme-panel-soft); }
#eqvola-demo .tsp-variant-thumb .tnp-thumb { position: absolute; inset: 0; }
#eqvola-demo .source-hub-variant .tsp-variant-text { font-size: 12.5px; line-height: 1.5; color: var(--theme-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#eqvola-demo .source-hub-variant p[title] { font-variant-numeric: tabular-nums; }
#eqvola-demo .tsp-edit-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
#eqvola-demo .tsp-edit-main { min-width: 0; }
#eqvola-demo .tsp-edit-preview { position: sticky; top: 91px; display: grid; gap: 10px; min-width: 0; }
#eqvola-demo .tsp-edit-preview > strong { font-size: 13px; }
#eqvola-demo .tsp-edit-preview .tsp-phone { height: min(720px, calc(100dvh - 200px)); }
#eqvola-demo .tsp-compact { display: grid; gap: 10px; justify-items: center; width: 100%; }
#eqvola-demo .tsp-compact .tsp-steps { justify-content: center; }
#eqvola-demo .tnp-dialog .tsp-phone { height: min(700px, calc(100dvh - 200px)); min-height: 0; }
@media (max-width: 1100px) {
  #eqvola-demo .tsp-edit-split { grid-template-columns: minmax(0, 1fr); }
  #eqvola-demo .tsp-edit-preview { position: static; }
}
/* The editor already has the phone beside it, so the extra preview button inside it is redundant. */
#eqvola-demo .tsp-edit-main .tnp-open { display: none; }