/* ===== Reset & Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a2e;
  background: #f7f7fb;
  line-height: 1.6;
}
a { color: #5b4bdb; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 480px; padding-top: 40px; padding-bottom: 40px; }
.center { text-align: center; }

/* ===== Header ===== */
.site-header { background: #fff; border-bottom: 1px solid #e6e6ef; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
.logo { font-size: 1.4rem; font-weight: 700; color: #1a1a2e; }
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: #1a1a2e; font-weight: 500; }
.main-nav form { display: inline; }
.main-nav .nav-logout-button {
  appearance: none; border: 0; background: transparent; color: #1a1a2e;
  cursor: pointer; font: inherit; font-weight: 500; padding: 0;
}
.main-nav .nav-logout-button:hover { color: #5b4bdb; text-decoration: underline; }
.btn-link { background: #5b4bdb; color: #fff !important; padding: 6px 14px; border-radius: 6px; }
.btn-link:hover { background: #4a3bc0; text-decoration: none; }

.search-form { display: flex; gap: 4px; }
.search-form input { padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; }
.search-form button { padding: 6px 12px; border: 1px solid #5b4bdb; background: #5b4bdb; color: #fff; border-radius: 6px; cursor: pointer; }

/* ===== Hero ===== */
.hero { text-align: center; padding: 60px 0 40px; }
.hero h1 { font-size: 2.4rem; margin-bottom: 12px; }
.hero p { color: #555; max-width: 600px; margin: 0 auto 24px; }

/* ===== Buttons ===== */
.btn {
  display: inline-block; padding: 10px 22px; border-radius: 8px;
  border: 1px solid #ccc; background: #fff; color: #1a1a2e; cursor: pointer;
  font-size: 0.95rem; font-weight: 500; text-decoration: none;
}
.btn:hover { background: #f0f0f5; text-decoration: none; }
.btn-primary { background: #5b4bdb; border-color: #5b4bdb; color: #fff; }
.btn-primary:hover { background: #4a3bc0; }

/* ===== Sections / Grid ===== */
.section { padding: 30px 0; }
.section h2 { margin-bottom: 16px; font-size: 1.6rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.card {
  background: #fff; border: 1px solid #eaeaf2; border-radius: 10px;
  overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; color: inherit;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); text-decoration: none; }
.card-thumb { aspect-ratio: 16/10; background: #f0f0f5; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder, .admin-thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #999; font-size: 0.85rem; background: repeating-linear-gradient(45deg, #f0f0f5, #f0f0f5 10px, #e6e6f0 10px, #e6e6f0 20px);
}
.card-body { padding: 12px 14px; }
.card-body h3 { font-size: 1.05rem; margin-bottom: 6px; }

.badge {
  display: inline-block; background: #ece9fb; color: #5b4bdb; font-size: 0.75rem;
  padding: 3px 10px; border-radius: 100px; font-weight: 600;
}

.category-list { display: flex; flex-wrap: wrap; gap: 10px; }
.category-pill {
  background: #fff; border: 1px solid #e0e0ec; padding: 8px 16px; border-radius: 100px; color: #1a1a2e; font-size: 0.9rem;
}
.category-pill:hover { border-color: #5b4bdb; color: #5b4bdb; text-decoration: none; }

/* ===== Breadcrumbs ===== */
.breadcrumbs { margin: 16px 0; font-size: 0.9rem; color: #777; }
.breadcrumbs a { color: #777; }

/* ===== Animation preview ===== */
.animation-preview-wrapper { margin: 20px 0; position: relative; }
.animation-frame {
  width: 100%; height: 600px; border: 1px solid #e0e0ec; border-radius: 10px; background: #fff;
  display: block;
}
@media (max-width: 600px) {
  .animation-frame { height: 480px; }
}
.locked-preview {
  position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #e0e0ec;
  min-height: 300px; display: flex; align-items: center; justify-content: center; background: #1a1a2e;
}
.locked-preview img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; position: absolute; }
.locked-overlay {
  position: relative; z-index: 2; text-align: center; color: #fff; padding: 30px;
}
.locked-overlay p { margin-bottom: 16px; font-size: 1.1rem; }

.animation-description { margin-top: 20px; }

/* ===== Forms ===== */
.form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.form label { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; display: block; }
.form input, .form select, .form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95rem; font-family: inherit;
}
.form textarea { resize: vertical; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
.checkboxes { gap: 24px; align-items: center; }
.checkboxes label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.form-actions { display: flex; gap: 10px; margin-top: 10px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 12px; }
.alert-error { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; }
.alert-success { background: #e8f5e9; color: #1e7d32; border: 1px solid #c2e6c4; }

/* ===== Pricing ===== */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.pricing-card {
  background: #fff; border: 1px solid #eaeaf2; border-radius: 12px; padding: 30px; text-align: center;
}
.pricing-card.featured { border: 2px solid #5b4bdb; transform: scale(1.02); }
.pricing-card h2 { margin-bottom: 10px; }
.pricing-card .price { font-size: 2.2rem; font-weight: 700; margin-bottom: 18px; }
.pricing-card .price span { font-size: 1rem; font-weight: 400; color: #777; }
.pricing-card ul { list-style: none; margin: 0 0 24px; text-align: left; }
.pricing-card ul li { padding: 6px 0; border-bottom: 1px solid #f0f0f5; }
.pricing-footnote { margin-top: 30px; color: #777; font-size: 0.9rem; }
.note { color: #777; font-size: 0.9rem; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid #e6e6ef; margin-top: 60px; padding: 30px 0; color: #777; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-nav { display: flex; gap: 16px; }
.footer-nav a { color: #777; }

/* ===== Admin Layout ===== */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 220px; background: #1a1a2e; color: #fff; padding: 24px 0; flex-shrink: 0;
}
.admin-logo { padding: 0 20px 20px; font-size: 1.2rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px; }
.admin-logo span { font-size: 0.8rem; color: #9b8df6; font-weight: 400; }
.admin-nav { display: flex; flex-direction: column; }
.admin-nav a { color: #ccc; padding: 10px 20px; }
.admin-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.admin-main { flex: 1; padding: 30px 40px; max-width: 1200px; }
.admin-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }

.admin-card { background: #fff; border: 1px solid #eaeaf2; border-radius: 10px; padding: 20px; margin: 16px 0 24px; }
.inline-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.inline-form .form-group { flex: 1; min-width: 160px; margin-bottom: 0; }
.inline-input { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; font-size: 0.85rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 20px 0; }
.stat-card { background: #fff; border: 1px solid #eaeaf2; border-radius: 10px; padding: 18px; }
.stat-card h3 { font-size: 0.85rem; color: #777; margin-bottom: 8px; font-weight: 500; }
.stat-number { font-size: 1.8rem; font-weight: 700; }

.admin-actions { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; margin-top: 10px; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f5; text-align: left; font-size: 0.9rem; }
.admin-table th { background: #f7f7fb; font-weight: 600; }
.admin-thumb { width: 60px; height: 40px; object-fit: cover; border-radius: 4px; }
.admin-thumb-placeholder { width: 60px; height: 40px; border-radius: 4px; font-size: 0.7rem; }

.status-badge { padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
.status-published { background: #e8f5e9; color: #1e7d32; }
.status-draft { background: #f0f0f5; color: #777; }

.actions-cell { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; white-space: nowrap; }
.link-btn { background: none; border: none; color: #5b4bdb; cursor: pointer; padding: 0; font-size: 0.9rem; text-decoration: underline; }
.link-danger { color: #b3261e; }

/* ===== AI Panel ===== */
.ai-panel { background: #f4f2ff; border: 1px solid #d9d3ff; border-radius: 10px; padding: 20px; margin: 16px 0 24px; }
.ai-buttons { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ai-status { margin-top: 10px; font-size: 0.85rem; color: #5b4bdb; min-height: 1.2em; }

/* ===== Code editors / preview ===== */
.code-fieldset, .seo-fieldset { border: 1px solid #eaeaf2; border-radius: 10px; padding: 16px; }
.code-fieldset legend, .seo-fieldset legend { font-weight: 700; padding: 0 6px; }
.code-editor {
  font-family: 'SF Mono', Consolas, Monaco, monospace; font-size: 0.85rem;
  background: #1a1a2e; color: #e6e6f0; border: 1px solid #333;
}
.preview-container { margin-top: 14px; }
.preview-container.large .animation-frame { height: 600px; }
.current-thumb { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.current-thumb img { width: 80px; height: 50px; object-fit: cover; border-radius: 4px; }
.current-thumb label { font-weight: 400; font-size: 0.85rem; }

@media (max-width: 768px) {
  .admin-body { flex-direction: column; }
  .admin-sidebar { width: 100%; }
  .admin-main { padding: 20px; }
}

/* =====================================================================
   ADMIN UI REDESIGN
   ===================================================================== */

:root {
  --admin-bg: #f4f5fb;
  --admin-sidebar-bg: #14142b;
  --admin-accent: #5b4bdb;
  --admin-accent-light: #ece9fb;
  --admin-success: #1e7d32;
  --admin-success-bg: #e8f5e9;
  --admin-warning: #b8860b;
  --admin-warning-bg: #fff7e0;
  --admin-danger: #b3261e;
  --admin-danger-bg: #fdecec;
  --admin-info: #1565c0;
  --admin-info-bg: #e3f2fd;
}

.admin-body { background: var(--admin-bg); }

.admin-sidebar {
  background: linear-gradient(180deg, #1a1a2e 0%, #14142b 100%);
  box-shadow: 2px 0 12px rgba(0,0,0,0.08);
}
.admin-logo {
  display: flex; flex-direction: column; gap: 4px;
}
.admin-nav a {
  border-radius: 8px; margin: 2px 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-weight: 500;
}
.admin-nav a.active, .admin-nav a:hover {
  background: rgba(91, 75, 219, 0.25); color: #fff;
}

.admin-main h1 {
  font-size: 1.8rem; margin-bottom: 18px; color: #14142b;
}
.admin-main h2 { font-size: 1.25rem; margin-bottom: 12px; color: #14142b; }

/* ---- Colorful stat cards ---- */
.stats-grid { gap: 18px; }
.stat-card {
  border: none; border-radius: 14px; padding: 22px;
  box-shadow: 0 2px 10px rgba(20,20,43,0.05);
  position: relative; overflow: hidden; color: #fff;
}
.stat-card h3 { color: rgba(255,255,255,0.85); }
.stat-card .stat-number { color: #fff; }
.stat-card.stat-purple { background: linear-gradient(135deg, #6f5cf0, #5b4bdb); }
.stat-card.stat-green  { background: linear-gradient(135deg, #34c98e, #1e9e6f); }
.stat-card.stat-orange { background: linear-gradient(135deg, #ffb259, #f6862c); }
.stat-card.stat-blue   { background: linear-gradient(135deg, #5aa7ff, #2f7bdb); }
.stat-card.stat-pink   { background: linear-gradient(135deg, #ff7eb6, #f0518f); }
.stat-card.stat-dark   { background: linear-gradient(135deg, #3a3a5c, #20203a); }
.stat-card .stat-icon { font-size: 1.8rem; position: absolute; top: 16px; right: 18px; opacity: 0.35; }

/* ---- Section cards ---- */
.admin-section-card {
  background: #fff; border-radius: 16px; padding: 26px;
  box-shadow: 0 2px 12px rgba(20,20,43,0.05); margin-bottom: 24px;
}
.admin-section-card h2 { display: flex; align-items: center; gap: 10px; }

.admin-card {
  border-radius: 14px; box-shadow: 0 2px 10px rgba(20,20,43,0.05); border: none;
}

/* ---- Quick action tiles ---- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin: 20px 0 28px; }
.quick-action-tile {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  border-radius: 14px; color: #fff; text-decoration: none;
  box-shadow: 0 2px 10px rgba(20,20,43,0.08); transition: transform .15s;
}
.quick-action-tile:hover { transform: translateY(-2px); text-decoration: none; }
.quick-action-tile .qa-icon { font-size: 1.6rem; }
.quick-action-tile .qa-title { font-weight: 700; font-size: 1.05rem; }
.quick-action-tile .qa-desc { font-size: 0.8rem; opacity: 0.9; }
.qa-purple { background: linear-gradient(135deg, #6f5cf0, #5b4bdb); }
.qa-green  { background: linear-gradient(135deg, #34c98e, #1e9e6f); }
.qa-blue   { background: linear-gradient(135deg, #5aa7ff, #2f7bdb); }
.qa-dark   { background: linear-gradient(135deg, #3a3a5c, #20203a); }

/* ---- Tables ---- */
.admin-table { border-radius: 14px; box-shadow: 0 2px 10px rgba(20,20,43,0.05); }
.admin-table th { background: #f0f0fa; color: #46466b; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.admin-table tbody tr:hover { background: #fafaff; }

.status-badge.status-published { background: var(--admin-success-bg); color: var(--admin-success); }
.status-badge.status-draft { background: #f0f0f5; color: #777; }

/* ---- Form sections ---- */
.code-fieldset, .seo-fieldset {
  border-radius: 14px; border: 1px solid #ececf6; background: #fbfbff;
}
.code-fieldset legend, .seo-fieldset legend {
  font-size: 1rem; color: var(--admin-accent);
}

/* ---- Tabs for code mode ---- */
.code-mode-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.code-mode-tab {
  padding: 8px 18px; border-radius: 100px; border: 1px solid #ddd; background: #fff;
  cursor: pointer; font-weight: 600; font-size: 0.85rem; color: #555;
}
.code-mode-tab.active { background: var(--admin-accent); color: #fff; border-color: var(--admin-accent); }
.code-mode-panel { display: none; }
.code-mode-panel.active { display: block; }

/* ---- AI panel redesign ---- */
.ai-panel {
  background: linear-gradient(135deg, #f4f2ff 0%, #ece9fb 100%);
  border: 1px solid #d9d3ff; border-radius: 16px; padding: 24px;
}
.ai-panel h2 { color: var(--admin-accent); }
.ai-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ai-tab {
  padding: 8px 16px; border-radius: 100px; border: 1px solid #d9d3ff; background: #fff;
  cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--admin-accent);
}
.ai-tab.active { background: var(--admin-accent); color: #fff; }
.ai-tab-panel { display: none; }
.ai-tab-panel.active { display: block; }
.ai-buttons .btn-primary { box-shadow: 0 4px 14px rgba(91,75,219,0.25); }
.ai-status { font-weight: 600; }
.ai-status.success { color: var(--admin-success); }
.ai-status.error { color: var(--admin-danger); }

.animation-type-select { max-width: 280px; }
.image-drop-zone {
  border: 2px dashed #d9d3ff; border-radius: 12px; padding: 24px; text-align: center;
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.image-drop-zone:hover, .image-drop-zone.dragover { border-color: var(--admin-accent); background: #f8f6ff; }
.image-drop-zone img { max-height: 140px; margin: 0 auto 10px; border-radius: 8px; }
.image-drop-zone .drop-hint { color: #888; font-size: 0.85rem; }

/* =====================================================================
   FREE / PREMIUM BADGES & LOCKED CONTENT
   ===================================================================== */
.badge-free { background: var(--admin-success-bg); color: var(--admin-success); }
.badge-premium { background: linear-gradient(135deg, #ffd76a, #f6862c); color: #7a3e00; font-weight: 700; }

.anim-meta-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 16px; }

.card-thumb { position: relative; }
.card-lock {
  position: absolute; top: 8px; right: 8px; background: rgba(20,20,43,0.75);
  color: #fff; border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

.category-upsell-banner {
  background: var(--admin-warning-bg); border: 1px solid #ffe9b0; color: #7a5400;
  padding: 12px 18px; border-radius: 10px; margin: 16px 0; font-size: 0.92rem;
}
.category-upsell-banner a { font-weight: 700; }

.locked-preview { min-height: 380px; }
.locked-overlay { max-width: 480px; }
.locked-overlay .lock-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.locked-overlay h2 { font-size: 1.3rem; margin-bottom: 10px; color: #fff; }
.btn-large { padding: 14px 32px; font-size: 1.05rem; }
.locked-overlay .btn-large { margin: 14px 0; }
.locked-note { font-size: 0.8rem; color: #cfcfe8; margin-top: 10px; }

.inline-upsell {
  margin-top: 28px; padding: 24px; border-radius: 14px;
  background: linear-gradient(135deg, #f4f2ff, #ece9fb); border: 1px solid #d9d3ff;
}
.inline-upsell h3 { color: var(--admin-accent); margin-bottom: 10px; }
.upsell-list { list-style: none; margin: 0 0 16px; }
.upsell-list li { padding: 6px 0; }

/* =====================================================================
   HOMEPAGE PSYCHOLOGY / CONVERSION SECTIONS
   ===================================================================== */
.hero {
  background: linear-gradient(135deg, #f4f2ff 0%, #fff 60%);
  border-radius: 20px; padding: 60px 30px; margin-top: 20px;
}
.hero .eyebrow {
  display: inline-block; background: var(--admin-accent-light); color: var(--admin-accent);
  font-weight: 700; font-size: 0.8rem; padding: 6px 16px; border-radius: 100px; margin-bottom: 14px;
}
.hero h1 { font-size: 2.6rem; }
.hero .hero-sub { font-size: 1.05rem; color: #444; }
.hero-stats { display: flex; justify-content: center; gap: 32px; margin: 24px 0; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat .num { font-size: 1.6rem; font-weight: 800; color: var(--admin-accent); }
.hero-stat .label { font-size: 0.8rem; color: #777; }

.section-tagline {
  text-align: center; max-width: 700px; margin: 0 auto 24px; color: #555;
}

/* Social proof / testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.testimonial-card {
  background: #fff; border: 1px solid #eaeaf2; border-radius: 14px; padding: 22px;
  box-shadow: 0 2px 10px rgba(20,20,43,0.04);
}
.testimonial-stars { color: #f6862c; margin-bottom: 8px; font-size: 0.95rem; }
.testimonial-quote { font-style: italic; margin-bottom: 14px; color: #333; }
.testimonial-author { font-weight: 700; font-size: 0.9rem; }
.testimonial-role { font-size: 0.8rem; color: #888; }

/* Benefits / "why" grid */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.benefit-card {
  background: #fff; border-radius: 14px; padding: 22px; text-align: center;
  border: 1px solid #eaeaf2; box-shadow: 0 2px 10px rgba(20,20,43,0.04);
}
.benefit-icon { font-size: 2rem; margin-bottom: 10px; }
.benefit-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.benefit-card p { font-size: 0.9rem; color: #666; }

/* Urgency / CTA banner */
.cta-banner {
  background: linear-gradient(135deg, #5b4bdb, #6f5cf0); color: #fff;
  border-radius: 18px; padding: 40px 30px; text-align: center; margin: 40px 0;
}
.cta-banner h2 { font-size: 1.7rem; margin-bottom: 10px; color: #fff; }
.cta-banner p { color: #e6e3ff; margin-bottom: 20px; }
.cta-banner .btn-primary { background: #fff; color: var(--admin-accent); border-color: #fff; font-weight: 700; }
.cta-banner .btn-primary:hover { background: #f0f0f5; }
.cta-banner .cta-note { font-size: 0.8rem; color: #cfcaff; margin-top: 12px; }

/* Comparison table */
.compare-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(20,20,43,0.05); }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: center; border-bottom: 1px solid #f0f0f5; }
.compare-table th { background: #f7f7fb; }
.compare-table td:first-child, .compare-table th:first-child { text-align: left; font-weight: 600; }
.compare-table .yes { color: var(--admin-success); font-weight: 700; }
.compare-table .no { color: #bbb; }
.compare-table .col-highlight { background: #f4f2ff; }

/* FAQ */
.faq-item { border-bottom: 1px solid #eaeaf2; padding: 14px 0; }
.faq-item h3 { font-size: 1rem; margin-bottom: 6px; }
.faq-item p { color: #666; font-size: 0.92rem; }

/* Audience cards (parents/teachers/students) */
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; }
.audience-card {
  border-radius: 16px; padding: 30px; color: #fff;
  box-shadow: 0 4px 20px rgba(20,20,43,0.12);
}
.audience-card h3 { color: #fff; margin-bottom: 10px; font-size: 1.2rem; }
.audience-card p { color: rgba(255,255,255,0.92); font-size: 0.95rem; margin-bottom: 18px; line-height: 1.6; }
.audience-card .btn { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.4); }
.audience-card .btn:hover { background: rgba(255,255,255,0.28); text-decoration: none; }
.audience-parents { background: linear-gradient(135deg, #5aa7ff, #2f7bdb); }
.audience-teachers { background: linear-gradient(135deg, #34c98e, #1e9e6f); }
.audience-students { background: linear-gradient(135deg, #ff7eb6, #f0518f); }

/* Misc admin form helpers */
.section-hint { color: #666; font-size: 0.9rem; margin-bottom: 14px; }
.field-hint { font-size: 0.8rem; color: #888; margin-top: 4px; }
.prompt-tips { margin-top: 16px; background: #fff; border: 1px solid #d9d3ff; border-radius: 10px; padding: 14px 18px; }
.prompt-tips summary { cursor: pointer; font-weight: 600; color: var(--admin-accent); }
.prompt-tips ul { margin-top: 10px; }

/* AI panel layout improvements */
.ai-top-row { align-items: flex-end; }
.ai-name-group { flex: 2; min-width: 240px; }
.ai-type-group { flex: 1.4; min-width: 220px; }

#ai_prompt { font-family: inherit; line-height: 1.5; }

.quick-prompts {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 12px 0 16px;
}
.quick-prompts-label { font-size: 0.85rem; color: #777; font-weight: 600; margin-right: 4px; }
.quick-prompt-chip {
  border: 1px solid #d9d3ff; background: #fff; color: var(--admin-accent);
  border-radius: 100px; padding: 6px 14px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s;
}
.quick-prompt-chip:hover { background: #f4f2ff; }
.quick-prompt-chip:active { transform: scale(0.97); }

.ai-status-wrap { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 1.4em; }
.ai-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid #d9d3ff; border-top-color: var(--admin-accent);
  animation: ai-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-status { margin: 0; }

/* Zoom hint on public preview */
.preview-zoom-hint {
  font-size: 0.78rem; color: #888; margin-top: 8px; text-align: right;
}

/* ======================================================
   QUILL EDITOR STYLES
   ====================================================== */
.quill-editor-container {
  min-height: 280px;
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  background: #fff;
  font-size: 0.95rem;
}
.ql-toolbar { border-radius: 8px 8px 0 0; border-color: #ddd !important; }
.ql-container { border-color: #ddd !important; font-family: inherit; font-size: 0.95rem; }
.ql-editor { min-height: 240px; line-height: 1.7; }
.ql-editor-content { line-height: 1.8; color: #333; }
.ql-editor-content h1 { font-size: 1.7rem; margin: 18px 0 10px; }
.ql-editor-content h2 { font-size: 1.4rem; margin: 16px 0 8px; }
.ql-editor-content h3 { font-size: 1.15rem; margin: 14px 0 6px; }
.ql-editor-content p  { margin: 0 0 10px; }
.ql-editor-content ul, .ql-editor-content ol { padding-left: 22px; margin: 8px 0 12px; }
.ql-editor-content li { margin-bottom: 4px; }
.ql-editor-content blockquote { border-left: 3px solid #5b4bdb; padding-left: 14px; color: #555; margin: 12px 0; }
.ql-editor-content a { color: #5b4bdb; }
.ql-editor-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(20,20,43,0.10);
}
.ql-editor-content figure { margin: 16px 0; text-align: center; }
.ql-editor-content figcaption { font-size: .85rem; color: #777; margin-top: 6px; }
.ql-editor-content pre { background: #1a1a2e; color: #e0e0f0; padding: 12px; border-radius: 8px; font-size: 0.85rem; overflow-x: auto; }

/* ======================================================
   SOCIAL SHARE BUTTONS
   ====================================================== */
.share-section { margin: 28px 0 10px; }
.share-section h3 { font-size: 1rem; color: #555; margin-bottom: 12px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .12s, opacity .12s;
}
.share-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.share-btn:hover { transform: translateY(-2px); opacity: 0.9; text-decoration: none; }
.share-whatsapp  { background: #25d366; color: #fff; }
.share-twitter   { background: #000; color: #fff; }
.share-facebook  { background: #1877f2; color: #fff; }
.share-linkedin  { background: #0a66c2; color: #fff; }
.share-copy      { background: #f0f0f5; color: #333; border: 1px solid #ddd; }

/* ======================================================
   PAYMENT PROOF CARDS (admin)
   ====================================================== */
.proof-card {
  border: 1px solid #eaeaf2; border-radius: 12px; padding: 16px; margin-bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: #fff;
}
.proof-info { flex: 1; min-width: 200px; }
.proof-date { font-size: 0.8rem; color: #888; display: block; margin-top: 4px; }
.proof-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-small { padding: 6px 14px; font-size: 0.82rem; }
.btn-success { background: #1e7d32; color: #fff; border-color: #1e7d32; }
.btn-danger  { background: #b3261e; color: #fff; border-color: #b3261e; }

/* ======================================================
   COUNTRY SELECT
   ====================================================== */
.country-combo {
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.country-combo:focus-within { border-color: #5b4bdb; box-shadow: 0 0 0 3px rgba(91,75,219,0.12); }
.country-search-input {
  width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid #eee;
  font-size: 0.95rem; background: #fafafa; outline: none;
}
.country-list {
  width: 100%; border: none; outline: none; padding: 11px 14px;
  font-size: 0.95rem; background: #fff;
}
.country-list[size="1"] { padding: 11px 14px; }
.country-list option { padding: 8px 10px; }
.country-list option:checked { background: #5b4bdb; color: #fff; }
#country { height: auto; }

/* ======================================================
   PRICING PAGE EXTRAS
   ====================================================== */
.price-original {
  text-decoration: line-through; color: #bbb; font-size: 1.1rem;
  margin-right: 6px; font-weight: 400;
}
.payment-instructions {
  background: #f4f2ff; border: 1px solid #d9d3ff; border-radius: 10px;
  padding: 16px 18px; margin-bottom: 10px; color: #333; line-height: 1.7;
}

/* ======================================================
   MOBILE LANDSCAPE HINT
   ====================================================== */
.landscape-hint {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: #14142b; color: #fff;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px;
}
.landscape-hint .rotate-icon { font-size: 3rem; animation: rotate-pulse 1.5s ease-in-out infinite; margin-bottom: 16px; }
@keyframes rotate-pulse { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-90deg)} }
.landscape-hint h2 { color: #fff; font-size: 1.3rem; margin-bottom: 10px; }
.landscape-hint p  { color: #aaa; font-size: 0.9rem; }
.landscape-hint .skip-btn {
  margin-top: 20px; background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 8px;
  padding: 8px 20px; cursor: pointer; font-size: 0.85rem;
}

/* Show landscape hint ONLY on portrait mobile phones when viewing an animation */
@media screen and (max-width: 768px) and (orientation: portrait) {
  .animation-page .landscape-hint { display: flex; }
}

/* ======================================================
   FULL MOBILE RESPONSIVE OVERHAUL
   ====================================================== */
@media (max-width: 768px) {
  /* Header */
  .header-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; }
  .main-nav { flex-direction: column; gap: 8px; width: 100%; }
  .search-form { width: 100%; }
  .search-form input { flex: 1; }

  /* Hero */
  .hero { padding: 30px 16px 20px; }
  .hero h1 { font-size: 1.7rem; }
  .hero-stats { gap: 16px; }
  .hero-stat .num { font-size: 1.2rem; }
  .btn-large { padding: 12px 22px; font-size: 0.95rem; }

  /* Grids */
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .benefits-grid, .audience-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: 1fr 1fr; }

  /* Compare table scroll */
  .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Animation page — taller frame on mobile so simulations have room */
  .animation-frame { height: 72vh; min-height: 480px; }
  .preview-container .animation-frame { height: 68vh; min-height: 440px; }
  .preview-container.large .animation-frame { height: 75vh; min-height: 500px; }

  /* Share buttons */
  .share-buttons { gap: 8px; }
  .share-btn { padding: 8px 12px; font-size: 0.78rem; }

  /* Sections */
  .section { padding: 20px 0; }
  .section h2 { font-size: 1.3rem; }

  /* CTA banner */
  .cta-banner { padding: 28px 16px; border-radius: 12px; }
  .cta-banner h2 { font-size: 1.3rem; }

  /* Admin */
  .admin-body { flex-direction: column; }
  .admin-sidebar { width: 100%; min-height: unset; padding: 12px 0; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; padding: 0 10px; gap: 4px; }
  .admin-nav a { padding: 8px 12px; font-size: 0.8rem; }
  .admin-main { padding: 16px; }
  .admin-main h1 { font-size: 1.4rem; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .form-row { flex-direction: column; }
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .actions-cell { flex-direction: column; gap: 4px; }
  .ai-buttons { flex-direction: column; }
  .ai-buttons .btn { width: 100%; text-align: center; justify-content: center; }
  .inline-form { flex-direction: column; }

  /* Quill */
  .ql-toolbar .ql-formats { margin-bottom: 4px; }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; gap: 8px; }
  .footer-inner > p { width: 100%; min-width: 0; }
  .footer-nav { width: 100%; flex-wrap: wrap; justify-content: center; }

  /* Registration */
  .container.narrow { padding: 20px 16px; }
}

@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: 1fr; }
  .share-btn span { display: none; }
}

/* Mobile hamburger nav */
.mobile-menu-btn {
  display: none; background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: #1a1a2e; padding: 4px 8px; line-height: 1;
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: block; }
  .main-nav {
    display: none; flex-direction: column; width: 100%;
    background: #fff; border-top: 1px solid #eee; padding: 10px 0; gap: 0;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 16px; border-bottom: 1px solid #f5f5f5; width: 100%; }
  .main-nav .search-form { padding: 8px 16px; }
  .main-nav .search-form input { width: 100%; }
  .main-nav .btn-link { margin: 8px 16px; width: calc(100% - 32px); text-align: center; }
  .header-inner { flex-wrap: wrap; }
  .logo { flex: 1; }
}

/* =====================================================================
   ADDED FEATURES: notifications, pagination, reveal animations,
   profile, plan picker, upgrade banner, legal pages
   ===================================================================== */

/* ---- Notification banner (dismiss with × or Esc) ---- */
.notif-stack {
  max-width: 1200px;
  margin: 12px auto 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notif {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #d7d7ea;
  background: #eef1ff;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(20,20,43,0.06);
  animation: notifIn .35s ease;
}
@keyframes notifIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-info    { background: #e3f2fd; border-color: #b6ddfb; }
.notif-success { background: #e8f5e9; border-color: #b2e2b8; }
.notif-warning { background: #fff7e0; border-color: #f1dca0; }
.notif-title { display: block; font-size: 1rem; }
.notif-text { font-size: 0.9rem; margin-top: 2px; }
.notif-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #555;
  padding: 0 4px;
}
.notif-close:hover { color: #000; }

/* ---- Pagination ---- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 32px 0 8px;
}
.page-link {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid #d7d7ea;
  border-radius: 8px;
  background: #fff;
  color: #1a1a2e;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .15s;
}
.page-link:hover { background: #f0eefb; border-color: #5b4bdb; text-decoration: none; transform: translateY(-1px); }
.page-link.active { background: #5b4bdb; color: #fff; border-color: #5b4bdb; cursor: default; }
.page-link.disabled { color: #aaa; background: #f4f4f8; cursor: not-allowed; }
.page-ellipsis { padding: 0 4px; color: #888; }

/* ---- Reveal-on-scroll animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* stagger cards within a grid */
.reveal-grid .reveal:nth-child(2)  { transition-delay: .05s; }
.reveal-grid .reveal:nth-child(3)  { transition-delay: .10s; }
.reveal-grid .reveal:nth-child(4)  { transition-delay: .15s; }
.reveal-grid .reveal:nth-child(5)  { transition-delay: .20s; }
.reveal-grid .reveal:nth-child(6)  { transition-delay: .25s; }
.reveal-grid .reveal:nth-child(7)  { transition-delay: .30s; }
.reveal-grid .reveal:nth-child(8)  { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* gentle float for hero eyebrow */
.hero .eyebrow { display: inline-block; animation: floaty 4s ease-in-out infinite; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ---- Header profile + upgrade ---- */
.profile-link { display: inline-flex; align-items: center; gap: 8px; }
.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #5b4bdb;
  flex: 0 0 auto;
}
.nav-avatar img {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  max-width: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.nav-avatar-initial { color: #fff; font-weight: 700; font-size: 0.85rem; }
.upgrade-link { background: #b8860b !important; }
.upgrade-link:hover { background: #9c7209 !important; }

/* ---- Profile page ---- */
.profile-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e6e6ef;
  border-radius: 16px;
  margin-top: 16px;
  box-shadow: 0 4px 18px rgba(20,20,43,0.05);
  overflow: hidden;
}
.profile-summary::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: linear-gradient(120deg,#5b4bdb,#8b7cf0);
}
.profile-avatar {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 2px 10px rgba(20,20,43,0.18);
  background: #5b4bdb;
}
.profile-avatar img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.avatar-placeholder {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  background: #5b4bdb; color: #fff;
  font-size: 2.2rem; font-weight: 700;
}
.profile-meta { position: relative; z-index: 1; padding-top: 30px; }
.profile-meta h2 { margin: 0; }
.profile-email { color: #666; font-size: .92rem; margin-bottom: 6px; }
textarea { width: 100%; font-family: inherit; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; }

/* ---- Upgrade banner ---- */
.upgrade-banner, .category-upsell-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 20px;
  background: linear-gradient(90deg,#f0eefb,#fff7e0);
  border: 1px solid #e3dffa;
  border-radius: 12px;
}

/* ---- Plan picker (registration) ---- */
.plan-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; }
.plan-option { cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; }
.plan-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; height: 100%;
  border: 2px solid #e0e0ee; border-radius: 12px;
  background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.plan-option:hover .plan-card { transform: translateY(-2px); }
.plan-option input:checked + .plan-card {
  border-color: #5b4bdb;
  box-shadow: 0 0 0 3px rgba(91,75,219,0.15);
}
.plan-name { font-weight: 700; }
.plan-price { font-size: 1.4rem; font-weight: 800; color: #5b4bdb; }
.plan-per { font-size: .8rem; font-weight: 600; color: #888; }
.plan-desc { font-size: .82rem; color: #666; }
.plan-card-featured { border-color: #c9c0f7; }
.plan-ribbon {
  position: absolute; top: -10px; right: 10px;
  background: #b8860b; color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 999px;
}
.plan-card { position: relative; }

/* ---- Legal pages ---- */
.legal-page { max-width: 760px; }
.legal-hero { padding: 24px 0 8px; }
.legal-section { margin: 22px 0; }
.legal-section h2 { font-size: 1.15rem; margin-bottom: 6px; color: #2a2a45; }
.legal-section p { color: #444; }

/* ---- Prominent search bars (home hero + category top) ---- */
.hero-search, .page-search {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin: 26px auto;
}
.page-search { margin: 16px 0 24px; max-width: 560px; }
.hero-search input, .page-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid #d7d7ea;
  border-radius: 14px;
  font-size: 1.05rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(20,20,43,0.07);
}
.hero-search input:focus, .page-search input:focus {
  outline: none; border-color: #5b4bdb; box-shadow: 0 0 0 4px rgba(91,75,219,0.15);
}
.hero-search .btn, .page-search .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 14px;
  padding: 16px 28px;
  font-size: 1.05rem;
}

/* ---- Hero CTA row ---- */
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 6px;
}
.btn-outline {
  background: #fff; color: #5b4bdb; border: 2px solid #c9c0f7;
}
.btn-outline:hover { background: #f0eefb; text-decoration: none; }
.btn-cta-featured {
  background: #b8860b; color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(184,134,11,0.3);
}
.btn-cta-featured:hover { background: #9c7209; text-decoration: none; }

@media (max-width: 600px) {
  .hero-search, .page-search { flex-direction: column; }
  .hero-cta-row .btn { flex: 1 1 100%; }
}

/* ---- "Created by" author chip + hover bio tooltip (E-E-A-T) ---- */
.created-by { font-size: .9rem; color: #666; display: inline-flex; align-items: center; gap: 6px; }
.author-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  background: #f0eefb;
  border: 1px solid #ddd6f7;
  border-radius: 999px;
  cursor: help;
  font-weight: 600;
  color: #4a3bc0;
}
.author-chip-avatar { width: 22px !important; height: 22px !important; border-radius: 50%; object-fit: cover; display: block; }
.author-name { line-height: 1; }
.author-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  width: 260px;
  background: #14142b;
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,20,43,0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 400;
}
.author-tooltip::before {
  content: ""; position: absolute; bottom: 100%; left: 24px;
  border: 7px solid transparent; border-bottom-color: #14142b;
}
.author-chip:hover .author-tooltip,
.author-chip:focus .author-tooltip,
.author-chip:focus-within .author-tooltip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.author-tooltip strong { font-size: .95rem; }
.author-tooltip-role { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #b9b2f0; }
.author-tooltip-bio { font-size: .85rem; color: #e6e4f5; line-height: 1.5; }

/* ---- Ad slots (AdSense) ---- */
.ad-slot {
  margin: 22px auto;
  text-align: center;
  max-width: 970px;
  background: #fafafb;
  border: 1px dashed #e0e0ea;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}
.ad-slot .ad-label {
  display: block;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #b0b0c0;
  margin-bottom: 6px;
}
.ad-slot ins, .ad-slot iframe { margin: 0 auto; }

/* Animation page layout with sidebar for ads */
.anim-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
.anim-sidebar:empty { display: none; }
@media (min-width: 1000px) {
  .anim-layout:has(.anim-sidebar .ad-slot) { grid-template-columns: minmax(0,1fr) 320px; }
  .anim-sidebar .ad-slot { position: sticky; top: 20px; }
}

/* ---- Admin toggle row ---- */
.switch-row { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.switch-row input[type="checkbox"] { width: 18px; height: 18px; }

/* ---- SEO content section ---- */
.seo-content { border-top: 1px solid #ececf4; padding-top: 30px; }
.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.seo-col {
  background: #fff;
  border: 1px solid #ececf4;
  border-radius: 12px;
  padding: 18px 20px;
}
.seo-col h3 { color: #5b4bdb; margin-bottom: 6px; font-size: 1.05rem; }
.seo-col p { color: #555; font-size: .92rem; }
.seo-footer-text { color: #777; font-size: .9rem; max-width: 880px; margin: 8px auto 0; line-height: 1.7; }

/* ---- Admin request tabs ---- */
.req-tabs { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.req-tab {
  padding: 10px 16px; border: 1px solid #e0e0ea; border-radius: 10px;
  background: #fff; color: #333; font-weight: 600;
}
.req-tab.active { background: #5b4bdb; color: #fff; border-color: #5b4bdb; }
.req-tab:hover { text-decoration: none; }
.req-badge { background: #b3261e; color: #fff; border-radius: 999px; padding: 1px 7px; font-size: .72rem; margin-left: 4px; }
.row-new { background: #fbfaff; }

/* ---- Watermark over animations (strictly contained to the animation only) ---- */
.animation-preview-wrapper {
  position: relative !important;
  overflow: hidden;            /* clip the watermark to the animation box */
  isolation: isolate;          /* new stacking context so overlay can't escape */
}
.wm-badge {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  background: rgba(20,20,43,0.45); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 6px;
  pointer-events: none; user-select: none;
}
.wm-tiled {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 48px 64px; transform: rotate(-20deg);
  pointer-events: none; user-select: none; opacity: 0.09;
}
.wm-tiled span { font-size: 1.05rem; font-weight: 800; color: #14142b; white-space: nowrap; pointer-events: none; }
/* The interactive iframe always sits visually above and remains clickable. */
.animation-preview-wrapper .animation-frame { position: relative; z-index: 1; }
.wm-badge, .wm-tiled, .wm-tiled * { pointer-events: none !important; }

/* ---- Related animations ---- */
.related-section { margin-top: 32px; }
.related-section h2 { margin-bottom: 14px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

/* ---- Suggestion (email) box ---- */
.suggestion-box .suggestion-email { font-size: 1.15rem; font-weight: 700; margin: 8px 0; }
.suggestion-box .suggestion-email a { color: #5b4bdb; }

/* =====================================================================
   MOBILE RESPONSIVENESS
   ===================================================================== */
@media (max-width: 768px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .header-inner { flex-wrap: wrap; gap: 10px; }
  .main-nav { display: none; flex-direction: column; width: 100%; gap: 8px; }
  .main-nav.open { display: flex; }
  .mobile-menu-btn { display: block; font-size: 1.6rem; background: none; border: none; cursor: pointer; }
  .hero h1 { font-size: 1.8rem; }
  .hero-sub { font-size: .98rem; }
  .hero-stats { gap: 18px; flex-wrap: wrap; }
  .grid, .related-grid, .reveal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .seo-grid { grid-template-columns: 1fr; }
  .plan-picker { grid-template-columns: 1fr; }
  .anim-layout { grid-template-columns: 1fr !important; }
  .admin-main { padding: 16px; }
  .admin-sidebar { position: static; width: 100%; height: auto; }
  .admin-body { display: block; }
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
  .hero-search, .page-search { flex-direction: column; }
  .hero-cta-row .btn { flex: 1 1 100%; }
}
@media (min-width: 769px) {
  .mobile-menu-btn { display: none; }
}

/* ---- Rotate-your-screen prompt (mobile portrait, on animation pages) ---- */
#rotateHint {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,20,43,0.94); color: #fff;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px;
}
#rotateHint .rotate-icon { font-size: 3.4rem; animation: rotatePhone 1.8s ease-in-out infinite; }
#rotateHint p { font-size: 1.1rem; margin-top: 16px; max-width: 320px; }
#rotateHint button { margin-top: 22px; }
@keyframes rotatePhone {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(90deg); }
}
body.show-rotate-hint #rotateHint { display: flex; }

/* =====================================================================
   PROFESSIONAL HERO ANIMATIONS
   ===================================================================== */
.hero-animated { position: relative; overflow: hidden; }
.hero-anim-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-animated > *:not(.hero-anim-bg) { position: relative; z-index: 1; }

.hero-anim-bg span {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.18;
  will-change: transform;
}
.float-atom   { top: 12%;  left: 8%;  animation: floatY 7s ease-in-out infinite; }
.float-dna    { top: 60%;  left: 5%;  animation: floatY 9s ease-in-out infinite 0.5s; }
.float-flask  { top: 22%;  right: 10%; animation: floatY 8s ease-in-out infinite 0.2s; }
.float-bulb   { top: 68%;  right: 8%;  animation: floatY 6.5s ease-in-out infinite 0.8s; }
.float-rocket { top: 40%;  left: 14%; animation: floatDiag 11s ease-in-out infinite; }
.float-pi     { top: 30%;  left: 46%; font-size: 3rem !important; font-weight: 800; color: #5b4bdb; animation: spinSlow 18s linear infinite; }
.float-sigma  { top: 72%;  left: 50%; font-size: 2.6rem !important; font-weight: 800; color: #b8860b; animation: floatY 7.5s ease-in-out infinite 0.4s; }

/* Orbiting rings */
.float-orbit {
  top: 18%; right: 22%;
  width: 90px; height: 90px;
  border: 2px dashed rgba(91,75,219,0.35);
  border-radius: 50%;
  opacity: 0.4 !important;
  animation: spinSlow 14s linear infinite;
}
.float-orbit::after {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; background: #5b4bdb; border-radius: 50%;
}
.float-orbit-2 { top: 55%; left: 30%; width: 60px; height: 60px; animation-duration: 10s; animation-direction: reverse; }
.float-orbit-2::after { background: #b8860b; }

@keyframes floatY {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-22px) rotate(8deg); }
}
@keyframes floatDiag {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(20px,-18px) rotate(15deg); }
}
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-anim-bg span { animation: none !important; }
}
@media (max-width: 768px) {
  .hero-anim-bg span { font-size: 1.5rem; opacity: 0.12; }
  .float-pi { font-size: 2rem !important; }
  .float-orbit { width: 56px; height: 56px; }
}

/* ---- Animated "how it works" feature strip ---- */
.feature-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 18px; margin: 36px 0;
}
.feature-card {
  background: #fff; border: 1px solid #ececf4; border-radius: 14px;
  padding: 24px 20px; text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(91,75,219,0.13); }
.feature-icon {
  font-size: 2.4rem; display: inline-block; margin-bottom: 10px;
  animation: floatY 5s ease-in-out infinite;
}
.feature-card:nth-child(2) .feature-icon { animation-delay: .3s; }
.feature-card:nth-child(3) .feature-icon { animation-delay: .6s; }
.feature-card:nth-child(4) .feature-icon { animation-delay: .9s; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature-card p { font-size: .9rem; color: #666; }

/* Constrain images inside the Quill editor (admin) so they don't overflow */
.ql-editor img, .quill-editor-container img { max-width: 100%; height: auto; }

/* =====================================================================
   3D DEPTH / TOUCH
   ===================================================================== */
.card, .feature-card, .seo-col, .plan-card, .audience-card {
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(20,20,43,0.16), 0 4px 10px rgba(20,20,43,0.08);
}
/* JS adds .tilt-3d and sets --rx/--ry on pointer move */
.tilt-3d {
  transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
  box-shadow: 0 22px 48px rgba(20,20,43,0.18);
}
.card-thumb { transform: translateZ(20px); }

/* Layered depth on hero + sections */
.hero-animated {
  background: linear-gradient(135deg,#f6f4ff 0%, #ffffff 60%);
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(91,75,219,0.35), inset 0 1px 0 #fff;
  padding: 40px 24px;
}
.btn-primary, .btn-cta-featured {
  box-shadow: 0 6px 0 rgba(76,60,180,0.35), 0 10px 20px rgba(91,75,219,0.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:active, .btn-cta-featured:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(76,60,180,0.35), 0 4px 10px rgba(91,75,219,0.2);
}
.feature-card:hover, .seo-col:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 16px 36px rgba(91,75,219,0.14); }
.admin-card { box-shadow: 0 8px 24px -12px rgba(20,20,43,0.18); }

@media (prefers-reduced-motion: reduce) {
  .card, .feature-card, .seo-col, .tilt-3d { transition: none; transform: none !important; }
}

/* ---- Export bar (users download buttons) ---- */
.export-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; flex-wrap: wrap; }
.export-bar .btn-small { padding: 6px 14px; }

/* ---- Coupon form on pricing ---- */
.coupon-form { display: flex; gap: 8px; max-width: 360px; margin: 0 auto 24px; }
.coupon-form input { flex: 1; padding: 10px 14px; border: 1px solid #d7d7ea; border-radius: 10px; }
.coupon-form .btn { border-radius: 10px; }
/* ---- Header logo image (horizontal, capped) ---- */
.logo-img { max-height: 44px; max-width: 200px; width: auto; height: auto; object-fit: contain; display: block; }

/* ---- Clickable contact message detail ---- */
.msg-detail summary { cursor: pointer; color: #4a3bc0; font-weight: 500; outline: none; }
.msg-detail summary:hover { text-decoration: underline; }
.msg-detail .msg-full { margin-top: 8px; padding: 10px 12px; background: #f6f5fb; border-radius: 8px; white-space: pre-wrap; color: #333; }

/* ---- Contact message expand ---- */
.msg-detail summary { cursor: pointer; color: #333; list-style: revert; }
.msg-summary { padding: 4px 0; }
.msg-more { color: #5b4bdb; font-weight: 600; font-size: .82rem; }
.msg-full { margin-top: 8px; padding: 10px 12px; background: #f6f5ff; border-radius: 8px; white-space: pre-wrap; line-height: 1.5; }

/* ---- License upgrade CTA below free simulations ---- */
.license-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding: 16px 20px;
  background: linear-gradient(90deg,#f0eefb,#fff7e0);
  border: 1px solid #e3dffa; border-radius: 12px;
}
.license-cta-text { display: flex; flex-direction: column; gap: 3px; }
.license-cta-text strong { font-size: 1.02rem; color: #2a2a45; }
.license-cta-text span { font-size: .9rem; color: #555; max-width: 560px; }
@media (max-width: 600px) { .license-cta .btn { width: 100%; } }

/* ===================== LEARNING TOOLS ===================== */
.learning-tools { margin-top: 28px; padding: 22px; background: #faf9ff; border: 1px solid #ece9fb; border-radius: 14px; }
.learning-tools h2 { margin-bottom: 4px; }
.learning-sub { color: #666; font-size: .92rem; margin-bottom: 14px; }
.learning-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lt-panel { margin-top: 18px; padding: 18px; background: #fff; border: 1px solid #eee; border-radius: 12px; }
.lt-controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.lt-controls label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; gap: 4px; }
.lt-controls select, .lt-controls input { padding: 8px 10px; border: 1px solid #d7d7ea; border-radius: 8px; font-weight: 400; }
.quiz-q { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f5; }
.quiz-qtext { margin-bottom: 8px; }
.quiz-opt { display: block; padding: 8px 12px; margin: 5px 0; border: 1px solid #e3e3ef; border-radius: 8px; cursor: pointer; transition: background .15s; }
.quiz-opt:hover { background: #f5f3ff; }
.quiz-score { font-size: 1.3rem; margin-bottom: 10px; }
.quiz-weak { color: #b3261e; } .quiz-good { color: #1a7f37; }
.quiz-review { padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: .9rem; }
.quiz-review.ok { background: #e9f9ee; } .quiz-review.bad { background: #fdecea; }
.lt-tutor-text { white-space: pre-wrap; line-height: 1.7; color: #333; }
.lt-loading { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: #5b4bdb; font-weight: 600; }
.lt-loading[hidden] { display: none !important; }
.lt-error { margin-top: 14px; color: #b3261e; font-weight: 600; }
/* Global safety: any element with the hidden attribute must stay hidden even
   if a more specific display rule (flex/grid/block) would otherwise show it. */
[hidden] { display: none !important; }
.spinner { width: 18px; height: 18px; border: 3px solid #d7d2f5; border-top-color: #5b4bdb; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Upgrade modal */
.lt-modal-overlay { position: fixed; inset: 0; background: rgba(20,20,43,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.lt-modal-overlay[hidden] { display: none !important; }
.lt-modal { background: #fff; border-radius: 16px; padding: 30px; max-width: 420px; text-align: center; position: relative; }
.lt-modal-close { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 1.6rem; cursor: pointer; color: #888; }
.lt-modal h3 { margin-bottom: 10px; } .lt-modal p { color: #555; margin-bottom: 18px; }

/* ===================== HISTORY / PERFORMANCE ===================== */
.perf-summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; }
.perf-stat { flex: 1; min-width: 120px; background: #faf9ff; border: 1px solid #ece9fb; border-radius: 12px; padding: 18px; text-align: center; }
.perf-num { display: block; font-size: 1.8rem; font-weight: 800; color: #5b4bdb; }
.perf-label { font-size: .82rem; color: #666; }
.history-section { margin: 26px 0; }
.activity-list { list-style: none; padding: 0; }
.activity-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f5; flex-wrap: wrap; }
.activity-action { font-size: .72rem; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: #ece9fb; color: #5b4bdb; }
.activity-quiz { background: #e9f9ee; color: #1a7f37; } .activity-tutor { background: #fff4e0; color: #b8860b; }
.activity-date { margin-left: auto; color: #999; font-size: .82rem; }
.locked-card { text-align: center; padding: 40px 20px; background: #faf9ff; border: 1px solid #ece9fb; border-radius: 16px; }
.locked-card .lock-icon { font-size: 2.6rem; }

/* Weak areas */
.weak-areas-list { list-style: none; padding: 0; }
.weak-areas-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f5; }
.weak-topic { font-weight: 600; } .weak-pct { color: #b3261e; font-weight: 700; }

/* ===================== FORUM ===================== */
.forum-list { margin-top: 20px; }
.forum-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.forum-row:hover { box-shadow: 0 6px 18px rgba(20,20,43,.08); }
.forum-row h3 { font-size: 1.05rem; margin: 0; }
.forum-meta { color: #888; font-size: .82rem; }
.forum-replies { background: #f5f3ff; color: #5b4bdb; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; font-size: .85rem; }
.forum-body { background: #faf9ff; padding: 16px; border-radius: 10px; margin: 16px 0; white-space: pre-wrap; }
.forum-reply { padding: 14px 0; border-bottom: 1px solid #f0f0f5; }
.forum-reply-meta { font-size: .85rem; color: #666; margin-bottom: 4px; }
.forum-reply-body { white-space: pre-wrap; }

/* ===================== FILTER TABS ===================== */
.filter-tabs { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.filter-tab { padding: 7px 16px; border: 1px solid #d7d7ea; border-radius: 20px; text-decoration: none; color: #555; font-weight: 600; font-size: .88rem; }
.filter-tab.active { background: #5b4bdb; color: #fff; border-color: #5b4bdb; }

/* ===================== TUTOR FORMATTED OUTPUT ===================== */
.lt-tutor-text { line-height: 1.7; color: #333; }
.tutor-block { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 8px 0; background: #f7f6fd; border-radius: 10px; border-left: 3px solid #5b4bdb; }
.tutor-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: #5b4bdb; }
.tutor-val { color: #333; }
.tutor-formula { background: #fff7e6; border-left-color: #d99100; font-family: 'Cambria Math', Georgia, serif; }
.tutor-formula .tutor-label { color: #b8860b; }
.tutor-formula .tutor-val { font-size: 1.05rem; font-weight: 600; }
.tutor-step { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f0f5; align-items: flex-start; }
.tutor-step-n { flex-shrink: 0; background: #5b4bdb; color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.tutor-para { margin: 8px 0; }

/* ===================== FULLSCREEN BUTTON ===================== */
.fullscreen-btn {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  background: rgba(20,20,43,.6); color: #fff; border: none;
  padding: 6px 12px; border-radius: 8px; font-size: .8rem; font-weight: 600;
  cursor: pointer; opacity: .85; transition: opacity .15s;
}
.fullscreen-btn:hover { opacity: 1; }
.animation-preview-wrapper:fullscreen,
.animation-preview-wrapper.is-fullscreen {
  width: 100vw; height: 100vh; background: #fff; margin: 0; border-radius: 0;
}
.animation-preview-wrapper:fullscreen .animation-frame,
.animation-preview-wrapper.is-fullscreen .animation-frame { height: 100vh !important; }

/* ===================== FORUM STATS + MODERATION + MEMBER ===================== */
.forum-stats { display: flex; gap: 18px; flex-wrap: wrap; background: #faf9ff; border: 1px solid #ece9fb; border-radius: 10px; padding: 12px 18px; margin: 12px 0 20px; font-size: .9rem; }
.member-link { color: #5b4bdb; text-decoration: none; font-weight: 600; }
.member-link:hover { text-decoration: underline; }
.forum-row-deleted { opacity: .6; background: #fbf3f3; }
.deleted-tag { font-size: .68rem; background: #fdecea; color: #b3261e; padding: 2px 8px; border-radius: 12px; text-transform: uppercase; font-weight: 700; }
.forum-mod-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #fff7e6; border: 1px solid #f0e0b8; border-radius: 10px; padding: 12px; margin: 14px 0; }
.mod-delete-form { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.mod-delete-form input { flex: 1; padding: 7px 10px; border: 1px solid #d7d7ea; border-radius: 8px; }
.member-card { display: flex; gap: 22px; align-items: center; background: #faf9ff; border: 1px solid #ece9fb; border-radius: 16px; padding: 28px; margin-top: 16px; flex-wrap: wrap; }
.member-avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #5b4bdb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-initial { color: #fff; font-size: 2.4rem; font-weight: 800; }
.member-badge { display: inline-block; background: #5b4bdb; color: #fff; font-size: .72rem; padding: 2px 10px; border-radius: 12px; font-weight: 700; }
.member-bio { margin-top: 10px; color: #444; }

/* ===================== ALL SIMULATIONS PAGE ===================== */
.page-head { margin-bottom: 14px; }
.filter-tabs-cat { margin-top: 0; }
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.card-cat { font-size: .72rem; color: #777; background: #f1f0fa; padding: 2px 8px; border-radius: 10px; }
.results-count { color: #888; font-size: .88rem; margin: 8px 0 16px; }
.empty-state { padding: 30px; text-align: center; color: #888; background: #faf9ff; border-radius: 12px; }

/* ===================== ONE-AT-A-TIME QUIZ ===================== */
.quiz-progress { margin-bottom: 16px; }
.quiz-progress-bar { height: 8px; background: #ece9fb; border-radius: 20px; overflow: hidden; margin-bottom: 6px; }
.quiz-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg,#5b4bdb,#7d6ef0); transition: width .3s ease; }
.quiz-progress-text { font-size: .8rem; color: #888; font-weight: 600; }
.quiz-q-single .quiz-qtext { font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; line-height: 1.5; }
.quiz-opt-btn { display: block; width: 100%; text-align: left; padding: 14px 16px; margin: 10px 0; border: 2px solid #e3e3ef; border-radius: 12px; background: #fff; font-size: 1rem; cursor: pointer; transition: all .15s; }
.quiz-opt-btn:hover { border-color: #5b4bdb; background: #f7f5ff; transform: translateX(2px); }
.quiz-opt-btn.chosen { border-color: #5b4bdb; background: #5b4bdb; color: #fff; }

/* ===================== UPGRADE LINE ===================== */
.upgrade-line { background: #fff7e6; border: 1px solid #f0e0b8; border-radius: 8px; padding: 9px 14px; margin: 0 0 14px; font-size: .9rem; color: #8a6d00; }
.upgrade-line a { color: #5b4bdb; font-weight: 700; }

/* ===================== SCHEMA EDITOR ===================== */
.schema-section { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e0e0ee; }
.schema-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.schema-controls select { padding: 7px 10px; border: 1px solid #d7d7ea; border-radius: 8px; }
.schema-status { font-size: .85rem; color: #5b4bdb; font-weight: 600; }
.schema-textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; }

/* ===================== PROMOS & TRIAL ===================== */
.global-free-banner { background: linear-gradient(90deg,#e9f9ee,#fff7e0); border: 1px solid #bfe8cc; border-radius: 12px; padding: 16px 20px; margin: 0 auto 24px; max-width: 900px; text-align: center; font-size: 1.02rem; color: #1a5e2a; }
.trial-banner { background: linear-gradient(90deg,#f0eefb,#fff7e0); border: 1px solid #e3dffa; border-radius: 12px; padding: 14px 18px; margin: 12px 0 20px; }
.trial-banner a { color: #5b4bdb; font-weight: 700; }
.trial-form { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.trial-form select { padding: 3px 6px; border: 1px solid #d7d7ea; border-radius: 6px; font-size: .82rem; }

/* ===================== POPUP NOTIFICATION ===================== */
.popup-notif-overlay { position: fixed; inset: 0; background: rgba(20,20,43,.6); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; }
.popup-notif-overlay[hidden] { display: none !important; }
.popup-notif { background: #fff; border-radius: 16px; max-width: 480px; width: 100%; padding: 24px; position: relative; text-align: center; max-height: 90vh; overflow-y: auto; }
.popup-notif-close { position: absolute; top: 8px; right: 14px; border: none; background: none; font-size: 1.8rem; cursor: pointer; color: #888; line-height: 1; }
.popup-notif h3 { margin-bottom: 12px; }
.popup-notif-img { width: 100%; height: auto; border-radius: 10px; margin: 6px 0 12px; }
.popup-notif p { color: #555; }

/* ===================== STICKY TRIAL TIMER ===================== */
.trial-timer { position: fixed; left: 14px; bottom: 18px; z-index: 900; background: linear-gradient(135deg,#5b4bdb,#7d6ef0); color: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(91,75,219,.35); font-size: .9rem; max-width: 220px; }
.trial-timer .tt-title { font-weight: 700; display: block; margin-bottom: 2px; }
.trial-timer .tt-count { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.trial-timer a { color: #fff; text-decoration: underline; font-size: .78rem; display: inline-block; margin-top: 4px; }
.trial-timer .tt-close { position: absolute; top: 4px; right: 8px; background: none; border: none; color: rgba(255,255,255,.8); font-size: 1.1rem; cursor: pointer; line-height: 1; }
@media (max-width: 600px) { .trial-timer { left: 10px; bottom: 10px; padding: 10px 12px; max-width: 170px; font-size: .82rem; } }