/* 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-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-section-grid>div{padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--hover-bg);font-size:12px;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)}
.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}
}