/* ════════════════════════════════════════
   AGENT MARKETING — Dashboard, Studio, Calendar, Integrations
════════════════════════════════════════ */

#marketing-root { padding: 28px 36px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
/* Mode pleine largeur applique a TOUTES les pages marketing pour theme dark
   uniforme. Le padding interne reste sur chaque .mk-page sauf templates
   qui gere son propre .mk-tpl-dark plein bord. */
#marketing-root.mk-fullwidth { padding: 0; max-width: none; margin: 0; }
#marketing-root.mk-fullwidth .mk-page { padding: 28px 36px; }
/* Exception : la page templates gere son propre padding via .mk-tpl-dark */
#marketing-root.mk-fullwidth #mk-pg-templates { padding: 0; }
#marketing-root .mk-page { display: none; }
#marketing-root .mk-page.active { display: block; }
@media (max-width: 780px) {
  #marketing-root.mk-fullwidth .mk-page { padding: 18px 18px; }
}

/* ── Hero / KPIs ── */
.mk-hero { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.mk-hero-title { font-family: var(--fh); font-size: 1.7rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; margin: 0; }
.mk-hero-sub { font-size: .85rem; color: var(--gr); margin-top: 4px; }
.mk-hero-cta { display: flex; gap: 10px; }
#marketing-root .mk-btn-primary, #marketing-root button.mk-btn-primary { background: linear-gradient(135deg,#FF6200,#ff8f3e) !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 10px 18px !important; font-family: var(--fb); font-size: .82rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(255,98,0,.25); transition: transform .15s, box-shadow .15s; }
#marketing-root .mk-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,98,0,.35); }
#marketing-root .mk-btn-secondary, #marketing-root button.mk-btn-secondary { background: var(--sf) !important; color: var(--ink) !important; border: 1px solid var(--bd) !important; border-radius: 10px !important; padding: 10px 18px !important; font-family: var(--fb); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s; }
#marketing-root .mk-btn-secondary:hover { background: var(--sf2) !important; }
#marketing-root .mk-btn-ghost, #marketing-root button.mk-btn-ghost { background: transparent !important; color: var(--gr) !important; border: none !important; padding: 8px 14px !important; font-family: var(--fb); font-size: .8rem; font-weight: 600; cursor: pointer; border-radius: 8px !important; }
#marketing-root .mk-btn-ghost:hover { background: var(--sf2) !important; color: var(--ink) !important; }

.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.mk-kpi { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 16px 18px; }
.mk-kpi-label { font-size: .72rem; font-weight: 600; color: var(--gr); text-transform: uppercase; letter-spacing: .04em; }
.mk-kpi-val { font-family: var(--fh); font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-top: 6px; letter-spacing: -.02em; }
.mk-kpi-sub { font-size: .72rem; color: var(--gr); margin-top: 2px; }

/* ── Cards ── */
.mk-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.mk-card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mk-card-title { font-family: var(--fh); font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.mk-card-link { font-size: .78rem; color: #FF6200; font-weight: 600; cursor: pointer; text-decoration: none; }
.mk-card-link:hover { text-decoration: underline; }

/* ── Recent posts list ── */
.mk-post-list { display: flex; flex-direction: column; gap: 10px; }
.mk-post-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); transition: border-color .15s; }
.mk-post-row:hover { border-color: rgba(255,98,0,.4); }
.mk-post-thumb { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg,#FF6200,#ff8f3e); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; flex-shrink: 0; overflow: hidden; }
.mk-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-post-body { flex: 1; min-width: 0; }
.mk-post-text { font-size: .85rem; color: var(--ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-post-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: .72rem; color: var(--gr); }
.mk-post-net-icons { display: flex; gap: 4px; }
.mk-post-net-icons img { width: 14px; height: 14px; }
.mk-post-status { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.mk-post-status.scheduled { background: rgba(59,130,246,.12); color: #2563eb; }
.mk-post-status.published { background: rgba(34,197,94,.12); color: #16a34a; }
.mk-post-status.draft { background: rgba(148,163,184,.18); color: var(--gr); }
.mk-post-status.failed { background: rgba(239,68,68,.12); color: #dc2626; }

/* ── Network icons ── */
.mk-net-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .72rem; font-weight: 600; background: var(--sf2); }
.mk-net-pill img { width: 14px; height: 14px; }

/* ── Studio (multi-step wizard) ── */
.mk-studio { background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 28px 32px; min-height: 520px; }
.mk-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 32px; }
.mk-step { display: flex; align-items: center; gap: 14px; }
.mk-step-num { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sf2); color: var(--gr); font-weight: 700; font-size: .9rem; transition: all .25s; }
.mk-step.active .mk-step-num { background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,.35); }
.mk-step.done .mk-step-num { background: #22c55e; color: #fff; }
.mk-step-bar { width: 90px; height: 3px; border-radius: 2px; background: var(--sf2); }
.mk-step.active + .mk-step-bar, .mk-step.done + .mk-step-bar { background: linear-gradient(90deg,#3b82f6,#6366f1); }

.mk-step-title { font-family: var(--fh); font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 18px; letter-spacing: -.02em; }

/* Step 1: networks selector */
.mk-net-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.mk-net-card { border: 1px solid var(--bd); border-radius: 14px; padding: 16px; background: var(--bg); transition: all .2s; }
.mk-net-card.active { border-color: #FF6200; box-shadow: 0 0 0 3px rgba(255,98,0,.12); }
.mk-net-card.disabled { opacity: .55; }
.mk-net-card-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mk-net-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.mk-net-icon.linkedin { background: #0a66c2; color: #fff; }
.mk-net-icon.instagram { background: linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); color: #fff; }
.mk-net-icon.facebook { background: #1877f2; color: #fff; }
.mk-net-icon.twitter { background: #000; color: #fff; }
.mk-net-icon.tiktok { background: #000; color: #fff; }
.mk-net-icon.youtube { background: #ff0000; color: #fff; }
.mk-net-name { font-family: var(--fh); font-size: 1rem; font-weight: 800; color: var(--ink); margin-top: 6px; }
.mk-net-account { display: flex; flex-direction: column; gap: 6px; }
.mk-net-account-label { font-size: .68rem; color: var(--gr); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mk-net-account-input { width: 100%; padding: 8px 10px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf); color: var(--ink); font-family: var(--fb); font-size: .82rem; box-sizing: border-box; }
.mk-net-account-input:focus { outline: none; border-color: #FF6200; }
.mk-net-status { font-size: .68rem; color: var(--gr); margin-top: 6px; }
.mk-net-status.connected { color: #16a34a; }
.mk-net-status.pending { color: #f59e0b; }

/* Toggle switch */
.mk-toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.mk-toggle input { opacity: 0; width: 0; height: 0; }
.mk-toggle-slider { position: absolute; inset: 0; background: var(--sf2); border-radius: 99px; transition: .25s; }
.mk-toggle-slider:before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mk-toggle input:checked + .mk-toggle-slider { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.mk-toggle input:checked + .mk-toggle-slider:before { transform: translateX(18px); }

/* Step 2: schedule date/time */
.mk-schedule-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; }
.mk-schedule-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bd); border-radius: 12px; padding: 14px 18px; background: var(--bg); flex: 0 1 240px; }
.mk-schedule-input input { border: none; background: transparent; outline: none; font-family: var(--fb); font-size: 1rem; color: var(--ink); width: 100%; }
.mk-schedule-input svg { color: var(--gr); flex-shrink: 0; }
.mk-or { text-align: center; color: var(--gr); margin: 14px 0; font-size: .85rem; }
.mk-publish-now { text-align: center; color: #3b82f6; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 12px; border-radius: 10px; transition: background .15s; }
.mk-publish-now:hover { background: rgba(59,130,246,.08); }
.mk-publish-now svg { display: inline-block; vertical-align: middle; margin-right: 6px; }

.mk-suggestions { display: flex; flex-direction: column; gap: 8px; max-width: 440px; margin: 16px auto 0; }
.mk-suggestion { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); cursor: pointer; transition: all .15s; }
.mk-suggestion:hover { border-color: #3b82f6; transform: translateX(2px); }
.mk-suggestion-time { font-weight: 700; color: var(--ink); font-size: .9rem; }
.mk-suggestion-reason { font-size: .72rem; color: var(--gr); }
.mk-suggestion-score { background: rgba(34,197,94,.12); color: #16a34a; padding: 3px 9px; border-radius: 99px; font-size: .68rem; font-weight: 700; }

/* Step 3: preview */
.mk-preview { display: grid; grid-template-columns: 320px 1fr; gap: 24px; margin-bottom: 20px; }
.mk-preview-card { border: 1px solid var(--bd); border-radius: 14px; padding: 16px; background: var(--bg); }
.mk-preview-img { width: 100%; aspect-ratio: 1/1; border-radius: 10px; object-fit: cover; background: linear-gradient(135deg,#FF6200,#ff8f3e); margin-bottom: 12px; }
.mk-preview-text { font-size: .82rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.mk-preview-info { display: flex; flex-direction: column; gap: 14px; }
.mk-preview-info-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); }
.mk-preview-info-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(34,197,94,.12); color: #16a34a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mk-preview-info-text strong { display: block; font-weight: 700; color: var(--ink); font-size: .88rem; margin-bottom: 4px; }
.mk-preview-info-text span { font-size: .76rem; color: var(--gr); }

/* ── Platform previews (step 3) ── */
.mk-pp-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mk-pp-tabs { display: inline-flex; gap: 6px; background: var(--sf2); border-radius: 12px; padding: 5px; }
.mk-pp-tab { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; padding: 7px 14px; border-radius: 8px; font-family: var(--fb); font-size: .8rem; font-weight: 600; color: var(--gr); cursor: pointer; transition: all .15s; }
.mk-pp-tab:hover { color: var(--ink); }
.mk-pp-tab.active { background: var(--sf); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mk-pp-tab svg { color: currentColor; }

.mk-pp-stage { width: 100%; display: flex; justify-content: center; }
.mk-pp-canvas { display: none; width: 100%; max-width: 480px; }
.mk-pp-canvas.active { display: block; }

.mk-pp { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); border: 1px solid #e5e7eb; color: #111; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
[data-theme="dark"] .mk-pp { background: #1f1f23; border-color: #2a2a30; color: #e5e7eb; }

.mk-pp-hd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.mk-pp-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#FF6200,#ff8f3e); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.mk-pp-name { font-weight: 700; font-size: .88rem; }
.mk-pp-meta { font-size: .72rem; color: #6b7280; margin-top: 2px; }
.mk-pp-more { margin-left: auto; color: #6b7280; font-size: 1.1rem; cursor: pointer; }

.mk-pp-text { padding: 0 14px 12px; font-size: .85rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.mk-pp-media { width: 100%; background: #f3f4f6; overflow: hidden; position: relative; }
.mk-pp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-pp-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#FF6200,#ff8f3e); color: #fff; font-size: 3rem; }
.mk-pp-ratio-1 { aspect-ratio: 1 / 1; }
.mk-pp-ratio-191 { aspect-ratio: 1.91 / 1; }
.mk-pp-ratio-169 { aspect-ratio: 16 / 9; }
.mk-pp-ratio-916 { aspect-ratio: 9 / 16; max-height: 580px; max-width: 326px; margin: 0 auto; }

.mk-pp-actions { display: flex; gap: 6px; padding: 8px 14px; border-top: 1px solid #f3f4f6; font-size: .76rem; color: #6b7280; }
.mk-pp-actions span { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mk-pp-actions span:hover { background: #f9fafb; }
[data-theme="dark"] .mk-pp-actions { border-top-color: #2a2a30; }
[data-theme="dark"] .mk-pp-actions span:hover { background: #2a2a30; }

/* LinkedIn specifics */
.mk-pp-linkedin .mk-pp-avatar { border-radius: 8px; background: linear-gradient(135deg,#0a66c2,#1c89ea); }
.mk-pp-linkedin .mk-pp-actions { font-weight: 600; }

/* Instagram specifics */
.mk-pp-instagram .mk-pp-hd { padding: 10px 14px; }
.mk-pp-ig-avatar { border-radius: 50%; background: linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.mk-pp-ig-actions { display: flex; gap: 12px; padding: 10px 14px; font-size: 1.4rem; }
.mk-pp-ig-text { padding: 4px 14px 14px; font-size: .85rem; line-height: 1.4; }
.mk-pp-ig-text strong { font-weight: 700; margin-right: 6px; }

/* Facebook specifics */
.mk-pp-facebook .mk-pp-avatar { background: linear-gradient(135deg,#1877f2,#3b5998); }

/* Twitter / X specifics */
.mk-pp-twitter .mk-pp-avatar { background: #000; color: #fff; }
.mk-pp-twitter .mk-pp-actions { color: #71767b; font-size: 1rem; justify-content: space-between; padding: 10px 14px; }

/* TikTok specifics */
.mk-pp-tiktok { background: #000 !important; color: #fff; }
.mk-pp-tt-overlay { position: absolute; inset: 0; pointer-events: none; }
.mk-pp-tt-side { position: absolute; right: 10px; bottom: 70px; display: flex; flex-direction: column; gap: 18px; align-items: center; color: #fff; font-size: 1.4rem; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.mk-pp-tt-bottom { position: absolute; left: 12px; right: 70px; bottom: 16px; color: #fff; font-size: .82rem; line-height: 1.35; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* YouTube specifics */
.mk-pp-yt-meta { display: flex; gap: 10px; padding: 12px 14px; }
.mk-pp-youtube .mk-pp-avatar { width: 36px; height: 36px; }

/* Wizard footer */
.mk-wizard-footer { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.mk-wizard-next { background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; border: none; border-radius: 12px; padding: 14px 80px; font-family: var(--fb); font-size: .95rem; font-weight: 700; cursor: pointer; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(59,130,246,.3); transition: transform .15s, box-shadow .15s; }
.mk-wizard-next:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(59,130,246,.4); }
.mk-wizard-next:disabled { opacity: .4; cursor: not-allowed; }
.mk-wizard-back { background: transparent; border: none; color: #3b82f6; font-family: var(--fb); font-size: .85rem; font-weight: 700; cursor: pointer; padding: 8px 16px; letter-spacing: .04em; text-transform: uppercase; }
.mk-wizard-back:hover { text-decoration: underline; }

/* Type & method choosers — full-width, no card wrapper */
.mk-studio.is-chooser { background: transparent !important; border: none !important; padding: 0 !important; min-height: 0; }

.mk-chooser-q { text-align: center; font-family: var(--fh); font-size: 2rem; font-weight: 900; color: var(--ink); margin: 24px 0 8px; letter-spacing: -.03em; }
.mk-chooser-sub { text-align: center; font-size: .95rem; color: var(--gr); margin-bottom: 48px; }

.mk-chooser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: none; margin: 0; padding: 0; }
.mk-chooser.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.mk-chooser-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 22px; padding: 56px 32px 44px; text-align: center; cursor: pointer; transition: all .3s cubic-bezier(.25,1,.5,1); position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-chooser-card:hover { transform: translateY(-6px); border-color: #FF6200; box-shadow: 0 20px 44px rgba(255,98,0,.18); }
.mk-chooser-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 50%, rgba(255,98,0,.05) 100%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mk-chooser-card:hover::before { opacity: 1; }
.mk-chooser-card.disabled { opacity: .55; cursor: not-allowed; }
.mk-chooser-card.disabled:hover { transform: none; border-color: var(--bd); box-shadow: none; }
.mk-chooser-icon { width: 96px; height: 96px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.mk-chooser-icon.post { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.mk-chooser-icon.short { background: linear-gradient(135deg,#ec4899,#a855f7); }
.mk-chooser-icon.video { background: linear-gradient(135deg,#FF6200,#ff8f3e); }
.mk-chooser-icon.upload { background: linear-gradient(135deg,#0ea5e9,#0284c7); }
.mk-chooser-icon.ai { background: linear-gradient(135deg,#a855f7,#ec4899); }
.mk-chooser-icon svg { width: 44px; height: 44px; }
.mk-chooser-title { font-family: var(--fh); font-size: 1.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-bottom: 10px; }
.mk-chooser-desc { font-size: .88rem; color: var(--gr); line-height: 1.5; max-width: 280px; }
.mk-chooser-badge { position: absolute; top: 16px; right: 16px; background: rgba(245,158,11,.14); color: #d97706; padding: 4px 12px; border-radius: 99px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 880px) {
  .mk-chooser { grid-template-columns: 1fr; }
  .mk-chooser-card { min-height: 240px; padding: 40px 24px; }
  .mk-chooser-icon { width: 72px; height: 72px; }
  .mk-chooser-icon svg { width: 32px; height: 32px; }
}

/* Studio composer (step 0 — content creation) */
.mk-composer { display: grid; grid-template-columns: 1fr 360px; gap: 20px; margin-bottom: 20px; }
.mk-composer-main { display: flex; flex-direction: column; gap: 14px; }
.mk-composer-textarea { width: 100%; min-height: 220px; border: 1px solid var(--bd); border-radius: 12px; padding: 14px; font-family: var(--fb); font-size: .9rem; color: var(--ink); background: var(--bg); resize: vertical; box-sizing: border-box; line-height: 1.5; }
.mk-composer-textarea:focus { outline: none; border-color: #FF6200; }
.mk-composer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-ai-tools { background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(139,92,246,.06)); border: 1px solid rgba(99,102,241,.2); border-radius: 12px; padding: 16px; }
.mk-ai-tools-title { font-family: var(--fh); font-weight: 800; font-size: .9rem; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.mk-ai-tools-title svg { color: #6366f1; }
.mk-ai-input { width: 100%; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); font-family: var(--fb); font-size: .82rem; color: var(--ink); box-sizing: border-box; margin-bottom: 8px; }
.mk-ai-input:focus { outline: none; border-color: #6366f1; }
.mk-ai-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-ai-chip { padding: 5px 11px; border-radius: 99px; background: var(--sf); border: 1px solid var(--bd); font-size: .72rem; font-weight: 600; color: var(--gr); cursor: pointer; transition: all .15s; }
.mk-ai-chip.active { background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; border-color: transparent; }
.mk-ai-generate { width: 100%; background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; border: none; border-radius: 10px; padding: 10px; font-family: var(--fb); font-size: .82rem; font-weight: 700; cursor: pointer; }
.mk-ai-generate:hover { transform: translateY(-1px); }
.mk-ai-generate:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.mk-media-zone { border: 2px dashed var(--bd); border-radius: 12px; padding: 20px; text-align: center; color: var(--gr); cursor: pointer; transition: all .15s; }
.mk-media-zone:hover { border-color: #FF6200; color: #FF6200; }
.mk-media-zone img { max-width: 100%; max-height: 200px; border-radius: 10px; }
.mk-media-zone svg { display: block; margin: 0 auto 8px; }

/* ── Studio · éditeur "Publier" (post + story) ── */
.mk-ed { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 28px; align-items: start; }
.mk-ed-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.mk-ed-sec { min-width: 0; }
.mk-ed-label { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; color: var(--gr); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.mk-ed-label svg { color: var(--gr); }
.mk-ed-label-link { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: #FF6200; cursor: pointer; }
.mk-ed-label-link:hover { text-decoration: underline; }

/* Segmented control (format + timing) */
.mk-seg { display: flex; gap: 4px; background: var(--sf2); border-radius: 12px; padding: 4px; }
.mk-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-family: var(--fb); font-size: .85rem; font-weight: 700; color: var(--gr); transition: background .15s, color .15s, box-shadow .15s; }
.mk-seg-btn:hover { color: var(--ink); }
.mk-seg-btn.on { background: var(--sf); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mk-seg-btn svg { flex-shrink: 0; }
.mk-seg-sub { font-weight: 500; opacity: .6; }

/* Image upload */
.mk-ed-media { position: relative; border: 2px dashed var(--bd); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--bg); transition: border-color .15s, background .15s; }
.mk-ed-media:hover, .mk-ed-media.drag { border-color: #FF6200; }
.mk-ed-media.drag { background: rgba(255,98,0,.05); }
.mk-ed-media.has-img { border-style: solid; border-color: var(--bd); }
.mk-ed-media img { width: 100%; display: block; max-height: 380px; object-fit: contain; background: var(--sf2); }
.mk-ed-media-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 46px 20px; color: var(--gr); text-align: center; }
.mk-ed-media-empty svg { display: block; }
.mk-ed-media-empty strong { font-size: .9rem; font-weight: 700; color: var(--ink); }
.mk-ed-media-empty span { font-size: .76rem; }
.mk-ed-media-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px; background: linear-gradient(transparent, rgba(0,0,0,.65)); opacity: 0; transition: opacity .15s; }
.mk-ed-media.has-img:hover .mk-ed-media-bar { opacity: 1; }
.mk-ed-media-bar button { flex: 1; padding: 9px; border: none; border-radius: 8px; background: rgba(255,255,255,.95); color: #111; font-family: var(--fb); font-size: .77rem; font-weight: 700; cursor: pointer; }
.mk-ed-media-bar button:hover { background: #fff; }

/* Compose box (éditeur de texte) */
.mk-compose { border: 1.5px solid var(--bd); border-radius: 14px; background: var(--bg); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.mk-compose.focus { border-color: #FF6200; box-shadow: 0 0 0 4px rgba(255,98,0,.1); }
.mk-compose-text { display: block; width: 100%; box-sizing: border-box; border: none; outline: none; background: transparent; resize: vertical; padding: 16px 16px 8px; min-height: 140px; font-family: var(--fb); font-size: .95rem; line-height: 1.6; color: var(--ink); }
.mk-compose-text::placeholder { color: var(--gr); }
.mk-compose-foot { display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-top: 1px solid var(--bd); background: var(--sf); flex-wrap: wrap; }
.mk-compose-tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: var(--fb); font-size: .78rem; font-weight: 700; color: var(--gr); transition: background .15s, color .15s; }
.mk-compose-tool:hover { background: var(--sf2); color: var(--ink); }
.mk-compose-tool.ai { color: #7c3aed; }
.mk-compose-tool.ai:hover { background: rgba(124,58,237,.1); }
.mk-compose-count { margin-left: auto; padding: 0 8px; font-size: .74rem; font-weight: 700; color: var(--gr); font-variant-numeric: tabular-nums; }
.mk-compose-count.warn { color: #d97706; }
.mk-compose-count.over { color: #dc2626; }
.mk-emoji-bar { display: none; flex-wrap: wrap; gap: 2px; padding: 8px; border-top: 1px solid var(--bd); background: var(--sf); }
.mk-emoji-bar.show { display: flex; }
.mk-emoji { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.mk-emoji:hover { background: var(--sf2); }

/* Network chips */
.mk-net-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-net-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1.5px solid var(--bd); border-radius: 11px; background: var(--bg); cursor: pointer; font-family: var(--fb); font-size: .83rem; font-weight: 700; color: var(--ink); transition: border-color .15s, background .15s, color .15s; user-select: none; }
.mk-net-chip:hover { border-color: var(--gr); }
.mk-net-chip.on { border-color: #FF6200; background: rgba(255,98,0,.07); color: #FF6200; }
.mk-net-chip svg { flex-shrink: 0; }
.mk-net-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.mk-net-check { display: inline-flex; color: #FF6200; margin-left: 1px; }
.mk-net-chip.disco { color: var(--gr); border-style: dashed; }
.mk-net-chip.disco:hover { border-color: #3b82f6; background: rgba(59,130,246,.06); color: var(--ink); }
.mk-net-add { font-size: .72rem; font-weight: 800; color: #3b82f6; }

/* Timing date input */
.mk-ed-date { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--bd); border-radius: 11px; background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: .85rem; }
.mk-ed-date:focus { outline: none; border-color: #FF6200; }

/* Action bar */
.mk-ed-actions { display: flex; gap: 10px; align-items: stretch; padding-top: 2px; }
#marketing-root .mk-ed-actions .mk-btn-ghost { border: 1.5px solid var(--bd) !important; padding: 13px 18px !important; }
#marketing-root .mk-ed-publish { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 20px !important; font-size: .92rem !important; }

/* Live preview panel */
.mk-ed-preview { position: sticky; top: 16px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 16px; padding: 18px 18px 22px; }
.mk-ed-preview-hd { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; color: var(--gr); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.mk-ed-preview #mk-preview-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--bd); }
.mk-ed-preview #mk-preview-tabs:empty { display: none; }

/* Story mock */
.mk-pp-story { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.mk-pp-story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-pp-story-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: linear-gradient(135deg,#FF6200,#ff8f3e); }
.mk-pp-story-top { position: absolute; top: 0; left: 0; right: 0; padding: 12px 12px 26px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.mk-pp-story-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); margin-bottom: 11px; overflow: hidden; }
.mk-pp-story-bar i { display: block; width: 42%; height: 100%; background: #fff; border-radius: 2px; }
.mk-pp-story-user { display: flex; align-items: center; gap: 8px; }
.mk-pp-story-user .mk-pp-avatar { width: 30px; height: 30px; font-size: .82rem; }
.mk-pp-story-name { color: #fff; font-size: .8rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.mk-pp-story-time { color: rgba(255,255,255,.75); font-size: .74rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.mk-pp-story-cap { position: absolute; left: 16px; right: 16px; bottom: 64px; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.5; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.85); white-space: pre-wrap; word-break: break-word; }
.mk-pp-story-foot { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; }
.mk-pp-story-reply { flex: 1; border: 1.5px solid rgba(255,255,255,.55); border-radius: 99px; padding: 9px 16px; color: rgba(255,255,255,.85); font-size: .78rem; }
.mk-pp-story-foot span { color: #fff; font-size: 1.15rem; }

@media (max-width: 900px) {
  .mk-ed { grid-template-columns: 1fr; }
  .mk-ed-preview { position: static; }
}

/* ── Calendar ── */
.mk-cal-wrap { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 20px; }
.mk-cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mk-cal-title { font-family: var(--fh); font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.mk-cal-sub { font-size: .8rem; color: var(--gr); margin-top: 2px; }
.mk-cal-toggle { display: inline-flex; background: var(--sf2); border-radius: 10px; padding: 3px; }
.mk-cal-toggle button { background: none; border: none; padding: 6px 16px; border-radius: 7px; font-family: var(--fb); font-size: .78rem; font-weight: 600; color: var(--gr); cursor: pointer; }
.mk-cal-toggle button.active { background: var(--sf); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mk-cal-nav { display: flex; align-items: center; gap: 12px; }
.mk-cal-nav button { width: 30px; height: 30px; border-radius: 8px; background: var(--sf2); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gr); }
.mk-cal-nav button:hover { background: var(--sf); color: var(--ink); }
.mk-cal-nav .mk-cal-month { font-family: var(--fh); font-weight: 800; font-size: 1rem; min-width: 130px; text-align: center; color: var(--ink); }

.mk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.mk-cal-day-hd { background: var(--sf); padding: 14px 16px; font-size: .68rem; font-weight: 700; color: var(--gr); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--bd); border-right: 1px solid var(--bd); }
.mk-cal-day-hd:last-child { border-right: none; }
.mk-cal-cell { background: var(--sf); padding: 12px 14px; min-height: 130px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: background .15s; border-right: 1px solid #f1f1f3; border-bottom: 1px solid #f1f1f3; position: relative; }
[data-theme="dark"] .mk-cal-cell { border-right-color: rgba(255,255,255,.05); border-bottom-color: rgba(255,255,255,.05); }
.mk-cal-cell:nth-child(7n+7), .mk-cal-cell:nth-child(7n) { border-right: none; }
.mk-cal-cell:hover { background: rgba(255,98,0,.025); }
.mk-cal-cell.other-month { background: #fafafa; }
[data-theme="dark"] .mk-cal-cell.other-month { background: rgba(0,0,0,.15); }
.mk-cal-cell.other-month .mk-cal-day-num { color: #cbd5e1; }
.mk-cal-cell.has-events { background: rgba(99,102,241,.04); }
[data-theme="dark"] .mk-cal-cell.has-events { background: rgba(99,102,241,.08); }
.mk-cal-cell.today .mk-cal-day-num { background: #FF6200; color: #fff; border-radius: 99px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.mk-cal-day-num { font-size: .82rem; font-weight: 500; color: var(--ink); align-self: flex-end; line-height: 1; }

/* Event card (chunky, like reference) */
.mk-cal-event { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--sf); border: 1px solid var(--bd); box-shadow: 0 1px 2px rgba(0,0,0,.04); cursor: pointer; transition: all .15s; overflow: hidden; }
.mk-cal-event:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.08); border-color: #FF6200; }
.mk-cal-event-thumb { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg,#FF6200,#ff8f3e); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 800; }
.mk-cal-event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-cal-event-text { flex: 1; min-width: 0; font-size: .72rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.mk-cal-event-icons { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }
.mk-cal-event-icons svg { color: var(--gr); }
.mk-cal-event.published .mk-cal-event-thumb { background: linear-gradient(135deg,#22c55e,#16a34a); }
.mk-cal-event.draft { opacity: .65; }
.mk-cal-event.draft .mk-cal-event-thumb { background: linear-gradient(135deg,#94a3b8,#64748b); }
.mk-cal-event.failed .mk-cal-event-thumb { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.mk-cal-event-more { font-size: .66rem; color: var(--gr); text-align: center; padding: 2px; font-weight: 600; }

/* ── Integrations panel — clean reference style ── */
.mk-int-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mk-int-card { background: var(--sf); border-radius: 18px; padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.03); border: 1px solid transparent; transition: all .25s; }
.mk-int-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.06); transform: translateY(-2px); }
[data-theme="dark"] .mk-int-card { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
[data-theme="dark"] .mk-int-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.mk-int-card-badge { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: 99px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mk-int-card-badge.connected { background: rgba(34,197,94,.12); color: #16a34a; }
.mk-int-card-badge.pending { background: rgba(245,158,11,.14); color: #d97706; }
.mk-int-card-badge.soon { background: rgba(148,163,184,.14); color: var(--gr); }

.mk-int-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.mk-int-card-icon.linkedin { background: linear-gradient(135deg,#0a66c2,#1c89ea); }
.mk-int-card-icon.instagram { background: linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); }
.mk-int-card-icon.facebook { background: #1877f2; }
.mk-int-card-icon.twitter { background: #000; }
.mk-int-card-icon.tiktok { background: #000; }
.mk-int-card-icon.youtube { background: #ff0000; }
.mk-int-card-name { font-family: var(--fh); font-size: 1.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.mk-int-card-desc { font-size: .85rem; color: var(--gr); line-height: 1.5; min-height: 42px; }
.mk-int-card-handle { font-size: .8rem; color: var(--ink); font-weight: 600; padding: 8px 12px; background: var(--bg); border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.mk-int-card-handle::before { content: '✓'; color: #16a34a; font-weight: 800; }
.mk-int-card-eta { font-size: .72rem; color: var(--gr); line-height: 1.45; padding: 8px 0 0; }

.mk-int-btn { width: 100%; padding: 13px 20px; border-radius: 12px; border: none; font-family: var(--fb); font-size: .85rem; font-weight: 800; cursor: pointer; transition: all .2s; letter-spacing: .04em; text-transform: uppercase; margin-top: auto; }
.mk-int-btn.connect { background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; box-shadow: 0 6px 16px rgba(59,130,246,.3); }
.mk-int-btn.connect:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(59,130,246,.42); }
.mk-int-btn.disconnect { background: #fff; color: #dc2626; border: 2px solid #ef4444; }
.mk-int-btn.disconnect:hover { background: #fef2f2; }
[data-theme="dark"] .mk-int-btn.disconnect { background: rgba(239,68,68,.08); }
.mk-int-btn.pending { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; }
.mk-int-btn.soon { background: var(--sf2); color: var(--gr); cursor: not-allowed; box-shadow: none; }

/* ── Config panel ── */
.mk-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-cfg-field { display: flex; flex-direction: column; gap: 6px; }
.mk-cfg-field.full { grid-column: 1 / -1; }
.mk-cfg-label { font-size: .76rem; font-weight: 700; color: var(--ink); }
.mk-cfg-help { font-size: .68rem; color: var(--gr); }
.mk-cfg-input, .mk-cfg-textarea, .mk-cfg-select { padding: 10px 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: .82rem; box-sizing: border-box; }
.mk-cfg-input:focus, .mk-cfg-textarea:focus, .mk-cfg-select:focus { outline: none; border-color: #FF6200; }
.mk-cfg-textarea { min-height: 90px; resize: vertical; }

/* ── Toast / modal ── */
.mk-toast { position: fixed; bottom: 28px; right: 28px; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 10px; font-size: .85rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; z-index: 9999; pointer-events: none; }
.mk-toast.show { opacity: 1; transform: translateY(0); }

.mk-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9990; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.mk-modal-back.show { display: flex; }
.mk-modal { background: var(--sf); border-radius: 16px; max-width: 720px; width: 92%; max-height: 90vh; overflow-y: auto; padding: 28px 32px; box-shadow: 0 24px 64px rgba(0,0,0,.3); }
.mk-modal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mk-modal-title { font-family: var(--fh); font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.mk-modal-close { background: none; border: none; color: var(--gr); cursor: pointer; padding: 6px; border-radius: 6px; font-size: 1.2rem; }
.mk-modal-close:hover { background: var(--sf2); color: var(--ink); }

/* ── Type chooser 4-col layout ── */
.mk-chooser.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mk-chooser-card-mini { min-height: 220px !important; padding: 32px 20px 24px !important; }
.mk-chooser-card-mini .mk-chooser-icon { width: 64px !important; height: 64px !important; margin-bottom: 16px !important; border-radius: 16px !important; }
.mk-chooser-card-mini .mk-chooser-icon svg { width: 30px !important; height: 30px !important; }
.mk-chooser-card-mini .mk-chooser-title { font-size: 1.05rem !important; }
.mk-chooser-card-mini .mk-chooser-desc { font-size: .76rem !important; }

/* ── Carousel composer ── */
.mk-carousel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mk-carousel-slide { background: var(--bg); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; position: relative; display: flex; flex-direction: column; gap: 8px; }
.mk-carousel-slide-num { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; background: #FF6200; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; }
.mk-carousel-slide-media { aspect-ratio: 1/1; background: var(--sf2); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; color: var(--gr); }
.mk-carousel-slide-media img { width: 100%; height: 100%; object-fit: cover; }
.mk-carousel-slide-text { width: 100%; min-height: 70px; padding: 8px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf); font-family: var(--fb); font-size: .76rem; resize: vertical; box-sizing: border-box; color: var(--ink); }
.mk-carousel-rm { position: absolute; top: 8px; right: 8px; background: var(--sf2); border: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; color: var(--gr); font-size: 1rem; line-height: 1; }
.mk-carousel-rm:hover { background: #ef4444; color: #fff; }
.mk-carousel-add { border: 2px dashed var(--bd); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--gr); font-size: .82rem; font-weight: 600; min-height: 220px; transition: all .15s; }
.mk-carousel-add:hover { border-color: #FF6200; color: #FF6200; }

/* ── Templates panel — clean gallery style ── */
.mk-tpl-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.mk-tpl-cat { background: transparent; border: none; padding: 9px 16px; border-radius: 99px; font-family: var(--fb); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .2s; color: var(--gr); display: inline-flex; align-items: center; gap: 6px; }
.mk-tpl-cat:hover { color: var(--ink); background: rgba(0,0,0,.03); }
[data-theme="dark"] .mk-tpl-cat:hover { background: rgba(255,255,255,.05); }
.mk-tpl-cat.active { background: var(--ink); color: var(--bg); }

.mk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.mk-tpl-card { background: var(--sf); border-radius: 18px; padding: 24px; cursor: pointer; transition: all .25s cubic-bezier(.25,1,.5,1); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03); border: 1px solid transparent; }
.mk-tpl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.08); }
[data-theme="dark"] .mk-tpl-card { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
[data-theme="dark"] .mk-tpl-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.mk-tpl-trending { position: absolute; top: 16px; right: 16px; background: linear-gradient(135deg,#ef4444,#f97316); color: #fff; padding: 4px 11px; border-radius: 99px; font-size: .65rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 10px rgba(239,68,68,.25); }

/* Big colored thumb instead of just emoji */
.mk-tpl-thumb { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: linear-gradient(135deg, var(--cat-c1, #FF6200), var(--cat-c2, #ff8f3e)); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); flex-shrink: 0; }
.mk-tpl-card[data-cat="hooks"] { --cat-c1:#3b82f6; --cat-c2:#6366f1; }
.mk-tpl-card[data-cat="list"] { --cat-c1:#10b981; --cat-c2:#059669; }
.mk-tpl-card[data-cat="story"] { --cat-c1:#a855f7; --cat-c2:#d946ef; }
.mk-tpl-card[data-cat="contrarian"] { --cat-c1:#ef4444; --cat-c2:#f97316; }
.mk-tpl-card[data-cat="howto"] { --cat-c1:#f59e0b; --cat-c2:#facc15; }
.mk-tpl-card[data-cat="carousel"] { --cat-c1:#0ea5e9; --cat-c2:#06b6d4; }
.mk-tpl-card[data-cat="bts"] { --cat-c1:#64748b; --cat-c2:#94a3b8; }
.mk-tpl-card[data-cat="promo"] { --cat-c1:#FF6200; --cat-c2:#ff8f3e; }

.mk-tpl-title { font-family: var(--fh); font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.3; }
.mk-tpl-desc { font-size: .85rem; color: var(--gr); line-height: 1.5; flex: 1; }
.mk-tpl-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.05); }
[data-theme="dark"] .mk-tpl-foot { border-top-color: rgba(255,255,255,.06); }
.mk-tpl-nets { display: flex; gap: 5px; align-items: center; color: var(--gr); }
.mk-tpl-use { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: .8rem; font-weight: 700; transition: gap .2s; }
.mk-tpl-card:hover .mk-tpl-use { gap: 8px; color: #FF6200; }

/* ── Analytics panel ── */
.mk-an-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 12px 0; }
.mk-an-bar { flex: 1; background: linear-gradient(180deg, #FF6200, #ff8f3e); border-radius: 4px 4px 0 0; min-width: 6px; position: relative; transition: opacity .15s; }
.mk-an-bar:hover { opacity: .8; }
.mk-an-bar-val { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: .65rem; color: var(--gr); font-weight: 700; }

.mk-an-net-row { display: grid; grid-template-columns: 130px 1fr 36px; gap: 10px; align-items: center; padding: 6px 0; }
.mk-an-net-name { font-size: .8rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.mk-an-net-track { background: var(--sf2); height: 8px; border-radius: 99px; overflow: hidden; }
.mk-an-net-fill { background: linear-gradient(90deg, #FF6200, #ff8f3e); height: 100%; border-radius: 99px; transition: width .4s; }
.mk-an-net-count { text-align: right; font-size: .8rem; font-weight: 700; color: var(--gr); }

.mk-an-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.mk-an-type { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 8px; text-align: center; }
.mk-an-type strong { display: block; font-family: var(--fh); font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.mk-an-type span { font-size: .68rem; color: var(--gr); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

.mk-an-heatmap { display: grid; grid-template-columns: 40px repeat(24, 1fr); gap: 2px; padding: 8px 0; }
.mk-an-hm-hdr { font-size: .65rem; color: var(--gr); text-align: center; grid-column: span 3; }
.mk-an-hm-day { font-size: .68rem; color: var(--gr); display: flex; align-items: center; padding-right: 6px; font-weight: 600; }
.mk-an-hm-cell { aspect-ratio: 1/1; border-radius: 3px; background: rgba(255,98,0,0.04); transition: transform .12s; cursor: pointer; }
.mk-an-hm-cell:hover { transform: scale(1.4); z-index: 2; }

.mk-an-insights { display: flex; flex-direction: column; gap: 10px; }
.mk-an-insight { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; font-size: .85rem; color: var(--ink); line-height: 1.45; }
.mk-an-insight-ico { font-size: 1.2rem; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  #marketing-root { padding: 18px 18px; }
  #marketing-root.mk-fullwidth { padding: 0; }
  .mk-kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-composer, .mk-preview { grid-template-columns: 1fr; }
  .mk-cfg-grid { grid-template-columns: 1fr; }
  .mk-cal-cell { min-height: 70px; padding: 6px; }

  /* Modal templates : stack vertical preview en haut + form en bas */
  .mk-tpl-modal-grid {
    grid-template-columns: 1fr !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .mk-tpl-masonry { column-count: 2 !important; }
}

@media (max-width: 540px) {
  .mk-tpl-masonry { column-count: 1 !important; }
}

/* ────────────────────────────────────────────────────────────
   Scrollbar dark elegante quand l'user est dans une page
   marketing en plein ecran (.mk-tpl-dark = templates page).
   Override la scrollbar par defaut Windows (large, gris clair)
   par un thumb dark slim qui s'integre au theme.
   Applique aussi au body quand mk-fullwidth est actif.
─────────────────────────────────────────────────────────────── */
html:has(#marketing-root.mk-fullwidth)::-webkit-scrollbar,
html:has(#marketing-root.mk-fullwidth) body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html:has(#marketing-root.mk-fullwidth)::-webkit-scrollbar-track,
html:has(#marketing-root.mk-fullwidth) body::-webkit-scrollbar-track {
  background: #0a0a0a;
}
html:has(#marketing-root.mk-fullwidth)::-webkit-scrollbar-thumb,
html:has(#marketing-root.mk-fullwidth) body::-webkit-scrollbar-thumb {
  background: #2d333b;
  border-radius: 10px;
  border: 2px solid #0a0a0a;
}
html:has(#marketing-root.mk-fullwidth)::-webkit-scrollbar-thumb:hover,
html:has(#marketing-root.mk-fullwidth) body::-webkit-scrollbar-thumb:hover {
  background: #3d4248;
}
html:has(#marketing-root.mk-fullwidth),
html:has(#marketing-root.mk-fullwidth) body {
  scrollbar-width: thin;
  scrollbar-color: #2d333b #0a0a0a;
}

/* ════════════════════════════════════════════════════════════
   MARKETING DARK MODE — applique UNIQUEMENT quand l'app est en
   dark ([data-theme="dark"]). En light mode : rien, les pages
   gardent leur style clair. Les inline styles JS hardcodent
   beaucoup de blanc/gris clair : on les remappe ici en charcoal
   pour que Studio / Dashboard / Projets / Calendar s'integrent
   proprement au theme sombre (palette neutre, AUCUN bleu marine).

   Palette dark (alignee sur le dashboard) :
     bg      : #171717
     surface : #1e1e1e
     surface2: #252525
     border  : rgba(255,255,255,.1)
     text    : #f0f0f0
     muted   : rgba(255,255,255,.62)
═══════════════════════════════════════════════════════════════ */

/* Fonds blancs / clairs hardcodes -> charcoal */
[data-theme="dark"] #marketing-root [style*="background:#fff"]:not([style*="gradient"]),
[data-theme="dark"] #marketing-root [style*="background: #fff"]:not([style*="gradient"]),
[data-theme="dark"] #marketing-root [style*="background:#ffffff"]:not([style*="gradient"]),
[data-theme="dark"] #marketing-root [style*="background:#f8fafc"],
[data-theme="dark"] #marketing-root [style*="background:#f1f5f9"],
[data-theme="dark"] #marketing-root [style*="background:#f9fafb"],
[data-theme="dark"] #marketing-root [style*="background:#fafafa"],
[data-theme="dark"] #marketing-root [style*="background:#eff6ff"] {
  background: #1e1e1e !important;
}
[data-theme="dark"] #marketing-root [style*="background:#e2e8f0"],
[data-theme="dark"] #marketing-root [style*="background:#e5e7eb"] { background: #252525 !important; }

/* Textes sombres hardcodes -> clairs */
[data-theme="dark"] #marketing-root [style*="color:#0f172a"],
[data-theme="dark"] #marketing-root [style*="color:#111827"],
[data-theme="dark"] #marketing-root [style*="color:#1f2937"],
[data-theme="dark"] #marketing-root [style*="color:#1e293b"],
[data-theme="dark"] #marketing-root [style*="color:#1e1e2d"],
[data-theme="dark"] #marketing-root [style*="color:#0a0a0a"],
[data-theme="dark"] #marketing-root [style*="color:#111"],
[data-theme="dark"] #marketing-root [style*="color:#000"] { color: #f0f0f0 !important; }

/* Gris medium -> muted clair */
[data-theme="dark"] #marketing-root [style*="color:#334155"],
[data-theme="dark"] #marketing-root [style*="color:#475569"],
[data-theme="dark"] #marketing-root [style*="color:#374151"],
[data-theme="dark"] #marketing-root [style*="color:#64748b"],
[data-theme="dark"] #marketing-root [style*="color:#6b7280"],
[data-theme="dark"] #marketing-root [style*="color:#94a3b8"],
[data-theme="dark"] #marketing-root [style*="color:#9ca3af"] { color: rgba(255,255,255,.62) !important; }

/* Borders claires -> sombres */
[data-theme="dark"] #marketing-root [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] #marketing-root [style*="border:1px solid #e2e8f0"],
[data-theme="dark"] #marketing-root [style*="border:1.5px solid #e5e7eb"],
[data-theme="dark"] #marketing-root [style*="border:1px solid #f1f5f9"],
[data-theme="dark"] #marketing-root [style*="border:2px dashed #cbd5e1"],
[data-theme="dark"] #marketing-root [style*="border-top:1px solid #f1f5f9"] {
  border-color: rgba(255,255,255,.1) !important;
}

/* Inputs / textareas / selects dans le scope marketing en dark */
[data-theme="dark"] #marketing-root input[type="text"],
[data-theme="dark"] #marketing-root input[type="url"],
[data-theme="dark"] #marketing-root input[type="email"],
[data-theme="dark"] #marketing-root input[type="date"],
[data-theme="dark"] #marketing-root input[type="time"],
[data-theme="dark"] #marketing-root input[type="datetime-local"],
[data-theme="dark"] #marketing-root input[type="number"],
[data-theme="dark"] #marketing-root textarea,
[data-theme="dark"] #marketing-root select {
  background: #171717 !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] #marketing-root input::placeholder,
[data-theme="dark"] #marketing-root textarea::placeholder { color: rgba(255,255,255,.4) !important; }

/* mk-studio shell + cards en dark */
[data-theme="dark"] #marketing-root .mk-studio { background: #1e1e1e !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] #marketing-root .mk-card,
[data-theme="dark"] #marketing-root .mk-kpi { background: #1e1e1e !important; border-color: rgba(255,255,255,.1) !important; }

/* La page Templates garde son propre noir #0a0a0a, on ne la touche pas */
[data-theme="dark"] #marketing-root .mk-tpl-dark { background: #0a0a0a !important; }