/**
 * Lessons Editor — Mobile CSS  v8.0
 * Headers: nome da unit / nome da lesson no sub-bar
 * Badge DRAFT: apenas no sub-bar, discret — sem amarelo nos cards
 */

/* ══════════════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    /* Tokens alinhados ao desktop / se-modal-theme (indigo slate) */
    --le-ink:       #0f172a;
    --le-ink-2:     #334155;
    --le-muted:     #64748b;
    --le-muted-2:   #94a3b8;
    --le-rule:      #e2e8f0;
    --le-surface:   #f8fafc;
    --le-white:     #ffffff;
    --le-primary:   #4F46E5;
    --le-primary-deep: #4338CA;
    --le-primary-soft: #EEF2FF;
    --le-accent:    #6366F1;
    --le-green:     #059669;
    --le-warn:      #d97706;
    --le-error:     #dc2626;
    --le-f-dis:     'DM Serif Display', Georgia, serif;
    --le-f-mono:    'DM Mono', monospace;
    --le-f-body:    'DM Sans', system-ui, sans-serif;
    --le-ease:      cubic-bezier(.22,.68,0,1.2);
    --le-ease-spring:   cubic-bezier(.34,1.56,.64,1);
    --le-ease-out:      cubic-bezier(.16,1,.3,1);
    --le-ease-standard: cubic-bezier(.4,0,.2,1);
    --le-dur-nano:      80ms;
    --le-dur-micro:     140ms;
    --le-dur-normal:    260ms;
    --le-bar-h:     52px;
    --le-radius:    14px;
    --le-radius-s:  10px;
    --le-shadow:    0 1px 3px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.04);
  }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP → OCULTO
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .editor-sidebar              { display: none !important; }
  .editor-preview              { display: none !important; }
  .editor-header               { display: none !important; }
  .editor-columns              { display: none !important; }
  #editorView .editor-columns  { display: none !important; }
  #editorView .editor-item-header { display: none !important; }

  .editor-layout {
    display: flex !important; flex-direction: column !important;
    height: calc(100dvh - var(--mg-nav-current, 52px)) !important;
    overflow: hidden !important;
  }
  .editor-center {
    flex: 1 !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; padding: 0 !important; margin: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SECTION PICKER → bottom sheet
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #sectionPickerModal.show {
    display: flex !important; align-items: flex-end !important;
    background: rgba(0,0,0,.5) !important; -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important;
  }
  #sectionPickerModal .modal-content {
    width: 100% !important; max-width: 100% !important;
    height: 82dvh !important; max-height: 82dvh !important;
    border-radius: 20px 20px 0 0 !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; padding-bottom: env(safe-area-inset-bottom,0) !important;
  }
  #sectionPickerModal .modal-header      { padding: 14px 20px 12px !important; flex-shrink: 0 !important; }
  #sectionPickerModal .section-helper-panel { display: none !important; }
  #sectionPickerModal .spm-left         { border-right: none !important; padding: 14px 16px !important; }
  #sectionPickerModal .modal-body        { border-radius: 0 !important; }
  #sectionPickerModal #sectionTypesGrid  { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  #sectionPickerModal .section-type-card { padding: 14px 6px !important; gap: 6px !important; }
  #sectionPickerModal .section-type-icon  { font-size: 28px !important; }
  #sectionPickerModal .section-type-label { font-size: 10px !important; }
}

/* ══════════════════════════════════════════════════════════
   PREVIEW OVERLAY — iframe + rodapé de navegação
   ══════════════════════════════════════════════════════════ */
#lePreviewOverlay {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9800;
  background: #000; opacity: 0;
  transition: opacity .28s ease;
  display: none;
  flex-direction: column;
  padding: 0 !important; margin: 0 !important;
  overflow: hidden !important;
}
#lePreviewOverlay.le-preview-overlay-visible {
  display: flex !important; opacity: 1;
}

#lePreviewViewport {
  flex: 1; position: relative; overflow: hidden; background: #000;
}

#lePreviewViewport #visualPreview,
#lePreviewViewport .preview-panel,
#lePreviewViewport .preview-content,
#lePreviewViewport .preview-visual-container,
#lePreviewViewport .smartphone-screen {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  padding: 0 !important; margin: 0 !important;
  background: #fff !important;
  border: none !important; border-radius: 0 !important;
  overflow: hidden !important; box-shadow: none !important;
  display: block !important;
  max-width: none !important; max-height: none !important;
}
#lePreviewViewport .smartphone-frame {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  padding: 0 !important; margin: 0 !important;
  background: #000 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
#lePreviewViewport .smartphone-frame::before,
#lePreviewViewport .smartphone-frame::after,
#lePreviewViewport .home-indicator { display: none !important; }
#lePreviewViewport iframe,
#lePreviewViewport .smartphone-webview,
#lePreviewViewport .preview-iframe-wrapper {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  padding: 0 !important; margin: 0 !important;
  border: none !important; border-radius: 0 !important;
  transform: none !important; background: #fff !important;
  display: block !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important;
}
#lePreviewViewport .preview-controls,
#lePreviewViewport .preview-tabs,
#lePreviewViewport .preview-status,
#lePreviewViewport .preview-reload-btn-new { display: none !important; }

#lePreviewFooter {
  flex-shrink: 0;
  height: calc(52px + env(safe-area-inset-bottom, 0px));
  padding: 0 12px env(safe-area-inset-bottom, 0px);
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,.1);
  display: flex; align-items: center; gap: 10px;
}

.le-pf-back {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px 0 10px;
  background: #0d0d0d; color: #fff;
  border: none; border-radius: 10px;
  font-family: var(--le-f-body, system-ui); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s, transform .12s;
  box-shadow: 0 2px 8px rgba(13,13,13,.18);
}
.le-pf-back svg { flex-shrink: 0; }
.le-pf-back:active { background: #2a2a2a; transform: scale(.95); }

.le-pf-versions-wrap {
  flex: 1; display: flex; align-items: center; justify-content: flex-end;
  position: relative; min-width: 0;
}
.le-pf-versions-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px 0 12px;
  border: 1.5px solid rgba(13,13,13,.12); border-radius: 9px;
  background: #fff;
  font-family: var(--le-f-body, system-ui); font-size: 12px; font-weight: 600;
  color: var(--le-ink, #0d0d0d);
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(13,13,13,.06);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .14s, background .12s;
  max-width: 180px; overflow: hidden;
}
.le-pf-versions-btn:active { background: #f5f5f3; }
.le-pf-versions-btn--open { border-color: var(--le-primary, #6366f1); }
.le-pf-vers-label {
  font-family: var(--le-f-mono, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--le-muted, #7a7570); flex-shrink: 0;
}
.le-pf-vers-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700; }
.le-pf-vers-arrow { flex-shrink: 0; color: var(--le-muted, #7a7570); transition: transform .18s; }
.le-pf-versions-btn--open .le-pf-vers-arrow { transform: rotate(180deg); }

.le-pf-versions-drop {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  min-width: 220px; max-width: 90vw;
  background: #fff; border: 1.5px solid rgba(13,13,13,.1); border-radius: 12px;
  box-shadow: 0 -8px 32px rgba(13,13,13,.14), 0 -2px 8px rgba(13,13,13,.07);
  overflow: hidden; z-index: 10010;
}
.le-pf-drop-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 14px; border: none; background: none;
  text-align: left; cursor: pointer;
  border-bottom: 1px solid rgba(13,13,13,.05);
  -webkit-tap-highlight-color: transparent; transition: background .12s;
}
.le-pf-drop-item:last-child { border-bottom: none; }
.le-pf-drop-item:active { background: rgba(13,13,13,.04); }
.le-pf-drop-item--active { background: rgba(99,102,241,.05); }
.le-pf-drop-dot { font-size: 18px; line-height: 1; flex-shrink: 0; color: rgba(13,13,13,.2); }
.le-pf-drop-dot--active { color: var(--le-primary, #6366f1); }
.le-pf-drop-text {
  flex: 1; min-width: 0;
  font-family: var(--le-f-body, system-ui); font-size: 13px; font-weight: 600;
  color: var(--le-ink, #0d0d0d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.le-pf-drop-item--active .le-pf-drop-text { color: var(--le-primary, #6366f1); }
.le-pf-drop-ro {
  font-family: var(--le-f-mono, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(13,13,13,.07); color: var(--le-muted, #7a7570);
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.le-pf-drop-edit { font-size: 14px; flex-shrink: 0; }
.le-pf-drop-empty {
  padding: 16px 14px;
  font-family: var(--le-f-mono, monospace); font-size: 11px;
  color: var(--le-muted-2, #a8a29e); text-align: center;
}

.le-preview-fab-wrap { display: none !important; }

.le-preview-fab {
  height: 52px; border-radius: 26px;
  background: #ffffff; border: none; color: #0d0d0d;
  font-family: var(--le-f-body, system-ui); font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; white-space: nowrap; overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.2);
  transition: width .32s var(--le-ease, cubic-bezier(.22,.68,0,1.2)),
              padding .32s var(--le-ease, cubic-bezier(.22,.68,0,1.2)),
              border-radius .32s var(--le-ease, cubic-bezier(.22,.68,0,1.2)),
              transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.le-preview-fab svg { flex-shrink: 0; }
.le-preview-fab .le-pfab-label { white-space: nowrap; }
.le-preview-fab:active { transform: scale(.93); box-shadow: 0 2px 12px rgba(0,0,0,.22); }
.le-preview-fab.le-pfab-collapsed { width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center; }
.le-preview-fab.le-pfab-collapsed .le-pfab-label { display: none; }

.le-versions-fab {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.28);
  color: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent; transition: background .15s, transform .15s;
}
.le-versions-fab:active { background: rgba(255,255,255,.28); transform: scale(.9); }

.le-versions-sheet-bd {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.6); display: flex; align-items: flex-end;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s ease;
}
.le-versions-sheet-bd.le-vs-open { opacity: 1; }
.le-versions-sheet {
  width: 100%; max-height: 70dvh;
  background: var(--le-white, #fff); border-radius: 22px 22px 0 0;
  overflow: hidden; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
  transform: translateY(100%);
  transition: transform .3s var(--le-ease, cubic-bezier(.22,.68,0,1.2));
}
.le-versions-sheet-bd.le-vs-open .le-versions-sheet { transform: translateY(0); }
.le-versions-sheet-handle { width: 44px; height: 5px; background: rgba(13,13,13,.1); border-radius: 3px; margin: 12px auto 0; flex-shrink: 0; }
.le-versions-sheet-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--le-rule, rgba(13,13,13,.07));
  display: flex; align-items: flex-start; justify-content: space-between;
  background: var(--le-surface, #f7f7f5); flex-shrink: 0; gap: 10px;
}
.le-versions-sheet-title { font-family: var(--le-f-body, system-ui); font-size: 16px; font-weight: 800; color: var(--le-ink, #0d0d0d); letter-spacing: -.02em; }
.le-versions-sheet-sub { font-family: var(--le-f-mono, monospace); font-size: 10px; color: var(--le-muted-2, #a8a29e); margin-top: 3px; letter-spacing: .04em; }
.le-versions-sheet-x {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(13,13,13,.07); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--le-muted, #7a7570);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.le-versions-sheet-x:active { background: rgba(13,13,13,.13); }
.le-versions-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0; }
.le-versions-list::-webkit-scrollbar { display: none; }
.le-version-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid rgba(13,13,13,.05);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s;
}
.le-version-item:active { background: rgba(13,13,13,.04); }
.le-version-item.le-vi-current { background: rgba(99,102,241,.05); }
.le-vi-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(13,13,13,.15); flex-shrink: 0; }
.le-vi-dot-current { background: var(--le-primary, #6366f1) !important; }
.le-vi-info { flex: 1; min-width: 0; }
.le-vi-label { font-family: var(--le-f-body, system-ui); font-size: 14px; font-weight: 600; color: var(--le-ink, #0d0d0d); }
.le-vi-time { font-family: var(--le-f-mono, monospace); font-size: 10px; color: var(--le-muted-2, #a8a29e); margin-top: 2px; }
.le-vi-chip {
  font-family: var(--le-f-mono, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  background: rgba(99,102,241,.1); color: var(--le-primary, #6366f1); flex-shrink: 0;
}
.le-vi-chip-edit { background: rgba(34,197,94,.1) !important; color: #16a34a !important; }

/* ══════════════════════════════════════════════════════════
   SUB-BAR
   ══════════════════════════════════════════════════════════ */
#leSubBar {
  display: none; position: fixed; left: 0; right: 0; z-index: 193; min-height: 48px;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--le-rule, #e2e8f0); box-shadow: 0 1px 0 rgba(15,23,42,.04);
  flex-direction: row; align-items: center; flex-shrink: 0;
  padding: 0 12px 0 16px; gap: 10px;
  justify-content: flex-start; flex-wrap: nowrap;
}
#leSubBar.le-bar-visible { display: flex; }

.le-bar-actions-only { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.le-draft-badge-wrap {
  display: flex; align-items: center; gap: 5px; padding: 2px 6px 2px 3px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b; border-radius: 6px;
  animation: le-draft-pulse 2s ease-in-out infinite; flex-shrink: 0; margin-right: 0;
}
@keyframes le-draft-pulse {
  0%,100% { box-shadow: 0 1px 4px rgba(245,158,11,.2); }
  50%      { box-shadow: 0 2px 10px rgba(245,158,11,.4); }
}
.le-draft-badge {
  display: flex; align-items: center; gap: 3px; padding: 2px 6px;
  background: #f59e0b; color: #fff;
  font-family: var(--le-f-mono, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 4px;
}
.le-draft-badge-icon { font-size: 10px; line-height: 1; }
.le-discard-btn {
  padding: 2px 7px; background: #dc2626; color: #fff;
  border: none; border-radius: 4px;
  font-family: var(--le-f-body, system-ui); font-size: 10px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .14s, transform .12s; white-space: nowrap;
}
.le-discard-btn:active { background: #b91c1c; transform: scale(.93); }

.le-header-preview-btn {
  height: 36px; padding: 0 12px;
  border: 1.5px solid #c7d2fe; border-radius: var(--le-radius-s);
  background: var(--le-primary-soft, #EEF2FF); color: var(--le-primary, #4F46E5);
  font-family: var(--le-f-body); font-size: 12px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; transition: background .14s, border-color .14s, opacity .14s;
}
.le-header-preview-btn:active  { background: #e0e7ff; border-color: #a5b4fc; }
.le-header-preview-btn:disabled { cursor: not-allowed; pointer-events: none; }
.le-header-preview-icon { font-size: 14px; line-height: 1; }

.le-bar-btn {
  height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 4px;
  border: none; border-radius: var(--le-radius-s);
  font-family: var(--le-f-body); font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; transition: background .14s, transform .12s;
}
.le-bar-btn:active { transform: scale(.93); }
.le-btn-publish {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.le-btn-publish:disabled {
  background: rgba(13,13,13,.09) !important; box-shadow: none !important;
  color: rgba(13,13,13,.25) !important; pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════
   #leContent
   ══════════════════════════════════════════════════════════ */
#leContent { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
#leContent.le-visible { display: flex; }
.le-pane { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.le-pane.le-pane-active { display: flex; }

/* ══════════════════════════════════════════════════════════
   PANE 1: LIÇÕES
   ══════════════════════════════════════════════════════════ */
/* margin-top: 48px removido — --mg-nav-current já posiciona #leContent
   abaixo do sub-bar; o offset extra criava gap visível. */
.le-pane-lessons { background: transparent; }
.le-pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(80px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}
.le-pane-scroll::-webkit-scrollbar { display: none; }

.le-list-group-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 8px;
  font-family: var(--le-f-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--le-muted-2);
}
.le-list-group-label .le-group-count {
  background: rgba(13,13,13,.07); padding: 3px 9px; border-radius: 9px;
  font-size: 10px; letter-spacing: 0; color: var(--le-muted);
}

/* ── Swipe-to-reveal row ── */
.le-lc-row {
  position: relative; overflow: hidden;
  border-radius: var(--le-radius) !important;
  margin-bottom: 6px; height: auto; isolation: isolate;
}

.le-lc-actions {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: stretch; z-index: 0;
}
.le-lc-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 14px; min-width: 56px; min-height: 44px;
  border: none; cursor: pointer; gap: 3px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: filter 100ms var(--le-ease-standard, ease);
}
.le-lc-act:active       { filter: brightness(1.2); }
.le-lc-act--edit        { background: #6366f1; color: #fff; }
.le-lc-act--dup         { background: #7c3aed; color: #fff; }
.le-lc-act--del         { background: #ef4444; color: #fff; }
.le-lc-act-icon         { font-size: 18px; line-height: 1; }
.le-lc-act-label        { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

/* ══ Card de lesson — Glass Knowpill (= desktop section-cards.css) ══ */
.le-lesson-card {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 6px !important;
  border-radius: var(--le-radius);
  background: linear-gradient(155deg,
    rgba(255,255,255,.88) 0%,
    rgba(186,230,253,.75) 45%,
    rgba(249,168,212,.55) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.12);
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.12);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 8px rgba(14,165,233,.08);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .15s, box-shadow .15s;
  min-height: 54px !important;
}
.le-lesson-card:active {
  /* NUNCA scale/transform — swipe usa translateX no mesmo elemento */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 4px 14px rgba(14,165,233,.16);
  filter: brightness(1.02);
}
.le-lesson-card.le-card-active {
  border-color: rgba(14,165,233,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 0 0 2px rgba(14,165,233,.25),
    0 6px 20px rgba(14,165,233,.18);
}
.le-lc-row:hover .le-lesson-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 18px rgba(14,165,233,.14);
}

.le-card-num { display: none; }
.le-card-body  { flex: 1; min-width: 0; }
.le-card-title {
  font-family: var(--le-f-body); font-size: 14px; font-weight: 600;
  color: #0c4a6e; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-bottom: 3px; letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgba(255,255,255,.65);
}
.le-card-meta  { display: flex; align-items: center; gap: 7px; }
.le-card-meta-pills { font-family: var(--le-f-mono); font-size: 9px; color: rgba(7,89,133,.75); }

/* ── Swipe hint: botão <<< (abre ações) — hit ≥ 44px ── */
.le-card-swipe-hint {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-left: 2px;
  width: 44px; min-width: 44px; height: 44px;
  padding: 0; border: none; background: transparent;
  color: rgba(12,74,110,.35);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background .18s ease;
  font: inherit;
}
.le-card-swipe-hint:hover,
.le-card-swipe-hint:focus-visible {
  color: rgba(79,70,229,.85);
  background: rgba(99,102,241,.08);
  outline: none;
}
.le-card-swipe-hint:active {
  background: rgba(99,102,241,.14);
  color: #4F46E5;
}
/* Inverte só o SVG — nunca o transform do card (swipe usa translateX) */
.le-card-swipe-hint-ico,
.le-card-swipe-hint svg {
  display: block;
  transition: transform .22s ease;
}
.le-lesson-card.le-card-swipe-open .le-card-swipe-hint,
.section-card.le-card-swipe-open .le-card-swipe-hint {
  color: rgba(79,70,229,.75);
}
.le-lesson-card.le-card-swipe-open .le-card-swipe-hint-ico,
.le-lesson-card.le-card-swipe-open .le-card-swipe-hint svg,
.section-card.le-card-swipe-open .le-card-swipe-hint svg {
  transform: scaleX(-1);
}
.le-card-active .le-card-swipe-hint { color: rgba(12,74,110,.42); }

/* Press visual SEM transform (não compete com translateX do swipe) */
.le-lesson-card.le-card-pressing {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 2px rgba(99,102,241,.2) !important;
  filter: brightness(1.03);
}

/* Hint de uso da lista */
.le-dashed-hint {
  margin: 10px 14px 6px;
  padding: 9px 14px;
  border: 1.5px dashed rgba(99,102,241,.22);
  border-radius: 12px;
  font-family: var(--le-f-mono, "DM Mono", monospace);
  font-size: 10px;
  color: var(--le-muted, #64748b);
  text-align: center;
  letter-spacing: .04em;
  line-height: 1.6;
  background: rgba(248,250,252,.8);
}
.le-dashed-hint strong {
  color: var(--le-ink, #0f172a);
  font-weight: 700;
}

/* ── Drag handle ── */
.le-card-drag-handle {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(13,13,13,.18); cursor: grab; flex-shrink: 0;
  border-radius: 10px; -webkit-tap-highlight-color: transparent; touch-action: none;
}
.le-card-drag-handle:active { background: rgba(13,13,13,.05); color: rgba(13,13,13,.4); }
.le-lc-row.le-card-dragging { opacity: .25; transform: scale(0.97) !important; box-shadow: none !important; }

.le-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 28px; text-align: center; gap: 10px;
}
.le-empty-icon { font-size: 42px; opacity: .25; }
.le-empty-text { font-family: var(--le-f-body); font-size: 16px; font-weight: 700; color: var(--le-muted); }
.le-empty-sub  { font-family: var(--le-f-mono); font-size: 11px; color: rgba(13,13,13,.28); line-height: 1.7; }
.le-empty-sub strong { color: var(--le-ink); }

/* ══════════════════════════════════════════════════════════
   PANE 2: PÍLULAS
   ══════════════════════════════════════════════════════════ */
.le-pane-pills { flex-direction: column; overflow: visible; background: transparent; position: relative; }
.le-pane-pills.le-pane-active { display: flex; }

.le-switcher-wrap {
  flex-shrink: 0; background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(13,13,13,.07); position: relative; z-index: 20;
  box-shadow: 0 2px 8px rgba(13,13,13,.04);
}
.le-switcher-row { display: flex; align-items: stretch; height: 56px; }
.le-switcher-btn {
  flex: 1; display: flex; align-items: center; gap: 11px;
  padding: 0 16px; border: none; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 0; text-align: left;
}
.le-switcher-btn:active { background: rgba(13,13,13,.02); }
.le-sw-icon  { font-size: 20px; flex-shrink: 0; line-height: 1; }
.le-sw-text  { flex: 1; min-width: 0; }
.le-sw-eyebrow {
  display: none; /* removido: palavra "Editando" era ruído visual */
}
.le-sw-name {
  display: block; font-family: var(--le-f-body); font-size: 13px; font-weight: 700;
  color: var(--le-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em;
}
.le-sw-badge {
  font-family: var(--le-f-mono); font-size: 10px; font-weight: 700;
  background: rgba(13,13,13,.06); color: var(--le-muted);
  padding: 3px 9px; border-radius: 9px; white-space: nowrap; flex-shrink: 0;
}
.le-sw-chevron { font-size: 12px; color: var(--le-muted-2); flex-shrink: 0; transition: transform .18s; }
.le-sw-edit-btn {
  width: 52px; border: none; border-left: 1px solid var(--le-rule);
  background: none; font-size: 17px; cursor: pointer; color: var(--le-muted);
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.le-sw-edit-btn:active { background: var(--le-surface); }

.le-switcher-drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 500;
  max-height: 55vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--le-white);
  box-shadow: 0 16px 40px rgba(13,13,13,.16), 0 4px 12px rgba(13,13,13,.08);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  /* Garante que o dropdown cubra o leSubBar sem precisar ocultá-lo */
  isolation: isolate;
}
.le-switcher-drop::-webkit-scrollbar { display: none; }
.le-drop-group {
  padding: 10px 16px 5px; font-family: var(--le-f-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--le-muted-2); background: var(--le-surface);
}
.le-drop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 16px;
  border: none; border-left: 3px solid transparent;
  background: none; cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; transition: background .13s;
}
.le-drop-item:active    { background: rgba(13,13,13,.04); }
.le-drop-item.le-drop-active { background: rgba(13,13,13,.04); border-left-color: var(--le-ink); }
.le-drop-item-activity.le-drop-active { border-left-color: var(--le-primary); }
.le-drop-num {
  width: 26px; height: 26px; border-radius: 7px; background: rgba(13,13,13,.07);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--le-f-mono); font-size: 11px; font-weight: 700; color: var(--le-muted); flex-shrink: 0;
}
.le-drop-active .le-drop-num   { background: var(--le-ink); color: #fff; }
.le-drop-num-activity          { background: rgba(99,102,241,.1) !important; color: var(--le-primary) !important; }
.le-drop-item-activity.le-drop-active .le-drop-num { background: var(--le-primary) !important; color: #fff !important; }
.le-drop-title {
  flex: 1; min-width: 0; font-family: var(--le-f-body); font-size: 12px; font-weight: 500;
  color: var(--le-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.le-drop-active .le-drop-title { font-weight: 700; }
.le-drop-pills { font-family: var(--le-f-mono); font-size: 10px; font-weight: 700; color: var(--le-muted-2); flex-shrink: 0; }
.le-drop-check { font-size: 15px; color: var(--le-ink); flex-shrink: 0; font-weight: 700; }

.le-pills-host { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: transparent; }
.le-pills-host::-webkit-scrollbar { display: none; }

#lePillsScrollHost .sections-scroll-body {
  height: auto !important; min-height: 100% !important; flex: none !important;
  overflow: visible !important; background: transparent !important;
  padding: 4px 14px calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ▼ ALTERADO: gap 6px (era 12px) */
#lePillsScrollHost .sections-container {
  display: flex !important; flex-direction: column !important; gap: 6px !important;
}

/* ── Section cards — Glass Knowpill (= desktop section-cards.css) ── */
#lePillsScrollHost .section-card {
  margin-bottom: 0 !important; border-radius: var(--le-radius) !important;
  background: linear-gradient(155deg,
    rgba(255,255,255,.88) 0%,
    rgba(186,230,253,.75) 45%,
    rgba(249,168,212,.55) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.12) !important;
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 8px rgba(14,165,233,.08) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  overflow: hidden !important; cursor: default !important;
  /* transform só via JS (translateX do swipe) */
  transition: box-shadow .15s, border-color .15s !important;
}
#lePillsScrollHost .section-card:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 4px 14px rgba(14,165,233,.16) !important;
  filter: brightness(1.02);
}
/* ▼ ALTERADO: min-height 54px (era 58px), padding/gap reduzidos */
#lePillsScrollHost .section-card-header {
  display: flex !important; align-items: center !important;
  gap: 10px !important; padding: 10px 12px 10px 6px !important; min-height: 54px !important;
}
#lePillsScrollHost .section-drag-handle {
  width: 44px !important; height: 44px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: rgba(13,13,13,.2) !important; cursor: grab !important; flex-shrink: 0 !important;
  border-radius: 10px !important; -webkit-tap-highlight-color: transparent !important;
}
#lePillsScrollHost .section-drag-handle:active { background: rgba(13,13,13,.06) !important; }
.drag-grip { display: block; }
/* ▼ ALTERADO: font-size 22px (era 26px) */
#lePillsScrollHost .section-icon { font-size: 22px !important; line-height: 1 !important; flex-shrink: 0 !important; }
#lePillsScrollHost .section-info { flex: 1; min-width: 0; }
#lePillsScrollHost .section-type {
  font-family: var(--le-f-mono) !important; font-size: 9px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  color: var(--le-accent) !important; margin-bottom: 3px !important;
}
/* ▼ ALTERADO: font-size 14px (era 15px) */
#lePillsScrollHost .section-title {
  font-family: var(--le-f-body) !important; font-size: 14px !important; font-weight: 600 !important;
  color: var(--le-ink) !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
#lePillsScrollHost .section-actions {
  display: flex !important; align-items: center !important; gap: 2px !important;
  flex-shrink: 0 !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important;
}
#lePillsScrollHost .btn-icon {
  width: 44px !important; height: 44px !important; border-radius: 11px !important;
  border: none !important; display: flex !important; align-items: center !important;
  justify-content: center !important; font-size: 17px !important; cursor: pointer !important;
  background: transparent !important; color: var(--le-muted) !important;
  -webkit-tap-highlight-color: transparent !important;
}
#lePillsScrollHost .btn-icon:active        { background: rgba(13,13,13,.07) !important; }
#lePillsScrollHost .btn-icon.delete        { color: rgba(229,62,62,.5) !important; }
#lePillsScrollHost .btn-icon.delete:active { background: rgba(229,62,62,.1) !important; color: var(--le-error) !important; }
#lePillsScrollHost .section-card--active,
.le-sc-row .section-card--active {
  border-color: rgba(14,165,233,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 0 0 2px rgba(14,165,233,.25),
    0 6px 20px rgba(14,165,233,.18) !important;
  transform: none !important;
  /* mantém glass — não sobrescrever background com branco */
}
#lePillsScrollHost .section-card .section-title {
  color: #0c4a6e !important;
  text-shadow: 0 1px 3px rgba(255,255,255,.65) !important;
}
#lePillsScrollHost .section-card .section-type  { color: rgba(7,89,133,.75) !important; }
#lePillsScrollHost .section-card.dragging  { opacity: 0.25 !important; transform: none !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════
   SECTIONS-AREA — overrides mobile
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sections-area {
    border: none !important; border-left: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important; flex: 1 !important;
  }
  .sections-header {
    background: rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(13,13,13,.07) !important;
    border-radius: 0 !important; padding: 12px 16px !important; gap: 10px !important;
    display: flex !important; align-items: center !important;
    box-shadow: 0 2px 8px rgba(13,13,13,.04) !important;
  }
  .sections-header h2 {
    font-family: var(--le-f-mono, monospace) !important; font-size: 10px !important;
    font-weight: 700 !important; letter-spacing: .1em !important;
    text-transform: uppercase !important; color: var(--le-muted, #7a7570) !important; flex: 1 !important;
  }
  .section-count {
    font-family: var(--le-f-mono, monospace) !important; font-size: 10px !important; font-weight: 700 !important;
    color: var(--le-accent, #8098bd) !important; background: rgba(128,152,189,.1) !important;
    border: 1px solid rgba(128,152,189,.2) !important; border-radius: 9px !important; padding: 3px 10px !important;
  }
  .btn-add-section { display: none !important; }
  #lePillsScrollHost .section-actions { display: none !important; }
  .sections-scroll-body {
    padding: 4px 14px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
  }
  /* ▼ ALTERADO: gap 6px (era 12px) */
  .sections-container { gap: 6px !important; }
  .section-card {
    border-radius: var(--le-radius, 14px) !important; margin-bottom: 0 !important;
    background: linear-gradient(155deg,
      rgba(255,255,255,.88) 0%,
      rgba(186,230,253,.75) 45%,
      rgba(249,168,212,.55) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.12) !important;
    backdrop-filter: blur(20px) saturate(1.8) brightness(1.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 8px rgba(14,165,233,.08) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    cursor: default !important;
    transition: box-shadow .15s, border-color .15s !important;
  }
  .section-card .section-title { color: #0c4a6e !important; text-shadow: 0 1px 3px rgba(255,255,255,.65) !important; }
  .section-card .section-type  { color: rgba(7,89,133,.75) !important; }
  .section-card:hover   {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 5px 18px rgba(14,165,233,.14) !important;
  }
  .section-card:active  {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 4px 14px rgba(14,165,233,.16) !important;
  }
  /* ▼ ALTERADO: min-height 54px, padding/gap menores */
  .section-card-header  { padding: 10px 12px 10px 8px !important; gap: 10px !important; min-height: 54px !important; }
  .section-card .section-actions { opacity: 1 !important; transform: none !important; pointer-events: auto !important; gap: 2px !important; }
  .section-card .btn-icon {
    width: 44px !important; height: 44px !important; border-radius: 11px !important;
    font-size: 17px !important; background: transparent !important; color: var(--le-muted, #7a7570) !important;
  }
  .section-card .btn-icon:hover        { background: transparent !important; transform: none !important; }
  .section-card .btn-icon:active       { background: rgba(13,13,13,.07) !important; }
  .section-card .btn-icon.delete       { color: rgba(229,62,62,.5) !important; }
  .section-card .btn-icon.delete:active{ background: rgba(229,62,62,.1) !important; color: var(--le-error, #e53e3e) !important; }
  /* ▼ ALTERADO: font-size 22px (era 26px) */
  .section-card .section-icon  { font-size: 22px !important; }
  .section-card .section-type  { font-size: 9px !important; letter-spacing: .1em !important; color: var(--le-accent, #8098bd) !important; margin-bottom: 3px !important; }
  /* ▼ ALTERADO: font-size 14px (era 15px) */
  .section-card .section-title { font-size: 14px !important; font-weight: 600 !important; }
  .section-drag-handle         { font-size: 22px !important; padding: 10px !important; cursor: grab !important; }

  /* ── Swipe row para sections ── */
  /* ▼ ALTERADO: margin-bottom 0 (era 12px) */
  .le-sc-row {
    position: relative; overflow: hidden;
    border-radius: 14px !important; margin-bottom: 0;
  }
  #lePillsScrollHost .le-sc-row > .section-card,
  .le-pane-pills .le-sc-row > .section-card,
  .le-sc-row > .section-card {
    position: relative !important; z-index: 1 !important;
    will-change: transform;
    background: linear-gradient(155deg,
      rgba(255,255,255,.88) 0%,
      rgba(186,230,253,.75) 45%,
      rgba(249,168,212,.55) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.12) !important;
    backdrop-filter: blur(20px) saturate(1.8) brightness(1.12) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 8px rgba(14,165,233,.08) !important;
    transition: transform .26s cubic-bezier(.22,.68,0,1.2) !important;
    border-radius: 0 !important; margin-bottom: 0 !important;
  }
  #lePillsScrollHost .le-sc-row .section-title,
  .le-sc-row .section-title { color: #0c4a6e !important; text-shadow: 0 1px 3px rgba(255,255,255,.65) !important; }
  #lePillsScrollHost .le-sc-row .section-type,
  .le-sc-row .section-type  { color: rgba(7,89,133,.72) !important; }
}

/* ══════════════════════════════════════════════════════════
   BOTÃO "＋ Nova Pílula"
   ══════════════════════════════════════════════════════════ */
.le-add-pill-bar {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 400; background: none; border: none; padding: 0; pointer-events: none;
}
.le-add-pill-btn {
  pointer-events: auto; height: 52px; border-radius: 26px; border: none;
  background: var(--le-ink, #0d0d0d); color: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; white-space: nowrap; overflow: hidden;
  font-family: var(--le-f-body); font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 22px rgba(13,13,13,.28);
  transition: width .32s var(--le-ease, cubic-bezier(.22,.68,0,1.2)),
              padding .32s var(--le-ease, cubic-bezier(.22,.68,0,1.2)),
              border-radius .32s var(--le-ease, cubic-bezier(.22,.68,0,1.2)),
              transform .15s ease, box-shadow .15s ease;
}
.le-add-pill-btn:active { transform: scale(.93); box-shadow: 0 2px 12px rgba(13,13,13,.18); }
.le-add-pill-btn.le-pill-collapsed { width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center; }
.le-add-pill-btn.le-pill-collapsed .le-add-pill-label { display: none; }
.le-add-pill-btn.le-pill-collapsed .le-add-pill-ico { display: flex; }
.le-add-pill-btn--locked { background: rgba(13,13,13,.2) !important; box-shadow: none !important; cursor: not-allowed !important; }
.le-add-pill-ico { flex-shrink: 0; }
.le-add-pill-label { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   FAB
   ══════════════════════════════════════════════════════════ */
#leFab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 400; display: none; }
.le-fab-main {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--le-ink); color: #fff; border: none; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(13,13,13,.25); cursor: pointer; position: relative; z-index: 2;
  -webkit-tap-highlight-color: transparent; transition: transform .2s var(--le-ease), background .2s;
}
.le-fab-main.le-fab-open { transform: rotate(45deg); background: var(--le-error); }
.le-fab-main:active             { transform: scale(.91); }
.le-fab-main.le-fab-open:active { transform: rotate(45deg) scale(.91); }
.le-fab-items {
  position: absolute; bottom: 66px; right: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .2s, transform .2s var(--le-ease);
}
.le-fab-items.le-fab-items-open { pointer-events: auto; opacity: 1; transform: translateY(0); }
.le-fab-item { display: flex; align-items: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.le-fab-label {
  background: rgba(13,13,13,.85); color: #fff;
  font-family: var(--le-f-body); font-size: 13px; font-weight: 700;
  padding: 7px 13px; border-radius: 10px; white-space: nowrap;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); letter-spacing: -.01em;
}
.le-fab-item-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(13,13,13,.2); cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; transition: transform .18s var(--le-ease);
}
.le-fab-item-btn:active { transform: scale(.88); }
.le-fib-lesson   { background: var(--le-white); color: var(--le-ink); }
.le-fib-activity { background: var(--le-primary); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.4); }
#leFabBackdrop { display: none; position: fixed; inset: 0; z-index: 399; }
#leFabBackdrop.le-bd-visible { display: block; }

/* ══════════════════════════════════════════════════════════
   BOTTOM SHEET
   ══════════════════════════════════════════════════════════ */
.le-sheet-bd {
  position: fixed; inset: 0; z-index: 9300;
  background: var(--wz-overlay-bg, rgba(15,23,42,.48)); display: flex; align-items: flex-end;
  opacity: 0; transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.le-sheet-bd.le-sheet-show { opacity: 1; }
.le-sheet {
  width: 100%; max-height: 84dvh; background: #fff;
  border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); transition: transform .3s var(--le-ease, cubic-bezier(.22,.68,0,1.2));
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 40px rgba(15,23,42,.15);
  border: 1px solid var(--le-rule, #e2e8f0); border-bottom: none;
}
.le-sheet-bd.le-sheet-show .le-sheet { transform: translateY(0); }
.le-sheet-handle { width: 40px; height: 4px; background: rgba(15,23,42,.14); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; }
.le-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--le-rule, #e2e8f0);
  background: #f8fafc; flex-shrink: 0; gap: 12px;
}
.le-sh-eyebrow { font-family: var(--le-f-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--le-muted, #64748b); margin-bottom: 3px; }
.le-sh-title { font-family: var(--le-f-dis); font-size: 18px; font-style: italic; font-weight: 400; color: var(--le-ink, #0f172a); letter-spacing: -.02em; margin: 0; }
.le-sh-x {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--le-rule, #e2e8f0);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--le-muted, #64748b); cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.le-sh-x:active, .le-sh-x:hover { background: #EEF2FF; color: #4F46E5; border-color: #c7d2fe; }
.le-sheet-body { flex: 1; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 16px; }
.le-sheet-body::-webkit-scrollbar { display: none; }
.le-sh-field  { display: flex; flex-direction: column; gap: 7px; }
.le-sh-label  { font-family: var(--le-f-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--le-muted, #64748b); }
.le-sh-inp, .le-sh-ta {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--le-rule, #e2e8f0); border-radius: 10px;
  font-family: var(--le-f-body); font-size: 16px; color: var(--le-ink, #0f172a);
  background: #fff; outline: none; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.le-sh-inp:focus, .le-sh-ta:focus {
  border-color: var(--le-primary, #4F46E5);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.le-sh-ta { resize: none; min-height: 96px; line-height: 1.6; }
.le-sheet-foot {
  display: flex; gap: 10px; padding: 14px 20px 18px;
  border-top: 1px solid var(--le-rule, #e2e8f0); background: #f8fafc; flex-shrink: 0;
}
.le-sh-cancel {
  flex: 1; height: 48px; background: #fff;
  border: 1.5px solid var(--le-rule, #e2e8f0); color: var(--le-ink-2, #334155);
  font-family: var(--le-f-body); font-size: 14px; font-weight: 600;
  cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent;
}
.le-sh-cancel:active { border-color: #c7d2fe; color: #4F46E5; background: #EEF2FF; }
.le-sh-save {
  flex: 2; height: 48px;
  background: linear-gradient(135deg, #6366f1 0%, #4F46E5 100%); color: #fff;
  border: none; border-radius: 10px;
  font-family: var(--le-f-body); font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(79,70,229,.28); letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent; transition: filter .15s, box-shadow .15s, transform .12s;
}
.le-sh-save:active   { transform: scale(.97); filter: brightness(1.05); }
.le-sh-save:disabled { opacity: .55; box-shadow: none; pointer-events: none; }

@keyframes le-spin { to { transform: rotate(360deg); } }
.le-sh-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: le-spin .65s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   v9 — MELHORIAS UI: barra de ações, switcher, dropdown, pílulas
   ══════════════════════════════════════════════════════════ */

/* ── Sub-bar: nova linha de ações proeminente ──────────────── */

/* Container agora distribui espaço igualmente */
.le-bar-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 4px;
  justify-content: space-between;
}

/* Expande o preview para ocupar espaço sobrante à esquerda */
.le-bar-actions-row .le-header-preview-btn {
  flex: 0 0 auto;
}

/* Badge de rascunho: cápsule discreta com dot animado */
.le-bar-draft-badge {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
  border: 1px solid #fbbf24;
  border-radius: 20px;
  min-width: 0;
}

/* Dot piscante de rascunho */
.le-draft-dot-anim {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  animation: le-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes le-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: .45; transform: scale(.7); }
}

.le-draft-lbl {
  font-family: var(--le-f-mono, monospace);
  font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #92400e;
  white-space: nowrap; flex-shrink: 0;
}

/* Botão descartar: mais nítíd */
.le-bar-draft-badge .le-discard-btn {
  padding: 3px 9px;
  background: #dc2626; color: #fff;
  border: none; border-radius: 8px;
  font-family: var(--le-f-body, system-ui);
  font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s, transform .12s;
}
.le-bar-draft-badge .le-discard-btn:active {
  background: #b91c1c; transform: scale(.92);
}

/* Botão publicar: mais proeminente quando ativo */
.le-bar-actions-row .le-btn-publish:not(:disabled) {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  box-shadow: 0 3px 12px rgba(22,163,74,.35) !important;
  border: 1.5px solid rgba(22,163,74,.2) !important;
}
.le-bar-actions-row .le-btn-publish:not(:disabled):active {
  transform: scale(.93);
}

/* ── Switcher: nome com fonte Display (DM Serif) + chevron SVG ─── */

/* Título da lesson no switcher: fonte simples, sem serif */
.le-sw-name-dis {
  font-family: var(--le-f-body, 'DM Sans', system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--le-ink) !important;
}

/* Chevron SVG: transição suave ao abrir/fechar dropdown */
.le-sw-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--le-muted-2, #a8a29e);
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .18s;
}
.le-sw-chevron svg {
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: block;
}
.le-sw-chevron.le-chev-open svg { transform: rotate(180deg); }
.le-sw-chevron.le-chev-open     { color: var(--le-ink, #0d0d0d); }

/* Botão de editar: simples, sem fundo colorido */
.le-sw-edit-btn {
  width: 44px !important;
  border: none;
  border-left: 1px solid var(--le-rule, rgba(13,13,13,.07));
  background: none !important;
  cursor: pointer;
  color: var(--le-muted, #7a7570);
  -webkit-tap-highlight-color: transparent;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .14s, color .14s;
}
.le-sw-edit-btn:active {
  background: var(--le-surface, #f7f7f5) !important;
  color: var(--le-ink, #0d0d0d);
}
.le-sw-edit-inner {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}

/* ── Label de grupo das pílulas ──────────────────────────── */

/* Container do label: envolve o scrollBody das sections */
.le-pills-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 4px;
  font-family: var(--le-f-mono, monospace);
  font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--le-muted-2, #a8a29e);
  flex-shrink: 0;
  pointer-events: none;
}
.le-pills-group-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.le-pills-group-header .le-group-count {
  background: rgba(99,102,241,.1);
  color: var(--le-primary, #6366f1);
  border: 1px solid rgba(99,102,241,.18);
  padding: 3px 9px; border-radius: 9px;
  font-size: 10px; letter-spacing: 0;
  font-weight: 700;
  pointer-events: none;
}

/* ── Dropdown combobox: mais legibilidade ────────────────── */

/* Header do grupo com contador de itens */
.le-drop-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 16px;
  padding: 0 5px;
  background: rgba(13,13,13,.1);
  color: var(--le-muted, #7a7570);
  border-radius: 8px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0;
  margin-left: 4px;
  vertical-align: middle;
}

/* Badge de pílulas: cápsula colorida */
.le-drop-pills-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px 8px;
  border-radius: 9px;
  background: rgba(128,152,189,.12);
  border: 1px solid rgba(128,152,189,.2);
  font-family: var(--le-f-mono, monospace);
  font-size: 10px; font-weight: 700;
  color: var(--le-accent, #8098bd);
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
}
.le-drop-pills-badge-act {
  background: rgba(99,102,241,.1) !important;
  border-color: rgba(99,102,241,.18) !important;
  color: var(--le-primary, #6366f1) !important;
}
.le-drop-active .le-drop-pills-badge {
  background: rgba(13,13,13,.08);
  border-color: rgba(13,13,13,.12);
  color: var(--le-ink, #0d0d0d);
}
.le-drop-item-activity.le-drop-active .le-drop-pills-badge {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: var(--le-primary, #6366f1) !important;
}
.le-drop-pills-lbl {
  font-size: 8px;
  opacity: .7;
}

/* Ícone de check SVG */
.le-drop-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--le-ink, #0d0d0d);
  color: #fff;
  flex-shrink: 0;
}
.le-drop-item-activity.le-drop-active .le-drop-check {
  background: var(--le-primary, #6366f1);
}

/* Altura do item para toque confortável */
.le-drop-item {
  min-height: 44px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgba(13,13,13,.04);
  gap: 10px !important;
}
.le-drop-item:last-child { border-bottom: none; }

/* Título: mesma fonte dos demais itens, apenas bold para o ativo */
.le-drop-active .le-drop-title {
  font-family: var(--le-f-body, 'DM Sans', system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* Número do item: maior e mais legível */
.le-drop-num {
  width: 28px !important; height: 28px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

/* Grupo com separador visual */
.le-drop-group {
  padding: 12px 16px 6px !important;
  font-size: 10px !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  border-top: 1px solid rgba(13,13,13,.06);
}
.le-drop-group:first-child { border-top: none; }
.le-drop-group-activity { margin-top: 2px; }

/* ── Switcher fixo em pills: fica entre o navBar e o leSubBar ── */
/* Quando pills tab está ativa, o switcher sai do fluxo normal e
   fica fixed logo abaixo do mobileNavBar. O leSubBar desce 56px.
   A classe le-pills-active é adicionada em <html> por sub-bar.js. */
/* Pills: switcher fica ABAIXO do subBar.
   Ordem vertical: navBar → subBar (48px) → switcher (56px) → conteúdo.
   O dropdown abre para baixo a partir do switcher, nunca sobrepõe os botões do subBar.
   z-index do switcher (190) abaixo do subBar (193) — sem conflito porque não se sobrepõem. */
.le-pills-active #leSwitcherWrap {
  position: fixed !important;
  left: 0; right: 0;
  top: var(--le-switcher-top, 100px); /* navBar(52) + subBar(48) */
  z-index: 190;
}

/* Offset exato para o switcher fixo (56px) + 6px de respiro visual. */
.le-pills-active #lePillsScrollHost {
  padding-top: 18px;
}

/* Pane lessons: o offset do sub-bar já é aplicado via
   .editor-layout height + padding-top no .editor-center.
   Não adicionar margin-top extra aqui para não criar o
   espaço em branco que aparecia ao alternar de pane. */