/**
 * kmoove-design.css — Feuille de style KMOOVE Studio
 * --------------------------------------------------------------------------
 * Source unique de vérité visuelle pour toutes les pages QuizForge.
 * Inspiré de la charte Kmoove Studio Store (BRAND.md) : français, chaleureux,
 * rassurant. Pas de violet/tech SaaS US. Palette crème + corail + teal.
 *
 * Ne change AUCUNE fonctionnalité — uniquement l'aspect visuel.
 * Appliqué via overrides des classes Tailwind existantes.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. TOKENS (couleurs, polices, transitions) — BRAND.md KMOOVE
═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── COULEURS MÈRES ───────────────────────────────────── */
  --kmoove-coral:         #D4572A;  /* action principale, énergie */
  --kmoove-coral-light:   #FAECE7;
  --kmoove-coral-dark:    #993C1D;

  --kmoove-teal:          #1D9E75;  /* succès, validation */
  --kmoove-teal-light:    #E1F5EE;
  --kmoove-teal-dark:     #0F6E56;

  --kmoove-purple:        #534AB7;  /* personnalisation, soin */
  --kmoove-purple-light:  #EEEDFE;
  --kmoove-purple-dark:   #3C3489;

  /* ── FONDS (identité chaleur) ─────────────────────────── */
  --kmoove-cream:         #FAF7F2;
  --kmoove-cream-2:       #F4EDE0;
  --kmoove-cream-3:       #E8DDC9;
  --kmoove-white:         #FFFFFF;

  /* ── TEXTES (ink — jamais noir) ───────────────────────── */
  --kmoove-ink:           #2B1F12;
  --kmoove-ink-2:         #4A3D2C;
  --kmoove-ink-3:         #6B5D4A;
  --kmoove-ink-4:         #8A7D6A;

  /* ── POLICES ──────────────────────────────────────────── */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --kmoove-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --kmoove-duration: 200ms;
  --kmoove-transition: all var(--kmoove-duration) var(--kmoove-ease);

  /* ── OMBRES DOUCES ────────────────────────────────────── */
  --kmoove-shadow-soft:  0 2px 8px rgba(43, 31, 18, 0.06);
  --kmoove-shadow-card:  0 1px 3px rgba(43, 31, 18, 0.04), 0 8px 24px rgba(43, 31, 18, 0.04);
  --kmoove-shadow-hover: 0 4px 16px rgba(43, 31, 18, 0.08);

  /* ── RAYONS ───────────────────────────────────────────── */
  --kmoove-radius-btn:   10px;
  --kmoove-radius-card:  16px;
  --kmoove-radius-modal: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BASE — reset polices + fond crème + couleur encre
═══════════════════════════════════════════════════════════════════════ */
body,
.font-sans {
  font-family: var(--font-sans) !important;
  color: var(--kmoove-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fond global crème — remplace bg-slate-50 */
body.bg-slate-50,
body.kmoove-body {
  background-color: var(--kmoove-cream) !important;
}

/* Titres toujours en serif Fraunces */
h1, h2,
.text-2xl, .text-xl, .text-3xl,
.kmoove-title {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: var(--kmoove-ink);
}

/* Chiffres / scores / clés en JetBrains Mono */
.font-mono,
.kmoove-mono {
  font-family: var(--font-mono) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. COULEURS — override Tailwind violet/slate/emerald → palette KMOOVE
═══════════════════════════════════════════════════════════════════════ */

/* ── VIOLET → CORAL (action principale) ───────────────── */
.bg-violet-600        { background-color: var(--kmoove-coral) !important; }
.bg-violet-700        { background-color: var(--kmoove-coral-dark) !important; }
.hover\:bg-violet-700:hover { background-color: var(--kmoove-coral-dark) !important; }
.active\:bg-violet-800:active { background-color: var(--kmoove-coral-dark) !important; }
.bg-violet-50         { background-color: var(--kmoove-coral-light) !important; }
.bg-violet-100        { background-color: var(--kmoove-coral-light) !important; }
.hover\:bg-violet-50:hover { background-color: var(--kmoove-coral-light) !important; }
.hover\:bg-violet-100:hover { background-color: var(--kmoove-coral-light) !important; }

.text-violet-500      { color: var(--kmoove-coral) !important; }
.text-violet-600      { color: var(--kmoove-coral) !important; }
.text-violet-700      { color: var(--kmoove-coral-dark) !important; }
.hover\:text-violet-700:hover { color: var(--kmoove-coral-dark) !important; }

.border-violet-200    { border-color: var(--kmoove-coral-light) !important; }
.border-violet-300    { border-color: #e7c4b5 !important; }
.border-violet-400    { border-color: var(--kmoove-coral) !important; }
.border-violet-500    { border-color: var(--kmoove-coral) !important; }
.hover\:border-violet-200:hover { border-color: var(--kmoove-coral-light) !important; }
.hover\:border-violet-300:hover { border-color: #e7c4b5 !important; }
.hover\:border-violet-400:hover { border-color: var(--kmoove-coral) !important; }
.focus\:border-violet-400:focus { border-color: var(--kmoove-coral) !important; }
.focus\:border-violet-500:focus { border-color: var(--kmoove-coral) !important; }

.focus\:ring-violet-100:focus { --tw-ring-color: var(--kmoove-coral-light) !important; }
.ring-violet-100      { --tw-ring-color: var(--kmoove-coral-light) !important; }
.shadow-violet-200    { --tw-shadow-color: rgba(212, 87, 42, 0.18) !important; box-shadow: 0 2px 8px rgba(212, 87, 42, 0.18) !important; }

/* Filter-btn-active dans hub.html — corail au lieu de violet */
.filter-btn-active {
  border-color: var(--kmoove-coral) !important;
  background-color: var(--kmoove-coral-light) !important;
  color: var(--kmoove-coral-dark) !important;
}

/* ── SLATE → INK / CREAM (texte + fonds neutres) ──────── */
.text-slate-900       { color: var(--kmoove-ink) !important; }
.text-slate-800       { color: var(--kmoove-ink-2) !important; }
.text-slate-700       { color: var(--kmoove-ink-2) !important; }
.text-slate-600       { color: var(--kmoove-ink-3) !important; }
.text-slate-500       { color: var(--kmoove-ink-3) !important; }
.text-slate-400       { color: var(--kmoove-ink-4) !important; }
.text-slate-300       { color: var(--kmoove-ink-4) !important; }

.bg-slate-50          { background-color: var(--kmoove-cream) !important; }
.bg-slate-100         { background-color: var(--kmoove-cream-2) !important; }
.bg-slate-200         { background-color: var(--kmoove-cream-3) !important; }
.hover\:bg-slate-100:hover { background-color: var(--kmoove-cream-2) !important; }
.hover\:bg-slate-200:hover { background-color: var(--kmoove-cream-3) !important; }

.border-slate-100     { border-color: var(--kmoove-cream-2) !important; }
.border-slate-200     { border-color: var(--kmoove-cream-3) !important; }
.border-slate-300     { border-color: var(--kmoove-cream-3) !important; }
.hover\:border-slate-300:hover { border-color: var(--kmoove-ink-4) !important; }

.placeholder\:text-slate-400::placeholder { color: var(--kmoove-ink-4) !important; }

/* ── EMERALD → TEAL (succès, disponible) ──────────────── */
.bg-emerald-50        { background-color: var(--kmoove-teal-light) !important; }
.bg-emerald-500       { background-color: var(--kmoove-teal) !important; }
.border-emerald-200   { border-color: #bfe8d8 !important; }
.text-emerald-600     { color: var(--kmoove-teal) !important; }
.text-emerald-700     { color: var(--kmoove-teal-dark) !important; }

/* ── AMBER → CORAL (accents secondaires) ─────────────── */
.bg-amber-50          { background-color: var(--kmoove-coral-light) !important; }
.bg-amber-100         { background-color: var(--kmoove-coral-light) !important; }
.border-amber-200     { border-color: #e7c4b5 !important; }
.text-amber-600       { color: var(--kmoove-coral) !important; }
.text-amber-700       { color: var(--kmoove-coral-dark) !important; }
.hover\:bg-amber-100:hover { background-color: var(--kmoove-coral-light) !important; }

/* ── BLUE → PURPLE-KMOOVE (secondaires doux) ──────────── */
.bg-blue-50           { background-color: var(--kmoove-purple-light) !important; }
.bg-blue-100          { background-color: var(--kmoove-purple-light) !important; }
.border-blue-200      { border-color: #d4d2f0 !important; }
.text-blue-600        { color: var(--kmoove-purple) !important; }
.text-blue-700        { color: var(--kmoove-purple-dark) !important; }
.hover\:bg-blue-100:hover { background-color: var(--kmoove-purple-light) !important; }

/* ── RED (erreurs) : on garde mais plus chaleureux ────── */
.bg-red-50            { background-color: #fdf1ec !important; }
.border-red-200       { border-color: #e9bfae !important; }
.text-red-500         { color: #c94a2a !important; }
.text-red-600         { color: #b0401f !important; }
.hover\:border-red-300:hover { border-color: #d18164 !important; }
.hover\:text-red-500:hover { color: #c94a2a !important; }

/* ═══════════════════════════════════════════════════════════════════════
   4. COMPOSANTS — cartes, boutons, inputs, sidebar
═══════════════════════════════════════════════════════════════════════ */

/* ── Cartes blanches : ombre douce + radius KMOOVE ───── */
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
  background-color: var(--kmoove-white) !important;
  box-shadow: var(--kmoove-shadow-card);
  transition: var(--kmoove-transition);
}

.bg-white.rounded-xl { border-radius: var(--kmoove-radius-card) !important; }
.bg-white.rounded-2xl { border-radius: var(--kmoove-radius-modal) !important; }

/* Cartes au hover : soulève + ombre douce */
.bg-white.rounded-xl:hover,
.bg-white.rounded-2xl:hover,
.game-card:hover:not(.opacity-55) {
  transform: translateY(-1px);
  box-shadow: var(--kmoove-shadow-hover);
  border-color: var(--kmoove-cream-3) !important;
}

/* ── Boutons primaires corail — radius 10px ─────────── */
button.bg-violet-600,
a.bg-violet-600,
.bg-violet-600.rounded-xl,
.bg-violet-600.rounded-lg {
  background-color: var(--kmoove-coral) !important;
  color: var(--kmoove-white) !important;
  border-radius: var(--kmoove-radius-btn) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(43, 31, 18, 0.04);
  transition: var(--kmoove-transition);
}

button.bg-violet-600:hover,
a.bg-violet-600:hover,
.bg-violet-600.rounded-xl:hover,
.bg-violet-600.rounded-lg:hover {
  background-color: var(--kmoove-coral-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 87, 42, 0.2);
}

button.bg-violet-600:active,
a.bg-violet-600:active {
  transform: translateY(0);
}

/* ── Inputs : fond crème + radius arrondi + focus corail */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select {
  font-family: var(--font-sans) !important;
  color: var(--kmoove-ink);
  transition: var(--kmoove-transition);
}

input.bg-slate-50,
textarea.bg-slate-50,
select.bg-slate-50 {
  background-color: var(--kmoove-white) !important;
  border-color: var(--kmoove-cream-3) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--kmoove-coral) !important;
  outline: 2px solid rgba(212, 87, 42, 0.12);
  outline-offset: 0;
}

/* ── Sidebar (hub.html, app.html) ──────────────────── */
aside#sidebar,
aside.w-\[220px\] {
  background-color: var(--kmoove-white) !important;
  border-right-color: var(--kmoove-cream-3) !important;
}

/* Logo carré sidebar : corail au lieu de violet */
aside .bg-violet-600 {
  background-color: var(--kmoove-coral) !important;
}

/* Navigation active : fond coral-light */
aside nav a.bg-violet-50 {
  background-color: var(--kmoove-coral-light) !important;
  color: var(--kmoove-coral-dark) !important;
  font-weight: 500 !important;
}

/* Top bar backdrop blur : fond crème translucide */
.bg-white\/95 {
  background-color: rgba(250, 247, 242, 0.95) !important;
  border-bottom-color: var(--kmoove-cream-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. GAME CARDS — hub.html
═══════════════════════════════════════════════════════════════════════ */
.game-card {
  background-color: var(--kmoove-white) !important;
  border: 1px solid var(--kmoove-cream-3) !important;
  border-radius: var(--kmoove-radius-card) !important;
  box-shadow: var(--kmoove-shadow-soft);
  transition: var(--kmoove-transition);
}

.game-card:hover {
  border-color: var(--kmoove-cream-3) !important;
  box-shadow: var(--kmoove-shadow-hover);
  transform: translateY(-1px);
}

.game-card .text-3xl {
  font-size: 1.75rem;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. BADGES (Disponible / Bientôt / En dev)
═══════════════════════════════════════════════════════════════════════ */
/* Disponible — teal */
.inline-flex.bg-emerald-50 {
  background-color: var(--kmoove-teal-light) !important;
  border-color: #bfe8d8 !important;
  color: var(--kmoove-teal-dark) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
.inline-flex.bg-emerald-50 .bg-emerald-500 {
  background-color: var(--kmoove-teal) !important;
}

/* En dev — corail doux */
.inline-flex.bg-amber-50 {
  background-color: var(--kmoove-coral-light) !important;
  border-color: #e7c4b5 !important;
  color: var(--kmoove-coral-dark) !important;
  font-weight: 500 !important;
}

/* Bientôt — violet KMOOVE */
.inline-flex.bg-blue-50 {
  background-color: var(--kmoove-purple-light) !important;
  border-color: #d4d2f0 !important;
  color: var(--kmoove-purple-dark) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. GRADIENTS (login galerie) — atténuer les bleus/violets saturés
═══════════════════════════════════════════════════════════════════════ */
.bg-gradient-to-br.from-violet-500 { background-image: linear-gradient(135deg, #6b62c4, #4a4199) !important; }
.bg-gradient-to-br.from-blue-500   { background-image: linear-gradient(135deg, #3d7aad, #2a5585) !important; }
.bg-gradient-to-br.from-teal-500   { background-image: linear-gradient(135deg, var(--kmoove-teal), var(--kmoove-teal-dark)) !important; }
.bg-gradient-to-br.from-pink-500   { background-image: linear-gradient(135deg, #c9647a, #a4465c) !important; }
.bg-gradient-to-br.from-orange-500 { background-image: linear-gradient(135deg, var(--kmoove-coral), var(--kmoove-coral-dark)) !important; }
.bg-gradient-to-br.from-emerald-500{ background-image: linear-gradient(135deg, var(--kmoove-teal), var(--kmoove-teal-dark)) !important; }

/* Login page : gradient texte violet→rose → corail chaleureux */
.kmoove-gradient-text,
[style*="linear-gradient(90deg,#7c3aed,#ec4899)"] {
  background: linear-gradient(90deg, var(--kmoove-coral), var(--kmoove-coral-dark)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. MODALES (qf-overlay)
═══════════════════════════════════════════════════════════════════════ */
.qf-overlay.fixed.bg-black\/60 {
  background-color: rgba(43, 31, 18, 0.5) !important;
  backdrop-filter: blur(4px);
}

.qf-panel {
  border-radius: var(--kmoove-radius-modal) !important;
  box-shadow: 0 20px 48px rgba(43, 31, 18, 0.15), 0 4px 12px rgba(43, 31, 18, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. TAGS uppercase et labels
═══════════════════════════════════════════════════════════════════════ */
.text-xs.uppercase,
.tracking-wider,
.tracking-wide {
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. SCROLLBAR custom (déjà existante — juste la couleur)
═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: var(--kmoove-cream-3) !important;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--kmoove-ink-4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. UTILITAIRES KMOOVE additionnels (classes neuves, pas d'override)
═══════════════════════════════════════════════════════════════════════ */
.kmoove-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kmoove-ink-3);
}

.kmoove-hero {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--kmoove-ink);
  line-height: 1.15;
}

.kmoove-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kmoove-cream-3), transparent);
  margin: 2rem 0;
}

/* Icône dans un rond teinté (style KMOOVE) */
.kmoove-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--kmoove-radius-btn);
  background-color: var(--kmoove-coral-light);
  color: var(--kmoove-coral);
}

.kmoove-icon-pill.teal  { background-color: var(--kmoove-teal-light);   color: var(--kmoove-teal); }
.kmoove-icon-pill.purple{ background-color: var(--kmoove-purple-light); color: var(--kmoove-purple); }

/* Focus visible style KMOOVE */
*:focus-visible {
  outline: 2px solid var(--kmoove-coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. MODE CARDS (hub.html — 3 cartes d'entrée, inspiration KMOOVE Studio)
═══════════════════════════════════════════════════════════════════════ */
.mode-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--kmoove-white);
  border: 1px solid var(--kmoove-cream-3);
  border-radius: var(--kmoove-radius-card);
  padding: 24px;
  box-shadow: var(--kmoove-shadow-soft);
  cursor: pointer;
  transition: var(--kmoove-transition);
  font-family: var(--font-sans);
  width: 100%;
  text-decoration: none;
  color: var(--kmoove-ink);
}
.mode-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--kmoove-shadow-hover);
  border-color: var(--kmoove-ink-4);
}
.mode-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-bottom: 20px;
}
.mode-card-icon.coral  { background: var(--kmoove-coral-light);  color: var(--kmoove-coral); }
.mode-card-icon.teal   { background: var(--kmoove-teal-light);   color: var(--kmoove-teal); }
.mode-card-icon.purple { background: var(--kmoove-purple-light); color: var(--kmoove-purple); }
.mode-card-icon svg { width: 22px; height: 22px; }

.mode-card-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mode-card-tag.coral  { color: var(--kmoove-coral-dark); }
.mode-card-tag.teal   { color: var(--kmoove-teal-dark); }
.mode-card-tag.purple { color: var(--kmoove-purple-dark); }

.mode-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--kmoove-ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.mode-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kmoove-ink-3);
  flex: 1;
  margin-bottom: 24px;
}

.mode-card-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kmoove-ink-3);
}
.mode-card-duration svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   13. HELP BANNER (bande « Besoin d'un coup de main ? »)
═══════════════════════════════════════════════════════════════════════ */
.kmoove-help-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--kmoove-coral-light);
  border-radius: var(--kmoove-radius-card);
  border: 1px solid rgba(212, 87, 42, 0.12);
}
.kmoove-help-banner .help-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.kmoove-help-banner .help-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--kmoove-coral);
  color: var(--kmoove-white);
  flex-shrink: 0;
}
.kmoove-help-banner .help-icon svg { width: 20px; height: 20px; }
.kmoove-help-banner .help-title {
  font-weight: 500;
  color: var(--kmoove-ink);
  font-size: 15px;
  margin-bottom: 2px;
}
.kmoove-help-banner .help-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kmoove-ink-2);
}
.kmoove-help-banner .help-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--kmoove-coral-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--kmoove-transition);
  flex-shrink: 0;
}
.kmoove-help-banner .help-cta:hover { color: var(--kmoove-coral); }

/* ═══════════════════════════════════════════════════════════════════════
   14. DRAFTS HORIZONTAL SCROLL (brouillons — défilement latéral)
═══════════════════════════════════════════════════════════════════════ */
.kmoove-draft-scroller {
  position: relative;
}
.kmoove-draft-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 4px 2px 12px 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--kmoove-cream-3) transparent;
}
.kmoove-draft-track::-webkit-scrollbar { height: 4px; }
.kmoove-draft-track::-webkit-scrollbar-track { background: transparent; }
.kmoove-draft-track::-webkit-scrollbar-thumb { background: var(--kmoove-cream-3); border-radius: 2px; }

.kmoove-draft-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kmoove-white);
  border: 1px solid var(--kmoove-cream-3);
  border-radius: var(--kmoove-radius-card);
  padding: 14px 16px;
  width: 320px;
  flex-shrink: 0;
  box-shadow: var(--kmoove-shadow-soft);
  transition: var(--kmoove-transition);
  scroll-snap-align: start;
}
.kmoove-draft-card:hover {
  transform: translateY(-1px);
  border-color: var(--kmoove-ink-4);
  box-shadow: var(--kmoove-shadow-hover);
}

.kmoove-draft-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kmoove-white);
  border: 1px solid var(--kmoove-cream-3);
  box-shadow: var(--kmoove-shadow-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: var(--kmoove-transition);
  color: var(--kmoove-ink-2);
}
.kmoove-draft-scroll-btn:hover {
  background: var(--kmoove-coral);
  color: var(--kmoove-white);
  border-color: var(--kmoove-coral);
  transform: translateY(-50%) scale(1.05);
}
.kmoove-draft-scroll-btn.left  { left: -14px; }
.kmoove-draft-scroll-btn.right { right: -14px; }
.kmoove-draft-scroll-btn[disabled] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.8);
}
.kmoove-draft-scroll-btn svg { width: 18px; height: 18px; }