/* ===========================================================================
   Kiclic — Éditeur photo réutilisable (overlay immersif)
   Auto-injecté par photo-editor.js. Ouvert via KiclicPhotoEditor.open().
   Prefix : pe-
   =========================================================================== */

/* ===================== Tokens auto-suffisants =====================
   L'éditeur est réutilisé sur des pages qui ne partagent pas forcément les
   mêmes tokens de design (Template, Profil/Réglages…). On (re)définit donc ici,
   scopé à l'overlay, toutes les variables utilisées — sinon les fonds tombent en
   transparent. L'éditeur est volontairement en thème sombre dans les deux thèmes. */
.pe-overlay {
  --bg-elev-1: #111111;
  --bg-elev-2: #1A1A1A;
  --border: #222222;
  --border-soft: rgba(255,255,255,0.08);
  --fg: #FFFFFF;
  --fg-secondary: #9CA3AF;
  --fg-muted: #6B7280;
  --font-display: "Rubik", system-ui, sans-serif;
  --surface-tint: rgba(255,255,255,0.08);
  --surface-tint-light: rgba(255,255,255,0.05);
  --k-blue: #5B8DEF;
  --k-violet: #B968C7;
  --k-pink: #E94E8B;
  --k-gradient: linear-gradient(135deg, #5B8DEF 0%, #B968C7 50%, #E94E8B 100%);
  --k-gradient-h: linear-gradient(90deg, #5B8DEF 0%, #B968C7 50%, #E94E8B 100%);
  --k-gradient-error: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);
  --t-base: 280ms;
  --t-fast: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Thème clair : le site passe en html[data-theme="light"] → panneau blanc,
   texte foncé, surfaces/bordures claires. Les boutons/onglets/chips utilisent
   tous ces tokens, ils basculent donc automatiquement (rien codé en dur qui
   deviendrait invisible : les #fff restants sont sur dégradés/images/pastilles). */
html[data-theme="light"] .pe-overlay {
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #F4F4F7;
  --border: #E5E5EA;
  --border-soft: rgba(0,0,0,0.08);
  --fg: #0A0A0A;
  --fg-secondary: #4B5563;
  --fg-muted: #6B7280;
  --surface-tint: rgba(0,0,0,0.06);
  --surface-tint-light: rgba(0,0,0,0.035);
}

/* ===================== Overlay + backdrop ===================== */
.pe-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(6, 4, 14, 0.62);
  backdrop-filter: blur(8px) saturate(0.9);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
html[data-theme="light"] .pe-overlay { background: rgba(24, 16, 48, 0.34); }
.pe-overlay.on { opacity: 1; pointer-events: auto; }
.pe-panel {
  position: relative;
  width: 100%; max-width: 1240px; height: 100%; max-height: 860px;
  display: flex; flex-direction: column;
  background: var(--bg-elev-1);
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transform: scale(0.955) translateY(14px);
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
html[data-theme="light"] .pe-panel { box-shadow: 0 40px 120px rgba(40, 24, 80, 0.28); }
.pe-overlay.on .pe-panel { transform: scale(1) translateY(0); opacity: 1; }

/* soft brand halos behind the panel content */
.pe-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(520px 320px at 22% -8%, rgba(91, 141, 239, 0.12), transparent 60%),
    radial-gradient(560px 360px at 108% 118%, rgba(233, 78, 139, 0.12), transparent 60%);
}

/* ===================== Header ===================== */
.pe-head {
  position: relative; z-index: 2; flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--border-soft);
}
.pe-head .pe-titlewrap { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pe-head .pe-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--k-gradient); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 6px 18px rgba(185, 104, 199, 0.35); }
.pe-head .pe-logo svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }
.pe-head .pe-ttl { min-width: 0; }
.pe-head .pe-ttl .t { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.015em; color: var(--fg); line-height: 1.1; }
.pe-head .pe-ttl .s { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-head .pe-ctx { color: var(--fg); font-weight: 600; }

.pe-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pe-hist { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); }
.pe-iconbtn {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  background: transparent; border: 0; color: var(--fg-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pe-iconbtn:hover:not(:disabled) { color: var(--fg); background: var(--surface-tint); }
.pe-iconbtn:active:not(:disabled) { transform: scale(0.9); }
.pe-iconbtn:disabled { opacity: 0.32; cursor: default; }
.pe-iconbtn svg { width: 16px; height: 16px; stroke-width: 2; }
.pe-btn {
  height: 34px; padding: 0 14px; border-radius: 9999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg-secondary);
  transition: all var(--t-fast);
}
.pe-btn:hover { color: var(--fg); background: var(--surface-tint); }
.pe-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.pe-btn.pe-ghost-danger:hover { color: #fff; background: var(--k-gradient-error); border-color: transparent; }
.pe-close { width: 34px; height: 34px; }

/* ===================== Body (two columns) ===================== */
.pe-body {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0;
}

/* --- Canvas side --- */
.pe-canvas-col {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 18px 20px; gap: 14px;
  border-right: 1px solid var(--border-soft);
  background: radial-gradient(130% 100% at 50% 0%, var(--surface-tint-light), transparent 62%);
}

/* source tabs */
.pe-src { display: flex; gap: 4px; padding: 4px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); border-radius: 12px; flex: 0 0 auto; }
.pe-src-tab {
  flex: 1 1 0; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--fg-secondary);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color var(--t-fast), background var(--t-fast);
}
.pe-src-tab svg { width: 14px; height: 14px; stroke-width: 2; }
.pe-src-tab:hover { color: var(--fg); }
.pe-src-tab.on { background: var(--bg-elev-1); color: var(--fg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

.pe-tray { display: none; flex: 0 0 auto; }
.pe-tray.on { display: block; animation: peFade .28s var(--ease-out); }
.pe-tray-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pe-thumb { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; padding: 0; background: none; transition: transform var(--t-fast); }
.pe-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-thumb .g { position: absolute; inset: 0; }
.pe-thumb .cap { position: absolute; left: 6px; right: 6px; bottom: 5px; font-size: 9.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); text-align: left; z-index: 2; }
.pe-thumb .cap .sub { display: block; font-weight: 500; font-size: 8.5px; opacity: 0.85; }
.pe-thumb::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 -26px 26px -18px rgba(0, 0, 0, 0.6); }
.pe-thumb:hover { transform: translateY(-2px); }
.pe-thumb.on { border-color: var(--k-pink); box-shadow: 0 0 0 2px rgba(233, 78, 139, 0.3); }
.pe-tray-drop {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: 12px;
  color: var(--fg-muted); font-size: 12.5px; cursor: pointer; transition: all var(--t-fast);
}
.pe-tray-drop:hover { border-color: var(--k-violet); color: var(--fg); }
.pe-tray-drop.drop-hot { border-color: var(--k-pink); background: rgba(233, 78, 139, 0.08); color: var(--fg); }
.pe-tray-drop .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--k-gradient); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pe-tray-drop .ic svg { width: 17px; height: 17px; stroke: #fff; stroke-width: 2; }
.pe-tray-drop b { color: var(--fg); font-weight: 700; }

/* crop stage */
.pe-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.pe-frame {
  position: relative; height: 100%; max-width: 100%;
  border-radius: 14px; overflow: hidden;
  background: repeating-linear-gradient(45deg, rgba(128, 128, 128, 0.1) 0 10px, rgba(128, 128, 128, 0.04) 10px 20px);
  cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.pe-frame.is-drag { cursor: grabbing; }
/* Forme ronde (avatars / logos) : le cadre de recadrage apparaît en cercle.
   L'export reste carré ; l'affichage sur le site masque en rond via border-radius. */
.pe-frame.shape-circle { border-radius: 50%; }
.pe-frame.shape-circle .pe-corner { display: none; }
.pe-frame.shape-circle .pe-grid .v.v1 { left: 50%; } .pe-frame.shape-circle .pe-grid .v.v2 { display: none; }
.pe-frame.shape-circle .pe-grid .h.h1 { top: 50%; } .pe-frame.shape-circle .pe-grid .h.h2 { display: none; }
/* Neutralise un éventuel reset global « img,video{max-width:100%;height:auto} »
   des pages hôtes : il plafonne la largeur de l'image du cadre alors que sa
   hauteur est fixée en inline → étirement vertical au zoom/pivot/format. */
.pe-overlay img { max-width: none; max-height: none; }
.pe-frame img.pe-img { position: absolute; top: 50%; left: 50%; max-width: none; max-height: none; transform-origin: center center; will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.pe-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-fast); z-index: 3; }
.pe-frame.is-drag .pe-grid { opacity: 1; }
.pe-grid .v, .pe-grid .h { position: absolute; background: rgba(255, 255, 255, 0.32); }
.pe-grid .v { top: 0; bottom: 0; width: 1px; }
.pe-grid .v.v1 { left: 33.333%; } .pe-grid .v.v2 { left: 66.666%; }
.pe-grid .h { left: 0; right: 0; height: 1px; }
.pe-grid .h.h1 { top: 33.333%; } .pe-grid .h.h2 { top: 66.666%; }
.pe-corner { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.85); z-index: 4; pointer-events: none; }
.pe-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.pe-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.pe-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.pe-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }

/* in-frame overlays */
.pe-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pe-ov-grad { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--t-base); }
.pe-ov-grad.on { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 34%, transparent 62%); }
.pe-ov-vig { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.pe-ov-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; }
/* duotone layers */
.pe-ov-duoA, .pe-ov-duoB { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.pe-frame.duo .pe-ov-duoA { display: block; mix-blend-mode: lighten; }
.pe-frame.duo .pe-ov-duoB { display: block; mix-blend-mode: darken; }

.pe-text {
  position: absolute; left: 50%; z-index: 5; transform: translateX(-50%);
  max-width: 88%; font-family: var(--font-display); font-weight: 800; line-height: 1.08;
  text-align: center; color: #fff; cursor: grab; padding: 4px 6px; display: none;
}
.pe-text.on { display: block; }
.pe-text.is-drag { cursor: grabbing; }
.pe-text.st-shadow { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5); }
.pe-text.st-plain { text-shadow: none; }
.pe-text.st-grad { background: linear-gradient(100deg, #8FB4FF, #E0A6EC, #FF9ABF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)); }
.pe-stickers { position: absolute; inset: 0; z-index: 6; }
.pe-sticker { position: absolute; z-index: 6; cursor: grab; font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35)); user-select: none; }
.pe-sticker.is-drag { cursor: grabbing; }
.pe-sticker .del { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #EF4444; color: #fff; border: 2px solid #fff; display: none; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.pe-sticker:hover .del { display: flex; }
.pe-frameborder { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 14px; opacity: 0; transition: opacity var(--t-base); }
.pe-frameborder.on { opacity: 1; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.9), inset 0 0 0 6px rgba(233, 78, 139, 0.55); }
.pe-badge { position: absolute; z-index: 7; left: 12px; top: 12px; display: none; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 9999px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.25); }
.pe-badge.on { display: inline-flex; }
.pe-badge .dot { width: 16px; height: 16px; border-radius: 5px; background: var(--k-gradient); }
.pe-badge .wm { font-family: var(--font-display); font-weight: 900; font-size: 12px; letter-spacing: -0.02em; color: #fff; }

.pe-empty {
  position: absolute; inset: 0; z-index: 8;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px; background: var(--bg-elev-2);
  border: 2px dashed var(--border); border-radius: 14px; color: var(--fg-muted); font-size: 12.5px;
}
.pe-empty.show { display: flex; }
.pe-empty.drop-hot { border-color: var(--k-pink); background: rgba(233, 78, 139, 0.08); color: var(--fg); }
.pe-empty .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--k-gradient); display: flex; align-items: center; justify-content: center; }
.pe-empty .ic svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; }
.pe-empty b { color: var(--fg); font-size: 13.5px; font-weight: 700; }

/* transform toolbar under canvas */
.pe-toolbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.pe-row { display: flex; align-items: center; gap: 10px; }
.pe-zic { color: var(--fg-muted); display: flex; flex: 0 0 auto; }
.pe-zic svg { width: 15px; height: 15px; stroke-width: 2; }
.pe-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--surface-tint); outline: none; cursor: pointer; }
.pe-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--k-violet); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); cursor: grab; }
.pe-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--k-violet); cursor: grab; }
.pe-tool-btn {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg-secondary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-fast);
}
.pe-tool-btn:hover { color: var(--fg); background: var(--surface-tint); }
.pe-tool-btn:active { transform: scale(0.92); }
.pe-tool-btn.on { color: #fff; background: var(--k-gradient-h); border-color: transparent; }
.pe-tool-btn svg { width: 15px; height: 15px; stroke-width: 2; }
.pe-straighten { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; }
.pe-straighten .lbl { font-size: 11px; color: var(--fg-muted); font-weight: 600; white-space: nowrap; }
.pe-straighten .deg { font-size: 11px; color: var(--fg-secondary); font-variant-numeric: tabular-nums; width: 36px; text-align: right; }
.pe-sep { width: 1px; align-self: stretch; background: var(--border-soft); margin: 0 2px; }
.pe-fmt-chips { display: flex; gap: 6px; margin-left: auto; }
.pe-fmt-chip {
  height: 28px; padding: 0 11px; border-radius: 9999px; cursor: pointer;
  background: var(--surface-tint-light); border: 1px solid var(--border-soft);
  color: var(--fg-secondary); font-size: 11.5px; font-weight: 700; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; transition: all var(--t-fast);
}
.pe-fmt-chip .box { border: 1.6px solid currentColor; border-radius: 2px; }
.pe-fmt-chip:hover { color: var(--fg); }
.pe-fmt-chip.on { color: #fff; border-color: transparent; background: var(--k-gradient-h); box-shadow: 0 4px 12px rgba(233, 78, 139, 0.3); }
.pe-flabel { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }

/* ===================== Controls side ===================== */
.pe-ctrl-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 16px 0; }
.pe-modes { display: flex; gap: 2px; padding: 3px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); border-radius: 11px; margin-bottom: 14px; flex: 0 0 auto; }
.pe-mode {
  flex: 1 1 0; height: 44px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--fg-secondary);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 9.5px; font-weight: 600; font-family: inherit; transition: color var(--t-fast), background var(--t-fast);
}
.pe-mode svg { width: 16px; height: 16px; stroke-width: 2; }
.pe-mode:hover { color: var(--fg); }
.pe-mode.on { background: var(--bg-elev-1); color: var(--fg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }
.pe-mode.on svg { stroke: url(#pe-grad); }

.pe-panel-scroll { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; margin-right: -4px; padding-bottom: 8px; }
.pe-panel-scroll::-webkit-scrollbar { width: 6px; }
.pe-panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.pe-pane { display: none; flex-direction: column; gap: 13px; }
.pe-pane.on { display: flex; animation: peFade .3s var(--ease-out); }
@keyframes peFade { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } }

.pe-fieldlbl { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; }
.pe-fieldlbl .line { flex: 1 1 auto; height: 1px; background: var(--border-soft); }

/* filters + tints grids */
.pe-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pe-filter, .pe-tint, .pe-duo { padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.pe-filter .th, .pe-tint .sw, .pe-duo .sw { width: 100%; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; position: relative; border: 2px solid transparent; }
.pe-filter .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-ck { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--k-pink); display: none; align-items: center; justify-content: center; }
.pe-tint .pe-ck, .pe-duo .pe-ck { background: rgba(0, 0, 0, 0.4); }
.pe-ck svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3.4; }
.pe-filter .nm, .pe-tint .nm, .pe-duo .nm { font-size: 10.5px; font-weight: 600; color: var(--fg-secondary); }
.pe-filter.on .th { border-color: var(--k-pink); } .pe-filter.on .pe-ck { display: flex; } .pe-filter.on .nm { color: var(--fg); }
.pe-tint.on .sw { border-color: #fff; box-shadow: 0 0 0 2px var(--k-pink); } .pe-tint.on .pe-ck { display: flex; } .pe-tint.on .nm { color: var(--fg); }
.pe-duo.on .sw { border-color: #fff; box-shadow: 0 0 0 2px var(--k-pink); } .pe-duo.on .pe-ck { display: flex; } .pe-duo.on .nm { color: var(--fg); }

/* adjust + effect sliders */
.pe-adj { display: flex; flex-direction: column; gap: 14px; }
.pe-adjrow { display: flex; flex-direction: column; gap: 6px; }
.pe-adjrow .top { display: flex; align-items: center; justify-content: space-between; }
.pe-adjrow .top .nm { font-size: 12.5px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 7px; }
.pe-adjrow .top .nm svg { width: 14px; height: 14px; stroke-width: 2; color: var(--fg-muted); }
.pe-adjrow .top .v { font-size: 11.5px; font-weight: 700; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.pe-adjrow .top .v.mod { color: #C9A8FF; }
.pe-reset {
  align-self: flex-start; margin-top: 2px; height: 28px; padding: 0 12px; border-radius: 9999px; cursor: pointer;
  background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg-secondary);
  font-size: 11.5px; font-weight: 600; font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.pe-reset:hover { color: var(--fg); background: var(--surface-tint); }
.pe-reset svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* text panel */
.pe-textinput { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 11px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg); font-family: inherit; font-size: 14px; outline: none; transition: border-color var(--t-fast); }
.pe-textinput:focus { border-color: var(--k-violet); }
.pe-textinput::placeholder { color: var(--fg-muted); }
.pe-seg { display: flex; gap: 4px; padding: 3px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); border-radius: 10px; }
.pe-seg button { flex: 1 1 0; height: 32px; border: 0; border-radius: 7px; cursor: pointer; background: transparent; color: var(--fg-secondary); font-size: 11.5px; font-weight: 600; font-family: inherit; transition: all var(--t-fast); }
.pe-seg button:hover { color: var(--fg); }
.pe-seg button.on { background: var(--bg-elev-1); color: var(--fg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.pe-toggle-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); border-radius: 11px; }
.pe-toggle-row .tx { flex: 1 1 auto; }
.pe-toggle-row .tx .nm { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.pe-toggle-row .tx .ds { font-size: 11px; color: var(--fg-muted); margin-top: 1px; }
.pe-switch { width: 40px; height: 23px; border-radius: 9999px; background: var(--surface-tint); border: 1px solid var(--border-soft); position: relative; cursor: pointer; flex: 0 0 auto; transition: background var(--t-base); }
.pe-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform var(--t-base) var(--spring); }
.pe-switch.on { background: var(--k-gradient-h); border-color: transparent; }
.pe-switch.on::after { transform: translateX(17px); }
/* text color swatches + free picker */
.pe-colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-color { width: 26px; height: 26px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--border-soft); }
.pe-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--k-pink); }
.pe-color-free { position: relative; width: 26px; height: 26px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px dashed var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); }
.pe-color-free svg { width: 14px; height: 14px; stroke-width: 2; }
.pe-color-free input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pe-fontgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pe-fontbtn { height: 40px; border-radius: 9px; cursor: pointer; background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg-secondary); font-size: 15px; font-weight: 700; transition: all var(--t-fast); }
.pe-fontbtn:hover { color: var(--fg); }
.pe-fontbtn.on { color: var(--fg); border-color: var(--k-pink); box-shadow: 0 0 0 1px rgba(233, 78, 139, 0.4); }

/* stickers */
.pe-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.pe-emoji { aspect-ratio: 1/1; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-tint-light); cursor: pointer; font-size: 19px; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); }
.pe-emoji:hover { background: var(--surface-tint); transform: translateY(-2px) scale(1.08); border-color: rgba(185, 104, 199, 0.4); }
.pe-emoji:active { transform: scale(0.92); }
.pe-hint { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--fg-muted); line-height: 1.4; }
.pe-hint svg { width: 14px; height: 14px; stroke-width: 2; flex: 0 0 auto; margin-top: 1px; }

/* frame / badge option list */
.pe-optlist { display: flex; flex-direction: column; gap: 8px; }
.pe-opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; cursor: pointer; background: var(--surface-tint-light); border: 1px solid var(--border-soft); border-radius: 12px; transition: all var(--t-fast); }
.pe-opt:hover { border-color: rgba(185, 104, 199, 0.4); }
.pe-opt .pv { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; position: relative; overflow: hidden; background: linear-gradient(135deg, #2D1B4E, #5B8DEF); }
.pe-opt .pv.frame { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(233, 78, 139, 0.6); }
.pe-opt .pv.badge { display: flex; align-items: flex-start; padding: 4px; }
.pe-opt .pv.badge i { width: 12px; height: 12px; border-radius: 4px; background: var(--k-gradient); }
.pe-opt .pv.none { background: repeating-linear-gradient(45deg, rgba(128, 128, 128, 0.14) 0 6px, transparent 6px 12px); }
.pe-opt .tx { flex: 1 1 auto; }
.pe-opt .tx .nm { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.pe-opt .tx .ds { font-size: 11px; color: var(--fg-muted); margin-top: 1px; }
.pe-opt .rd { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; transition: all var(--t-fast); }
.pe-opt.on { border-color: transparent; background: linear-gradient(var(--bg-elev-1), var(--bg-elev-1)) padding-box, linear-gradient(135deg, rgba(91, 141, 239, 0.5), rgba(233, 78, 139, 0.5)) border-box; }
.pe-opt.on .rd { border-color: var(--k-pink); background: radial-gradient(circle, var(--k-pink) 42%, transparent 46%); }

/* ===================== Footer ===================== */
.pe-foot { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--border-soft); }
.pe-foot .pe-note { font-size: 11.5px; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 7px; }
.pe-foot .pe-note svg { width: 14px; height: 14px; stroke-width: 2; }
.pe-foot .pe-spacer { flex: 1 1 auto; }
.pe-cta {
  height: 40px; padding: 0 22px; border-radius: 9999px; cursor: pointer; border: 0;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: #fff;
  background: var(--k-gradient-h); box-shadow: 0 8px 20px rgba(233, 78, 139, 0.32);
  display: inline-flex; align-items: center; gap: 8px; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.pe-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(233, 78, 139, 0.4); }
.pe-cta:active { transform: translateY(0); }
.pe-cta svg { width: 16px; height: 16px; stroke-width: 2.4; }
.pe-cancel { height: 40px; padding: 0 18px; border-radius: 9999px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg-secondary); transition: all var(--t-fast); }
.pe-cancel:hover { color: var(--fg); background: var(--surface-tint); }

/* responsive: stack on narrow screens */
@media (max-width: 940px) {
  .pe-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .pe-ctrl-col { border-top: 1px solid var(--border-soft); max-height: 44%; }
  .pe-panel { max-height: none; }
}