:root {
  /* Thème présentation */
  --accent: #D4511A;
  --fond: #1C3B4A;
  --fond-moyen: #234557;
  --fond-léger: #2a5166;
  /* Thème interface (éditeur + console) */
  --ui-accent: #D4511A;
  --ui-fond: #1C3B4A;
  --ui-fond-moyen: #234557;
  --ui-fond-léger: #2a5166;
  /* Fond des slides et du code */
  --fond-slide: #ffffff;
  --fond-code: #1e2d35;
  /* Couleurs des boîtes sémantiques */
  --bx-définition: #3b82f6;
  --bx-attention:  #f59e0b;
  --bx-info:       #06b6d4;
  --bx-exemple:    #22c55e;
  --bx-remarque:   #8b5cf6;
  --gray-text: rgba(255,255,255,.55);
}
/* Scoping : dans l'éditeur et la console, les variables d'interface prennent le dessus */
#editor-view, #presenter-view, #pr-notes-editor, #help-modal, #load-modal {
  --accent: var(--ui-accent);
  --fond: var(--ui-fond);
  --fond-moyen: var(--ui-fond-moyen);
  --fond-léger: var(--ui-fond-léger);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; font-family:'Lato',sans-serif; background:#0e1820; overflow:hidden; display:flex; flex-direction:column; }

/* ── EDITOR ── */
#editor-view { display:flex; flex-direction:column; height:100%; }
#editor-header {
  background:var(--fond); border-bottom:2px solid var(--accent);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-shrink:0;
}
#editor-title { font-size:1rem; font-weight:300; color:rgba(255,255,255,.7); letter-spacing:1px; }
#editor-title span { color:var(--accent); font-weight:700; }
.actions { display:flex; gap:10px; align-items:center; }
.btn-primary {
  background:var(--accent); color:#fff; border:none; padding:9px 22px; border-radius:4px;
  font-family:inherit; font-size:.9rem; cursor:pointer; transition:background .15s, transform .12s;
}
.btn-primary:hover { background:color-mix(in srgb, var(--accent) 80%, #000); transform:translateY(-1px); }
.btn-ghost {
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.15); padding:8px 18px; border-radius:4px;
  font-family:inherit; font-size:.9rem; cursor:pointer; transition:background .15s;
}
.btn-ghost:hover { background:rgba(255,255,255,.18); }

/* Editor overlay */
#editor-wrap { flex:1; position:relative; overflow:hidden; background:#111c24; }
#editor-hl {
  position:absolute; inset:0; overflow:auto; pointer-events:none;
  font-family:'Source Code Pro',monospace; font-size:.88rem; line-height:1.75;
  padding:28px 32px; white-space:pre-wrap; word-break:break-word; margin:0; color:#c8d8e0;
}
#md-editor {
  position:absolute; inset:0; resize:none; overflow:auto;
  background:transparent; color:transparent; caret-color:#c8d8e0;
  font-family:'Source Code Pro',monospace; font-size:.88rem; line-height:1.75;
  padding:28px 32px; border:none; outline:none; tab-size:2;
  white-space:pre-wrap; word-break:break-word; z-index:1;
}
#md-editor::selection { background:rgba(100,180,220,.3); }

/* Highlight token colors */
.hl-fm      { color:rgba(255,255,255,.35); }
.hl-delim   { color:var(--accent); font-weight:700; }
.hl-h1      { color:var(--accent); font-weight:700; }
.hl-h2      { color:color-mix(in srgb, var(--accent) 75%, #c8d8e0); font-weight:700; }
.hl-h3      { color:color-mix(in srgb, var(--accent) 55%, #c8d8e0); font-weight:600; }
.hl-strike  { color:rgba(200,216,224,.45); text-decoration:line-through; }
.hl-lead    { color:color-mix(in srgb, var(--accent) 75%, #c8d8e0); }
.hl-pause   { color:var(--accent); }
.hl-math    { color:#f0a500; }
.hl-bullet  { color:var(--accent); }
.hl-fence            { color:#81b29a; }
.hl-box-définition   { color:#3b82f6; }
.hl-box-attention    { color:#f59e0b; }
.hl-box-info         { color:#06b6d4; }
.hl-box-exemple      { color:#22c55e; }
.hl-box-remarque     { color:#8b5cf6; }
.hl-box-mermaid      { color:#a78bfa; }
.hl-code    { color:#9fc5d0; }
.hl-table   { color:#8cc4d6; }
.hl-bold    { color:#e0c8a0; font-weight:700; }
.hl-italic  { color:#c8d8e0; font-style:italic; }
.hl-incode  { color:#81b29a; background:rgba(0,0,0,.2); border-radius:2px; padding:0 2px; }
.hl-comment { color:rgba(255,255,255,.28); }
.hl-pj-data { color:rgba(255,255,255,.06); position:relative; }
.hl-pj-data::before {
  content: attr(data-info);
  position:absolute; top:1px; left:0;
  color:#7ecfe8; background:rgba(0,20,40,.5);
  border-radius:3px; padding:0 6px;
  font-size:.76em; pointer-events:none; white-space:nowrap;
}

/* Prism theme override */
code[class*="language-"], pre[class*="language-"] { font-family:'Source Code Pro',monospace; font-size:.87rem; line-height:1.7; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color:rgba(180,210,220,.38); }
.token.keyword, .token.important, .token.rule         { color:var(--accent); font-weight:600; }
.token.string, .token.char, .token.attr-value         { color:#a8c87a; }
.token.number, .token.boolean                         { color:color-mix(in srgb, var(--accent) 70%, #c8d8e0); }
.token.function                                       { color:#81b29a; }
.token.class-name, .token.builtin                     { color:#7ecfe8; }
.token.operator, .token.punctuation                   { color:#9fb8c2; }
.token.variable, .token.constant                      { color:#c8d8e0; }
.token.type-name, .token.namespace                    { color:#7ecfe8; }
.token.property                                       { color:#c8d8e0; }
.token.tag                                            { color:var(--accent); }
.token.attr-name                                      { color:color-mix(in srgb, var(--accent) 70%, #c8d8e0); }
.token.selector                                       { color:#81b29a; }

#editor-hint {
  background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.06);
  padding:8px 32px; font-size:.75rem; color:rgba(255,255,255,.3); flex-shrink:0;
}
#editor-hint code {
  font-family:'Source Code Pro',monospace; color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.06); padding:1px 5px; border-radius:3px;
}

/* ── THEME PANEL ── */
#theme-panel {
  background:var(--fond-moyen); border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 24px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; flex-shrink:0;
}
.tp-col { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tp-col-title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35); white-space:nowrap; }
#theme-panel.hidden { display:none; }
.tp-group { display:flex; align-items:center; gap:10px; }
.tp-group label { font-size:.78rem; color:rgba(255,255,255,.5); white-space:nowrap; min-width:46px; }
.tp-swatch {
  width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.2);
  cursor:pointer; flex-shrink:0; transition:transform .12s, border-color .12s;
  -webkit-appearance:none; padding:0;
}
.tp-swatch:hover { transform:scale(1.12); border-color:rgba(255,255,255,.55); }
.tp-hex {
  width:80px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
  border-radius:4px; color:#c8d8e0; font-family:'Source Code Pro',monospace;
  font-size:.78rem; padding:4px 8px; outline:none;
}
.tp-hex:focus { border-color:var(--accent); }
.tp-sep { width:1px; height:24px; background:rgba(255,255,255,.1); flex-shrink:0; }
.tp-presets { display:flex; align-items:center; gap:8px; }
.tp-presets span { font-size:.78rem; color:rgba(255,255,255,.4); margin-right:4px; }
.tp-preset {
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,.15); transition:transform .12s, border-color .12s;
  position:relative; overflow:hidden; flex-shrink:0;
}
.tp-preset:hover { transform:scale(1.2); border-color:rgba(255,255,255,.6); }
.tp-preset .ps-accent { position:absolute; left:0; top:0; width:50%; height:100%; }
.tp-preset .ps-base   { position:absolute; right:0; top:0; width:50%; height:100%; }
.tp-reset { font-size:.72rem; color:rgba(255,255,255,.35); background:none; border:none; cursor:pointer; padding:0 4px; font-family:inherit; }
.tp-reset:hover { color:rgba(255,255,255,.7); }

/* ── PRESENTATION ── */
#pres-view { display:none; flex-direction:column; height:100%; }
#slideshow { flex:1; position:relative; overflow:hidden; min-height:0; }

/* Footer */
#footer {
  height:42px; min-height:42px; background:var(--accent);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px 0 16px; z-index:100;
}
#footer .f-author { font-size:.8rem; color:rgba(255,255,255,.85); font-variant:small-caps; letter-spacing:1px; min-width:120px; }
#footer .f-center { display:flex; align-items:center; gap:8px; flex:1; justify-content:center; }
#footer .f-right  { display:flex; align-items:center; gap:6px; min-width:0; justify-content:flex-end; }
#footer button {
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(255,255,255,.2); color:#fff; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .12s; flex-shrink:0;
}
#footer button:hover    { background:rgba(255,255,255,.38); transform:scale(1.1); }
#footer button:disabled { opacity:.3; cursor:default; transform:none !important; }
#progress-wrap { flex:1; max-width:260px; height:4px; background:rgba(255,255,255,.25); border-radius:2px; overflow:hidden; }
#pbar { height:100%; background:#fff; border-radius:2px; transition:width .32s ease; }
#footer .f-counter { font-size:.8rem; color:rgba(255,255,255,.75); font-variant:tabular-nums; white-space:nowrap; }
.pill-btn { width:auto !important; border-radius:12px !important; padding:0 10px !important; font-size:.72rem !important; gap:5px; white-space:nowrap; }
#student-badge {
  display:none; align-items:center; gap:5px;
  font-size:.72rem; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.15); border-radius:10px;
  padding:3px 9px; white-space:nowrap; user-select:none;
}

/* Slide */
.slide {
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateX(55px);
}
.slide.active { opacity:1; pointer-events:all; transform:translateX(0); transition:opacity .3s ease, transform .3s ease; }

/* Top bar */
.top-bar { display:flex; height:48px; min-height:48px; }
.section-tabs { display:flex; background:var(--fond); }
.tab { display:flex; align-items:center; padding:0 20px; font-size:11px; color:var(--gray-text); border-right:1px solid rgba(255,255,255,.08); white-space:nowrap; cursor:pointer; transition:background .15s, color .15s; user-select:none; }
.tab:not(.on):hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); }
.tab.on { background:var(--accent); color:#fff; }
.tab.on:hover { background:color-mix(in srgb, var(--accent) 80%, #000); }
.orange-fill { flex:1; background:var(--accent); }

/* Content row */
.content-row { display:flex; flex:1; min-height:0; }

/* Subnav */
.subnav { width:210px; min-width:210px; background:var(--fond-moyen); padding:20px 0 12px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.sub-item { font-size:10.5px; color:var(--gray-text); padding:6px 16px; line-height:1.4; }
.sub-item.on { color:#fff; font-weight:700; }

/* Main panel */
.main-panel { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* Slide body */
.slide-body { flex:1; overflow-y:auto; padding:48px 56px 32px; background:var(--fond-slide); }
.slide-body.cover {
  background:linear-gradient(135deg, var(--fond) 0%, var(--fond-léger) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  position:relative;
}

/* ── Logo ── */
.orange-fill.has-logo { display:flex; align-items:center; justify-content:flex-end; padding-right:14px; }
.slide-logo-bar  { width:auto; object-fit:contain; flex-shrink:0; display:block; }
.slide-logo-cover { position:absolute; bottom:24px; right:28px; width:auto; object-fit:contain; }
.slide-body.sec-intro { background:var(--accent); display:flex; align-items:flex-end; padding:48px 56px; }
.slide-body.sec-intro h2 { font-size:2.2rem; font-weight:300; color:#fff; }
.slide-body.outro { background:var(--fond); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; }

/* Progressive reveal */
.step { opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
.step.shown { opacity:1; transform:translateY(0); }

/* Cover */
.hero-box { background:var(--accent); border-radius:3px; padding:36px 52px; max-width:580px; box-shadow:0 8px 40px rgba(0,0,0,.3); margin-bottom:32px; }
.hero-box h1 { font-size:2rem; font-weight:300; color:#fff; line-height:1.25; }
.hero-box .sub { font-size:1rem; color:rgba(255,255,255,.88); margin-top:8px; font-weight:300; }
.c-author { font-size:1.1rem; color:rgba(255,255,255,.85); letter-spacing:2px; font-variant:small-caps; margin-bottom:6px; }
.c-school  { font-size:.9rem; color:rgba(255,255,255,.55); }

/* Content typography */
.slide-title { font-size:1.55rem; font-weight:300; color:var(--fond); margin-bottom:26px; padding-bottom:10px; border-bottom:2px solid var(--accent); }
.slide-body del { text-decoration:line-through; opacity:.55; }
.lead { font-size:1.05rem; line-height:1.7; color:#2a2a2a; margin-bottom:20px; }
ul.bullets { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
ul.bullets li { display:flex; align-items:flex-start; gap:10px; font-size:1rem; line-height:1.6; color:#2a2a2a; }
ul.bullets li::before { content:''; width:9px; height:9px; min-width:9px; border-radius:50%; background:var(--accent); margin-top:7px; }
.sub-label { font-size:1rem; font-weight:700; color:var(--fond); margin:20px 0 10px; }
pre { font-family:'Source Code Pro',monospace; font-size:.87rem; background:var(--fond-code); color:#cde; border-radius:4px; padding:18px 22px; margin:16px 0; overflow-x:auto; line-height:1.7; }
pre .kw { color:var(--accent); font-weight:600; }
pre .fn { color:#81b29a; }
blockquote { border-left:4px solid var(--accent); padding:10px 20px; margin:18px 0; font-style:italic; font-size:1.05rem; color:#444; background:color-mix(in srgb, var(--accent) 8%, white); border-radius:0 4px 4px 0; }
.data-table { border-collapse:collapse; width:100%; max-width:600px; margin:16px 0; font-size:.95rem; }
.data-table th { text-align:left; padding:8px 16px; border-bottom:2px solid var(--fond); color:var(--fond); font-weight:700; font-size:.88rem; }
.data-table td { padding:9px 16px; border-bottom:1px solid #e0e0e0; }
.data-table tr:last-child td { border-bottom:none; }
.data-table code { font-family:'Source Code Pro',monospace; font-size:.84rem; }
.pipeline { font-family:'Source Code Pro',monospace; font-size:.85rem; background:var(--fond-code); color:#cde; border-radius:4px; padding:22px 28px; margin:16px 0; line-height:2; }
.pipeline .arrow { color:var(--accent); font-weight:700; }
.pipeline .lbl   { color:#81b29a; }
.outro h2 { font-size:2rem; font-weight:300; margin-bottom:32px; }
.outro ul  { list-style:none; font-size:1.15rem; line-height:2.5; color:rgba(255,255,255,.8); }

/* ── Mermaid diagrams ── */
.mermaid-wrap { margin:16px 0; text-align:center; }
.mermaid-wrap svg { max-width:100%; height:auto; }
/* pre.mermaid est toujours dans un .step {opacity:0} ; mermaid cache lui-même l'élément source après rendu */

/* ── Math (KaTeX) ── */
.katex-display { margin: 1em 0; overflow-x: auto; }
.katex { font-size: 1.05em; }
.math-fallback { font-family: 'Source Code Pro', monospace; opacity: .7; }

/* ── Code block wrapper (title + optional line numbers) ── */
.code-block { border-radius:6px; overflow:hidden; margin:16px 0; }
.code-block pre { margin:0; border-radius:0; }
.code-title {
  background:var(--fond-code);
  filter:brightness(1.35);
  color:rgba(205,225,235,.65);
  font-family:'Source Code Pro',monospace;
  font-size:.78rem;
  padding:5px 16px 5px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  letter-spacing:.03em;
}

/* ── Animated code transitions (lang~) ── */
.code-morph { margin:16px 0; }
.code-morph pre { margin:0; }
.code-morph .code-title { display:block; }
.cm-line { display:block; line-height:1.7; }

/* ── Line numbers (lang# or lang~#) ── */
pre.with-ln { padding-left:0; }
pre.with-ln code { counter-reset:ln; display:block; padding:18px 22px 18px 0; }
pre.with-ln .cm-line {
  padding-left:3.8em;
  position:relative;
}
pre.with-ln .cm-line::before {
  counter-increment:ln;
  content:counter(ln);
  position:absolute;
  left:0;
  width:3em;
  text-align:right;
  color:rgba(255,255,255,.25);
  font-size:.82em;
  line-height:inherit;
  user-select:none;
  pointer-events:none;
}

/* Line being removed: red tint then fade out */
.cm-line.cm-removing {
  background: rgba(255,80,80,.18);
  opacity: 0;
  transition: opacity .22s ease, background .15s ease;
}

/* Line being added: start invisible, fade in */
.cm-line.cm-appearing {
  opacity: 0;
  background: rgba(80,200,100,.15);
}
.cm-line.cm-appearing.cm-appear {
  opacity: 1;
  transition: opacity .28s ease;
}

/* Ghost steps that hold transition data — never visible */
.step:has(> .cm-transition) {
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* ── Box blocks ── */
.slide-box {
  border-radius:6px; margin:14px 0; overflow:hidden;
  border-left:4px solid; font-size:.95rem;
}
.box-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  padding:5px 14px; opacity:.95;
}
.box-body { padding:10px 14px; }
.box-body p  { margin:0 0 6px; line-height:1.6; }
.box-body p:last-child { margin-bottom:0; }
.box-body ul { margin:4px 0; padding-left:18px; }
.box-body li { margin-bottom:4px; line-height:1.5; }

.box-définition { --bx:var(--bx-définition); border-color:var(--bx); background:color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-définition .box-title { background:color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color:color-mix(in srgb,var(--bx) 80%,#000); }
.box-définition .box-title::before { content:'📖 '; }

.box-attention { --bx:var(--bx-attention); border-color:var(--bx); background:color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-attention .box-title { background:color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color:color-mix(in srgb,var(--bx) 80%,#000); }
.box-attention .box-title::before { content:'⚠ '; }

.box-info { --bx:var(--bx-info); border-color:var(--bx); background:color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-info .box-title { background:color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color:color-mix(in srgb,var(--bx) 80%,#000); }
.box-info .box-title::before { content:'ℹ '; }

.box-exemple { --bx:var(--bx-exemple); border-color:var(--bx); background:color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-exemple .box-title { background:color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color:color-mix(in srgb,var(--bx) 80%,#000); }
.box-exemple .box-title::before { content:'▶ '; }

.box-remarque { --bx:var(--bx-remarque); border-color:var(--bx); background:color-mix(in srgb,var(--bx) 8%,var(--fond-slide)); }
.box-remarque .box-title { background:color-mix(in srgb,var(--bx) 18%,var(--fond-slide)); color:color-mix(in srgb,var(--bx) 80%,#000); }
.box-remarque .box-title::before { content:'💡 '; }

/* ── Media blocks ── */
.media-wrap { margin:14px 0; }
.media-wrap img   { max-width:100%; max-height:300px; border-radius:4px; object-fit:contain; display:block; }
.media-wrap video { max-width:100%; max-height:300px; border-radius:4px; display:block; }
.media-wrap audio { width:100%; max-width:480px; display:block; }
.media-wrap iframe { width:100%; aspect-ratio:16/9; max-height:300px; border:none; border-radius:4px; display:block; }
.media-img, .media-audio { display:flex; flex-direction:column; align-items:center; }
.media-video { display:flex; justify-content:center; }
.media-caption { font-size:.78rem; color:#888; margin-top:6px; text-align:center; font-style:italic; }

/* ── Columns layout ── */
.col-wrap { display:flex; gap:28px; width:100%; margin:8px 0; align-items:flex-start; }
.col { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.col .media-wrap { margin:6px 0; }

/* ── Centred block ── */
.media-centre { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; margin:8px 0; }

/* ── Inline media ── */
.inline-img   { max-height:1.3em; vertical-align:middle; object-fit:contain; }
.inline-media { height:1.3em; vertical-align:middle; }

/* Grid overlay */
#grid-overlay {
  position:fixed; inset:0; z-index:500; background:rgba(14,24,32,.97);
  display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#grid-overlay.open { opacity:1; pointer-events:all; }
#grid-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px 12px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
#grid-title { font-size:.9rem; color:rgba(255,255,255,.55); font-variant:small-caps; letter-spacing:2px; }
#grid-close {
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
#grid-close:hover { background:var(--accent); }
#grid-cells {
  flex:1; overflow-y:auto; padding:20px 24px 24px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; align-content:start;
}
.grid-cell {
  border-radius:6px; overflow:hidden; cursor:pointer; border:2px solid rgba(255,255,255,.08);
  transition:border-color .18s, transform .18s, box-shadow .18s;
  box-shadow:0 3px 10px rgba(0,0,0,.5); background:#1a2a35; display:flex; flex-direction:column;
}
.grid-cell:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 10px 30px rgba(0,0,0,.6); border-color:rgba(255,255,255,.3); }
.grid-cell.current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.grid-cell.done-cell { border-color:rgba(100,200,100,.5); }
.gc-preview { width:100%; position:relative; overflow:hidden; background:#fff; flex-shrink:0; }
.gc-clone { position:absolute; top:0; left:0; transform-origin:top left; pointer-events:none; }
.gc-clone .step { opacity:1!important; transform:none!important; transition:none!important; }
.gc-clone .slide { opacity:1!important; transform:none!important; position:relative!important; pointer-events:none!important; }
.gc-label-bar { padding:6px 10px 7px; display:flex; align-items:center; justify-content:space-between; gap:6px; background:rgba(255,255,255,.04); }
.gc-label-text { font-size:10px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.gc-label-num  { font-size:9px; color:rgba(255,255,255,.3); font-variant:tabular-nums; flex-shrink:0; }
.gc-done-badge { font-size:9px; color:rgba(100,220,100,.85); font-weight:700; flex-shrink:0; }

/* PDF loading overlay */
#pdf-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(14,24,32,.85); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
#pdf-overlay.active { display:flex; }
#pdf-overlay p { color:#fff; font-size:1rem; font-weight:300; letter-spacing:.5px; }
.pdf-spinner {
  width:40px; height:40px; border-radius:50%;
  border:3px solid rgba(255,255,255,.2); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════════
   PRESENTER CONSOLE  (#presenter-view)
══════════════════════════════════════════════ */
#presenter-view {
  display:none; flex-direction:column; height:100%;
  background:#0e1820;
}
#presenter-view.active { display:flex; }

/* Off-screen pres-view for dual mode */
#pres-view.offscreen {
  position:fixed !important; left:-9999px !important; top:0 !important;
  width:1280px !important; height:720px !important;
  display:flex !important; pointer-events:none;
}
#pres-view.offscreen #footer { display:none !important; }

/* ── Presenter header ── */
#pr-header {
  background:var(--fond); border-bottom:2px solid var(--accent);
  padding:0 20px; height:48px; min-height:48px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
#pr-title { font-size:.88rem; font-weight:300; color:rgba(255,255,255,.7); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pr-clock {
  font-family:'Source Code Pro',monospace; font-size:1.15rem; font-weight:700;
  letter-spacing:.06em; padding:4px 12px; border-radius:6px;
  background:#1d1d1f; color:#34c759; flex-shrink:0;
}

/* ── Presenter body ── */
#pr-body {
  flex:1; display:grid; min-height:0;
  grid-template-columns:1fr 300px;
  grid-template-rows:1fr;
  overflow:hidden;
}

/* ── Current preview area ── */
#pr-main {
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:#0a1218; overflow:hidden; position:relative;
}
#pr-preview-wrap { position:relative; flex-shrink:0; border-radius:6px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.6); }
#pr-preview-current { position:relative; overflow:hidden; }
#pr-ann-canvas {
  position:absolute; inset:0; border-radius:6px;
  pointer-events:none; z-index:10;
}
#pr-ann-canvas.active { pointer-events:auto; cursor:crosshair; }
#pr-ptr-dot {
  position:absolute; width:18px; height:18px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; display:none; z-index:20;
  background:#ef4444;
  box-shadow:0 0 0 3px #ef444440, 0 0 10px 4px #ef444470;
  transition:left .05s linear, top .05s linear;
}

/* ── Sidebar ── */
#pr-side {
  background:var(--fond); border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:0; overflow-y:auto;
}
.pr-card {
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.pr-card-label {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:rgba(255,255,255,.4); margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between;
}
.pr-card.collapsible .pr-card-label { cursor:pointer; user-select:none; margin-bottom:0; }
.pr-card.collapsible .pr-card-body  { display:none; margin-top:8px; }
.pr-card.collapsible.open .pr-card-body { display:block; }
.pr-chevron { transition:transform .2s; display:inline-block; font-style:normal; font-size:.8rem; }
.pr-card.collapsible.open .pr-chevron { transform:rotate(90deg); }

/* ── Next slide preview ── */
#pr-preview-next-wrap { background:#0a1218; border-radius:4px; overflow:hidden; }
#pr-preview-next { position:relative; overflow:hidden; }

/* ── Pagination & nav ── */
.pr-pag { font-size:1.2rem; font-weight:700; text-align:center; color:#fff; padding:4px 0; letter-spacing:.03em; }
.pr-nav-row { display:flex; gap:6px; margin-top:8px; }
.pr-nav-row .btn-ghost { flex:1; text-align:center; justify-content:center; padding:7px 8px; font-size:.82rem; }

/* ── Tool buttons ── */
.pr-tools { display:flex; gap:5px; flex-wrap:wrap; }
.pr-tools .btn-ghost { padding:6px 10px; font-size:.8rem; }
.pr-tools .btn-ghost.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── Color swatches ── */
.pr-swatches { display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.pr-swatch {
  width:20px; height:20px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .15s; flex-shrink:0;
}
.pr-swatch.on   { outline-color:var(--accent); }
.pr-swatch:hover{ outline-color:rgba(255,255,255,.5); }
.pr-swatch.on:hover { outline-color:var(--accent); }
.pr-size-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.pr-size-row span { font-size:.72rem; color:var(--gray-text); }
.pr-size-row input[type=range] { flex:1; accent-color:var(--accent); }
.pr-size-val { font-size:.72rem; color:var(--gray-text); min-width:20px; text-align:right; }

/* ── Notes ── */
.pr-notes-text {
  white-space:pre-wrap; font-size:.8rem; line-height:1.6;
  max-height:150px; overflow-y:auto; color:rgba(255,255,255,.8);
}
.pr-notes-empty { color:var(--gray-text); font-style:italic; }

/* ── Stopwatch ── */
.pr-sw-display {
  font-family:'Source Code Pro',monospace; font-size:1.3rem; font-weight:700;
  text-align:center; padding:8px; border-radius:6px;
  background:#1d1d1f; color:#34c759; letter-spacing:.08em; margin-bottom:8px;
}
.pr-sw-row { display:flex; gap:6px; }
.pr-sw-row .btn-ghost { flex:1; text-align:center; justify-content:center; padding:6px 6px; font-size:.78rem; }

/* ── Notes editor modal (within presenter) ── */
#pr-notes-editor {
  position:fixed; inset:0; z-index:600; background:#0e1820;
  overflow-y:auto; padding:24px; display:none;
}
#pr-notes-editor.visible { display:block; }
.pr-ne-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.pr-ne-header h2 { font-size:1rem; font-weight:600; color:#fff; }
.pr-ne-entry { display:flex; gap:10px; margin-bottom:10px; align-items:flex-start; }
.pr-ne-entry .ne-lbl {
  width:160px; padding:7px 10px; font-size:.78rem; flex-shrink:0;
  border:1px solid rgba(255,255,255,.15); border-radius:6px;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.6);
  font-family:'Source Code Pro',monospace;
}
.pr-ne-entry textarea {
  flex:1; height:68px; resize:vertical; padding:7px 10px; font-size:.82rem;
  border:1px solid rgba(255,255,255,.15); border-radius:6px;
  background:rgba(255,255,255,.07); color:#fff; font-family:inherit; outline:none;
}

/* ── Load modal ── */
#load-modal {
  position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
}
#load-modal.hidden { display:none; }
#load-box {
  background:#182530; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  width:min(500px,96vw); box-shadow:0 24px 60px rgba(0,0,0,.6); overflow:hidden;
}
#load-box-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.08);
}
#load-box-header h2 { font-size:.95rem; font-weight:600; color:#fff; }
#load-close {
  background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer;
  font-size:1.2rem; line-height:1; padding:2px 6px; border-radius:4px; transition:color .12s;
}
#load-close:hover { color:#fff; }
#load-tabs {
  display:flex; border-bottom:1px solid rgba(255,255,255,.08);
  padding:0 8px;
}
.load-tab {
  background:none; border:none; border-bottom:2px solid transparent;
  color:rgba(255,255,255,.5); font-size:.85rem; padding:10px 14px; cursor:pointer;
  transition:color .15s, border-color .15s; margin-bottom:-1px;
}
.load-tab.active { color:#fff; border-bottom-color:var(--accent); }
.load-tab:hover:not(.active) { color:rgba(255,255,255,.8); }
.load-section { padding:20px; }
.load-section.hidden { display:none; }
.load-url-row { display:flex; gap:10px; }
#load-url-input {
  flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:6px; padding:9px 12px; color:#fff; font-size:.88rem;
  font-family:'Source Code Pro',monospace; outline:none; transition:border-color .15s;
}
#load-url-input:focus { border-color:var(--accent); }
.load-error {
  margin-top:10px; padding:9px 12px; background:rgba(220,50,50,.15);
  border:1px solid rgba(220,50,50,.35); border-radius:6px;
  color:#f87171; font-size:.82rem; line-height:1.5;
}
.load-error.hidden { display:none; }
.load-file-drop {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:36px 20px; border:2px dashed rgba(255,255,255,.18);
  border-radius:8px; cursor:pointer; transition:border-color .15s, background .15s;
  color:rgba(255,255,255,.5); text-align:center;
}
.load-file-drop:hover, .load-file-drop.drag-over {
  border-color:var(--accent); background:rgba(255,255,255,.04); color:rgba(255,255,255,.8);
}
.load-file-drop span { font-size:.88rem; }
#load-url-btn { white-space:nowrap; }
#load-url-btn.loading { opacity:.6; pointer-events:none; }

/* ── Help modal ── */
#help-modal {
  position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
}
#help-modal.hidden { display:none; }
#help-box {
  background:#182530; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  width:min(820px,96vw); max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
#help-box-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0;
  background:#182530; z-index:1;
}
#help-box-header h2 { font-size:.95rem; font-weight:600; color:#fff; letter-spacing:.3px; }
#help-close {
  background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer;
  font-size:1.2rem; line-height:1; padding:2px 6px; border-radius:4px; transition:color .12s;
}
#help-close:hover { color:#fff; }
#help-body { padding:20px 22px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:600px) { #help-body { grid-template-columns:1fr; } }
.help-section h3 {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); margin-bottom:10px; border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding-bottom:5px;
}
.help-section { display:flex; flex-direction:column; gap:2px; }
.help-row {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px; align-items:baseline; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.help-row:last-child { border-bottom:none; }
.help-row code {
  font-family:'Source Code Pro',monospace; font-size:.75rem;
  background:rgba(0,0,0,.35); border-radius:4px; padding:2px 7px;
  color:#9fc5d0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.help-row span { font-size:.78rem; color:rgba(255,255,255,.65); line-height:1.4; }

/* ── Media manager tab ── */
#media-panel {
  flex:1; display:flex; flex-direction:column; overflow:hidden; background:#111c24;
}
#media-panel.hidden { display:none; }
#media-toolbar {
  display:flex; align-items:center; gap:8px; padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
#media-toolbar .btn-ghost { padding:6px 14px; font-size:.82rem; }
#media-grid {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start;
}
.media-empty {
  width:100%; text-align:center; color:var(--gray-text);
  font-size:.88rem; padding:40px 0; line-height:2;
}
.media-card {
  width:160px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s;
}
.media-card:hover { border-color:rgba(255,255,255,.22); }
.media-preview {
  height:90px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); overflow:hidden;
}
.media-thumb-img { width:100%; height:100%; object-fit:cover; }
.media-type-icon {
  font-size:2rem; opacity:.6; user-select:none;
}
.media-info {
  padding:8px; display:flex; flex-direction:column; gap:4px; flex:1;
}
.media-name {
  font-size:.76rem; font-weight:600; color:#c8d8e0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; border-radius:3px; padding:1px 2px;
  transition:background .12s;
}
.media-name:hover { background:rgba(255,255,255,.1); }
.media-meta { font-size:.68rem; color:var(--gray-text); }
.media-actions { display:flex; gap:4px; margin-top:auto; padding-top:4px; }
.media-btn {
  flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7); border-radius:4px; font-size:.8rem;
  padding:4px 6px; cursor:pointer; text-align:center; transition:background .12s;
}
.media-btn:hover { background:rgba(255,255,255,.16); }
.media-btn-del:hover { background:rgba(220,38,38,.3); border-color:rgba(220,38,38,.5); color:#fca5a5; }
.media-rename-input {
  width:100%; background:rgba(0,0,0,.4); border:1px solid var(--accent);
  color:#fff; border-radius:3px; padding:2px 4px;
  font-size:.76rem; font-family:inherit; outline:none;
}
.media-badge {
  position:absolute; top:-5px; right:-5px;
  background:var(--accent); color:#fff;
  font-size:.65rem; font-weight:700; min-width:16px; height:16px;
  border-radius:8px; padding:0 4px; line-height:16px; text-align:center;
}
#btn-media { position:relative; }
#btn-media.on { background:color-mix(in srgb, var(--accent) 25%, transparent); border-color:var(--accent); color:var(--accent); }
.drag-over { outline:2px dashed var(--accent); outline-offset:-4px; }
.pr-ne-entry textarea:focus { border-color:var(--accent); }