/* =============================================================
   EduForge — Editor UI Stylesheet
   Application chrome: layout, sidebar, canvas, panels, modals,
   block editor controls, save/load, AI help, preview formats.
   Load order: base.css → eduforge.css → theme.css
   ============================================================= */
:root{--ef-primary:var(--color-primary);--ef-accent:var(--brand-edu, #2563EB);--ef-bg:var(--bg-page);--ef-surface:var(--bg-surface);--ef-text:var(--text-primary);--ef-muted:var(--text-secondary);--ef-border:var(--border-default);--ef-sidebar:var(--bg-dark);--ef-sidebar-t:var(--ef-muted);--ef-sidebar-a:var(--ef-text);--ef-radius:var(--radius-md);--ef-font-head:var(--font-display);--ef-font-body:var(--font-body);
  /* Slick design tokens */
  --ef-glass:saturate(1.3) blur(20px);
  --ef-accent-glow:rgba(37,99,235,.18);
  --ef-accent-soft:rgba(37,99,235,.06);
  --ef-shadow-sm:0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --ef-shadow-md:0 4px 16px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --ef-shadow-accent:0 4px 20px rgba(37,99,235,.12);
  --ef-border-active:rgba(59,130,246,.4);
  /* Z-index scale */
  --z-base: 1;
  --z-sidebar-btn: 50;
  --z-dropdown: 200;
  --z-ai-footer: 300;
  --z-modal: 500;
  --z-confirm: 600;
  --z-block-editor: 640;
  --z-preview: 700;
  --z-loading: 800;
  --z-banner: 900;
  --z-save-popup: 9500;
  --z-dialog: 9600;
  --z-top: 10000;
  /* Transition durations */
  --dur-fast: .1s;
  --dur-normal: .15s;
  --dur-slow: .3s
}
/* ── Focus Indicators ── */
.block-body input:focus-visible,
.block-body textarea:focus-visible,
.block-body select:focus-visible,
.sidebar-field:focus-visible,
.sl-search-input:focus-visible,
.intro-cover-url-input:focus-visible,
.fu-tab:focus-visible,
.sl-btn:focus-visible,
.bsp-btn:focus-visible,
.block-move-btn:focus-visible,
.block-delete-btn:focus-visible,
.block-tips-btn:focus-visible,
.block-preview-btn:focus-visible,
.ef-toggle input:focus-visible + .ef-toggle-track,
.dropdown-item:focus-visible {
  box-shadow: 0 0 0 2px var(--ef-accent, #2563EB);
  outline: none;
}

/* ── Placeholder Contrast ── */
.block-body input::placeholder,
.block-body textarea::placeholder,
.sidebar-field::placeholder,
.sl-search-input::placeholder {
  color: var(--ef-text-muted, #64748B);
  opacity: 1;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--ef-font-body);font-size:14px;color:var(--ef-text);background:var(--ef-bg);display:flex;flex-direction:column}

/* ── AMBIENT BACKGROUND TEXTURE ─────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 8% 12%, rgba(37,99,235,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 80%, rgba(124,58,237,.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(5,150,105,.03) 0%, transparent 45%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.2;
  background-image:radial-gradient(circle, rgba(148,163,184,.2) 1px, transparent 1px);
  background-size:24px 24px;
}
#app{position:relative;z-index:1}
/* EduForge brand logo (used in login card) */
.logo{font-family:var(--ef-font-head);font-size:18px;color:var(--ef-primary);letter-spacing:-.3px;white-space:nowrap}
.logo span{color:var(--ef-accent)}
.btn{padding:6px 14px;border-radius:var(--ef-radius);border:1.5px solid var(--ef-border);background:var(--ef-surface);color:var(--ef-text);font-family:var(--ef-font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--dur-normal);white-space:nowrap}
.btn:hover{border-color:var(--ef-accent);color:var(--ef-accent)}
.btn-primary{background:var(--ef-accent);color:var(--btn-primary-text, #fff);border-color:var(--ef-accent)}
.btn-primary:hover{opacity:.88;color:var(--btn-primary-text, #fff)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--ef-bg);border-color:transparent;color:var(--ef-text)}
.dropdown-wrap{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--ef-surface);border:1px solid var(--ef-border);border-radius:var(--ef-radius);box-shadow:0 4px 16px rgba(0,0,0,.1);min-width:190px;z-index:var(--z-dropdown);padding:4px}
.dropdown-wrap.open .dropdown-menu{display:block}
.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--ef-text);transition:background var(--dur-fast)}
.dropdown-item:hover{background:var(--ef-bg)}
.dropdown-section-label{padding:4px 10px 2px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ef-muted);pointer-events:none}
/* Import/Export dropdown */
.io-menu{max-height:70vh;overflow-y:auto;min-width:240px}
.dropdown-sub-label{padding:4px 10px 2px 16px;font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--ef-muted);opacity:.7;pointer-events:none}
.io-divider{height:1.5px;background:var(--ef-border,#E2E8F0);margin:8px 10px}
.io-soon{color:var(--ef-muted)}
.io-soon-tag{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--ef-accent);background:var(--alert-info-bg, #E0F2FE);padding:1px 6px;border-radius:99px;margin-right:4px;flex-shrink:0}
/* Soon popup overlay */
.io-soon-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:var(--z-top);display:flex;align-items:center;justify-content:center}
.io-soon-popup{background:var(--ef-surface,#fff);border-radius:12px;padding:28px 32px;max-width:340px;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.2)}
.io-soon-popup-icon{font-size:32px;margin-bottom:8px}
.io-soon-popup-title{font-size:16px;font-weight:700;color:var(--ef-primary,#1E3A5F);margin-bottom:6px}
.io-soon-popup-text{font-size:13px;color:var(--ef-muted,#5A6578);line-height:1.5;margin-bottom:16px}
.io-soon-popup-close{background:var(--ef-accent,#2D9CDB);color:var(--text-on-dark, #fff);border:none;padding:7px 24px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--ef-font-body,inherit);transition:opacity .12s}
.io-soon-popup-close:hover{opacity:.85}
/* LAYOUT */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#app{flex:1;display:flex;overflow:hidden;min-height:0;background:transparent}
#sidebar{width:230px;background:rgba(255,255,255,.72);backdrop-filter:var(--ef-glass);border-right:1px solid rgba(148,163,184,.15);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-shrink:0}
#canvas{flex:1;overflow-y:auto;padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:0;background:transparent}
#panel{width:260px;background:rgba(255,255,255,.72);backdrop-filter:var(--ef-glass);border-left:1px solid rgba(148,163,184,.15);overflow-y:auto;overflow-x:hidden;flex-shrink:0}
/* SIDEBAR */
.sidebar-header{padding:12px 14px;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ef-muted);background:rgba(248,250,252,.5);border-bottom:1px solid var(--ef-border);text-align:center;flex-shrink:0}
.sidebar-section{padding:12px 12px 6px}
.sidebar-label{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ef-accent);padding:0 4px;margin-bottom:6px}
.block-type-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:6px;background:transparent;border:none;color:var(--ef-sidebar-a);font-family:var(--ef-font-body);font-size:12.5px;cursor:pointer;text-align:left;transition:background .12s}
.block-type-btn:hover{background:var(--ef-bg)}
.btype-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sidebar-divider{border:none;border-top:1px solid var(--ef-border);margin:4px 12px}
.outline-item{display:flex;align-items:center;gap:6px;padding:5px 16px;font-size:12px;color:var(--ef-sidebar-t);cursor:pointer;transition:color .1s}
.outline-item:hover{color:var(--ef-sidebar-a)}
.outline-num{font-size:10px;min-width:14px;opacity:.5}
/* Sidebar inputs (Module Settings) */
.sidebar-field{background:var(--ef-surface)!important;border-color:var(--ef-border)!important;color:var(--ef-text)!important;font-size:11px!important;padding:5px 7px!important}
#sidebar .field-label{font-size:10px}
#sidebar .field-group{margin-bottom:8px}
.sidebar-field:focus{border-color:var(--ef-accent)!important;box-shadow:var(--focus-ring)}
/* CANVAS */
.block-wrap{width:760px;max-width:100%;position:relative}
.block-wrap+.block-wrap::before{content:'';display:block;width:2px;height:18px;background:var(--ef-border);margin:0 auto}
.block-card{background:rgba(255,255,255,.88);border:1px solid var(--ef-border);border-radius:var(--ef-radius);overflow:hidden;transition:all var(--dur-slow);position:relative;box-shadow:var(--ef-shadow-sm)}
.block-card::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--ef-radius) + 1px);background:linear-gradient(135deg,rgba(37,99,235,.08),transparent 40%,transparent 60%,rgba(124,58,237,.05));z-index:-1;opacity:0;transition:opacity .2s;pointer-events:none}
.block-card:hover{border-color:var(--ef-border-active);box-shadow:var(--ef-shadow-md)}
.block-card:hover::before{opacity:1}
.block-card.selected{border-color:var(--ef-accent);box-shadow:0 0 0 3px var(--ef-accent-glow), var(--ef-shadow-md)}
.block-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--ef-border);user-select:none;background:rgba(248,250,252,.5)}
.block-type-badge{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.block-type-label{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ef-muted)}
.block-section-tag{font-size:9px;padding:2px 8px;border-radius:99px;background:var(--ef-accent-soft);color:var(--ef-accent);font-weight:600;letter-spacing:.3px;border:1px solid rgba(37,99,235,.1)}
.block-move-btns{margin-left:auto;display:flex;gap:2px}
.block-move-btn{width:22px;height:22px;border-radius:4px;border:none;background:transparent;color:var(--ef-muted);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s}
.block-move-btn:hover{background:var(--ef-bg);color:var(--ef-text)}
.block-delete-btn{width:22px;height:22px;border-radius:4px;border:none;background:transparent;color:var(--alert-error-border, #F5A3A3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s}
.block-delete-btn:hover{background:var(--alert-error-bg);color:var(--text-error)}
.block-tips-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-disabled);background:var(--bg-surface-alt);color:var(--ef-muted);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s;line-height:1;padding:0}
.block-tips-btn:hover{background:var(--ef-border);border-color:var(--text-muted);color:var(--ef-text)}
/* Block preview button (eye icon) — legacy, kept for tips btn sizing */
.block-preview-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-disabled);background:var(--bg-surface-alt);color:var(--ef-muted);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s;line-height:1;padding:0}
.block-preview-btn:hover{background:var(--alert-info-bg,#EFF6FF);border-color:var(--brand-edu,#2563EB);color:var(--brand-edu,#2563EB)}
.block-preview-btn.active{background:var(--brand-edu,#2563EB);border-color:var(--brand-edu,#2563EB);color:var(--text-on-dark, #fff)}
/* Flip-back button — far left of back-face header */
.block-flip-back{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-default,#E2E8F0);background:var(--bg-surface-alt,#F8FAFC);color:var(--text-muted,#64748B);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;line-height:1;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.08);flex-shrink:0}
.block-flip-back:hover{background:var(--alert-info-bg,#EFF6FF);border-color:var(--brand-edu,#2563EB);color:var(--brand-edu,#2563EB);box-shadow:0 2px 8px rgba(37,99,235,.18)}
/* === Flip-to-Preview animation === */
.block-card-front{backface-visibility:hidden;position:relative;overflow:hidden}
.block-card-back{backface-visibility:hidden;transform:rotateY(180deg);position:absolute;inset:0;display:flex;flex-direction:column;border-radius:inherit;overflow:visible;background:var(--bg-page,#F0F2F5)}
.block-card-inner{transition:transform .5s ease;transform-style:preserve-3d;position:relative}
.block-card-inner.flipped{transform:rotateY(180deg)}
/* When flipped: back face flows naturally, front becomes absolute */
.block-card-inner.flipped .block-card-front{position:absolute;inset:0;overflow:hidden}
.block-card-inner.flipped .block-card-back{position:relative;inset:auto;overflow:visible}
.block-card-back-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--ef-border,#E2E8F0);background:var(--ef-surface,#fff)}
.block-card-back-label{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--brand-edu,#2563EB)}
.block-inline-preview{width:100%;border:none;min-height:80px;display:block;background:var(--bg-page,#F0F2F5)}
.block-card.previewing{border-color:var(--brand-edu,#2563EB);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
/* Complex block — collapsed (greyed out, "click to edit") */
.block-body-collapsed{cursor:pointer;background:var(--bg-surface-alt,#F8FAFC);border-top:1px solid var(--border-default,#E2E8F0);padding:14px 16px;text-align:center;transition:background .15s}
.block-body-collapsed:hover{background:var(--alert-info-bg,#EFF6FF)}
.block-body-collapsed-inner{display:flex;flex-direction:column;align-items:center;gap:4px}
.block-body-summary{font-size:13px;color:var(--text-muted,#64748B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.block-body-expand-hint{font-size:11px;color:var(--brand-edu,#2563EB);font-weight:600;letter-spacing:.3px;background:var(--ef-surface,#fff);padding:2px 12px;border-radius:99px;border:1.5px solid var(--brand-edu,#2563EB);box-shadow:0 1px 4px rgba(37,99,235,.1)}
/* Block editor fullscreen overlay */
#block-editor-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:var(--z-block-editor);align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
.block-editor-modal{background:var(--ef-surface,#fff);border-radius:14px;width:720px;max-width:95vw;min-height:300px;max-height:calc(100vh - 48px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column}
.block-editor-head{padding:14px 20px;border-bottom:1px solid var(--ef-border,#E2E8F0);display:flex;align-items:center;justify-content:space-between;background:var(--ef-surface,#fff);position:sticky;top:0;z-index:2}
.block-editor-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ef-text,#1E293B)}
.block-editor-body{padding:20px;overflow-y:auto;flex:1}
/* Speaker Notes — right-side tab on block cards */
.block-card{position:relative;overflow:visible;perspective:1200px;min-height:180px}
.block-card-inner{position:relative;z-index:2;background:inherit;border-radius:inherit}
.structural-panel>.block-card-inner{overflow:hidden}
/* ── Block side pill (review + speaker notes) ── */
.block-side-pill{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:10px;display:flex;flex-direction:column;gap:0;z-index:1;background:var(--bg-surface-alt,#F8FAFC);border:1px solid var(--border-default,#E2E8F0);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;opacity:.7;transition:opacity .2s,box-shadow .2s}
.block-card:hover .block-side-pill,.block-card.selected .block-side-pill{opacity:1;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.bsp-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:42px;height:42px;border:none;background:transparent;cursor:pointer;color:var(--text-muted,#596673);font-family:inherit;transition:background .15s,color .15s;position:relative}
.bsp-btn+.bsp-btn{border-top:1px solid var(--border-default,#E2E8F0)}
.bsp-btn:hover{background:color-mix(in srgb,var(--clr-accent,var(--ef-accent)) 10%,transparent);color:var(--clr-accent,var(--ef-accent))}
.bsp-icon{font-size:16px;line-height:1}
.bsp-label{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;line-height:1;margin-top:2px}
/* Speaker notes — active state */
.bsp-btn.bsp-speaker.has-notes{color:var(--clr-accent,var(--ef-accent))}
.bsp-btn.bsp-speaker.has-notes .bsp-icon::after{content:'';position:absolute;top:4px;right:6px;width:6px;height:6px;background:var(--clr-accent,#2563EB);border-radius:50%}
/* Review notes — greyed (no reviews = clickable to open share) */
.bsp-btn.bsp-review{color:var(--text-muted,#B0B8C4);opacity:.5}
.bsp-btn.bsp-review:hover{opacity:1;color:var(--text-muted,#64748B)}
/* Review notes — has active to-do reviews */
.bsp-btn.bsp-review.has-reviews{opacity:1;color:var(--clr-accent,var(--ef-accent))}
.bsp-btn.bsp-review.has-reviews .bsp-icon{animation:bsp-pulse 2s ease-in-out infinite}
.bsp-btn.bsp-review.has-reviews:hover .bsp-icon{animation:none}
.bsp-review-count{position:absolute;top:2px;right:2px;font-size:8px;font-weight:700;background:var(--clr-accent,#2563EB);color:var(--text-on-dark, #fff);border-radius:99px;padding:0 4px;min-width:14px;text-align:center;line-height:14px;display:none}
.bsp-btn.bsp-review.has-reviews .bsp-review-count{display:inline-block}
@keyframes bsp-pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Review notes modal (read-only viewer) */
.review-notes-body{padding:16px 0;max-height:60vh;overflow-y:auto}
.review-note-card{padding:12px 16px;border:1px solid var(--border-default,#E2E8F0);border-radius:8px;margin-bottom:10px;background:var(--bg-surface-alt,#F8FAFC)}
.review-note-meta{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.review-note-name{font-size:12px;font-weight:700;color:var(--text-primary,#1E293B)}
.review-note-email{font-size:10px;color:var(--text-muted,#596673)}
.review-note-date{font-size:10px;color:var(--text-muted,#CBD5E1);margin-left:auto}
.review-note-text{font-size:13px;color:var(--text-secondary,#334155);line-height:1.6}
.review-note-delete{margin-left:auto;background:none;border:none;cursor:pointer;font-size:14px;color:var(--text-muted,#596673);padding:2px 6px;border-radius:4px;transition:color .15s,background .15s;font-family:inherit}
.review-note-delete:hover{color:var(--text-error, #DC2626);background:rgba(220,38,38,.08)}
.review-note-resolve{background:none;border:1px solid var(--border-default,#E2E8F0);cursor:pointer;font-size:11px;color:var(--text-muted,#64748B);padding:3px 10px;border-radius:5px;transition:all .15s;font-family:inherit;white-space:nowrap}
.review-note-resolve:hover{border-color:var(--brand-guide,#059669);color:var(--brand-guide,#059669);background:rgba(5,150,105,.06)}
.review-note-resolve.is-resolved{border-color:var(--brand-guide,#059669);color:var(--brand-guide,#059669);background:rgba(5,150,105,.08)}
.review-note-card.resolved{border-color:var(--brand-guide,#059669);border-left:3px solid var(--brand-guide,#059669);background:rgba(5,150,105,.03)}
.review-note-card.resolved .review-note-text{color:var(--text-muted,#596673);text-decoration:line-through;text-decoration-color:var(--text-muted,#CBD5E1)}
.bsp-review.all-resolved{border-color:var(--brand-guide,#059669) !important;color:var(--brand-guide,#059669) !important}
.bsp-review.all-resolved .bsp-review-count{background:var(--brand-guide,#059669) !important}

/* Delete block confirmation popup */
.ef-confirm-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:var(--z-confirm);align-items:center;justify-content:center}
.ef-confirm-overlay.open{display:flex}
.ef-confirm-card{background:var(--bg-surface,#fff);border-radius:14px;padding:28px 32px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.18);animation:efConfirmIn .15s ease}
@keyframes efConfirmIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ef-confirm-icon{font-size:36px;margin-bottom:12px;opacity:.8}
.ef-confirm-title{font-size:17px;font-weight:700;color:var(--text-primary,#1A1A2E);margin-bottom:6px}
.ef-confirm-text{font-size:13px;color:var(--text-muted,#5A6578);margin-bottom:20px}
.ef-confirm-actions{display:flex;gap:10px}
.block-tip-item{padding:10px 0;border-bottom:1px solid var(--ef-border);font-size:13px;line-height:1.55;color:var(--ef-text)}
.block-tip-item:last-child{border-bottom:none}
.block-tip-item strong{color:var(--ef-accent);font-weight:600}
/* block hint banner */
.block-hint{background:var(--bg-surface-alt);border-bottom:1px solid var(--ef-border);padding:6px 14px;font-size:11px;color:var(--ef-muted);line-height:1.4}
.ef-builtin-continue{margin-top:10px;padding:6px 0;font-size:11px;color:var(--ef-muted);text-align:center;font-style:italic}
.block-body{padding:16px;container-type:inline-size;container-name:efc}
.block-body input,.block-body textarea,.block-body select{font-family:var(--ef-font-body);font-size:13px;color:var(--ef-text);border:1.5px solid var(--ef-border);border-radius:5px;padding:5px 8px;outline:none;background:var(--ef-surface);transition:border-color var(--dur-normal)}
.block-body input:focus,.block-body textarea:focus,.block-body select:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.block-body input[type="radio"],.block-body input[type="checkbox"]{width:auto;padding:0;border:none;background:none}
.block-title-input{font-family:var(--font-content-head);font-size:18px;font-weight:400;color:var(--ef-text);border:1.5px solid var(--ef-border);border-radius:6px;padding:6px 10px;outline:none;background:var(--ef-surface);width:100%;margin-bottom:8px;transition:border-color var(--dur-normal)}
.block-title-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.block-subhead-input{font-family:var(--font-content-body);font-size:15px;font-weight:600;color:var(--ef-text);border:1.5px solid var(--ef-border);border-radius:6px;padding:6px 10px;outline:none;background:var(--ef-surface);width:100%;margin-bottom:6px;transition:border-color var(--dur-normal)}
.block-subhead-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.block-content-input{font-family:var(--font-content-body);font-size:14px;line-height:1.6;color:var(--ef-text);border:1.5px solid var(--ef-border);border-radius:6px;padding:8px 10px;outline:none;background:var(--ef-surface);width:100%;resize:vertical;min-height:50px;transition:border-color var(--dur-normal)}
.block-content-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.field-row{margin-bottom:8px}
.field-row label{display:block;font-size:11px;font-weight:500;color:var(--ef-muted);margin-bottom:3px}
.field-row input,.field-row textarea{width:100%;padding:6px 9px;border:1.5px solid var(--ef-border);border-radius:6px;font-family:var(--ef-font-body);font-size:13px;outline:none;transition:border-color .15s;background:var(--ef-surface);color:var(--ef-text)}
.field-row input:focus,.field-row textarea:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.objectives-list{list-style:none;margin-top:8px}
.objective-item{display:flex;align-items:flex-start;gap:8px;padding:4px 0}
.obj-bullet{width:6px;height:6px;border-radius:50%;background:var(--clr-accent);margin-top:6px;flex-shrink:0}
.obj-input{flex:1;border:1.5px solid var(--ef-border);border-radius:5px;padding:4px 8px;outline:none;font-family:var(--font-content-body);font-size:14px;color:var(--ef-text);background:var(--ef-surface);line-height:1.5;transition:border-color .15s}
.obj-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.add-more-btn{font-size:12px;color:var(--ef-accent);background:color-mix(in srgb,var(--clr-accent,var(--ef-accent)) 4%,var(--ef-surface,#fff));border:1px dashed var(--ef-accent);border-radius:5px;cursor:pointer;padding:6px 10px;font-family:var(--ef-font-body);font-weight:500;display:block;width:100%;text-align:center;margin-top:4px;opacity:.7;transition:all .15s}
.add-more-btn:hover{opacity:1;background:color-mix(in srgb,var(--clr-accent,var(--ef-accent)) 8%,var(--ef-surface,#fff))}
.embed-area{background:var(--ef-bg);border-radius:var(--ef-radius);padding:14px;border:1.5px solid var(--ef-border);margin-bottom:8px}
.embed-examples-toggle{font-size:12px;color:var(--ef-accent);background:none;border:none;cursor:pointer;font-family:var(--ef-font-body);font-weight:500;margin-top:6px;text-decoration:underline;text-underline-offset:2px}
.resource-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--ef-border);border-radius:var(--ef-radius);margin-bottom:8px;background:var(--ef-bg)}
.resource-input{border:1.5px solid var(--ef-border);border-radius:5px;padding:4px 8px;outline:none;font-family:var(--font-content-body);font-size:13px;background:var(--ef-surface);color:var(--ef-text);width:100%;transition:border-color .15s}
.resource-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.resource-input.url{color:var(--clr-accent);font-size:12px}
/* APA ref rows */
.apa-ref-row{border:1px solid var(--ef-border);border-radius:var(--ef-radius);margin-bottom:8px;overflow:hidden}
.apa-ref-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--ef-bg);border-bottom:1px solid var(--ef-border)}
.apa-ref-preview{font-size:11px;color:var(--ef-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apa-ref-body{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.apa-field{display:flex;flex-direction:column;gap:3px}
.apa-field label{font-size:10px;font-weight:600;color:var(--ef-muted);letter-spacing:.4px;text-transform:uppercase}
.apa-field input{border:1px solid var(--ef-border);border-radius:4px;padding:4px 7px;font-size:12px;font-family:var(--ef-font-body);outline:none;transition:border-color .15s}
.apa-field input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.apa-full{grid-column:1/-1}
.apa-formatted{font-size:12px;color:var(--ef-muted);line-height:1.5;padding:6px 10px;background:var(--ef-bg);border-radius:4px;margin-top:4px;grid-column:1/-1;font-style:italic}
/* inline APA for image */
.inline-apa-section{border-top:1px solid var(--ef-border);margin-top:10px;padding-top:10px}
.inline-apa-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ef-muted);cursor:pointer;margin-bottom:8px}
/* KC */
.question-card{border:1px solid var(--ef-border);border-radius:var(--ef-radius);margin-bottom:10px;overflow:hidden}
.question-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--ef-bg);border-bottom:1px solid var(--ef-border)}
.q-num{font-size:11px;font-weight:600;color:var(--ef-muted)}
.q-type-tag{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.q-type-mc{background:var(--alert-info-bg, #EFF6FF);color:var(--alert-info-text, #1D4ED8)}.q-type-likert{background:var(--alert-success-bg);color:var(--alert-success-text, #166534)}.q-type-free{background:var(--alert-warning-bg, #FFF7ED);color:var(--alert-warning-text, #9A3412)}
.q-require-toggle{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ef-muted);cursor:pointer}
.toggle-box{width:30px;height:16px;border-radius:8px;background:var(--ef-border);position:relative;transition:background .2s;flex-shrink:0}
.toggle-box.on{background:var(--clr-accent)}
.toggle-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--bg-surface);transition:left .2s}
.toggle-box.on .toggle-knob{left:16px}
.question-body{padding:12px}
.q-prompt-input{width:100%;border:1.5px solid var(--ef-border);border-radius:6px;padding:7px 10px;outline:none;font-family:var(--font-content-body);font-size:14px;font-weight:500;color:var(--ef-text);background:var(--ef-surface);margin-bottom:10px;transition:border-color .15s}
.q-prompt-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.mc-option{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mc-correct-radio{width:14px;height:14px;cursor:pointer;accent-color:var(--ef-accent)}
.mc-option-input{flex:1;border:1px solid var(--ef-border);border-radius:5px;padding:5px 8px;font-family:var(--font-content-body);font-size:13px;outline:none;transition:border-color .15s}
.mc-option-input.correct{border-color:var(--text-success);background:var(--alert-success-bg)}
.q-explanation-area{margin-top:10px;padding-top:10px;border-top:1px solid var(--ef-border)}
.q-explanation-area textarea{width:100%;padding:6px 8px;border:1px solid var(--ef-border);border-radius:5px;font-family:var(--ef-font-body);font-size:12px;color:var(--ef-muted);resize:none;outline:none;min-height:42px;transition:border-color .15s}
.add-q-bar{display:flex;gap:6px;margin-top:10px}
.add-q-btn{padding:6px 10px;border-radius:5px;border:1px dashed var(--ef-accent);background:transparent;font-size:12px;cursor:pointer;color:var(--ef-accent);font-family:var(--ef-font-body);transition:all .15s;flex:1;text-align:center;opacity:.7}
.add-q-btn:hover{opacity:1;background:rgba(45,156,219,.06)}
.add-q-btn:hover{border-color:var(--ef-accent);color:var(--ef-accent)}
.delete-q-btn{margin-left:auto;background:none;border:none;color:var(--alert-error-border, #F5A3A3);cursor:pointer;font-size:14px;padding:0 4px;transition:color .1s}
.delete-q-btn:hover{color:var(--text-error)}
#add-block-area{display:none}
/* PANEL */
.panel-section{padding:16px;border-bottom:1px solid var(--ef-border)}
.panel-title{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ef-accent);margin-bottom:12px}
.field-group{margin-bottom:12px}
.field-label{display:block;font-size:11px;font-weight:500;color:var(--ef-accent);margin-bottom:4px}
.field-input,.field-select{width:100%;padding:7px 9px;border:1.5px solid var(--ef-border);border-radius:6px;font-family:var(--ef-font-body);font-size:13px;outline:none;background:var(--ef-surface);color:var(--ef-text);transition:border-color var(--dur-normal)}
.field-input:focus,.field-select:focus{border-color:var(--ef-accent);box-shadow:var(--focus-ring)}
.color-row{display:flex;align-items:center;gap:8px}
.color-swatch{width:28px;height:28px;border-radius:5px;border:1.5px solid var(--ef-border);cursor:pointer;flex-shrink:0}
.color-hex{flex:1;padding:5px 8px;border:1.5px solid var(--ef-border);border-radius:5px;font-family:monospace;font-size:12px;outline:none;background:var(--ef-surface);color:var(--ef-text)}
.save-theme-btn{width:100%;padding:7px 12px;border-radius:var(--ef-radius);border:1.5px solid var(--ef-border);background:var(--ef-surface);font-family:var(--ef-font-body);font-size:12px;font-weight:500;cursor:pointer;color:var(--ef-text);margin-top:8px;transition:all var(--dur-normal)}
.save-theme-btn:hover{border-color:var(--ef-accent);color:var(--ef-accent);background:var(--ef-bg)}
.empty-state{text-align:center;padding:24px 16px;color:var(--ef-muted);font-size:13px;line-height:1.5}
/* MODALS */
#add-block-overlay,#embed-examples-overlay,#preview-overlay,#active-users-overlay,#guidelines-overlay,#readability-overlay,#new-module-overlay,#debug-overlay,#upgrade-overlay,#block-tips-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:var(--z-modal);align-items:center;justify-content:center}
#add-block-overlay.open,#embed-examples-overlay.open,#preview-overlay.open,#active-users-overlay.open,#guidelines-overlay.open,#readability-overlay.open,#new-module-overlay.open,#debug-overlay.open,#block-tips-overlay.open{display:flex}
#add-block-modal{background:var(--ef-surface);border-radius:12px;width:680px;max-width:95vw;max-height:82vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(0,0,0,.18)}
#add-block-modal-head{padding:16px 20px;border-bottom:1px solid var(--ef-border);display:flex;align-items:center;justify-content:space-between}
#add-block-modal-head h3{font-family:var(--ef-font-head);font-size:18px;font-weight:400}
#add-block-modal-body{padding:16px;overflow-y:auto;display:block}
.add-block-option{border:1.5px solid var(--ef-border);border-radius:var(--ef-radius);padding:14px;cursor:pointer;transition:border-color var(--dur-normal),transform var(--dur-fast)}
.add-block-option:hover{border-color:var(--ef-accent);transform:translateY(-1px)}
.abo-dot{width:8px;height:8px;border-radius:50%;margin-bottom:8px}
.abo-name{font-size:13px;font-weight:600;color:var(--ef-text);margin-bottom:3px}
.abo-desc{font-size:11px;color:var(--ef-muted);line-height:1.4}
.modal-card{background:var(--ef-surface);border-radius:12px;width:560px;max-width:95vw;max-height:75vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--ef-border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;background:var(--ef-surface);z-index:1}
.modal-head h3{font-size:15px;font-weight:600}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ef-muted)}
.modal-body{padding:16px;overflow-y:auto}
.embed-example-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--ef-border)}
.embed-example-row:last-child{border-bottom:none}
.embed-example-name{font-size:12px;font-weight:600;margin-bottom:2px}
.embed-example-inst{font-size:11px;color:var(--ef-muted);line-height:1.4}
.embed-example-url{font-size:11px;color:var(--ef-accent);margin-top:2px;font-family:monospace}
#preview-overlay{z-index:var(--z-preview);padding:24px;background:rgba(15,23,42,.9);align-items:center;justify-content:center;flex-direction:column}
#preview-modal{background:var(--ef-surface);border-radius:10px;width:min(1024px,calc(100vw - 48px));height:min(620px,calc(100vh - 100px));overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
#preview-modal-head{padding:8px 16px;border-bottom:1px solid var(--ef-border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--ef-surface)}
#preview-modal-head h3{font-size:13px;font-weight:600;flex:1}
#preview-device-label{font-size:10px;font-weight:500;color:var(--ef-muted);letter-spacing:.3px;padding:2px 8px;border:1px solid var(--ef-border);border-radius:4px;white-space:nowrap}
#pv-online{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-dark-mid, #1E293B)}
#pv-online-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:100%;overflow:hidden;background:var(--bg-surface, #fff);border-radius:0 0 8px 8px}
#preview-iframe{position:absolute;inset:0;width:100%;height:100%;border:none;background:var(--bg-surface, #fff)}
#toast-container{position:fixed;bottom:20px;right:20px;z-index:var(--z-top);display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 16px;border-radius:var(--ef-radius);background:var(--ef-sidebar);color:var(--ef-sidebar-a);font-size:13px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideIn .2s ease}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.section-divider{width:100%;max-width:760px;display:flex;align-items:center;gap:10px;padding:6px 0}
.section-divider-line{flex:1;height:1px;background:linear-gradient(to right,var(--clr-accent),rgba(37,99,235,.08))}
.section-divider-label{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--clr-accent);white-space:nowrap}

/* Uniform placeholder colour across all authoring inputs */
.block-body input::placeholder,.block-body textarea::placeholder{color:var(--text-muted);opacity:1}

#custom-theme-overlay.open{display:flex!important}

/* PICK UP / PLACE SYSTEM */
.pickup-btn{padding:4px 9px;border-radius:4px;border:1.5px solid var(--ef-border);background:transparent;color:var(--ef-muted);font-family:var(--ef-font-body);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.pickup-btn:hover{border-color:var(--ef-accent);color:var(--ef-primary);background:color-mix(in srgb,var(--ef-accent) 8%,var(--ef-surface))}
.block-card.picked-up{box-shadow:0 0 0 3px var(--pickup-color,#F59E0B),0 4px 20px rgba(0,0,0,.12);border-color:var(--pickup-color,#F59E0B)!important;opacity:.85;transform:scale(.995)}
.place-zone{width:100%;max-width:760px;padding:4px 0;display:none}
.place-zone.active{display:block}
.place-btn{width:100%;padding:7px 14px;border-radius:6px;border:2px dashed var(--pickup-color,#F59E0B);background:color-mix(in srgb,var(--pickup-color,#F59E0B) 6%,transparent);color:var(--ef-muted);font-family:var(--ef-font-body);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.place-btn:hover{background:color-mix(in srgb,var(--pickup-color,#F59E0B) 14%,transparent);color:var(--ef-text)}
.place-btn .place-type{color:var(--pickup-color,#F59E0B);font-weight:700}
.cancel-pickup-bar{width:100%;max-width:760px;text-align:center;margin-bottom:8px;display:none}
.cancel-pickup-bar.active{display:block}
/* =============================================================
   HEADER BLOCK — themed accent styling + collapsible sections
   ============================================================= */
.block-card.header-block{background:color-mix(in srgb,var(--clr-accent) 18%,var(--ef-surface));border:1.5px solid color-mix(in srgb,var(--clr-accent) 40%,var(--ef-border))}
.block-card.header-block .block-header{border-bottom-color:color-mix(in srgb,var(--clr-accent) 22%,transparent)}
.block-card.header-block .block-section-tag{background:color-mix(in srgb,var(--clr-accent) 18%,transparent);color:var(--clr-primary)}
.block-card.header-block .pickup-btn,.block-card.header-block .block-delete-btn{border-color:color-mix(in srgb,var(--clr-accent) 25%,var(--ef-border));color:color-mix(in srgb,var(--clr-accent) 60%,var(--ef-muted))}
.block-card.header-block .pickup-btn:hover{border-color:var(--clr-accent);color:var(--clr-primary);background:color-mix(in srgb,var(--clr-accent) 12%,transparent)}
.block-card.header-block .block-delete-btn:hover{border-color:var(--text-error);color:var(--text-error);background:var(--alert-error-bg)}
.block-card.header-block:hover{border-color:var(--clr-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--clr-accent) 18%,transparent)}
.block-card.section-collapsed .block-header{border-bottom:none}
.section-collapsed-title{padding:4px 14px 8px;font-size:14px;font-weight:600;color:var(--clr-primary);font-family:var(--ef-font-head);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-collapsed-count{font-size:10px;padding:2px 8px;border-radius:3px;background:color-mix(in srgb,var(--clr-accent) 8%,transparent);color:var(--ef-muted);font-weight:500;letter-spacing:.2px;margin-left:4px}
/* Section picked-up state — accent-colored glow */
.block-card.section-picked-up{box-shadow:0 0 0 3px var(--clr-accent),0 4px 20px rgba(0,0,0,.12);border-color:var(--clr-accent)!important;opacity:.85;transform:scale(.995)}

/* PERSISTENT INSERT ZONE — always-visible "+" between blocks */
.ef-insert-zone{width:100%;max-width:760px;display:flex;align-items:center;gap:0;padding:8px 0;transition:all .15s;height:auto;min-height:28px}
.ef-insert-line{flex:1;height:1px;background:var(--clr-accent,var(--ef-accent));opacity:0;transition:opacity .15s}
.ef-insert-zone:hover .ef-insert-line,.ef-insert-zone:focus-within .ef-insert-line{opacity:.35}
.ef-insert-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-default,#e2e8f0);background:var(--ef-surface);color:var(--text-muted,#94a3b8);font-size:16px;font-weight:700;line-height:22px;text-align:center;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0}
.ef-insert-zone:hover .ef-insert-btn,.ef-insert-btn:focus-visible{border-color:var(--clr-accent,var(--ef-accent));color:var(--clr-accent,var(--ef-accent))}
.ef-insert-btn:hover{background:var(--clr-accent,var(--ef-accent));color:#fff;transform:scale(1.1);border-color:var(--clr-accent,var(--ef-accent))}
/* continue block preview in editor */
.continue-preview{text-align:center;padding:8px 0}

/* ── AI HELP ────────────────────────────────────────────────────── */
/* External reference rows in modal */
.ai-ref-row{display:flex;align-items:center;margin-bottom:6px}

/* Canvas mask — covers entire #app area while AI works */
#ai-mode-mask{position:fixed;top:var(--ohh-height,64px);left:0;right:0;bottom:0;background:rgba(15,23,42,.38);z-index:150;display:none;pointer-events:all;backdrop-filter:blur(1px)}
#ai-mode-mask.active{display:block}

/* AI control footer */
#ai-control-footer{position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--ef-surface);border-top:2px solid var(--brand-lume);z-index:var(--z-ai-footer);display:none;align-items:center;padding:0 20px;gap:14px;box-shadow:0 -4px 16px rgba(124,58,237,.12)}
#ai-control-footer.active{display:flex}
.ai-footer-btn{padding:7px 16px;font-size:13px;font-weight:500}
.ai-stop-btn{color:var(--text-error);border-color:var(--alert-error-border, #FECDD3)}
.ai-stop-btn:hover{background:var(--alert-error-bg);border-color:var(--text-error);color:var(--text-error)}
.continue-preview-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 24px;border-radius:99px;border:1.5px solid var(--ef-accent);color:var(--ef-accent);font-size:13px;font-weight:500;background:transparent;cursor:default}
/* quote block in editor */
.quote-preview{border-left:4px solid var(--clr-accent);padding:12px 16px;background:var(--bg-surface-alt);border-radius:0 var(--ef-radius) var(--ef-radius) 0;margin-bottom:8px}
/* introduction block */
.position-locked-badge{font-size:10px;padding:2px 8px;border-radius:3px;background:var(--alert-warning-bg, #FEF9C3);color:var(--text-warning, #854D0E);font-weight:600;letter-spacing:.3px;margin-left:auto;cursor:default;white-space:nowrap}
.intro-cover{position:relative;width:100%;height:160px;background:color-mix(in srgb,var(--clr-accent) 6%,var(--bg-disabled, #E8EDF2));border:1.5px solid color-mix(in srgb,var(--clr-accent) 30%,var(--ef-border));border-radius:6px 6px 0 0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:14px 10px;cursor:default}
.intro-cover-selector{border:1.5px solid color-mix(in srgb,var(--clr-accent) 30%,var(--ef-border));border-top:none;border-radius:0 0 6px 6px;padding:6px 10px;background:var(--ef-surface,#fff)}
.intro-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.intro-cover-placeholder{font-size:84px;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);z-index:1;opacity:.18;pointer-events:none;user-select:none}
.intro-cover-label-opt{font-weight:400;letter-spacing:.3px;text-transform:none;font-size:9px;color:var(--ef-muted)}
.intro-cover-url-wrap{position:relative;z-index:1;width:100%;margin-top:18px;display:flex;gap:6px;align-items:center}
.intro-cover-url-input{flex:1;min-width:0;padding:6px 10px;border:1.5px solid rgba(0,0,0,.08);border-radius:6px;font-size:13px;font-family:var(--ef-font-body);outline:none;background:var(--bg-surface, #fff);color:var(--ef-text);transition:border-color .15s}
.intro-cover-url-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.intro-cover-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px;background:linear-gradient(to top,rgba(15,23,42,.7) 0%,transparent 100%)}
/* Standalone image block slot */
.img-slot{position:relative;width:100%;min-height:160px;background:var(--bg-disabled, #E8EDF2);border-radius:8px 8px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 16px;overflow:hidden;cursor:default}
.img-slot-selector{border:1.5px solid var(--ef-border);border-top:none;border-radius:0 0 8px 8px;padding:6px 10px;background:var(--ef-surface,#fff);margin-bottom:8px}
.img-slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:8px}
.img-slot-placeholder{font-size:84px;line-height:1;position:relative;z-index:1;opacity:.18;pointer-events:none;user-select:none}
.img-slot-url-wrap{position:relative;z-index:1;width:100%;display:flex;gap:6px;align-items:center}
.img-slot-url-input{flex:1;min-width:0;padding:6px 10px;border:1.5px solid rgba(0,0,0,.08);border-radius:6px;font-size:13px;font-family:var(--ef-font-body);outline:none;background:var(--bg-surface, #fff);color:var(--ef-text);transition:border-color .15s}
.img-slot-url-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
/* Upload / file selector buttons in block editors */
.ef-upload-btn{padding:5px 10px;font-size:11px;font-weight:600;border:1.5px solid var(--ef-border);border-radius:6px;background:var(--ef-surface);color:var(--ef-muted);cursor:pointer;white-space:nowrap;font-family:var(--ef-font-body);transition:all .15s;flex-shrink:0}
.ef-upload-btn:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.ef-file-empty-btn{width:100%;display:block;text-align:center;border:1px dashed color-mix(in srgb,var(--clr-accent) 40%,var(--ef-border));padding:8px 12px;font-size:12px;color:color-mix(in srgb,var(--clr-accent) 60%,var(--ef-muted));background:color-mix(in srgb,var(--clr-accent) 4%,transparent);opacity:.75}
.ef-file-empty-btn:hover{opacity:1;background:color-mix(in srgb,var(--clr-accent) 10%,transparent);border-color:var(--clr-accent);color:var(--clr-accent)}
.ef-file-selector{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1.5px solid var(--ef-border);border-radius:6px;background:var(--ef-surface)}
.ef-file-selector-compact{gap:6px;padding:4px 6px}
.ef-file-selector-name{flex:1;min-width:0;font-size:11px;color:var(--ef-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-file-thumb{width:28px;height:28px;object-fit:cover;border-radius:3px;flex-shrink:0;border:1px solid var(--ef-border)}
.intro-fields{padding:16px;padding-bottom:24px;display:flex;flex-direction:column;gap:10px}
.intro-field-label{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--clr-accent);margin-bottom:3px;opacity:.8}
.intro-input{background:var(--ef-surface);border:1.5px solid var(--ef-border);border-radius:6px;padding:8px 10px;color:var(--ef-text);font-family:var(--font-content-body);font-size:14px;outline:none;width:100%;transition:border-color .15s}
.intro-input:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.intro-input::placeholder{color:var(--ef-muted);opacity:.6}
.intro-input.title-input{font-family:var(--font-content-head);font-size:20px;font-weight:400}
.intro-obj-item{display:flex;align-items:center;gap:8px;padding:2px 0}
.intro-obj-bullet{width:5px;height:5px;border-radius:50%;background:var(--clr-accent);flex-shrink:0}
.intro-obj-input{flex:1;background:transparent;border:none;outline:none;color:var(--ef-text);font-family:var(--font-content-body);font-size:13px;padding:3px 0;border-bottom:1px solid var(--ef-border);transition:border-color .15s}
.intro-obj-input:focus{border-bottom-color:var(--ef-accent);box-shadow:var(--focus-ring)}
.intro-obj-input::placeholder{color:var(--ef-muted);opacity:.5}
.intro-author-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.intro-author-name{flex:1;background:var(--ef-surface);border:1.5px solid var(--ef-border);border-radius:5px;padding:5px 8px;color:var(--ef-text);font-family:var(--ef-font-body);font-size:13px;outline:none;transition:border-color .15s}
.intro-author-name:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.intro-author-name::placeholder{color:var(--ef-muted);opacity:.5}
.intro-author-cred{width:140px;background:var(--ef-surface);border:1.5px solid var(--ef-border);border-radius:5px;padding:5px 8px;color:var(--ef-muted);font-family:var(--ef-font-body);font-size:12px;outline:none;transition:border-color .15s}
.intro-author-cred:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.intro-author-cred::placeholder{color:var(--ef-muted);opacity:.5}
.intro-add-btn{font-size:12px;color:color-mix(in srgb,var(--clr-accent) 60%,var(--ef-muted));background:color-mix(in srgb,var(--clr-accent) 4%,var(--ef-surface,#fff));border:1px dashed color-mix(in srgb,var(--clr-accent) 40%,var(--ef-border));border-radius:5px;padding:6px 10px;cursor:pointer;font-family:var(--ef-font-body);transition:all .15s;margin-top:4px;opacity:.8;display:block;width:100%;text-align:center}
.intro-add-btn:hover{opacity:1;border-color:var(--clr-accent);color:var(--clr-accent);background:color-mix(in srgb,var(--clr-accent) 8%,var(--ef-surface,#fff))}
.intro-del-btn{background:none;border:none;color:var(--alert-error-border, #F5A3A3);cursor:pointer;font-size:13px;padding:0 2px;transition:color .1s;flex-shrink:0}
.intro-del-btn:hover{color:var(--text-error)}
.intro-section-label{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ef-accent);margin-bottom:6px;margin-top:4px}
/* list style radio toggle */
.list-style-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.list-style-opt{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ef-muted);cursor:pointer}
.list-style-opt input{accent-color:var(--ef-accent);cursor:pointer}

/* =============================================================
   SIDEBAR BLOCK GROUPS
   ============================================================= */
.sidebar-group-label{font-size:9px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--ef-accent);padding:6px 8px 2px;margin-top:2px}

/* =============================================================
   ADD BLOCK MODAL — GROUP HEADERS
   ============================================================= */
.abo-group-header{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ef-muted);padding:10px 0 4px;border-bottom:1px solid var(--ef-border);margin-bottom:2px}
.abo-group-header:first-child{padding-top:0}
.abo-group-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* =============================================================
   ACTIVE USERS PANEL
   ============================================================= */
.au-list{list-style:none;padding:0;margin:0 0 8px}
.au-item{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:11px;color:var(--ef-muted);overflow:hidden}
.au-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.au-dot-current{background:var(--text-success)}
.au-dot-recent{background:var(--text-warning)}
.au-dot-idle{background:var(--bg-disabled)}
.au-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ef-text);font-weight:500;font-size:11px}
.au-email.au-you{color:var(--ef-accent)}
.au-ip{font-family:monospace;font-size:10px;color:var(--ef-muted);opacity:.7;flex-shrink:0}
.au-banner{font-size:10px;line-height:1.4;padding:6px 8px;border-radius:5px;margin-bottom:6px}
.au-banner-full{background:var(--alert-error-bg);color:var(--alert-error-text, #991B1B);border:1px solid var(--alert-error-border, #FECACA)}
.au-banner-conflict{background:var(--alert-warning-bg, #FFFBEB);color:var(--text-warning, #92400E);border:1px solid var(--alert-warning-border, #FDE68A)}
.show-all-btn{width:100%;padding:7px 12px;border-radius:var(--ef-radius);border:1.5px solid var(--ef-border);background:var(--ef-surface);font-family:var(--ef-font-body);font-size:12px;font-weight:500;cursor:pointer;color:var(--ef-text);transition:all var(--dur-normal)}
.show-all-btn:hover{border-color:var(--ef-accent);color:var(--ef-accent);background:var(--ef-bg)}
/* Upgrade button */
.upgrade-btn{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;border:1px solid var(--border-disabled);background:var(--bg-surface-alt, #F9FAFB);color:var(--text-muted, #6B7280);cursor:pointer;transition:all .15s;margin-left:6px;vertical-align:middle;letter-spacing:.3px}
.upgrade-btn:hover{border-color:var(--ef-accent);color:var(--ef-accent);background:var(--alert-info-bg, #EFF6FF)}
/* Upgrade promo modal content */
.upgrade-promo{text-align:center;padding:24px 20px}
.upgrade-promo-icon{font-size:40px;margin-bottom:12px}
.upgrade-promo h3{font-size:18px;color:var(--ef-text);margin-bottom:8px}
.upgrade-promo p{font-size:14px;color:var(--ef-muted);line-height:1.6;margin-bottom:20px}
.upgrade-promo-actions{display:flex;gap:8px;justify-content:center}

/* =============================================================
   ACTIVE USERS + GUIDELINES MODAL OVERLAYS
   ============================================================= */
#active-users-overlay,#guidelines-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:var(--z-modal);align-items:center;justify-content:center}
#active-users-overlay.open,#guidelines-overlay.open{display:flex}

/* =============================================================
   WRITING GUIDE MODAL
   ============================================================= */
.guide-section{padding:14px 0;border-bottom:1px solid var(--ef-border)}
.guide-section:last-child{border-bottom:none}
.guide-section-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ef-primary);margin-bottom:6px;font-family:var(--ef-font-head)}
.guide-icon{font-size:18px;flex-shrink:0}
.guide-intro{font-size:12px;color:var(--ef-muted);margin-bottom:8px;font-style:italic;line-height:1.5}
.guide-bullets{list-style:disc;padding-left:20px;margin:0}
.guide-bullets li{font-size:13px;color:var(--ef-text);line-height:1.6;margin-bottom:5px}
/* Checklist styles */
.guide-checklist{list-style:none;padding:0 16px;margin:0 0 8px}
.guide-checklist-item{padding:6px 0 6px 28px;position:relative;font-size:13px;line-height:1.5;color:var(--ef-text);border-bottom:1px solid var(--ef-border)}
.guide-checklist-item:last-child{border-bottom:none}
.guide-checklist-item::before{content:'';position:absolute;left:4px;top:9px;width:16px;height:16px;border:1.5px solid var(--ef-border);border-radius:3px;background:var(--ef-surface)}
.guide-checklist-group{margin-bottom:14px}
.guide-checklist-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ef-accent);margin-bottom:4px;padding:0 0 0 2px}
.guide-full-link{margin-top:14px;padding-top:10px;padding-bottom:18px;border-top:1px solid var(--ef-border);text-align:center}
.guide-full-link a{font-size:13px;font-weight:600;color:var(--ef-accent);text-decoration:none;transition:opacity .15s}
.guide-full-link a:hover{opacity:.75}

/* =============================================================
   MODULE STATISTICS
   ============================================================= */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.stat-card{background:var(--ef-bg);border-radius:6px;padding:8px 10px;text-align:center}
.stat-value{font-size:16px;font-weight:700;color:var(--ef-text);line-height:1.2}
.stat-label{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ef-muted);margin-top:2px}
.stat-time{text-align:center;padding:10px 8px;background:linear-gradient(135deg,var(--ef-bg),var(--ef-surface));border-radius:8px;border:1px solid var(--ef-border)}
.stat-time-value{font-family:var(--ef-font-head);font-size:28px;color:var(--ef-primary);line-height:1.1}
.stat-time-label{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ef-muted);margin-top:3px}

/* =============================================================
   COLLAPSIBLE SECTIONS
   ============================================================= */
.collapse-arrow{font-size:8px;display:inline-block;transition:transform .2s}
/* LEFT SIDEBAR collapse — right-aligned text, arrow on RIGHT, points left ◄ when collapsed */
.sidebar-collapse-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:5px;justify-content:flex-end}
.sidebar-collapse-toggle:hover{color:var(--ef-sidebar-a)}
.sidebar-collapse-toggle.collapsed .collapse-arrow{transform:rotate(90deg)}
.sidebar-section .collapsed+div,.sidebar-section .collapsed~div:not(.sidebar-label){display:none}
.sidebar-collapsed{display:none!important}
/* RIGHT PANEL collapse — left-aligned text, arrow on LEFT, points right ► when collapsed */
.panel-collapse-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:5px}
.panel-collapse-toggle:hover{color:var(--ef-accent)}
.panel-collapse-toggle.collapsed .collapse-arrow{transform:rotate(-90deg)}
.panel-collapsible{transition:max-height .2s ease}
.panel-collapsible.collapsed{display:none}
/* Sidebar outline: header collapse */
.outline-child-hidden{display:none!important}

/* THEME CONTEXT MENU */
.theme-ctx-menu{font-family:var(--ef-font-body)}
.theme-ctx-item{padding:7px 12px;font-size:12px;color:var(--ef-text);cursor:pointer;border-radius:4px;transition:background .1s}
.theme-ctx-item:hover{background:var(--ef-bg)}
.theme-ctx-item.disabled{color:var(--ef-border);cursor:default;pointer-events:none}

/* FORMATTING TOOLBAR — sidebar */
.fmt-label{transition:color .15s}
.fmt-toolbar{display:flex;gap:4px;padding:4px 8px;justify-content:center}
.fmt-toolbar.active~.fmt-label,.fmt-section.active .fmt-label{color:var(--ef-sidebar-a)!important}
.fmt-btn{width:28px;height:28px;border:1.5px solid rgba(255,255,255,.1);border-radius:5px;background:transparent;color:rgba(148,163,184,.35);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:var(--ef-font-body)}
.fmt-btn:hover{border-color:rgba(255,255,255,.18);color:rgba(148,163,184,.6)}
.fmt-toolbar.active .fmt-btn{color:var(--ef-sidebar-t);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.fmt-toolbar.active .fmt-btn:hover{color:var(--text-on-dark, #fff);border-color:var(--clr-accent);background:color-mix(in srgb,var(--clr-accent) 12%,transparent)}
.fmt-toolbar.active .fmt-btn.on{color:var(--text-on-dark, #fff);border-color:var(--clr-accent);background:var(--clr-accent)}

/* INLINE FORMATTING TOOLBAR — appears next to field labels */
.inline-fmt{display:flex;gap:3px;margin-left:auto}
/* Default: greyed out, non-interactive */
.inline-fmt-btn{width:20px;height:20px;border:1px solid var(--ef-border);border-radius:3px;background:var(--ef-surface);color:var(--border-disabled);font-size:10px;cursor:default;display:flex;align-items:center;justify-content:center;transition:all .12s;font-family:var(--ef-font-body);padding:0;pointer-events:none;opacity:.5}
/* Active: field is focused */
.inline-fmt.active .inline-fmt-btn{color:var(--ef-muted);cursor:pointer;pointer-events:auto;opacity:1}
.inline-fmt.active .inline-fmt-btn:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.inline-fmt.active .inline-fmt-btn.on{background:var(--clr-accent);color:var(--text-on-dark, #fff);border-color:var(--clr-accent)}
.inline-fmt.active .inline-fmt-btn.on b,.inline-fmt.active .inline-fmt-btn.on i,.inline-fmt.active .inline-fmt-btn.on u,.inline-fmt.active .inline-fmt-btn.on s{color:inherit}
.inline-fmt-sep{width:1px;height:14px;background:var(--ef-border);margin:3px 2px;align-self:center}
.rich-field-label{display:flex;align-items:center;gap:4px}

/* RICH-TEXT CONTENTEDITABLE FIELDS */
.rich-field{font-family:var(--font-content-body);font-size:14px;line-height:1.6;color:var(--ef-text);border:1.5px solid var(--ef-border);border-radius:6px;padding:8px 10px;outline:none;background:var(--ef-surface);width:100%;min-height:50px;transition:border-color var(--dur-normal);overflow-wrap:break-word;white-space:pre-wrap;resize:vertical;overflow-y:auto}
.rich-field:focus{border-color:var(--clr-accent);box-shadow:var(--focus-ring)}
.rich-field:empty::before{content:attr(data-placeholder);color:var(--ef-muted);opacity:.6;pointer-events:none;display:block}
.rich-field-inline{min-height:unset;padding:4px 8px;font-size:13px;white-space:normal;line-height:1.5;resize:none}
/* Bold text — accent brand color for visual pop */
.rich-field b,.rich-field strong{color:var(--clr-accent);font-weight:700}
/* Callout emphasis — match each callout theme color */
[data-callout-type="important"] .rich-field b,[data-callout-type="important"] .rich-field strong,[data-callout-type="important"] .rich-field mark,[data-callout-type="important"] .rich-field .ef-highlight{color:var(--text-error,#DC2626)}
[data-callout-type="tip"] .rich-field b,[data-callout-type="tip"] .rich-field strong,[data-callout-type="tip"] .rich-field mark,[data-callout-type="tip"] .rich-field .ef-highlight{color:var(--text-success,#16A34A)}
[data-callout-type="note"] .rich-field b,[data-callout-type="note"] .rich-field strong,[data-callout-type="note"] .rich-field mark,[data-callout-type="note"] .rich-field .ef-highlight{color:var(--ef-accent,#2563EB)}
/* Links in rich fields */
.rich-field a{color:var(--clr-accent);text-decoration:underline;cursor:pointer}
.rich-field a:hover{opacity:.8}
/* Lists in rich fields */
.rich-field ul,.rich-field ol{margin:4px 0;padding-left:24px}
.rich-field ul{list-style:disc}
.rich-field ol{list-style:decimal}
.rich-field li{margin:2px 0;line-height:1.5}
/* Legacy highlight marks (backward compat with existing content) */
.rich-field mark,.rich-field .ef-highlight{background:none;color:var(--clr-accent);font-weight:700}
.rich-field-sm{min-height:42px;font-size:12px;color:var(--ef-muted)}
.rich-field-quote{border:none;outline:none;font-size:15px;font-style:italic;color:var(--ef-text);background:transparent;min-height:72px;line-height:1.5;padding:0;width:100%}
.rich-field-quote:focus{border-color:transparent;box-shadow:var(--focus-ring)}

/* SIDEBAR STATS */
.sidebar-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
.sidebar-stat{display:flex;align-items:baseline;justify-content:space-between;padding:4px 8px;border-radius:var(--radius-sm,6px);background:rgba(241,245,249,.7);border:1px solid var(--ef-border);transition:all .15s}
.sidebar-stat:hover{border-color:var(--ef-border-active);box-shadow:var(--ef-shadow-sm)}
.sidebar-stat-val{font-size:13px;font-weight:700;color:var(--ef-primary);text-align:right;font-variant-numeric:tabular-nums}
.sidebar-stat-lbl{font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:var(--ef-muted);text-align:left}
.sidebar-stat-time{text-align:center;padding:8px 6px;background:rgba(241,245,249,.7);border-radius:6px;margin-top:4px;border:1px solid var(--ef-border)}
.sidebar-stat-time-val{font-family:var(--ef-font-head);font-size:22px;color:var(--ef-primary);display:block;line-height:1.1}
.sidebar-stat-time-lbl{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ef-muted);margin-top:2px;display:block}

/* Save/Load module list */
.sl-module-row{display:flex;align-items:center;gap:12px;padding:9px 16px;transition:background .1s;border-bottom:1px solid var(--ef-border)}
.sl-module-row:last-child{border-bottom:none}
.sl-module-row:hover{background:var(--ef-bg)}
.sl-module-row.sl-selected{background:var(--alert-info-bg, #EFF6FF)}
.sl-module-row.sl-current{}
.sl-module-row.sl-moving{background:var(--alert-warning-bg, #FFFBEB);outline:2px dashed var(--brand-clues, #D97706);outline-offset:-2px}
.sl-in-folder{padding-left:36px!important}
.sl-module-info{flex:1;min-width:0}
.sl-module-name{font-size:14px;font-weight:600;color:var(--ef-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.sl-module-meta{font-size:11px;color:var(--ef-muted);margin-top:2px;display:flex;gap:5px;align-items:center}
.sl-module-id-tag{font-family:monospace;font-size:10px;color:var(--text-muted);letter-spacing:0.3px}
.sl-module-stats{font-size:11px;color:var(--text-muted);margin-top:4px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.sl-module-stats span{color:var(--text-muted)}
.sl-stats-dot{opacity:0.4;font-size:10px}
.sl-autosave-row{background:var(--alert-info-bg, #F0F7FF);border-left:3px solid var(--brand-deep-teal, #2BBCD4)}
.sl-autosave-badge{font-size:10px;font-weight:700;color:var(--alert-info-text, #0891B2);background:var(--alert-info-bg, #E0F2FE);padding:1px 5px;border-radius:3px;margin-right:4px;text-transform:uppercase;letter-spacing:0.3px}
.sl-current-tag{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-success);background:var(--alert-success-bg, #ECFDF5);padding:1px 5px;border-radius:99px}
.sl-module-actions{display:flex;gap:5px;flex-shrink:0}
.sl-btn{padding:3px 9px;border-radius:5px;border:1.5px solid var(--ef-border);background:var(--ef-surface);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--dur-fast);font-family:var(--ef-font-body)}
.sl-btn-load{background:var(--ef-accent);border-color:var(--ef-accent);color:var(--text-on-dark, #fff)}
.sl-btn-load:hover{opacity:.88}
.sl-btn-delete{color:var(--text-error);border-color:var(--alert-error-border, #FECDD3);background:var(--alert-error-bg)}
.sl-btn-delete:hover{background:var(--alert-error-bg-hover, #FEE2E2);border-color:var(--alert-error-border, #FCA5A5)}
.sl-btn-move{color:var(--ef-primary);border-color:var(--border-disabled);background:var(--ef-bg)}
.sl-btn-move:hover{background:var(--bg-surface-alt);border-color:var(--text-muted)}
.sl-btn-rename{color:var(--ef-primary);border-color:var(--border-disabled);background:var(--ef-bg)}
.sl-btn-rename:hover{background:var(--bg-surface-alt)}
.sl-btn-cancel-move{color:var(--brand-clues);border-color:var(--alert-warning-border, #FDE68A);background:var(--alert-warning-bg, #FFFBEB)}
.sl-btn-cancel-move:hover{background:var(--alert-warning-bg-hover, #FEF9C3)}
.sl-btn-save-personal{color:var(--ef-primary);border-color:var(--border-disabled);background:var(--ef-bg)}
.sl-btn-save-personal:hover{background:var(--bg-surface-alt);border-color:var(--text-muted)}
.sl-btn-save-org{color:var(--ef-primary);border-color:var(--border-disabled);background:var(--ef-bg)}
.sl-btn-save-org:hover{background:var(--bg-surface-alt);border-color:var(--text-muted)}
.sl-btn-duplicate{color:var(--ef-primary);border-color:var(--border-disabled);background:var(--ef-bg)}
.sl-btn-duplicate:hover{background:var(--bg-surface-alt);border-color:var(--text-muted)}
/* Folder rows — fixed height prevents jump when action buttons appear */
.sl-folder-row{display:flex;align-items:center;gap:6px;padding:0 12px;height:36px;cursor:pointer;background:var(--ef-bg);border-bottom:1px solid var(--ef-border);user-select:none;transition:background .1s}
.sl-folder-row:hover{background:var(--bg-tint, #EEF2FF)}
.sl-folder-chevron{font-size:9px;color:var(--ef-muted);transition:transform .15s;flex-shrink:0;display:inline-block}
.sl-folder-row.open .sl-folder-chevron{transform:rotate(90deg)}
.sl-folder-icon{font-size:14px;flex-shrink:0}
.sl-folder-name{font-size:13px;font-weight:600;color:var(--ef-text)}
.sl-folder-spacer{flex:1}
.sl-folder-count{font-size:10px;font-weight:600;color:var(--text-muted);background:var(--bg-surface-alt);border:1px solid var(--ef-border);border-radius:99px;padding:0 6px;line-height:18px;flex-shrink:0;margin-left:4px}
/* visibility (not display) keeps the row height stable on hover */
.sl-folder-actions{visibility:hidden;display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .12s}
.sl-folder-row:hover .sl-folder-actions{visibility:visible;opacity:1}
/* Demo Modules folder — special styling */
.sl-demo-folder-row{background:var(--tag-purple-bg, #F8F7FF)}
.sl-demo-folder-row:hover{background:var(--tag-purple-bg-hover, #F0EBFF)}
.sl-demo-folder-row .sl-folder-name{color:var(--brand-lume, #5B21B6)}
.sl-demo-notice{padding:6px 16px;background:var(--tag-purple-bg, #F5F3FF);border-bottom:1px solid var(--tag-purple-border, #DDD6FE);font-size:11px;color:var(--brand-lume, #5B21B6);line-height:1.4}
/* ── Section-level rows (flat folder view) ── */
.sl-section-wrap{margin-bottom:2px}
.sl-section-row{display:flex;align-items:center;gap:6px;padding:0 12px;height:40px;cursor:pointer;border-bottom:1px solid var(--ef-border);user-select:none;transition:background .1s;background:var(--ef-bg)}
.sl-section-row:hover{background:var(--bg-tint, #EEF2FF)}
.sl-section-row.open .sl-folder-chevron{transform:rotate(90deg)}
.sl-section-icon{font-size:15px;flex-shrink:0}
.sl-section-name{font-size:13px;font-weight:700;letter-spacing:.2px}
.sl-section-content{display:none}
.sl-section-content.open{display:block}
.sl-section-add-btn{font-size:10px;font-weight:600;color:var(--ef-accent);background:none;border:1px dashed var(--ef-accent);padding:2px 8px;border-radius:4px;cursor:pointer;opacity:.6;transition:opacity .15s}
.sl-section-add-btn:hover{opacity:1}
/* Personal section — lavender accent */
.sl-section-personal .sl-section-row{background:var(--tag-purple-bg, #F8F7FF);border-left:3px solid var(--brand-lume, #7C3AED)}
.sl-section-personal .sl-section-row:hover{background:var(--tag-purple-bg-hover, #F0EBFF)}
.sl-section-personal .sl-section-name{color:var(--brand-lume, #5B21B6)}
/* Organization section — warm peach/teal accent */
.sl-section-org .sl-section-row{background:var(--alert-warning-bg,#FFF7ED);border-left:3px solid var(--brand-rust, #D95A2B)}
.sl-section-org .sl-section-row:hover{background:var(--alert-warning-bg-hover,#FFF1E3)}
.sl-section-org .sl-section-name{color:var(--brand-rust, #D95A2B)}
/* Team section — slate accent */
.sl-section-team .sl-section-row{background:var(--bg-surface-alt, #F8FAFC);border-left:3px solid var(--text-muted, #64748B)}
.sl-section-team .sl-section-row:hover{background:var(--bg-tint, #EEF2FF)}
.sl-section-team .sl-section-name{color:var(--text-secondary, #475569)}
/* Inline new-folder creation row */
.sl-folder-creating{background:var(--alert-info-bg, #F0F7FF)!important;cursor:default}
.sl-folder-name-input{flex:1;min-width:0;border:none;border-bottom:1.5px solid var(--ef-accent);background:transparent;font-size:13px;font-weight:600;color:var(--ef-text);outline:none;font-family:inherit;padding:0 4px}
.sl-folder-name-input::placeholder{color:var(--ef-muted);font-weight:400}
/* Folder content */
.sl-folder-content{display:none}
.sl-folder-content.open{display:block}
.sl-folder-empty{padding:9px 16px 9px 36px;font-size:12px;color:var(--ef-muted);font-style:italic;border-bottom:1px solid var(--ef-border)}
/* Section divider (Unfiled label) */
.sl-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:5px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ef-muted);background:var(--ef-bg);border-bottom:1px solid var(--ef-border)}
/* Move-here button (appears on folder rows during move mode) */
.sl-move-here-btn{font-size:11px;font-weight:600;padding:3px 8px;background:var(--ef-accent);color:var(--text-on-dark, #fff);border:none;border-radius:4px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.sl-move-here-btn:hover{opacity:.85}
/* + New Folder button (in modal header) */
.sl-new-folder-btn{font-size:11px;font-weight:500;color:var(--ef-accent);background:none;border:1.5px solid var(--ef-accent);padding:4px 10px;border-radius:5px;cursor:pointer;white-space:nowrap;transition:all .12s}
.sl-new-folder-btn:hover{background:var(--ef-accent-soft)}
/* Reusable modal overlay/card (class-based show/hide) */
.ef-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:var(--z-confirm);align-items:center;justify-content:center}
.ef-modal-overlay.open{display:flex}
.ef-modal-card{background:var(--ef-surface,#fff);border-radius:12px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.15)}

/* Dialog buttons — solid, hover darkens */
.dialog-btn{transition:all .15s!important;flex:1}
.dialog-btn:hover{opacity:.85!important}
.dialog-btn-danger{background:var(--alert-error-text, #DC2626)!important;border-color:var(--alert-error-text, #DC2626)!important;color:var(--text-on-dark, #fff)!important}
.dialog-btn-success{background:var(--alert-success-text, #059669)!important;border-color:var(--alert-success-text, #059669)!important;color:var(--text-on-dark, #fff)!important}
.dialog-btn-cancel{background:var(--bg-disabled, #E2E8F0)!important;border-color:var(--bg-disabled, #E2E8F0)!important;color:var(--text-secondary, #475569)!important}
.dialog-btn-primary{background:var(--ef-accent)!important;border-color:var(--ef-accent)!important;color:var(--text-on-dark, #fff)!important}
.dialog-btn-muted{background:var(--bg-surface-alt, #F1F5F9)!important;border-color:var(--border-default, #E2E8F0)!important;color:var(--text-secondary, #475569)!important}
.dialog-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* AI help strip */
/* ═══ AI Lesson Builder Modal ═══════════════════════════════════ */
.ai-modal{background:var(--ef-surface,#fff);border-radius:16px;width:600px;max-width:95vw;max-height:calc(100vh - 140px);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;animation:ai-modal-in .25s ease-out}
@keyframes ai-modal-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.ai-modal-head{padding:18px 22px;border-bottom:1px solid var(--ef-border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.ai-modal-icon{font-size:26px;flex-shrink:0}
.ai-modal-title{font-size:17px;font-weight:700;color:var(--ef-text)}
.ai-modal-sub{font-size:11px;color:var(--ef-muted);margin-top:2px}
.ai-modal-body{padding:0;overflow-y:auto;flex:1}
.ai-modal-foot{padding:14px 22px;border-top:1px solid var(--ef-border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.ai-foot-hint{flex:1;font-size:11px;color:var(--ef-muted);font-style:italic}
.ai-foot-actions{display:flex;gap:8px}

/* Sections inside modal */
.ai-section{padding:18px 22px;border-bottom:1px solid var(--ef-border)}
.ai-section:last-child{border-bottom:none}
.ai-section-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ef-accent,#2563EB);margin-bottom:12px}
.ai-section-desc{font-size:12px;color:var(--ef-muted);line-height:1.5;margin:-4px 0 12px}

/* Field layout */
.ai-field-row{display:flex;gap:12px;margin-bottom:12px}
.ai-field-col{display:flex;flex-direction:column}
.ai-field-group{margin-bottom:12px}
.ai-label{display:block;font-size:12px;font-weight:600;color:var(--ef-text);margin-bottom:5px}
.ai-required{color:var(--text-error);font-weight:700}
.ai-optional{font-weight:400;color:var(--ef-muted);font-style:italic;font-size:11px}

/* Inputs */
.ai-field{width:100%;padding:9px 12px;border:1.5px solid var(--ef-border,#E2E8F0);border-radius:8px;font-size:13px;font-family:inherit;color:var(--ef-text);background:var(--ef-surface,#fff);box-sizing:border-box;transition:border-color var(--dur-normal),box-shadow var(--dur-normal)}
.ai-field:focus{outline:none;border-color:var(--ef-accent,#2563EB);box-shadow:var(--focus-ring)}
.ai-field::placeholder{color:var(--ef-muted,#94A3B8)}
.ai-textarea{resize:vertical;line-height:1.6}
.ai-duration-wrap{position:relative;display:flex;align-items:center}
.ai-duration{padding-right:38px;text-align:center;-moz-appearance:textfield}
.ai-duration::-webkit-outer-spin-button,.ai-duration::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ai-duration-unit{position:absolute;right:12px;font-size:12px;color:var(--ef-muted);pointer-events:none}

/* Upload area */
.ai-upload-area{border:2px dashed var(--ef-border,#CBD5E1);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.ai-upload-area:hover{border-color:var(--ef-accent,#2563EB);background:rgba(37,99,235,.03)}
.ai-upload-icon{font-size:24px;margin-bottom:4px}
.ai-upload-text{font-size:13px;font-weight:600;color:var(--ef-text)}
.ai-upload-hint{font-size:11px;color:var(--ef-muted);margin-top:2px}
.ai-doc-badge{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;background:var(--ef-accent,#2563EB);color:var(--text-on-dark, #fff)}

/* Document list */
.ai-docs-list{margin-top:8px}
.ai-doc-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:var(--bg-surface-alt,#F8FAFC);margin-bottom:4px}
.ai-doc-icon{font-size:16px;flex-shrink:0}
.ai-doc-name{flex:1;font-size:12px;color:var(--ef-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Reference rows */
.ai-ref-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ai-ref-remove{width:28px;height:28px;border:none;background:transparent;color:var(--ef-muted);font-size:18px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}
.ai-ref-remove:hover{background:rgba(220,38,38,.08);color:var(--text-error, #DC2626)}
.ai-add-btn{background:none;border:1.5px dashed var(--ef-border,#CBD5E1);color:var(--ef-accent,#2563EB);font-size:12px;font-weight:600;padding:6px 14px;border-radius:8px;cursor:pointer;transition:border-color .2s,background .2s;margin-top:6px}
.ai-add-btn:hover{border-color:var(--ef-accent,#2563EB);background:rgba(37,99,235,.04)}

/* Shared button styles for AI popups */
.ai-btn{padding:9px 20px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background var(--dur-normal),opacity var(--dur-normal),transform var(--dur-fast);font-family:inherit}
.ai-btn:active{transform:scale(.97)}
.ai-btn-primary{background:var(--ef-accent,#2563EB);color:var(--text-on-dark, #fff)}
.ai-btn-primary:hover{background:var(--clr-accent-hover,#1D4ED8)}
.ai-btn-primary:disabled,.ai-btn-primary[disabled]{opacity:.4;cursor:not-allowed;background:var(--ef-accent,#2563EB)}
.ai-btn-primary.ai-btn-ready{opacity:1;cursor:pointer}
.ai-btn-secondary{background:var(--bg-surface-alt,#F1F5F9);color:var(--ef-text)}
.ai-btn-secondary:hover{background:var(--ef-border,#E2E8F0)}
.ai-btn-stop{background:rgba(220,38,38,.1);color:var(--text-error);border:1px solid rgba(220,38,38,.2)}
.ai-btn-stop:hover{background:rgba(220,38,38,.18)}

/* ═══ AI Overlay base (warning, completion, error) ══════════════ */
.ai-overlay-base{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:var(--z-top);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-slow);padding:68px 16px 64px;box-sizing:border-box;overflow-y:auto}
.ai-overlay-base.ai-visible{opacity:1}

/* Warning card */
.ai-warn-card{background:var(--ef-surface,#fff);border-radius:16px;padding:32px;max-width:420px;width:90vw;max-height:calc(100vh - 140px);overflow-y:auto;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.2);animation:ai-pop .25s ease-out}
.ai-warn-icon{font-size:40px;margin-bottom:8px}
.ai-warn-title{font-size:17px;font-weight:700;color:var(--ef-text);margin:0 0 10px}
.ai-warn-text{font-size:13px;color:var(--ef-text);line-height:1.6;margin:0 0 8px}
.ai-warn-subtle{color:var(--ef-muted);font-size:12px}
.ai-warn-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}

/* Completion / error card */
.ai-complete-card{background:var(--ef-surface,#fff);border-radius:16px;padding:36px;max-width:420px;width:90vw;max-height:calc(100vh - 140px);overflow-y:auto;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.2);animation:ai-pop .3s ease-out}
.ai-complete-icon{font-size:48px;margin-bottom:10px}
.ai-complete-title{font-size:18px;font-weight:700;color:var(--ef-text);margin:0 0 10px}
.ai-complete-text{font-size:13px;color:var(--ef-text);line-height:1.6;margin:0 0 20px}
@keyframes ai-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ═══ AI Loading Screen ═════════════════════════════════════════ */
.ai-loading-overlay{position:fixed;inset:0;z-index:var(--z-loading);display:flex;align-items:center;justify-content:center;padding:68px 16px 64px;box-sizing:border-box;overflow-y:auto;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-slow)}
.ai-loading-overlay.ai-visible{opacity:1}
.ai-loading-content{text-align:center;max-width:380px;width:90vw;background:rgba(15,23,42,.82);border-radius:20px;padding:36px 28px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.ai-loading-robot{position:relative;width:80px;height:80px;margin:0 auto 16px}
.ai-loading-emoji{font-size:48px;position:relative;z-index:1;display:block;line-height:80px}
.ai-loading-pulse{position:absolute;inset:-6px;border-radius:50%;background:var(--ef-accent,#2563EB);opacity:.15;animation:ai-breathe 2s ease-in-out infinite}
@keyframes ai-breathe{0%,100%{transform:scale(1);opacity:.15}50%{transform:scale(1.25);opacity:.08}}
.ai-loading-title{font-size:20px;font-weight:700;color:var(--text-on-dark, #fff);margin:0 0 6px;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.ai-loading-status{font-size:13px;color:rgba(255,255,255,.88);margin:0 0 20px;min-height:20px;transition:color .2s}
.ai-loading-progress-wrap{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:16px}
.ai-loading-progress-bar{height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--ef-accent,#2563EB),var(--brand-lume, #7C3AED));transition:width .5s ease}
.ai-loading-hint{font-size:11px;color:rgba(255,255,255,.6);margin:0 0 20px;font-style:italic}

/* Editor blur when AI is loading */
.ai-blur{filter:blur(2px);pointer-events:none;transition:filter .3s}

/* Responsive — breakpoints consolidated at end of file (before print/dark) */
/* EduForge login */
.ef-login-btn{width:100%;margin-top:8px;padding:10px 14px;font-size:14px}
.oh-disabled{background:var(--bg-surface-alt, #F1F5F9);color:var(--text-muted, #94A3B8);cursor:not-allowed}
/* Autosave indicator */
.autosave-status{font-size:10px;color:var(--ef-muted);white-space:nowrap;display:flex;align-items:center;gap:4px;opacity:.7;transition:opacity .3s}
/* Quick-save popup — positioned under Save button via JS */
#save-quick-popup{position:fixed;z-index:var(--z-save-popup);background:var(--bg-dark, #1a2d3d);color:var(--tag-success-text, #6EE7B7);font-size:12px;font-weight:500;padding:6px 14px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap;display:none}
/* Custom in-page dialogs (replaces browser confirm/prompt) */
.sl-dialog-overlay{position:fixed;inset:0;z-index:var(--z-dialog);background:rgba(15,23,42,.52);display:flex;align-items:center;justify-content:center}
.sl-dialog-card{background:var(--bg-surface);border-radius:12px;padding:24px 24px 20px;width:380px;max-width:92vw;box-shadow:0 20px 50px rgba(0,0,0,.24)}
.sl-dialog-msg{font-size:14px;color:var(--ef-text,#1E3A5F);line-height:1.55;margin-bottom:18px}
.sl-dialog-input{display:block;width:100%;box-sizing:border-box;padding:8px 12px;border:1.5px solid var(--border-disabled);border-radius:7px;font-size:14px;font-family:inherit;color:var(--ef-text,#1E3A5F);outline:none;margin-bottom:18px;transition:border-color .12s}
.sl-dialog-input:focus{border-color:var(--ef-accent,#2563EB);box-shadow:var(--focus-ring)}
.sl-dialog-btns{display:flex;gap:8px;justify-content:flex-end}
.sl-dlg-btn{padding:7px 18px;border-radius:7px;border:1.5px solid var(--border-disabled);background:var(--bg-surface-alt);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .12s;color:var(--ef-text,#1E3A5F)}
.sl-dlg-btn:hover{background:var(--bg-surface-alt);border-color:var(--text-muted)}
.sl-dlg-ok{background:var(--ef-accent,#2563EB);border-color:var(--ef-accent,#2563EB);color:var(--text-on-dark, #fff)}
.sl-dlg-ok:hover{opacity:.88;background:var(--ef-accent,#2563EB)}
.sl-dlg-danger{background:var(--text-error)!important;border-color:var(--text-error)!important;color:var(--text-on-dark, #fff)!important}
.sl-dlg-danger:hover{opacity:.88!important}
.sl-dlg-unsaved-save{background:var(--text-success)!important;border-color:var(--text-success)!important;color:var(--text-on-dark, #fff)!important}
.sl-dlg-unsaved-save:hover{opacity:.88!important}
.sl-dlg-unsaved-nosave{background:var(--text-error)!important;border-color:var(--text-error)!important;color:var(--text-on-dark, #fff)!important}
.sl-dlg-unsaved-nosave:hover{opacity:.88!important}
.sl-dlg-unsaved-back{background:var(--bg-surface-alt);border-color:var(--border-disabled);color:var(--ef-muted)}
.autosave-status.saving{color:var(--ef-accent);opacity:1}
.autosave-status.saved{opacity:1}
.autosave-status.error{opacity:1}
.autosave-status .autosave-dot{width:6px;height:6px;border-radius:50%;background:var(--ef-muted);transition:background .3s}
.autosave-status.saving .autosave-dot{background:var(--ef-accent);animation:pulse .8s ease infinite}
.autosave-status.saved .autosave-dot{background:var(--text-success)}
.autosave-status.error .autosave-dot{background:var(--text-error)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* COMPLETION TOGGLE */
.completion-toggle{display:flex;gap:0;margin-bottom:6px;border:1px solid var(--ef-border);border-radius:5px;overflow:hidden}
.completion-opt{flex:1;text-align:center;padding:4px 6px;font-size:10px;font-weight:500;color:var(--ef-muted);cursor:pointer;transition:all .15s;background:transparent}
.completion-opt:first-child{border-right:1px solid var(--ef-border)}
.completion-opt.active{background:var(--ef-accent);color:var(--text-on-dark, #fff);font-weight:600}
.completion-opt:hover:not(.active){background:var(--ef-bg)}
.score-input-wrap{position:relative}
.score-input-wrap input{width:100%;-moz-appearance:textfield}
.score-input-wrap input::-webkit-inner-spin-button,.score-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.score-pct{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--ef-muted);pointer-events:none}
.score-input-wrap.disabled input{opacity:.35;pointer-events:none}
.score-input-wrap.disabled .score-pct{opacity:.35}

/* =============================================================
   LOGIN OVERLAY
   ============================================================= */
#login-overlay{
  position:fixed;inset:0;z-index:var(--z-top);
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(4px);
  transition:opacity .5s ease;
}
#login-overlay.fade-out{opacity:0;pointer-events:none}
#login-card{
  background:var(--ef-surface);border-radius:12px;
  width:400px;max-width:92vw;
  box-shadow:0 16px 48px rgba(0,0,0,.25);
  overflow:hidden;
}
.login-brand{padding:28px 28px 20px;text-align:center;border-bottom:1px solid var(--ef-border)}
.login-subtitle{font-size:12px;color:var(--ef-muted);margin-top:4px;letter-spacing:.3px}
#login-form-area{padding:24px 28px 28px}
#login-error{
  display:none;font-size:12px;line-height:1.5;padding:10px 12px;
  border-radius:6px;margin-bottom:8px;
  background:var(--alert-error-bg);color:var(--alert-error-text, #991B1B);border:1px solid var(--alert-error-border, #FECACA);
}
#login-error table{width:100%;border-collapse:collapse;margin-top:8px;font-size:11px}
#login-error th{text-align:left;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--alert-error-text, #991B1B);padding:4px 6px;border-bottom:1px solid var(--alert-error-border, #FECACA)}
#login-error td{padding:4px 6px;border-bottom:1px solid var(--alert-error-bg-hover, #FEE2E2);color:var(--alert-error-text, #7F1D1D)}
#login-terminal{
  display:none;padding:20px 28px 28px;
  background:var(--ef-bg);
  font-family:var(--ef-font-body);font-size:13px;color:var(--ef-muted);
  line-height:1.8;height:200px;
  border-radius:0 0 12px 12px;
  border-top:1px solid var(--ef-border);
}
#login-terminal .term-line{opacity:0;animation:termFadeIn .3s ease forwards;color:var(--ef-text)}
#login-terminal .term-line::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ef-accent);margin-right:8px;vertical-align:middle}
@keyframes termFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}


/* =============================================================
   SIDEBAR COLLAPSE TOGGLES
   ============================================================= */
.sidebar-collapse-btn{position:absolute;top:50%;z-index:var(--z-sidebar-btn);width:20px;height:72px;border:1px solid var(--ef-border);background:var(--ef-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur-normal);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.sidebar-collapse-btn:hover{background:var(--ef-bg);border-color:var(--ef-accent)}
.sidebar-collapse-btn span{writing-mode:vertical-rl;font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ef-muted);transition:color .15s}
.sidebar-collapse-btn:hover span{color:var(--ef-accent)}
/* Left sidebar toggle — on right edge */
#sidebar-toggle-left{right:-21px;transform:translateY(-50%);border-radius:0 6px 6px 0;border-left:none}
/* Right panel toggle — on left edge */
#sidebar-toggle-right{left:-21px;transform:translateY(-50%);border-radius:6px 0 0 6px;border-right:none}
/* Collapsed states */
#sidebar.collapsed{width:0;overflow:hidden;padding:0}
#panel.collapsed{width:0;overflow:hidden;padding:0}
#sidebar.collapsed #sidebar-toggle-left span,
#panel.collapsed #sidebar-toggle-right span{color:var(--ef-accent)}

/* RESPONSIVE — breakpoints consolidated at end of file (before print/dark) */

/* =============================================================
   LOAD MODAL — PERSONAL / ORGANIZATION TABS
   ============================================================= */
/* (Tab bar removed in v9 — flat section layout replaces tabs) */
/* (Tab default tags removed in v9) */

/* =============================================================
   LOAD MODAL — IN USE BADGE
   ============================================================= */
.sl-in-use-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--text-on-dark);background:var(--text-error);border-radius:4px;padding:2px 6px;flex-shrink:0;text-transform:uppercase}
.sl-module-row.sl-in-use .sl-module-actions button{opacity:0.35;cursor:not-allowed;pointer-events:none}
.sl-module-row.sl-in-use{cursor:default}

/* Currently Editing strip — sits above the tab bar */
.sl-current-editing-strip{display:flex;flex-direction:column;gap:1px;padding:10px 16px;background:var(--alert-success-bg);border-bottom:1.5px solid var(--alert-success-border, #A7F3D0)}
.sl-current-editing-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-success)}
.sl-current-editing-name{font-size:13px;font-weight:600;color:var(--alert-success-text, #065F46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Template chooser */
.sl-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sl-template-card{padding:16px 12px;border:1.5px solid var(--clr-border,#E2E8F0);border-radius:10px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.sl-template-card:hover{border-color:var(--clr-accent,#2563EB);background:color-mix(in srgb,var(--clr-accent,#2563EB) 5%,var(--ef-surface,#fff))}
.sl-template-icon{font-size:28px;margin-bottom:8px}
.sl-template-name{font-size:13px;font-weight:600;color:var(--clr-text,#1E3A5F);margin-bottom:4px}
.sl-template-desc{font-size:11px;color:var(--ef-muted,#64748B);line-height:1.4}

/* Module description in rows */
.sl-module-desc{font-size:11px;color:var(--ef-muted,#64748B);line-height:1.4;margin-top:2px;max-height:2.8em;overflow:hidden;text-overflow:ellipsis}

/* Search bar */
.sl-search-bar{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--clr-border,#E2E8F0);align-items:center;position:sticky;top:0;background:var(--ef-surface,#fff);z-index:2}
.sl-search-input{flex:1;padding:7px 12px;border:1.5px solid var(--clr-border,#E2E8F0);border-radius:7px;font-size:13px;outline:none;font-family:inherit}
.sl-search-input:focus{border-color:var(--clr-accent,#2563EB)}
.sl-search-input::placeholder{color:var(--ef-muted,#94A3B8)}
.sl-search-clear{background:none;border:none;font-size:14px;color:var(--ef-muted,#94A3B8);cursor:pointer;padding:0 4px}
.sl-search-clear:hover{color:var(--text-secondary,#475569)}

/* Sort select */
.sl-sort-select{padding:6px 8px;border:1.5px solid var(--clr-border,#E2E8F0);border-radius:7px;font-size:12px;font-family:inherit;color:var(--clr-text,#1E3A5F);background:var(--ef-surface,#fff);cursor:pointer;outline:none}
.sl-sort-select:focus{border-color:var(--clr-accent,#2563EB)}

/* Dirty indicator dot */
.sl-dirty-dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--text-warning,#F59E0B);border:1.5px solid var(--ef-surface,#fff);pointer-events:none}

/* Size warning */
.sl-size-warn{color:var(--brand-clues,#D97706);font-weight:600}

/* Trash folder */
.sl-trash-folder-row{background:var(--alert-error-bg,#FEF2F2)}
.sl-trash-folder-row:hover{background:var(--alert-error-bg-hover,#FEE2E2)}
.sl-trash-folder-row .sl-folder-name{color:var(--text-error,#DC2626)}
.sl-trash-row{opacity:.7}
.sl-trash-row:hover{opacity:1}

/* Bulk operations bar */
.sl-bulk-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--alert-info-bg,#EFF6FF);border-bottom:1px solid var(--alert-info-border,#BFDBFE)}
.sl-bulk-count{font-size:12px;font-weight:600;color:var(--ef-text,#1E3A5F);margin-right:auto}
.sl-bulk-check{width:16px;height:16px;accent-color:var(--clr-accent,#2563EB);cursor:pointer}
.sl-bulk-toggle{padding:5px 8px;min-width:28px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--ef-muted);transition:all .15s}
.sl-bulk-toggle:hover{color:var(--ef-text);border-color:var(--text-muted)}
.sl-bulk-toggle.sl-bulk-active{background:var(--brand-edu,#2563EB);border-color:var(--brand-edu,#2563EB);color:var(--text-on-dark,#fff)}
.sl-bulk-toggle.sl-bulk-active:hover{opacity:.88}

/* File Upload Modal styles live in /css/file-upload.css (global) */

/* =============================================================
   EDUFORGE HEADER THEME
   Scoped to #pubHeader — overrides pub-nav.css defaults without
   touching the centralized file. Navy app-bar look.
   ============================================================= */
#pubHeader{background:var(--ef-primary);border-bottom-color:rgba(45,156,219,.25)}

/* Logo */
#pubHeader .pub-logo-text{color:var(--text-on-dark)}
#pubHeader .pub-logo-text span{color:rgba(255,255,255,.55)}

/* Breadcrumb */
#pubHeader .pub-app-section{color:var(--text-on-dark)}
#pubHeader .pub-app-section-link{color:var(--text-link-on-dark, #5BB8EC)}
#pubHeader .pub-app-section-link:hover{opacity:.8}
#pubHeader .pub-app-crumb-sep{color:rgba(255,255,255,.6)}
#pubHeader .pub-app-page{color:rgba(255,255,255,.7)}

/* Login link (guest) — must contrast with dark navy header */
#pubHeader .pub-login-link{color:rgba(255,255,255,.85)}
#pubHeader .pub-login-link:hover{color:var(--text-on-dark)}

/* Action buttons */
#pubHeader .ohh-action{color:rgba(255,255,255,.75)}
#pubHeader .ohh-action:hover{background:rgba(255,255,255,.1);color:var(--text-on-dark)}

/* Preview — primary accent */
#pubHeader .ohh-action-primary{background:var(--ef-accent)!important;color:var(--text-on-dark, #fff)!important}
#pubHeader .ohh-action-primary:hover{background:var(--btn-primary-bg-hover, #1a85be)!important}

/* AI Write — keep purple, just slightly brighter on dark bg */
#pubHeader .ohh-action-ai{background:var(--brand-lume)!important}
#pubHeader .ohh-action-ai:hover{background:var(--brand-lume, #6D28D9)!important}

/* Circle buttons (?, !) */
#pubHeader .ohh-action-circle{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.2)}
#pubHeader .ohh-action-circle:hover{background:rgba(255,255,255,.1);color:var(--text-on-dark, #fff);border-color:rgba(255,255,255,.35)}

/* Autosave indicator */
#pubHeader .ohh-autosave{color:rgba(255,255,255,.45)}
#pubHeader .autosave-status{color:rgba(255,255,255,.45)!important}
#pubHeader .autosave-status.saving{color:var(--text-link-on-dark, #5BB8EC)!important}
#pubHeader .autosave-status .autosave-dot{background:rgba(255,255,255,.45)!important}
#pubHeader .autosave-status.saving .autosave-dot{background:var(--text-link-on-dark, #5BB8EC)!important}

/* Hamburger lines (sidebar toggle) */
#pubHeader .pub-hamburger span{background:rgba(255,255,255,.8)}

/* =============================================================
   LOCKED STRUCTURAL PANELS — Exit Survey, Auto-References
   Appear at the bottom of the editor canvas after all content
   blocks. Same card styling as regular blocks with a subtle
   indigo accent to indicate structural/locked status.
   ============================================================= */
.structural-panel{background:color-mix(in srgb,var(--clr-accent) 18%,var(--ef-surface));border:1.5px solid color-mix(in srgb,var(--clr-accent) 40%,var(--ef-border))}
.structural-panel .block-header{border-bottom-color:color-mix(in srgb,var(--clr-accent) 22%,transparent)}
.structural-panel .block-type-label{color:var(--clr-primary);font-weight:600}
.structural-panel .block-type-badge{background:var(--clr-accent)!important}
.structural-panel .pickup-btn,.structural-panel .block-delete-btn{border-color:color-mix(in srgb,var(--clr-accent) 25%,var(--ef-border));color:color-mix(in srgb,var(--clr-accent) 60%,var(--ef-muted))}
.structural-panel .pickup-btn:hover{border-color:var(--clr-accent);color:var(--clr-primary);background:color-mix(in srgb,var(--clr-accent) 12%,transparent)}
.structural-panel:hover{border-color:var(--clr-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--clr-accent) 18%,transparent)}
.structural-toggle{display:flex;align-items:center;cursor:pointer;margin-left:2px}

/* =============================================================
   PREVIEW MODAL — Tab Strip + Format Views
   ============================================================= */

/* Tab Strip */
.pv-tab-strip{display:flex;gap:0;border-bottom:1px solid var(--ef-border);padding:0 18px;flex-shrink:0;background:var(--ef-surface)}
.pv-tab{padding:10px 18px;font-family:var(--ef-font-body);font-size:13px;font-weight:500;color:var(--ef-muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap}
.pv-tab:hover{color:var(--ef-primary);background:color-mix(in srgb,var(--ef-accent) 5%,transparent)}
.pv-tab.active{color:var(--ef-accent);border-bottom-color:var(--ef-accent);font-weight:600}

/* Online Module tab — 16:9 locked */
#pv-online-frame{margin:auto}

/* =============================================================
   SLIDE DECK PREVIEW
   ============================================================= */
.pv-slide-layout{display:flex;height:100%;overflow:hidden}
.pv-thumb-tray{width:110px;flex-shrink:0;overflow-y:auto;background:var(--bg-surface-alt);border-right:1px solid var(--ef-border);padding:8px 6px}
.pv-thumb{padding:6px;border-radius:6px;cursor:pointer;margin-bottom:4px;border:2px solid transparent;transition:all .15s;background:var(--bg-surface, #fff)}
.pv-thumb:hover{border-color:var(--ef-accent);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pv-thumb.active{border-color:var(--ef-accent);background:var(--alert-info-bg, #EFF8FF);box-shadow:0 1px 6px rgba(37,99,235,.2)}
.pv-thumb-num{font-size:10px;font-weight:700;color:var(--ef-muted);margin-bottom:2px}
.pv-thumb-title{font-size:9px;color:var(--ef-text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-slide-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.pv-slide-canvas{flex:1;display:flex;align-items:center;justify-content:center;background:var(--ef-border);padding:20px;overflow:auto}
.pv-slide-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px;border-top:1px solid var(--ef-border);flex-shrink:0;background:var(--ef-surface)}
.pv-slide-nav-btn{padding:6px 16px;border-radius:6px;border:1px solid var(--ef-border);background:var(--ef-surface);font-family:var(--ef-font-body);font-size:12px;font-weight:500;cursor:pointer;color:var(--ef-text);transition:all .15s}
.pv-slide-nav-btn:hover:not(:disabled){border-color:var(--ef-accent);color:var(--ef-accent)}
.pv-slide-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.pv-slide-counter{font-size:12px;color:var(--ef-muted);font-weight:500;min-width:60px;text-align:center}

/* Individual Slide (16:9 aspect ratio, B+D hybrid background) */
.pv-slide{width:720px;max-width:100%;aspect-ratio:16/9;background:var(--bg-surface, #fff);border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.12);position:relative;display:flex;overflow:hidden}
.pv-slide-accent{width:5px;flex-shrink:0}
.pv-slide-corner-line{position:absolute;top:0;left:5px;height:3px;width:44px}
.pv-slide-bg-shape{position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;pointer-events:none}
.pv-slide-bg-shape2{position:absolute;bottom:-80px;left:25%;width:300px;height:300px;border-radius:50%;pointer-events:none}
.pv-slide-footer-rule{position:absolute;bottom:22px;left:40px;right:40px;height:1px;opacity:.12}
.pv-slide-content{flex:1;padding:24px 28px;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}
.pv-slide-label{font-size:9px;font-weight:700;letter-spacing:1px;margin-bottom:6px}
.pv-slide-title{font-family:var(--ef-font-head);font-size:22px;font-weight:500;margin-bottom:10px;line-height:1.25}
.pv-slide-body{font-size:13px;color:var(--text-secondary);line-height:1.7;flex:1;overflow-y:auto}
.pv-slide-img{margin-top:8px;max-height:140px;overflow:hidden;border-radius:6px}
.pv-slide-img img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.pv-slide-answer{margin-top:auto;padding:10px 14px;background:var(--alert-success-bg, #EAF3DE);border:1px solid var(--alert-success-border, #639922);border-radius:6px;font-size:12px;color:var(--tag-success-text, #27500A);line-height:1.5}
.pv-slide-answer-label{font-weight:700;color:var(--tag-success-text, #3B6D11);font-size:10px}
.pv-slide-num{position:absolute;bottom:8px;right:12px;font-size:9px;color:var(--text-muted);z-index:1}

/* =============================================================
   DOCUMENT PREVIEW
   ============================================================= */
.pv-doc-layout{display:flex;flex-direction:column;height:100%;overflow:hidden}
.pv-doc-canvas{flex:1;display:flex;align-items:flex-start;justify-content:center;background:var(--text-muted);padding:24px;overflow:auto}
.pv-doc-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px;border-top:1px solid var(--ef-border);flex-shrink:0;background:var(--ef-surface)}

/* Individual Page (Letter aspect ratio ~8.5:11) */
.pv-doc-page{width:612px;max-width:100%;min-height:792px;background:var(--bg-surface, #fff);border-radius:4px;box-shadow:0 4px 24px rgba(0,0,0,.18);padding:48px;position:relative;font-family:'DM Sans',sans-serif}
.pv-doc-header{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--ef-muted);margin-bottom:4px}
.pv-doc-header-title{font-weight:500}
.pv-doc-header-rule{height:1px;background:var(--ef-border);margin-bottom:20px}
.pv-doc-page-title{font-size:16px;font-weight:600;margin-bottom:4px;line-height:1.3}
.pv-doc-title-rule{height:2px;margin-bottom:16px;border-radius:1px;opacity:.7}
.pv-doc-body{font-size:11px;line-height:1.7;color:var(--ef-text);margin-bottom:12px}
.pv-doc-subheading{font-size:12px;font-weight:600;margin:14px 0 6px}
.pv-doc-objective{font-size:11px;color:var(--ef-text);padding-left:14px;margin-bottom:4px;line-height:1.5}
.pv-doc-credits{font-size:10px;color:var(--text-muted);margin-top:10px;padding-top:8px;border-top:1px solid var(--ef-border)}
.pv-doc-credits-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:9px;color:var(--text-muted)}

/* TOC */
.pv-doc-toc-entry{display:flex;align-items:baseline;font-size:12px;color:var(--ef-text);margin-bottom:6px;gap:4px}
.pv-doc-toc-dots{flex:1;border-bottom:1px dotted var(--border-disabled);margin:0 4px;min-width:20px}
.pv-doc-toc-page{font-size:11px;color:var(--ef-muted);font-weight:500}

/* Lists */
.pv-doc-list-item{font-size:11px;color:var(--ef-text);margin-bottom:4px;line-height:1.6;padding-left:16px}
.pv-doc-list-num{font-weight:600;color:var(--ef-primary)}
.pv-doc-list-bullet{color:var(--ef-accent)}

/* Images */
.pv-doc-image{margin:10px 0;text-align:center}
.pv-doc-image img{max-width:100%;max-height:280px;border-radius:4px}
.pv-doc-caption{font-size:10px;color:var(--ef-muted);text-align:center;margin-bottom:10px}

/* Placeholder (video stubs etc) */
.pv-doc-placeholder{background:var(--bg-surface-alt);border:1px dashed var(--border-disabled);border-radius:6px;padding:24px;text-align:center;color:var(--ef-muted);font-size:11px;font-style:italic;margin:10px 0}

/* Quote */
.pv-doc-quote{font-family:Georgia,serif;font-size:13px;font-style:italic;color:var(--ef-primary);line-height:1.6;margin:10px 0 4px;padding-left:14px;border-left:3px solid var(--ef-accent)}
.pv-doc-attribution{font-size:10px;color:var(--ef-muted);margin-bottom:12px;padding-left:14px}

/* Callout */
.pv-doc-callout{padding:10px 14px;border-radius:6px;font-size:11px;line-height:1.6;margin:10px 0;border-left:3px solid}
.pv-doc-callout-important{background:var(--alert-error-bg);border-color:var(--alert-error-border, #FCA5A5);color:var(--alert-error-text, #991B1B)}
.pv-doc-callout-tip{background:var(--alert-success-bg);border-color:var(--alert-success-border, #86EFAC);color:var(--alert-success-text, #166534)}
.pv-doc-callout-note{background:var(--alert-info-bg, #EFF6FF);border-color:var(--alert-info-border, #93C5FD);color:var(--alert-info-text, #1E40AF)}

/* Quiz / Knowledge Check */
.pv-doc-question{font-size:12px;font-weight:600;color:var(--text-primary);margin:12px 0 6px;line-height:1.4}
.pv-doc-option{font-size:11px;color:var(--ef-text);padding:4px 8px;margin-bottom:3px;border-radius:4px;line-height:1.4}
.pv-doc-option.correct{background:var(--alert-success-bg);color:var(--alert-success-text, #065F46);font-weight:600}
.pv-doc-option-letter{font-weight:700;margin-right:2px}
.pv-doc-explanation{font-size:10px;color:var(--text-secondary);background:var(--bg-surface-alt);padding:8px 12px;border-left:3px solid var(--ef-accent);border-radius:0 4px 4px 0;margin:6px 0 10px;line-height:1.5}
.pv-doc-likert{font-size:10px;color:var(--ef-muted);text-align:center;padding:8px;background:var(--bg-surface-alt);border-radius:4px;margin:6px 0}
.pv-doc-freetext{font-size:10px;color:var(--text-muted);font-style:italic;margin:4px 0}

/* Q&A flat (flip cards) */
.pv-doc-term{font-size:11px;font-weight:500;color:var(--text-primary);margin:10px 0 2px}
.pv-doc-answer{background:var(--alert-success-bg);border-left:3px solid var(--text-success);padding:8px 12px;border-radius:0 6px 6px 0;font-size:11px;color:var(--ef-text);margin-bottom:10px;line-height:1.5}
.pv-doc-answer-label{font-weight:700;font-size:10px}

/* Steps */
.pv-doc-step{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--ef-text);margin-bottom:6px;line-height:1.5}
.pv-doc-step-num{width:20px;height:20px;border-radius:50%;color:var(--text-on-dark, #fff);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Dialogue */
.pv-doc-dialogue{font-size:11px;color:var(--ef-text);margin-bottom:6px;padding-left:12px;border-left:2px solid var(--ef-border);line-height:1.5}

/* Resources / References */
.pv-doc-resource{font-size:11px;color:var(--ef-text);margin-bottom:4px;line-height:1.5}
.pv-doc-reference{font-size:10px;color:var(--ef-text);margin-bottom:6px;line-height:1.6;padding-left:20px;text-indent:-20px}

/* Footer */
.pv-doc-footer{position:absolute;bottom:20px;left:48px;right:48px;display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted);border-top:1px solid var(--ef-border);padding-top:6px}


/* ══ EduForge — Content Theme Defaults ══ */
/* =============================================================
   EduForge — Content Theme Layer
   Sets the default appearance for module content being authored.
   Values are overwritten at runtime by applyTheme() in themes.js.

   These tokens affect content-preview elements in the editor
   (title inputs, body text, bullets, dividers, quote borders)
   and are baked into learner output by generateLearnerHTML().

   Load order: base.css → eduforge.css → theme.css
   ============================================================= */
:root {
  /* Default theme: Ocean */
  --clr-primary:       var(--brand-lines, #1E3A5F);
  --clr-accent:        var(--brand-edu, #1D4ED8);
  --clr-bg:            var(--bg-page, #F0F5FF);
  --font-content-head: 'DM Serif Display', serif;
  --font-content-body: 'DM Sans', sans-serif;
}


/* ══ EduForge — Quiz Board (extracted from inline) ══ */
/* SCOPED: these styles only apply on the standalone quiz-board page */
/* INTENTIONAL: Bare hex colors below are part of a self-contained dark
   arcade theme for quiz-board gamification. Do not replace with tokens. */
body.quiz-board-page{font-family:'DM Sans',system-ui,sans-serif;background:#0D1F36;color:#fff;min-height:100vh}

/* ── Board ── */
.qb-wrap{max-width:700px;margin:0 auto;padding:32px 24px 60px}
.qb-header{text-align:center;margin-bottom:28px}
.qb-header h1{font-family:'DM Serif Display',serif;font-size:28px;letter-spacing:-.3px;margin-bottom:6px}
.qb-header p{font-size:13px;color:rgba(255,255,255,.5)}
.qb-score-bar{display:flex;justify-content:center;align-items:center;gap:32px;margin-bottom:28px}
.qb-score-pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:8px 24px;text-align:center}
.qb-score-pill .label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.4);margin-bottom:2px}
.qb-score-pill .val{font-size:22px;font-weight:700;font-family:'DM Serif Display',serif;color:#2BBCD4}

.qb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;perspective:800px}

/* ── Tile (flip card) ── */
.qb-tile{aspect-ratio:1/.75;cursor:pointer}
.qb-tile.used{cursor:default;pointer-events:none}
.qb-tile-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  border-radius:10px;
}
.qb-tile.flipped .qb-tile-inner{transform:rotateY(180deg)}
.qb-tile-front,.qb-tile-back{
  position:absolute;inset:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.qb-tile-front{
  background:linear-gradient(145deg,#1E3A5F,#152d4a);
  border:1px solid rgba(255,255,255,.12);
  font-size:28px;font-family:'DM Serif Display',serif;
  font-weight:700;color:#2BBCD4;
  transition:background .15s,border-color .15s;
}
.qb-tile:not(.used):hover .qb-tile-front{
  background:linear-gradient(145deg,#234469,#1b3659);
  border-color:rgba(43,188,212,.4);
}
.qb-tile-back{
  background:linear-gradient(145deg,#2BBCD4,#1a9aaf);
  transform:rotateY(180deg);
  font-size:13px;font-weight:600;color:#0D1F36;padding:12px;
  text-align:center;flex-direction:column;gap:4px
}
.qb-tile.correct .qb-tile-back{background:linear-gradient(145deg,#22c55e,#16a34a)}
.qb-tile.incorrect .qb-tile-back{background:linear-gradient(145deg,#ef4444,#dc2626)}

/* ── Overlay ── */
.qb-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.qb-overlay.open{opacity:1;pointer-events:auto}
.qb-card{
  background:#0F2944;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;width:100%;max-width:520px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  transform:scale(.9);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.qb-overlay.open .qb-card{transform:scale(1)}
.qb-card-pts{
  background:#2BBCD4;color:#0D1F36;
  font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:8px 20px;
}
.qb-card-body{padding:28px 28px 20px}
.qb-card-q{font-family:'DM Serif Display',serif;font-size:22px;line-height:1.4;color:#fff;margin-bottom:24px}
.qb-card-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.qb-choice{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:12px 16px;font-size:14px;color:rgba(255,255,255,.85);
  cursor:pointer;transition:all .12s;text-align:left;font-family:inherit;width:100%;
}
.qb-choice:hover:not(:disabled){background:rgba(43,188,212,.15);border-color:#2BBCD4;color:#fff}
.qb-choice.correct{background:rgba(34,197,94,.2);border-color:#22c55e;color:#4ade80;cursor:default}
.qb-choice.incorrect{background:rgba(239,68,68,.15);border-color:#ef4444;color:#f87171;cursor:default}
.qb-card-feedback{
  min-height:44px;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.6);padding:0 2px;
}
.qb-card-stat{font-size:12px;color:rgba(255,255,255,.4);margin-top:6px}
.qb-card-footer{padding:16px 28px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:flex-end}
.qb-btn{
  background:#2BBCD4;color:#0D1F36;border:none;
  padding:10px 24px;border-radius:8px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:opacity .12s;
}
.qb-btn:hover{opacity:.85}
.qb-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);margin-right:auto}
.qb-btn-secondary:hover{background:rgba(255,255,255,.12)}

/* ── Results ── */
.qb-results{display:none;text-align:center;padding:40px 24px}
.qb-results.show{display:block}
.qb-results-score{font-family:'DM Serif Display',serif;font-size:56px;color:#2BBCD4;margin-bottom:4px}
.qb-results-label{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:28px;text-transform:uppercase;letter-spacing:.6px}
.qb-leaderboard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;max-width:340px;margin:0 auto 24px}
.qb-lb-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.35);padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.qb-lb-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05)}
.qb-lb-row:last-child{border-bottom:none}
.qb-lb-row.highlight{background:rgba(43,188,212,.1)}
.qb-lb-rank{font-size:12px;font-weight:700;color:rgba(255,255,255,.3);width:16px;flex-shrink:0}
.qb-lb-name{font-size:13px;flex:1;color:rgba(255,255,255,.8)}
.qb-lb-score{font-size:14px;font-weight:700;color:#2BBCD4}

/* ── Columns header ── */
.qb-col-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.qb-col-label{text-align:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:rgba(255,255,255,.3)}


/* ══ EduForge — Scenario Engine (extracted from inline) ══ */
/* SCOPED: these styles only apply on the standalone scenario page */
/* INTENTIONAL: Bare hex colors below are part of a self-contained dark
   arcade theme for scenario gamification. Do not replace with tokens. */
body.scenario-page{font-family:'DM Sans',system-ui,sans-serif;background:#141824;color:#fff;min-height:100vh}

.sc-wrap{max-width:680px;margin:0 auto;padding:32px 24px 60px}

/* ── Scene header ── */
.sc-scene-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:rgba(255,255,255,.3);margin-bottom:24px;display:flex;align-items:center;gap:8px
}
.sc-scene-label::before,.sc-scene-label::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.08)
}

/* ── Portrait + dialogue box ── */
.sc-dialogue-row{display:flex;gap:16px;align-items:flex-end;margin-bottom:20px}
.sc-portrait{
  width:72px;height:72px;flex-shrink:0;border-radius:8px;
  border:2px solid rgba(255,255,255,.12);overflow:hidden;
  position:relative;background:#1E2A3A;
}
.sc-portrait-face{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:32px;user-select:none;
}
.sc-portrait-name{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.6);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.7);
  text-align:center;padding:3px 4px;
}

.sc-bubble{
  flex:1;background:#1E2A3A;border:1px solid rgba(255,255,255,.1);
  border-radius:12px 12px 12px 2px;padding:16px 18px;
  font-size:15px;line-height:1.65;color:rgba(255,255,255,.88);
  min-height:64px;position:relative;
}
.sc-bubble.narrator{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);
  border-radius:12px;font-style:italic;color:rgba(255,255,255,.55);
  font-size:14px;
}
.sc-cursor{
  display:inline-block;width:2px;height:1em;background:#2BBCD4;
  vertical-align:text-bottom;margin-left:2px;
  animation:blink .75s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Situation panel ── */
.sc-situation{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid #2BBCD4;border-radius:0 8px 8px 0;
  padding:14px 18px;margin-bottom:24px;font-size:13px;
  color:rgba(255,255,255,.6);line-height:1.6;
}

/* ── Choices ── */
.sc-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.sc-choice{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:14px 18px;font-size:14px;
  color:rgba(255,255,255,.8);cursor:pointer;text-align:left;
  font-family:inherit;transition:all .15s;line-height:1.4;
  display:flex;align-items:center;gap:12px;
}
.sc-choice:hover{background:rgba(43,188,212,.12);border-color:#2BBCD4;color:#fff}
.sc-choice-letter{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:rgba(255,255,255,.4);
}
.sc-choice:hover .sc-choice-letter{background:#2BBCD4;border-color:#2BBCD4;color:#0D1F36}

/* ── Outcome ── */
.sc-outcome{
  border-radius:12px;padding:24px;margin-bottom:24px;
  animation:fadeIn .3s ease;
}
.sc-outcome.good{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25)}
.sc-outcome.neutral{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.2)}
.sc-outcome.bad{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25)}
.sc-outcome-icon{font-size:28px;margin-bottom:10px}
.sc-outcome-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.sc-outcome.good .sc-outcome-label{color:#4ade80}
.sc-outcome.neutral .sc-outcome-label{color:#fbbf24}
.sc-outcome.bad .sc-outcome-label{color:#f87171}
.sc-outcome-text{font-size:14px;line-height:1.65;color:rgba(255,255,255,.75)}
.sc-outcome-lesson{font-size:13px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.45);font-style:italic}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.sc-btn{
  background:#2BBCD4;color:#0D1F36;border:none;padding:12px 28px;
  border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:opacity .12s;
}
.sc-btn:hover{opacity:.85}
.sc-btn.ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);margin-right:10px}
.sc-btn-row{display:flex;gap:10px;flex-wrap:wrap}

.sc-progress{
  display:flex;gap:4px;margin-bottom:24px;
}
.sc-progress-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .3s}
.sc-progress-dot.done{background:#2BBCD4}
.sc-progress-dot.current{background:#fff}


/* ══ EduForge — Timed Challenge (extracted from inline) ══ */
/* SCOPED: these styles only apply on the standalone timed-challenge page */
/* INTENTIONAL: Bare hex colors below are part of a self-contained dark
   arcade theme for timed-challenge gamification. Do not replace with tokens. */
body.timed-challenge-page{font-family:'DM Sans',system-ui,sans-serif;background:#0F1620;color:#fff;min-height:100vh}

.tc-wrap{max-width:620px;margin:0 auto;padding:32px 24px 60px}

/* ── Screen utility ── */
.screen{display:none}.screen.active{display:block}

/* ── Pre-game ── */
.tc-pregame{text-align:center;padding:40px 0}
.tc-pregame h1{font-family:'DM Serif Display',serif;font-size:32px;margin-bottom:8px}
.tc-pregame .sub{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:36px}
.tc-stakes{
  display:inline-flex;flex-direction:column;gap:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:28px 36px;margin-bottom:32px;text-align:left;
}
.tc-stake-row{display:flex;align-items:center;gap:14px}
.tc-stake-icon{font-size:22px;width:36px;text-align:center;flex-shrink:0}
.tc-stake-label{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:2px}
.tc-stake-val{font-size:16px;font-weight:700;color:#fff}
.tc-btn{
  background:#EF4444;color:#fff;border:none;padding:14px 36px;
  border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:opacity .12s;display:inline-block;
}
.tc-btn:hover{opacity:.88}
.tc-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);margin-right:10px;padding:12px 24px;font-size:14px}

/* ── Game screen ── */
.tc-game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.tc-progress-text{font-size:13px;color:rgba(255,255,255,.4)}
.tc-correct-count{font-size:13px;color:#4ade80;font-weight:600}

/* Timer ring */
.tc-timer-wrap{display:flex;justify-content:center;margin-bottom:28px;position:relative}
.tc-timer-svg{transform:rotate(-90deg)}
.tc-timer-bg{fill:none;stroke:rgba(255,255,255,.06)}
.tc-timer-ring{fill:none;stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .5s}
.tc-timer-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.tc-timer-secs{font-family:'DM Serif Display',serif;font-size:36px;line-height:1}
.tc-timer-unit{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}

/* Question */
.tc-question{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:24px;margin-bottom:16px;
  font-family:'DM Serif Display',serif;font-size:20px;line-height:1.5;
  color:#fff;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center;
}

/* Choices */
.tc-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.tc-choice{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:14px 16px;font-size:14px;color:rgba(255,255,255,.8);
  cursor:pointer;text-align:left;font-family:inherit;transition:all .12s;line-height:1.4;
}
.tc-choice:hover:not(:disabled){background:rgba(239,68,68,.15);border-color:#EF4444;color:#fff}
.tc-choice.correct{background:rgba(34,197,94,.2);border-color:#22c55e;color:#4ade80;cursor:default}
.tc-choice.incorrect{background:rgba(239,68,68,.15);border-color:#EF4444;color:#f87171;cursor:default}
.tc-choice:disabled{cursor:default}

/* Feedback flash */
.tc-feedback{
  text-align:center;font-size:14px;font-weight:600;min-height:22px;
  transition:opacity .2s;margin-bottom:8px;
}
.tc-feedback.correct{color:#4ade80}
.tc-feedback.incorrect{color:#f87171}

/* Streak */
.tc-streak{
  display:flex;justify-content:center;gap:4px;margin-bottom:4px;min-height:16px;
}
.tc-streak-pip{width:10px;height:10px;border-radius:50%;background:#EF4444;animation:popin .2s ease}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}

/* ── Results ── */
.tc-results{text-align:center;padding:32px 0}
.tc-result-icon{font-size:56px;margin-bottom:12px}
.tc-result-verdict{
  font-family:'DM Serif Display',serif;font-size:28px;margin-bottom:6px;
}
.tc-result-verdict.pass{color:#4ade80}
.tc-result-verdict.fail{color:#f87171}
.tc-result-sub{font-size:14px;color:rgba(255,255,255,.4);margin-bottom:28px}

.tc-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;
}
.tc-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:16px}
.tc-stat .n{font-family:'DM Serif Display',serif;font-size:28px;margin-bottom:4px}
.tc-stat .l{font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.5px}
.tc-stat .n.good{color:#4ade80}
.tc-stat .n.bad{color:#f87171}
.tc-stat .n.neutral{color:#fbbf24}

/* ── Share for Review button ─────────────────────────────────── */
.pv-tab--share{margin-left:auto;background:var(--text-success, #059669);color:var(--text-on-dark, #fff)}
.pv-tab--share:hover{opacity:.88}

/* ── Debug panel ─────────────────────────────────────────────── */
.modal-head--debug{background:var(--alert-error-bg, #fdedec);border-bottom:2px solid var(--alert-error-border, #DC2626)}
.modal-head--debug h3{color:var(--text-error, #DC2626)}

/* ── Debug / info bars ───────────────────────────────────────── */
.ef-info-bar{padding:10px 18px;border-bottom:1px solid var(--ef-border);background:var(--bg-surface-alt, #f8fafb)}

/* ── AI pause button ─────────────────────────────────────────── */
.ai-pause-btn{background:var(--ef-accent);border-color:var(--ef-accent);color:var(--text-on-dark, #fff)}

/* ── Speaker notes textarea ──────────────────────────────────── */
.ef-speaker-notes{width:100%;min-height:150px;padding:10px;border:1.5px solid var(--ef-border, #E2E8F0);border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;box-sizing:border-box}

/* ── Guest mode banner ──────────────────────────────────────── */
.ef-guest-banner{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-banner);padding:18px 32px;background:linear-gradient(135deg,var(--bg-dark-mid, #1E3A5F) 0%,var(--brand-edu, #2563EB) 100%);color:var(--text-link-on-dark, #E0ECFF);font-size:14px;text-align:center;box-shadow:0 -4px 20px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.ef-guest-banner-inner{display:inline-flex;align-items:center;gap:14px;max-width:600px;text-align:left;line-height:1.5}
.ef-guest-banner-inner strong{color:var(--text-on-dark);font-size:15px;display:block;margin-bottom:2px}
.ef-guest-banner-emoji{font-size:28px;flex-shrink:0}

/* WCAG focus indicator for all EduForge form controls */
.ef-wrap input:focus-visible, .ef-wrap textarea:focus-visible, .ef-wrap select:focus-visible, .ai-field:focus-visible, .field-input:focus-visible, .field-select:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* =============================================================
   SLICK DESIGN OVERHAUL — force mockup-grade visual treatment.
   These rules use high-specificity overrides to ensure the
   glassmorphism, glow, and ambient effects are visible despite
   opaque backgrounds in base.css and base-navbar.css.
   ============================================================= */

/* ── NAVIGATION BAR — frosted glass + accent underline ────── */
[data-oh-theme="eduforge"] .ohh{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:saturate(1.3) blur(16px)!important;
  box-shadow:0 1px 3px rgba(15,23,42,.03)!important;
  border-bottom-color:rgba(148,163,184,.15)!important;
  position:relative;
}
[data-oh-theme="eduforge"] .ohh::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.12) 30%,rgba(124,58,237,.08) 70%,transparent);
  pointer-events:none;
}
/* Logo icon — gradient background */
[data-oh-theme="eduforge"] .ohh-logo-icon{
  background:linear-gradient(135deg,var(--brand-edu, #2563EB),var(--brand-lume, #7C3AED))!important;
  box-shadow:0 2px 8px rgba(37,99,235,.25)!important;
}
/* AI Write button rotating conic glow */
.ohh-action-ai{position:relative;overflow:visible!important}
.ohh-action-ai::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;
  background:conic-gradient(from 0deg,rgba(37,99,235,.12),rgba(124,58,237,.1),rgba(5,150,105,.08),rgba(37,99,235,.12));
  z-index:-1;opacity:0;transition:opacity .3s;animation:ef-rotate-glow 4s linear infinite;
  filter:blur(5px);pointer-events:none;
}
.ohh-action-ai:hover::after{opacity:1}
@keyframes ef-rotate-glow{from{filter:hue-rotate(0deg) blur(5px)}to{filter:hue-rotate(360deg) blur(5px)}}

/* ── SIDEBAR — force transparent glass ────────────────────── */
#sidebar{background:rgba(255,255,255,.72)!important;backdrop-filter:saturate(1.3) blur(20px)!important;border-right:1px solid rgba(148,163,184,.15)!important}
.sidebar-header{background:rgba(248,250,252,.4)!important;border-bottom-color:rgba(148,163,184,.15)!important}
#sidebar .sidebar-section{background:transparent!important}
#sidebar .field-input,#sidebar .field-select,.sidebar-field{background:rgba(241,245,249,.7)!important;border-color:rgba(148,163,184,.2)!important;transition:all .15s!important}
#sidebar .field-input:focus-visible,#sidebar .field-select:focus-visible,.sidebar-field:focus-visible{border-color:var(--ef-accent)!important;box-shadow:var(--focus-ring)!important;outline:none}

/* ── RIGHT PANEL — force transparent glass ────────────────── */
#panel{background:rgba(255,255,255,.72)!important;backdrop-filter:saturate(1.3) blur(20px)!important;border-left:1px solid rgba(148,163,184,.15)!important}

/* ── CANVAS — transparent so ambient texture shows through ── */
#canvas{background:transparent!important}

/* ── BLOCK CARDS — elevated glass cards with hover glow ───── */
.block-card{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03)!important;
  transition:all .2s!important;
}
.block-card::before{
  content:'';position:absolute;inset:-1px;border-radius:calc(var(--ef-radius,10px) + 1px);
  background:linear-gradient(135deg,rgba(37,99,235,.1),transparent 40%,transparent 60%,rgba(124,58,237,.06));
  z-index:-1;opacity:0;transition:opacity .2s;pointer-events:none;
}
.block-card:hover{
  border-color:rgba(59,130,246,.35)!important;
  box-shadow:0 4px 16px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04)!important;
}
.block-card:hover::before{opacity:1}
.block-card.selected{
  border-color:var(--ef-accent,#2563EB)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15), 0 4px 16px rgba(15,23,42,.06)!important;
}
.block-header{background:rgba(248,250,252,.5)!important;border-bottom-color:rgba(148,163,184,.15)!important}

/* Block type badge — color glow */
.block-type-badge{box-shadow:0 0 6px currentColor!important}

/* Section tag — pill style */
.block-section-tag{border-radius:99px!important;background:rgba(37,99,235,.06)!important;color:var(--ef-accent)!important;border:1px solid rgba(37,99,235,.1)!important;font-size:9px!important}

/* ── LOCKED/STRUCTURAL PANELS ──────── */
.structural-panel{border-style:solid!important;border-color:rgba(148,163,184,.22)!important;background:rgba(255,255,255,.8)!important}
.structural-panel:hover{border-color:rgba(148,163,184,.35)!important}
.position-locked-badge{border-radius:99px!important;background:rgba(254,243,199,.5)!important;border:1px solid rgba(217,119,6,.1)!important;font-size:10px!important;padding:2px 8px!important}

/* ── INSERT BUTTON — glow on hover ────────────────────── */
.ef-insert-btn:hover{box-shadow:0 4px 20px rgba(37,99,235,.12)}

/* ── STATS — interactive chips ────────────────────────────── */
.sidebar-stat{background:rgba(241,245,249,.6)!important;border:1px solid rgba(148,163,184,.15)!important;transition:all .15s!important}
.sidebar-stat:hover{border-color:rgba(59,130,246,.3)!important;box-shadow:0 1px 3px rgba(15,23,42,.04)!important}
.sidebar-stat-time{background:rgba(241,245,249,.6)!important;border-color:rgba(148,163,184,.15)!important}

/* ── AUTOSAVE — green pulse glow ──────────────────────────── */
.ohh-autosave::before{box-shadow:0 0 6px rgba(5,150,105,.25)!important}

/* ── ACTIVE USERS — status dot glow ──────────────────────── */
.au-dot-current{background:var(--color-success, #059669)!important;box-shadow:0 0 4px rgba(5,150,105,.3)!important}

/* ── SCROLLBAR STYLING ────────────────────────────────────── */
#sidebar::-webkit-scrollbar,#panel::-webkit-scrollbar,#canvas::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb,#panel::-webkit-scrollbar-thumb,#canvas::-webkit-scrollbar-thumb{background:rgba(148,163,184,.18);border-radius:2px}

/* ── THEME CAROUSEL — hover glow ─────────────────────────── */
.theme-card{transition:all .15s!important}
.theme-card:hover{box-shadow:0 1px 3px rgba(15,23,42,.04)!important;border-color:rgba(59,130,246,.3)!important}
.theme-card.active{box-shadow:0 0 0 2px rgba(37,99,235,.15)!important;border-color:var(--ef-accent)!important}

/* ── CONNECTOR LINES between blocks — gradient ───────────── */
.block-wrap+.block-wrap::before{background:linear-gradient(to bottom,rgba(148,163,184,.18),rgba(37,99,235,.1))!important}

/* ── OUTLINE ITEMS — accent border on active ─────────────── */
.outline-item{border-left:2px solid transparent;transition:all .12s}
.outline-item:hover{background:rgba(37,99,235,.04);border-left-color:rgba(37,99,235,.2)}

/* ── HEADER BLOCK — subtle accent tint preserved ─────────── */
.block-card.header-block{background:color-mix(in srgb,var(--clr-accent) 10%,rgba(255,255,255,.88))!important}

/* =============================================================
   REVIEW INBOX (right panel)
   ============================================================= */
.review-inbox{padding:6px 0}
.review-inbox-item{
  display:flex;align-items:flex-start;gap:8px;padding:7px 12px;
  cursor:pointer;transition:all .12s;font-size:12px;color:var(--ef-text);
  line-height:1.4;border-left:2px solid transparent;
}
.review-inbox-item:hover{background:var(--ef-accent-soft);border-left-color:rgba(37,99,235,.25)}
.review-inbox-item.done{color:var(--ef-muted);text-decoration:line-through}
.review-inbox-item.done .ri-check{background:var(--ef-accent);border-color:var(--ef-accent);color:var(--text-on-dark, #fff)}
.ri-check{
  width:16px;height:16px;border-radius:4px;border:1.5px solid var(--ef-border);
  flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:transparent;transition:all .15s;background:var(--ef-surface);
}
.review-inbox-item:hover .ri-check{border-color:var(--ef-accent)}
.ri-text{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:white-space .2s}
.review-inbox-item:hover .ri-text{white-space:normal;text-overflow:unset}
.review-inbox-empty{padding:16px 12px;text-align:center;font-size:11px;color:var(--ef-muted);line-height:1.5;font-style:italic}

/* =============================================================
   STATUS BAR (bottom)
   ============================================================= */
#ef-statusbar{
  height:26px;display:flex;align-items:center;padding:0 14px;gap:10px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-top:1px solid rgba(148,163,184,.15);
  font-size:10px;color:var(--ef-muted);flex-shrink:0;
  z-index:1;
}
.ef-sb-dot{width:5px;height:5px;border-radius:50%;background:var(--color-success, #059669);box-shadow:0 0 4px rgba(5,150,105,.3);animation:pulse 2s infinite;flex-shrink:0}
.ef-sb-sep{width:1px;height:12px;background:rgba(148,163,184,.2);flex-shrink:0}
.ef-sb-text{white-space:nowrap}
.ef-sb-right{margin-left:auto;font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;letter-spacing:.3px;color:var(--ef-muted)}

/* =============================================================
   DRAFT BADGE (sidebar header)
   ============================================================= */
.ef-draft-badge{
  font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600;letter-spacing:.3px;
  background:rgba(37,99,235,.08);color:var(--ef-accent);border:1px solid rgba(37,99,235,.12);
  margin-left:6px;vertical-align:middle;
}

/* =============================================================
   AVATAR CARDS (active users panel)
   ============================================================= */
.au-avatar-list{display:flex;flex-direction:column;gap:2px}
.au-avatar-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;transition:background .12s}
.au-avatar-row:hover{background:rgba(37,99,235,.04)}
.au-avatar{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:var(--text-on-dark, #fff);flex-shrink:0;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.12);letter-spacing:.3px;
}
.au-online-dot{
  position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;
  background:var(--color-success, #059669);border:2px solid var(--bg-surface,#fff);
  box-shadow:0 0 4px rgba(5,150,105,.3);
}
.au-avatar-info{min-width:0}
.au-avatar-name{font-size:12px;font-weight:500;color:var(--ef-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-avatar-status{font-size:10px;color:var(--ef-muted)}
.au-you-tag{font-size:9px;color:var(--ef-accent);font-weight:500}

/* =============================================================
   STAT CHIPS (3-column accent row)
   ============================================================= */
.ef-stat-chips{display:flex;gap:6px;margin-bottom:8px}
.ef-stat-chip{
  flex:1;padding:8px 4px;border-radius:6px;text-align:center;
  background:rgba(241,245,249,.7);border:1px solid rgba(148,163,184,.15);
  transition:all .15s;
}
.ef-stat-chip:hover{border-color:rgba(59,130,246,.3);box-shadow:0 1px 3px rgba(15,23,42,.04)}
.ef-stat-chip-val{font-size:16px;font-weight:700;color:var(--ef-text);font-variant-numeric:tabular-nums;line-height:1.2}
.ef-stat-chip-lbl{font-size:9px;color:var(--ef-muted);letter-spacing:.3px;text-transform:uppercase;margin-top:2px}
.ef-stat-accent .ef-stat-chip-val{color:var(--ef-accent)}
.ef-stat-green .ef-stat-chip-val{color:var(--color-success, #059669)}

/* =============================================================
   OUTLINE — active state
   ============================================================= */
.outline-item.outline-active{color:var(--ef-accent)!important;border-left-color:var(--ef-accent)!important;background:rgba(37,99,235,.06)!important;font-weight:500}
.outline-item:focus-visible{outline:2px solid var(--ef-accent);outline-offset:-2px;border-radius:2px}

/* ── Outline drag-to-reorder ── */
.outline-item[draggable="true"]{cursor:grab}
.outline-item[draggable="true"]:active{cursor:grabbing}
.outline-item.outline-dragging{opacity:.35}
.outline-item.outline-drop-above{box-shadow:inset 0 2px 0 0 var(--ef-accent,#2563EB)}
.outline-item.outline-drop-below{box-shadow:inset 0 -2px 0 0 var(--ef-accent,#2563EB)}

/* =============================================================
   INSERT BUTTON — enhanced hover glow
   ============================================================= */
.ef-insert-btn{position:relative}
.ef-insert-btn:hover{
  box-shadow:0 4px 20px rgba(37,99,235,.12)!important;
}

/* =============================================================
   THEME SWATCHES — gradient cards
   ============================================================= */
/* Handled in themes.js makeThemeBtn — but add hover glow */
#theme-carousel button{transition:all .15s!important}
#theme-carousel button:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)!important;transform:translateY(-1px)}

/* =============================================================
   PHASE A — THEMED CANVAS
   Canvas bg already uses var(--clr-bg) which applyTheme() sets.
   These additions make block cards and content fields feel themed.
   ============================================================= */
.block-card .block-body{background:color-mix(in srgb,var(--clr-bg) 35%,var(--ef-surface,#fff));border-radius:0 0 var(--ef-radius,8px) var(--ef-radius,8px)}
.block-title-input{color:var(--clr-primary)}
.block-subhead-input{color:var(--clr-primary)}
.block-card{border-left:3px solid transparent!important}
.block-card:hover:not(.selected){border-left-color:var(--clr-accent)!important}

/* =============================================================
   PHASE B — INLINE-RENDERED BLOCKS (edit-on-click)
   Simple blocks show a learner-style preview by default.
   Click to enter edit mode; click outside to exit.
   ============================================================= */
.block-rendered{cursor:pointer;padding:16px;position:relative;min-height:40px;transition:background .15s;font-size:16px}
.block-rendered:hover{background:color-mix(in srgb,var(--clr-accent) 4%,transparent)}
.block-rendered::after{content:'Click to edit';position:absolute;bottom:4px;right:8px;left:auto;top:auto;display:inline-block;font-size:11px;font-weight:600;color:var(--text-on-dark,#fff);opacity:0;transition:opacity .2s;pointer-events:none;letter-spacing:.3px;border-radius:4px;background:var(--clr-accent,#2D9CDB);padding:2px 8px;z-index:1}
.block-rendered:hover::after{opacity:.85}
.block-editing{display:none;padding:16px}
.block-body.editing .block-rendered{display:none}
.block-body.editing .block-editing{display:block}

/* ── Rendered block styles (learner-identical in editor) ──────────
   Every value below is copied from the learner CSS in learner.js.
   Learner var mapping:  --p → --clr-primary, --a → --clr-accent,
   --em → --clr-emphasis, --fh → --font-content-head,
   --fb → --font-content-body, --text → --clr-text              ── */

/* Text — learner p.btext */
.ir-text{font-family:var(--font-content-body);font-size:1em;line-height:1.8;color:var(--clr-text);margin-bottom:4px}
.ir-text b,.ir-text strong{color:var(--clr-emphasis,var(--clr-accent));font-weight:700}
.ir-text mark,.ir-text .ef-highlight{background:none;color:var(--clr-emphasis,var(--clr-accent));font-weight:700}

/* Header — learner h1.sh + .section-rule + p.hook */
.ir-header-title{font-family:var(--font-content-head);font-size:2.25em;font-weight:400;color:var(--clr-primary);line-height:1.15;letter-spacing:-.3px;margin:0 0 6px}
.ir-header-rule{display:flex;align-items:center;gap:12px;margin:4px 0 24px}
.ir-rule-line{flex:1;height:1px;background:linear-gradient(to right,var(--clr-accent),transparent)}
.ir-rule-line.r{transform:scaleX(-1)}
.ir-rule-dot{width:6px;height:6px;border-radius:50%;background:var(--clr-accent);flex-shrink:0}
.ir-header-content{font-family:var(--font-content-body);font-size:1em;line-height:1.75;color:var(--clr-text-sec,var(--text-secondary,#475569));margin-bottom:8px}
.ir-header-content b,.ir-header-content strong{color:var(--clr-emphasis,var(--clr-accent));font-weight:700}

/* Subheader — learner h2.subh + p.subhook */
.ir-subheader-wrap{padding-left:14px;border-left:3px solid var(--clr-accent)}
.ir-subheader-title{font-family:var(--font-content-head);font-size:1.3125em;font-weight:700;color:var(--clr-primary);line-height:1.25;margin-bottom:6px}
.ir-subheader-content{font-family:var(--font-content-body);font-size:.9375em;line-height:1.65;color:var(--clr-muted);padding-left:3px;margin-bottom:18px}
.ir-subheader-content b,.ir-subheader-content strong{color:var(--clr-emphasis,var(--clr-accent));font-weight:700}

/* List — learner h3.lhead + .olist / .olist-num */
.ir-list-title{font-family:var(--font-content-head);font-size:1.375em;font-weight:700;color:var(--clr-primary);margin:0 0 12px;line-height:1.25}
.ir-list{list-style:none;padding:0;margin:0}
.ir-list li{display:flex;align-items:flex-start;gap:16px;padding:7px 0;font-family:var(--font-content-body);font-size:1em;line-height:1.65;color:var(--clr-text)}
.ir-list li b,.ir-list li strong{color:var(--clr-emphasis,var(--clr-accent));font-weight:700}
.ir-list-bullet{width:14px;height:14px;border-radius:50%;background:var(--clr-accent);flex-shrink:0;margin-top:5px;opacity:.9}
.ir-list-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--clr-accent) 13%,transparent);color:var(--clr-accent);font-weight:800;font-size:.9375em;flex-shrink:0;margin-top:1px}

/* Image — learner figure + .bimg + figcaption */
.ir-image{text-align:center;margin-bottom:20px}
.ir-image img{max-width:100%;border-radius:10px;max-height:300px;object-fit:contain;display:block;margin:0 auto 6px}
.ir-image figcaption{font-size:.75em;color:var(--clr-muted);margin-bottom:4px}

/* Quote — learner .quote-block */
.ir-quote{display:flex;align-items:center;gap:28px;padding:28px 32px;background:linear-gradient(135deg,var(--alert-info-bg,#EEF3FF) 0%,#F5F7FF 100%);border-radius:14px;border:1px solid var(--alert-info-border,#D5DEFF);position:relative;margin-bottom:24px}
.ir-quote.no-image{padding:30px 36px}
.ir-quote-img-col{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ir-quote-avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--alert-info-border,#D5DEFF);box-shadow:0 2px 10px color-mix(in srgb,var(--clr-accent) 15%,transparent)}
.ir-quote-content{flex:1;min-width:0;position:relative}
.ir-quote-mark{font-family:Georgia,"Times New Roman",serif;font-size:4.5em;line-height:.45;color:var(--clr-accent);display:block;margin-bottom:14px;opacity:.65;letter-spacing:-2px}
.ir-quote-mark-close{font-family:Georgia,"Times New Roman",serif;font-size:4.5em;line-height:.45;color:var(--clr-accent);opacity:.65;letter-spacing:-2px;flex-shrink:0}
.ir-quote-text{font-family:Georgia,"Times New Roman",serif;font-size:1.125em;font-style:italic;color:var(--clr-text);line-height:1.7;margin-bottom:18px}
.ir-quote-text b,.ir-quote-text strong{color:var(--clr-emphasis,var(--clr-accent));font-weight:700}
.ir-quote-footer{display:flex;align-items:flex-end;justify-content:flex-end;gap:12px}
.ir-quote-attr{font-size:.8125em;color:var(--clr-muted);text-align:right;flex:1}
.ir-quote-attr strong{color:var(--clr-primary);font-weight:700;font-style:normal}
.ir-quote-sep{color:var(--clr-accent);margin:0 6px;font-weight:300;font-style:normal}

/* Callout — learner .callout-block */
.ir-callout{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;border-radius:12px;border:1.5px solid;margin-bottom:22px}
.ir-callout-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.125em;font-weight:900;line-height:1;flex-shrink:0}
.ir-callout-body{flex:1;font-family:var(--font-content-body);font-size:.9375em;line-height:1.7}
.ir-callout-body b,.ir-callout-body strong{font-weight:700}
.ir-callout-important{background:var(--alert-error-bg,#FEF2F2);border-color:var(--alert-error-border,#FCA5A5)}
.ir-callout-important .ir-callout-icon{background:var(--alert-error-bg-hover,#FEE2E2);color:var(--text-error,#DC2626)}
.ir-callout-important .ir-callout-body{color:var(--ef-text,#1E2D45)}
.ir-callout-important .ir-callout-body b,.ir-callout-important .ir-callout-body strong,.ir-callout-important .ir-callout-body mark,.ir-callout-important .ir-callout-body .ef-highlight{color:var(--text-error,#DC2626)}
.ir-callout-tip{background:var(--alert-success-bg,#F0FDF4);border-color:var(--alert-success-border,#86EFAC)}
.ir-callout-tip .ir-callout-icon{background:var(--alert-success-bg,#DCFCE7);color:var(--text-success,#16A34A)}
.ir-callout-tip .ir-callout-body{color:var(--ef-text,#1E2D45)}
.ir-callout-tip .ir-callout-body b,.ir-callout-tip .ir-callout-body strong,.ir-callout-tip .ir-callout-body mark,.ir-callout-tip .ir-callout-body .ef-highlight{color:var(--text-success,#16A34A)}
.ir-callout-note{background:var(--alert-info-bg,#EFF6FF);border-color:var(--alert-info-border,#93C5FD)}
.ir-callout-note .ir-callout-icon{background:var(--alert-info-bg,#DBEAFE);color:var(--ef-accent,#2563EB)}
.ir-callout-note .ir-callout-body{color:var(--ef-text,#1E2D45)}
.ir-callout-note .ir-callout-body b,.ir-callout-note .ir-callout-body strong,.ir-callout-note .ir-callout-body mark,.ir-callout-note .ir-callout-body .ef-highlight{color:var(--ef-accent,#2563EB)}

/* Media — learner h3.lhead + p.einst + iframe.eframe */
.ir-media-title{font-family:var(--font-content-head);font-size:1.375em;font-weight:700;color:var(--clr-primary);margin:0 0 12px;line-height:1.25}
.ir-media-instructions{font-size:.8125em;color:var(--clr-muted);margin:4px 0 8px}
.ir-media-embed{width:100%;height:280px;border:none;border-radius:10px;display:block;margin-bottom:20px}

/* Resource — learner h3.lhead + .rlist + .rlink */
.ir-resource-title{font-family:var(--font-content-head);font-size:1.375em;font-weight:700;color:var(--clr-primary);margin:0 0 12px;line-height:1.25}
.ir-resource-list{margin-bottom:20px}
.ir-resource-link{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid var(--clr-border,#E2E8F0);border-radius:10px;text-decoration:none;color:var(--clr-accent);margin-bottom:8px;background:var(--clr-surface,#fff);transition:border-color .15s}
.ir-resource-link:hover{border-color:var(--clr-accent)}
.ir-resource-label{font-weight:500;font-size:.875em}
.ir-resource-desc{font-size:.75em;color:var(--clr-muted);margin-top:1px}

/* Empty state */
.ir-empty{font-size:13px;color:var(--clr-muted);font-style:italic;opacity:.6}

/* Mobile notice — base state (breakpoint rules in consolidated block below) */
.ef-mobile-notice{display:none}

/* Version history */
.sl-versions-card{width:480px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column}
.sl-versions-header{padding:0 0 12px;border-bottom:1px solid var(--clr-border,#E2E8F0);margin-bottom:12px}
.sl-versions-list{flex:1;overflow-y:auto;min-height:100px;max-height:50vh}
.sl-version-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--clr-border,#F1F5F9)}
.sl-version-row:last-child{border-bottom:none}
.sl-version-info{display:flex;align-items:center;gap:10px;font-size:13px}
.sl-version-num{font-weight:600;color:var(--clr-accent,#2563EB);min-width:30px}
.sl-version-date{color:var(--color-text,#1E3A5F)}
.sl-version-size{color:var(--ef-muted,#94A3B8);font-size:11px}

/* Module Analytics */
.ef-analytics-panel{padding:12px 16px;border-top:1px solid var(--clr-border,#E2E8F0);font-size:12px}
.ef-analytics-empty{color:var(--ef-muted,#64748B);font-style:italic;text-align:center;padding:8px 0}
.ef-analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px;text-align:center}
.ef-analytics-stat{padding:6px 4px}
.ef-analytics-val{font-size:18px;font-weight:700;color:var(--ef-accent,#2563EB);line-height:1.2}
.ef-analytics-label{font-size:10px;color:var(--ef-muted,#64748B);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

/* =============================================================
   RESPONSIVE — Consolidated Breakpoints
   Mobile: max-width 639px  (merges old 375, 480, 640)
   Tablet: max-width 1023px (merges old 768, 1100)
   Desktop: min-width 1024px
   ============================================================= */

/* ── MOBILE (up to 639px) ──────────────────────────────────── */
@media (max-width: 639px) {
  /* AI modal — full width on mobile */
  .ai-modal { width: 100vw; max-width: 100vw; border-radius: 12px 12px 0 0; max-height: 92vh; }
  .ai-field-row { flex-direction: column; }
  .ai-field-col { flex: 1 1 auto !important; }

  /* Canvas & block overflow prevention (#384) */
  #canvas { padding: 16px 8px; overflow-x: hidden; }
  .block-card { max-width: 100%; overflow: hidden; word-break: break-word; }
  .block-card-inner { max-width: 100%; overflow: hidden; }
  .block-header { flex-wrap: wrap; gap: 4px; }
  .field-row { flex-direction: column; }
  .sl-dialog-card { width: calc(100vw - 24px); max-width: 100%; }
  .rich-field { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
  .block-editor-modal { max-width: calc(100vw - 16px); }
  .block-editor-body { overflow-x: hidden; overflow-wrap: break-word; }
  .block-editor-body img,
  .block-editor-body video,
  .block-editor-body iframe { max-width: 100%; height: auto; }
  .block-editor-body pre { overflow-x: auto; max-width: 100%; white-space: pre-wrap; }
  .block-editor-body table { display: block; overflow-x: auto; max-width: 100%; }
  .sl-module-row { overflow: hidden; }
  .sl-module-name { overflow: hidden; text-overflow: ellipsis; }

  /* Mobile notice overlay */
  .ef-mobile-notice { display: flex; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 24px; }
  .ef-mobile-notice-inner { background: var(--color-surface, #fff); border-radius: 14px; padding: 32px 28px; text-align: center; max-width: 340px; box-shadow: var(--shadow-lg); }
}

/* ── MOBILE: Extra narrow (up to 375px) ── */
@media (max-width: 375px) {
  #app { overflow-x: hidden; }
  #canvas { padding: 12px 4px; }
  .block-card { border-radius: 8px; }
  .block-header .block-actions { flex-wrap: wrap; gap: 2px; }
  .block-header .block-actions button { padding: 3px 6px; font-size: 11px; }
  .io-dropdown-content { max-width: calc(100vw - 16px); overflow-x: auto; }
  .block-body { overflow-x: hidden; overflow-wrap: break-word; min-width: 0; }
  .block-wrap { min-width: 0; }
  .field-input, .field-select, .field-textarea { max-width: 100%; box-sizing: border-box; }
  .ef-bp-grid { grid-template-columns: 1fr 1fr; }
  #add-block-modal { max-width: calc(100vw - 16px); }
}

/* ── TABLET (up to 1023px) ─────────────────────────────────── */
@media (max-width: 1023px) {
  /* Auto-collapse sidebars on tablet and below */
  #sidebar { width: 0; overflow: hidden; padding: 0; }
  #panel { width: 0; overflow: hidden; padding: 0; }
  #sidebar #sidebar-toggle-left span::after { content: 'Expand'; }
  #panel #sidebar-toggle-right span::after { content: 'Expand'; }
}

/* ── DESKTOP (1024px and up) ───────────────────────────────── */
@media (min-width: 1024px) {
  #sidebar:not(.collapsed) #sidebar-toggle-left span::after { content: 'Collapse'; }
  #sidebar.collapsed #sidebar-toggle-left span::after { content: 'Expand'; }
  #panel:not(.collapsed) #sidebar-toggle-right span::after { content: 'Collapse'; }
  #panel.collapsed #sidebar-toggle-right span::after { content: 'Expand'; }
}

/* =============================================================
   PRINT STYLESHEET
   ============================================================= */
@media print {
  #sidebar, #panel, .sidebar-collapse-btn, .sidebar-divider,
  #ef-statusbar, #oh-nav, .ef-mobile-notice, .ef-guest-banner,
  .block-move-btn, .block-delete-btn, .block-tips-btn, .block-preview-btn,
  .sl-btn, .bsp-btn, .ef-toggle, .dropdown-menu,
  #add-block-overlay, #new-module-overlay, #block-editor-overlay,
  #preview-overlay, #custom-theme-overlay, #guidelines-overlay,
  #embed-examples-overlay, #block-tips-overlay, #ef-confirm-overlay,
  #ef-modal-overlay, .ai-overlay-base, .io-soon-overlay { display: none !important; }
  #canvas { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .block-wrap { width: 100% !important; max-width: 100% !important; page-break-inside: avoid; }
  .block-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  body { background: white !important; color: black !important; }
  #app { display: block !important; }
}

/* =============================================================
   DARK MODE — Authoring UI
   ============================================================= */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --ef-bg: #1a1a2e;
    --ef-surface: #16213e;
    --ef-text: #e2e8f0;
    --ef-text-muted: #94a3b8;
    --ef-border: #334155;
    /* #3b82f6 gives only 3.68:1 with white text (WCAG fail); use #2563EB = 5.17:1 */
    --ef-accent: #2563EB;
    --ef-hover: #1e293b;
  }
  html:not([data-theme="light"]) body { background: var(--ef-bg); color: var(--ef-text); }
  html:not([data-theme="light"]) .block-card { background: var(--ef-surface); border-color: var(--ef-border); }
  html:not([data-theme="light"]) .block-body input,
  html:not([data-theme="light"]) .block-body textarea,
  html:not([data-theme="light"]) .block-body select,
  html:not([data-theme="light"]) .sidebar-field,
  html:not([data-theme="light"]) .sl-search-input { background: var(--ef-hover); color: var(--ef-text); border-color: var(--ef-border); }
  html:not([data-theme="light"]) #sidebar,
  html:not([data-theme="light"]) #panel { background: var(--ef-surface); border-color: var(--ef-border); }
  html:not([data-theme="light"]) #canvas { background: var(--ef-bg); }
  html:not([data-theme="light"]) .dropdown-menu { background: var(--ef-surface); border-color: var(--ef-border); }
  html:not([data-theme="light"]) .dropdown-item:hover { background: var(--ef-hover); }
  html:not([data-theme="light"]) .sl-dialog,
  html:not([data-theme="light"]) .sl-versions-card { background: var(--ef-surface); color: var(--ef-text); }
  html:not([data-theme="light"]) .block-card .block-header { border-color: var(--ef-border); }
  html:not([data-theme="light"]) #ef-statusbar { background: var(--ef-surface); border-color: var(--ef-border); color: var(--ef-text-muted); }
  html:not([data-theme="light"]) .io-soon-popup { background: var(--ef-surface); color: var(--ef-text); }
  html:not([data-theme="light"]) .ef-analytics-panel { border-color: var(--ef-border); }

  /* Header: --ef-primary resolves to --text-primary (#E2E8F0) in dark mode,
     making the header nearly white. Force it back to a dark navy so that
     all the white/rgba text on #pubHeader stays readable. */
  html:not([data-theme="light"]) #pubHeader { background: var(--color-primary-dark, #142942) !important; }

  /* Upgrade badge: --text-muted (#64748B) on dark surface = 3:1, fails AA.
     Lift to --text-secondary (#94A3B8) = 5.7:1. */
  html:not([data-theme="light"]) .upgrade-btn { color: var(--text-secondary, #94A3B8); }

  /* Simple Mode toggle in dark header: #475569 fallback is invisible on #142942.
     Use #CBD5E1 (10.4:1 on #142942). */
  html:not([data-theme="light"]) .ef-simple-toggle { color: #CBD5E1; }
}

/* =============================================================
   TEMPLATE PICKER (#1)
   ============================================================= */
.ef-template-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:600;align-items:center;justify-content:center}
.ef-template-overlay.open{display:flex}
.ef-template-modal{background:var(--ef-surface,#fff);border-radius:14px;width:620px;max-width:94vw;box-shadow:0 20px 50px rgba(0,0,0,.2);overflow:hidden}
.ef-template-head{padding:18px 22px;border-bottom:1px solid var(--ef-border,#E2E8F0);display:flex;align-items:center;justify-content:space-between}
.ef-template-head h3{font-size:18px;font-weight:600;color:var(--ef-text,#1E293B);margin:0}
.ef-template-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 22px}
.ef-template-card{border:1.5px solid var(--ef-border,#E2E8F0);border-radius:10px;padding:20px 16px;text-align:center;cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .15s}
.ef-template-card:hover,.ef-template-card:focus{border-color:var(--ef-accent,#2563EB);transform:translateY(-2px);box-shadow:0 4px 16px rgba(37,99,235,.12);outline:none}
.ef-template-icon{font-size:32px;margin-bottom:10px}
.ef-template-label{font-size:14px;font-weight:600;color:var(--ef-text,#1E293B);margin-bottom:4px}
.ef-template-desc{font-size:12px;color:var(--ef-muted,#64748B);line-height:1.4}

/* =============================================================
   VISUAL BLOCK GALLERY — category-based picker (#2)
   ============================================================= */
.ef-bp-search-wrap{grid-column:1/-1;margin-bottom:4px}
.ef-bp-search{width:100%;padding:8px 12px;border:1.5px solid var(--ef-border,#E2E8F0);border-radius:8px;font-size:13px;background:var(--ef-bg,#F8FAFC);color:var(--ef-text);outline:none;transition:border-color .15s}
.ef-bp-search:focus{border-color:var(--ef-accent,#2563EB)}
.ef-bp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ef-bp-cat-header{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ef-muted,#64748B);padding:10px 0 4px;border-bottom:1px solid var(--ef-border,#E2E8F0);margin-bottom:2px}
.ef-bp-cat-header:first-child{padding-top:0}
.ef-bp-cat-icon{font-size:16px}
.ef-bp-item{border:1.5px solid var(--ef-border,#E2E8F0);border-radius:8px;padding:12px;cursor:pointer;transition:border-color .15s,transform .1s;display:flex;align-items:center;gap:10px}
.ef-bp-item:hover{border-color:var(--ef-accent,#2563EB);transform:translateY(-1px)}
.ef-bp-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ef-bp-item-label{font-size:12px;font-weight:600;color:var(--ef-text,#1E293B)}

/* =============================================================
   SIMPLE MODE (#4)
   ============================================================= */
.ef-simple-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:11px;color:var(--text-secondary,#475569);padding:0 6px;user-select:none}
.ef-simple-toggle input{margin:0;cursor:pointer}
.ef-simple-toggle-label{white-space:nowrap}
/* Hide advanced elements in simple mode */
body.ef-simple-mode .io-menu .dropdown-item[onclick*="exportSCORM"]{display:none}
body.ef-simple-mode .save-theme-btn,
body.ef-simple-mode #share-review-btn{display:none}

/* =============================================================
   BIG SAVE BUTTON (#5)
   ============================================================= */
#ef-save-btn.ef-save-saving{opacity:.7;pointer-events:none}
#ef-save-btn.ef-save-success{background:#059669 !important;color:#fff !important;border-color:#059669 !important}
#ef-save-btn.ef-save-success .ohh-action-label{color:#fff}
#ef-save-btn.ef-save-error{background:#DC2626 !important;color:#fff !important;border-color:#DC2626 !important}
#ef-save-btn.ef-save-error .ohh-action-label{color:#fff}

/* =============================================================
   INLINE TITLE RENAME (#6)
   ============================================================= */
.ef-title-editable{cursor:text;border-bottom:1px dashed transparent;transition:border-color .15s;outline:none;min-width:80px}
.ef-title-editable:hover{border-bottom-color:var(--ef-accent,#2563EB)}
.ef-title-editable:focus,.ef-title-editable.ef-title-editing{border-bottom-color:var(--ef-accent,#2563EB);background:rgba(37,99,235,.04);border-radius:2px;padding:0 4px}

/* =============================================================
   LAST BACKED UP (#7)
   ============================================================= */
.ef-last-backed-up{font-size:11px;color:var(--text-muted,#94A3B8);margin-left:10px;white-space:nowrap}
.ef-last-backed-up time{font-weight:500}

/* ── MOBILE: Single-column collapse (up to 640px) ── */
@media (max-width: 640px) {
  .stats-grid,
  .sidebar-stats-grid,
  .apa-ref-body {
    grid-template-columns: 1fr !important;
  }
  .ef-bp-grid {
    grid-template-columns: 1fr !important;
  }
}