:root{
  --bg0:#070b12;
  --bg1:#0b1020;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.18);
  --text:#eaf0ff;
  --muted:#a9b6c7;
  --primary:#a78bfa;
  --primary2:#7c3aed;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:24px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-size:18px;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(167,139,250,.18), transparent 55%),
    radial-gradient(900px 900px at 50% 90%, rgba(34,197,94,.12), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

.app{display:flex; min-height:100vh}

/* ===== TP Sidebar Backdrop (mobile drawer) ===== */
.sb-backdrop{
  display: none;   /* ✅ add the space + keep semicolon */
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sb-backdrop.show{ display: block; }



/* scroll lock when drawer is open (JS toggles body.sb-lock) */
body.sb-lock{ overflow:hidden; }
/* Sidebar */
.sidebar{
  width:300px;
  padding:18px 14px;
  border-right:1px solid var(--border);
  background:rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.brand{display:flex; align-items:center; gap:12px; padding:8px 10px}
.logo{
  width:46px; height:46px;
  border-radius:16px;
  display:grid; place-items:center;
  background:transparent;
}
.logo img{
  width:46px;
  height:46px;
  border-radius:16px;
  display:block;
  box-shadow:var(--shadow);
}
.brand-title{font-weight:950; font-size: 21px; letter-spacing:.2px}
.brand-sub{color:var(--muted); font-size: 15px; margin-top: 4px}

.nav{display:flex; flex-direction:column; gap:8px; padding:0 6px}
.nav button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 14px 14px;
  border:1px solid transparent;
  border-radius: 18px;
  background:transparent;
  color:var(--text);
  font-weight:900;
  font-size: 16px;
  cursor:pointer;
}
.nav button:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08)}
.nav button.active{background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.55)}
.nav .hint{color:rgba(233,240,255,.8); font-size: 14px; font-weight:800; margin-top:2px}

.sidebar-footer{margin-top:auto; padding:10px 10px 8px}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}
.pill.ok{border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.12); color:rgba(210,255,226,.95)}
.pill.warn{border-color:rgba(234,179,8,.55); background:rgba(234,179,8,.12); color:rgba(255,244,204,.95)}
.pill.bad{border-color:rgba(239,68,68,.55); background:rgba(239,68,68,.12); color:rgba(255,210,210,.95)}
.pill.bad{border-color:rgba(239,68,68,.55); background:rgba(239,68,68,.12); color:rgba(255,226,226,.95)}
.pill.warn{border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.12); color:rgba(255,244,216,.95)}
.pill b{color:var(--text)}
.side-actions{display:flex; gap:10px; flex-wrap:wrap}
.side-note{margin-top:10px; color:var(--muted); font-size:14px}

/* Main */
.main{flex:1; min-width:0}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--border);
  background:rgba(7,11,18,.55);
  backdrop-filter: blur(12px);
}

/* Desktop: don't waste space with sticky header */
@media (min-width: 901px){
  .topbar{ position: static; }
}

.topbar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.page-title{font-size: 28px; font-weight:950; letter-spacing:.2px}
.page-sub{color:var(--muted); font-size: 16px; margin-top:6px; max-width:980px}
.header-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.req-banner{
  max-width:1400px;
  margin:0 auto;
  padding:10px 18px 14px;
  color:rgba(255,244,216,.98);
  font-size:15px;
  font-weight:900;
  border-top:1px solid rgba(245,158,11,.25);
  background:linear-gradient(90deg, rgba(245,158,11,.14), rgba(124,58,237,.08));
}
.req-banner.ok{
  color:rgba(210,255,226,.98);
  border-top-color:rgba(34,197,94,.25);
  background:linear-gradient(90deg, rgba(34,197,94,.14), rgba(124,58,237,.06));
}

.content{max-width:1400px; margin:0 auto; padding:18px}

/* Buttons */
.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding: 13px 16px;
  border-radius: 18px;
  font-weight:900;
  font-size: 16px;
  cursor:pointer;
}
.btn:hover{border-color:var(--border2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.btn:disabled:hover{border-color:var(--border)}
.btn.primary{
  background:linear-gradient(135deg,var(--primary2),var(--primary));
  border-color:transparent;
  color:#070b12;
}
.btn.ghost{background:transparent}
.btn.small{padding: 11px 13px; font-size: 15px; border-radius:16px}

/* Panels / cards */
.card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-h{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.card-title{font-weight:950; font-size: 17px}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}
.card-b{padding: 18px}

/* Layout */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
/* Layout collapse for medium screens */
@media (max-width: 1100px){
  .split{grid-template-columns:1fr}
  .topbar-inner{flex-direction:column; align-items:flex-start}
}

/* Mobile drawer behavior (DISABLED - using transform drawer) */
/*@media (max-width: 900px){
  .sidebar{position:fixed; left:-320px; z-index:50; transition:left .2s ease}
  .sidebar.open{left:0}
}
*/

.form{display:flex; flex-direction:column; gap: 16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap: 14px}
@media (max-width: 740px){.grid2{grid-template-columns:1fr}}

.field .label{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; color:var(--muted); font-size: 15px; font-weight:900}
.hint{color:var(--muted); font-size:14px; margin-top:7px}

input,textarea,select{
  width:100%;
  padding:13px 14px;
  border-radius: 18px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  font-size:16px;
}
textarea{resize:vertical; min-height:150px}
input:focus,textarea:focus,select:focus{border-color:rgba(167,139,250,.55); box-shadow:0 0 0 4px rgba(124,58,237,.18)}

.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hr{height:1px; background:var(--border); margin: 18px 0}

/* Tabs inside cards */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding: 5px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:999px;
}
.tab{
  padding: 11px 16px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-weight:950;
  cursor:pointer;
  font-size: 16px;
}
.tab.active{color:var(--text); background:rgba(124,58,237,.22); border-color:rgba(167,139,250,.45)}

.status{
  margin-top:6px;
  padding: 13px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size: 15px;
  font-weight:900;
}

.preview{
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  border-radius:18px;
  padding: 16px;
  overflow:auto;
  max-height:520px;
}
.preview .empty{color:var(--muted); font-size: 16px}

.code{
  font-family:var(--mono);
  font-size: 14.5px;
  line-height:1.6;
  color:rgba(233,240,255,.92);
  background:rgba(0,0,0,.30);
  border:1px solid var(--border);
  border-radius:18px;
  padding: 14px;
  overflow:auto;
  max-height:520px;
  white-space:pre-wrap;
  word-break:break-word;
}

.cards2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 920px){.cards2{grid-template-columns:1fr}}

.coverGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 740px){.coverGrid{grid-template-columns:1fr}}
.coverImg{width:100%; height:auto; border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,.03)}

.toast{
  position:fixed;
  bottom:18px;
  right:18px;
  max-width:460px;
  padding: 13px 16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  color:var(--text);
  font-weight:900;
  box-shadow:var(--shadow);
}

/* Small tweaks */
small,.small{color:var(--muted); font-size:14px}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Mastering job list */
.jobs{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.job{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
}
.job-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.job-title{font-weight:1000; letter-spacing:.2px}
.job-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.brand-logo{
  width:48px;height:48px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}


/* TP FIX: Transcript Generator must NEVER float over other tabs */
#transcriptGenerator,
#transcriptGeneratorCard,
#transcriptCard,
.tp-transcript-generator,
.transcript-generator {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
}


/* =========================================================
   TP PRO FIX: Transcript Generator must NEVER float/overlay
   ========================================================= */

/* Target the generator itself (and common wrappers) */
#transcriptGenerator,
#transcriptGeneratorCard,
#transcriptCard,
.tp-transcript-generator,
.transcript-generator,
[data-tp="transcript-generator"] {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* If any parent wrapper is acting like a modal/overlay, kill it */
.tp-modal,
.tp-modal-backdrop,
.tp-overlay,
.tp-floating,
.tp-float,
.tp-drawer,
.tp-sheet,
.modal,
.overlay {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
}


/* TP PRO FIX: Transcript Generator must NEVER float/overlay */
#transcriptGeneratorWrap {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
}

#transcriptGeneratorWrap * {
  position: static;
}
/* =========================================================
   TP FINAL RESPONSIVE FIX (menu always opens + laptop space)
   ========================================================= */

/* Keep header actions from wrapping into 2 lines on laptops */
.header-actions{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* firefox */
}
.header-actions::-webkit-scrollbar{ display:none; }

/* Slightly tighten header padding on smaller laptops */
@media (max-width: 1200px){
  .topbar-inner{ padding: 12px 14px; }
  .page-title{ font-size: 26px; }
  .btn{ padding: 12px 14px; }
}

/* Ensure "Menu" button is visible only on mobile/tablet */
#sidebarToggle{ display:none; }
@media (max-width: 900px){
  #sidebarToggle{ display:inline-flex; }

  /* Drawer must sit above backdrop */
  .sidebar{ z-index: 50; }

  /* Backdrop sits below sidebar but above page */
  .sb-backdrop{ z-index: 49; }
}

/* Hard guarantee: on desktop, sidebar should never overlay content */
@media (min-width: 901px){
  .sidebar{
    position: sticky;
    left: auto;
    transform: none;
  }
}

/* Make sure main content can't be blocked by fixed drawer state */
@media (max-width: 900px){
  .main{ width: 100%; }
}


/* =========================================================
   TP MOBILE SIDEBAR HARDENING (transform-based off-canvas)
   - Prevents "always-open" sidebar due to left/position conflicts
   - Works with existing .sidebar.open toggle
   ========================================================= */
@media (max-width: 900px){
  .sidebar{
    left: 0 !important;                 /* normalize */
    transform: translateX(-110%);       /* closed */
    transition: transform .2s ease;
    will-change: transform;
    box-shadow: 22px 0 60px rgba(0,0,0,.55);
  }
  .sidebar.open{
    transform: translateX(0);
  }
}


/* TP_MOBILE_SIDEBAR_FORCE_CLOSED_V2_CSS */
@media (max-width: 900px){
  #sidebarToggle{ position:relative; z-index:120 !important; display:inline-flex !important; }

  .sb-backdrop{ pointer-events:none; opacity:0; }
  .sb-backdrop.show{ pointer-events:auto; opacity:1; }

  .sidebar{ position:fixed; top:0; left:0; height:100vh; z-index:130; transform:translateX(-110%); transition:transform .22s ease; }
  .sidebar.open{ transform:translateX(0); }

  .sidebar .sb-close, #sidebarClose{ position:sticky; top:12px; z-index:140; pointer-events:auto; }

  body.sb-lock{ overflow:hidden !important; }
}
/* /TP_MOBILE_SIDEBAR_FORCE_CLOSED_V2_CSS */


/* TP_MOBILE_SIDEBAR_CSS_V7 */

/* TP_SETTINGS_CSS_UNLOCK_V61
   Force OpenAI/YouTube Settings controls to be clickable even if an overlay exists.
*/
#openaiKey{
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}
#openaiKeyMask{
  position: relative !important;
  z-index: 9998 !important;
  pointer-events: none !important;
}
#openaiDot, #openaiStatus{
  position: relative !important;
  z-index: 9999 !important;
}
#ytAccountSelect, #ytPlaylistStatus, #ytConnMiniStatus{
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* TP_OPENAI_NO_MOTION_V80_START
   Purpose: remove ALL animation/transition “motion” from the OpenAI Settings card only.
   Safe: does not affect other cards/tabs.
*/
#tpOpenAiSettingsCard,
#tpOpenAiSettingsCard * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  scroll-behavior: auto !important;
}

/* stop any pulsing dot / status animation inside OpenAI card */
#tpOpenAiSettingsCard .statusDot,
#tpOpenAiSettingsCard #openaiDot,
#tpOpenAiSettingsCard [id*="Dot"],
#tpOpenAiSettingsCard [class*="Dot"]{
  animation: none !important;
}

/* stop hover movement if any */
#tpOpenAiSettingsCard button:hover,
#tpOpenAiSettingsCard .btn:hover,
#tpOpenAiSettingsCard input:focus,
#tpOpenAiSettingsCard select:focus{
  transform: none !important;
}

/* optional: respect reduced motion if user has it enabled */
@media (prefers-reduced-motion: reduce) {
  #tpOpenAiSettingsCard,
  #tpOpenAiSettingsCard * {
    animation: none !important;
    transition: none !important;
  }
}
/* TP_OPENAI_NO_MOTION_V80_END */


/* TP_OPENAI_STABILIZE_MOTION_V83_START
   Purpose:
   - reserve space so OpenAI status text changes do not shift layout
   - do NOT nuke transforms globally (avoid breaking other UI)
*/
#tpOpenAiSettingsCard .statusRow,
#tpOpenAiSettingsCard .status{
  min-height: 22px !important;
  line-height: 22px !important;
  align-items: center !important;
}

#tpOpenAiSettingsCard #openaiStatus{
  display: inline-block !important;
  min-height: 22px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
}

#tpOpenAiSettingsCard #openaiDot{
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  display: inline-block !important;
  flex: 0 0 10px !important;
  animation: none !important;   /* kill pulsing only on the dot */
  transition: none !important;  /* stop dot transitions only */
}
/* TP_OPENAI_STABILIZE_MOTION_V83_END */

/* TP_OPENAI_STOP_MOTION_V84_START
   Goal: kill blur/glass shimmer + isolate paint in OpenAI status area only
*/
#tpOpenAiSettingsCard,
#tpOpenAiSettingsCard *{
  /* stop any micro-animations here */
  animation: none !important;
  transition: none !important;
}

#tpOpenAiSettingsCard{
  /* isolate repaints to this card */
  contain: layout paint style !important;
}

/* The glass blur is the #1 shimmer source when the page repaints */
#tpOpenAiSettingsCard{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* If your status pill uses blur/glass too, force it solid */
#tpOpenAiSettingsCard .statusRow,
#tpOpenAiSettingsCard .status,
#tpOpenAiSettingsCard .statusRow > div,
#tpOpenAiSettingsCard .status > div{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0,0,0,0.35) !important; /* stable solid-ish */
}
/* TP_OPENAI_STOP_MOTION_V84_END */

/* TP_STOP_MOTION_V86_START
   Goal: stop shimmer caused by backdrop-filter blur repaint on large containers.
   We do NOT disable blur globally, only on big shell areas.
*/
body,
#app,
.appShell,
.mainContent,
.sidebar,
header,
.topbar{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* TP_STOP_MOTION_V86_END */

/* TP_STOP_MOTION_V86b_START
   Reduce shimmer from backdrop-filter blur on large containers.
   Only targets shell containers, not every card.
*/
body,
#app,
.appShell,
.mainContent,
.sidebar,
header,
.topbar{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* TP_STOP_MOTION_V86b_END */

/* TP_MOBILE_UX_ALLINONE_V1
   Addresses:
   - Mobile header overflow & chopped button labels
   - Sidebar too transparent (mobile)
   - Main content width wasted on mobile
   - Warning banner too dominant
   - Better tap targets / spacing
*/

@media (max-width: 980px){

  /* --- Sidebar readability: reduce transparency --- */
  #sidebar.sidebar,
  aside#sidebar.sidebar,
  .sidebar{
    background: rgba(10, 14, 24, 0.92) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255,255,255,0.10);
  }

  /* Ensure menu text is readable */
  #sidebar a,
  .sidebar a{
    color: rgba(255,255,255,0.96) !important;
  }

  /* Overlay slightly stronger to help contrast */
  #tpMobileOverlay{ background: rgba(0,0,0,0.55) !important; }

  /* --- Main layout: use screen width --- */
  .main,
  main,
  #main,
  .content,
  .page,
  .container{
    max-width: 100% !important;
  }

  /* If you have a central card wrapper, reduce wasted margins */
  .card,
  .panel,
  .glass,
  .main-card,
  .content-card{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* General padding so it doesn’t feel cramped */
  body{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Header/action strip: wrap instead of clipping --- */
  .topbar,
  .header,
  .app-header,
  .toolbar,
  .top-actions,
  .header-actions,
  .sidebar-top-actions{
    flex-wrap: wrap !important;
  }

  /* Buttons: allow wrapping and avoid cut-off */
  .btn,
  button.btn{
    white-space: nowrap;
    max-width: 100%;
  }

  /* If your header has a build/version pill, let it drop to new line */
  .build,
  .build-badge,
  .version,
  .version-badge{
    width: 100%;
    opacity: 0.9;
  }

  /* Reduce button padding slightly so more fit per row */
  .btn{
    padding: 10px 12px !important;
  }

  /* --- Warning banner: make it compact / informational --- */
  .warn,
  .warning,
  .alert,
  .notice,
  .required,
  #requiredNotice{
    background: rgba(255,180,0,0.10) !important;
    border: 1px solid rgba(255,180,0,0.25) !important;
    color: rgba(255,255,255,0.92) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  /* Make the close button easier to hit */
  #sidebarClose{
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
  }
}

/* TP_MOBILE_HEADER_NOT_STICKY_V1 */
@media (max-width: 980px){
  /* Undo any sticky/fixed toolbar/header on mobile */
  .topbar, .toolbar, .header-actions, .top-actions, .app-header{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Remove any forced padding reserved for a sticky header */
  body{ padding-top: 0 !important; }

  /* Keep Menu accessible without floating the whole block */
  #sidebarToggle{
    position: sticky;
    top: 10px;
    z-index: 20;
  }

  /* Allow buttons to wrap */
  .topbar .btn, .toolbar .btn, .header-actions .btn{
    flex: 1 1 auto;
  }
}


/* TP_WP_STATUS_INDICATOR_LIGHT_V1
   Works with wp-tools.js toggling .ok / .bad on the WP status element.
*/
.ok, .bad{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
}

.ok::before, .bad::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
}

/* green light */
.ok::before{
  background: #22c55e;
  box-shadow:
    0 0 0 2px rgba(34,197,94,0.20),
    0 0 10px rgba(34,197,94,0.85),
    0 0 22px rgba(34,197,94,0.55);
}

/* red light */
.bad::before{
  background: #ef4444;
  box-shadow:
    0 0 0 2px rgba(239,68,68,0.20),
    0 0 10px rgba(239,68,68,0.85),
    0 0 22px rgba(239,68,68,0.55);
}


/* TP_ACTION_BUTTONS_POP_V1 */
#btnWpClear, #btnByokClear{
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  min-height: 44px;
}

#btnWpClear{
  background: rgba(239, 68, 68, 0.22) !important; /* red */
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    0 0 18px rgba(239, 68, 68, 0.35);
}

#btnByokClear{
  background: rgba(245, 158, 11, 0.20) !important; /* amber */
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    0 0 18px rgba(245, 158, 11, 0.30);
}

/* hover / active */
#btnWpClear:hover{ filter: brightness(1.08); transform: translateY(-1px); }
#btnByokClear:hover{ filter: brightness(1.08); transform: translateY(-1px); }
#btnWpClear:active, #btnByokClear:active{ transform: translateY(0px); filter: brightness(0.98); }


/* TP_ACTION_BUTTONS_POP_V1 */
#btnWpClear, #btnByokClear{
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  min-height: 44px;
}

#btnWpClear{
  background: rgba(239, 68, 68, 0.22) !important; /* red */
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    0 0 18px rgba(239, 68, 68, 0.35);
}

#btnByokClear{
  background: rgba(245, 158, 11, 0.20) !important; /* amber */
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    0 0 18px rgba(245, 158, 11, 0.30);
}

/* hover / active */
#btnWpClear:hover{ filter: brightness(1.08); transform: translateY(-1px); }
#btnByokClear:hover{ filter: brightness(1.08); transform: translateY(-1px); }
#btnWpClear:active, #btnByokClear:active{ transform: translateY(0px); filter: brightness(0.98); }


/* TP_HIDE_TOP_FETCH_V1 */
.tp-hide-top-fetch { display: none !important; }

/* TP_HIDE_TOP_FETCH_V2 */
.tp-hide-top-fetch { display: none !important; }

/* ================================
   TP_SPINNER_FIX_V1
   Ensures spinners still animate even when global "no motion" rules exist.
   ================================ */
@keyframes tpSpinV1 { to { transform: rotate(360deg); } }

.tpGlobalLoadingOverlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

.tpGlobalLoadingOverlay.tp-show{ display: flex; }

.tpSpinnerV1{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.9);
  /* IMPORTANT: override any global animation: none !important */
  animation: tpSpinV1 0.85s linear infinite !important;
  will-change: transform;
}

/* If you have a global "no motion" class/rule, this forces spinner to keep spinning */
.tpGlobalLoadingOverlay *{
  animation: inherit;
}

/* ================================
   TP_SPINNER_FIX_V2
   Always-animating overlay spinner (works even if global no-motion exists)
   ================================ */
@keyframes tpSpinV2 { to { transform: rotate(360deg); } }

.tpGlobalLoadingOverlayV2{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

.tpGlobalLoadingOverlayV2.tp-show{ display: flex; }

.tpSpinnerV2{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.92);
  animation: tpSpinV2 0.85s linear infinite !important; /* override global animation:none */
  will-change: transform;
}

/* TP_SPIN_PRO_OUTPUTS_V1 */
#tab-spin{max-width:1200px;margin:0 auto;padding:0 18px;box-sizing:border-box}
#tab-spin .page-title{font-size:40px;font-weight:1000;margin-top:10px}
#tab-spin .page-sub{color:rgba(255,255,255,.65);margin-bottom:14px}

/* Make outputs textarea comfortably tall and full width */
#tab-spin .spinpro-output{min-height:320px;width:100%;box-sizing:border-box}

/* Emoji/Hashtag row */
#tab-spin .spinpro-meta{display:grid;gap:10px;margin:8px 0 10px}
#tab-spin .spinpro-meta input{
  width:100%;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);color:rgba(255,255,255,.9);padding:0 12px;box-sizing:border-box;outline:none
}

/* Hide topbar actions ONLY when Spin is active */
body.tpSpinMode #btnCoverUpload,
body.tpSpinMode #btnNewEpisode,
body.tpSpinMode #btnPublish{ display:none !important; }

/* TP_SPIN_PRO_FINAL_V1 (Spin-only) */
#tab-spin{max-width:1200px;margin:0 auto;padding:0 18px;box-sizing:border-box}
#tab-spin .page-title{font-size:40px;font-weight:1000;margin:10px 0 6px}
#tab-spin .page-sub{color:rgba(255,255,255,.65);margin:0 0 14px}

#tab-spin .spinpro-chips{display:flex;flex-wrap:wrap;gap:8px}
#tab-spin .spinpro-chips .chip{border-radius:999px;padding:8px 12px;font-weight:900}

#tab-spin .spinpro-meta{display:grid;gap:10px;margin:10px 0}
#tab-spin .spinpro-meta input{
  width:100%;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);color:rgba(255,255,255,.9);padding:0 12px;box-sizing:border-box;outline:none
}
#tab-spin .spinpro-output{min-height:360px;width:100%;box-sizing:border-box}

/* Hide topbar buttons ONLY while Spin tab is visible */
body.tpSpinMode #btnCoverUpload,
body.tpSpinMode #btnNewEpisode,
body.tpSpinMode #btnPublish{display:none !important;}

/* TP_SPIN_PRO_UX_V2 (Spin-only polish) */
#tab-spin .card-h small{opacity:.85}
#tab-spin #spinPlatforms .chip{border-radius:999px;padding:8px 12px;font-weight:900}
#tab-spin #spinPlatforms .chip.active{background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(34,211,238,.20));border-color:rgba(124,58,237,.55)}
#tab-spin #spinOutTabs .chip{border-radius:999px;padding:8px 12px;font-weight:900}
#tab-spin #spinOutTabs .chip.active{background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(34,211,238,.20));border-color:rgba(124,58,237,.55)}
#tab-spin .spinpro-meta input:focus{border-color:rgba(34,211,238,.55); box-shadow:0 0 0 4px rgba(34,211,238,.12)}
#tab-spin .spinpro-output{min-height:420px}

/* TP_SPIN_PRO_V3_CSS (Spin-only) */
#tab-spin #spinPlatforms{display:flex;flex-wrap:wrap;gap:10px}
#tab-spin #spinPlatforms .chip{
  border-radius:999px;
  padding:10px 14px;
  font-weight:1000;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.90);
}
#tab-spin #spinPlatforms .chip.active{
  background:linear-gradient(135deg,rgba(124,58,237,.70),rgba(34,211,238,.18));
  border-color:rgba(124,58,237,.70);
  box-shadow:0 0 0 4px rgba(124,58,237,.14);
}
#tab-spin #spinPlatforms .chip:focus{outline:none; box-shadow:0 0 0 4px rgba(34,211,238,.14)}
#tab-spin #spinPlatforms .chip[aria-pressed="true"]{ }

#tab-spin #spinOutTabs{display:flex;flex-wrap:wrap;gap:10px}
#tab-spin #spinOutTabs .chip{
  border-radius:999px;padding:9px 12px;font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.85);
}
#tab-spin #spinOutTabs .chip.active{
  background:linear-gradient(135deg,rgba(124,58,237,.60),rgba(34,211,238,.18));
  border-color:rgba(124,58,237,.65);
}
#tab-spin #spinOutTabs .chip.disabled{
  opacity:.45;
  filter:saturate(.7);
}

#tab-spin .spinpro-output{min-height:420px}
/* TP_SPIN_BRIGHT_TABS_V2 (Spin-only) */
#tab-spin #spinOutTabs .chip{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.22) !important;
}
#tab-spin #spinOutTabs .chip:hover{ background: rgba(255,255,255,.12) !important; }
#tab-spin #spinOutTabs .chip.active{
  color: rgba(255,255,255,.98) !important;
  background: linear-gradient(135deg,rgba(124,58,237,.70),rgba(34,211,238,.22)) !important;
  border-color: rgba(124,58,237,.70) !important;
}

/* TP_SPIN_OWNERFIX_V1 (Spin-only) */
#tab-spin #spinOutTabs .chip{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.22) !important;
}
#tab-spin #spinOutTabs .chip:hover{ background: rgba(255,255,255,.12) !important; }
#tab-spin #spinOutTabs .chip.active{
  color: rgba(255,255,255,.98) !important;
  background: linear-gradient(135deg,rgba(124,58,237,.70),rgba(34,211,238,.22)) !important;
  border-color: rgba(124,58,237,.70) !important;
}
#tab-spin .spinpro-meta input{
  color: rgba(255,255,255,.92) !important;
}
#tab-spin .spinpro-meta input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* TP_SPIN_FINAL_CSS_V1 */
#tab-spin .spinpro-chips{display:flex;flex-wrap:wrap;gap:10px}
#tab-spin .spinpro-chips .chip{
  padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18); color:rgba(255,255,255,.90); cursor:pointer;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
#tab-spin .spinpro-chips .chip:hover{transform:translateY(-1px);border-color:rgba(124,58,237,.55)}
#tab-spin .spinpro-chips .chip.active{
  background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(34,211,238,.18));
  border-color:rgba(124,58,237,.65);
}
#tab-spin #spinOutTabs .chip{opacity:.95}
#tab-spin #spinOutTabs .chip.active{
  box-shadow:0 0 0 2px rgba(124,58,237,.35) inset;
}
#tab-spin .spinpro-meta{
  width:100%; min-height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18); color:rgba(255,255,255,.92); padding:10px 12px; box-sizing:border-box;
}

/* TP_SPIN_KILL_NEWSLETTER_CSS_V1 (Spin-only) */
#tab-spin [data-target="newsletter"],
#tab-spin [data-k="newsletter"],
#tab-spin [data-key="newsletter"]{
  display:none !important;
}

/* TP_SPIN_RMNEWS_UIFIX_CSS_V1 */
#tab-spin #spinPlatforms{ display:flex; flex-wrap:wrap; gap:10px; }
#tab-spin #spinPlatforms .chip{ padding:10px 14px; border-radius:999px; }

/* TP_SPIN_BRIGHT_TABS_CSS_V1 (Spin-only, force contrast) */
#tab-spin #spinPlatforms .chip,
#tab-spin #spinOutTabs .chip{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  filter: none !important;
}

#tab-spin #spinPlatforms .chip:hover,
#tab-spin #spinOutTabs .chip:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(34,211,238,.55) !important;
}

#tab-spin #spinPlatforms .chip.active,
#tab-spin #spinOutTabs .chip.active{
  background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(34,211,238,.18)) !important;
  border-color: rgba(124,58,237,.85) !important;
  color: #fff !important;
  box-shadow: 0 12px 40px rgba(124,58,237,.20) !important;
}

#tab-spin #spinOutTabs .chip{
  font-weight: 800 !important;
}

/* Make disabled-looking tabs NOT look disabled */
#tab-spin #spinOutTabs .chip[disabled],
#tab-spin #spinOutTabs .chip.disabled{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* TP_YT_HIDE_DRAFTBARV5_ONLY_V1_DISABLED */
#tab-youtube #tpYtDraftBarV5 { display:flex !important; visibility:visible !important; opacity:1 !important; }

/* TP_SPIN_BEAUTIFUL_CHIPS_CSS_V1 (Spin-only) */
#tab-spin .spinpro-chips, #tab-spin .spinpro-outtabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#tab-spin .spinpro-chips .chip,
#tab-spin .spinpro-outtabs .chip{
  border-radius:999px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(232,240,255,.92);
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#tab-spin .spinpro-chips .chip:hover,
#tab-spin .spinpro-outtabs .chip:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.10);
}
#tab-spin .spinpro-chips .chip.active,
#tab-spin .spinpro-outtabs .chip.active{
  background:rgba(139,45,219,.28);
  border-color:rgba(139,45,219,.65);
  box-shadow:0 0 0 2px rgba(139,45,219,.16) inset;
  color:#fff;
}
#tab-spin #spinOutEmojis,
#tab-spin #spinOutHashtags{
  width:100%;
  height:44px;
  border-radius:12px;
  padding:0 12px;
  background:rgba(10,12,22,.35);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(232,240,255,.95);
  outline:none;
}
#tab-spin #spinOutput{
  width:100%;
  border-radius:14px;
  padding:12px;
  background:rgba(10,12,22,.35);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(232,240,255,.95);
  outline:none;
}

/* TP_HIDE_YT_RESET_ONLY_V1 */
#tab-youtube #btnYtDraftResetV5{
  display:none !important;
}

/* TP_MAIN_COLLAPSIBLE_SIDEBAR_V1
   Desktop-only collapsible sidebar.
   Keeps mobile drawer behavior untouched.
*/
@media (min-width: 901px){
  .tp-sidebar-collapse-btn{
    margin-top:10px !important;
    width:100% !important;
    justify-content:center !important;
    padding:9px 10px !important;
    border-radius:12px !important;
  }

  body.tp-sidebar-mini .sidebar{
    width:82px !important;
    min-width:82px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    overflow:hidden !important;
  }

  body.tp-sidebar-mini .main{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  body.tp-sidebar-mini .brand-title,
  body.tp-sidebar-mini .brand-sub,
  body.tp-sidebar-mini .sidebar-footer,
  body.tp-sidebar-mini .nav .hint,
  body.tp-sidebar-mini .nav button > div,
  body.tp-sidebar-mini .nav button .tp-v2-tab-copy{
    display:none !important;
  }

  body.tp-sidebar-mini .nav{
    padding:0 !important;
    gap:10px !important;
  }

  body.tp-sidebar-mini .nav button,
  body.tp-sidebar-mini .tab[data-tab]{
    width:58px !important;
    height:48px !important;
    min-width:58px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }

  body.tp-sidebar-mini .nav button::before{
    content:"•";
    font-size:22px;
    line-height:1;
  }

  body.tp-sidebar-mini .nav button[data-tab="podcast-v2-embed"]::before{ content:"🎙"; }
  body.tp-sidebar-mini .nav button[data-tab="youtube"]::before{ content:"▶"; }
  body.tp-sidebar-mini .nav button[data-tab="spin"]::before{ content:"✍"; }
  body.tp-sidebar-mini .nav button[data-tab="settings"]::before{ content:"⚙"; }

  body.tp-sidebar-mini .nav button > span{
    display:none !important;
  }

  body.tp-sidebar-mini .tp-sidebar-collapse-btn{
    width:58px !important;
    min-width:58px !important;
  }

  body.tp-sidebar-mini .tp-sidebar-collapse-btn::after{
    content:"";
  }
}

@media (max-width: 900px){
  .tp-sidebar-collapse-btn{
    display:none !important;
  }
}

/* TP_AUDIO_EXTRACTOR_ICON_V1
   Adds clear Audio Extractor icon support, including collapsed sidebar mode.
*/
.nav button[data-tab="audio-extractor"]::before,
.tab[data-tab="audio-extractor"]::before{
  content:"🎧";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  font-size:18px;
  line-height:1;
}

body.tp-sidebar-mini .nav button[data-tab="audio-extractor"]::before,
body.tp-sidebar-mini .tab[data-tab="audio-extractor"]::before{
  content:"🎧" !important;
  margin-right:0 !important;
  font-size:22px !important;
}

body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] > span,
body.tp-sidebar-mini .tab[data-tab="audio-extractor"] > span{
  display:none !important;
}

/* TP_AUDIO_EXTRACTOR_TAB_ICON_MARKUP_V1 */
.nav button[data-tab="audio-extractor"],
.tab[data-tab="audio-extractor"]{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.nav button[data-tab="audio-extractor"]::before,
.tab[data-tab="audio-extractor"]::before{
  content:none !important;
  display:none !important;
}

.tp-ae-tab-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  min-width:22px;
}

.tp-ae-tab-label{
  display:inline-block;
}

.tp-ae-tab-arrow{
  margin-left:auto;
  opacity:.9;
}

body.tp-sidebar-mini .tab[data-tab="audio-extractor"],
body.tp-sidebar-mini .nav button[data-tab="audio-extractor"]{
  width:58px !important;
  height:48px !important;
  min-width:58px !important;
  padding:0 !important;
  justify-content:center !important;
}

body.tp-sidebar-mini .tab[data-tab="audio-extractor"] .tp-ae-tab-label,
body.tp-sidebar-mini .tab[data-tab="audio-extractor"] .tp-ae-tab-arrow,
body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] .tp-ae-tab-label,
body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] .tp-ae-tab-arrow{
  display:none !important;
}

body.tp-sidebar-mini .tab[data-tab="audio-extractor"] .tp-ae-tab-icon,
body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] .tp-ae-tab-icon{
  font-size:24px !important;
  min-width:0 !important;
}

/* TP_AUDIO_EXTRACTOR_ICON_VISIBLE_FIX_V1
   Fix: collapsed sidebar globally hides nav direct spans.
   Re-show only the Audio Extractor icon span.
*/
body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] > .tp-ae-tab-icon,
body.tp-sidebar-mini .tab[data-tab="audio-extractor"] > .tp-ae-tab-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  line-height:1 !important;
  min-width:0 !important;
  margin:0 !important;
}

body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] > .tp-ae-tab-label,
body.tp-sidebar-mini .nav button[data-tab="audio-extractor"] > .tp-ae-tab-arrow,
body.tp-sidebar-mini .tab[data-tab="audio-extractor"] > .tp-ae-tab-label,
body.tp-sidebar-mini .tab[data-tab="audio-extractor"] > .tp-ae-tab-arrow{
  display:none !important;
}

/* TP_HIDE_MOBILE_CLOSE_ON_DESKTOP_SIDEBAR_V1
   The X close button is only useful for mobile drawer mode.
   Hide it on desktop/collapsed sidebar; keep mobile behavior unchanged.
*/
@media (min-width: 901px){
  #sidebarClose{
    display:none !important;
  }

  body.tp-sidebar-mini .sidebar-top-actions{
    display:none !important;
  }

  body.tp-sidebar-mini .tp-sidebar-collapse-btn{
    margin-top:0 !important;
  }
}

/* TP_MOBILE_NAV_CLEANUP_V1
   Mobile-only drawer cleanup. Desktop collapsed sidebar remains unchanged.
*/
@media (max-width: 900px){
  body.tp-sidebar-open #sidebar,
  body.tp-sidebar-open .sidebar{
    transform:translateX(0) !important;
  }

  #tpMobileOverlay.tp-show,
  .sb-backdrop.show{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  #sidebar,
  .sidebar{
    max-width:min(320px, 86vw) !important;
  }

  #sidebar .nav button,
  .sidebar .nav button{
    min-height:48px !important;
  }
}


.tp-v3-main-embed-frame{
  width:100%;
  min-height:calc(100vh - 18px);
  height:calc(100vh - 18px);
  border:0;
  display:block;
  background:#070b16;
}

@media(max-width:900px){
  .tp-v3-main-embed-frame{
    min-height:calc(100vh - 10px);
    height:calc(100vh - 10px);
  }
}


/* TP_MAIN_PODCAST_V3_IFRAME_EXACT_V1
   Main app keeps data-tab="podcast-v2-embed" but loads Podcast V3 inside the app.
*/
.tp-v3-main-embed-shell{
  width:100%;
  min-height:calc(100vh - 12px);
  overflow:hidden;
  background:#070b16;
}

.tp-v3-main-embed-frame{
  width:100%;
  min-height:calc(100vh - 12px);
  height:calc(100vh - 12px);
  border:0;
  display:block;
  background:#070b16;
}

/* TP_MOBILE_MENU_V3_MAIN_TOPBAR_FIX_V1
   On mobile, keep Menu usable on the embedded Podcast V3 tab,
   but hide old podcast action buttons that do not apply to V3 iframe.
*/
@media (max-width: 900px){
  body:has(#tab-podcast-v2-embed[style*="display: block"]) #headerActions #btnBuild,
  body:has(#tab-podcast-v2-embed[style*="display: block"]) #headerActions #btnCoverUpload,
  body:has(#tab-podcast-v2-embed[style*="display: block"]) #headerActions #btnNewEpisode,
  body:has(#tab-podcast-v2-embed[style*="display: block"]) #headerActions #btnPublish,
  body:has(#tab-podcast-v2-embed[style*="display: block"]) #headerActions #uiBadge,
  body:has(#tab-podcast-v2-embed[style*="display: block"]) #headerActions #tpBuildBadge{
    display:none !important;
  }

  #sidebarToggle{
    display:inline-flex !important;
  }
}

/* TP_AUDIO_EXTRACTOR_MOBILE_MENU_FIX_V1
   On mobile Audio Extractor tab, keep Menu usable and hide old header action clutter.
*/
@media (max-width: 900px){
  #sidebarToggle{
    display:inline-flex !important;
  }

  body:has(#tab-audio-extractor[style*="display: block"]) #headerActions #btnBuild,
  body:has(#tab-audio-extractor[style*="display: block"]) #headerActions #btnCoverUpload,
  body:has(#tab-audio-extractor[style*="display: block"]) #headerActions #btnNewEpisode,
  body:has(#tab-audio-extractor[style*="display: block"]) #headerActions #btnPublish,
  body:has(#tab-audio-extractor[style*="display: block"]) #headerActions #uiBadge,
  body:has(#tab-audio-extractor[style*="display: block"]) #headerActions #tpBuildBadge{
    display:none !important;
  }
}


/* TP_SPIN_LAYOUT_GUARD_V1
   Keep Spin Studio aligned inside the main app after V3/sidebar updates.
   Safe scope: #tab-spin only.
*/
#tab-spin{
  width:100%;
  max-width:1200px;
  margin:0 auto !important;
  padding:18px 18px 34px !important;
  box-sizing:border-box;
}

#tab-spin .page-title{
  font-size:clamp(26px,3vw,34px) !important;
  line-height:1.08 !important;
  margin:0 0 6px !important;
  letter-spacing:-0.02em;
}

#tab-spin .page-sub{
  margin:0 0 16px !important;
}

#tab-spin .spinpro-wrap{
  width:100%;
  box-sizing:border-box;
  margin:0 0 16px !important;
}

#tab-spin .card-h{
  gap:12px;
  flex-wrap:wrap;
}

#tab-spin .spinpro-actions{
  margin-left:auto;
}

#tab-spin textarea#spinSource,
#tab-spin textarea.spinpro-output,
#tab-spin #spinOutput{
  width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width:760px){
  #tab-spin{
    padding:14px 12px 28px !important;
  }

  #tab-spin .card-h,
  #tab-spin .spinpro-row{
    align-items:stretch !important;
  }

  #tab-spin .spinpro-actions{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }

  #tab-spin .field{
    min-width:0 !important;
    width:100%;
  }
}
/* /TP_SPIN_LAYOUT_GUARD_V1 */


/* TP_SPIN_CONTROL_ROW_FIX_V1
   Fix Spin Studio lower controls alignment only.
   Safe scope: #tab-spin only.
*/
#tab-spin{
  padding-top:28px !important;
}

#tab-spin .spinpro-row{
  display:grid !important;
  grid-template-columns:minmax(420px,1fr) minmax(190px,220px) minmax(150px,180px);
  gap:18px !important;
  align-items:end !important;
}

#tab-spin .spinpro-row > .field{
  min-width:0 !important;
}

#tab-spin #spinPlatforms{
  align-items:center !important;
}

#tab-spin #spinPlatforms .chip{
  line-height:1.15 !important;
}

#tab-spin #spinTone,
#tab-spin #spinVariants{
  height:48px !important;
}

#tab-spin label.row{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  min-height:auto !important;
  margin:0 !important;
  line-height:1.2 !important;
}

#tab-spin label.row input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

#tab-spin label.row span,
#tab-spin label.row .muted{
  font-size:14px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

#tab-spin #spinStatus{
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 18px !important;
  margin-left:auto !important;
  font-size:15px !important;
  font-weight:800 !important;
}

@media (max-width:980px){
  #tab-spin .spinpro-row{
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }

  #tab-spin #spinStatus{
    width:100% !important;
    margin-left:0 !important;
  }
}

@media (max-width:760px){
  #tab-spin{
    padding-top:18px !important;
  }

  #tab-spin label.row{
    width:100% !important;
  }
}
/* /TP_SPIN_CONTROL_ROW_FIX_V1 */

/* TP_SPIN_OUTPUT_FIELD_VISIBLE_V1
   Restore visible Spin output field/viewer.
   Source DOM showed output .card-b hidden inline.
   Safe scope: #tab-spin only.
*/
#tab-spin .spinpro-wrap:nth-of-type(2) .card-b{
  display:block !important;
  padding-top:18px !important;
}

#tab-spin #tpSpinCleanWrapV1{
  display:block !important;
}

#tab-spin #tpSpinCleanTextV1{
  display:block !important;
  width:100% !important;
  min-height:260px !important;
  box-sizing:border-box !important;
  border-radius:16px !important;
}

#tab-spin #tpSpinCleanEmojiV1,
#tab-spin #tpSpinCleanHashV1{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
}

#tab-spin #tpSpinCanonViewerV1,
#tab-spin #tpSpinIsoWrapV1{
  display:none !important;
}
/* /TP_SPIN_OUTPUT_FIELD_VISIBLE_V1 */

/* TP_YOUTUBE_DETAILS_INLINE_MAIN_V1
   Clean main app YouTube tab after replacing old YouTube Studio.
   Removes the useless topbar/action area only when YouTube Details is active.
*/
body:has(#tab-youtube[style*="display: block"]) .topbar,
body:has(#tab-youtube[style*="display: block"]) .topbar-inner,
body:has(#tab-youtube:not([style*="display:none"])) .topbar,
body:has(#tab-youtube:not([style*="display:none"])) .topbar-inner{
  display:none !important;
}

#tab-youtube.TP_YD_INLINE_CLEAN,
#tab-youtube{
  padding-top:0 !important;
}

#tab-youtube .tp-yt-wrap{
  max-width:1180px !important;
  padding-top:18px !important;
}

#tab-youtube iframe[src*="/youtube-details/"],
#tab-youtube #tpYtDraftBarV5,
#tab-youtube #tpYtPrepModeHintV1,
#tab-youtube #tpYtActionsProV1,
#tab-youtube #tpYtPropackToolsRow{
  display:none !important;
}

/* TP_REMOVE_YT_PROPACK_REMNANT_V1 */
#tpYtPropackToolsRow,
#tpYtActionsProV1,
#tpYtPrepModeHintV1,
#tpYtDraftBarV5{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* TP_SPIN_YOUTUBE_CHIP_CLEAN_V1 */
#tab-spin [data-spin-target="youtube"],
#spinPlatforms [data-spin-target="youtube"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-width:auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
}
#tab-spin [data-spin-target="youtube"] span,
#spinPlatforms [data-spin-target="youtube"] span{
  display:contents !important;
}

/* TP_SIDEBAR_TAB_CENTER_ALIGN_V1
   Normalize mixed sidebar tab markup so tab text centers consistently.
   Safe scope: desktop/sidebar nav only.
*/
#sidebar .nav .tab[data-tab],
.sidebar .nav .tab[data-tab],
#sidebar .nav button[data-tab],
.sidebar .nav button[data-tab]{
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 34px !important;
  align-items:center !important;
  column-gap:8px !important;
  min-height:72px !important;
  padding:14px 14px !important;
  text-align:center !important;
}

#sidebar .nav .tab[data-tab] > div,
.sidebar .nav .tab[data-tab] > div,
#sidebar .nav button[data-tab] > div,
.sidebar .nav button[data-tab] > div,
#sidebar .nav .tab[data-tab] > .tp-v2-tab-copy,
.sidebar .nav .tab[data-tab] > .tp-v2-tab-copy{
  grid-column:2 !important;
  justify-self:center !important;
  align-self:center !important;
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  line-height:1.12 !important;
}

#sidebar .nav .tab[data-tab] .hint,
.sidebar .nav .tab[data-tab] .hint,
#sidebar .nav button[data-tab] .hint,
.sidebar .nav button[data-tab] .hint{
  display:block !important;
  text-align:center !important;
  line-height:1.12 !important;
  margin-top:3px !important;
}

#sidebar .nav .tab[data-tab] > .tab-icon,
.sidebar .nav .tab[data-tab] > .tab-icon,
#sidebar .nav .tab[data-tab] > .tp-ae-tab-icon,
.sidebar .nav .tab[data-tab] > .tp-ae-tab-icon{
  grid-column:1 !important;
  justify-self:center !important;
  align-self:center !important;
  margin:0 !important;
}

#sidebar .nav .tab[data-tab] > .tp-ae-tab-label,
.sidebar .nav .tab[data-tab] > .tp-ae-tab-label,
#sidebar .nav .tab[data-tab] > span:not([aria-hidden="true"]):not(.tab-icon):not(.tp-ae-tab-icon):not(.tp-ae-tab-arrow),
.sidebar .nav .tab[data-tab] > span:not([aria-hidden="true"]):not(.tab-icon):not(.tp-ae-tab-icon):not(.tp-ae-tab-arrow){
  grid-column:2 !important;
  justify-self:center !important;
  text-align:center !important;
  width:100% !important;
  line-height:1.12 !important;
}

#sidebar .nav .tab[data-tab] > span[aria-hidden="true"],
.sidebar .nav .tab[data-tab] > span[aria-hidden="true"],
#sidebar .nav .tab[data-tab] > .tp-ae-tab-arrow,
.sidebar .nav .tab[data-tab] > .tp-ae-tab-arrow{
  grid-column:3 !important;
  justify-self:center !important;
  align-self:center !important;
  margin:0 !important;
}

/* Keep collapsed sidebar icon-only behavior intact. */
body.tp-sidebar-mini #sidebar .nav .tab[data-tab],
body.tp-sidebar-mini .sidebar .nav .tab[data-tab],
body.tp-sidebar-mini #sidebar .nav button[data-tab],
body.tp-sidebar-mini .sidebar .nav button[data-tab]{
  display:flex !important;
  grid-template-columns:none !important;
  min-height:48px !important;
  padding:0 !important;
}
/* /TP_SIDEBAR_TAB_CENTER_ALIGN_V1 */

/* TP_HIDE_EXPANDED_SIDEBAR_TAB_ICONS_V1
   In full sidebar mode, hide decorative left icons and let text center cleanly.
   Mini/collapsed sidebar icon-only behavior remains untouched.
*/
body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab],
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab],
body:not(.tp-sidebar-mini) #sidebar .nav button[data-tab],
body:not(.tp-sidebar-mini) .sidebar .nav button[data-tab]{
  grid-template-columns:24px minmax(0,1fr) 34px !important;
}

body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab] > .tab-icon,
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab] > .tab-icon,
body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab] > .tp-ae-tab-icon,
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab] > .tp-ae-tab-icon,
body:not(.tp-sidebar-mini) #sidebar .nav button[data-tab]::before,
body:not(.tp-sidebar-mini) .sidebar .nav button[data-tab]::before{
  display:none !important;
  content:none !important;
}

body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab] > div,
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab] > div,
body:not(.tp-sidebar-mini) #sidebar .nav button[data-tab] > div,
body:not(.tp-sidebar-mini) .sidebar .nav button[data-tab] > div,
body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab] > .tp-v2-tab-copy,
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab] > .tp-v2-tab-copy,
body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab] > .tp-ae-tab-label,
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab] > .tp-ae-tab-label,
body:not(.tp-sidebar-mini) #sidebar .nav .tab[data-tab] > span:not([aria-hidden="true"]):not(.tab-icon):not(.tp-ae-tab-icon):not(.tp-ae-tab-arrow),
body:not(.tp-sidebar-mini) .sidebar .nav .tab[data-tab] > span:not([aria-hidden="true"]):not(.tab-icon):not(.tp-ae-tab-icon):not(.tp-ae-tab-arrow){
  grid-column:2 !important;
  justify-self:center !important;
  text-align:center !important;
}

body.tp-sidebar-mini #sidebar .nav .tab[data-tab] > .tab-icon,
body.tp-sidebar-mini .sidebar .nav .tab[data-tab] > .tab-icon,
body.tp-sidebar-mini #sidebar .nav .tab[data-tab] > .tp-ae-tab-icon,
body.tp-sidebar-mini .sidebar .nav .tab[data-tab] > .tp-ae-tab-icon{
  display:inline-flex !important;
}
/* /TP_HIDE_EXPANDED_SIDEBAR_TAB_ICONS_V1 */

/* TP_SPIN_HIDE_GLOBAL_TOPBAR_V1
   Hide the shared app topbar only while the fresh Spin tab is active.
   Fresh Spin already has its own compact hero/title area.
*/
body:has(#tab-spin[style*="display: block"]) .topbar,
body:has(#tab-spin[style*="display: block"]) .topbar-inner,
body:has(#tab-spin:not([style*="display:none"])) .topbar,
body:has(#tab-spin:not([style*="display:none"])) .topbar-inner{
  display:none !important;
}

body:has(#tab-spin[style*="display: block"]) main.main,
body:has(#tab-spin:not([style*="display:none"])) main.main{
  padding-top:0 !important;
}

/* TP_FIX_DOUBLE_YOUTUBE_PLAY_ICON_MINI_V1
   Collapsed sidebar had both real .tab-icon and CSS ::before icon.
   Keep one icon only.
*/
body.tp-sidebar-mini #sidebar .nav button[data-tab="youtube"] > .tab-icon,
body.tp-sidebar-mini .sidebar .nav button[data-tab="youtube"] > .tab-icon,
body.tp-sidebar-mini #sidebar .nav .tab[data-tab="youtube"] > .tab-icon,
body.tp-sidebar-mini .sidebar .nav .tab[data-tab="youtube"] > .tab-icon{
  display:none !important;
}
/* /TP_FIX_DOUBLE_YOUTUBE_PLAY_ICON_MINI_V1 */

/* TP_YD_MOBILE_MENU_BTN_V1
   YouTube Details hides the global topbar, so mobile needs its own sidebar Menu button.
*/
#tab-youtube .tp-yt-mobile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#tab-youtube .tp-yt-mobile-menu-btn{
  display:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  padding:9px 13px;
  font-weight:850;
  cursor:pointer;
}
@media(max-width:900px){
  #tab-youtube .tp-yt-mobile-menu-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:38px;
    position:relative;
    z-index:120;
  }
}

/* TP_MOBILE_MENU_UNIFIED_STYLE_V1
   One consistent mobile Menu button style across tabs:
   - #sidebarToggle = global topbar Menu
   - #mobileMenuBtn = tab-local Menu used when a tab hides the global topbar
*/
#sidebarToggle,
#mobileMenuBtn,
[data-action="sidebar-toggle"].tp-yt-mobile-menu-btn{
  min-height:42px !important;
  padding:10px 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(148,163,184,.42) !important;
  background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.92)) !important;
  color:#f8fafc !important;
  font-weight:850 !important;
  font-size:15px !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-decoration:none !important;
}

#sidebarToggle:hover,
#mobileMenuBtn:hover,
[data-action="sidebar-toggle"].tp-yt-mobile-menu-btn:hover{
  border-color:rgba(167,139,250,.72) !important;
  background:linear-gradient(135deg,rgba(51,65,85,.96),rgba(30,41,59,.96)) !important;
}

#sidebarToggle:active,
#mobileMenuBtn:active,
[data-action="sidebar-toggle"].tp-yt-mobile-menu-btn:active{
  transform:translateY(1px);
}

/* Keep unified menu mobile-only unless a tab-local mobile rule explicitly displays it. */
@media(min-width:901px){
  #mobileMenuBtn,
  [data-action="sidebar-toggle"].tp-yt-mobile-menu-btn{
    display:none !important;
  }
}

/* Match the global menu button sizing on mobile. */
@media(max-width:900px){
  #sidebarToggle,
  #mobileMenuBtn,
  [data-action="sidebar-toggle"].tp-yt-mobile-menu-btn{
    display:inline-flex !important;
    width:auto !important;
    min-width:112px !important;
    max-width:180px !important;
    position:relative !important;
    z-index:150 !important;
  }

  #headerActions{
    gap:10px !important;
  }
}


/* TP_UNIVERSAL_MOBILE_MENU_V1
   Stable mobile Menu button across all tabs.
   It is outside the tab/topbar system, so it will not disappear when tabs hide topbars.
*/
#tpUniversalMobileMenu{
  display:none;
}

@media(max-width:900px){
  #tpUniversalMobileMenu{
    display:inline-flex !important;
    position:fixed !important;
    top:12px !important;
    left:14px !important;
    z-index:10050 !important;
    min-height:42px !important;
    min-width:112px !important;
    max-width:180px !important;
    padding:10px 18px !important;
    border-radius:16px !important;
    border:1px solid rgba(148,163,184,.42) !important;
    background:linear-gradient(135deg,rgba(30,41,59,.96),rgba(15,23,42,.96)) !important;
    color:#f8fafc !important;
    font-weight:850 !important;
    font-size:15px !important;
    letter-spacing:.01em !important;
    line-height:1 !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
    cursor:pointer !important;
  }

  #tpUniversalMobileMenu:hover{
    border-color:rgba(167,139,250,.72) !important;
    background:linear-gradient(135deg,rgba(51,65,85,.98),rgba(30,41,59,.98)) !important;
  }

  #tpUniversalMobileMenu:active{
    transform:translateY(1px);
  }

  /* Hide unstable old mobile menu buttons. Universal menu replaces them. */
  #sidebarToggle,
  #mobileMenuBtn,
  #tab-youtube .tp-yt-mobile-menu-btn{
    display:none !important;
  }

  /* Prevent content from sitting under the fixed universal menu. */
  main.main{
    padding-top:62px !important;
  }

  body:has(#tab-youtube[style*="display: block"]) main.main,
  body:has(#tab-youtube:not([style*="display:none"])) main.main,
  body:has(#tab-spin[style*="display: block"]) main.main,
  body:has(#tab-spin:not([style*="display:none"])) main.main{
    padding-top:62px !important;
  }
}

/* TP_YD_EDITABLE_OUTPUTS_INLINE_V1 */
#tab-youtube textarea.tp-output.tp-editable-output{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:120px;
  white-space:pre-wrap;
  overflow:auto;
  font-family:inherit;
  line-height:1.45;
  resize:vertical;
}
#tab-youtube textarea.tp-output.tp-editable-output.small{
  min-height:72px;
}
#tab-youtube textarea.tp-output.tp-editable-output.full{
  min-height:260px;
}
#tab-youtube textarea.tp-output.tp-editable-output:focus{
  border-color:rgba(139,92,246,.7);
  box-shadow:0 0 0 3px rgba(139,92,246,.15);
  outline:none;
}

/* TP_YD_EDITABLE_AUTOEXPAND_INLINE_V1 */
#tab-youtube textarea.tp-output.tp-editable-output{
  overflow:hidden;
  resize:vertical;
}
#tab-youtube textarea.tp-output.tp-editable-output.full{
  resize:vertical;
}

/* TP_YD_LANGUAGE_SELECT_STYLE_V1 */
.tp-yd-language-select,
#tab-youtube .tp-yd-language-select{
  width:100%;
  box-sizing:border-box;
  margin:6px 0 8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.72);
  color:#f8fafc;
  font:inherit;
  outline:none;
}
.tp-yd-language-select:focus,
#tab-youtube .tp-yd-language-select:focus{
  border-color:rgba(139,92,246,.7);
  box-shadow:0 0 0 3px rgba(139,92,246,.15);
}
.tp-yd-language-select option{
  background:#111827;
  color:#f8fafc;
}