/* TeacherFly - Original Theme + Dark Mode */
:root {
  /* Light mode = your original design */
  --bg: #F3F5F9;         
  --card: #FFFFFF;       
  --sidebar: #FFFFFF;    
  --text: #0F172A;       
  --text-muted: #64748B; 
  --border: #E5E7EB;     
  --indigo: #6366F1;     
  --navy: #1E3A8A;       
  --coral: #FF8A6B;      
  --soft: #FFE7E1;       
  --input-bg: #FFFFFF;
  --hover-bg: #F8FAFC;
  --scene-bg: #FAFBFC;
  --r: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
}

:root.dark {
  /* DARK MODE - 2 TONES ONLY TO MATCH TARGET */
  --bg: #0B1120;         /* Tone 1: Page background only */
  --card: #1E293B;       /* Tone 2: Everything else - sidebar, cards, inputs */
  --sidebar: #1E293B;    /* Same as cards */
  --text: #F1F5F9;       /* Main text */
  --text-muted: #94A3B8; /* Labels, muted text */
  --border: #334155;     /* Visible borders for outlines */
  --indigo: #6366F1;     /* Brand Secondary Indigo - used for all highlights */
  --navy: #1E3A8A;       /* Brand Primary Blue - used in gradients only */
  --coral: #FF8A6B;      
  --soft: #312E81;       
  --input-bg: #1E293B;   /* Inputs same as cards */
  --hover-bg: #334155;   /* Hover slightly lighter */
  --scene-bg: #1E293B;   /* Same as cards */
  --shadow: 0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.3);
}

/* Or if you want different colors per mode */
.card h2 {
  color: #1E3A8A; /* Navy in light mode */
}
:root.dark .card h2 {
  color: #F1F5F9; /* White in dark mode */
}

/* Input focus glow using your brand indigo */
input:focus, select:focus, textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  outline: none;
}

/* Active section subtle lift */
section:has(input:focus), 
section:has(select:focus),
section:has(textarea:focus) {
  background: rgba(99, 102, 241, 0.03);
  border-radius: 12px;
  padding: 16px;
  margin: -16px -16px 8px -16px;
  transition: all 0.2s ease;
}

/* Gradient dividers instead of flat lines */
section:not(:last-of-type) {
  padding-bottom: 24px;
  margin-bottom: 24px;
  background-image: linear-gradient(to right, transparent, var(--border), transparent);
  background-size: 100% 1px;
  background-position: bottom;
  background-repeat: no-repeat;
  border-bottom: none !important; /* Override inline border */
}

/* Chip glow for active states */
.chip.active {
  box-shadow: 0 0 12px rgba(99,102,241,0.3);
}

/* Advanced Settings accent */
details summary { 
  color: #8B5CF6; 
  font-weight: 600;
}

/* Summary box + Generate button polish */
#settingsBar {
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.08) 100%);
  border: 1px solid rgba(99,102,241,0.2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}

#gen {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transition: all 0.2s ease;
}
#gen:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

/* 1. FORCE ONE CARD COLOR - eliminates the two-tone bug */
:root.dark body { background: var(--bg) !important; }
:root.dark .sidebar,
:root.dark .card,
:root.dark .right,
:root.dark .scene,
:root.dark .library-card,
:root.dark .form-group input,
:root.dark .form-group select,
:root.dark .chip,
:root.dark .quick-btn,
:root.dark .lib-btn,
:root.dark .stats .stat {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* 3. FIX ALL ACTIVE/HIGHLIGHT STATES - use Secondary Indigo #6366F1 */
:root.dark .chip.active,
:root.dark .lib-btn.primary,
:root.dark .btn-primary {
  background: var(--indigo) !important;
  color: #FFFFFF !important;
  border-color: var(--indigo) !important;
}



/* 5. BRING BACK OUTLINES - you said you can't see setting blocks */
:root.dark .card,
:root.dark .scene,
:root.dark .library-card,
:root.dark .form-group input,
:root.dark .form-group select,
:root.dark .chip,
:root.dark .quick-btn,
:root.dark .stats .stat {
  border: 1px solid var(--border) !important;
}

/* 6. Logged in banner - use Primary Blue #1E3A8A */
:root.dark [class*="logged"] {
  background: var(--navy) !important;
  color: #FFFFFF !important;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;transition:background 0.2s,color 0.2s}
.app{display:grid;grid-template-columns:260px 1fr 320px;min-height:100vh}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);padding:24px 20px}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.logo img{width:24px;height:24px}
.logo-text{font-size:22px;font-weight:800;color:var(--text)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-btn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:none;background:transparent;text-align:left;border-radius:10px;color:#1E3A8A;font-weight:600;}.nav-btn:hover{background:rgba(99, 102, 241, 0.1) !important}
.nav-btn.active svg,
.nav-btn.active svg,
.nav-btn.active img {
  filter: brightness(0) saturate(100%) invert(38%) sepia(77%) saturate(1352%) hue-rotate(222deg) brightness(91%) contrast(101%) !important;
}
html.dark .nav-btn {
  color: #F3F5F9;
}
.nav-btn .nav-icon {
  stroke: currentColor !important;
  fill: none !important;
}

.main{padding:28px;overflow-y:auto}
.right{border-left:1px solid var(--border);background:var(--card);padding:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow)}
.welcome{background:linear-gradient(135deg,var(--indigo),var(--navy));color:white;padding:24px;border-radius:16px;margin-bottom:24px}
.welcome h1{font-size:24px;margin-bottom:4px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.form-group input,.form-group select{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;background:var(--input-bg);color:var(--text)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(0,0,0,.06);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border:1.5px solid var(--border);border-radius:20px;background:var(--input-bg);color:var(--text);font-size:13px;font-weight:500;line-height:1;cursor:pointer;transition:all .2s}
.chip .nav-icon{flex-shrink:0;display:block}
.chip .x-icon-dark{display:none}
:root.dark .chip .x-icon-light{display:none}
:root.dark .chip .x-icon-dark{display:block}

/* === GLASSY ACTIVE STATE - Light + Dark Mode === */
.chip.active,
.nav-btn.active,
.toggle-btn.active,
.platform-btn.active,
.lib-btn.primary {  /* ADDED: Makes "Open" look selected by default */
  background: rgba(99, 102, 241, 0.15) !important;
  color: #6366F1 !important;
  border: 1.5px solid rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 
              0 4px 12px rgba(99, 102, 241, 0.25) !important;
  font-weight: 600;
}

/* Dark mode: brighter text + stronger glow */
:root.dark .chip.active,
:root.dark .nav-btn.active,
:root.dark .toggle-btn.active,
:root.dark .platform-btn.active,
:root.dark .lib-btn.primary {  /* ADDED: Dark mode version */
  background: rgba(99, 102, 241, 0.2) !important;
  color: #A5B4FC !important;
  border-color: rgba(129, 140, 248, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 
              0 4px 16px rgba(99, 102, 241, 0.35) !important;
}
.btn-primary{width:100%;padding:14px;background:var(--indigo);color:white;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;margin-top:20px}
.btn-primary:hover{background:#5855eb}
.btn-primary:disabled{opacity:.6}
.advanced{margin-top:20px;padding-top:20px;border-top:1px dashed var(--border)}
.advanced summary{cursor:pointer;font-weight:600;color:var(--indigo);font-size:14px}
/* Gradient dividers + section color coding */
section[data-section] { 
  position: relative; 
  padding-bottom: 24px; 
  margin-bottom: 24px;
  background-image: linear-gradient(to right, transparent, var(--border), transparent);
  background-size: 100% 1px;
  background-position: bottom;
  background-repeat: no-repeat;
  border-bottom: none !important; /* Remove old flat border */
}
 /* ===== Section Accent System ===== */
/* Light mode */
section[data-section="topic"] { 
  border-left: 3px solid #1E3A8A; 
  padding-left: 16px; 
  margin-left: -16px; 
  border-radius: 12px 0 0 12px;
}
section[data-section="audience"] { 
  border-left: 3px solid #1E3A8A; 
  padding-left: 16px; 
  margin-left: -16px; 
  border-radius: 12px 0 0 12px;
}
section[data-section="grammar"] { 
  border-left: 3px solid #1E3A8A; 
  padding-left: 16px; 
  margin-left: -16px; 
  border-radius: 12px 0 0 12px;
}
section[data-section="strategy"] { 
  border-left: 3px solid #1E3A8A; 
  padding-left: 16px; 
  margin-left: -16px; 
  border-radius: 12px 0 0 12px;
}
section[data-section="style"] { 
  border-left: 3px solid #1E3A8A; 
  padding-left: 16px; 
  margin-left: -16px; 
  border-radius: 12px 0 0 12px;
}
/* Dark mode */
:root.dark section[data-section="topic"] { border-left-color: #babdc2; }
:root.dark section[data-section="audience"] { border-left-color: #babdc2; }
:root.dark section[data-section="grammar"] { border-left-color: #babdc2; }
:root.dark section[data-section="strategy"] { border-left-color: #babdc2; }
:root.dark section[data-section="style"] { border-left-color: #babdc2; }

/* Light mode */
section[data-section="topic"] .section-header { color: #128a8a; }
section[data-section="audience"] .section-header { color: #6366F1; }
section[data-section="grammar"] .section-header { color: #FF8A6B; }
section[data-section="strategy"] .section-header { color: #1593cf; }
section[data-section="style"] .section-header { color: #EC4899; }
/* Light mode subheaders */
.form-group > label { color: #1E3A8A; }  /* gray-500 */

/* Dark mode */
:root.dark section[data-section="topic"] .section-header { color: #128a8a; }
:root.dark section[data-section="audience"] .section-header { color: #6366F1; }
:root.dark section[data-section="grammar"] .section-header { color: #FF8A6B; }
:root.dark section[data-section="strategy"] .section-header { color: #1593cf; }
:root.dark section[data-section="style"] .section-header { color: #EC4899; }
/* Dark mode subheaders */
:root.dark .form-group > label { color: #babdc2; }  /* gray-400 */

.scene{display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--scene-bg)}

.scene-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:3px}
.scene-text{font-size:14px;color:var(--text)}
.trans{margin-top:6px;padding-top:6px;border-top:1px dashed #e2e8f0;font-size:13px;color:var(--text-muted);font-style:italic}
.visual{margin-top:6px;font-size:12px;color:var(--text-muted);background:var(--hover-bg);padding:6px 8px;border-radius:6px;border-left:3px solid var(--indigo)}
.quick-btn {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: .15s;
}
.quick-btn:hover {
  border-color: var(--indigo);
  background: var(--hover-bg);
}
:root.dark .quick-btn:hover {
  border-color: var(--indigo) !important;
  background: var(--hover-bg) !important;
}

:root.dark .quick-btn.active,
:root.dark .quick-btn:focus {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 1px var(--indigo) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  outline: none !important;
}
.quick-btn.active,
.quick-btn:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 1px var(--indigo);
  background: var(--card);
  outline: none;
}
.quick-btn:disabled{opacity:.5;cursor:not-allowed}
.repurpose-btn {
  width: 100%;
  padding: 14px 16px;
  margin-top: 12px;
  border: 1.5px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.08);
  color: var(--text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;  /* Centers the text */
  position: relative;
  transition: .2s;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);  /* Permanent subtle glow */
}

.repurpose-btn::after {
  content: "↗";
  font-size: 16px;
  opacity: 0.7;
  position: absolute;
  right: 16px;  /* Keeps arrow on the right */
}

.repurpose-btn:hover {
  border-color: var(--indigo);
  background: rgba(99, 102, 241, 0.15);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.35);  /* Brighter glow */
}

.repurpose-btn:active {
  background: rgba(99, 102, 241, 0.2);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.5);  /* Brightest on press */
  transform: scale(0.99);
}

:root.dark .repurpose-btn {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.12);
  color: #F1F5F9;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.2);  /* Slightly stronger glow in dark */
}

:root.dark .repurpose-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.4);
}
.teleprompter-btn {
  width: 100%;
  padding: 14px 16px;
  margin-top: 12px;
  border: 1.5px solid rgba(255, 138, 101, 0.3);
  background: rgba(255, 138, 101, 0.08);
  color: #1E3A8A;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center; gap: 8px;
  justify-content: center;
  position: relative;
  transition: .2s;
  box-shadow: 0 0 12px rgba(255, 138, 101, 0.15);  /* Coral glow */
}

.teleprompter-btn::after {
  content: "↗";
  font-size: 16px;
  opacity: 0.7;
  position: absolute;
  right: 16px;
}

.teleprompter-btn:hover {
  border-color: var(--coral);
  background: rgba(255, 138, 101, 0.15);
  box-shadow: 0 0 20px rgba(255, 138, 101, 0.35);  /* Brighter coral glow */
}

.teleprompter-btn:active {
  background: rgba(255, 138, 101, 0.2);
  box-shadow: 0 0 24px rgba(255, 138, 101, 0.5);
  transform: scale(0.99);
}

.teleprompter-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  background: transparent;
  border-color: var(--border);
}

:root.dark .teleprompter-btn {
  border-color: rgba(255, 138, 101, 0.4);
  background: rgba(255, 138, 101, 0.12);
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(255, 138, 101, 0.2);
}

:root.dark .teleprompter-btn:hover {
  background: rgba(255, 138, 101, 0.2);
  box-shadow: 0 0 24px rgba(255, 138, 101, 0.4);
}

:root.dark .teleprompter-btn:disabled {
  background: transparent;
  box-shadow: none;
}
.quick-btn.zip-indigo {
  border: 1.5px solid rgba(99, 102, 241, 0.3) !important;
  background: rgba(99, 102, 241, 0.08) !important;
  color: #1E3A8A !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15) !important;
}

.quick-btn.zip-indigo:hover:not(:disabled) {
  border-color: var(--indigo) !important;
  background: rgba(99, 102, 241, 0.15) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.35) !important;
}

.quick-btn.zip-indigo:active:not(:disabled) {
  background: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.5) !important;
  transform: scale(0.99);
}

.quick-btn.zip-indigo:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Dark mode - matches repurpose exactly */
:root.dark .quick-btn.zip-indigo {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #F1F5F9 !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.2) !important;
}

:root.dark .quick-btn.zip-indigo:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.4) !important;
}
:root.dark h3[style*="color:#1E3A8A"] {
  color: #F1F5F9 !important;
}

.summary-item{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px solid var(--border)}
.summary-label{color:var(--text-muted)}
.summary-value{font-weight:600;color:var(--text)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.stat{background:var(--hover-bg);border:1px solid var(--border);padding:12px;border-radius:10px;text-align:center}
.stat-n{font-size:20px;font-weight:800;color:var(--navy)}
.stat-l{font-size:11px;color:var(--text-muted);text-transform:uppercase}
@media(max-width:1200px){.app{grid-template-columns:220px 1fr}.right{display:none}}

.settings-bar{
  margin:16px 0;
  padding:14px 16px;
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.08) 100%);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius:12px;
  font-size:13px;
  color:var(--text-muted);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.settings-bar strong{color:var(--text)}

.library-card{border:1.5px solid var(--border);border-radius:12px;padding:16px;background:var(--card);cursor:pointer;transition:.15s}
.library-card:hover{border-color:var(--indigo);box-shadow:0 4px 12px rgba(99,102,241,.08);transform:translateY(-1px)}
.lib-title{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--text)}
.lib-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.lib-tag{font-size:11px;background:var(--hover-bg);padding:3px 7px;border-radius:6px;color:var(--text-muted)}
.lib-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;margin:8px 0 10px}
.lib-summary-item{min-width:0;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--hover-bg);font-size:10.5px;line-height:1.35;color:var(--text-muted);overflow-wrap:anywhere}
.lib-summary-item strong{color:var(--text);font-weight:750}
.lib-summary-item.full{grid-column:1/-1}
@media(max-width:520px){.lib-summary{grid-template-columns:1fr}}
.lib-foot{font-size:12px;color:var(--text-muted);margin-bottom:10px}
.lib-actions{display:flex;gap:6px}
.lib-btn{flex:1;padding:6px;background: transparent;border:1.5px solid var(--border);;color:var(--text);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}
.lib-btn.primary{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.lib-btn:hover{opacity:.9}
#notifBar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);display:none;z-index:9999;font-size:14px}

/* Authentication controls */

/* Google Identity Services renders the official sign-in control here. */
.teacherfly-google-signin {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  min-height: 40px;
  margin-left: 8px;
}

.teacherfly-google-signin iframe {
  border-radius: 999px !important;
}

@media (max-width: 760px) {
  .teacherfly-google-signin {
    margin: 10px 0 0 0;
  }
}
/* === SCRIPT BOX LEFT ACCENT STRIPES - LIGHT MODE === */
.scene:has([class*="hook"]) {
  border-left: 3px solid #6366F1 !important; /* Indigo for HOOK */
}
.scene:has([class*="teach"]) {
  border-left: 3px solid #00416a !important; /* Dark Imperial Blue for TEACH */
}
.scene:has([class*="cta"]) {
  border-left: 3px solid #FF8A6B !important; /* Coral for CTA */
}

/* === TEACHERFLY DARK MODE PATCH V2 === */

/* 1. Lock the two-tone system: bg vs cards */
:root.dark {
  --bg: #0B1120;      /* Page background only */
  --card: #1E293B;    /* All cards, sidebar, inputs */
  --sidebar: #1E293B; /* Force sidebar = card color */
}

:root.dark body {
  background: var(--bg) !important;
}

:root.dark .sidebar,
:root.dark .card,
:root.dark .right,
:root.dark .library-card,
:root.dark .scene,
:root.dark .form-group input,
:root.dark .form-group select,
:root.dark .chip,
:root.dark .quick-btn {
  background: var(--card) !important;
}

/* === GLASSY ACTIVE STATES - Dark Mode Override === */
:root.dark .chip.active,
:root.dark .btn-primary,
:root.dark .lib-btn.primary,
:root.dark .nav-btn.active,
:root.dark .toggle-btn.active,
:root.dark .platform-btn.active {
  background: rgba(99, 102, 241, 0.2);
  color: #A5B4FC;
  border: 1.5px solid rgba(129, 140, 248, 0.6);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 
              0 4px 16px rgba(99, 102, 241, 0.35) 
}
/* === LIBRARY BUTTON BASE === */
.lib-btn {
  transition: all 0.2s ease;
}

/* === UNSELECTED STATE - Light Mode === */
.lib-btn:not(.primary) {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-muted);
  border-color: var(--border);
}

/* === UNSELECTED STATE - Dark Mode === */
:root.dark .lib-btn:not(.primary) {
  background: rgba(148, 163, 184, 0.1);
  color: #94A3B8;
  border-color: var(--border);
}

/* === LIBRARY BUTTON BASE === */
.lib-btn {
  transition: all 0.2s ease;
}

/* === UNSELECTED STATE - Light Mode === */
.lib-btn:not(.primary) {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-muted);
  border-color: var(--border);
}

/* === UNSELECTED STATE - Dark Mode === */
:root.dark .lib-btn:not(.primary) {
  background: rgba(148, 163, 184, 0.1);
  color: #94A3B8;  
  border: 1.5px solid var(--border);
}

/* === HOVERS - Light Mode === */
.lib-btn.primary:hover {
  background: rgba(99, 102, 241, 0.2);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 
              0 4px 16px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

.lib-btn:nth-child(2):hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 
              0 4px 12px rgba(99, 102, 241, 0.25);
  transform: translateY(-1px);
}

.lib-btn:nth-child(3):hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 3px rgba(181, 26, 26, 0.2), 
              0 4px 12px rgba(139, 34, 34, 0.35);
  transform: translateY(-1px);
}

/* === HOVERS - Dark Mode === */
:root.dark .lib-btn.primary:hover {
  background: rgba(99, 102, 241, 0.25);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), 
              0 4px 20px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

:root.dark .lib-btn:nth-child(2):hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(129, 140, 248, 0.6);
  color: #A5B4FC;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18), 
              0 4px 14px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}

:root.dark .lib-btn:nth-child(3):hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 0 3px rgba(241, 33, 33, 0.2), 
              0 4px 14px rgba(243, 65, 65, 0.35);
  transform: translateY(-1px);
}

/* 6. Input text + placeholder contrast */
:root.dark .form-group input::placeholder {
  color: #94A3B8 !important;
}
/* ===MULTI-SELECT MODE === */
.library-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

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

.selected-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.btn.danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #DC2626;
}

.btn.danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}

.btn.danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

:root.dark .btn.danger {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.5);
  color: #FCA5A5;
}

/* Show checkboxes in batch mode */
.library-grid.multi-delete-mode .card-select {
  display: block !important;
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 10;
}

.library-grid.batch-mode .library-card {
  position: relative;
  cursor: pointer;
}

.library-grid.batch-mode .card-select:checked + .card-content {
  opacity: 0.7;
}

.library-grid.batch-mode .library-card:has(.card-select:checked) {
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Hide checkboxes by default */
.library-card {
  position: relative;
}

.card-select {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: none;
  z-index: 10;
}

.multi-delete-mode .card-select {
  display: block;
}

/* Visual feedback for selected cards */
.multi-delete-mode .library-card:has(.card-select:checked) {
  border-color: #FF8A6B;
  background: rgba(255, 138, 107, 0.05);
}
/* Dark mode override */
.dark .multi-delete-mode .library-card:has(.card-select:checked) {
  border-color: #FF8A6B; 
  background: rgba(255, 138, 107, 0.15); 
  box-shadow: inset 0 0 0 1px rgba(255, 138, 107, 0.4); 
}

.multi-delete-mode .library-card {
  cursor: default;
}

/* === TEACHERFLY DARK MODE - 2 TONE SYSTEM === */
:root.dark {
  /* Tone 1: Main background + middle column */
  --bg: #091436;         
  --main-bg: #091436;    /* Middle column + settings */
  
  /* Tone 2: Sidebars + script boxes */
  --card: #0d193d;       /* Left sidebar, right sidebar, script boxes */
  --sidebar: #0d193d;    
  --input-bg: #06143d;   /* Inputs use main tone */
  --hover-bg: #0f1e3a;   /* Slightly lighter hover */
  
  /* Text + Borders */
  --text: #F1F5F9;       
  --text-muted: #94A3B8; 
  --border: #1e293b;     /* Subtle white edge - don't lose this */
  
  /* Brand colors for highlights only */
  --indigo: #6366F1;     /* Active states, primary buttons */
  --navy: #1E3A8A;       /* Not used for backgrounds per your request */
  --coral: #FF8A6B;      /* Teleprompter button */
}

/* 1. PAGE BACKGROUND + MIDDLE COLUMN = #06143d */
:root.dark body,
:root.dark .main,
:root.dark .app {
  background: var(--main-bg) !important;
}

/* Middle column cards + setting boxes = #06143d */
:root.dark .card,
:root.dark .form-group input,
:root.dark .form-group select,
:root.dark .form-group textarea,
:root.dark .chip,
:root.dark .stats .stat {
  background: var(--main-bg) !important;
  border: 1px solid var(--border) !important; /* Keep white edges */
}

/* 2. LEFT + RIGHT SIDEBARS = #0d193d */
:root.dark .sidebar,
:root.dark .right {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* 3. BOTTOM SCRIPT BOXES = #0d193d */
:root.dark .scene,
:root.dark .library-card,
:root.dark [class*="hook"]:not(.scene-icon),
:root.dark [class*="teach"]:not(.scene-icon),
:root.dark [class*="cta"]:not(.scene-icon) {
  background: var(--card) !important;
  border: 1px solid var(--border) !important; /* Keep white edges */
}

/* 4. RIGHT SIDE DOWNLOAD BUTTONS = #0d193d with white edges */
:root.dark .quick-btn {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root.dark .nav-btn.active svg {
  filter: brightness(0) invert(1);
}

/* === FINAL POLISH TO MATCH dark_mode.png === */

:root.dark {
  /* 1. Subtler borders - main issue in your screenshots */
  --border: #1a2440;     /* Was #1e293b - too visible */
  --hover-bg: #111f3f;   /* Slightly lighter than #0f1e3a */
  
  /* 2. Inputs should have no border, just subtle bg */
  --input-bg: #0c1a3a;   /* Was #091436 - make inputs pop slightly */
}

/* 1. REMOVE HARSH BORDERS - target uses depth, not outlines */
:root.dark .card,
:root.dark .sidebar,
:root.dark .right {
  border: 1px solid rgba(26, 36, 64, 0.6) !important; /* Softer than before */
}

/* 2. INPUTS - no borders like the target */
:root.dark .form-group input,
:root.dark .form-group select,
:root.dark .form-group textarea,
:root.dark .chip {
  background: var(--input-bg) !important;
  border: 1.5px solid transparent !important; /* was: none */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.chip:hover,
.nav-btn:hover,
.toggle-btn:hover,
.platform-btn:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important;
}

:root.dark .chip:hover,
:root.dark .nav-btn:hover,
:root.dark .toggle-btn:hover,
:root.dark .platform-btn:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(129, 140, 248, 0.5) !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.3) !important;
}

:root.dark .form-group input:focus {
  outline: 2px solid var(--indigo) !important;
  border: none !important;
}

/* 3. SCRIPT BOX LEFT ACCENT STRIPES - matches target */
:root.dark .scene:has([class*="hook"]) {
  border-left: 3px solid #6366F1 !important; /* Indigo for HOOK */
}
:root.dark .scene:has([class*="teach"]) {
  border-left: 3px solid #00416a !important; /* Dark Imperial Blue for TEACH */
}
:root.dark .scene:has([class*="cta"]) {
  border-left: 3px solid #FF8A6B !important; /* Coral for CTA */
}

/* Fallback if :has() not supported */
:root.dark .scene-icon.hook { border-left: 3px solid #6366F1; }
:root.dark .scene-icon.teach { border-left: 3px solid #00416a; }
:root.dark .scene-icon.cta { border-left: 3px solid #FF8A6B; }


/* 5. LOGGED IN BANNER - use Primary Blue #1E3A8A per brand */
:root.dark [class*="logged"] {
  background: #1E3A8A !important;
  color: #FFFFFF !important;
}

.switch {
  cursor: pointer;
  display: block;
  width: 75px;
  height: 30px;
  position: relative;
  transform: scale(0.7);
}

.switch input {
  display: none;
}

.switch input:checked ~ .switch__background {
  background-position: 20% 0%;
}

.switch input:checked ~ .switch__background:before {
  opacity: 0.9;
}

.switch input:checked ~ .switch__background:after {
  transform: translateY(250%);
  opacity: 0.5;
}

.switch input:checked ~ .switch__button {
  left: calc(100% - 5px);
  transform: translateX(-100%);
  transition: 0.2s ease all;
  box-shadow: inset 3px 5px 3px #edf1f9;
  background: #c3c9d2;
}

.switch input:checked ~ .switch__button:before {
  content: "";
  display: block;
  position: absolute;
  left: 15px;
  top: 5px;
  height: 9px;
  width: 9px;
  border-radius: 9px;
  background: #949ead;
  box-shadow: inset 2px 1px 1px #848e9b;
}

.switch input:checked ~ .switch__button:after {
  content: "";
  display: block;
  position: absolute;
  left: 4px;
  top: 13px;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  background: #949ead;
  box-shadow: inset 2px 2px 2px #848e9b;
}

.switch__button {
  top: 5px;
  left: 5px;
  width: 22px;
  height: 22px;
  border-radius: 22px;
  background: #f1c530;
  position: absolute;
  transition: 0.2s ease all;
  box-shadow: inset 3px 5px 3px #f8a100;
}

.switch__background {
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  border-radius: 40px;
  position: relative;
  box-shadow: inset -4px -4px 6px rgba(255, 255, 255, 0.3), 
         inset 4px 4px 6px rgba(70, 70, 70, 0.12);
  background: radial-gradient(
    circle at center right,
    #347ab2,
    #347ab2 10%,
    #4886b7 10%,
    #4886b7 20%,
    #5c93bf 20%,
    #5c93bf 30%,
    #699ec6 30%,
    #699ec6 40%,
    #494e5c 40%,
    #494e5c 50%,
    #404350 50%,
    #404350 60%,
    #2d333c 60%,
    #2d333c 70%,
    #242830 70%,
    #242830 80%,
    #111 80%,
    #111 90%
  );
  background-size: 250% 100%;
  background-position: 100% 0%;
  transition: 0.2s ease all;
  overflow: hidden;
}

.switch__background:before {
  content: "★";
  display: block;
  position: absolute;
  left: 12px;
  top: 8px;
  font-size: 8px;
  color: white;
  opacity: 0;
  transition: 0.2s ease all;
  text-shadow: 10px 10px 0px rgba(255, 255, 255, 0.8), 20px 5px 0px rgba(255, 255, 255, 1);
}

.switch__background:after {
  content: "";
  display: block;
  transition: 0.2s ease all;
  position: absolute;
  width: 25px;
  height: 25px;
  left: 5px;
  border-radius: 25px;
  box-shadow: 
    30px 30px 0px rgba(255, 255, 255, 1),
    50px 20px 0px rgba(255, 255, 255, 1),
    65px 25px 0px rgba(255, 255, 255, 1),
    29px 28px 0px rgba(215, 215, 215, 1),
    49px 18px 0px rgba(215, 215, 215, 1),
    65px 23px 0px rgba(215, 215, 215, 1);
}
/* Icon alignment for copy buttons */
.quick-btn .copy-icon {
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

.quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Light mode: navy icons + navy glow */
.quick-btn {
  color: #1E3A8A !important;
  box-shadow: 0 0 12px rgba(30, 58, 138, 0.15) !important;
}

/* Dark mode: white icons + white glow */
:root.dark .quick-btn {
  color: #F1F5F9 !important;
  box-shadow: 0 0 14px rgba(241, 245, 249, 0.12) !important;
}
/* === FINAL OVERRIDE - Scene Icon Glow Boxes === */
.scene-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.scene-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #fff !important;
  stroke: #fff !important;
}

.scene-icon.hook {
  background: rgba(99, 102, 241, 0.4) !important;
  border: 1px solid rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.25) !important;
}

.scene-icon.teach-1 {
  background: rgba(0, 65, 106, 0.4) !important;
  border: 1px solid rgba(0, 65, 106, 0.6) !important;
  box-shadow: 0 0 20px rgba(0, 65, 106, 0.25) !important;
}

.scene-icon.teach-2 {
  background: rgba(21, 147, 207, 0.4) !important;
  border: 1px solid rgba(21, 147, 207, 0.6) !important;
  box-shadow: 0 0 20px rgba(21, 147, 207, 0.25) !important;
}

.scene-icon.cta {
  background: rgba(255, 138, 107, 0.4) !important;
  border: 1px solid rgba(255, 138, 107, 0.6) !important;
  box-shadow: 0 0 20px rgba(255, 138, 107, 0.25) !important;
}
/* === Form Label with Icon === */
.form-label-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--navy) !important;
  margin-bottom: 6px !important;
}

.form-label-icon .label-icon {
  flex-shrink: 0 !important;
  color: var(--navy) !important;
}

:root.dark .form-label-icon,
:root.dark .form-label-icon .label-icon {
  color: var(--text-muted) !important;
}
/* === Search Input with Icon === */
.search-input-wrap {
  position: relative !important;
  display: flex !important;
  flex: 1 !important;
  min-width: 200px !important;
}

.search-input-wrap .search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-muted) !important;
  pointer-events: none !important;
}

.search-input-wrap input:focus + .search-icon,
.search-input-wrap:focus-within .search-icon {
  color: var(--navy) !important;
}

:root.dark .search-input-wrap input:focus + .search-icon,
:root.dark .search-input-wrap:focus-within .search-icon {
  color: var(--indigo) !important;
}
/* === Empty State Icon === */
.empty-icon {
  margin-bottom: 12px !important;
  display: flex !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
}

.empty-icon svg {
  opacity: 0.8 !important;
}

.empty-icon svg {
  width: 72px !important;
  height: 72px !important;
}

:root.dark .empty-icon {
  color: #FF8A6B !important; /* Coral in dark mode */
}
:root:not(.dark) .empty-icon {
  color: #1E3A8A !important; /* Navy in light mode */
}
/* === Counter Colors === */
#storageText,
#batchCounter {
  color: var(--navy) !important;
}

:root.dark #storageText,
:root.dark #batchCounter {
  color: var(--text) !important; /* #F1F5F9 - white */
}
/* === Example/Placeholder Inputs === */
.example-input {
  background: var(--input-bg) !important;
  color: var(--text-muted) !important;
}

.example-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

.example-input:focus {
  color: var(--text) !important;
  background: var(--card) !important;
}

.example-input:not(:placeholder-shown) {
  color: var(--text) !important;
  background: var(--card) !important;
}
/* === Generate Button === */
button#gen.btn-primary {
  background: rgba(237, 108, 68, 0.08) !important;
  background-image: none !important;
  border: 1.5px solid rgba(245, 120, 82, 0.3) !important;
  color: #1E3A8A !important; 
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 6px rgba(223, 107, 71, 0.15) !important;
}

button#gen.btn-primary svg {
  stroke: #1E3A8A !important; 
  stroke-width: 2 !important; 
}

button#gen.btn-primary:hover {
  background: rgba(235, 103, 62, 0.15) !important;
  background-image: none !important;
  border-color: rgba(210, 98, 68, 0.2) !important;
  color: #1E3A8A !important;
  box-shadow: 0 4px 8px rgba(190, 97, 71, 0.35) !important;
}

button#gen.btn-primary:active {
  background: rgba(255, 138, 101, 0.2) !important;
  box-shadow: 0 0 24px rgba(255, 138, 101, 0.6);
  transform: scale(0.99) !important;
}

/* === Dark Mode === */
:root.dark button#gen.btn-primary {
  background: rgba(243, 132, 98, 0.12) !important;
  background-image: none !important;
  border: 1.5px solid rgba(252, 144, 114, 0.4) !important;
  color: #F3F5F9 !important; 
  font-weight: 700 !important;
  box-shadow: 0 3px 6px rgba(255, 138, 101, 0.2) !important;
}

:root.dark button#gen.btn-primary svg {
  stroke: #F3F5F9 !important;
  stroke-width: 2 !important;
}

:root.dark button#gen.btn-primary:hover {
  background: rgba(252, 143, 110, 0.22) !important;
  background-image: none !important;
  border-color: rgba(255, 138, 101, 0.20) !important;
  box-shadow: 0 0 24px rgba(219, 162, 145, 0.27) !important;
  color: #F3F5F9 !important;
}

/* ===================================
   REPURPOSE BUTTON with icon
   =================================== */

.repurpose-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  color: #1E3A8A; /* Navy */
}

.repurpose-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.repurpose-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:root.dark .repurpose-btn {
  color: #CBD5E1; /* Light gray in dark mode */
}
.form-label-icon.section-header {
  font-size: 12px !important;
  color: #128a8a !important;
}

.dark .form-label-icon.section-header {
  color: #128a8a !important;
}
/* =========================================================
   Phase 10.2 Step 4B — locked previews, Settings and usage UI
   ========================================================= */
.app:not(.create-active){grid-template-columns:260px minmax(0,1fr)}
.app:not(.create-active) .right{display:none}
.secondary-view{max-width:1180px;margin:0 auto}

.usage-overview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 18px}
.usage-overview .stat{min-width:0;padding:14px 10px;border:1px solid var(--border);border-radius:10px;background:var(--hover-bg);text-align:center}
.usage-overview .stat-n{font-size:21px;font-weight:800;color:var(--indigo);line-height:1.15;overflow-wrap:anywhere}
.usage-overview .stat-l{margin-top:5px;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.45px;line-height:1.25}
:root.dark .usage-overview .stat{background:var(--card)!important;border-color:var(--border)!important}

.locked-nav{cursor:pointer}
.nav-status{margin-left:auto;padding:2px 7px;border-radius:999px;background:rgba(99,102,241,.12);color:var(--indigo);font-size:9px;font-weight:800;letter-spacing:.25px;white-space:nowrap}
:root.dark .nav-status{background:rgba(129,140,248,.16);color:#c7d2fe}
.chip-lock{margin-left:4px;font-size:10px;font-weight:700;opacity:.72;white-space:nowrap}
.locked-badge{display:inline-flex;align-items:center;width:max-content;padding:4px 9px;border-radius:999px;background:rgba(99,102,241,.11);color:var(--indigo);font-size:10px;font-weight:800;letter-spacing:.35px;text-transform:uppercase}

.locked-filter-btn{padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text-muted);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.locked-filter-btn:hover{border-color:var(--indigo);color:var(--indigo);background:rgba(99,102,241,.06)}
.locked-library-panel{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 18px;padding:16px 18px;border:1px dashed rgba(99,102,241,.42);border-radius:13px;background:rgba(99,102,241,.045)}
.locked-library-panel strong{display:block;color:var(--text);font-size:14px}
.locked-library-panel p{margin:3px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5}

.future-preview-card{padding:30px}
.preview-heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}
.preview-heading-row h2{margin:10px 0 7px;font-size:26px}
.preview-heading-row p{max-width:760px;color:var(--text-muted);line-height:1.65}
.preview-lock-icon{display:grid;place-items:center;width:62px;height:62px;flex:0 0 62px;border-radius:18px;background:rgba(99,102,241,.1);font-size:28px}
.preview-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.preview-feature-grid>div{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--hover-bg)}
.preview-feature-grid strong{font-size:14px;color:var(--text)}
.preview-feature-grid span{font-size:12px;color:var(--text-muted);line-height:1.5}
.preview-note{margin-top:20px;padding:12px 14px;border-radius:10px;background:rgba(255,138,107,.1);color:var(--text-muted);font-size:12px}
.resource-preview-list{display:flex;flex-wrap:wrap;gap:10px}
.resource-preview-list span{padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:var(--hover-bg);font-size:12px;font-weight:650;color:var(--text)}
.guide-section-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.guide-topic-btn{width:100%;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--hover-bg);font:inherit;font-size:12px;color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.guide-topic-btn:hover{border-color:var(--indigo);background:rgba(99,102,241,.08);box-shadow:0 3px 10px rgba(99,102,241,.1);transform:translateY(-1px)}
.guide-topic-btn:focus-visible{outline:2px solid rgba(99,102,241,.38);outline-offset:2px}
.guide-topic-btn.active{border-color:var(--indigo);background:rgba(99,102,241,.1);color:var(--text)}
.guide-section-grid span{float:right;padding:1px 6px;border-radius:999px;background:rgba(99,102,241,.11);color:var(--indigo);font-size:9px;font-weight:800}

.settings-page{max-width:1050px;margin:0 auto 40px}
.settings-section h2{margin-bottom:6px}
.settings-section h3{margin-bottom:7px;color:var(--text);font-size:17px}
.settings-section>p,.settings-intro{margin-bottom:18px;color:var(--text-muted);font-size:13px;line-height:1.6}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.settings-secondary-btn,.settings-danger-btn{padding:10px 14px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer}
.settings-secondary-btn{border:1.5px solid var(--border);background:var(--card);color:var(--navy)}
.settings-secondary-btn:hover{border-color:var(--indigo);color:var(--indigo)}
.settings-danger-btn{border:1px solid rgba(220,38,38,.28);background:rgba(220,38,38,.06);color:#b91c1c}
.settings-danger-btn:hover{background:rgba(220,38,38,.11)}
.appearance-options{display:flex;gap:14px;flex-wrap:wrap}
.appearance-options label{display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--hover-bg);cursor:pointer;font-size:13px;font-weight:650}
.activity-reset-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--hover-bg)}
#settingsLastReset{font-size:13px;color:var(--text-muted);font-weight:650}
.settings-save-row{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:4px}
#settingsSaveStatus{font-size:12px;color:var(--text-muted)}
.settings-save-btn{width:auto;min-width:150px;padding:11px 18px}
:root.dark .settings-secondary-btn{color:#e2e8f0;background:var(--card)}
:root.dark .settings-danger-btn{color:#fca5a5}

.trend-caption{margin:0 0 15px;color:var(--text-muted);font-size:11px;line-height:1.45}
.legacy-summary-state{display:none!important}

.future-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:22px}
.future-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.62);backdrop-filter:blur(3px)}
.future-modal-card{position:relative;z-index:1;width:min(760px,100%);max-height:min(84vh,820px);overflow:auto;padding:28px;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:0 24px 80px rgba(15,23,42,.32)}
.future-modal-card h2{margin:10px 0 7px;color:var(--text);font-size:25px}
.future-modal-card>p{margin-bottom:20px;color:var(--text-muted);line-height:1.6}
.future-modal-close{position:absolute;top:13px;right:15px;width:34px;height:34px;border:0;border-radius:9px;background:var(--hover-bg);color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.repurpose-groups{display:grid;gap:13px}
.repurpose-group{padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--hover-bg)}
.repurpose-group h3{margin:0 0 8px;font-size:14px;color:var(--text)}
.repurpose-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:0;padding-left:18px;color:var(--text-muted);font-size:12px}

@media(max-width:1350px){
  .usage-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1200px){
  .app:not(.create-active){grid-template-columns:220px 1fr}
}
@media(max-width:800px){
  .usage-overview,.preview-feature-grid,.guide-section-grid,.settings-grid,.settings-grid-3{grid-template-columns:1fr}
  .preview-heading-row{align-items:center}
  .preview-lock-icon{width:50px;height:50px;flex-basis:50px;font-size:22px}
  .activity-reset-row,.settings-save-row{align-items:stretch;flex-direction:column}
  .settings-save-btn{width:100%}
  .locked-library-panel{align-items:flex-start;flex-direction:column}
  .repurpose-group ul{grid-template-columns:1fr}
}
.password-recovery-panel{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--hover-bg)}
.password-recovery-panel h4{margin:0 0 5px;color:var(--text);font-size:15px}
.password-recovery-panel>p{margin:0 0 14px;color:var(--text-muted);font-size:12px;line-height:1.5}
.password-recovery-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:13px}
#passwordRecoveryStatus{font-size:12px;color:var(--text-muted)}
@media(max-width:800px){.password-recovery-actions{align-items:stretch;flex-direction:column}}

/* =========================================================
   Phase 10.2 Step 4B layout refinement
   ========================================================= */
.main{min-width:0}

@media(min-width:1201px){
  .sidebar,
  .right{
    position:sticky;
    top:0;
    height:100vh;
    max-height:100vh;
    align-self:start;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
}

.sidebar-usage{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.sidebar-usage-heading{
  margin:0 2px 10px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.85px;
  text-transform:uppercase;
}
.sidebar-usage-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  margin-bottom:8px;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--hover-bg);
}
.sidebar-usage-label{
  min-width:0;
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.25;
  text-transform:uppercase;
}
.sidebar-usage-value{
  flex:0 0 auto;
  max-width:96px;
  color:var(--indigo);
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
  line-height:1;
  white-space:nowrap;
  text-align:right;
}
:root.dark .sidebar-usage-card{
  background:rgba(255,255,255,.035);
}

.advanced{
  margin-top:20px;
  padding-top:0;
  border-top:0;
}
.advanced-settings-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:auto;
  padding:7px 11px;
  border:1px solid rgba(99,102,241,.22);
  border-radius:999px;
  background:rgba(99,102,241,.055);
  color:var(--navy);
  cursor:pointer;
  list-style:none;
  box-shadow:none;
  transition:background .18s,border-color .18s,color .18s;
}
.advanced-settings-toggle::-webkit-details-marker{display:none}
.advanced-settings-toggle::marker{display:none;content:""}
.advanced-settings-toggle:hover{
  border-color:rgba(99,102,241,.38);
  background:rgba(99,102,241,.09);
}
.advanced-settings-toggle:focus-visible{
  outline:2px solid rgba(99,102,241,.3);
  outline-offset:2px;
}
.advanced-settings-label,
.advanced-settings-state{
  display:inline-flex;
  align-items:center;
}
.advanced-settings-label{
  gap:6px;
  font-size:12px;
  font-weight:700;
}
.advanced-settings-icon{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--indigo);
  font-size:12px;
  line-height:1;
}
.advanced-settings-state{
  gap:4px;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18px;
  text-transform:uppercase;
}
.advanced-settings-state-text::before{content:"Show"}
.advanced-settings-chevron{
  font-size:8px;
  transition:transform .18s;
}
.advanced[open] .advanced-settings-toggle{
  border-color:rgba(99,102,241,.32);
  background:rgba(99,102,241,.085);
  box-shadow:none;
}
.advanced[open] .advanced-settings-state-text::before{content:"Hide"}
.advanced[open] .advanced-settings-chevron{transform:rotate(180deg)}
:root.dark .advanced-settings-toggle{
  border-color:rgba(129,140,248,.26);
  background:rgba(129,140,248,.08);
  color:#eef2ff;
  box-shadow:none;
}
:root.dark .advanced-settings-toggle:hover,
:root.dark .advanced[open] .advanced-settings-toggle{
  border-color:rgba(129,140,248,.42);
  background:rgba(129,140,248,.13);
}
:root.dark .advanced-settings-icon{
  background:transparent;
  color:#a5b4fc;
}
:root.dark .advanced-settings-state{
  color:#94a3b8;
}

.repurpose-preview-btn{
  position:relative;
  border-style:dashed;
  border-color:rgba(99,102,241,.55);
  background:linear-gradient(135deg,rgba(99,102,241,.09),rgba(255,138,107,.06));
  opacity:1!important;
  cursor:pointer!important;
}
.repurpose-preview-btn::after{content:""}
.repurpose-preview-bar{
  width:100%;
  min-height:50px;
  margin:0 0 16px;
  padding:13px 18px;
  gap:9px;
  justify-content:center;
}
.repurpose-preview-bar .repurpose-preview-badge{
  margin-left:4px;
}
.repurpose-preview-lock{
  font-size:12px;
  line-height:1;
}
.repurpose-preview-badge,
.lib-preview-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(99,102,241,.13);
  color:var(--indigo);
  font-size:9px;
  font-weight:850;
  letter-spacing:.25px;
  text-transform:uppercase;
  white-space:nowrap;
}
:root.dark .repurpose-preview-badge,
:root.dark .lib-preview-badge{
  background:rgba(129,140,248,.18);
  color:#c7d2fe;
}

@media(max-width:1200px){
  .sidebar-usage-card{padding:9px}
  .sidebar-usage-label{font-size:9px}
  .sidebar-usage-value{font-size:12px}
}

/* =========================================================
   Phase 10.10 — finalized sidebar branding + narrow-screen cleanup
   ========================================================= */
.logo .logo-wordmark{
  display:block;
  width:180px;
  height:auto;
  max-width:100%;
}
.logo .logo-wordmark-dark{display:none}
:root.dark .logo .logo-wordmark-light{display:none}
:root.dark .logo .logo-wordmark-dark{display:block}

@media(max-width:800px){
  body{overflow-x:hidden}
  .app,
  .app:not(.create-active){
    grid-template-columns:minmax(0,1fr);
  }
  .sidebar{
    min-width:0;
    padding:18px 16px;
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .logo{margin-bottom:18px}
  .main{
    min-width:0;
    padding:16px;
  }
  .card{padding:18px}
  .form-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  #logged-out{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  #logged-out > strong{align-self:flex-start}
  #login-email,
  #login-pass{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  #logged-out > label{
    margin-right:0 !important;
  }
  #logged-out > button{
    width:100%;
    margin-left:0 !important;
  }
  #auth-status{width:100%}
  .locked-library-panel,
  .preview-heading-row,
  .activity-reset-row,
  .settings-save-row{
    align-items:stretch;
    flex-direction:column;
  }
  .settings-save-btn{width:100%}
}

/* =========================================================
   Phase 10.10 — browser-smoke responsive polish
   Approved scope: settings summary, logged-in auth bar,
   resolved setup guidance, and narrow-width text safety only.
   ========================================================= */
@media(max-width:800px){
  /* Settings summary: replace fragile inline nowrap layout with
     one readable row per setting and hide decorative separators. */
  .settings-bar{
    min-width:0;
    padding:12px 14px;
  }
  .settings-bar > div:last-child{
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    gap:6px !important;
    min-width:0;
  }
  .settings-bar > div:last-child > span{
    min-width:0;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .settings-bar > div:last-child > span[aria-hidden="true"]{
    display:none;
  }
  .settings-bar strong{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* Logged-in state: keep auth logic untouched while making the
     existing logout control and long account text fit narrow screens. */
  #auth-bar{
    min-width:0;
    overflow-wrap:anywhere;
  }
  #logged-in{
    min-width:0;
  }
  #logged-in #user-email{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  #logged-in > button{
    display:block;
    width:100%;
    margin:10px 0 0 !important;
  }

  /* Resolved setup guidance: stack its two informational rows cleanly. */
  #platformGuidance{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    min-width:0;
  }
  #platformGuidance > span{
    display:block;
    width:100%;
    min-width:0;
    overflow-wrap:anywhere;
  }
  #resolvedPlatformMode{
    white-space:normal;
    overflow-wrap:anywhere;
  }
}
/* J8 — permanent account deletion danger zone */
.settings-danger-zone{border:1px solid rgba(185,28,28,.22)}
.settings-danger-zone h3{color:#b91c1c}
.account-delete-confirmation{max-width:520px;margin-top:14px}
.account-delete-confirmation label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:var(--text)}
.account-delete-confirmation input{width:100%}
.account-delete-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
#settingsDeleteStatus{font-size:12px;color:var(--text-muted)}
#settingsDeleteAccount:disabled{opacity:.5;cursor:not-allowed}



/* =========================================================
   J9 — legal and support links
   ========================================================= */
.sidebar-legal{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  color:var(--text-muted);
  font-size:11px;
  line-height:1.5;
}
.sidebar-legal a{
  color:var(--text-muted);
  text-decoration:none;
  font-weight:650;
}
.sidebar-legal a:hover,
.sidebar-legal a:focus-visible{
  color:var(--indigo);
  text-decoration:underline;
}
.auth-legal-note{
  margin-top:10px;
  font-size:11px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}
.auth-legal-note a{
  color:#fff;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(max-width:800px){
  .sidebar-legal{justify-content:center}
  .auth-legal-note{text-align:center}
}


/* =========================================================
   TeacherFly Onboarding v1 — authenticated first-use overlay
   ========================================================= */
.tf-onboarding-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  background:
    radial-gradient(circle at 15% 10%, rgba(99,102,241,.10), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(255,138,107,.10), transparent 26rem),
    var(--bg,#F3F5F9);
  color:var(--text,#172033);
}
.tf-onboarding-brand{
  padding:64px clamp(28px,6vw,88px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tf-onboarding-brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:34px;
}
.tf-onboarding-logo{width:88px;height:88px;object-fit:contain;display:block}
.tf-onboarding-wordmark{
  color:#1E3A8A;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
}
.tf-onboarding-wordmark span{color:#6366F1}
.tf-onboarding-brand h1{
  max-width:680px;
  margin:0 0 18px;
  color:#1E3A8A;
  font-size:clamp(38px,5vw,64px);
  line-height:1.02;
  letter-spacing:-.05em;
}
.tf-onboarding-brand p{
  max-width:620px;
  margin:0;
  color:#516079;
  font-size:18px;
  line-height:1.65;
}
.tf-onboarding-promise{
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#1E3A8A;
  font-weight:700;
}
.tf-onboarding-promise i{
  width:10px;height:10px;border-radius:50%;background:#FF8A6B;display:inline-block
}
.tf-onboarding-panel{
  min-height:100vh;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(18px);
  border-left:1px solid #E5E7EB;
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tf-onboarding-card{
  width:100%;
  max-width:480px;
  background:#fff;
  color:#172033;
  border:1px solid #E5E7EB;
  border-radius:24px;
  box-shadow:0 22px 70px rgba(30,58,138,.10);
  padding:28px;
}
.tf-onboarding-toprow{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.tf-onboarding-step-label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6366F1}
.tf-onboarding-skip{border:0;background:transparent;color:#68738a;font-weight:700;cursor:pointer;padding:7px 0}
.tf-onboarding-progress{display:flex;gap:7px;margin-bottom:28px}
.tf-onboarding-progress span{height:6px;flex:1;border-radius:99px;background:#E9ECF2}
.tf-onboarding-progress span.active{background:#6366F1}
.tf-onboarding-progress span.done{background:#A5B4FC}
.tf-onboarding-step h2,.tf-onboarding-done h2{
  margin:0 0 9px;color:#1E3A8A;font-size:28px;line-height:1.15;letter-spacing:-.035em
}
.tf-onboarding-step>p,.tf-onboarding-done>p{color:#6B7280;line-height:1.55;margin:0 0 24px}
.tf-onboarding-options{display:grid;gap:10px}
.tf-onboarding-options button{
  width:100%;
  border:1px solid #E5E7EB;
  background:#fff;
  color:#273451;
  border-radius:14px;
  padding:15px 16px;
  cursor:pointer;
  font:inherit;
  font-size:15px;
  font-weight:750;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  transition:.15s ease;
}
.tf-onboarding-options button:hover{border-color:#B7B9FF;box-shadow:0 6px 18px rgba(99,102,241,.08);transform:translateY(-1px)}
.tf-onboarding-options button.selected{border-color:#6366F1;background:#F5F5FF;box-shadow:0 0 0 2px rgba(99,102,241,.08)}
.tf-onboarding-options button span{opacity:0;color:#6366F1;font-weight:900}
.tf-onboarding-options button.selected span{opacity:1}
.tf-onboarding-cefr,.tf-onboarding-platforms{grid-template-columns:repeat(2,minmax(0,1fr))}
.tf-onboarding-status{min-height:19px;margin-top:14px;color:#dc2626;font-size:13px;line-height:1.4}
.tf-onboarding-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.tf-onboarding-btn{
  border:0;border-radius:12px;padding:13px 17px;font:inherit;font-size:14px;font-weight:800;cursor:pointer
}
.tf-onboarding-btn.secondary{background:#EEF1F6;color:#3F4B63}
.tf-onboarding-btn.primary{background:linear-gradient(135deg,#1E3A8A,#6366F1);color:#fff;min-width:140px}
.tf-onboarding-btn.full{width:100%}
.tf-onboarding-btn:disabled{opacity:.45;cursor:not-allowed}
.tf-onboarding-done{text-align:center;padding:18px 4px}
.tf-onboarding-done-icon{
  width:64px;height:64px;border-radius:20px;margin:0 auto 18px;
  display:grid;place-items:center;background:#EEF2FF;color:#6366F1;font-size:29px;font-weight:900
}
.tf-onboarding-summary{
  margin:20px 0;text-align:left;background:#F8FAFC;border:1px solid #E5E7EB;
  border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.75
}
.tf-onboarding-summary b{color:#1E3A8A}
body.tf-onboarding-open{overflow:hidden}
@media(max-width:880px){
  .tf-onboarding-overlay{grid-template-columns:1fr;height:100dvh;min-height:100dvh;overflow:hidden}
  .tf-onboarding-brand{display:none}
  .tf-onboarding-panel{
    padding:18px;
    height:100dvh;
    min-height:100dvh;
    border-left:0;
    overflow:hidden;
    align-items:center;
  }
  .tf-onboarding-card{
    padding:22px;
    border-radius:20px;
    width:100%;
    height:min(720px,calc(100dvh - 36px));
    max-height:calc(100dvh - 36px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .tf-onboarding-card #teacherFlyOnboardingWizard:not([hidden]){
    display:flex;
    flex-direction:column;
    min-height:0;
    height:100%;
  }
  .tf-onboarding-toprow,.tf-onboarding-progress,.tf-onboarding-actions,.tf-onboarding-status{flex:0 0 auto}
  .tf-onboarding-step:not([hidden]){
    display:block;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-right:4px;
  }
  .tf-onboarding-actions{
    margin-top:10px;
    padding-top:12px;
    padding-bottom:max(0px,env(safe-area-inset-bottom));
    border-top:1px solid #EEF1F6;
    background:#fff;
  }
  .tf-onboarding-done:not([hidden]){
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    min-height:0;
  }
}
@media(max-width:460px){
  .tf-onboarding-panel{padding:12px}
  .tf-onboarding-card{
    padding:19px;
    height:calc(100dvh - 24px);
    max-height:calc(100dvh - 24px);
  }
  .tf-onboarding-toprow{margin-bottom:16px}
  .tf-onboarding-progress{margin-bottom:20px}
  .tf-onboarding-step h2,.tf-onboarding-done h2{font-size:24px}
  .tf-onboarding-cefr,.tf-onboarding-platforms{grid-template-columns:1fr}
}


/* =========================================================
   v4.14.41 PREVIEW — Mobile + tablet responsive shell
   Desktop (>=1201px) intentionally unchanged.
   ========================================================= */
.tf-responsive-appbar,
.tf-menu-backdrop,
.tf-menu-close,
.tf-mobile-menu-session,
.tf-credit-status,
.tf-compact-output-actions,
.tf-action-sheet{display:none}

@media(max-width:1200px){
  body{overflow-x:hidden}
  body.tf-nav-open{overflow:hidden}

  .app,
  .app.create-active,
  .app:not(.create-active){
    display:block;
    min-height:100vh;
    padding-top:68px;
  }

  .tf-responsive-appbar{
    position:fixed;
    inset:0 0 auto 0;
    z-index:4100;
    height:68px;
    padding:10px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--border);
    background:var(--card);
    backdrop-filter:blur(12px);
    box-shadow:0 6px 20px rgba(15,23,42,.05);
  }
  .tf-responsive-brand{display:flex;align-items:center;min-width:0;text-decoration:none}
  .tf-responsive-logo{display:block;width:164px;max-width:54vw;height:auto}
  .tf-responsive-logo-dark{display:none}
  :root.dark .tf-responsive-logo-light{display:none}
  :root.dark .tf-responsive-logo-dark{display:block}

  .tf-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--card);
    color:var(--navy);
    font:inherit;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
  }
  :root.dark .tf-menu-toggle{color:#eef2ff}
  body.teacherfly-signed-out .tf-menu-toggle{display:none}

  .sidebar{
    position:fixed!important;
    z-index:4300;
    inset:0 auto 0 0;
    width:min(360px,88vw)!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:72px 18px 22px!important;
    border-right:1px solid var(--border)!important;
    border-bottom:0!important;
    background:var(--sidebar)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:18px 0 48px rgba(15,23,42,.18);
  }
  body.tf-nav-open .sidebar{transform:translateX(0)}
  .tf-menu-close{
    position:absolute;
    top:18px;
    right:18px;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--text);
    font-size:25px;
    line-height:1;
    cursor:pointer;
  }
  .sidebar .logo{margin:0 48px 24px 0}
  .sidebar .nav{gap:6px}
  .sidebar .nav-btn{min-height:46px;padding:12px 13px}
  .sidebar-usage{display:none!important}
  .tf-credit-status{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    margin-top:4px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--navy);
    font-size:13px;
    font-weight:700;
  }
  .tf-credit-status .nav-icon{flex:0 0 auto}
  .tf-credit-status span{min-width:0;flex:1}
  .tf-credit-status strong{
    flex:0 0 auto;
    padding:2px 7px;
    border-radius:10px;
    background:rgba(99,102,241,.12);
    color:var(--indigo);
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
  }
  :root.dark .tf-credit-status{color:#eef2ff;background:var(--sidebar)}
  .tf-mobile-menu-session{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
  .tf-mobile-logout{
    display:none;
    width:100%;
    min-height:44px;
    padding:10px 13px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--text);
    font:inherit;
    font-size:13px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }
  body.teacherfly-authenticated .tf-mobile-logout{display:block}
  .sidebar-legal{justify-content:flex-start!important;margin-top:14px;padding-top:14px}

  .tf-menu-backdrop{
    position:fixed;
    z-index:4200;
    inset:0;
    background:rgba(15,23,42,.48);
    backdrop-filter:blur(2px);
  }
  body.tf-nav-open .tf-menu-backdrop{display:block}

  .main{padding:22px!important;min-width:0}
  body.teacherfly-authenticated #auth-bar{display:none!important}
  body.teacherfly-signed-out #createView>.welcome,
  body.teacherfly-signed-out #createView>.card{display:none!important}

  .right{display:none!important}
  .quick-copy-actions{display:none!important}
  .repurpose-preview-bar{display:none!important}
  #libraryBanner{display:none!important}

  .tf-compact-output-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0 0 16px;
  }
  .tf-compact-action{
    min-width:0;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 9px;
    border:1.5px solid var(--border);
    border-radius:12px;
    background:var(--card);
    color:var(--navy);
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
  }
  .tf-compact-action:not(:disabled):hover{border-color:var(--indigo);color:var(--indigo);background:rgba(99,102,241,.05)}
  .tf-compact-action:disabled{opacity:.45;cursor:not-allowed}
  :root.dark .tf-compact-action{color:#eef2ff;background:var(--card)}

  .tf-action-sheet[hidden]{display:none!important}
  .tf-action-sheet{
    position:fixed;
    z-index:6000;
    inset:0;
    display:block;
  }
  .tf-action-sheet-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}
  .tf-action-sheet-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:min(680px,100%);
    max-height:min(82dvh,760px);
    margin:0 auto;
    padding:10px 18px max(18px,env(safe-area-inset-bottom));
    border:1px solid var(--border);
    border-radius:22px 22px 0 0;
    background:var(--card);
    color:var(--text);
    overflow-y:auto;
    box-shadow:0 -24px 70px rgba(15,23,42,.25);
  }
  .tf-action-sheet-handle{width:42px;height:4px;margin:2px auto 12px;border-radius:999px;background:var(--border)}
  .tf-action-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
  .tf-action-sheet-header h2{margin:0;font-size:18px;color:var(--text)}
  .tf-action-sheet-close{width:36px;height:36px;border:0;border-radius:9px;background:var(--hover-bg);color:var(--text);font-size:24px;cursor:pointer}
  .tf-action-sheet-list{display:grid;gap:8px}
  .tf-action-sheet-list button,
  .tf-action-sheet-cancel{
    width:100%;
    min-height:46px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--text);
    font:inherit;
    font-size:13px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }
  .tf-action-sheet-list button:not(:disabled):hover{border-color:var(--indigo);color:var(--indigo);background:rgba(99,102,241,.05)}
  .tf-action-sheet-list button:disabled{opacity:.42;cursor:not-allowed}
  .tf-action-sheet-list .tf-sheet-primary{border-color:rgba(99,102,241,.38);background:rgba(99,102,241,.08);color:var(--indigo)}
  .tf-action-sheet-cancel{margin-top:12px;text-align:center;background:var(--hover-bg)}

}

/* Tablet: keep the roomy multi-column creation form while using the compact shell. */
@media(min-width:801px) and (max-width:1200px){
  .main{padding:28px 32px!important}
  .secondary-view,#createView{max-width:1020px;margin:0 auto}
}

@media(max-width:800px){
  .tf-responsive-appbar{height:62px;padding:8px 14px}
  .app,.app.create-active,.app:not(.create-active){padding-top:62px}
  .tf-responsive-logo{width:150px}
  .tf-menu-toggle span{display:none}
  .tf-menu-toggle{width:42px;padding:8px}
  .main{padding:14px!important}
  .card{padding:16px!important;border-radius:14px}
  .welcome{padding:18px;margin-bottom:16px}
  .welcome h1{font-size:21px}
  .tf-compact-output-actions{gap:7px}
  .tf-compact-action{min-height:46px;padding:9px 6px;font-size:11px;gap:5px}
  .tf-compact-action svg{width:17px;height:17px}
  #output .scene{padding:13px!important;gap:10px!important}
}

@media(max-width:390px){
  .tf-compact-action span{font-size:10px}
  .tf-compact-action{gap:4px;padding-inline:4px}
}

/* =========================================================
   TeacherFly Controlled Beta User Guide integration
   ========================================================= */
.guide-live-card{padding:30px}
.guide-live-badge{display:inline-flex;align-items:center;width:max-content;padding:4px 9px;border-radius:999px;background:rgba(99,102,241,.11);color:var(--indigo);font-size:10px;font-weight:800;letter-spacing:.35px;text-transform:uppercase}
.guide-book-icon{background:rgba(99,102,241,.1);display:flex;align-items:center;justify-content:center}.guide-book-icon img{width:34px;height:34px;display:block}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.guide-open-btn,.guide-download-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:800;text-decoration:none}
.guide-open-btn{width:auto}
.guide-download-btn{border:1.5px solid var(--border);background:var(--card);color:var(--navy)}
.guide-download-btn:hover{border-color:var(--indigo);color:var(--indigo)}
.guide-pdf-wrap{margin-top:20px}
.guide-pdf-frame{display:block;width:100%;height:min(72vh,900px);border:1px solid var(--border);border-radius:12px;background:#fff}
.guide-mobile-note{display:none;margin:12px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5}
:root.dark .guide-download-btn{background:var(--card);color:#e2e8f0}
@media(max-width:800px){
  .guide-live-card{padding:18px}
  .guide-actions{flex-direction:column}
  .guide-open-btn,.guide-download-btn{width:100%}
  .guide-pdf-frame{display:none}
  .guide-mobile-note{display:block}
}

/* =====================================================
   TeacherFly Resource Library v1.0 Beta
   ===================================================== */
.resource-library-card{position:relative;overflow:hidden}
.resource-library-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--navy),var(--indigo),var(--coral));opacity:.9}
.resource-library-heading{align-items:center}
.resource-library-icon{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(255,138,107,.14));font-size:26px}
.resource-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 16px}
.resource-category-btn{appearance:none;width:100%;min-height:86px;padding:14px 15px;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease}
.resource-category-btn strong{display:block;color:var(--navy);font-size:13px;line-height:1.3;margin-bottom:6px}
.resource-category-btn span{display:block;color:var(--text-muted);font-size:11px;line-height:1.35}
.resource-category-btn:not(:disabled):hover{border-color:var(--coral);transform:translateY(-1px);box-shadow:0 7px 18px rgba(30,58,138,.08);background:linear-gradient(135deg,var(--card),rgba(255,138,107,.045))}
.resource-category-btn.active{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.10),0 8px 20px rgba(30,58,138,.07);background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(255,138,107,.05))}
.resource-category-btn.unavailable{cursor:not-allowed;opacity:.52;filter:grayscale(.45);background:var(--hover-bg)}
.resource-category-btn.unavailable strong,.resource-category-btn.unavailable span{color:var(--text-muted)}
.resource-development-note{margin-top:4px}
.resource-development-note strong{color:var(--navy)}
.resource-collection-panel{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.resource-collection-panel[hidden]{display:none!important}
.resource-collection-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:20px}
.resource-collection-head>div{min-width:0;flex:1}
.resource-collection-head h3{margin:7px 0 5px;color:var(--navy);font-size:22px;line-height:1.2;outline:none}
.resource-collection-head p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.55;max-width:840px}
.resource-live-badge{display:inline-flex;align-items:center;width:max-content;padding:4px 9px;border-radius:999px;background:rgba(255,138,107,.14);color:#b4492d;font-size:9px;font-weight:850;letter-spacing:.35px;text-transform:uppercase}
.resource-back-btn{appearance:none;border:1px solid rgba(99,102,241,.25);background:rgba(99,102,241,.07);color:var(--navy);border-radius:10px;padding:9px 12px;font-size:11px;font-weight:750;cursor:pointer;white-space:nowrap}
.resource-back-btn:hover{border-color:var(--indigo);background:rgba(99,102,241,.11)}
.resource-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.resource-content-card{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:17px;box-shadow:0 1px 2px rgba(15,23,42,.035)}
.resource-content-card h4{margin:5px 0 8px;color:var(--navy);font-size:15px;line-height:1.35}
.resource-content-card>p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.55}
.resource-card-kicker{font-size:9px;font-weight:850;letter-spacing:.5px;text-transform:uppercase;color:var(--indigo)}
.resource-copy-block{display:flex;align-items:flex-end;gap:12px;margin-top:14px;padding:12px;border-radius:11px;border:1px solid rgba(255,138,107,.30);background:rgba(255,138,107,.07)}
.resource-copy-block>div{flex:1;min-width:0}
.resource-copy-block span{display:block;color:var(--navy);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.35px;margin-bottom:5px}
.resource-copy-block p{margin:0;color:var(--text);font-size:12px;line-height:1.5}
/* Teachable Social Media Content uses the same navy/indigo visual language as Platform Guides. Coral is reserved for the Copy this idea action. */
.resource-category-btn[data-resource-key="ideas"]:not(:disabled):hover{border-color:var(--indigo);background:linear-gradient(135deg,var(--card),rgba(99,102,241,.055))}
.resource-category-btn[data-resource-key="ideas"].active{border-color:var(--indigo);background:linear-gradient(135deg,rgba(99,102,241,.075),rgba(99,102,241,.025))}
.resource-collection-panel[data-resource-key="ideas"] .resource-live-badge{background:rgba(99,102,241,.10);color:var(--navy)}
.resource-collection-panel[data-resource-key="ideas"] .resource-copy-block{border-color:rgba(99,102,241,.24);background:rgba(99,102,241,.055)}
.resource-collection-panel[data-resource-key="ideas"] .resource-copy-btn{border-color:var(--coral);background:rgba(255,138,107,.16);color:var(--navy)}
.resource-collection-panel[data-resource-key="ideas"] .resource-copy-btn:hover{background:rgba(255,138,107,.26);box-shadow:0 5px 12px rgba(255,138,107,.15)}
.resource-copy-btn{appearance:none;border:1px solid var(--coral);background:rgba(255,138,107,.14);color:var(--navy);border-radius:10px;padding:9px 11px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.resource-copy-btn:hover{background:rgba(255,138,107,.22);transform:translateY(-1px);box-shadow:0 5px 12px rgba(255,138,107,.15)}
.resource-copy-btn.copied{background:var(--coral);color:var(--navy)}
.resource-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.resource-filter-chip{appearance:none;border:1px solid var(--border);background:var(--hover-bg);color:var(--text);border-radius:999px;padding:7px 10px;font-size:10px;font-weight:720;cursor:pointer}
.resource-filter-chip:hover{border-color:var(--indigo)}
.resource-filter-chip.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:none}
.resource-howto,.resource-editor-note{margin-bottom:16px;padding:15px 16px;border-radius:13px;border:1px solid rgba(99,102,241,.18);background:linear-gradient(135deg,rgba(99,102,241,.055),rgba(255,138,107,.035))}
.resource-howto strong,.resource-editor-note>strong{color:var(--navy);font-size:13px}
.resource-howto p,.resource-editor-note>p{margin:5px 0 0;color:var(--text-muted);font-size:12px;line-height:1.55}
.resource-template-card ol{margin:12px 0 0;padding-left:20px;color:var(--text);font-size:12px;line-height:1.55}
.resource-template-card li{margin:5px 0;padding-left:2px}
.resource-warning{margin-top:11px;padding:10px 12px;border-radius:10px;background:rgba(255,138,107,.11);border:1px solid rgba(255,138,107,.28);color:var(--text-muted);font-size:11px;line-height:1.5}
.resource-warning strong{color:#b4492d}
.resource-example-card blockquote{margin:10px 0 12px;padding:12px 13px;border-left:3px solid var(--coral);border-radius:0 10px 10px 0;background:rgba(255,138,107,.065);color:var(--text);font-size:13px;font-weight:650;line-height:1.5}
.resource-example-card .resource-copy-btn{margin-top:13px}
.resource-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--card);-webkit-overflow-scrolling:touch}
.resource-platform-table{width:100%;min-width:980px;border-collapse:collapse;font-size:11px;line-height:1.5}
.resource-platform-table th,.resource-platform-table td{padding:13px 12px;vertical-align:top;text-align:left;border-bottom:1px solid var(--border)}
.resource-platform-table thead th{position:sticky;top:0;background:var(--navy);color:#fff;font-size:10px;font-weight:800;letter-spacing:.2px;z-index:1}
.resource-platform-table tbody th{color:var(--navy);font-size:12px;font-weight:850;background:rgba(99,102,241,.035);white-space:nowrap}
.resource-platform-table tbody tr:last-child th,.resource-platform-table tbody tr:last-child td{border-bottom:0}
.resource-platform-table tbody tr:hover td,.resource-platform-table tbody tr:hover th{background:rgba(99,102,241,.04)}
.resource-format-pill{display:inline-block;padding:4px 7px;border-radius:8px;background:rgba(99,102,241,.09);color:var(--navy);font-weight:700}
.platform-note span{display:block;margin-top:8px;color:var(--text-muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.35px}

:root.dark .resource-library-card::before{opacity:1}
:root.dark .resource-category-btn,.dark .resource-content-card,.dark .resource-table-wrap{background:var(--card)}
:root.dark .resource-category-btn strong,:root.dark .resource-content-card h4,:root.dark .resource-copy-block span,:root.dark .resource-collection-head h3,:root.dark .resource-development-note strong,:root.dark .resource-howto strong,:root.dark .resource-editor-note>strong{color:#e2e8f0}
:root.dark .resource-live-badge{color:#ffd0c4;background:rgba(255,138,107,.13)}
:root.dark .resource-collection-panel[data-resource-key="ideas"] .resource-live-badge{color:#c7d2fe;background:rgba(99,102,241,.16)}
:root.dark .resource-collection-panel[data-resource-key="ideas"] .resource-copy-block{border-color:rgba(99,102,241,.28);background:rgba(99,102,241,.10)}
:root.dark .resource-back-btn{color:#dbeafe}
:root.dark .resource-copy-btn{color:#e2e8f0}
:root.dark .resource-copy-btn.copied{color:#111827}
:root.dark .resource-filter-chip.active{background:var(--indigo);border-color:var(--indigo)}
:root.dark .resource-platform-table thead th{background:#111827;color:#f8fafc}
:root.dark .resource-platform-table tbody th{color:#e2e8f0;background:rgba(99,102,241,.07)}
:root.dark .resource-format-pill{color:#c7d2fe;background:rgba(99,102,241,.14)}
:root.dark .resource-warning strong{color:#ffc0b0}

@media (max-width:980px){
  .resource-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .resource-library-card{padding:20px}
  .resource-library-heading{align-items:flex-start}
  .resource-category-grid{grid-template-columns:1fr}
  .resource-category-btn{min-height:72px}
  .resource-card-grid{grid-template-columns:1fr}
  .resource-collection-head{display:block}
  .resource-back-btn{margin-bottom:14px}
  .resource-copy-block{display:block}
  .resource-copy-block .resource-copy-btn{margin-top:10px;width:100%}
  .resource-example-card .resource-copy-btn{width:100%}
  .resource-filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .resource-filter-chip{flex:0 0 auto}
}
.resource-library-icon{color:var(--navy)}
.resource-library-icon svg{display:block}
:root.dark .resource-library-icon{color:#c7d2fe}

/* v4.14.57 — Beta feedback form */
.tf-beta-feedback-form{display:grid;gap:14px;margin-top:16px}.tf-beta-feedback-form label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--navy)}.tf-beta-feedback-form select,.tf-beta-feedback-form textarea{width:100%;border:1px solid #dfe4ee;border-radius:10px;background:#fff;color:#16213d;padding:10px 11px;font:inherit}.tf-beta-feedback-form textarea{resize:vertical;min-height:120px}.tf-beta-feedback-status{min-height:18px;font-size:12px;color:#6b7280}.tf-beta-feedback-status.error{color:#b42318}.tf-beta-feedback-status.success{color:#16865b}


/* v4.14.59 — Beta final feedback + UI polish */
.tf-user-guide-nav-icon,.tf-resources-nav-icon{width:18px;height:18px;object-fit:contain;flex:0 0 18px;display:block}
.tf-feedback-brand{display:block;width:min(185px,60%);height:auto;margin:0 0 14px}
.tf-feedback-actions{gap:18px!important;margin-top:4px}.tf-glass-primary{background:linear-gradient(135deg,rgba(30,58,138,.96),rgba(99,102,241,.92))!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:0 8px 22px rgba(30,58,138,.18)}
.tf-glass-secondary{background:rgba(255,255,255,.78)!important;color:var(--navy)!important;border:1px solid rgba(30,58,138,.16)!important;box-shadow:0 7px 18px rgba(30,58,138,.07);backdrop-filter:blur(10px)}
.tf-final-feedback-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid #dde3ee;border-radius:16px;padding:15px 17px;margin:0 0 18px;box-shadow:0 8px 22px rgba(30,58,138,.05)}
.tf-final-feedback-copy{display:flex;align-items:center;gap:12px;min-width:0}.tf-final-feedback-copy strong{display:block;color:#1E3A8A;font-size:15px}.tf-final-feedback-copy p{margin:2px 0 0;color:#667085;font-size:12px}.tf-final-feedback-kicker{background:rgba(99,102,241,.1);color:#6366F1;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.tf-final-feedback-btn{min-height:44px;border-radius:11px;padding:0 15px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.tf-final-feedback-btn.locked{background:#1E3A8A;color:#fff;border:1px solid #1E3A8A;box-shadow:0 8px 20px rgba(30,58,138,.18);cursor:pointer}.tf-final-feedback-btn.available{background:#FF8A6B;color:#fff;border:1px solid #FF8A6B;box-shadow:0 9px 22px rgba(255,138,107,.25);cursor:pointer}.tf-final-feedback-btn.submitted{background:#16A34A;color:#fff;border:1px solid #16A34A;box-shadow:0 8px 20px rgba(22,163,74,.18);cursor:default}.tf-final-feedback-lock img{width:18px;height:18px;display:block;opacity:1;filter:brightness(0) invert(1)}
:root.dark .tf-final-feedback-card{background:#101d46;border-color:#273761}.dark .tf-final-feedback-copy strong{color:#fff}.dark .tf-final-feedback-copy p{color:#b8c1d9}.dark .tf-final-feedback-btn.locked{background:#172550;border-color:#34436c;color:#b8c1d9}.dark .tf-glass-secondary{background:rgba(16,29,70,.72)!important;color:#fff!important;border-color:#33436f!important}
@media(max-width:700px){.tf-final-feedback-card{align-items:stretch;flex-direction:column}.tf-final-feedback-btn{width:100%}.tf-feedback-actions{gap:14px!important}.tf-feedback-actions .btn{flex:1}}

/* v4.14.61 — Final Beta Feedback sidebar control */
.tf-final-feedback-nav{display:none}
.tf-final-feedback-nav-icon{width:18px;height:18px;object-fit:contain;flex:0 0 18px;filter:brightness(0) invert(1)}
.tf-final-feedback-nav.locked{background:#1E3A8A;color:#fff;border-color:#1E3A8A;box-shadow:0 6px 16px rgba(30,58,138,.16)}
.tf-final-feedback-nav.locked .tf-final-feedback-nav-icon{opacity:1}
.tf-final-feedback-nav.locked .nav-status{background:rgba(255,255,255,.18);color:#fff}
.tf-final-feedback-nav.available{background:#FF8A6B;color:#fff;border-color:#FF8A6B;box-shadow:0 6px 16px rgba(255,138,107,.20)}
.tf-final-feedback-nav.available .nav-status{background:rgba(255,255,255,.22);color:#fff}
.tf-final-feedback-nav.submitted{background:#16A34A;color:#fff;border-color:#16A34A;box-shadow:0 6px 16px rgba(22,163,74,.18);opacity:1;cursor:default}
.tf-final-feedback-nav.submitted .nav-status{background:rgba(255,255,255,.22);color:#fff}


/* v4.14.63 — approved Resources hub layout */
.resource-library-kicker{display:inline-flex;align-items:center;width:max-content;padding:6px 10px;margin-bottom:10px;border-radius:999px;background:rgba(99,102,241,.10);color:var(--indigo);font-size:10px;font-weight:850;letter-spacing:.45px;text-transform:uppercase}
.resource-library-heading{margin-bottom:6px}
.resource-group{margin-top:34px}
.resource-group-title{margin:0 0 6px;color:var(--navy);font-size:22px;line-height:1.18;font-weight:850}
.resource-group-subtitle{margin:0 0 15px;color:var(--text-muted);font-size:13px;line-height:1.5}
.resource-category-stack{display:flex;flex-direction:column;gap:12px}
.resource-category-stack .resource-category-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;min-height:104px;padding:18px 20px;border:1.5px solid rgba(99,102,241,.34);border-radius:16px;background:linear-gradient(135deg,rgba(99,102,241,.045),rgba(255,138,107,.04));color:var(--text);text-align:left;cursor:pointer;box-shadow:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.resource-category-stack .resource-category-btn:not(:disabled):hover{transform:translateY(-1px);border-color:rgba(99,102,241,.58);background:linear-gradient(135deg,rgba(99,102,241,.065),rgba(255,138,107,.055));box-shadow:0 8px 20px rgba(30,58,138,.07)}
.resource-category-stack .resource-category-btn.active{border-color:var(--indigo);background:linear-gradient(135deg,rgba(99,102,241,.09),rgba(255,138,107,.06));box-shadow:0 0 0 3px rgba(99,102,241,.08),0 8px 20px rgba(30,58,138,.06)}
.resource-category-copy{display:block;min-width:0}
.resource-category-copy strong{display:block;margin:0 0 7px;color:var(--navy);font-size:16px;line-height:1.32;font-weight:800}
.resource-category-copy>span{display:block;color:var(--text-muted);font-size:12.5px;line-height:1.5}
.resource-category-action{display:inline-flex!important;align-items:center;justify-content:center;width:max-content;white-space:nowrap;padding:10px 14px;border:1px solid rgba(166,168,255,.72);border-radius:14px;background:linear-gradient(180deg,rgba(240,240,255,.96),rgba(232,232,255,.94));color:var(--navy)!important;box-shadow:0 4px 12px rgba(99,102,241,.13),inset 0 1px 0 rgba(255,255,255,.85);font-size:11.5px!important;line-height:1!important;font-weight:800}
.resource-category-stack .resource-category-btn:hover .resource-category-action{background:linear-gradient(180deg,rgba(235,235,255,1),rgba(225,226,255,.98));box-shadow:0 5px 14px rgba(99,102,241,.17),inset 0 1px 0 rgba(255,255,255,.9)}
.resource-production-guide-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.resource-production-guide-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.resource-production-guide-card h4{margin:5px 0 7px;color:var(--navy);font-size:15px}
.resource-production-guide-card p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.5}
.resource-guide-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.resource-guide-open,.resource-guide-download{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 12px;border-radius:11px;text-decoration:none;font-size:11px;font-weight:800}
.resource-guide-open{border:1px solid rgba(166,168,255,.72);background:linear-gradient(180deg,rgba(240,240,255,.96),rgba(232,232,255,.94));color:var(--navy);box-shadow:0 3px 9px rgba(99,102,241,.11),inset 0 1px 0 rgba(255,255,255,.85)}
.resource-guide-download{border:1px solid var(--border);background:var(--card);color:var(--navy)}
.resource-guide-open:hover,.resource-guide-download:hover{border-color:var(--indigo)}
:root.dark .resource-category-stack .resource-category-btn{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(255,138,107,.07));border-color:rgba(129,140,248,.38)}
:root.dark .resource-category-copy strong,:root.dark .resource-group-title,:root.dark .resource-production-guide-card h4{color:#e2e8f0}
:root.dark .resource-category-action,:root.dark .resource-guide-open{color:#e2e8f0!important;background:linear-gradient(180deg,rgba(99,102,241,.26),rgba(79,70,229,.22));border-color:rgba(165,180,252,.42)}
:root.dark .resource-production-guide-card{background:var(--card)}
@media(max-width:760px){.resource-category-stack .resource-category-btn,.resource-production-guide-card{grid-template-columns:1fr}.resource-category-action{justify-self:start}.resource-guide-actions{justify-content:flex-start}.resource-group-title{font-size:20px}}



/* =========================================================
   Batch Studio v4.14.64 development integration
   ========================================================= */
.tf-batch-progress{margin:14px 0 18px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.tf-batch-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.tf-batch-progress-head strong{color:var(--navy);font-size:14px}
.tf-batch-progress-head span{font-size:12px;color:var(--muted)}
.tf-batch-progress-list{display:grid;gap:8px}
.tf-batch-progress-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.tf-batch-progress-row[data-state="complete"]{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.06)}
.tf-batch-progress-row[data-state="failed"]{border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.05)}
.tf-batch-progress-status{width:20px;flex:0 0 20px;text-align:center;font-weight:800;color:var(--muted)}
.tf-batch-progress-row[data-state="complete"] .tf-batch-progress-status{color:#059669}
.tf-batch-progress-row[data-state="failed"] .tf-batch-progress-status{color:#dc2626}
.tf-batch-progress-topic{min-width:0;flex:1;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.tf-batch-progress-note{font-size:12px;color:var(--muted);white-space:nowrap}
.tf-batch-progress-actions{display:flex;gap:6px;flex-wrap:wrap}
.tf-batch-mini-btn{padding:6px 10px;border:1px solid rgba(99,102,241,.35);border-radius:8px;background:rgba(99,102,241,.08);color:var(--navy);font-size:12px;font-weight:700;cursor:pointer}
.tf-batch-mini-btn.primary{background:#0fd0b0;border-color:#0fd0b0;color:#062a2a}
.tf-batch-mini-btn:disabled{opacity:.5;cursor:not-allowed}
.tf-batch-studio-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px}
.tf-batch-studio-heading h2{margin:4px 0 5px}
.tf-batch-studio-heading p{margin:0;color:var(--muted);max-width:720px}
.tf-batch-folder-count{min-width:88px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);text-align:center}
.tf-batch-folder-count span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tf-batch-folder-count strong{font-size:20px;color:var(--navy)}
.tf-batch-state{padding:28px 12px;text-align:center;color:var(--muted)}
.tf-batch-folder-grid,.tf-batch-pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tf-batch-folder-card,.tf-batch-pack-card{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tf-batch-folder-card{border-left:4px solid var(--indigo)}
.tf-batch-folder-title,.tf-batch-pack-title{font-weight:800;color:var(--text);margin-bottom:6px}
.tf-batch-folder-meta,.tf-batch-pack-meta{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:10px}
.tf-batch-topic-list{margin:10px 0 12px;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:12px;color:var(--text)}
.tf-batch-topic-list div+div{margin-top:4px}
.tf-batch-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.tf-batch-actions .lib-btn{flex:0 1 auto;padding:7px 10px}
.tf-batch-folder-detail{margin-top:8px}
.tf-batch-back{margin-bottom:14px}
.tf-batch-detail-header{padding:14px 0 18px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tf-batch-detail-header h3{margin:0 0 6px;color:var(--navy)}
.tf-batch-detail-header p{margin:0;color:var(--muted);font-size:13px}
.tf-batch-status-pill{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700;background:var(--bg);color:var(--muted);margin-right:5px}
.tf-batch-status-pill.complete{background:#dcfce7;color:#166534}
.tf-batch-status-pill.partial{background:#fef3c7;color:#92400e}
.tf-batch-status-pill.failed{background:#fee2e2;color:#991b1b}
.tf-batch-library-link{gap:14px}
.tf-batch-library-link .lib-btn{width:auto;flex:0 0 auto}
@media(max-width:720px){
 .tf-batch-progress-row{align-items:flex-start;flex-wrap:wrap}
 .tf-batch-progress-topic{min-width:calc(100% - 36px)}
 .tf-batch-progress-actions{width:100%;padding-left:30px}
 .tf-batch-studio-heading{flex-direction:column}
 .tf-batch-folder-grid,.tf-batch-pack-grid{grid-template-columns:1fr}
}


/* v4.14.65 Batch Studio review fixes */
.tf-batch-created-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  margin:0 0 10px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.18);
  color:var(--indigo);
  font-size:11px;
  font-weight:700;
}
.tf-batch-created-label img{
  width:14px;
  height:14px;
  object-fit:contain;
}
.tf-batch-mini-btn.retry{
  background:rgba(255,138,107,.12);
  border-color:rgba(255,138,107,.45);
  color:#b45309;
}
.tf-batch-mini-btn.retry:disabled{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.25);
  color:var(--muted);
}
:root.dark .tf-batch-created-label{
  background:rgba(99,102,241,.14);
  border-color:rgba(129,140,248,.28);
}


/* v4.14.66 generation progress + Batch file deletion polish */
.tf-generation-status-card{
  min-height:92px;
  margin:18px auto;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:760px;
  border:1px solid rgba(99,102,241,.24);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(255,138,107,.045));
  box-shadow:0 8px 24px rgba(30,58,138,.06);
}
.tf-generation-status-pulse{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:999px;
  background:var(--indigo);
  box-shadow:0 0 0 0 rgba(99,102,241,.5);
  animation:tfGenerationPulse 1.5s ease-out infinite;
}
.tf-generation-status-copy{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.tf-generation-status-copy strong{font-size:14px;color:var(--navy)}
.tf-generation-status-copy span{font-size:14px;color:var(--text);overflow-wrap:anywhere}
@keyframes tfGenerationPulse{
  0%{box-shadow:0 0 0 0 rgba(99,102,241,.5);transform:scale(.95)}
  60%{box-shadow:0 0 0 10px rgba(99,102,241,0);transform:scale(1)}
  100%{box-shadow:0 0 0 0 rgba(99,102,241,0);transform:scale(.95)}
}
@media (prefers-reduced-motion: reduce){.tf-generation-status-pulse{animation:none}}
:root.dark .tf-generation-status-card{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(255,138,107,.07));border-color:rgba(129,140,248,.3)}
:root.dark .tf-generation-status-copy strong{color:#c7d2fe}


/* v4.14.67 — compact glass-coral action buttons */
.tf-glass-coral-btn {
  padding: 9px 13px;
  border: 1.5px solid rgba(255, 138, 101, 0.32);
  background: rgba(255, 138, 101, 0.08);
  color: #1E3A8A;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: .2s;
  box-shadow: 0 0 12px rgba(255, 138, 101, 0.14);
  white-space: nowrap;
}
.tf-glass-coral-btn:hover {
  border-color: var(--coral);
  background: rgba(255, 138, 101, 0.15);
  box-shadow: 0 0 20px rgba(255, 138, 101, 0.28);
}
.tf-glass-coral-btn:active {
  background: rgba(255, 138, 101, 0.2);
  box-shadow: 0 0 22px rgba(255, 138, 101, 0.36);
  transform: scale(.99);
}
.tf-glass-coral-icon {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
}
.tf-library-multiselect {
  min-height: 36px;
}
.tf-batch-back {
  margin-bottom: 18px;
}
:root.dark .tf-glass-coral-btn {
  border-color: rgba(255, 138, 101, 0.42);
  background: rgba(255, 138, 101, 0.12);
  color: #F8FAFC;
  box-shadow: 0 0 16px rgba(255, 138, 101, 0.18);
}
:root.dark .tf-glass-coral-btn:hover {
  background: rgba(255, 138, 101, 0.2);
  box-shadow: 0 0 22px rgba(255, 138, 101, 0.3);
}

/* v4.14.68 — Repurpose Email Copy production UI */
.repurpose-live-badge{
  display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;
  background:rgba(22,163,74,.10);color:#15803d;font-size:10px;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase
}
.tf-repurposed-assets{
  margin:14px 0 18px;padding:18px;border:1px solid rgba(99,102,241,.24);
  border-radius:14px;background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(255,138,107,.05));
}
.tf-repurposed-assets-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.tf-repurpose-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--indigo);margin-bottom:5px}
.tf-repurposed-assets-head h3{margin:0;color:var(--navy);font-size:17px}
.tf-repurposed-assets-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.tf-repurposed-assets-grid{display:grid;gap:12px}
.tf-repurpose-asset-card{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:14px}
.tf-repurpose-asset-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.tf-repurpose-asset-card-head strong{display:block;color:var(--navy);font-size:14px}
.tf-repurpose-asset-time{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.tf-repurpose-asset-actions{display:flex;gap:7px;flex-wrap:wrap}
.tf-repurpose-asset-preview{white-space:pre-wrap;margin:0;padding:12px;border-radius:10px;background:var(--hover-bg);border:1px solid var(--border);font:inherit;font-size:12px;line-height:1.55;color:var(--text);max-height:260px;overflow:auto}
.tf-repurpose-menu{display:grid;gap:10px;margin-top:12px}
.tf-repurpose-menu-item{width:100%;text-align:left;border:1px solid var(--border);border-radius:12px;padding:13px 14px;background:var(--card);display:grid;gap:4px;cursor:pointer;color:var(--text)}
.tf-repurpose-menu-item strong{font-size:13px;color:var(--navy)}
.tf-repurpose-menu-item span{font-size:11px;color:var(--muted)}
.tf-repurpose-menu-item.active{border-color:rgba(99,102,241,.5);box-shadow:0 0 0 3px rgba(99,102,241,.07)}
.tf-repurpose-menu-item.active:hover{background:rgba(99,102,241,.05)}
.tf-repurpose-menu-item.disabled{opacity:.55;cursor:not-allowed}
.tf-repurpose-form{display:grid;gap:13px;margin-top:12px}
.tf-repurpose-field{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--navy)}
.tf-repurpose-field input,.tf-repurpose-field select,.tf-repurpose-field textarea{width:100%;padding:10px 11px;border:1.5px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font:inherit;font-weight:400}
.tf-repurpose-field small{font-size:10px;color:var(--muted);font-weight:400}
.tf-repurpose-contract-note{padding:10px 12px;border-radius:9px;background:rgba(99,102,241,.07);color:var(--text-muted);font-size:11px;line-height:1.45}
.tf-repurpose-status{min-height:18px;color:var(--muted);font-size:11px}
.tf-repurpose-form-actions{margin-top:2px}
:root.dark .repurpose-live-badge{background:rgba(34,197,94,.12);color:#86efac}
:root.dark .tf-repurposed-assets{background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(255,138,107,.07))}
:root.dark .tf-repurposed-assets-head h3,:root.dark .tf-repurpose-asset-card-head strong,:root.dark .tf-repurpose-menu-item strong,:root.dark .tf-repurpose-field{color:#E5E7EB}
@media(max-width:700px){
  .tf-repurposed-assets-head,.tf-repurpose-asset-card-head{flex-direction:column}
  .tf-repurpose-asset-actions{width:100%}
}


/* v4.14.69 — Repurpose Email Copy generation button */
.tf-repurpose-form-actions{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px !important;
  align-items:center;
}
.tf-repurpose-generate-btn{
  width:100% !important;
  margin-top:0 !important;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(237,108,68,.08) !important;
  background-image:none !important;
  border:1.5px solid rgba(245,120,82,.30) !important;
  color:#1E3A8A !important;
  border-radius:12px !important;
  font-weight:700 !important;
  box-shadow:0 3px 6px rgba(223,107,71,.15) !important;
}
.tf-repurpose-generate-btn:hover:not(:disabled){
  background:rgba(235,103,62,.15) !important;
  border-color:rgba(210,98,68,.30) !important;
  box-shadow:0 4px 8px rgba(190,97,71,.30) !important;
}
.tf-repurpose-generate-btn:disabled{
  opacity:1 !important;
  cursor:wait;
}
.tf-repurpose-generating{
  animation:tfRepurposeGeneratePulse 1.15s ease-in-out infinite;
}
@keyframes tfRepurposeGeneratePulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(255,138,101,.16),0 3px 6px rgba(223,107,71,.15);
    transform:scale(1);
  }
  50%{
    box-shadow:0 0 0 7px rgba(255,138,101,.08),0 0 22px rgba(255,138,101,.28);
    transform:scale(1.006);
  }
}
.tf-repurpose-status{
  min-height:0;
}
.tf-repurpose-status:empty{
  display:none;
}
.tf-repurpose-status.error{
  display:block;
  color:#b42318;
  background:#fff1f0;
  border:1px solid #fecaca;
  border-radius:9px;
  padding:9px 11px;
  font-size:12px;
}
:root.dark .tf-repurpose-generate-btn{
  background:rgba(243,132,98,.12) !important;
  border-color:rgba(252,144,114,.4) !important;
  color:#F3F5F9 !important;
}
:root.dark .tf-repurpose-status.error{
  color:#fecaca;
  background:rgba(127,29,29,.22);
  border-color:rgba(248,113,113,.35);
}
@media (prefers-reduced-motion: reduce){
  .tf-repurpose-generating{animation:none}
}
@media (max-width:640px){
  .tf-repurpose-form-actions{grid-template-columns:1fr}
}


/* v4.14.70 — Repurpose Assets sidebar download controls */
.tf-repurpose-sidebar-section{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.tf-repurpose-sidebar-section h3{
  font-size:16px;
  margin:0 0 14px;
  font-weight:700;
  color:#1E3A8A;
}
.tf-repurpose-sidebar-list{
  display:grid;
  gap:10px;
}
.tf-repurpose-sidebar-pill{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 9px 8px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--card);
  box-shadow:0 4px 12px rgba(30,58,138,.08);
}
.tf-repurpose-sidebar-label{
  min-width:0;
  color:#1E3A8A;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.tf-repurpose-sidebar-actions{
  display:flex;
  align-items:center;
  gap:3px;
  flex-wrap:nowrap;
}
.tf-repurpose-sidebar-action{
  appearance:none;
  border:0;
  background:transparent;
  padding:6px 5px;
  border-radius:7px;
  color:#1E3A8A;
  font-size:10px;
  line-height:1;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.tf-repurpose-sidebar-action:hover{
  background:rgba(99,102,241,.10);
}
.tf-repurpose-sidebar-action:active{
  transform:scale(.97);
}
.tf-repurpose-sidebar-action.delete{
  color:#b42318;
}
.tf-repurpose-sidebar-action.delete:hover{
  background:rgba(255,138,107,.13);
  color:#8f1d14;
}
:root.dark .tf-repurpose-sidebar-section h3,
:root.dark .tf-repurpose-sidebar-label,
:root.dark .tf-repurpose-sidebar-action{
  color:#E5E7EB;
}
:root.dark .tf-repurpose-sidebar-pill{
  background:rgba(15,23,42,.64);
  border-color:rgba(148,163,184,.20);
}
:root.dark .tf-repurpose-sidebar-action:hover{
  background:rgba(99,102,241,.20);
}
:root.dark .tf-repurpose-sidebar-action.delete{
  color:#FDA4AF;
}

/* v4.14.72 — Repurpose asset View / Hide cards */
.tf-repurpose-asset-title-wrap{min-width:0;flex:1}
.tf-repurpose-asset-title-wrap strong{overflow-wrap:anywhere}
.tf-repurpose-asset-card.collapsed{
  padding:10px 12px;
  border-color:rgba(99,102,241,.24);
  background:linear-gradient(135deg,rgba(99,102,241,.055),rgba(255,138,107,.045));
  box-shadow:0 4px 12px rgba(30,58,138,.07);
}
.tf-repurpose-asset-card.collapsed .tf-repurpose-asset-card-head{
  align-items:center;
  margin-bottom:0;
}
.tf-repurpose-asset-card.collapsed .tf-repurpose-asset-time,
.tf-repurpose-asset-card.collapsed .tf-repurpose-asset-preview{
  display:none;
}
.tf-repurpose-asset-card.collapsed .tf-repurpose-asset-actions .lib-btn:not(.tf-repurpose-toggle){
  display:none !important;
}
.tf-repurpose-toggle{font-weight:700}
.tf-repurpose-delete{color:#b42318}
.tf-repurpose-delete:hover{background:rgba(255,138,107,.12);border-color:rgba(255,138,107,.35)}
:root.dark .tf-repurpose-asset-card.collapsed{
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(255,138,107,.08));
}
:root.dark .tf-repurpose-delete{color:#FDA4AF}

/* v4.14.75 — Repurpose defaults + clickable sidebar assets */
.tf-repurpose-sidebar-pill{cursor:pointer}
.tf-repurpose-sidebar-pill:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:2px;
}
.tf-repurpose-sidebar-pill:hover{
  border-color:rgba(99,102,241,.42);
  box-shadow:0 4px 12px rgba(30,58,138,.08);
}

/* v4.14.76 — Repurpose sidebar compact card polish */
.tf-repurpose-sidebar-pill{
  border:1.5px solid rgba(99,102,241,.58);
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 0 14px rgba(99,102,241,.13),
    0 6px 18px rgba(30,58,138,.06);
  background:rgba(255,255,255,.92);
}
.tf-repurpose-sidebar-pill:hover{
  border-color:rgba(99,102,241,.82);
  box-shadow:
    0 0 0 1px rgba(99,102,241,.12),
    0 0 18px rgba(99,102,241,.19),
    0 8px 20px rgba(30,58,138,.08);
}
.tf-repurpose-sidebar-label{
  font-weight:800;
  color:var(--navy);
  line-height:1.15;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.tf-repurpose-sidebar-actions{
  width:100%;
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}


/* v4.14.82 — Repurpose sidebar asset icons */
.tf-repurpose-sidebar-pill{
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:8px;
  padding:10px 11px;
}
.tf-repurpose-sidebar-heading{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#1E3A8A;
}
.tf-repurpose-sidebar-icon{
  flex:0 0 18px;
  width:18px;
  height:18px;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask-image:var(--tf-repurpose-sidebar-icon);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:var(--tf-repurpose-sidebar-icon);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.tf-repurpose-sidebar-label{
  color:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}
.tf-repurpose-sidebar-actions{
  width:100%;
  margin-top:0;
  padding-left:27px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
}
.tf-repurpose-sidebar-action,
.tf-repurpose-sidebar-action.delete{
  color:#1E3A8A;
}
.tf-repurpose-sidebar-action:hover,
.tf-repurpose-sidebar-action.delete:hover{
  color:#1E3A8A;
  background:rgba(99,102,241,.10);
}
:root.dark .tf-repurpose-sidebar-heading,
:root.dark .tf-repurpose-sidebar-label,
:root.dark .tf-repurpose-sidebar-action,
:root.dark .tf-repurpose-sidebar-action.delete{
  color:#FFFFFF;
}
:root.dark .tf-repurpose-sidebar-action:hover,
:root.dark .tf-repurpose-sidebar-action.delete:hover{
  color:#FFFFFF;
  background:rgba(99,102,241,.20);
}
@media (max-width:640px){
  .tf-repurpose-sidebar-icon{
    flex-basis:17px;
    width:17px;
    height:17px;
  }
  .tf-repurpose-sidebar-actions{
    padding-left:26px;
  }
}


/* v4.14.83 — Repurpose sidebar spacing, sizing, and Delete color */
.tf-repurpose-sidebar-pill{
  padding:13px 14px 12px;
  gap:11px;
  border-radius:12px;
}

.tf-repurpose-sidebar-heading{
  gap:11px;
  min-height:24px;
}

.tf-repurpose-sidebar-icon{
  flex:0 0 23px;
  width:23px;
  height:23px;
}

.tf-repurpose-sidebar-label{
  font-size:13.5px;
  font-weight:800;
  line-height:1.25;
}

.tf-repurpose-sidebar-actions{
  width:100%;
  padding-left:34px;
  margin-top:1px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
  gap:7px;
}

.tf-repurpose-sidebar-action{
  min-height:30px;
  padding:6px 4px;
  border-radius:7px;
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  text-align:center;
  color:#1E3A8A;
}

.tf-repurpose-sidebar-action:hover{
  color:#1E3A8A;
  background:rgba(99,102,241,.10);
}

.tf-repurpose-sidebar-action.delete{
  color:#DC2626;
}

.tf-repurpose-sidebar-action.delete:hover{
  color:#B91C1C;
  background:rgba(220,38,38,.09);
}

:root.dark .tf-repurpose-sidebar-heading,
:root.dark .tf-repurpose-sidebar-label,
:root.dark .tf-repurpose-sidebar-action{
  color:#FFFFFF;
}

:root.dark .tf-repurpose-sidebar-action:hover{
  color:#FFFFFF;
  background:rgba(99,102,241,.20);
}

:root.dark .tf-repurpose-sidebar-action.delete{
  color:#F87171;
}

:root.dark .tf-repurpose-sidebar-action.delete:hover{
  color:#FCA5A5;
  background:rgba(248,113,113,.12);
}

@media (max-width:640px){
  .tf-repurpose-sidebar-pill{
    padding:12px 12px 11px;
  }
  .tf-repurpose-sidebar-icon{
    flex-basis:22px;
    width:22px;
    height:22px;
  }
  .tf-repurpose-sidebar-label{
    font-size:13px;
  }
  .tf-repurpose-sidebar-actions{
    padding-left:33px;
    gap:6px;
  }
  .tf-repurpose-sidebar-action{
    font-size:11px;
    min-height:29px;
  }
}


/* v4.14.84 — Repurpose sidebar compact refinement */
.tf-repurpose-sidebar-pill{
  padding:10px 12px 9px;
  gap:6px;
  border-radius:11px;
}

.tf-repurpose-sidebar-heading{
  gap:10px;
  min-height:22px;
}

.tf-repurpose-sidebar-icon{
  flex:0 0 22px;
  width:22px;
  height:22px;
}

.tf-repurpose-sidebar-label{
  font-size:13px;
  line-height:1.18;
}

.tf-repurpose-sidebar-actions{
  padding-left:32px;
  margin-top:0;
  gap:5px;
}

.tf-repurpose-sidebar-action{
  min-height:24px;
  padding:3px 2px;
  font-size:10px;
  line-height:1;
}

@media (max-width:640px){
  .tf-repurpose-sidebar-pill{
    padding:9px 11px 8px;
    gap:5px;
  }
  .tf-repurpose-sidebar-icon{
    flex-basis:21px;
    width:21px;
    height:21px;
  }
  .tf-repurpose-sidebar-label{
    font-size:12.5px;
  }
  .tf-repurpose-sidebar-actions{
    padding-left:31px;
    gap:4px;
  }
  .tf-repurpose-sidebar-action{
    min-height:23px;
    padding:2px 2px;
    font-size:10px;
  }
}


/* v4.14.85 — tighter Repurpose sidebar heading/action spacing */
.tf-repurpose-sidebar-pill{
  gap:2px;
  padding-top:9px;
  padding-bottom:7px;
}

.tf-repurpose-sidebar-heading{
  margin-bottom:0;
  min-height:21px;
}

.tf-repurpose-sidebar-actions{
  margin-top:-2px;
  padding-top:0;
  padding-bottom:0;
}

.tf-repurpose-sidebar-action{
  min-height:22px;
  padding-top:2px;
  padding-bottom:2px;
}

@media (max-width:640px){
  .tf-repurpose-sidebar-pill{
    gap:1px;
    padding-top:8px;
    padding-bottom:6px;
  }
  .tf-repurpose-sidebar-actions{
    margin-top:-2px;
  }
  .tf-repurpose-sidebar-action{
    min-height:21px;
    padding-top:1px;
    padding-bottom:1px;
  }
}


/* v4.14.86 — Batch VIP + branded Trends + Content Pack Downloads */
.tf-batch-vip-wrap{
  padding:11px 12px 10px;
  border:1.5px solid rgba(99,102,241,.68);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(99,102,241,.055),rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(99,102,241,.07),0 0 16px rgba(99,102,241,.13);
}
.tf-batch-vip-wrap > label{
  color:#1E3A8A !important;
  font-size:11.5px !important;
  font-weight:800 !important;
}
.tf-batch-vip-input{
  border:2px solid #6366F1 !important;
  border-radius:11px !important;
  background:#FFFFFF !important;
  color:#1E3A8A !important;
  font-size:15.5px !important;
  line-height:1.38 !important;
  font-weight:550 !important;
  box-shadow:0 0 0 1px rgba(99,102,241,.08),0 0 15px rgba(99,102,241,.15) !important;
}
.tf-batch-vip-input:focus{
  outline:none !important;
  box-shadow:0 0 0 2px rgba(99,102,241,.12),0 0 20px rgba(99,102,241,.22) !important;
}
:root.dark .tf-batch-vip-wrap{
  background:linear-gradient(180deg,rgba(99,102,241,.13),rgba(15,23,42,.16));
  border-color:rgba(99,102,241,.86);
}
:root.dark .tf-batch-vip-wrap > label,
:root.dark .tf-batch-vip-input{
  color:#FFFFFF !important;
}
:root.dark .tf-batch-vip-input{
  background:#0F172A !important;
}

.tf-trends-title{
  font-size:16px;
  margin:0 0 6px;
  font-weight:800;
  color:#1E3A8A;
}
.trend-caption{color:#7B8498 !important;}
.summary-item{border-bottom:1px solid rgba(255,138,107,.30);}
.summary-label{color:#6366F1 !important;font-weight:650;}
.summary-value{color:#1E3A8A !important;font-weight:800;}
.summary-item:nth-of-type(even) .summary-label{color:#FF8A6B !important;}
:root.dark .tf-trends-title{color:#FFFFFF;}
:root.dark .trend-caption{color:#94A3B8 !important;}
:root.dark .summary-label{color:#A5B4FC !important;}
:root.dark .summary-item:nth-of-type(even) .summary-label{color:#FF9F87 !important;}
:root.dark .summary-value{color:#FFFFFF !important;}
:root.dark .summary-item{border-bottom-color:rgba(148,163,184,.24);}

.tf-downloads-title{
  font-size:16px;
  margin:24px 0 16px;
  font-weight:800;
  color:#1E3A8A;
}
:root.dark .tf-downloads-title{color:#FFFFFF;}
.right #q0,.right #q1,.right #q2,.right #q3,.right #q5,.right #q6{
  font-weight:800 !important;
}
.right #q0 .btn-label,.right #q1 .btn-label,.right #q2 .btn-label,
.right #q3 .btn-label,.right #q5 .btn-label,.right #q6 .btn-label{
  font-weight:800 !important;
}


/* v4.14.87 — approved right-panel typography + Monthly Creation Trends reference layout */

/* Repurpose asset headings: normal, not bold */
.tf-repurpose-sidebar-label{
  font-weight:400 !important;
}

/* Content Pack Downloads:
   only Download All (ZIP) and Open Teleprompter remain bold */
.right #q0,
.right #openTeleprompter,
.right #teleprompterBtn{
  font-weight:800 !important;
}
.right #q0 .btn-label{
  font-weight:800 !important;
}
.right #q1,
.right #q2,
.right #q3,
.right #q5,
.right #q6,
.right #q1 .btn-label,
.right #q2 .btn-label,
.right #q3 .btn-label,
.right #q5 .btn-label,
.right #q6 .btn-label{
  font-weight:400 !important;
}

/* Monthly Creation Trends */
.tf-trends-card{
  border:1px solid rgba(99,102,241,.18);
  border-radius:14px;
  background:#FFFFFF;
  box-shadow:0 5px 16px rgba(30,58,138,.06);
  padding:2px 14px;
}
.tf-trend-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:9px 0;
  border-bottom:1px solid #D9DEE8 !important;
}
.tf-trend-row:last-child{
  border-bottom:none !important;
}
.tf-trend-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tf-trend-icon.indigo{ color:#6366F1; }
.tf-trend-icon.coral{ color:#FF8A6B; }

.tf-trend-icon-svg{
  width:22px;
  height:22px;
  display:block;
  color:inherit;
}
.tf-trend-icon-svg *{
  stroke:currentColor;
}
.tf-trend-icon-svg [fill]:not([fill="none"]){
  fill:currentColor;
}

.tf-trend-row .summary-label{
  color:#7B8498 !important;
  font-weight:400 !important;
  font-size:13px;
}
.tf-trend-row .summary-value{
  color:#1E3A8A !important;
  font-weight:700 !important;
  font-size:13px;
  text-align:right;
}

:root.dark .tf-repurpose-sidebar-label{
  font-weight:400 !important;
}
:root.dark .tf-trends-card{
  background:#0F172A;
  border-color:rgba(99,102,241,.32);
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
:root.dark .tf-trend-row{
  border-bottom-color:rgba(148,163,184,.22) !important;
}
:root.dark .tf-trend-row .summary-label{
  color:#94A3B8 !important;
}
:root.dark .tf-trend-row .summary-value{
  color:#FFFFFF !important;
}

/* v4.14.88 — Plans & Billing navigation */
.tf-nav-link{
  text-decoration:none;
  box-sizing:border-box;
  cursor:pointer;
}


/* v4.14.89 — requested UI corrections */

/* Monthly Creation Trends: all descriptive labels are grey.
   Indigo/coral is reserved for the corresponding icons only. */
.tf-trend-row .summary-label,
.tf-trend-row:nth-of-type(even) .summary-label,
.summary-item.tf-trend-row:nth-of-type(even) .summary-label{
  color:#7B8498 !important;
  font-weight:400 !important;
}
:root.dark .tf-trend-row .summary-label,
:root.dark .tf-trend-row:nth-of-type(even) .summary-label,
:root.dark .summary-item.tf-trend-row:nth-of-type(even) .summary-label{
  color:#94A3B8 !important;
}

/* Sidebar Resources + User Guide icons: white only in dark mode. */
:root.dark .tf-resources-nav-icon,
:root.dark .tf-user-guide-nav-icon{
  filter:brightness(0) invert(1) !important;
  opacity:1 !important;
}

/* Library Batch-created badge: white icon + text in dark mode. */
:root.dark .tf-batch-created-label{
  color:#FFFFFF !important;
}
:root.dark .tf-batch-created-label img{
  filter:brightness(0) invert(1) !important;
}

/* Library Repurposed-asset badge. */
.tf-repurposed-asset-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  margin:0 0 10px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(30,58,138,.055);
  border:1px solid rgba(30,58,138,.17);
  color:#1E3A8A;
  font-size:11px;
  font-weight:700;
}
.tf-repurposed-asset-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:url("regenerate-2.svg") center/contain no-repeat;
  mask:url("regenerate-2.svg") center/contain no-repeat;
}
:root.dark .tf-repurposed-asset-label{
  color:#FFFFFF;
  background:rgba(99,102,241,.14);
  border-color:rgba(129,140,248,.28);
}

/* v4.14.96 — supplied play.svg for Generate / Regenerate primary action. */
.tf-generate-play-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-block;
  color:currentColor;
  background-color:currentColor;
  -webkit-mask:url("play.svg") center/contain no-repeat;
  mask:url("play.svg") center/contain no-repeat;
}

/* Usage heading: supplied trending-up icon + navy/white theme. */
.sidebar-usage-heading{
  display:flex;
  align-items:center;
  gap:7px;
  color:#1E3A8A;
}
.tf-usage-heading-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:url("trending-up.svg") center/contain no-repeat;
  mask:url("trending-up.svg") center/contain no-repeat;
}
:root.dark .sidebar-usage-heading{
  color:#FFFFFF;
}

.tf-generate-label{display:inline-block;line-height:1.25}

/* =========================================================
   v4.15.00 — Commercial launch UI/UX consolidation
   ========================================================= */

/* Commercial navigation grouping */
.tf-nav-commercial-divider{
  height:1px;
  margin:20px 10px 12px;
  background:var(--border);
}
.tf-upgrade-nav-icon{
  width:19px;height:19px;object-fit:contain;flex:0 0 19px;
}
:root.dark .tf-upgrade-nav-icon{filter:brightness(0) invert(1)}

/* Personalized welcome / account media */
.tf-personalized-welcome{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.tf-welcome-copy{min-width:0;flex:1}
.tf-welcome-profile-card{
  appearance:none;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.12);color:#fff;
  border-radius:14px;padding:10px 13px;min-width:132px;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px rgba(9,30,66,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.tf-welcome-profile-card:hover{background:rgba(255,255,255,.18)}
.tf-welcome-profile-media,.tf-profile-settings-preview{
  width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);flex:0 0 48px;
}
.tf-welcome-profile-media img,.tf-profile-settings-preview img{width:100%;height:100%;object-fit:cover}
.tf-welcome-profile-media span{font-size:25px;font-weight:400;line-height:1}
.tf-welcome-profile-label{font-size:11px;font-weight:800;line-height:1.25;text-align:left}
.tf-profile-settings-row{
  display:flex;align-items:center;gap:18px;padding:16px;border:1px solid var(--border);
  border-radius:14px;background:var(--hover-bg);margin-bottom:18px;
}
.tf-profile-settings-preview{
  width:72px;height:72px;flex-basis:72px;border:1px solid var(--border);background:var(--card);
  color:var(--navy);font-weight:850;font-size:18px;
}
:root.dark .tf-profile-settings-preview{color:#fff}
.tf-profile-settings-controls{display:grid;gap:6px;min-width:0}
.tf-profile-settings-controls p{margin:0;color:var(--muted);font-size:12px}
.tf-profile-settings-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.tf-profile-upload-label{display:inline-flex!important;align-items:center;justify-content:center;cursor:pointer}
#settingsProfileStatus{font-size:11px;color:var(--muted);min-height:16px}

/* Unified retry action using supplied icon */
.tf-generation-retry-btn{
  appearance:none;border:1.5px solid rgba(99,102,241,.30);border-radius:11px;
  min-height:42px;padding:9px 16px;background:rgba(99,102,241,.08);color:var(--navy);
  font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 12px rgba(30,58,138,.08);
}
.tf-generation-retry-btn::before{
  content:"";width:18px;height:18px;display:inline-block;flex:0 0 18px;background:currentColor;
  -webkit-mask:url("retry-generate.svg") center/contain no-repeat;
  mask:url("retry-generate.svg") center/contain no-repeat;
}
.tf-generation-retry-btn:hover{background:rgba(99,102,241,.14)}
:root.dark .tf-generation-retry-btn{color:#fff;background:rgba(99,102,241,.15);border-color:rgba(129,140,248,.4)}

/* Script preview stays directly after the Generate action */
.tf-script-preview-section{
  border:1px solid var(--border);border-radius:14px;background:var(--card);
  padding:14px;margin:0 0 14px;
}
.tf-script-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.tf-script-preview-head h3{margin:2px 0 0;color:var(--navy);font-size:16px}
.tf-preview-eyebrow{font-size:9px;letter-spacing:.09em;font-weight:850;color:var(--muted)}
.tf-script-preview-body[hidden]{display:none!important}
.tf-script-preview-section.collapsed .tf-script-preview-head{margin-bottom:0}
.tf-script-preview-toggle{min-width:112px}
:root.dark .tf-script-preview-head h3{color:#fff}

/* Batch Studio search + multi-delete — mirrors Content Library controls */
.tf-batch-filter-row{display:flex;gap:10px;margin:18px 0 12px;flex-wrap:wrap;align-items:center}
.tf-batch-search-wrap{flex:1 1 280px;min-width:200px;position:relative}
.tf-batch-search-wrap input{width:100%;min-width:200px;height:42px;padding:10px 12px 10px 36px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:14px}
.tf-batch-search-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tf-batch-filter-row select,.tf-batch-clear-filters{height:42px;padding:10px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:13px}
.tf-batch-clear-filters{padding:10px 14px;cursor:pointer;white-space:nowrap}
.tf-batch-clear-filters:hover{border-color:var(--indigo);color:var(--indigo)}
.tf-batch-library-controls{margin-bottom:16px}
#batchStudioMultiActions[hidden]{display:none!important}
#batchStudioSelectedCount{font-size:13px;font-weight:500;color:var(--text-muted)}
.tf-batch-folder-card{position:relative}
.tf-batch-folder-card.multi-select-mode{padding-left:44px}
.tf-batch-folder-select{position:absolute;top:17px;left:15px;width:18px;height:18px;accent-color:var(--indigo)}
.tf-batch-folder-card.selected{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.10)}
.tf-batch-delete-selected{color:#b42318!important}

/* Batch/Repurpose origin labels share one visual language */
.tf-batch-created-label,.tf-repurposed-asset-label{
  display:inline-flex!important;align-items:center!important;gap:6px!important;width:max-content!important;
  margin:0 0 10px!important;padding:5px 8px!important;border-radius:999px!important;
  background:rgba(30,58,138,.055)!important;border:1px solid rgba(30,58,138,.17)!important;
  color:#1E3A8A!important;font-size:11px!important;font-weight:700!important;
}
.tf-batch-created-label img{filter:brightness(0) saturate(100%) invert(18%) sepia(44%) saturate(2814%) hue-rotate(209deg) brightness(83%) contrast(93%)}
:root.dark .tf-batch-created-label,:root.dark .tf-repurposed-asset-label{
  color:#fff!important;background:rgba(99,102,241,.14)!important;border-color:rgba(129,140,248,.28)!important;
}
:root.dark .tf-batch-created-label img{filter:brightness(0) invert(1)!important}

/* Repurpose option cards — same icons as asset sidebar */
.tf-repurpose-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tf-repurpose-menu-item{
  position:relative;grid-template-columns:34px minmax(0,1fr);column-gap:10px;row-gap:3px;
  align-items:center;padding:13px 14px!important;background:#fff!important;color:#0F172A!important;
}
.tf-repurpose-menu-icon{
  grid-row:1 / span 2;width:28px;height:28px;border-radius:9px;display:inline-block;
  background-color:var(--navy);
  -webkit-mask:var(--tf-repurpose-menu-icon) center/20px 20px no-repeat;
  mask:var(--tf-repurpose-menu-icon) center/20px 20px no-repeat;
}
.tf-repurpose-menu-item strong,.tf-repurpose-menu-item span{grid-column:2}
.tf-repurpose-content-title{display:flex!important;align-items:center;gap:9px}
.tf-repurpose-content-title::before{
  content:"";width:21px;height:21px;display:inline-block;background:var(--navy);flex:0 0 21px;
  -webkit-mask:url("regenerate-2.svg") center/contain no-repeat;
  mask:url("regenerate-2.svg") center/contain no-repeat;
}
.tf-repurpose-generate-btn{gap:8px!important}
.tf-repurpose-generate-btn::before{
  content:"";width:18px;height:18px;display:inline-block;flex:0 0 18px;background:currentColor;
  -webkit-mask:url("play.svg") center/contain no-repeat;
  mask:url("play.svg") center/contain no-repeat;
}
:root.dark .tf-repurpose-menu-item{background:#1E293B!important;color:#F1F5F9!important;border-color:#334155!important}
:root.dark .tf-repurpose-menu-icon,:root.dark .tf-repurpose-content-title::before{background:#fff}
:root.dark .tf-repurpose-menu-item strong{color:#fff!important}

@media(max-width:760px){
  .tf-personalized-welcome{align-items:flex-start}
  .tf-welcome-profile-card{min-width:auto;flex-direction:column;padding:8px}
  .tf-welcome-profile-label{display:none}
  .tf-profile-settings-row{align-items:flex-start}
  .tf-repurpose-menu{grid-template-columns:1fr}
  .tf-batch-filter-row{align-items:stretch}
  .tf-batch-search-wrap,.tf-batch-filter-row select,.tf-batch-clear-filters,.tf-batch-multiselect{width:100%}
}


/* v4.15.01 — commercial RC2 navigation/profile polish */
.sidebar .nav-btn{font-family:inherit!important;font-size:13px!important;line-height:1.25!important}
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])){min-width:82px;padding:8px;justify-content:center}
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])) .tf-welcome-profile-label{display:none!important}
.tf-welcome-profile-media{width:64px;height:64px;flex:0 0 64px}
.tf-welcome-profile-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.tf-welcome-profile-media{width:58px;height:58px;flex-basis:58px}}

/* v4.15.03 — final launch UI corrections */
.tf-batch-search-wrap input,.tf-batch-filter-row select,.tf-batch-clear-filters{background:#fff!important;color:#0F172A!important;border-color:#D7DDEA!important}
.tf-batch-search-wrap input::placeholder{color:#64748B!important}
.tf-batch-search-wrap .search-icon{color:#64748B!important}
:root.dark .tf-batch-search-wrap input,:root.dark .tf-batch-filter-row select,:root.dark .tf-batch-clear-filters{background:#fff!important;color:#0F172A!important;border-color:#D7DDEA!important}

:root.dark .tf-beta-feedback-form label{color:#fff!important}
:root.dark .future-modal-card>p{color:#E2E8F0!important}
:root.dark .tf-beta-feedback-form label span{color:#CBD5E1!important}

/* Larger main Repurpose action and plan-lock state. */
#c-repurpose{font-size:16px!important;font-weight:800!important;gap:10px!important;min-height:56px!important}
#c-repurpose>svg{width:23px!important;height:23px!important}
.tf-repurpose-plan-lock{width:21px;height:21px;position:absolute;right:16px;object-fit:contain;filter:brightness(0) saturate(100%) invert(23%) sepia(92%) saturate(3190%) hue-rotate(349deg) brightness(86%) contrast(102%)}
:root.dark .tf-repurpose-plan-lock{filter:brightness(0) saturate(100%) invert(42%) sepia(97%) saturate(3075%) hue-rotate(340deg) brightness(105%) contrast(102%)}

/* Commercial navigation/action icons: navy in light mode, white in dark mode. */
.tf-upgrade-nav-icon,.tf-billing-info-icon img{filter:brightness(0) saturate(100%) invert(19%) sepia(48%) saturate(2559%) hue-rotate(207deg) brightness(81%) contrast(97%)}
:root.dark .tf-upgrade-nav-icon,:root.dark .tf-billing-info-icon img{filter:brightness(0) invert(1)!important}

/* v4.15.04 — RC5 interaction polish */
.tf-generate-retry-icon,.tf-retry-icon-button::before{content:"";width:18px;height:18px;flex:0 0 18px;display:inline-block;background:currentColor;-webkit-mask:url("retry-generate.svg") center/contain no-repeat;mask:url("retry-generate.svg") center/contain no-repeat}
.tf-retry-icon-button{display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.tf-repurpose-generate-btn.tf-retry-icon-button::before{-webkit-mask:url("retry-generate.svg") center/contain no-repeat!important;mask:url("retry-generate.svg") center/contain no-repeat!important}
.tf-repurpose-asset-actions .lib-btn,.tf-repurpose-sidebar-action{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease}
.tf-repurpose-asset-actions .lib-btn:hover:not(.tf-repurpose-delete),.tf-repurpose-sidebar-action:hover:not(.delete){color:var(--navy)!important;border-color:rgba(30,58,138,.38)!important;background:rgba(30,58,138,.07)!important;box-shadow:0 0 0 2px rgba(30,58,138,.06),0 7px 18px rgba(30,58,138,.10)!important;transform:translateY(-1px)}
.tf-repurpose-asset-actions .lib-btn:active:not(.tf-repurpose-delete),.tf-repurpose-sidebar-action:active:not(.delete){transform:translateY(0);background:rgba(30,58,138,.12)!important}
.tf-repurpose-delete:hover,.tf-repurpose-delete:active,.tf-repurpose-sidebar-action.delete:hover,.tf-repurpose-sidebar-action.delete:active{color:#B42318!important;border-color:#EF4444!important;background:rgba(239,68,68,.09)!important;box-shadow:0 0 0 3px rgba(239,68,68,.09),0 7px 18px rgba(239,68,68,.12)!important}
.tf-action-confirmed{border-color:rgba(5,150,105,.45)!important;background:rgba(5,150,105,.09)!important;color:#047857!important}
:root.dark .tf-repurpose-asset-actions .lib-btn:hover:not(.tf-repurpose-delete),:root.dark .tf-repurpose-sidebar-action:hover:not(.delete){color:#fff!important;border-color:rgba(255,255,255,.42)!important;background:rgba(255,255,255,.09)!important;box-shadow:0 0 0 2px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.18)!important}
:root.dark .tf-repurpose-delete:hover,:root.dark .tf-repurpose-delete:active,:root.dark .tf-repurpose-sidebar-action.delete:hover,:root.dark .tf-repurpose-sidebar-action.delete:active{color:#FCA5A5!important;border-color:#F87171!important;background:rgba(248,113,113,.12)!important}
:root.dark .tf-action-confirmed{color:#A7F3D0!important;background:rgba(16,185,129,.12)!important;border-color:rgba(167,243,208,.38)!important}

.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])){min-width:88px!important;padding:0!important;border-color:transparent!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])):hover{background:transparent!important;transform:scale(1.025)}
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])) .tf-welcome-profile-media{width:82px!important;height:82px!important;flex:0 0 82px!important;border:none!important;background:transparent!important;border-radius:16px!important;overflow:hidden}
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])) .tf-welcome-profile-media img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:14px}
@media(max-width:700px){.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])) .tf-welcome-profile-media{width:68px!important;height:68px!important;flex-basis:68px!important}}

.tf-script-preview-title{display:flex;align-items:center;gap:8px}
.tf-script-preview-icon{width:22px;height:22px;display:inline-block;flex:0 0 22px;background:var(--navy);-webkit-mask:url("binoculars-2.svg") center/contain no-repeat;mask:url("binoculars-2.svg") center/contain no-repeat}
:root.dark .tf-script-preview-icon{background:#fff}
.tf-social-media-trend-icon,.tf-strategy-platform-icon{display:inline-block!important;background:currentColor;-webkit-mask:url("social-media.svg") center/contain no-repeat;mask:url("social-media.svg") center/contain no-repeat}
.tf-strategy-platform-icon{width:16px;height:16px;flex:0 0 16px;color:inherit}

/* v4.15.05 local RC — profile parity, repurpose buttons, platform icon */
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])){min-width:102px!important}
.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])) .tf-welcome-profile-media{width:96px!important;height:96px!important;flex:0 0 96px!important}
.tf-profile-settings-preview{width:96px!important;height:96px!important;flex:0 0 96px!important;border:0!important;border-radius:14px!important;background:transparent!important;overflow:hidden}
.tf-profile-settings-preview img{object-fit:contain!important;border-radius:14px!important}
.tf-repurpose-sidebar-action:not(.delete){box-shadow:0 0 8px rgba(30,58,138,.14)!important}
:root.dark .tf-repurpose-sidebar-action:not(.delete){box-shadow:0 0 9px rgba(255,255,255,.20)!important}
.tf-repurpose-sidebar-action.delete{box-shadow:0 0 8px rgba(220,38,38,.17)!important}
:root.dark .tf-repurpose-sidebar-action.delete{box-shadow:0 0 9px rgba(248,113,113,.22)!important}
.tf-strategy-platform-icon{width:21px!important;height:21px!important;flex-basis:21px!important}
.tf-social-media-trend-icon{width:20px!important;height:20px!important;flex:0 0 20px!important}
@media(max-width:700px){.tf-welcome-profile-card:has(#welcomeProfileImage:not([hidden])) .tf-welcome-profile-media{width:96px!important;height:96px!important;flex-basis:96px!important}}

/* v4.15.06 — actual icon geometry, crop dialog and resting action glow */
.tf-platform-real-icon{display:inline-block;width:22px;height:22px;flex:0 0 22px;vertical-align:middle;stroke:currentColor!important}
.tf-trend-icon .tf-platform-real-icon{width:22px;height:22px;display:block}
.tf-repurpose-asset-actions .lib-btn:not(.tf-repurpose-delete){box-shadow:0 0 7px rgba(30,58,138,.13)!important}
:root.dark .tf-repurpose-asset-actions .lib-btn:not(.tf-repurpose-delete){box-shadow:0 0 8px rgba(255,255,255,.18)!important}
.tf-repurpose-asset-actions .lib-btn.tf-repurpose-delete{box-shadow:0 0 8px rgba(220,38,38,.15)!important}
.tf-crop-overlay{position:fixed;inset:0;z-index:999999;background:rgba(6,14,35,.75);display:grid;place-items:center;padding:20px}
.tf-crop-dialog{max-width:480px;width:100%;padding:24px;background:var(--card,#fff);color:var(--text,#111);border:1px solid var(--border,#dae0ed);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tf-crop-dialog h3{margin:0 0 8px}.tf-crop-dialog p{font-size:13px;margin:0 0 14px}.tf-crop-dialog canvas{display:block;width:min(100%,400px);height:auto;aspect-ratio:1;touch-action:none;cursor:grab;border:2px solid #6366f1;border-radius:12px;margin:auto}
.tf-crop-dialog label{display:flex;gap:12px;align-items:center;margin-top:16px}.tf-crop-dialog input{flex:1}.tf-crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}.tf-crop-actions button{padding:10px 14px;border-radius:9px;border:1px solid #6366f1;background:rgba(99,102,241,.12);color:inherit;cursor:pointer}.tf-crop-actions button:last-child{background:#1e3a8a;color:#fff}

/* v4.15.09 local RC9 — visual refinements */
.form-label-icon .tf-platform-real-icon{width:16px!important;height:16px!important;flex:0 0 16px!important;stroke-width:1.65!important}
.tf-script-preview-section{border:1.5px solid #9ac7ff!important;box-shadow:0 0 0 1px rgba(96,165,250,.09)}
:root.dark .tf-script-preview-section{border-color:rgba(255,255,255,.86)!important;box-shadow:0 0 0 1px rgba(255,255,255,.10)}
.tf-repurpose-asset-card{transition:border-color .17s ease,background .17s ease,box-shadow .17s ease,transform .17s ease}
.tf-repurpose-asset-card:hover{border-color:rgba(99,102,241,.45)!important;background:linear-gradient(110deg,rgba(99,102,241,.065),rgba(99,102,241,.025)),var(--card)!important;box-shadow:0 5px 18px rgba(99,102,241,.095)}
:root.dark .tf-repurpose-asset-card:hover{border-color:rgba(165,180,252,.58)!important;background:linear-gradient(110deg,rgba(129,140,248,.15),rgba(129,140,248,.055)),var(--card)!important;box-shadow:0 5px 20px rgba(129,140,248,.12)}

/* RC10 — branded preview border, consistent primary actions, clearly illuminated asset options */
.tf-script-preview-section{border:1.5px solid #1E3A8A!important;box-shadow:0 0 0 1px rgba(30,58,138,.13),0 0 15px rgba(30,58,138,.13)!important}
:root.dark .tf-script-preview-section{border-color:#8295dd!important;box-shadow:0 0 0 1px rgba(165,180,252,.22),0 0 18px rgba(165,180,252,.2)!important}
.tf-repurpose-menu-item:not(.disabled){transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tf-repurpose-menu-item:not(.disabled):hover{background:linear-gradient(110deg,rgba(99,102,241,.17),rgba(129,140,248,.09))!important;border-color:rgba(99,102,241,.78)!important;box-shadow:0 0 0 1px rgba(99,102,241,.22),0 0 19px rgba(99,102,241,.23)!important;transform:translateY(-1px)}
:root.dark .tf-repurpose-menu-item:not(.disabled):hover{background:linear-gradient(110deg,rgba(129,140,248,.3),rgba(99,102,241,.15))!important;border-color:rgba(165,180,252,.88)!important;box-shadow:0 0 0 1px rgba(165,180,252,.28),0 0 22px rgba(129,140,248,.32)!important}
button#gen.btn-primary,#c-repurpose{font-size:14px!important;font-weight:700!important;line-height:1.35!important;gap:9px!important}
button#gen .tf-generate-play-icon,button#gen .tf-generate-retry-icon{width:19px!important;height:19px!important;flex-basis:19px!important}
#c-repurpose>svg{width:19px!important;height:19px!important}

/* RC14: restored icon + title only in clickable Repurpose sidebar assets */
.tf-repurpose-sidebar-pill{grid-template-columns:minmax(0,1fr);min-height:54px;gap:0;}
.tf-repurpose-sidebar-heading{display:flex;align-items:center;gap:11px;min-width:0;}
.tf-repurpose-sidebar-icon{display:inline-block!important;flex:0 0 23px;width:23px;height:23px;background-color:currentColor;opacity:1;}
.tf-repurpose-sidebar-label{font-size:13.5px;line-height:1.3;}
.tf-repurpose-sidebar-pill .tf-repurpose-sidebar-actions{display:none!important;}


/* RC15: uniform asset-preview actions, without type-specific button expansion. */
.tf-repurpose-asset-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.tf-repurpose-asset-actions .lib-btn {
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 106px!important;
  width:106px!important;
  min-width:106px!important;
  max-width:106px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 7px!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  text-align:center;
}
.tf-repurpose-asset-actions .lib-btn.tf-retry-icon-button {
  gap:5px!important;
}
.tf-repurpose-asset-actions .lib-btn.tf-retry-icon-button::before {
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
}
/* RC15: a visibly illuminated, keyboard-accessible sidebar tile in both themes. */
.tf-repurpose-sidebar-pill {
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}
.tf-repurpose-sidebar-pill:hover,
.tf-repurpose-sidebar-pill:focus-visible {
  border-color:rgba(30,58,138,.88)!important;
  background:linear-gradient(120deg,rgba(99,102,241,.10),rgba(255,255,255,.96))!important;
  box-shadow:0 0 0 1px rgba(30,58,138,.22),0 0 16px rgba(99,102,241,.32),0 8px 22px rgba(30,58,138,.16)!important;
  transform:translateY(-1px);
}
:root.dark .tf-repurpose-sidebar-pill:hover,
:root.dark .tf-repurpose-sidebar-pill:focus-visible {
  border-color:rgba(240,245,255,.94)!important;
  background:linear-gradient(120deg,rgba(99,102,241,.27),rgba(24,38,75,.90))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.20),0 0 17px rgba(255,255,255,.26),0 0 24px rgba(129,140,248,.25)!important;
}
@media (prefers-reduced-motion:reduce) {
  .tf-repurpose-sidebar-pill:hover,.tf-repurpose-sidebar-pill:focus-visible{transform:none}
}

/* TeacherFly Track A/B worksheet control: compact with adjacent Yes/No, both themes */
.tf-worksheet-picker{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-wrap:wrap;margin:-12px 0 17px;min-height:25px;color:var(--navy,var(--text));font-size:12px}
.tf-worksheet-icon{height:16px;width:16px;object-fit:contain;flex:0 0 16px}
.tf-worksheet-caption{font-weight:650;white-space:nowrap}
.tf-worksheet-choices{display:inline-flex;align-items:center;gap:5px;margin-left:9px}
.tf-worksheet-choices label{cursor:pointer;position:relative;font-size:12px}
.tf-worksheet-choices input{position:absolute;opacity:0;width:1px;height:1px}
.tf-worksheet-choices span{display:inline-block;padding:5px 12px;border:1px solid var(--border);border-radius:15px;background:var(--card);font-weight:600;color:var(--muted)}
.tf-worksheet-choices input:checked+span{border-color:var(--indigo,#6366f1);color:var(--indigo,#6366f1);box-shadow:0 0 0 1px rgba(99,102,241,.12);background:var(--card)}
.tf-worksheet-choices input:focus-visible+span{outline:2px solid var(--indigo,#6366f1);outline-offset:2px}
.tf-worksheet-library-label{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;color:var(--muted);margin-top:6px}
.tf-worksheet-library-label img{height:14px;width:14px;object-fit:contain}

/* RC18: Buy Top-up Credits treatment belongs to the LABEL only.
   The Yes/No radios retain their original Track A/B styling and states. */
.tf-worksheet-label-pill{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 11px;border-radius:12px;
  background:linear-gradient(135deg,#3157a4,#1e3a8a);
  border:1px solid #7188cb;color:#fff;
  box-shadow:0 1px 5px rgba(30,58,138,.2);
  font-size:12px;line-height:16px;font-weight:700;
}
.tf-worksheet-label-pill .tf-worksheet-caption{color:inherit;font-weight:700}
.tf-worksheet-label-pill .tf-worksheet-icon{height:16px;width:16px;flex:0 0 16px;filter:brightness(0) invert(1)}
:root.dark .tf-worksheet-label-pill{
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(213,225,245,.92));
  border-color:rgba(255,255,255,.65);color:#1e3a8a;
  box-shadow:0 1px 6px rgba(255,255,255,.12);
}
:root.dark .tf-worksheet-label-pill .tf-worksheet-icon{
  filter:brightness(0) saturate(100%) invert(18%) sepia(44%) saturate(2814%) hue-rotate(209deg) brightness(83%) contrast(93%);
}
.tf-worksheet-choices{margin-left:3px;gap:5px}
/* Match the existing Batch created / Repurposed asset badges, including dark-mode icon. */
.tf-worksheet-library-label.tf-batch-created-label{display:inline-flex!important;align-items:center!important;gap:6px!important;width:max-content!important;margin:0 0 10px!important;padding:5px 8px!important;border-radius:999px!important;background:rgba(30,58,138,.055)!important;border:1px solid rgba(30,58,138,.17)!important;color:#1e3a8a!important;font-size:11px!important;font-weight:700!important}
.tf-worksheet-library-label img{width:14px!important;height:14px!important;object-fit:contain;filter:brightness(0) saturate(100%) invert(18%) sepia(44%) saturate(2814%) hue-rotate(209deg) brightness(83%) contrast(93%)!important}
:root.dark .tf-worksheet-library-label.tf-batch-created-label{background:rgba(99,102,241,.14)!important;border-color:rgba(129,140,248,.28)!important;color:#fff!important}
:root.dark .tf-worksheet-library-label img{filter:brightness(0) invert(1)!important}

/* RC19: Homepage mode controls — +6px for icon, text and overall control height. */
.tf-create-mode-picker > .chip {font-size:17px;min-height:38px;padding:9px 15px;gap:9px;}
.tf-create-mode-picker > .chip .nav-icon {width:20px;height:20px;}
/* Keep navy label/icon on light mode for both the active and inactive mode. */
:root:not(.dark) .tf-create-mode-picker > .chip {color:#1e3a8a!important;}
@media(max-width:560px){.tf-create-mode-picker > .chip{font-size:14px;padding:8px 11px}.tf-create-mode-picker > .chip .nav-icon{width:18px;height:18px}}
/* Dark theme: white outlines/glow for both worksheet radio states; state remains distinct. */
:root.dark .tf-worksheet-choices label span {border:1px solid rgba(255,255,255,.64)!important;}
:root.dark .tf-worksheet-choices input:checked + span {border-color:#fff!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 9px rgba(255,255,255,.25)!important;}
:root.dark .tf-worksheet-choices label:hover span,:root.dark .tf-worksheet-choices input:focus-visible+span {border-color:#fff!important;}
/* Batch Studio: explicit navigation context for folders and folder contents. */
.tf-batch-view-heading {font-size:16px;line-height:1.3;font-weight:800;letter-spacing:.06em;color:#ff8a6b;margin:12px 0 14px;}
:root.dark .tf-batch-view-heading {color:#ff8a6b;}
.tf-batch-studio-card:has(#batchFolderDetail:not([style*="display:none"]):not([style*="display: none"])) .tf-batch-folders-heading {display:none;}
/* Batch buttons: same hover/focus treatment irrespective of label length/line wrapping. */
.tf-batch-actions .lib-btn:not(:disabled) {transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.tf-batch-actions .lib-btn:not(:disabled):hover,.tf-batch-actions .lib-btn:not(:disabled):focus-visible {border-color:#6366f1!important;color:#1e3a8a!important;background:rgba(99,102,241,.12)!important;box-shadow:0 0 0 1px rgba(99,102,241,.22),0 0 12px rgba(99,102,241,.32)!important;transform:translateY(-1px);}
:root.dark .tf-batch-actions .lib-btn:not(:disabled):hover,:root.dark .tf-batch-actions .lib-btn:not(:disabled):focus-visible {border-color:#a5b4fc!important;color:#fff!important;background:rgba(99,102,241,.23)!important;box-shadow:0 0 0 1px rgba(165,180,252,.32),0 0 12px rgba(129,140,248,.38)!important;}
.tf-batch-actions .lib-btn.tf-batch-delete-action:not(:disabled):hover,.tf-batch-actions .lib-btn.tf-batch-delete-action:not(:disabled):focus-visible {border-color:#ef4444!important;color:#b91c1c!important;background:rgba(239,68,68,.10)!important;box-shadow:0 0 0 1px rgba(239,68,68,.2),0 0 12px rgba(239,68,68,.28)!important;}
:root.dark .tf-batch-actions .lib-btn.tf-batch-delete-action:not(:disabled):hover,:root.dark .tf-batch-actions .lib-btn.tf-batch-delete-action:not(:disabled):focus-visible {border-color:#f87171!important;color:#fecaca!important;background:rgba(239,68,68,.20)!important;box-shadow:0 0 0 1px rgba(248,113,113,.28),0 0 12px rgba(248,113,113,.3)!important;}
@media(prefers-reduced-motion:reduce){.tf-batch-actions .lib-btn{transition:none!important}.tf-batch-actions .lib-btn:hover{transform:none!important}}

/* RC21: retry limits and scroll target */
.tf-generation-retry-btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;filter:grayscale(.6)}
.tf-retry-limit-message{margin-top:12px;font-size:13px;font-weight:750;color:#b91c1c;line-height:1.5}
:root.dark .tf-retry-limit-message{color:#fca5a5}
#scriptPreviewSection{scroll-margin-top:90px}

/* RC22 optional confirmation preference */
.tf-confirmation-pref{display:flex;align-items:center;gap:12px;font-weight:650;cursor:pointer;padding:12px 0;color:var(--navy)}
.tf-confirmation-pref input{width:18px;height:18px;accent-color:#6366f1;flex-shrink:0}
.dark .tf-confirmation-pref{color:#f4f6ff}

/* RC23: integrated preview icon. No duplicate action buttons. */
.quick-btn{position:relative;padding-right:32px!important;}
.tf-mini-preview{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:25px;height:27px;border:1px solid var(--border);border-radius:7px;background:var(--hover-bg);color:var(--text);cursor:pointer;transition:box-shadow .16s,background .16s;}
.tf-mini-preview img{height:16px;width:16px;object-fit:contain;filter:brightness(.38) saturate(1.6);}
:root.dark .tf-mini-preview{background:#334155;border-color:#64748b;}
:root.dark .tf-mini-preview img{filter:brightness(0) invert(1);}
.tf-mini-preview:hover,.tf-mini-preview:focus-visible{outline:2px solid var(--indigo);outline-offset:1px;box-shadow:0 0 8px rgba(99,102,241,.28)}
.quick-btn:disabled .tf-mini-preview{pointer-events:none;opacity:.32;cursor:not-allowed;}
.tf-asset-preview-scene{display:flex;align-items:flex-start;gap:14px;padding:12px;margin-bottom:8px;}
.tf-asset-preview-icon img{width:24px;height:24px;object-fit:contain;filter:brightness(.4)}
:root.dark .tf-asset-preview-icon img{filter:brightness(0) invert(1)}
.tf-asset-preview-text{flex:1;min-width:0}.tf-asset-preview-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;color:var(--text);font-size:13px}

/* RC24: Match existing script scene treatment: indigo box, left accent, no injected sequence labels. */
.tf-legacy-seo-copy{display:none!important}
#output .tf-asset-preview-scene{border-left:3px solid #6366f1!important;display:flex;align-items:flex-start;gap:12px;padding:14px;margin-bottom:10px}
#output .tf-asset-preview-icon{width:40px!important;height:40px!important;background:rgba(99,102,241,.30)!important;border:1px solid rgba(99,102,241,.65)!important;box-shadow:0 0 14px rgba(99,102,241,.22)!important;border-radius:8px!important}
#output .tf-asset-preview-icon img{width:22px;height:22px;filter:none!important}
:root.dark #output .tf-asset-preview-icon img{filter:brightness(0) invert(1)!important}
#output .tf-asset-preview-text{min-width:0;flex:1}
#output .tf-asset-preview-content{white-space:pre-wrap;line-height:1.62;overflow-wrap:anywhere}
.tf-script-preview-icon.tf-asset-heading-icon{mask:none!important;-webkit-mask:none!important;background:transparent!important;display:inline-flex;align-items:center;justify-content:center}
.tf-asset-heading-icon svg{width:21px;height:21px;color:var(--navy);stroke:currentColor;fill:none}
:root.dark .tf-asset-heading-icon svg{color:#fff}
.tf-asset-heading-icon img{width:21px;height:21px}


/* Independent Worksheet: Repurpose-style action card in the Script Preview header ONLY. */
.tf-script-preview-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;flex:1}
.tf-script-preview-head-actions .tf-script-preview-toggle{flex:0 0 auto}
.tf-ws-preview-control{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  min-width:0;max-width:480px;padding:9px 11px;
  border:1px solid rgba(99,102,241,.27);border-radius:10px;
  background:linear-gradient(105deg,rgba(99,102,241,.07),rgba(30,58,138,.025));
  box-shadow:0 3px 12px rgba(30,58,138,.06);color:var(--navy)
}
.tf-ws-preview-control[hidden],.tf-ws-preview-action[hidden],.tf-ws-preview-spinner[hidden],.tf-ws-preview-message[hidden]{display:none!important}
.tf-ws-preview-summary{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 138px}
.tf-ws-preview-icon{display:flex;align-items:center;justify-content:center;width:31px;height:31px;flex:0 0 31px;border-radius:8px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3)}
.tf-ws-preview-icon img{width:17px;height:17px;object-fit:contain;filter:brightness(0) saturate(100%) invert(19%) sepia(48%) saturate(2559%) hue-rotate(207deg) brightness(81%) contrast(97%)}
.tf-ws-preview-name{font-size:13px;font-weight:750;white-space:nowrap;color:var(--navy)}
.tf-ws-preview-state{font-size:11px;font-weight:800;padding:3px 7px;border-radius:999px;background:rgba(100,116,139,.10);color:#475569;white-space:nowrap}
.tf-ws-preview-control[data-status="ready"] .tf-ws-preview-state{color:#047857;background:rgba(16,185,129,.12)}
.tf-ws-preview-control[data-status="failed"] .tf-ws-preview-state,.tf-ws-preview-control[data-status="unavailable"] .tf-ws-preview-state{color:#dc2626;background:rgba(239,68,68,.09)}
.tf-ws-preview-control[data-status="generating"] .tf-ws-preview-state{color:#4338ca;background:rgba(99,102,241,.10)}
.tf-ws-preview-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.tf-ws-preview-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 12px;border:1px solid rgba(99,102,241,.24);border-radius:9px;background:var(--card);color:var(--navy);font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer;box-shadow:0 0 7px rgba(30,58,138,.09);transition:background .18s,border-color .18s,box-shadow .18s}
.tf-ws-preview-action:hover:not(:disabled),.tf-ws-preview-action:focus-visible{border-color:var(--indigo);background:rgba(99,102,241,.11);box-shadow:0 0 11px rgba(30,58,138,.19)}
.tf-ws-preview-action:disabled{opacity:.46;cursor:not-allowed;box-shadow:none}
.tf-ws-preview-retry::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("retry-generate.svg") center/contain no-repeat;mask:url("retry-generate.svg") center/contain no-repeat}
.tf-ws-preview-message{flex-basis:100%;font-size:11px;font-weight:500;color:var(--muted);line-height:1.35}
.tf-ws-preview-spinner{width:13px;height:13px;flex:0 0 13px;border-radius:50%;border:2px solid rgba(99,102,241,.2);border-top-color:#6366f1;animation:tf-ws-spin .9s linear infinite}
@keyframes tf-ws-spin{to{transform:rotate(360deg)}}
:root.dark .tf-ws-preview-control{background:linear-gradient(105deg,rgba(99,102,241,.17),rgba(255,255,255,.045));border-color:rgba(165,180,252,.3);box-shadow:0 3px 12px rgba(0,0,0,.14)}
:root.dark .tf-ws-preview-name{color:#fff}
:root.dark .tf-ws-preview-icon{border-color:rgba(165,180,252,.4);background:rgba(99,102,241,.28)}
:root.dark .tf-ws-preview-icon img{filter:brightness(0) invert(1)}
:root.dark .tf-ws-preview-state{color:#d1d5db;background:rgba(148,163,184,.2)}
:root.dark .tf-ws-preview-control[data-status="ready"] .tf-ws-preview-state{color:#86efac;background:rgba(16,185,129,.16)}
:root.dark .tf-ws-preview-control[data-status="failed"] .tf-ws-preview-state,:root.dark .tf-ws-preview-control[data-status="unavailable"] .tf-ws-preview-state{color:#fca5a5;background:rgba(239,68,68,.17)}
:root.dark .tf-ws-preview-control[data-status="generating"] .tf-ws-preview-state{color:#c7d2fe;background:rgba(99,102,241,.23)}
:root.dark .tf-ws-preview-action{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.27);box-shadow:0 0 8px rgba(255,255,255,.12)}
:root.dark .tf-ws-preview-action:hover:not(:disabled),:root.dark .tf-ws-preview-action:focus-visible{color:#fff;background:rgba(255,255,255,.13);border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.25)}
@media(max-width:1010px){
 .tf-script-preview-head{flex-wrap:wrap}
 .tf-script-preview-head-actions{flex:1 1 100%;justify-content:space-between}
 .tf-ws-preview-control{max-width:none}
}
@media(max-width:560px){
 .tf-script-preview-head-actions{flex-wrap:wrap}
 .tf-ws-preview-control{width:100%}
 .tf-script-preview-head-actions .tf-script-preview-toggle{margin-left:auto}
 .tf-ws-preview-name{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.tf-ws-preview-spinner{animation:none}}

/* RC22: plan entitlement labels and non-interactive locked appearance, with click-to-upgrade guidance. */
.tf-upgrade-plan-wrap{position:relative;margin-top:12px;padding-top:10px}
.tf-upgrade-plan-wrap #nav-upgrade-topup{position:relative}
.tf-sidebar-plan-label{position:absolute;z-index:2;top:0;left:12px;transform:rotate(-6deg);transform-origin:left center;border-radius:6px 6px 6px 3px;padding:3px 10px;background:#1e3a8a;color:#fff;font-size:10px;line-height:1.25;font-weight:850;letter-spacing:.04em;border:1px solid rgba(99,102,241,.75);box-shadow:0 2px 9px rgba(30,58,138,.23);white-space:nowrap}
.tf-sidebar-plan-label[hidden]{display:none!important}
:root.dark .tf-sidebar-plan-label{background:#fff;color:#1e3a8a;border-color:rgba(99,102,241,.6)}
#modeBatch{position:relative;padding-right:26px!important}
.tf-batch-lock-icon{position:absolute;right:6px;top:3px;width:16px;height:16px;object-fit:contain;filter:brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(3777%) hue-rotate(349deg) brightness(94%) contrast(94%)}
#modeBatch:not(.tf-mode-batch-locked) .tf-batch-lock-icon{display:none}
#modeBatch.tf-mode-batch-locked{opacity:.53!important;filter:grayscale(.65);cursor:not-allowed!important;background:rgba(148,163,184,.11)!important;box-shadow:none!important}
#modeBatch.tf-mode-batch-locked:hover{opacity:.7!important}
#c-repurpose.tf-repurpose-plan-locked{opacity:.52!important;filter:grayscale(.75);cursor:not-allowed!important;background:rgba(148,163,184,.10)!important;border-color:rgba(148,163,184,.35)!important;box-shadow:none!important}
#c-repurpose.tf-repurpose-plan-locked .tf-repurpose-plan-lock{opacity:1!important;filter:brightness(0) saturate(100%) invert(28%) sepia(91%) saturate(3450%) hue-rotate(346deg) brightness(90%) contrast(104%)!important}
:root.dark #c-repurpose.tf-repurpose-plan-locked{color:#cbd5e1!important}
.tf-batch-cancel-btn,.tf-create-single-btn{font-family:inherit;font-size:12px;font-weight:750;border-radius:10px;padding:8px 13px;cursor:pointer;transition:box-shadow .15s ease;}
.tf-batch-cancel-btn{border:1px solid #f87171;background:rgba(254,226,226,.65);color:#991b1b}
.tf-batch-cancel-btn:hover:not(:disabled){box-shadow:0 0 9px rgba(220,38,38,.18)}
.tf-batch-cancel-btn:disabled{opacity:.6;cursor:default}
.tf-create-single-btn{margin-top:13px;border:1px solid #6366f1;background:#eef2ff;color:#1e3a8a}
:root.dark .tf-create-single-btn{background:#3730a3;color:#fff}
:root.dark .tf-batch-cancel-btn{background:rgba(127,29,29,.35);color:#fecaca}
.tf-batch-progress-row[data-state="cancelled"]{border-color:rgba(148,163,184,.5);opacity:.74}
.tf-batch-progress-row[data-state="cancelled"] .tf-batch-progress-status{color:#64748b}

/* v4.15.23 – feature previews, plan badge placement and interactive preference */
.tf-billing-plan-wrap{position:relative;margin-top:19px;padding-top:12px}
.tf-billing-plan-wrap #nav-plans{position:relative}
.tf-upgrade-plan-wrap{margin-top:4px;padding-top:0}
.tf-nav-feature-lock{width:15px;height:15px;margin-left:6px;object-fit:contain;filter:brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(3728%) hue-rotate(347deg) brightness(94%) contrast(102%)}
#nav-batch.tf-locked-nav{opacity:.57;background:rgba(148,163,184,.10)!important;filter:grayscale(.36);cursor:pointer}
#nav-batch.tf-locked-nav:hover{opacity:.8}
#nav-batch.tf-locked-nav .tf-nav-feature-lock{filter:brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(3728%) hue-rotate(347deg) brightness(94%) contrast(102%)}
.tf-locked-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.tf-locked-feature-card{padding:16px 14px;border:1px solid rgba(99,102,241,.3);border-radius:12px;background:rgba(99,102,241,.04);display:flex;flex-direction:column;gap:7px}
.tf-locked-feature-card strong{font-size:13px;color:var(--navy)}
.tf-locked-feature-card span{font-size:12px;line-height:1.5;color:var(--muted)}
.tf-preview-only-item{cursor:default!important;pointer-events:none}
.tf-locked-repurpose-grid .tf-preview-only-item strong{font-size:13px}
.tf-feature-preview-bottom{margin-top:18px;display:flex;gap:15px;align-items:center;justify-content:space-between;border-top:1px solid rgba(99,102,241,.17);padding-top:16px;flex-wrap:wrap}
.tf-feature-preview-bottom p{font-size:12px;line-height:1.5;color:var(--muted);margin:0;max-width:440px}
.tf-feature-upgrade-btn{border:1px solid #6366f1;border-radius:10px;background:linear-gradient(120deg,#1e3a8a,#6366f1);padding:10px 18px;color:#fff;font-weight:750;font-family:inherit;cursor:pointer;box-shadow:0 0 13px rgba(99,102,241,.12)}
.tf-feature-upgrade-btn:hover{box-shadow:0 0 19px rgba(99,102,241,.32)}
.tf-optional-popup-radio-group{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:12px 0}
.tf-optional-popup-radio-group label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14px}
.tf-muted-inline{color:var(--muted);font-weight:400}
.tf-popup-example-btn{padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--navy);cursor:pointer;font-size:12px}
.tf-optional-message-modal:not([hidden]){position:fixed;inset:0;z-index:6000;display:grid;place-items:center;background:rgba(15,23,42,.58);padding:20px}
.tf-optional-message-modal[hidden]{display:none!important}
.tf-optional-message-card{width:min(440px,100%);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 15px 60px rgba(15,23,42,.23);display:flex;flex-direction:column;gap:14px}
.tf-optional-message-card h3{color:var(--navy);font-size:18px;margin:0}
.tf-optional-message-card p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}
.tf-optional-message-never{font-size:12px;color:var(--text);display:flex;gap:8px;align-items:center;cursor:pointer}
.tf-optional-message-card .tf-feature-upgrade-btn{align-self:flex-end;min-width:85px}
:root.dark .tf-locked-feature-card strong,:root.dark .tf-optional-message-card h3{color:#e2e8f0}
@media(max-width:640px){.tf-locked-feature-grid{grid-template-columns:1fr}.tf-feature-preview-bottom{align-items:stretch}.tf-feature-preview-bottom .tf-feature-upgrade-btn{width:100%}}

/* Preserve vivid red lock color on greyed-out locked controls */
#modeBatch.tf-mode-batch-locked,#c-repurpose.tf-repurpose-plan-locked,#nav-batch.tf-locked-nav{filter:none!important;color:#8190a7!important}
#modeBatch.tf-mode-batch-locked .tf-batch-lock-icon,#c-repurpose.tf-repurpose-plan-locked .tf-repurpose-plan-lock,#nav-batch.tf-locked-nav .tf-nav-feature-lock{filter:brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(4707%) hue-rotate(355deg) brightness(100%) contrast(104%)!important;opacity:1!important}

.tf-feature-preview-never{margin-top:14px;max-width:max-content}


/* v4.15.24 — Focused primary actions: 30% narrower, same responsive layout. */
button#gen.btn-primary,
button#c-repurpose.repurpose-preview-bar {
  width:70% !important;
  max-width:70% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border:1.5px solid rgba(30,58,138,.66) !important;
  border-style:solid !important;
  border-radius:13px !important;
  box-shadow:0 0 0 1px rgba(30,58,138,.12),0 0 14px rgba(30,58,138,.28),0 5px 12px rgba(30,58,138,.08) !important;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease,background .18s ease !important;
}
button#gen.btn-primary:hover:not(:disabled),
button#c-repurpose.repurpose-preview-bar:hover:not(.tf-repurpose-plan-locked) {
  border-color:rgba(30,58,138,.95) !important;
  box-shadow:0 0 0 1px rgba(30,58,138,.24),0 0 23px rgba(30,58,138,.45),0 6px 15px rgba(30,58,138,.12) !important;
  transform:translateY(-1px);
}
:root.dark button#gen.btn-primary,
:root.dark button#c-repurpose.repurpose-preview-bar {
  border-color:rgba(255,255,255,.76) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.20),0 0 16px rgba(255,255,255,.25),0 5px 12px rgba(255,255,255,.055) !important;
}
:root.dark button#gen.btn-primary:hover:not(:disabled),
:root.dark button#c-repurpose.repurpose-preview-bar:hover:not(.tf-repurpose-plan-locked) {
  border-color:#fff !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 25px rgba(255,255,255,.39) !important;
}
/* Locked Repurpose remains subdued and does not suggest an available action. */
button#c-repurpose.tf-repurpose-plan-locked,
:root.dark button#c-repurpose.tf-repurpose-plan-locked {
  border-color:rgba(148,163,184,.45) !important;
  box-shadow:none !important;
  transform:none !important;
}
/* Display the same eight option tiles as the standard Repurpose modal. */
.tf-locked-repurpose-grid .tf-preview-only-item{
  border-color:rgba(99,102,241,.53) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.07);
  min-height:90px;
  cursor:default !important;
}
:root.dark .tf-locked-repurpose-grid .tf-preview-only-item{
  border-color:rgba(165,180,252,.60) !important;
  box-shadow:0 0 0 3px rgba(165,180,252,.09);
}
@media(max-width:640px){
  button#gen.btn-primary,button#c-repurpose.repurpose-preview-bar{width:100% !important;max-width:100% !important;}
}
@media(prefers-reduced-motion:reduce){
  button#gen.btn-primary,button#c-repurpose.repurpose-preview-bar{transition:none!important;}
}

/* RC25 — Account optional-message testing + visible Batch retry */
.tf-optional-popup-test-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0}
.tf-batch-retry-progress .tf-batch-progress-head{font-weight:750;color:var(--navy);padding:8px 0}
.tf-batch-retry-explanation{font-size:13px;color:var(--muted);margin:2px 0 12px}
.tf-batch-retry-view-folder{margin:12px 0 2px;padding:9px 14px;border:1px solid #6366f1;border-radius:9px;background:var(--card);color:var(--navy);cursor:pointer;font-weight:700}
.tf-batch-retry-view-folder:hover{box-shadow:0 0 12px rgba(99,102,241,.25)}
:root.dark .tf-batch-retry-progress .tf-batch-progress-head,:root.dark .tf-batch-retry-view-folder{color:#e2e8f0}

/* Phase 2 commercial readiness: resource-library paid gates */
.tf-resource-paid-category{position:relative;padding-right:44px!important}
.tf-resource-paid-lock{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:0;background:transparent;pointer-events:none}
.tf-resource-paid-lock-icon{width:16px;height:16px;display:block;object-fit:contain;filter:brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(4707%) hue-rotate(355deg) brightness(100%) contrast(104%)}
.tf-resource-gate-overlay{position:fixed;inset:0;z-index:100100;background:rgba(12,24,56,.62);display:flex;justify-content:center;align-items:center;padding:20px}
.tf-resource-gate-dialog{width:min(100%,440px);background:#fff;color:#1e3a8a;border:1px solid #a5b4fc;border-radius:16px;box-shadow:0 20px 65px #02061744;padding:25px;line-height:1.5}
.tf-resource-gate-dialog h3{margin:0 0 10px;font-size:20px}.tf-resource-gate-dialog p{margin:0 0 20px;font-size:14px}
.tf-resource-gate-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.tf-resource-gate-actions button,.tf-resource-gate-actions a{border:1px solid #6366f1;border-radius:9px;padding:10px 14px;font-size:13px;font-weight:750;text-decoration:none;cursor:pointer}
.tf-resource-gate-actions button{color:#1e3a8a;background:#fff}.tf-resource-gate-actions a{color:#fff;background:#1e3a8a}
@media(max-width:510px){.tf-resource-paid-category{padding-right:44px!important}.tf-resource-paid-lock{position:absolute;right:16px;top:50%;transform:translateY(-50%)}}


/* Batch retry feedback and high-visibility worksheet selection */
.tf-batch-retry-progress .tf-batch-progress-row[data-state="generating"] {
  border:1px solid #6366f1;background:rgba(99,102,241,.07);
  box-shadow:0 0 0 2px rgba(99,102,241,.08),0 4px 16px rgba(99,102,241,.12);
}
.tf-batch-retry-progress .tf-batch-progress-row[data-state="failed"] {border-left:3px solid #ff8a6b}
.tf-batch-retry-progress .tf-batch-progress-row[data-state="complete"] {border-left:3px solid #16a34a}
.tf-worksheet-choices input[value="true"] + span {
 color:#147d3b !important;border-color:#16a34a !important;
 background:rgba(34,197,94,.08) !important;box-shadow:0 0 8px rgba(22,163,74,.24);
}
.tf-worksheet-choices input[value="false"] + span {
 color:#b42318 !important;border-color:#ef4444 !important;
 background:rgba(239,68,68,.07) !important;box-shadow:0 0 8px rgba(239,68,68,.22);
}
.tf-worksheet-choices input[value="true"]:checked + span {
 color:#fff !important;background:#16803d !important;border-color:#16803d !important;
 box-shadow:0 0 0 1px #16a34a,0 0 13px rgba(34,197,94,.50) !important;
}
.tf-worksheet-choices input[value="false"]:checked + span {
 color:#fff !important;background:#bf2929 !important;border-color:#bf2929 !important;
 box-shadow:0 0 0 1px #ef4444,0 0 13px rgba(239,68,68,.48) !important;
}

/* The selected worksheet choice is visibly colored but remains translucent / glassy. */
.tf-worksheet-choices input[value="true"]:checked + span {
  color:#126932 !important; background:rgba(34,197,94,.16) !important;
  border:1px solid rgba(22,163,74,.68) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 9px rgba(34,197,94,.20) !important;
  backdrop-filter:blur(8px);
}
.tf-worksheet-choices input[value="false"]:checked + span {
  color:#a62626 !important; background:rgba(239,68,68,.13) !important;
  border:1px solid rgba(239,68,68,.62) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 9px rgba(239,68,68,.19) !important;
  backdrop-filter:blur(8px);
}
:root.dark .tf-worksheet-choices input[value="true"]:checked + span {color:#bbf7d0 !important;background:rgba(22,163,74,.25) !important;border-color:#4ade80 !important}
:root.dark .tf-worksheet-choices input[value="false"]:checked + span {color:#fecaca !important;background:rgba(239,68,68,.23) !important;border-color:#f87171 !important}
.tf-settings-password-wrap {position:relative;display:block;width:100%}
.tf-settings-password-wrap input {width:100%;padding-right:44px !important}
.tf-settings-password-wrap .tf-signup-eye {position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--navy,#1e3a8a);display:flex;align-items:center;justify-content:center;width:30px;height:30px;cursor:pointer}
.tf-settings-password-wrap .tf-signup-eye svg[hidden] {display:none !important}
:root.dark .tf-settings-password-wrap .tf-signup-eye {color:#e0e7ff}
.tf-batch-pending-help {font-size:12px;line-height:1.5;color:var(--muted,#64748b);margin:10px 0 0}

/* Clearly differentiated glassy Worksheet toggles */
.tf-worksheet-choices label span{transition:background .15s ease,color .15s ease,box-shadow .15s ease,border-color .15s ease}
.tf-worksheet-choices input[value="true"] + span{background:rgba(22,163,74,.035)!important;color:#65786f!important;border:1px solid rgba(22,163,74,.25)!important;box-shadow:none!important}
.tf-worksheet-choices input[value="false"] + span{background:rgba(220,38,38,.035)!important;color:#856a6a!important;border:1px solid rgba(220,38,38,.25)!important;box-shadow:none!important}
.tf-worksheet-choices input[value="true"]:not(:checked) + span:hover{background:rgba(22,163,74,.16)!important;color:#126f37!important;border-color:#16a34a!important;box-shadow:0 0 8px rgba(22,163,74,.2)!important}
.tf-worksheet-choices input[value="false"]:not(:checked) + span:hover{background:rgba(239,68,68,.16)!important;color:#a51d1d!important;border-color:#ef4444!important;box-shadow:0 0 8px rgba(239,68,68,.2)!important}
.tf-worksheet-choices input[value="true"]:checked + span{background:rgba(22,163,74,.34)!important;color:#075e2b!important;border:2px solid #16a34a!important;font-weight:800!important;box-shadow:0 0 0 1px rgba(22,163,74,.15),0 0 13px rgba(22,163,74,.4)!important}
.tf-worksheet-choices input[value="false"]:checked + span{background:rgba(239,68,68,.34)!important;color:#991b1b!important;border:2px solid #ef4444!important;font-weight:800!important;box-shadow:0 0 0 1px rgba(239,68,68,.15),0 0 13px rgba(239,68,68,.4)!important}
:root.dark .tf-worksheet-choices input[value="true"]:checked + span{color:#dcfce7!important;background:rgba(22,163,74,.40)!important}
:root.dark .tf-worksheet-choices input[value="false"]:checked + span{color:#fee2e2!important;background:rgba(239,68,68,.40)!important}

/* In-folder Batch Studio preview: keep folder cards visible */
.tf-batch-studio-inline-preview{margin:22px 0 6px;padding:18px;border:1px solid #aebcf9;border-radius:16px;background:var(--card,#fff);box-shadow:0 5px 20px rgba(30,58,138,.08)}
.tf-batch-studio-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;color:#1e3a8a;flex-wrap:wrap}
.tf-batch-studio-worksheet-note{padding:12px;margin-top:12px;border-radius:10px;background:rgba(99,102,241,.07);color:#1e3a8a;font-size:13px}

/* Batch-only manual per-pack Worksheet actions */
.tf-batch-studio-worksheet-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px;padding:14px;border:1px solid #c7d2fe;border-radius:12px;background:rgba(99,102,241,.055);color:#1e3a8a}
.tf-batch-studio-worksheet-note .tf-batch-ws-status{font-size:13px;flex:1;min-width:90px}
.tf-batch-studio-worksheet-note .tf-batch-ws-create{border-color:#6366f1}
.tf-batch-ws-content{width:100%;white-space:pre-wrap;line-height:1.55;border-top:1px solid #cbd5e1;padding:14px 2px 3px}
.tf-batch-manual-worksheet-note{font-size:12px;color:#64748b;margin:5px 0 12px}

/* Clear ongoing repurpose activity: animated spinner alongside generating label. */
.tf-repurpose-generate-btn.tf-repurpose-generating::after {
  content:"";display:inline-block;vertical-align:-3px;width:15px;height:15px;
  margin-left:10px;border:2px solid rgba(30,58,138,.22);border-top-color:#1e3a8a;
  border-radius:50%;animation:tf-repurpose-spin .75s linear infinite;
}
@keyframes tf-repurpose-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tf-repurpose-generate-btn.tf-repurpose-generating::after{animation:none;border-top-color:#1e3a8a}}
.tf-batch-complete-worksheet-reminder{font-size:13px;color:#1e3a8a;margin:6px 0 12px;line-height:1.5}
.tf-batch-progress-row[data-state="generating"]{cursor:pointer}
.tf-batch-progress-row[data-state="generating"]:focus-visible{outline:2px solid #6366f1;outline-offset:2px}

/* Y04 controlled baseline: compact Library setting summaries on desktop and mobile */
.tf-library-settings-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:9px 0;font-size:12px;color:var(--navy)}
.tf-library-settings-quick span{min-width:0;overflow-wrap:anywhere;padding:6px 7px;border:1px solid var(--border);border-radius:7px;background:var(--bg,#f3f5f9)}
.tf-library-settings-details{margin:7px 0 9px}
.tf-library-settings-details>summary{cursor:pointer;color:var(--indigo);font-size:12px;font-weight:700;padding:5px 1px;list-style:revert}
.tf-library-settings-details>.lib-summary{margin:8px 0 0}
:root.dark .tf-library-settings-quick{color:var(--text,#f3f5f9)}
@media(max-width:480px){.tf-library-settings-quick{font-size:11px}}

/* Y04 Batch folder preview: paired header actions, no changes to scene/worksheet renderers. */
.tf-batch-studio-preview-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}


/* Y04-07B approved mobile-only polish. This entire block requires a narrow/touch viewport.
   Desktop layout, previews, billing and generation logic remain unchanged. */
@media (max-width: 800px), (max-width: 1200px) and (pointer: coarse) {
  html{scroll-padding-top:82px}
  #createView,.tf-batch-studio-inline-preview,.tf-repurpose-asset-card,#output{scroll-margin-top:86px}

  /* Login: undo the desktop inline/fixed 150px password wrapper. */
  #auth-bar{padding:18px!important;margin:0 0 18px!important}
  #logged-out{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0}
  #logged-out>strong{font-size:17px;line-height:1.4;margin-bottom:2px}
  #logged-out #login-email,
  #logged-out .tf-login-password-wrap,
  #logged-out .tf-login-password-wrap input{box-sizing:border-box!important;display:block;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;flex:1 1 auto!important}
  #logged-out #login-email,
  #logged-out .tf-login-password-wrap input{height:46px!important;padding:10px 46px 10px 13px!important;border-radius:9px!important;font-size:16px!important}
  #logged-out #login-email{padding-right:13px!important}
  #logged-out .tf-login-password-wrap{position:relative;flex:0 0 auto!important;align-items:stretch}
  #logged-out .tf-login-password-wrap .tf-signup-eye{top:50%;right:8px;width:40px;height:40px;color:#1e3a8a}
  #logged-out>button{box-sizing:border-box!important;min-height:46px!important;width:100%!important;margin:0!important;border-radius:9px!important;font-size:15px!important}
  #logged-out .teacherfly-google-signin{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;margin:5px 0 0;min-height:46px}
  #logged-out .auth-legal-note{margin-top:15px;line-height:1.6;text-align:center;font-size:12px}
  #logged-in{min-width:0;line-height:1.5}

  /* Y04-07C: give mobile login actions distinct visual groups without
     touching the desktop inline layout or the Google provider's button. */
  #auth-bar{padding:22px 19px 25px!important}
  #logged-out{gap:13px}
  #logged-out>strong{margin-bottom:5px}
  #logged-out>button[onclick="handleLogin()"]{margin-top:13px!important}
  #logged-out>button#tfOpenSignup{margin-top:4px!important}
  #logged-out .teacherfly-google-signin{margin:18px 0 2px!important}
  #logged-out #auth-status{margin-top:4px!important}
  #logged-out .auth-legal-note{margin-top:20px!important;padding:0 4px;line-height:1.75}

  /* Failed/recovered single packs and independent Worksheet header: actions
     must sit below status, not squeeze or overlap the state label. */
  .tf-script-preview-head{align-items:flex-start;gap:12px}
  .tf-script-preview-head-actions{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px;width:100%;flex:1 1 100%}
  .tf-ws-preview-control{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:none;gap:11px;padding:12px}
  .tf-ws-preview-control[hidden]{display:none!important}
  .tf-ws-preview-summary{display:flex;flex:0 1 auto;min-width:0;flex-wrap:wrap;gap:8px}
  .tf-ws-preview-state{max-width:100%;overflow-wrap:anywhere}
  .tf-ws-preview-actions{width:100%;margin-left:0;display:flex;justify-content:flex-end;gap:9px}
  .tf-ws-preview-actions .tf-ws-preview-action{min-height:40px;padding:8px 14px}
  .tf-ws-preview-message{flex-basis:auto;line-height:1.55}
  .tf-script-preview-head-actions .tf-script-preview-toggle{align-self:flex-end;margin:0!important;min-height:42px}
  #output [data-generation-error]{padding:10px 2px!important;text-align:left!important;overflow-wrap:anywhere}
  #output [data-generation-error] > div:first-child{font-size:17px;line-height:1.4}
  #output [data-generation-error] small{line-height:1.65}

  /* Settings accordion: one aligned title/trigger row, without the stray 0. marker. */
  #settingsBar.tf-mobile-summary{padding:0!important;min-width:0;overflow:hidden}
  #settingsBar.tf-mobile-summary .tf-ready-toggle{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:13px 15px;background:transparent;border:0;color:var(--text);font:inherit;font-size:14px;font-weight:750;line-height:1.35;text-align:left;cursor:pointer}
  #settingsBar.tf-mobile-summary .tf-ready-toggle>span:first-child{flex:1;min-width:0;overflow-wrap:break-word}
  #settingsBar.tf-mobile-summary .tf-ready-toggle .tf-ready-action{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--indigo);font-size:12px}
  #settingsBar.tf-mobile-summary .tf-ready-content{padding:0 15px 14px}
  #settingsBar.tf-mobile-summary.tf-summary-collapsed .tf-ready-content{display:none!important}
  #settingsBar.tf-mobile-summary .tf-ready-toggle:focus-visible{outline:2px solid var(--indigo);outline-offset:-3px;border-radius:10px}

  /* Batch Studio filters remain desktop-only; existing mobile completion is preserved. */
  #batchView .tf-batch-filter-row{display:none!important}

  /* Mobile Copy options: same files as Download (except ZIP), with independent eye previews. */
  #tfCopySheet .tf-sheet-copy-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:stretch;gap:8px;min-width:0}
  #tfCopySheet .tf-sheet-copy-row>button:first-child{min-width:0;display:flex;align-items:center;padding-left:14px}
  #tfCopySheet .tf-sheet-preview-eye{display:flex;align-items:center;justify-content:center;padding:9px;min-width:46px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--navy)}
  #tfCopySheet .tf-sheet-preview-eye img{width:21px;height:21px;object-fit:contain}
  :root.dark #tfCopySheet .tf-sheet-preview-eye img{filter:brightness(0) invert(1)}
  #tfCopySheet .tf-sheet-copy-row>button:disabled{opacity:.42;cursor:not-allowed}
  .tf-action-sheet-panel{box-sizing:border-box;max-height:min(86dvh,820px);overscroll-behavior:contain;overflow-y:auto;overflow-x:hidden}
  .tf-action-sheet-header{position:sticky;top:-10px;z-index:1;background:var(--card);padding:5px 0 9px}
  .tf-action-sheet-cancel{min-height:48px}
  /* Duplicate desktop quick-copy row is hidden in the mobile shell already. */
  #scriptPreviewBody .quick-copy-actions{display:none!important}

  /* Repurpose: title/date are full width, buttons wrap BELOW, never squeeze the title. */
  .tf-repurpose-asset-card .tf-repurpose-asset-card-head,
  .tf-repurpose-asset-card.collapsed .tf-repurpose-asset-card-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px;min-width:0}
  .tf-repurpose-asset-card .tf-repurpose-asset-title-wrap{display:block;min-width:0!important;max-width:100%;width:100%;flex:none!important;overflow-wrap:break-word;word-break:normal}
  .tf-repurpose-asset-title-wrap strong{overflow-wrap:break-word!important;word-break:normal;line-height:1.45}
  .tf-repurpose-asset-card .tf-repurpose-asset-actions{display:flex;justify-content:flex-start;align-items:center;gap:7px;width:100%;min-width:0;flex-wrap:wrap}
  .tf-repurpose-asset-card .tf-repurpose-asset-actions .lib-btn{width:auto!important;min-width:80px!important;max-width:100%!important;flex:1 1 82px!important;min-height:42px!important;height:auto!important;padding:8px 9px!important;white-space:normal!important}

  /* Batch folder preview: title on its own row, two buttons together. */
  .tf-batch-studio-preview-head{display:flex!important;flex-direction:column;align-items:stretch!important;gap:12px;min-width:0}
  .tf-batch-studio-preview-head>strong{display:block;max-width:100%;overflow-wrap:break-word;line-height:1.45}
  .tf-batch-studio-preview-actions{display:flex;justify-content:flex-start;align-items:center;gap:9px;flex-wrap:wrap;width:100%}
  .tf-batch-studio-preview-actions .tf-batch-mini-btn{min-height:42px;white-space:normal}

  /* Worksheet colored Yes/No buttons use approved green/red desktop semantics. */
  .tf-worksheet-choices{gap:8px!important;margin-left:6px}
  .tf-worksheet-choices input[value="true"]+span{color:#16733e!important;background:rgba(22,163,74,.08)!important;border:1.5px solid #86cda1!important}
  .tf-worksheet-choices input[value="false"]+span{color:#ae3030!important;background:rgba(239,68,68,.07)!important;border:1.5px solid #ef9d9d!important}
  .tf-worksheet-choices input[value="true"]:checked+span{color:#075e2b!important;background:rgba(22,163,74,.34)!important;border:2px solid #16a34a!important;box-shadow:0 0 0 1px rgba(22,163,74,.14),0 0 10px rgba(22,163,74,.3)!important}
  .tf-worksheet-choices input[value="false"]:checked+span{color:#991b1b!important;background:rgba(239,68,68,.34)!important;border:2px solid #ef4444!important;box-shadow:0 0 0 1px rgba(239,68,68,.14),0 0 10px rgba(239,68,68,.3)!important}
  :root.dark .tf-worksheet-choices input[value="true"]:checked+span{color:#dcfce7!important;background:rgba(22,163,74,.4)!important}
  :root.dark .tf-worksheet-choices input[value="false"]:checked+span{color:#fee2e2!important;background:rgba(239,68,68,.4)!important}
  #logged-out button,#tfCopySheet button,.tf-batch-studio-preview-actions button{touch-action:manipulation}

  /* Compact landscape suggestion, not an orientation lock. */
  #tfMobileLandscapeHint{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:4250;box-sizing:border-box;max-width:460px;margin:0 auto;padding:14px;border:1px solid rgba(99,102,241,.32);border-radius:15px;background:var(--card);color:var(--text);box-shadow:0 12px 45px rgba(15,23,42,.22);font-size:12px;line-height:1.4}
  #tfMobileLandscapeHint[hidden]{display:none!important}
  #tfMobileLandscapeHint .tf-orientation-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
  #tfMobileLandscapeHint button{min-height:40px;border:1px solid var(--border);border-radius:9px;padding:8px 11px;background:var(--card);color:var(--text);font-weight:650}
}
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .tf-responsive-appbar{height:50px;padding:5px 12px}
  .app,.app.create-active,.app:not(.create-active){padding-top:50px}
  .tf-action-sheet-panel{max-height:92dvh}
  .tf-batch-studio-preview-actions{flex-direction:row}
  #auth-bar{max-width:740px;margin-inline:auto!important}
}

/* Y04-07 RC2: Mobile saved-pack Repurpose action is available and spaced. */
@media (max-width:800px), (max-width:1200px) and (pointer:coarse) {
  #outcard > #c-repurpose.repurpose-preview-bar {
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-height:48px;
    margin:16px auto 20px!important;
    justify-content:center;
    align-items:center;
    gap:10px;
  }
}