/* ===== Shared (admin + front) ===== */
:root{--htv-acc:#0a84ff;--htv-acc2:#00dfd8}

.htv-wrap{display:grid;grid-template-columns:260px 1fr;gap:16px;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
.htv-sidebar{position:sticky;top:12px;height:calc(100vh - 24px);padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--panel)}
.htv-sidebar ul{list-style:none;margin:12px 0;padding:0}
.htv-sidebar li{padding:.7rem .9rem;border-radius:8px;cursor:pointer;color:var(--text-dim);display:flex;gap:.5rem;align-items:center}
.htv-sidebar li.active,.htv-sidebar li:hover{background:linear-gradient(90deg,var(--htv-acc),var(--htv-acc2));color:#fff}
.htv-theme-toggle{margin-top:8px;padding:8px;border-top:1px dashed var(--border);color:var(--text-dim)}
.htv-main{border:1px solid var(--border);border-radius:12px;background:var(--bg);padding:16px;color:var(--text)}
.theme-dark{--bg:#0f1316;--panel:#0f1316;--border:#273036;--text:#e9eef2;--text-dim:#cbd6de}
.theme-light{--bg:#f8fbff;--panel:#ffffff;--border:#d9e3ea;--text:#0e1113;--text-dim:#586571}

/* Language control */
.htv-lang-top{display:flex;gap:.6rem;align-items:center;justify-content:space-between;background:linear-gradient(90deg,rgba(10,132,255,.15),rgba(0,223,216,.15));border:1px solid var(--htv-acc);padding:.5rem .6rem;border-radius:10px;position:sticky;top:0;z-index:5}
.theme-dark .htv-lang-top select{color:#fff;background:#1b232a;}
.theme-dark .htv-lang-top select option{background:#1b232a;color:#fff}
.htv-lang-top select{flex:1;min-width:0;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.35rem .5rem}
.htv-lang-icon{font-size:28px;line-height:1}

/* Views */
.view{display:none}.view.active{display:block}

/* Toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:12px}
#htv-drop{opacity:.7;border:1px dashed var(--border);border-radius:8px;padding:.3rem .6rem;margin-left:.5rem;display:inline-block}
#htv-upload{border-radius:8px}

/* Panels */
.htv-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:10px;overflow:visible}
.panel h3{margin:0 0 8px 0;color:var(--text)}

/* Cards */
.video-grid,.queue-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.video-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.queue-list{grid-template-columns:1fr}
.card{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--bg);overflow:visible}
.card .thumb{height:140px;background:#000}
.card video{width:100%;height:100%;object-fit:cover}
.card .meta{padding:.5rem;display:flex;flex-direction:column;gap:.45rem}
.card .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.card .actions{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.card .actions .drag{cursor:grab;opacity:.7}
.card .views-badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);color:#fff;font-size:.8rem;padding:.15rem .4rem;border-radius:6px}

/* Playlist dropdown overlay */
.pl-add-wrap{position:relative}
.pl-add-wrap .pl-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--panel);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:.3rem;z-index:10000}
.pl-add-wrap .pl-menu ul.menu{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto}
.pl-add-wrap .pl-menu .menu li{
  display:flex;align-items:center;gap:.45rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.45rem .6rem;
  margin:.25rem 0;
  cursor:pointer;
  transition:box-shadow .15s ease, transform .05s ease, background .15s ease;
  font-weight:600;
}

/* ======================= Admin: Licensing ======================= */
.htv-lic-head{display:flex;align-items:flex-end;justify-content:space-between;margin:10px 0 18px 0;gap:12px;max-width:980px;}
.htv-lic-title{font-size:18px;font-weight:800;letter-spacing:-.01em;}
.htv-lic-sub{color:#6b7280;font-size:12px;line-height:1.35;max-width:520px;}

/* single, clean column (connection details are hidden) */
.htv-lic-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:980px;}

/* Glass card */
.htv-card.htv-glass{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.theme-dark .htv-card.htv-glass{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.htv-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.htv-card-title{font-size:13px;font-weight:700;}
.htv-card-sub{font-size:12px;color:#6b7280;margin-top:2px;}
.theme-dark .htv-card-sub{color:rgba(255,255,255,.6);}

.htv-lic-badge{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#f9fafb;text-transform:lowercase;}
.htv-lic-badge[data-status="active"],.htv-lic-badge[data-status="activated"]{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#166534;}
.htv-lic-badge[data-status="valid"]{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#1d4ed8;}
.htv-lic-badge[data-status="deactivated"],.htv-lic-badge[data-status="inactive"]{background:rgba(107,114,128,.12);border-color:rgba(107,114,128,.35);color:#374151;}
.htv-lic-badge[data-status="invalid"],.htv-lic-badge[data-status="error"]{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#991b1b;}

.htv-lic-label{display:block;font-size:12px;font-weight:600;margin:10px 0 6px 0;}
.htv-lic-row{display:flex;gap:8px;align-items:center;}
.htv-lic-input{width:100%;padding:12px 14px;border:1px solid rgba(15,23,42,.12);border-radius:14px;font-size:13px;background:rgba(255,255,255,.65);outline:none;transition:box-shadow .15s ease,border-color .15s ease,background .15s ease;}
.htv-lic-input:focus{border-color:rgba(59,130,246,.55);box-shadow:0 0 0 4px rgba(59,130,246,.12);background:rgba(255,255,255,.82);}
.theme-dark .htv-lic-input{background:rgba(0,0,0,.18);color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.14);}
.theme-dark .htv-lic-input:focus{border-color:rgba(96,165,250,.55);box-shadow:0 0 0 4px rgba(96,165,250,.14);background:rgba(0,0,0,.26);}
.htv-lic-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}

/* Modern glass buttons */
.htv-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  font-size:13px;
  letter-spacing:-.01em;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  box-shadow:0 10px 26px rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
  color:#0f172a;
  border:1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.htv-btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.14);}
.htv-btn:active{transform:translateY(0px);box-shadow:0 10px 26px rgba(15,23,42,.10);}
.htv-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 8px 16px rgba(15,23,42,.08);}

.htv-btn-primary{
  background:linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  border-color:rgba(37,99,235,.35);
  color:#fff;
}
.htv-btn-primary:hover{box-shadow:0 16px 40px rgba(37,99,235,.28);}

.htv-btn-soft{
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.25);
  color:#1d4ed8;
}
.theme-dark .htv-btn-soft{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.22);color:#bfdbfe;}

.htv-btn-ghost{
  background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.10);
  color:#0f172a;
}
.theme-dark .htv-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.theme-dark .htv-btn-primary{color:#fff;}
.theme-dark .htv-btn-ghost{background:rgba(255,255,255,.06);}
.htv-lic-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.htv-lic-meta .lbl{display:block;font-size:11px;color:#6b7280;margin-bottom:4px;}
.theme-dark .htv-lic-meta .lbl{color:rgba(255,255,255,.6);}
.htv-lic-meta .val{font-size:12px;min-height:16px;}
.htv-lic-foot{margin-top:12px;font-size:12px;color:#6b7280;}
.theme-dark .htv-lic-foot{color:rgba(255,255,255,.6);}
@media(max-width: 960px){
  .htv-lic-head,.htv-lic-grid{max-width:100%;}
}
.pl-add-wrap .pl-menu .menu li::before{content:"➕";opacity:.75}
.pl-add-wrap .pl-menu .menu li:hover{
  background:linear-gradient(90deg,rgba(10,132,255,.10),rgba(0,223,216,.10));
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.pl-add-wrap .pl-menu .menu li.muted{opacity:.55;cursor:default}
.pl-add-wrap .pl-menu .menu li.muted::before{content:"—";opacity:.4}

/* Queue */
.queue-list .card{display:grid;grid-template-columns:36px 1fr auto;align-items:center;padding:.5rem}
.queue-list .card .ord{font-weight:700;text-align:center;opacity:.7}
.queue-list .card .title{padding:0 .5rem}
.highlight-flash{animation:highlight 1.5s ease}
@keyframes highlight{0%{box-shadow:0 0 0 0 rgba(10,132,255,.6)}100%{box-shadow:0 0 0 0 transparent}}

/* Playlists panel */
.playlists-panel .pl-row{display:flex;gap:.5rem;margin:.5rem 0}
#pl-wrap{display:grid;gap:.8rem}
.pl-card{border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:.6rem}
.pl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.pl-name{font-weight:700}
.pl-actions{display:flex;gap:.4rem}
.pl-actions .danger{border-color:#b40020;color:#b40020}
.pl-videos{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pl-item{display:grid;grid-template-columns:40px 1fr auto;gap:.5rem;align-items:center;border:1px dashed var(--border);border-radius:8px;padding:.35rem .5rem;background:var(--panel)}
.pl-item .thumb{width:40px;height:28px;background:#000;overflow:hidden;border-radius:4px}
.pl-item .thumb video{width:100%;height:100%;object-fit:cover}
.pl-item .drag{cursor:grab;opacity:.7}

/* Settings layout */
.settings-grid{display:grid;grid-template-columns:1fr minmax(360px,560px);gap:12px;align-items:start}

/* Settings: preview at top (full width) */
.settings-grid.settings-grid-preview-top{grid-template-columns:1fr}
.live-preview.live-preview-top{position:relative;top:auto;max-height:none}

/* Settings page readability: keep preview + controls from stretching
   edge-to-edge. This also reduces the perceived size of fields. */
#view-settings .settings-grid.settings-grid-preview-top{
  max-width: 1180px;
  /* Align to the left (not centered) with a modest admin gutter. */
  margin: 0;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}

@media (max-width: 980px){
  #view-settings .settings-grid.settings-grid-preview-top{
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Make the settings form feel more compact */
#view-settings #htv-settings-form{padding:10px 12px}
#view-settings #htv-settings-form label{margin-bottom:.45rem}
#view-settings #htv-settings-form input[type="text"],
#view-settings #htv-settings-form input[type="url"],
#view-settings #htv-settings-form select{
  padding:.38rem .55rem;
  border-radius:8px;
}
#view-settings #htv-settings-form textarea{padding:.38rem .55rem}
#htv-settings-form{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:12px}
#htv-settings-form label{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.6rem;position:relative}
#htv-settings-form label.inline{flex-direction:row;gap:.5rem;align-items:center}
#htv-settings-form .row.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
#htv-settings-form .row.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
#htv-settings-form input[type="text"],#htv-settings-form input[type="url"],#htv-settings-form select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.45rem .6rem}
#htv-settings-form input[type="range"]{accent-color:var(--htv-acc);}
#htv-settings-form .actions{display:flex;gap:.6rem;margin-top:.6rem}

/* Modern color chip */
.color-chip{display:flex;align-items:center;gap:.4rem;background:linear-gradient(90deg,rgba(10,132,255,.08),rgba(0,223,216,.08));border:1px solid var(--border);border-radius:10px;padding:.35rem .5rem;position:relative}
.color-chip .chip-swatch{width:18px;height:18px;border-radius:6px;border:1px solid var(--border);cursor:pointer}
.color-chip input[type="text"]{width:110px}

/* Live preview */
.live-preview{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:0;display:flex;flex-direction:column;position:sticky;top:12px;max-height:calc(100vh - 24px)}
.lp-head{padding:.6rem .8rem;border-bottom:1px solid var(--border);font-weight:600}
.lp-viewport{padding:10px;overflow:visible}
.lp-video-skel{height:100%; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9aa4ad}

/* Responsive fallback: stack preview below settings on narrow screens */
@media (max-width: 1180px){
  .settings-grid{grid-template-columns:1fr}
  .live-preview{position:relative;top:auto;max-height:none}
}

/* Headings: keep lines clean */
.htv-h1{font-size:clamp(28px,3vw,40px);line-height:1.1;word-break:normal;overflow-wrap:normal;hyphens:none;margin:.2rem 0 .6rem 0}
.htv-h2{font-size:clamp(16px,1.6vw,20px);line-height:1.45;word-break:normal;overflow-wrap:normal;hyphens:none;margin:0 0 .8rem 0}

/* Analytics */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:10px}
.kpi{background:linear-gradient(180deg,rgba(10,132,255,.08),rgba(0,223,216,.08));border:1px solid var(--border);border-radius:12px;padding:.6rem .8rem}
.kpi-label{opacity:.75;font-size:.9rem}
.kpi-val{font-weight:800;font-size:1.4rem}
.htv-table.modern{width:100%;border-collapse:separate;border-spacing:0 8px}
.htv-table.modern th{opacity:.75;text-align:left;padding:.4rem .6rem}
.htv-table.modern td{background:var(--bg);border:1px solid var(--border);padding:.6rem;border-radius:8px}

/* ===== Front-end hero ===== */
.hero-tv-container{--htv-left:50%;--htv-right:50%;--htv-hero-bg:#ffffff;--htv-text-bg:#ffffff;--htv-cta-color:#0a84ff;width:100%;max-width:none;margin:0 auto;padding:18px 28px;box-sizing:border-box}
/* Full-bleed option: allow the player to span the full viewport width even inside
   themes that wrap content in a narrow container. */
.hero-tv-container.htv-fullbleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
@media (max-width: 700px){
  .hero-tv-container{padding:16px 18px}
}

.hero-tv-col{display:flex;gap:1rem;align-items:stretch}
.hero-tv-text{
  order:0;
  flex:0 0 var(--htv-left);
  background:var(--htv-text-bg);
  padding:2.1rem 2.2rem;
  border-radius:16px;
  min-width:0;
  overflow-wrap:break-word;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.85rem;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.hero-tv-video{order:1;flex:0 0 var(--htv-right);position:relative;background:var(--htv-hero-bg);border-radius:12px;overflow:hidden;min-height:240px;aspect-ratio:var(--htv-preview-ar,16/9)}

/* Admin Live Preview can choose between 16/9 and 21/9 */
#lp .hero-tv-video{aspect-ratio:var(--htv-preview-ar,16/9)}

/* Admin Live Preview layout helpers */
#lp.htv-preview-stacked .hero-tv-col{flex-direction:column;}
#lp.htv-preview-stacked .hero-tv-text,
#lp.htv-preview-stacked .hero-tv-video{flex-basis:auto; width:100%;}
#lp.htv-preview-stacked .hero-tv-text{padding:1.6rem 1.6rem;}
.hero-tv-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .18s linear;will-change:opacity}

/* Cross-fade helper for seamless queue playback */
.hero-tv-video video.htv-hidden{opacity:0;pointer-events:none}
.hero-tv-video video.htv-show{opacity:1}

/* Ensure the second buffer video is never display:none (prevents background flash) */
#htv-b{display:block !important}
.hero-tv-col.video-first .hero-tv-text{order:1;flex-basis:var(--htv-right)}
.hero-tv-col.video-first .hero-tv-video{order:0;flex-basis:var(--htv-left)}
.hero-tv-overlay{position:absolute;right:8px;bottom:8px;display:flex;gap:.4rem;align-items:center}
.hero-tv-sound-btn{background:rgba(0,0,0,.65);color:#fff;border:none;border-radius:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.hero-tv-sound-btn.htv-disabled{opacity:.65 !important;cursor:not-allowed;}
.hero-tv-play-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.98);
  width:64px;
  height:64px;
  border-radius:999px;
  background:rgba(0,0,0,.45) !important;
  color:#fff;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transition:opacity .16s ease, transform .16s ease, background-color .16s ease;
  z-index:6;
}
.hero-tv-video:hover .hero-tv-play-btn{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.hero-tv-play-btn:active{ transform:translate(-50%,-50%) scale(.97); }
.hero-tv-play-btn .htv-svg{ width:44px; height:44px; display:block; }
.htv-duration{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;padding:.2rem .5rem;border-radius:6px;font-size:.85rem}
@media(max-width:900px){.hero-tv-col,.hero-tv-col.video-first{flex-direction:column}.hero-tv-text,.hero-tv-video{flex-basis:auto}}

/* Text card typography */
.htv-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.9;
}
.htv-h1{margin:0;line-height:1.05;font-weight:800;font-size:clamp(1.7rem, 2.4vw, 3rem)}
.htv-h2{margin:0;line-height:1.55;opacity:.88;font-size:clamp(1rem, 1.2vw, 1.15rem)}

/* Text card alignment helpers */
.hero-tv-text.htv-align-left{ text-align:left; align-items:flex-start; }
.hero-tv-text.htv-align-center{ text-align:center; align-items:center; }
.hero-tv-text.htv-align-right{ text-align:right; align-items:flex-end; }
.hero-tv-text.htv-align-center .htv-kicker{justify-content:center}
.hero-tv-text.htv-align-right .htv-kicker{justify-content:flex-end}

/* CTA button designs (3 distinct presets) */
.htv-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-weight:750;user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.htv-md{padding:.82rem 1.2rem;min-height:46px}

/* 1) Classic: normal rounded button */
.htv-cta-classic{border-radius:12px;background:var(--htv-cta-color);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 14px 34px rgba(0,0,0,.20)}
.htv-cta-classic:hover{transform:translateY(-1px)}

/* 2) Rounded Pill: fully rounded */
.htv-cta-pill{border-radius:999px;background:var(--htv-cta-color);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.htv-cta-pill:hover{transform:translateY(-1px)}

/* 3) Glass Glow: modern translucent button */
.htv-cta-glow{border-radius:18px;background:rgba(0,0,0,.18);color:#fff;border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--htv-cta-color), 0 18px 44px rgba(0,0,0,.28);
}
.htv-cta-glow:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--htv-cta-color), 0 22px 54px rgba(0,0,0,.30)}

/* Draggable divider (admin live preview) */
.lp-divider{
  position:absolute; top:8px; bottom:8px; width:6px;
  background:linear-gradient(180deg, rgba(10,132,255,.9), rgba(0,223,216,.9));
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  cursor:col-resize;
  z-index:1000;
  transform:translateX(-3px);
}
.lp-divider::after{
  content:"↔"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:14px; color:#fff; opacity:.9;
}

/* Helper */
.htv-no-select{ user-select:none !important; }


/* v3.3.8: Prevent overflow when swapping; real video preview styling */
.hero-tv-text, .hero-tv-video { min-width: 0; }
.lp-video-skel{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(20,24,28,.9), rgba(28,34,40,.85));
  color:#9fb1bf; pointer-events:none;
}
#lp-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; border-radius:12px; }

/* Analytics header */
.analytics-head{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, rgba(10,132,255,.12), rgba(0,223,216,.12));
  border:1px solid var(--border); border-radius:12px; padding:.7rem .9rem; margin-bottom:.6rem;
}
.analytics-head .ah-left{ display:flex; gap:.6rem; align-items:center; }
.analytics-head .ah-icon{ font-size:28px; }
.analytics-head .ah-title{ font-weight:800; font-size:1.2rem; }
.analytics-head .ah-sub{ opacity:.75; font-size:.9rem; }
.range-tabs{ display:flex; gap:.3rem; }
.range-tabs button{
  background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:999px; padding:.35rem .6rem; cursor:pointer;
}
.range-tabs button.active, .range-tabs button:hover{
  background:linear-gradient(90deg, rgba(10,132,255,.18), rgba(0,223,216,.18));
  border-color: var(--htv-acc);
}


/* v3.4.0 — Clip divider to preview and show only on hover/drag */
.lp-viewport{ position:relative; overflow:hidden; }
.lp-divider{ opacity:0; pointer-events:none; z-index:10; }
.lp-viewport:hover .lp-divider, .dragging-lp .lp-divider{ opacity:1; pointer-events:auto; }

/* Analytics header tiny tweak */
.analytics-head{ gap:.6rem; flex-wrap:wrap }
.analytics-head .ah-agg{ opacity:.85; font-size:.9rem }


/* v3.4.8-hover-icon-fix: make sure our injected icon is visible; keep button hover-only + bottom-right */
.hero-tv-container{ position:relative; }
.hero-tv-container .hero-tv-sound-btn{
  position:absolute; right:12px; bottom:12px;
  width:44px; height:44px; border-radius:12px;
  background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; z-index:5;
}
.hero-tv-container:hover .hero-tv-sound-btn{ opacity:1; transform:translateY(0); }
.hero-tv-sound-btn .htv-icon-wrap{ display:inline-flex !important; align-items:center; justify-content:center; }
.hero-tv-sound-btn .htv-icon-wrap svg.htv-svg{ display:block !important; width:24px; height:24px; }


/* hide legacy injected icon + emoji inside sound btn */
.htv-audio-toggle{display:none!important}
.hero-tv-container .hero-tv-sound-btn img.emoji{display:none!important}

.pl-item .rm{white-space:nowrap;}


/* Align playlist row controls on one line */
.pl-item{grid-template-columns:40px 1fr auto auto !important; align-items:center;}
.pl-item .drag{grid-column:3; align-self:center;}
.pl-item .rm{grid-column:4; justify-self:end; align-self:center; white-space:nowrap;}



/* Settings: make Subtitle & CTA text fields flexible */
#htv-settings-form textarea.htv-flex {
  min-height: 72px;
  max-height: 420px;
  width: 100%;
  resize: vertical;
  overflow: auto;
  line-height: 1.4;
}


.hero-tv-play-btn:hover{ background:rgba(0,0,0,.55) !important; }
.hero-tv-play-btn:active{ background:rgba(0,0,0,.55) !important; }

#htv-library .drag, #htv-library .actions .drag{display:none !important;}

/* Ensure Live Preview player is fully visible (no clipping) */
.live-preview-top, .live-preview-top .lp-viewport{overflow:visible !important;}

/* Fix: prevent Live Preview from clipping video */
.live-preview.live-preview-top{position:relative !important; max-height:none !important; height:auto !important; overflow:visible !important;}
.live-preview.live-preview-top .lp-viewport{overflow:visible !important; max-height:none !important;}


/* Brute force: ensure preview does not overlap or get clipped in grid */
#view-settings .settings-grid.settings-grid-preview-top{align-items:start !important;}
#view-settings .live-preview.live-preview-top{align-self:start !important;}
#view-settings .live-preview.live-preview-top .lp-viewport{overflow:visible !important; height:auto !important;}
#view-settings .live-preview.live-preview-top .hero-tv-container{height:auto !important; min-height:0 !important;}


/* Admin Live Preview: avoid cropping video - show full frame */
#lp.hero-tv-container .hero-tv-video video,
#lp .hero-tv-video video{
  object-fit: contain !important;
  background: #000;
}


/* Admin Live Preview: force video to be fully visible (no crop) */
#view-settings #lp .hero-tv-video video{
  object-fit: contain !important;
  width:100% !important;
  height:100% !important;
  left:0 !important;
  top:0 !important;
}


/* Admin Live Preview: prevent right-side crop caused by flex-basis percentages + gap */
#view-settings #lp.hero-tv-container{display:flex !important; gap:16px !important;}
#view-settings #lp.hero-tv-container .hero-tv-text{
  flex: 0 1 auto !important;
  flex-basis: 0 !important;
  flex-grow: var(--htv-left-grow,45) !important;
  max-width: none !important;
}
#view-settings #lp.hero-tv-container .hero-tv-video{
  flex: 0 1 auto !important;
  flex-basis: 0 !important;
  flex-grow: var(--htv-right-grow,55) !important;
  max-width: none !important;
}


/* ===== Admin Live Preview: show full video (no crop) ===== */
#view-settings #lp .hero-tv-video video{
  object-fit: contain !important;
  background:#000 !important;
}
#view-settings #lp .hero-tv-video{
  overflow: hidden !important;
}