/**
 * Course Wizard — Mobile CSS  v4.0
 * Breakpoint: ≤1024px (alinhado ao editor tablet)
 * Identidade = desktop: --wz-* indigo, header claro, DM Serif
 */

/* ══════════════════════════════════════════
   TOKENS (= desktop course-wizard.css / wz-tokens)
   ══════════════════════════════════════════ */
#cwmWrapper {
  --cw-ink:       var(--wz-ink, #0f172a);
  --cw-ink-soft:  var(--wz-ink-soft, #334155);
  --cw-muted:     var(--wz-muted, #94a3b8);
  --cw-rule:      var(--wz-border, #e2e8f0);
  --cw-error:     var(--wz-danger, #dc2626);
  --cw-green:     var(--wz-success, #16a34a);
  --cw-blue:      var(--wz-accent, #6366f1);
  --cw-blue-deep: var(--wz-btn-primary-hov, #4f46e5);
  --cw-soft:      #EEF2FF;
  --cw-surface:   #f8fafc;
  --cw-f-dis:     var(--wz-f-display, 'DM Serif Display', Georgia, serif);
  --cw-f-mono:    var(--wz-f-mono, 'DM Mono', monospace);
  --cw-f-body:    var(--wz-f-body, 'DM Sans', system-ui, sans-serif);
  --cw-ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --cw-ease-out:      cubic-bezier(.16,1,.3,1);
  --cw-ease-standard: cubic-bezier(.4,0,.2,1);
  --cw-dur-nano:   80ms;
  --cw-dur-micro:  140ms;
  --cw-dur-normal: 260ms;
  --cw-dur-layout: 320ms;
  --cw-radius-sm:  10px;
}

/* ══════════════════════════════════════════
   MODAL FULL-SCREEN (tablet + phone)
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  #createCourseModal .modal-dialog {
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; max-height: 100% !important;
    margin: 0 !important;
  }
  #createCourseModal .modal-content {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
    margin: 0 !important;
    border: none !important;
    isolation: isolate;
    transform: translateZ(0);
  }

  /* Header = desktop (slate soft + serif) — sem gradiente roxo */
  #createCourseModal .modal-header {
    background: #f8fafc !important;
    padding: 12px 16px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }
  #createCourseModalTitle {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #0f172a !important;
    letter-spacing: -.02em !important;
  }
  #closeCourseModal {
    color: #64748b !important;
    min-width: 44px; min-height: 44px;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    touch-action: manipulation;
  }
  #closeCourseModal:hover {
    color: #4F46E5 !important;
    background: #EEF2FF !important;
    border-color: #c7d2fe !important;
  }

  #courseFormContent.course-form-visible {
    flex: 1 !important; display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; overflow: hidden !important;
  }
  #courseWizardWrapper { display: none !important; }
}

/* ══════════════════════════════════════════
   TEMPLATE SELECTOR — mobile
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  #courseTemplateSelector {
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important; /* evita bounce do body */
  }
  #courseTemplateSelector .tcard-grid,
  #courseTemplateSelector [class*="template-grid"],
  #courseTemplateSelector [class*="card-grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  #courseTemplateSelector .tcard,
  #courseTemplateSelector [class*="template-card"] {
    position: relative !important;
    border-radius: 12px !important;
    padding: 18px 12px !important;
    min-height: 110px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer;
    overflow: hidden !important;
    border: 1.5px solid #e2e8f0 !important;
    transition:
      transform  var(--cw-dur-nano,80ms)  var(--cw-ease-spring),
      box-shadow var(--cw-dur-micro,140ms) var(--cw-ease-standard),
      border-color var(--cw-dur-micro,140ms) var(--cw-ease-standard) !important;
  }
  /* ① Press state CSS — feedback imediato sem JS */
  #courseTemplateSelector .tcard:active,
  #courseTemplateSelector [class*="template-card"]:active {
    transform: scale(.96) translateZ(0) !important;
  }
  /* Arrow hint discreta › › no canto inferior-direito dos template cards */
  #courseTemplateSelector .tcard::after,
  #courseTemplateSelector [class*="template-card"]::after {
    content: '';
    position: absolute;
    bottom: 10px; right: 10px;
    width: 11px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='20' viewBox='0 0 11 20' fill='none'%3E%3Cpath d='M2 2 L9 6 L2 10' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 11 L9 15 L2 19' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    opacity: .15;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════
   WRAPPER PRINCIPAL
   ══════════════════════════════════════════ */
#cwmWrapper {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; height: 100%;
  background: #fff; overflow: hidden;
  position: relative;
  /* ⑧ Isola stacking context */
  isolation: isolate;
}

/* ══════════════════════════════════════════
   TOP BAR — pills + título do step
   ══════════════════════════════════════════ */
.cwm-top-bar {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--cw-rule);
  padding: 14px 18px 0;
}

/* Pills de navegação */
.cwm-pills-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
}
.cwm-pill {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(13,13,13,.12);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cw-f-mono); font-size: 11px; font-weight: 700;
  color: var(--cw-muted);
  cursor: pointer; flex-shrink: 0;
  touch-action: manipulation; /* ④ */
  -webkit-tap-highlight-color: transparent;
  /* ① Props específicas — NÃO usar transition:all */
  transition:
    background  var(--cw-dur-micro) var(--cw-ease-standard),
    border-color var(--cw-dur-micro) var(--cw-ease-standard),
    color        var(--cw-dur-micro) var(--cw-ease-standard),
    transform    var(--cw-dur-micro) var(--cw-ease-spring),
    box-shadow   var(--cw-dur-micro) var(--cw-ease-standard);
}
.cwm-pill:active { transform: scale(.88) translateZ(0); }
.cwm-pill.done {
  background: var(--cw-green); border-color: var(--cw-green);
  color: #fff; font-size: 13px;
}
.cwm-pill.active {
  background: var(--cw-blue); border-color: var(--cw-blue);
  color: #fff; transform: scale(1.15) translateZ(0);
  box-shadow: 0 3px 12px rgba(99,102,241,.3);
}
.cwm-pill-line {
  flex: 1; height: 2px;
  background: rgba(13,13,13,.08);
  margin: 0 4px; flex-shrink: 0;
  border-radius: 1px; overflow: hidden;
  position: relative;
}
.cwm-pill-line::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--cw-green); width: 0%;
  /* ① Só width */
  transition: width var(--cw-dur-layout) var(--cw-ease-out);
}
.cwm-pill-line.done::after { width: 100%; }

/* Step header */
.cwm-step-header { padding-bottom: 14px; }
.cwm-step-eyebrow {
  font-family: var(--cw-f-mono); font-size: 9px;
  font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cw-muted);
  display: block; margin-bottom: 3px;
}
.cwm-step-title {
  font-family: var(--cw-f-dis); font-size: 20px;
  font-weight: 700; letter-spacing: -.025em;
  color: var(--cw-ink); line-height: 1.1; margin: 0;
}
.cwm-step-title em { font-style: italic; font-weight: 400; color: var(--cw-muted); }

/* ══════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════ */
.cwm-progress-track {
  height: 2px; background: rgba(13,13,13,.06); flex-shrink: 0;
}
.cwm-progress-fill {
  height: 100%; background: var(--cw-blue); width: 0%;
  /* ① Só width — will-change gerenciado por JS */
  transition: width var(--cw-dur-layout) var(--cw-ease-out);
}

/* ══════════════════════════════════════════
   CONTEÚDO SCROLLÁVEL
   ══════════════════════════════════════════ */
.cwm-content {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 20px 18px 28px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain; /* evita scroll chain */
  contain: layout style; /* otimiza reflows em scroll */
  position: relative;
}
.cwm-content::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════
   PANELS — animação direcional premium
   ══════════════════════════════════════════
   ② ANTES: display:none → display:block gerava forced-layout
      antes da animação → "pisca" no primeiro frame
   AGORA: visibility:hidden → visible + animation
      O browser mantém layout mesmo hidden, animação começa limpa.
*/
.cwm-panel {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  inset: 0;
  padding: 20px 18px 28px;
  overflow-y: auto;
  pointer-events: none;
  transform: translateX(32px);
  /* ③ will-change: preparado para animação (removido por JS após fim) */
  will-change: transform, opacity;
}

.cwm-panel.active {
  visibility: visible;
  opacity: 1;
  position: relative;
  pointer-events: auto;
  transform: translateX(0);
  animation: cwm-panel-in var(--cw-dur-layout) var(--cw-ease-out) both;
}

.cwm-panel.anim-back.active {
  animation: cwm-panel-in-back var(--cw-dur-layout) var(--cw-ease-out) both;
}

/* ⑨ Painel saindo — exit animation simultânea à entrada */
.cwm-panel.exiting {
  visibility: visible;
  pointer-events: none;
  position: absolute; inset: 0;
  animation: cwm-panel-out var(--cw-dur-micro) var(--cw-ease-standard) both;
}
.cwm-panel.exiting-back {
  visibility: visible;
  pointer-events: none;
  position: absolute; inset: 0;
  animation: cwm-panel-out-back var(--cw-dur-micro) var(--cw-ease-standard) both;
}

@keyframes cwm-panel-in {
  from { opacity: 0; transform: translateX(28px);  }
  to   { opacity: 1; transform: translateX(0);      }
}
@keyframes cwm-panel-in-back {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);      }
}
@keyframes cwm-panel-out {
  to { opacity: 0; transform: translateX(-20px); }
}
@keyframes cwm-panel-out-back {
  to { opacity: 0; transform: translateX(20px);  }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .cwm-panel.active,
  .cwm-panel.anim-back.active {
    animation: cwm-panel-fade var(--cw-dur-micro) linear both;
  }
  @keyframes cwm-panel-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ══════════════════════════════════════════
   STEP CARD — agrupa campos
   ══════════════════════════════════════════ */
.cwm-step-card {
  background: var(--cw-surface);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.cwm-step-card:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════
   FORM FIELDS
   ══════════════════════════════════════════ */
#cwmWrapper .form-group { margin-bottom: 0; }

#cwmWrapper .form-label {
  font-family: var(--cw-f-mono) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--cw-muted) !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

#cwmWrapper .form-control {
  border-radius: 8px !important;
  border: 2px solid rgba(13,13,13,.1) !important;
  font-family: var(--cw-f-body) !important;
  font-size: 16px !important;
  color: var(--cw-ink) !important;
  background: #fff !important;
  padding: 14px 15px !important;
  width: 100% !important; box-sizing: border-box !important;
  /* ① Props específicas */
  transition:
    border-color var(--cw-dur-micro) var(--cw-ease-standard),
    box-shadow   var(--cw-dur-micro) var(--cw-ease-standard) !important;
  -webkit-appearance: none !important; appearance: none !important;
  line-height: 1.5 !important;
}
#cwmWrapper .form-control:focus {
  border-color: var(--cw-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
#cwmWrapper .form-control::placeholder {
  color: rgba(13,13,13,.25) !important; font-size: 14px !important;
}
#cwmWrapper .form-control.error {
  border-color: var(--cw-error) !important;
  box-shadow: 0 0 0 3px rgba(229,62,62,.12) !important;
}
#cwmWrapper textarea.form-control {
  resize: none !important;
  min-height: 130px !important; line-height: 1.65 !important;
}

/* Char counter */
.cwm-char-counter {
  font-family: var(--cw-f-mono);
  font-size: 9px; color: var(--cw-muted); letter-spacing: .06em;
  transition: color var(--cw-dur-micro) var(--cw-ease-standard);
}
.cwm-char-counter.warn { color: var(--cw-error); }

/* ══════════════════════════════════════════
   PRICE CHIPS
   ══════════════════════════════════════════ */
.cwm-price-chips {
  display: flex; gap: 8px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.cwm-price-chip {
  padding: 8px 16px;
  min-height: 44px; /* ⑦ touch target */
  display: inline-flex; align-items: center;
  border-radius: 999px;
  border: 1.5px solid rgba(13,13,13,.15);
  background: #fff;
  font-family: var(--cw-f-body); font-size: 13px; font-weight: 600;
  color: var(--cw-muted); cursor: pointer;
  touch-action: manipulation; /* ④ */
  -webkit-tap-highlight-color: transparent;
  /* ① Props específicas + ⑥ spring na seleção */
  transition:
    background   var(--cw-dur-micro) var(--cw-ease-standard),
    border-color var(--cw-dur-micro) var(--cw-ease-standard),
    color        var(--cw-dur-micro) var(--cw-ease-standard),
    transform    var(--cw-dur-micro) var(--cw-ease-spring),
    box-shadow   var(--cw-dur-micro) var(--cw-ease-standard);
}
.cwm-price-chip:active { transform: scale(.93) translateZ(0); }
.cwm-price-chip.active {
  background: linear-gradient(135deg, var(--cw-blue) 0%, var(--cw-blue-deep) 100%);
  border-color: transparent;
  color: #fff;
  transform: scale(1.04) translateZ(0);
  box-shadow: 0 4px 12px rgba(79,70,229,.28);
}

/* ══════════════════════════════════════════
   CATEGORIAS / INSTRUTORES
   ══════════════════════════════════════════ */
#cwmWrapper .category-tags-input,
#cwmWrapper .instructor-select-input { position: relative; }

#cwmWrapper .selected-tags {
  border-radius: 8px !important; min-height: 52px !important;
  padding: 10px !important; background: var(--cw-surface) !important;
}
#cwmWrapper .tag {
  font-size: 13px !important; padding: 8px 12px !important;
  min-height: 36px !important; border-radius: 8px !important;
}
#cwmWrapper .tag-remove {
  width: 28px !important; height: 28px !important; font-size: 16px !important;
}
#cwmWrapper .search-input {
  font-size: 16px !important; border-radius: 8px !important;
  padding: 14px 44px 14px 16px !important; min-height: 50px !important;
  border: 2px solid rgba(13,13,13,.1) !important;
}
#cwmWrapper .search-input:focus {
  border-color: var(--cw-blue) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
  outline: none !important;
}
#cwmWrapper .categories-dropdown {
  position: static !important; margin-top: 6px !important;
  border-radius: 8px !important; border: 1.5px solid rgba(13,13,13,.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  max-height: 200px !important; overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  animation: cwm-panel-in .16s ease both !important;
}
#cwmWrapper .category-item {
  padding: 14px 16px !important; min-height: 52px !important; border-radius: 0 !important;
  touch-action: manipulation; /* ④ */
}
#cwmWrapper .category-item:active { background: var(--cw-surface) !important; }

/* ══════════════════════════════════════════
   DYNAMIC LIST (Objetivos)
   ══════════════════════════════════════════ */
#cwmWrapper .list-item {
  display: flex; align-items: center; gap: 0;
  background: #fff;
  border: 1.5px solid var(--cw-rule, #e2e8f0);
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  border-radius: 12px !important;
  padding: 0 !important; margin-bottom: 6px !important;
  min-height: 54px !important;
  overflow: hidden;
}
#cwmWrapper .item-input {
  flex: 1; min-width: 0;
  font-size: 15px !important; padding: 14px 14px !important;
  min-height: 54px !important; border-radius: 0 !important;
  border: none !important; background: transparent !important;
  font-family: var(--cw-f-body); font-weight: 500;
  color: var(--cw-ink, #0f172a);
}
#cwmWrapper .item-input::placeholder { color: var(--cw-muted, #94a3b8) !important; }
#cwmWrapper .item-input:focus    { box-shadow: none !important; outline: none !important; }
#cwmWrapper .remove-item-btn     { width: 44px !important; height: 54px !important; flex-shrink: 0 !important; border-radius: 0 !important; font-size: 14px !important; touch-action: manipulation; background: transparent !important; border: none !important; color: rgba(220,38,38,.45) !important; }
#cwmWrapper .remove-item-btn:active { background: #fef2f2 !important; color: #dc2626 !important; }
#cwmWrapper .drag-handle         { display: none !important; }
#cwmWrapper .add-item-btn        { font-size: 14px !important; padding: 14px !important; min-height: 52px !important; border-radius: 12px !important; border: 1.5px dashed #c7d2fe !important; touch-action: manipulation; background: transparent !important; color: var(--cw-blue, #6366f1) !important; font-family: var(--cw-f-body) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════
   IMAGE UPLOAD
   ══════════════════════════════════════════ */
#cwmWrapper .mode-switcher        { width: 100% !important; margin-bottom: 14px !important; }
#cwmWrapper .mode-btn             { font-size: 14px !important; padding: 10px 16px !important; min-height: 44px !important; flex: 1 !important; touch-action: manipulation; }
#cwmWrapper .url-input,
#cwmWrapper input[type="url"]     { font-size: 16px !important; padding: 14px 15px !important; min-height: 50px !important; border-radius: 8px !important; border: 2px solid rgba(13,13,13,.1) !important; box-sizing: border-box !important; width: 100% !important; }
#cwmWrapper .url-input:focus,
#cwmWrapper input[type="url"]:focus { border-color: var(--cw-blue) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important; outline: none !important; }
#cwmWrapper .upload-btn           { padding: 24px 20px !important; min-height: 100px !important; border-radius: 10px !important; border: 2px dashed rgba(13,13,13,.15) !important; touch-action: manipulation; }
#cwmWrapper .preview-container    { margin-top: 14px !important; border-radius: 10px !important; overflow: hidden !important; }
#cwmWrapper #newCourseImageContainer img { border-radius: 8px !important; }

/* ══════════════════════════════════════════
   ERROS
   ══════════════════════════════════════════ */
#cwmWrapper .cw-field-error {
  font-family: var(--cw-f-mono); font-size: 10px;
  color: var(--cw-error); letter-spacing: .04em;
  margin-top: 8px; display: none;
  padding: 6px 10px; background: rgba(229,62,62,.08);
  border-radius: 6px; border-left: 3px solid var(--cw-error);
  animation: cwm-err-in var(--cw-dur-micro) var(--cw-ease-spring) both;
}
#cwmWrapper .cw-field-error.visible { display: block; }
@keyframes cwm-err-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   FOOTER STICKY
   ══════════════════════════════════════════ */
.cwm-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cw-rule, #e2e8f0);
  background: var(--cw-surface, #f8fafc);
  gap: 10px;
}
.cwm-footer-left  { flex: 1; display: flex; align-items: center; }
.cwm-footer-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ⑦ Todos os botões do footer: min 44px */
.cwm-btn-cancel {
  background: none; border: none;
  font-family: var(--cw-f-body); font-size: 13px; color: var(--cw-muted);
  cursor: pointer; padding: 10px 4px; min-height: 44px;
  letter-spacing: -.01em;
  touch-action: manipulation; /* ④ */
  -webkit-tap-highlight-color: transparent;
  transition: color var(--cw-dur-micro) var(--cw-ease-standard);
}
.cwm-btn-cancel:active { color: var(--cw-ink); transform: scale(.97); }

.cwm-btn-back {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cw-surface); border: none;
  border-radius: 10px; color: var(--cw-ink);
  font-size: 18px; cursor: pointer; flex-shrink: 0;
  touch-action: manipulation; /* ④ */
  -webkit-tap-highlight-color: transparent;
  /* ① Props específicas */
  transition:
    background var(--cw-dur-micro) var(--cw-ease-standard),
    transform  var(--cw-dur-nano)  var(--cw-ease-spring),
    opacity    var(--cw-dur-micro) var(--cw-ease-standard);
}
.cwm-btn-back:active   { transform: scale(.9) translateZ(0); background: rgba(13,13,13,.1); }
.cwm-btn-back:disabled { opacity: .25; pointer-events: none; }

.cwm-btn-next {
  height: 48px; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--cw-blue) 0%, var(--cw-blue-deep) 100%);
  color: #fff; border: none; border-radius: var(--cw-radius-sm, 10px);
  font-family: var(--cw-f-body); font-size: 14px; font-weight: 700;
  cursor: pointer; letter-spacing: -.02em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform  var(--cw-dur-nano)  var(--cw-ease-spring),
    box-shadow var(--cw-dur-micro) var(--cw-ease-standard),
    filter var(--cw-dur-micro) var(--cw-ease-standard);
  box-shadow: 0 4px 14px rgba(79,70,229,.28);
}
.cwm-btn-next:active {
  transform: scale(.96) translateZ(0);
  box-shadow: 0 2px 8px rgba(79,70,229,.22);
}

.cwm-btn-submit {
  height: 48px; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--cw-blue) 0%, var(--cw-blue-deep) 100%);
  color: #fff; border: none; border-radius: var(--cw-radius-sm, 10px);
  font-family: var(--cw-f-body); font-size: 14px; font-weight: 800;
  cursor: pointer; letter-spacing: -.02em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform  var(--cw-dur-nano)  var(--cw-ease-spring),
    box-shadow var(--cw-dur-micro) var(--cw-ease-standard);
  box-shadow: 0 4px 14px rgba(79,70,229,.28);
}
.cwm-btn-submit:active  { transform: scale(.96) translateZ(0); box-shadow: 0 2px 8px rgba(79,70,229,.22); }
.cwm-btn-submit:disabled { opacity: .5; pointer-events: none; box-shadow: none; }

/* Estado loading */
.cwm-btn-submit.loading { pointer-events: none; opacity: .8; }
.cwm-btn-submit.loading::after {
  content: '';
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%;
  animation: _cwm_spin .65s linear infinite;
  margin-left: 6px; vertical-align: middle;
}

/* ══════════════════════════════════════════
   STEP 1 — emoji big tap area
   ══════════════════════════════════════════ */
#cwmWrapper #newCourseEmoji.form-control {
  cursor: pointer !important; background: var(--cw-surface) !important;
  text-align: center !important; font-size: 28px !important;
  padding: 18px !important; border: 2px dashed rgba(13,13,13,.12) !important;
  color: var(--cw-ink) !important;
  touch-action: manipulation !important; /* ④ */
}

/* ══════════════════════════════════════════
   SWIPE HINT
   ══════════════════════════════════════════ */
.cwm-swipe-hint {
  position: absolute; bottom: 70px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--cw-f-mono); font-size: 9px;
  color: rgba(13,13,13,.2); letter-spacing: .08em;
  text-transform: uppercase; pointer-events: none;
  animation: cwm-fade-hint 2s ease 1.5s both;
  white-space: nowrap;
}
@keyframes cwm-fade-hint {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Spin keyframe para botão submit */
@keyframes _cwm_spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════
   EDIT COURSE MODAL — mobile 100% fullscreen
   ══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Backdrop: tela cheia, sem alinhamento de bottom sheet */
  #editCourseModal.em-backdrop {
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #fff !important;
    backdrop-filter: none !important;
  }

  /* Box: ocupa 100% da viewport */
  #editCourseModal .em-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    animation: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Header: gradiente (desktop já injeta; reforço mobile) */
  #editCourseModal .em-head {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
    padding: 14px 16px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    border-bottom: none !important;
  }
  #editCourseModal .em-head-eyebrow {
    font-size: 9px !important;
    margin-bottom: 2px !important;
    color: rgba(255,255,255,.7) !important;
  }
  #editCourseModal .em-head h3 {
    font-size: 16px !important;
    color: rgba(255,255,255,.95) !important;
    font-family: var(--cw-f-body, system-ui) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
  }
  #editCourseModal .em-body {
    background: #f8fafc !important;
  }
  #editCourseModal .em-section {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  #editCourseModal .em-vis-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #editCourseModal .em-seg {
    width: 100% !important;
  }
  #editCourseModal .em-seg label {
    flex: 1 !important;
  }
  #editCourseModal .em-seg span {
    text-align: center !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Botão X: branco no gradiente */
  #editCourseModal .em-close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.7) !important;
    font-size: 24px !important;
  }
  #editCourseModal .em-close:hover { color: #fff !important; }

  /* Body: scroll interno */
  #editCourseModal .em-body {
    padding: 20px 16px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Seções */
  #editCourseModal .em-section {
    margin-bottom: 20px !important;
  }
  #editCourseModal .em-section-title {
    font-size: 9px !important;
    margin-bottom: 10px !important;
  }

  /* Linha de campos: empilha verticalmente */
  #editCourseModal .em-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Inputs: 16px previne zoom iOS */
  #editCourseModal .em-input,
  #editCourseModal .em-textarea {
    font-size: 16px !important;
    padding: 13px 14px !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
  }
  #editCourseModal .em-textarea { min-height: 80px !important; }
  #editCourseModal .em-label { font-size: 12px !important; }

  /* Componentes dinâmicos */
  #editCourseModal .em-component-host { min-height: 48px !important; }
  #editCourseModal .selected-tags     { border-radius: 8px !important; min-height: 52px !important; padding: 10px !important; }
  #editCourseModal .tag               { font-size: 13px !important; padding: 8px 12px !important; min-height: 36px !important; border-radius: 8px !important; }
  #editCourseModal .search-input      { font-size: 16px !important; padding: 13px 44px 13px 14px !important; min-height: 50px !important; border-radius: 8px !important; -webkit-appearance: none !important; }
  #editCourseModal .categories-dropdown { border-radius: 8px !important; max-height: 180px !important; }
  #editCourseModal .category-item     { padding: 13px 14px !important; min-height: 50px !important; }
  #editCourseModal .list-item         { border-radius: 10px !important; min-height: 52px !important; }
  #editCourseModal .item-input        { font-size: 15px !important; padding: 13px 14px !important; min-height: 52px !important; }
  #editCourseModal .add-item-btn      { font-size: 14px !important; padding: 13px !important; min-height: 50px !important; border-radius: 10px !important; }

  /* Footer sticky */
  #editCourseModal .em-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fafafa !important;
    border-top: 1px solid #ebebeb !important;
  }
  #editCourseModal .em-btn-cancel,
  #editCourseModal .em-btn-save {
    min-height: 48px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    -webkit-tap-highlight-color: transparent;
  }
  #editCourseModal .em-btn-save   { flex: 1 !important; }
  #editCourseModal .em-btn-cancel { padding: 0 16px !important; }
}


/* ══════════════════════════════════════════
   CLONE TITLE OVERLAY — mobile fullscreen
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
  #cloneTitleOverlay {
    /* Fullscreen sobre o modal já fullscreen */
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px
             calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #cloneTitleOverlay .cb {
    /* Back: toca fácil */
    min-height: 44px !important;
    font-size: 11px !important;
  }
  #cloneTitleOverlay .ch {
    font-size: 20px !important;
    margin-bottom: 24px !important;
    line-height: 1.25 !important;
  }
  #cloneTitleOverlay .ci {
    font-size: 16px !important;
    padding: 14px 14px !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    border: 1.5px solid #e0e0e0 !important;
  }
  #cloneTitleOverlay .ci:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
    outline: none !important;
  }
  /* Empurra o footer para o fim */
  #cloneTitleOverlay .cfoot {
    margin-top: auto !important;
    padding-top: 24px !important;
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  #cloneTitleOverlay .csub,
  #cloneTitleOverlay .ccancel {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent;
  }
  #cloneTitleOverlay .csub {
    min-width: unset !important;
    background: #111 !important;
  }
  #cloneTitleOverlay .ccancel {
    border-color: rgba(13,13,13,.15) !important;
    color: #666 !important;
  }
}


/* ══════════════════════════════════════════
   SUCCESS SCREEN — mobile melhorado
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Container: scroll vertical para telas muito pequenas */
  #cloneSuccessScreen {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Wrap: padding lateral e vertical com safe-area */
  #cloneSuccessScreen .ss-wrap {
    padding: calc(env(safe-area-inset-top, 0px) + 32px) 24px
             calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ícone check: menor */
  #cloneSuccessScreen .ss-circle {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 10px !important;
  }

  /* Título: fluido entre 22px e 28px */
  #cloneSuccessScreen .ss-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    margin-bottom: 4px !important;
  }

  /* Linha decorativa: menor */
  #cloneSuccessScreen .ss-line {
    margin: 8px 0 14px !important;
  }

  /* Sub: menos espaço */
  #cloneSuccessScreen .ss-sub {
    margin-bottom: 16px !important;
  }

  /* Tags: menores, com wrap */
  #cloneSuccessScreen .ss-tags {
    gap: 6px !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap !important;
  }
  #cloneSuccessScreen .ss-tag {
    font-size: 8px !important;
    padding: 4px 10px !important;
  }

  /* Stats: lógico e compacto */
  #cloneSuccessScreen .ss-stats {
    width: 100% !important;
    margin-bottom: 20px !important;
    border-radius: 10px !important;
  }
  #cloneSuccessScreen .ss-stat {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
  }
  #cloneSuccessScreen .ss-num {
    font-size: 20px !important;
  }
  #cloneSuccessScreen .ss-lbl {
    font-size: 7.5px !important;
    letter-spacing: .06em !important;
  }

  /* Barra de progresso */
  #cloneSuccessScreen .ss-bar-wrap {
    width: 100% !important;
  }
  #cloneSuccessScreen .ss-bar-label {
    font-size: 8px !important;
  }

  /* Regra vertical decorativa: oculta (não cabe) */
  #cloneSuccessScreen .ss-rule-v {
    display: none !important;
  }
}