/* ============================================================
   TOPOST v3 — Light theme + Figma-style canvas interaction
   Desktop : dark canvas + white sidebar (tabs + accordion)
   Mobile  : dark canvas + white bottom sheet
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{overscroll-behavior:none;height:100%;font-family:'Inter',sans-serif;background:#e8edf8;}

/* ── ROOT ── */
.pb-app{display:flex;flex-direction:row;height:100dvh;overflow:hidden;}

/* ── CANVAS ── */
.pb-canvas{
  flex:1;min-width:0;position:relative;overflow:hidden;
  background:#1a1a2e;
  background-image:radial-gradient(ellipse at 50% 40%,#1e1e38 0%,#0f0f1e 70%);
  cursor:default;user-select:none;
  touch-action:none;
}
.pb-canvas.panning{cursor:grabbing;}
.pb-canvas.space-held{cursor:grab;}
.pb-canvas::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:26px 26px;pointer-events:none;z-index:0;
}

/* ── VIEWPORT — the panning/zooming container ── */
.pb-viewport{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:1;
}
.pb-viewport-inner{
  /* transform set by JS: translate(x,y) scale(s) */
  will-change:transform;
  pointer-events:none;
  transform-origin:center center;
}
.pb-poster{
  position:relative;border-radius:12px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.07);
  flex-shrink:0;pointer-events:none;
}

/* ── ZOOM BADGE ── */
.pb-zoom-badge{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.7);font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:20px;letter-spacing:0.5px;
  pointer-events:none;z-index:20;white-space:nowrap;
  transition:opacity 0.3s;
}
.pb-zoom-badge.hidden{opacity:0;}

/* ── ZOOM HINT ── */
.pb-hint{
  position:absolute;top:50px;left:50%;transform:translateX(-50%);
  font-size:10px;color:rgba(255,255,255,0.25);font-style:italic;
  pointer-events:none;z-index:20;white-space:nowrap;
  letter-spacing:0.3px;
}

/* ── TOP BAR ── */
.pb-topbar{
  position:absolute;top:0;left:0;right:0;height:44px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;z-index:30;
  background:linear-gradient(to bottom,rgba(15,15,30,0.96) 0%,transparent 100%);
}
.pb-topbar-left{display:flex;align-items:center;gap:10px;}
.pb-logo-badge{
  width:30px;height:30px;
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;box-shadow:0 2px 12px rgba(108,92,231,0.45);flex-shrink:0;
}
.pb-app-name{font-weight:800;font-size:15px;color:#fff;letter-spacing:-0.3px;}
.pb-autosave{
  font-size:10px;color:rgba(255,255,255,0.5);
  padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);
}
.pb-topbar-right{display:flex;align-items:center;gap:8px;}
.btn-export{
  padding:7px 18px;background:linear-gradient(135deg,#6C5CE7,#a855f7);
  color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:700;
  cursor:pointer;box-shadow:0 2px 14px rgba(108,92,231,0.4);transition:all 0.2s;
}
.btn-export:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,92,231,0.55);}
.btn-export:disabled{opacity:0.6;cursor:not-allowed;}
.btn-new{
  padding:6px 13px;background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.7);border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;
}
.btn-new:hover{background:rgba(255,255,255,0.18);color:#fff;}

/* ── FORMAT PILL ── */
.pb-formatbar{
  position:absolute;top:44px;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;
  background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;padding:3px;z-index:25;
}
.fmt-btn{
  padding:4px 12px;border-radius:16px;border:none;
  background:transparent;color:rgba(255,255,255,0.45);
  font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.fmt-btn.active{
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  color:#fff;box-shadow:0 2px 10px rgba(108,92,231,0.4);
}

/* ── SIDEBAR (WHITE) ── */
.pb-sidebar{
  width:280px;min-width:280px;max-width:280px;
  height:100%;background:#fff;
  border-left:1.5px solid #e0e8f5;
  display:flex;flex-direction:column;flex-shrink:0;z-index:30;
}

/* ── TAB BAR ── */
.pb-tab-bar{
  display:flex;flex-direction:row;
  border-bottom:2px solid #e8ecf4;
  background:#fff;flex-shrink:0;
}
.pb-tab-btn{
  flex:1;padding:10px 4px 8px;
  border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#aaa;
  letter-spacing:0.4px;text-transform:uppercase;transition:all 0.15s;position:relative;
}
.pb-tab-btn:hover{color:#555;}
.pb-tab-btn.active{color:#4F8EF7;}
.pb-tab-btn.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:2px;background:#4F8EF7;border-radius:2px 2px 0 0;
}
.pb-tab-icon{font-size:18px;line-height:1;}

/* ── PANEL SCROLL ── */
.pb-panel-scroll{
  flex:1;overflow-y:auto;padding:10px 14px 40px;
  scrollbar-width:thin;scrollbar-color:#dde3f0 transparent;
  touch-action:pan-y;
}
.pb-panel-scroll::-webkit-scrollbar{width:4px;}
.pb-panel-scroll::-webkit-scrollbar-thumb{background:#dde3f0;border-radius:2px;}

/* ── COPYRIGHT FOOTER ── */
.pb-copyright{
  flex-shrink:0;
  padding:8px 14px;
  border-top:1px solid #e8ecf4;
  background:#f8faff;
  text-align:center;
  font-size:10px;
  color:#aab2c8;
  letter-spacing:0.2px;
  line-height:1.5;
}

/* ── ACCORDION SECTIONS ── */
.acc-group{border-bottom:1px solid #eef1f8;margin-bottom:0;}
.acc-header{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;cursor:pointer;padding:11px 2px;
  transition:background 0.1s;
}
.acc-header:hover{background:#f8faff;}
.acc-title{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:12px;color:#333;
  letter-spacing:0.2px;
}
.acc-title-icon{font-size:15px;}
.acc-chevron{
  font-size:10px;color:#aaa;transition:transform 0.2s;line-height:1;
  display:inline-block;margin-right:2px;
}
.acc-chevron.open{transform:rotate(180deg);}
.acc-body{
  padding:0 2px 10px;
  animation:accOpen 0.18s ease;
}
@keyframes accOpen{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ── CONTROLS (light) ── */
.subsection{background:#f8faff;border:1.5px solid #e0e8f5;border-radius:10px;padding:10px;margin-top:6px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mini-label{font-weight:700;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;margin:8px 0 4px;}
.field-label{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px;margin-top:14px;}
.reset-btn{color:#e74c3c;font-weight:700;font-size:11px;background:none;border:none;cursor:pointer;margin-top:6px;display:block;}
.slider-row{margin-bottom:14px;}
.slider-label-row{display:flex;justify-content:space-between;margin-bottom:4px;}
.slider-lbl{font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.8px;}
.slider-val{font-size:11px;color:#4F8EF7;font-weight:700;}
@media(max-width:768px){
  .slider-row{margin-bottom:20px;}
  .field-label{margin-top:18px;}
}
/* ── CUSTOM SAFE SLIDER (mobile-safe knob-only drag) ── */
/* The native input is hidden; we render our own track + thumb */
.kp-slider-wrap{
  position:relative; width:100%; height:36px;
  display:flex; align-items:center;
  touch-action:none; /* prevent scroll steal during drag */
  cursor:pointer;
}
/* Filled track (left of thumb) */
.kp-slider-track{
  position:absolute; left:0; right:0; height:4px;
  background:#dde3f0; border-radius:2px;
  pointer-events:none; /* track itself never receives touch */
}
.kp-slider-fill{
  position:absolute; left:0; height:4px;
  background:#4F8EF7; border-radius:2px;
  pointer-events:none;
}
/* The draggable thumb */
.kp-slider-thumb{
  position:absolute;
  width:18px; height:18px;
  background:#fff;
  border:2.5px solid #4F8EF7;
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 1px 6px rgba(79,142,247,0.35);
  /* Large invisible touch target around the thumb */
  cursor:grab;
  z-index:2;
  transition:box-shadow 0.12s, transform 0.06s;
}
.kp-slider-thumb:active{ cursor:grabbing; box-shadow:0 2px 12px rgba(79,142,247,0.55); transform:translateX(-50%) scale(1.18); }
/* On mobile — even bigger hit area via padding trick using pseudo-element */
@media(max-width:768px){
  .kp-slider-wrap{ height:44px; }
  .kp-slider-thumb{
    width:22px; height:22px;
    border-width:3px;
  }
  .kp-slider-thumb::before{
    content:'';
    position:absolute;
    inset:-14px; /* 14px extra tap area in every direction */
    border-radius:50%;
  }
}
/* Fallback: keep native range for non-JS edge cases, but visually hidden */
.kp-slider-native{
  position:absolute; opacity:0; width:100%; height:100%;
  pointer-events:none; margin:0;
}
textarea{width:100%;border:1.5px solid #dde3f0;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;min-height:70px;color:#333;outline:none;transition:border 0.15s;background:#fff;}
textarea:focus{border-color:#4F8EF7;}
input[type="text"]{width:100%;border:1.5px solid #dde3f0;border-radius:8px;padding:8px 10px;font-size:13px;color:#333;outline:none;transition:border 0.15s;background:#fff;}
input[type="text"]:focus{border-color:#4F8EF7;}
.align-btns{display:flex;gap:4px;margin-left:auto;}
.align-btn{width:30px;height:30px;border:1.5px solid #dde3f0;border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all 0.15s;color:#666;}
.align-btn.active{background:#4F8EF7;border-color:#4F8EF7;color:#fff;}

/* Bullet picker */
.bullet-picker{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.bullet-btn{
  height:32px;min-width:36px;padding:0 10px;
  border:1.5px solid #dde3f0;border-radius:8px;
  background:#f8faff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#555;
  transition:all 0.15s;white-space:nowrap;
  font-family:'Inter',sans-serif;
  letter-spacing:0.5px;
}
.bullet-btn:hover{border-color:#a855f7;color:#7c3aed;background:#f5f0ff;}
.bullet-btn.active{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 2px 8px rgba(124,58,237,0.3);}

/* Per-line bullet toggle list */
.bullet-lines-list{
  display:flex;flex-direction:column;gap:4px;
  margin-top:8px;
  max-height:180px;overflow-y:auto;
  border:1.5px solid #eef1f8;border-radius:10px;
  padding:6px;
  background:#f8faff;
}
.bullet-line-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;border-radius:7px;
  transition:background 0.12s;
  cursor:pointer;
}
.bullet-line-row:hover{background:#eef1fb;}
.bullet-line-toggle{
  width:22px;height:22px;min-width:22px;
  border:1.5px solid #c8d0e8;border-radius:6px;
  background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
  color:#a855f7;transition:all 0.13s;
  flex-shrink:0;
}
.bullet-line-toggle.on{
  background:#7c3aed;border-color:#7c3aed;color:#fff;
  box-shadow:0 1px 6px rgba(124,58,237,0.35);
}
.bullet-line-text{
  font-size:12px;color:#444;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
  font-family:'Inter',sans-serif;
}
.bullet-line-text.bulleted{color:#7c3aed;font-weight:600;}
.bullet-lines-empty{
  font-size:11px;color:#aaa;text-align:center;padding:8px 0;
  font-style:italic;
}

/* ── ADD ELEMENTS CARDS ── */
.add-elements-header{
  font-size:10px;font-weight:800;color:#6b7280;
  text-transform:uppercase;letter-spacing:1.2px;
  padding:10px 2px 6px;display:flex;align-items:center;
  justify-content:space-between;
}
.add-elements-grid{display:flex;flex-direction:column;gap:7px;margin-bottom:10px;}
.element-card{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:10px;cursor:pointer;
  border:1.5px solid #e0e6f0;background:#fff;
  transition:all 0.15s;user-select:none;
}
.element-card:hover{border-color:#4F8EF7;background:#f0f5ff;}
.element-card.active{
  border-color:#4F8EF7;
  background:linear-gradient(135deg,#1a1a2e 0%,#1e1e38 100%);
  box-shadow:0 2px 12px rgba(79,142,247,0.25);
}
.element-card-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}
.element-card:not(.active) .element-card-icon{
  background:#f0f4ff;border-color:#dde3f0;
}
.element-card-label{
  font-size:13px;font-weight:700;
  color:#1f2937;flex:1;
}
.element-card.active .element-card-label{color:#fff;}
.element-card-check{
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;flex-shrink:0;
  background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.5);
  transition:all 0.15s;
}
.element-card.active .element-card-check{
  background:#4F8EF7;color:#fff;
}
.element-panel{
  border:1.5px solid #e0e8f5;border-radius:10px;
  background:#f8faff;padding:12px;margin-bottom:8px;
  animation:accOpen 0.18s ease;
}
.element-panel-title{
  font-size:10px;font-weight:800;color:#4F8EF7;
  text-transform:uppercase;letter-spacing:0.8px;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
/* ── TEXT MODE TOGGLE ── */
.text-mode-toggle{
  display:flex; align-items:center; background:#f0f2f8;
  border-radius:10px; padding:3px; gap:2px; margin-bottom:12px;
  border:1.5px solid #e0e6f0;
}
.text-mode-btn{
  flex:1; padding:7px 10px; border-radius:8px; border:none;
  font-size:11px; font-weight:800; cursor:pointer;
  transition:all 0.18s; letter-spacing:0.3px;
  background:transparent; color:#888;
}
.text-mode-btn.active{
  background:#fff;
  color:#1a1a2e;
  box-shadow:0 1px 6px rgba(0,0,0,0.12);
}
.text-mode-btn.active.pro{
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  color:#fff;
  box-shadow:0 2px 10px rgba(108,92,231,0.35);
}
.text-mode-badge{
  display:inline-block; font-size:8px; font-weight:900;
  background:rgba(255,255,255,0.25); color:rgba(255,255,255,0.9);
  padding:1px 5px; border-radius:4px; margin-left:5px;
  letter-spacing:0.5px; vertical-align:middle;
}
.text-mode-btn:not(.active) .text-mode-badge{
  background:#e0e6f0; color:#888;
}

/* ── FREE TEXT ELEMENTS on poster canvas ── */
.txt-el{
  position:absolute; cursor:grab; user-select:none;
  -webkit-user-select:none;
  /* CRITICAL: touch-action:none prevents browser scroll/zoom during drag */
  touch-action:none;
  /* Ensure minimum touch target height */
  min-height:44px;
}
.txt-el.selected{ outline:2px solid rgba(79,142,247,0.9); outline-offset:4px; border-radius:2px; }
.txt-el.editing{
  outline:2px solid rgba(168,85,247,0.9); outline-offset:4px; border-radius:2px;
  cursor:text;
  /* While editing, ensure the element itself doesn't intercept pointer events
     so clicks inside the contenteditable reach the text node correctly */
  user-select:text; -webkit-user-select:text;
}
/* The contenteditable child inside an editing element must be fully interactive */
.txt-el.editing [contenteditable="true"]{
  cursor:text;
  user-select:text; -webkit-user-select:text;
  /* Allow pointer events to reach the text for cursor positioning */
  pointer-events:all;
}

/* ── RESIZE HANDLES ── */
/* Yellow side handles — control wrap width (minimum 44px touch target via padding) */
.txt-el-handle-side{
  position:absolute; width:14px; height:44px; border-radius:7px;
  background:#FFD600; border:2px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,0.45);
  top:50%; transform:translateY(-50%);
  cursor:ew-resize; touch-action:none; pointer-events:all; z-index:60;
  transition:opacity 0.15s;
  /* Extended invisible touch area */
}
.txt-el-handle-side::before{
  content:''; position:absolute;
  inset:-8px -14px; /* extend tap area beyond visual bounds */
}
.txt-el-handle-side.left { left:-12px; }
.txt-el-handle-side.right{ right:-12px; }
.txt-el-handle-side:hover{ background:#FFEE00; }
/* Red corner handles — control font scale (20px visual + extended hit area) */
.txt-el-handle-corner{
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:#ef4444; border:2.5px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,0.5);
  touch-action:none; pointer-events:all; z-index:61;
  transition:opacity 0.15s;
}
.txt-el-handle-corner::before{
  content:''; position:absolute;
  inset:-12px; border-radius:50%; /* 44px total tap target */
}
.txt-el-handle-corner.tl{ top:-10px;  left:-10px;  cursor:nwse-resize; }
.txt-el-handle-corner.tr{ top:-10px;  right:-10px; cursor:nesw-resize; }
.txt-el-handle-corner.bl{ bottom:-10px; left:-10px;  cursor:nesw-resize; }
.txt-el-handle-corner.br{ bottom:-10px; right:-10px; cursor:nwse-resize; }
.txt-el-handle-corner:hover{ background:#dc2626; }
/* Logo resize handles in Pro Mode (20px visual + extended hit area) */
.logo-resize-handle{
  position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.35);
  touch-action:none; pointer-events:all; z-index:70;
  transition: transform 0.1s;
}
.logo-resize-handle::before{
  content:''; position:absolute;
  inset:-12px; border-radius:50%; /* 44px total tap target */
}
.logo-resize-handle:hover{ transform:scale(1.2); }
.logo-resize-tl{ top:-10px;    left:-10px;  cursor:nwse-resize; }
.logo-resize-tr{ top:-10px;    right:-10px; cursor:nesw-resize; }
.logo-resize-bl{ bottom:-10px; left:-10px;  cursor:nesw-resize; }
.logo-resize-br{ bottom:-10px; right:-10px; cursor:nwse-resize; }

/* ── DIVIDER ELEMENTS on canvas ── */
.div-el{
  position: absolute;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  cursor: grab;
}
.div-el.selected{
  outline: 2px solid rgba(168,85,247,0.9);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Resize handles — 8-point system */
.div-resize-handle{
  position: absolute;
  background: #fff;
  border: 2px solid #a855f7;
  box-shadow: 0 1px 4px rgba(168,85,247,0.4);
  touch-action: none;
  pointer-events: all;
  z-index: 70;
}
/* Extend tap area for mobile */
.div-resize-handle::before{
  content: '';
  position: absolute;
  inset: -8px;
}
.txt-el-label{
  position:absolute; top:-22px; left:0;
  background:#4F8EF7; color:#fff; font-size:9px; font-weight:800;
  padding:2px 8px; border-radius:4px 4px 0 0; white-space:nowrap;
  pointer-events:none; letter-spacing:0.5px; text-transform:uppercase;
}
.txt-el-del{
  position:absolute; top:-22px; right:0;
  background:#ef4444; color:#fff; border:none; cursor:pointer;
  font-size:10px; font-weight:800; padding:2px 7px;
  border-radius:4px 4px 0 0; line-height:1; pointer-events:all;
}
/* ── ELEMENT STYLE PANEL in sidebar ── */
.el-style-panel{
  background:#f0f5ff; border:1.5px solid #c7d9f7;
  border-radius:10px; padding:0; margin-bottom:8px;
  animation:accOpen 0.15s ease; overflow:hidden;
}
/* Accordion section within el-style-panel */
.el-acc-section{ border-bottom:1px solid #dce7f7; }
.el-acc-section:last-child{ border-bottom:none; }
.el-acc-header{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px; background:none; border:none; cursor:pointer;
  font-size:11px; font-weight:800; color:#4F8EF7; text-transform:uppercase;
  letter-spacing:0.7px; text-align:left; transition:background 0.12s;
  -webkit-tap-highlight-color:transparent; min-height:44px;
}
.el-acc-header:hover{ background:rgba(79,142,247,0.06); }
.el-acc-chevron{ font-size:9px; color:#aab; transition:transform 0.18s; flex-shrink:0; }
.el-acc-chevron.open{ transform:rotate(180deg); }
.el-acc-body{
  padding:4px 13px 14px;
  animation:accOpen 0.15s ease;
}
/* Spacing between controls inside acc body — desktop 14px, mobile 20px */
.el-acc-body > * + *{ margin-top:14px; }

.el-style-row{ display:flex; align-items:center; gap:8px; }
.el-style-label{ font-size:10px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; flex-shrink:0; width:52px; }
.el-weight-btn{
  padding:6px 12px; border-radius:7px; border:1.5px solid #dde3f0;
  background:#fff; cursor:pointer; font-size:11px; font-weight:700;
  color:#555; transition:all 0.13s; margin-right:3px;
  min-height:36px; -webkit-tap-highlight-color:transparent;
}
.el-weight-btn.active{ background:#4F8EF7; border-color:#4F8EF7; color:#fff; }
.el-align-btn{
  padding:6px 12px; border-radius:7px; border:1.5px solid #dde3f0;
  background:#fff; cursor:pointer; font-size:12px; color:#555;
  transition:all 0.13s; margin-right:3px;
  min-height:36px; -webkit-tap-highlight-color:transparent;
}
.el-align-btn.active{ background:#4F8EF7; border-color:#4F8EF7; color:#fff; }
.el-list-row{
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-radius:8px; border:1.5px solid #e0e6f0; background:#fff;
  cursor:pointer; margin-bottom:6px; transition:all 0.13s;
  min-height:44px; -webkit-tap-highlight-color:transparent;
}
.el-list-row:hover{ border-color:#4F8EF7; background:#f0f5ff; }
.el-list-row.active{ border-color:#4F8EF7; background:#e8f0ff; }
.el-list-icon{ font-size:13px; width:20px; text-align:center; flex-shrink:0; }
.el-list-text{ flex:1; font-size:12px; font-weight:600; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.el-list-type{ font-size:9px; color:#aaa; font-weight:700; text-transform:uppercase; flex-shrink:0; }
.el-list-del{ background:none; border:none; cursor:pointer; color:#ccc; font-size:14px; padding:0 2px; transition:color 0.13s; flex-shrink:0; }
.el-list-del:hover{ color:#ef4444; }
.el-hint{ font-size:11px; color:#aaa; text-align:center; padding:14px 0; font-style:italic; }
/* Mobile: increase spacing between controls */
@media(max-width:768px){
  .el-acc-body > * + *{ margin-top:20px; }
  .el-acc-header{ min-height:48px; }
  .el-weight-btn{ min-height:40px; padding:7px 14px; }
  .el-align-btn{ min-height:40px; padding:7px 14px; }
}
.theme-swatches{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center;}
.theme-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.15s;}
.theme-swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 3px #4F8EF7;}
.font-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px;}
.font-btn{padding:8px 6px;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;transition:all 0.15s;}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.social-btn{padding:7px 8px;border-radius:7px;border:1.5px solid #dde3f0;background:#fff;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#555;transition:all 0.15s;}
.social-btn.active{border-color:#4F8EF7;background:#EEF4FF;color:#4F8EF7;}
.social-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.divider-style-row{display:flex;gap:5px;margin-bottom:8px;}
.divider-style-btn{padding:5px 10px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;transition:all 0.15s;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f3fa;}
.toggle-label{font-size:12px;font-weight:700;color:#444;display:flex;align-items:center;gap:7px;}
.toggle-label-sub{font-size:10px;color:#aaa;font-weight:400;display:block;margin-top:1px;}
.toggle-switch{position:relative;width:38px;height:22px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:#dde3f0;border-radius:22px;cursor:pointer;transition:background 0.2s;}
.toggle-track::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform 0.2s;box-shadow:0 1px 4px rgba(0,0,0,0.18);}
.toggle-switch input:checked + .toggle-track{background:#4F8EF7;}
.toggle-switch input:checked + .toggle-track::before{transform:translateX(16px);}

.upload-zone:hover{border-color:#4F8EF7;background:#EEF4FF;color:#4F8EF7;}
.upload-zone img{width:100%;max-height:85px;object-fit:contain;border-radius:6px;}

/* ── TEXT CONTAINER — Fixed mode, safe-area constrained ── */
.pb-text-box{
  position:absolute;
  overflow:visible;              /* text grows upward freely — parent safe-area clips bottom */
  word-wrap:break-word;          /* wrap long words inside fixed width — Goal 1 */
  overflow-wrap:break-word;
  white-space:normal;            /* allow wrapping, no overflow scroll */
  /* width/height are set inline from safe-area dims */
  /* transform translate is clamped by JS to safe-area bounds */
  box-sizing:border-box;
}

/* Outer symmetric safe-area container — positions left:SA_H_PX, right mirrors it via width */
.pb-text-box-safe{
  /* position/size set entirely inline from JS geometry — this rule just documents intent */
  box-sizing:border-box;
  pointer-events:none;
}

/* ════════════════════════════════════════════════════
   HELP MODAL — KreatePost in-app help center
   ════════════════════════════════════════════════════ */

/* Help button in topbar */
.btn-help{
  width:30px;height:30px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;
  color:rgba(255,255,255,0.75);
  font-size:14px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.btn-help:hover{
  background:rgba(108,92,231,0.4);
  border-color:#a855f7;
  color:#fff;
  box-shadow:0 0 12px rgba(168,85,247,0.4);
}

/* Overlay backdrop */
.help-backdrop{
  position:fixed;inset:0;z-index:99990;
  background:rgba(5,5,18,0.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  animation:helpFadeIn 0.2s ease forwards;
}
@keyframes helpFadeIn{from{opacity:0;}to{opacity:1;}}

/* Main modal window */
.help-modal{
  position:relative;
  width:100%;max-width:860px;
  max-height:88vh;
  background:linear-gradient(160deg,#0d0d22 0%,#111128 60%,#0d0d1e 100%);
  border:1px solid rgba(168,85,247,0.25);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05),0 30px 80px rgba(0,0,0,0.7),0 0 60px rgba(108,92,231,0.12);
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:helpSlideUp 0.22s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes helpSlideUp{from{opacity:0;transform:translateY(20px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}

/* Modal header */
.help-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.02);
  flex-shrink:0;
}
.help-modal-title{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:800;color:#fff;letter-spacing:-0.3px;
}
.help-modal-title-icon{
  width:28px;height:28px;
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:13px;box-shadow:0 2px 10px rgba(108,92,231,0.4);
}
.help-modal-subtitle{font-size:11px;color:rgba(255,255,255,0.4);font-weight:400;margin-top:1px;}
.help-modal-close{
  width:30px;height:30px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;
  color:rgba(255,255,255,0.6);
  font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;flex-shrink:0;
}
.help-modal-close:hover{
  background:rgba(239,68,68,0.2);
  border-color:rgba(239,68,68,0.5);
  color:#f87171;
  box-shadow:0 0 12px rgba(239,68,68,0.25);
}

/* Body layout */
.help-modal-body{
  display:flex;flex:1;min-height:0;
  overflow:hidden;
}

/* Sidebar */
.help-sidebar{
  width:190px;min-width:190px;
  border-right:1px solid rgba(255,255,255,0.07);
  padding:16px 12px;
  overflow-y:auto;
  flex-shrink:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,85,247,0.3) transparent;
}
.help-sidebar-label{
  font-size:9px;font-weight:800;color:rgba(255,255,255,0.28);
  letter-spacing:1.5px;text-transform:uppercase;
  padding:0 8px;margin-bottom:6px;
}
.help-nav-btn{
  width:100%;text-align:left;
  padding:8px 10px;border-radius:10px;
  background:none;border:none;cursor:pointer;
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,0.5);
  display:flex;align-items:center;gap:8px;
  transition:all 0.15s;margin-bottom:2px;
  white-space:nowrap;
}
.help-nav-btn:hover{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.85);
}
.help-nav-btn.active{
  background:rgba(108,92,231,0.2);
  color:#c4b5fd;
  box-shadow:inset 0 0 0 1px rgba(168,85,247,0.3);
}
.help-nav-btn.active .help-nav-icon{
  filter:drop-shadow(0 0 4px rgba(168,85,247,0.6));
}
.help-nav-icon{font-size:14px;flex-shrink:0;}

/* Content area */
.help-content{
  flex:1;padding:24px 28px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(168,85,247,0.3) transparent;
}
.help-content::-webkit-scrollbar,.help-sidebar::-webkit-scrollbar{width:4px;}
.help-content::-webkit-scrollbar-thumb,.help-sidebar::-webkit-scrollbar-thumb{
  background:rgba(168,85,247,0.3);border-radius:2px;
}

/* Content typography */
.help-section-title{
  font-size:20px;font-weight:800;color:#fff;
  letter-spacing:-0.4px;margin-bottom:6px;
  display:flex;align-items:center;gap:10px;
}
.help-section-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,rgba(108,92,231,0.3),rgba(168,85,247,0.3));
  border:1px solid rgba(168,85,247,0.25);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.help-section-desc{
  font-size:13px;color:rgba(255,255,255,0.45);
  margin-bottom:20px;line-height:1.5;
}
.help-divider{
  height:1px;background:rgba(255,255,255,0.06);
  margin:20px 0;
}

/* Step list */
.help-steps{
  display:flex;flex-direction:column;gap:10px;
  counter-reset:step-counter;
}
.help-step{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  transition:all 0.15s;
}
.help-step:hover{
  background:rgba(108,92,231,0.08);
  border-color:rgba(168,85,247,0.2);
}
.help-step-num{
  width:22px;height:22px;min-width:22px;
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;
  flex-shrink:0;margin-top:1px;
  box-shadow:0 2px 8px rgba(108,92,231,0.4);
}
.help-step-text{
  font-size:13px;color:rgba(255,255,255,0.75);
  line-height:1.5;
}
.help-step-text strong{color:#e2d9ff;font-weight:700;}

/* Layer diagram */
.help-layer-stack{
  display:flex;flex-direction:column;gap:3px;
  margin:12px 0;
}
.help-layer{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  font-size:12px;font-weight:600;
}
.help-layer-dot{
  width:10px;height:10px;border-radius:3px;flex-shrink:0;
}
.help-layer-name{color:rgba(255,255,255,0.8);}
.help-layer-note{font-size:10px;color:rgba(255,255,255,0.35);margin-left:auto;font-weight:400;}
.help-layer-arrow{
  text-align:center;font-size:10px;
  color:rgba(255,255,255,0.2);padding:0;
}

/* Tip cards */
.help-tip{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;
  background:rgba(168,85,247,0.07);
  border:1px solid rgba(168,85,247,0.18);
  border-radius:10px;
  margin-top:10px;
}
.help-tip-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.help-tip-text{font-size:12px;color:rgba(255,255,255,0.65);line-height:1.5;}
.help-tip-text strong{color:#c4b5fd;}

/* Keyboard shortcut */
.help-kbd{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;padding:1px 7px;
  font-size:11px;font-weight:700;color:rgba(255,255,255,0.8);
  font-family:monospace;letter-spacing:0.5px;
}

/* Feature list */
.help-feature{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.help-feature:last-child{border-bottom:none;}
.help-feature-name{
  font-size:13px;font-weight:700;color:#e2d9ff;margin-bottom:3px;
  display:flex;align-items:center;gap:6px;
}
.help-feature-desc{font-size:12px;color:rgba(255,255,255,0.5);line-height:1.5;}

/* Mobile: collapsible nav */
@media(max-width:640px){
  .help-modal{
    max-height:92vh;
    height:92vh;
    border-radius:20px 20px 0 0;
    margin-top:auto;
    align-self:flex-end;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    /* allow child horizontal scroll */
    overflow-x:clip;
  }
  .help-backdrop{padding:0;align-items:flex-end;}
  .help-modal-body{
    flex-direction:column;
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
  }
  .help-modal-header{padding:12px 18px 10px;flex-shrink:0;}
  /* Drag handle pill at top of modal on mobile */
  .help-modal::before{
    content:'';display:block;
    width:36px;height:4px;border-radius:2px;
    background:rgba(255,255,255,0.18);
    margin:10px auto 0;flex-shrink:0;
  }
  .help-sidebar{
    width:100%;min-width:0;
    border-right:none;border-bottom:1px solid rgba(255,255,255,0.07);
    padding:8px 10px;
    display:flex;flex-direction:row;align-items:center;gap:6px;
    overflow-x:auto;overflow-y:hidden;
    flex-shrink:0;
    /* hide scrollbar on mobile nav */
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* prevent sidebar from collapsing */
    min-height:48px;
  }
  .help-sidebar::-webkit-scrollbar{display:none;}
  .help-sidebar-label{display:none;}
  .help-nav-btn{
    /* CRITICAL: override base width:100% so pills don't each fill the full row */
    width:auto !important;
    min-width:fit-content;
    flex-shrink:0;
    flex-grow:0;
    white-space:nowrap;
    padding:7px 12px;
    font-size:11px;
    gap:5px;
    margin-bottom:0;
    border-radius:20px;
  }
  .help-nav-btn.active{
    border-radius:20px;
  }
  .help-content{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:16px 18px 40px;
  }
  .help-section-title{font-size:17px;}
  /* Section content spacing fixes */
  .help-steps{gap:8px;}
  .help-step{padding:10px 12px;}
  .help-layer-stack{margin:10px 0;}
  .help-layer-note{font-size:9px;}
  .help-feature{padding:8px 0;}
  .help-tip{margin-top:8px;}
}

/* ── RESET CANVAS BUTTON ── */
.btn-reset-view{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;
  transition:all 0.15s;position:absolute;bottom:14px;right:14px;z-index:20;
}
.btn-reset-view:hover{background:rgba(255,255,255,0.18);color:#fff;}

/* ── MOBILE ACTION BAR (canvas overlay, mobile only) ── */
/* Slim bar pinned to top of canvas on mobile.
   Uses position:absolute so it overlays the canvas — zero layout cost. */
.pb-mobile-bar{
  display:none; /* hidden on desktop */
}

/* ── FORMAT PANEL ROW (inside sidebar, above scroll) ── */
.pb-format-row{
  display:none; /* shown only on mobile via media query */
}

/* ── MOBILE ≤768px ── */
@media(max-width:768px){
  .pb-app{flex-direction:column;}

  /* ── CANVAS: flex-grow fills ALL available space above the panel.
     min-height:0 is critical — without it flex children refuse to shrink
     below their content size, which is what caused the cramped layout. */
  .pb-canvas{flex:1 1 0;min-height:0;width:100%;}

  /* Hide desktop topbar — replaced by the overlay mobile bar */
  .pb-topbar{display:none!important;}

  /* ── MOBILE ACTION BAR: overlays the top of the canvas, zero layout cost ── */
  .pb-mobile-bar{
    display:flex;
    position:absolute;top:0;left:0;right:0;
    height:44px;z-index:30;
    align-items:center;justify-content:space-between;
    padding:0 12px;
    background:linear-gradient(to bottom,rgba(10,10,25,0.92) 0%,transparent 100%);
    pointer-events:none; /* children re-enable */
  }
  .pb-mobile-bar-left{
    display:flex;align-items:center;gap:8px;pointer-events:auto;
  }
  .pb-mobile-bar-right{
    display:flex;align-items:center;gap:8px;pointer-events:auto;
  }
  /* Re-show btn-new inside mobile bar */
  .pb-mobile-bar .btn-new{
    display:inline-flex;
    padding:5px 12px;font-size:11px;
  }
  .pb-mobile-bar .btn-export{
    padding:5px 14px;font-size:12px;
  }
  .pb-mobile-bar .btn-help{
    display:flex;
    width:26px;height:26px;font-size:12px;
  }
  .pb-mobile-bar .pb-logo-badge{
    width:26px;height:26px;font-size:13px;
    background:linear-gradient(135deg,#6C5CE7,#a855f7);
    border-radius:7px;display:flex;align-items:center;justify-content:center;
    color:#fff;
  }
  .pb-mobile-bar .pb-app-name{font-size:13px;font-weight:800;color:#fff;}
  .pb-mobile-bar .pb-autosave{
    font-size:9px;color:rgba(255,255,255,0.5);
    padding:1px 6px;border-radius:20px;
    background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);
  }

  /* Hide original desktop-only topbar children from layout */
  .pb-topbar .pb-autosave{display:none;}

  /* Hide format pills from canvas on mobile */
  .pb-formatbar{display:none!important;}

  /* ── FORMAT ROW: compact 2×2 pill grid pinned above tab content ── */
  .pb-format-row{
    display:flex;flex-direction:row;gap:5px;
    padding:8px 10px;border-bottom:1.5px solid #eef1f8;
    background:#fff;flex-shrink:0;order:0;
  }
  .pb-format-pill{
    flex:1;padding:6px 2px;border-radius:8px;
    border:1.5px solid #dde3f0;background:#f8faff;
    font-size:10px;font-weight:700;color:#888;cursor:pointer;
    text-align:center;transition:all 0.15s;white-space:nowrap;
    font-family:'Inter',sans-serif;
  }
  .pb-format-pill.active{
    background:#EEF4FF;
    border-color:#4F8EF7;
    color:#4F8EF7;
  }

  /* ── SIDEBAR: collapsed = 48px tab strip; open = uses keyboard-aware CSS var ── */
  .pb-sidebar{
    width:100%!important;min-width:100%!important;max-width:100%!important;
    height:48px;border-left:none;border-top:1.5px solid #e0e8f5;
    transition:height 0.28s cubic-bezier(0.4,0,0.2,1);
    overflow:hidden;flex-shrink:0;flex-direction:column-reverse;
  }
  /* --kp-panel-h is set by JS in the visualViewport handler.
     Falls back to 42vh so the panel still works if JS hasn't run yet. */
  .pb-sidebar.open{
    height: var(--kp-panel-h, 42vh);
    max-height: var(--kp-panel-h, 42vh);
  }

  /* Tab bar: always-visible 48px strip at bottom */
  .pb-tab-bar{
    border-bottom:none;border-top:1px solid #e8ecf4;
    height:48px;min-height:48px;order:2;
  }
  .pb-tab-btn{padding:6px 4px 5px;font-size:9px;}
  .pb-tab-icon{font-size:18px;}
  .pb-tab-btn.active::after{bottom:auto;top:0;border-radius:0 0 2px 2px;}

  /* Drag handle pill - prominent close affordance when panel is open */
  .pb-drag-handle{
    display:flex;justify-content:center;align-items:center;
    height:28px;cursor:pointer;flex-shrink:0;order:3;
    background:#fff;
    border-bottom:1px solid #eef1f8;
    gap:6px;
    color:#8898b8;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.3px;
  }
  .pb-drag-handle::before{
    content:'▼';
    font-size:9px;
    color:#a855f7;
  }
  .pb-drag-handle::after{
    content:'Hide Tools';
    font-size:11px;
    color:#8898b8;
    font-weight:700;
    font-family:'Inter',sans-serif;
  }

  /* ── FLOATING PANEL TOGGLE BUTTON ────────────────────────────────────────
     Visible ONLY when the panel is CLOSED — sits centred just above the 48px
     tab bar so users always have a clear way to reopen their tools.
     When the panel is open the drag-handle pill at the top takes over.   */
  .pb-panel-fab{
    display:flex;
    position:absolute;
    bottom:58px; /* 48px tab bar + 10px gap */
    left:50%;
    transform:translateX(-50%);
    z-index:60;
    align-items:center;
    gap:8px;
    padding:10px 22px 10px 16px;
    background:linear-gradient(135deg,#6C5CE7 0%,#a855f7 100%);
    border:none;
    border-radius:999px;
    box-shadow:0 8px 28px rgba(108,92,231,0.45), 0 2px 8px rgba(0,0,0,0.18);
    cursor:pointer;
    font-size:13px;font-weight:700;
    color:#fff;
    letter-spacing:0.2px;
    white-space:nowrap;
    pointer-events:auto;
    transition:opacity 0.2s ease, transform 0.2s ease, box-shadow 0.15s ease;
  }
  .pb-panel-fab:active{
    box-shadow:0 3px 10px rgba(108,92,231,0.3);
    transform:translateX(-50%) scale(0.95);
  }
  .pb-panel-fab .fab-icon{
    font-size:16px;
    line-height:1;
    flex-shrink:0;
  }
  /* HIDE the FAB when the panel is open — drag handle takes over */
  .pb-panel-fab.panel-open{
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) translateY(12px);
  }

  /* Panel content scroll area */
  .pb-panel-scroll{order:1;flex:1;min-height:0;padding:8px 12px 10px;background:#fff;}
  .pb-sidebar:not(.open) .pb-panel-scroll{display:none;}
  .pb-sidebar:not(.open) .pb-drag-handle{display:none;}

  /* Also hide format row when panel is closed */
  .pb-sidebar:not(.open) .pb-format-row{display:none;}

  /* Tighten upload zones */
  .upload-zone{padding:12px 10px;}

  /* Accordion headers: slightly tighter */
  .acc-header{padding:9px 2px;}

  /* Misc */
  .btn-reset-view{display:none;}
  .pb-hint{display:none;}
  .grid-2{gap:8px;}
}
/* Hide FAB on desktop only */
@media(min-width:769px){ .pb-panel-fab{display:none !important;} }
.pb-drag-handle{display:none;}

/* ══════════════════════════════════════════════════════════════
   PROJECT SAVE / LOAD — KreatePost .kpost file system
   ══════════════════════════════════════════════════════════════ */

/* ── Save / Load buttons (desktop topbar + mobile dropdown) ── */
.btn-save-project{
  padding:6px 13px;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.15s;
  display:inline-flex;align-items:center;gap:5px;
}
.btn-save-project:hover{background:rgba(108,92,231,0.35);border-color:#a855f7;color:#fff;}

/* ── Project file modal backdrop ── */
.kp-proj-backdrop{
  position:fixed;inset:0;z-index:99997;
  background:rgba(5,5,18,0.80);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:helpFadeIn 0.18s ease forwards;
}

/* ── Modal card ── */
.kp-proj-modal{
  position:relative;
  width:100%;max-width:460px;
  background:linear-gradient(160deg,#0e0e24 0%,#12122e 60%,#0d0d20 100%);
  border:1px solid rgba(168,85,247,0.3);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05),
             0 30px 80px rgba(0,0,0,0.7),
             0 0 60px rgba(108,92,231,0.14);
  overflow:hidden;
  animation:helpSlideUp 0.22s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* ── Modal header ── */
.kp-proj-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.02);
}
.kp-proj-title{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:800;color:#fff;letter-spacing:-0.3px;
}
.kp-proj-title-icon{
  width:28px;height:28px;
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;box-shadow:0 2px 10px rgba(108,92,231,0.4);flex-shrink:0;
}
.kp-proj-close{
  width:28px;height:28px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;color:rgba(255,255,255,0.55);
  font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.18s;
}
.kp-proj-close:hover{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.5);color:#f87171;}

/* ── Modal body ── */
.kp-proj-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;}

/* ── Section label ── */
.kp-proj-section-label{
  font-size:9px;font-weight:800;color:rgba(255,255,255,0.3);
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;
}

/* ── Save section ── */
.kp-proj-save-row{
  display:flex;gap:8px;align-items:center;
}
.kp-proj-filename-input,
input[type="text"].kp-proj-filename-input{
  flex:1;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;padding:9px 12px;
  font-size:13px;font-weight:600;color:#e2d9ff;
  outline:none;font-family:'Inter',sans-serif;
  transition:border 0.15s;
  width:auto;
}
.kp-proj-filename-input:focus,
input[type="text"].kp-proj-filename-input:focus{border-color:rgba(168,85,247,0.7);background:rgba(168,85,247,0.12);color:#fff;}
.kp-proj-filename-input::placeholder{color:rgba(255,255,255,0.35);}
.kp-proj-ext-badge{
  font-size:11px;font-weight:700;color:rgba(168,85,247,0.8);
  background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.25);
  border-radius:8px;padding:6px 10px;white-space:nowrap;flex-shrink:0;
}
.kp-proj-save-btn{
  padding:9px 18px;
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  color:#fff;border:none;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 14px rgba(108,92,231,0.4);
  transition:all 0.18s;white-space:nowrap;flex-shrink:0;
}
.kp-proj-save-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,92,231,0.55);}
.kp-proj-save-btn:active{transform:translateY(0);}

/* ── Divider ── */
.kp-proj-divider{
  height:1px;background:rgba(255,255,255,0.06);margin:2px 0;
}

/* ── Load section ── */
.kp-proj-load-drop{
  border:2px dashed rgba(168,85,247,0.3);
  border-radius:12px;
  background:rgba(168,85,247,0.04);
  padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;cursor:pointer;transition:all 0.2s;
  text-align:center;
  position:relative;
}
.kp-proj-load-drop:hover,
.kp-proj-load-drop.drag-over{
  border-color:rgba(168,85,247,0.7);
  background:rgba(168,85,247,0.1);
}
.kp-proj-load-drop input[type="file"]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.kp-proj-drop-icon{font-size:26px;line-height:1;}
.kp-proj-drop-label{
  font-size:13px;font-weight:700;color:rgba(255,255,255,0.75);
}
.kp-proj-drop-sub{
  font-size:11px;color:rgba(255,255,255,0.3);margin-top:2px;
}

/* ── Recent projects list ── */
.kp-proj-recent-list{
  display:flex;flex-direction:column;gap:5px;
  max-height:160px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(168,85,247,0.3) transparent;
}
.kp-proj-recent-list::-webkit-scrollbar{width:3px;}
.kp-proj-recent-list::-webkit-scrollbar-thumb{background:rgba(168,85,247,0.3);border-radius:2px;}
.kp-proj-recent-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;transition:all 0.14s;
}
.kp-proj-recent-item:hover{
  background:rgba(108,92,231,0.12);
  border-color:rgba(168,85,247,0.3);
}
.kp-proj-recent-icon{font-size:16px;flex-shrink:0;}
.kp-proj-recent-info{flex:1;min-width:0;}
.kp-proj-recent-name{
  font-size:12px;font-weight:700;color:rgba(255,255,255,0.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kp-proj-recent-meta{
  font-size:10px;color:rgba(255,255,255,0.3);margin-top:1px;
}
.kp-proj-recent-load{
  font-size:10px;font-weight:700;color:#a855f7;
  background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.25);
  border-radius:6px;padding:4px 8px;cursor:pointer;transition:all 0.13s;flex-shrink:0;
}
.kp-proj-recent-load:hover{background:rgba(168,85,247,0.25);}
.kp-proj-recent-del{
  font-size:12px;color:rgba(255,255,255,0.2);
  background:none;border:none;cursor:pointer;
  padding:3px 5px;transition:color 0.13s;flex-shrink:0;
}
.kp-proj-recent-del:hover{color:#ef4444;}
.kp-proj-empty{
  font-size:11px;color:rgba(255,255,255,0.25);
  text-align:center;padding:12px 0;font-style:italic;
}

/* ── Toast notification ── */
.kp-proj-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  color:#fff;font-size:13px;font-weight:700;
  padding:10px 22px;border-radius:30px;
  box-shadow:0 4px 24px rgba(108,92,231,0.5);
  z-index:999999;white-space:nowrap;
  animation:toastIn 0.3s ease forwards;
  pointer-events:none;
}

/* Mobile: full-width modal */
@media(max-width:520px){
  .kp-proj-backdrop{padding:0;align-items:flex-end;}
  .kp-proj-modal{
    max-width:100%;border-radius:20px 20px 0 0;
    max-height:88vh;overflow-y:auto;
  }
  .kp-proj-save-row{flex-wrap:wrap;}
  .kp-proj-filename-input{width:100%;}
}
  
/* ============================================================
   KREATEPOST SPLASH SCREEN
   — First-time-only, pure CSS animations, zero-dep
   — Injected above app; removed from DOM after animation
   ============================================================ */

/* ── Splash container ── */
#kp-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #5b21b6 0%, #3b0764 45%, #1e0338 100%);
  pointer-events: all;
  overflow: hidden;
  /* Fade-out class added by JS */
  transition: opacity 0.55s ease;
}
#kp-splash.kp-hiding {
  opacity: 0;
  pointer-events: none;
}

/* ── Subtle noise texture overlay ── */
#kp-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(168,85,247,0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(124,58,237,0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Logo wrapper ── */
#kp-splash-logo {
  width: clamp(110px, 28vmin, 170px);
  height: clamp(110px, 28vmin, 170px);
  margin-bottom: 28px;
  animation: kpLogoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#kp-splash-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 26%;
  mix-blend-mode: lighten;
}

/* ── App name ── */
#kp-splash-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 6vmin, 40px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  animation: kpTextIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
  margin-bottom: 8px;
}

/* ── Tagline ── */
#kp-splash-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 2.5vmin, 15px);
  font-weight: 400;
  color: rgba(216, 180, 254, 0.85);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: kpTextIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
  margin-bottom: 52px;
}

/* ── Loading dots ── */
#kp-splash-loader {
  display: flex;
  gap: 8px;
  animation: kpTextIn 0.5s ease 0.85s both;
}
.kp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(216, 180, 254, 0.6);
}
.kp-dot:nth-child(1) { animation: kpDotPulse 1.1s ease-in-out 0.9s infinite; }
.kp-dot:nth-child(2) { animation: kpDotPulse 1.1s ease-in-out 1.1s infinite; }
.kp-dot:nth-child(3) { animation: kpDotPulse 1.1s ease-in-out 1.3s infinite; }

/* ── Version badge ── */
#kp-splash-version {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 1px;
  margin-top: 20px;
  animation: kpTextIn 0.5s ease 1s both;
}

/* ── Keyframes ── */
@keyframes kpLogoIn {
  from { opacity: 0; transform: scale(0.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes kpTextIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes kpDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1.2);  }
}

/* ══════════════════════════════════════════
   AI SUMMARY TOOL — scoped styles
   ══════════════════════════════════════════ */
.aiSummary_section{margin-top:14px;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fafbff;}
.aiSummary_header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;cursor:pointer;background:linear-gradient(90deg,#f5f0ff,#eef2ff);border-bottom:1px solid #e2e8f0;user-select:none;}
.aiSummary_header:hover{background:linear-gradient(90deg,#ede9fe,#e0e7ff);}
.aiSummary_title{font-size:12px;font-weight:700;color:#5b21b6;text-transform:uppercase;letter-spacing:0.7px;}
.aiSummary_chevron{font-size:11px;color:#7c3aed;transition:transform 0.2s;}
.aiSummary_chevron.open{transform:rotate(180deg);}
.aiSummary_body{padding:12px;display:flex;flex-direction:column;gap:10px;}
.aiSummary_label{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:3px;}
.aiSummary_textarea{width:100%;border:1.5px solid #dde3f0;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;min-height:70px;color:#333;outline:none;transition:border 0.15s;background:#fff;}
.aiSummary_textarea:focus{border-color:#7c3aed;}
.aiSummary_modeRow{display:flex;gap:6px;}
.aiSummary_modeBtn{flex:1;padding:7px 4px;font-size:11px;font-weight:700;border-radius:7px;border:1.5px solid #dde3f0;background:#fff;color:#555;cursor:pointer;transition:all 0.15s;text-align:center;}
.aiSummary_modeBtn.active{border-color:#7c3aed;background:#7c3aed;color:#fff;}
.aiSummary_sliderRow{display:flex;align-items:center;gap:8px;}
.aiSummary_slider{flex:1;accent-color:#7c3aed;}
/* AI inline sliders — use same custom wrap on mobile */
.kp-slider-wrap.kp-accent-purple .kp-slider-fill{ background:#7c3aed; }
.kp-slider-wrap.kp-accent-purple .kp-slider-thumb{ border-color:#7c3aed; box-shadow:0 1px 6px rgba(124,58,237,0.35); }
.kp-slider-wrap.kp-accent-orange .kp-slider-fill{ background:#d97706; }
.kp-slider-wrap.kp-accent-orange .kp-slider-thumb{ border-color:#d97706; box-shadow:0 1px 6px rgba(217,119,6,0.35); }
.aiSummary_sliderVal{font-size:12px;font-weight:700;color:#5b21b6;min-width:80px;text-align:right;white-space:nowrap;}
.aiSummary_unitToggle{display:flex;gap:0;border:1.5px solid #dde3f0;border-radius:7px;overflow:hidden;flex-shrink:0;}
.aiSummary_unitBtn{padding:3px 9px;font-size:11px;font-weight:700;border:none;background:#fff;color:#888;cursor:pointer;transition:all 0.15s;line-height:1.6;}
.aiSummary_unitBtn.active{background:#7c3aed;color:#fff;}
.aiSummary_generateBtn{width:100%;padding:9px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity 0.15s;}
.aiSummary_generateBtn:disabled{opacity:0.55;cursor:not-allowed;}
.aiSummary_loader{text-align:center;font-size:12px;color:#7c3aed;padding:6px;animation:aiSummary_pulse 1s infinite;}
@keyframes aiSummary_pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.aiSummary_outputBox{width:100%;border:1.5px solid #dde3f0;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;min-height:60px;color:#333;background:#f8f9ff;outline:none;}
.aiSummary_error{font-size:12px;color:#dc2626;background:#fef2f2;border-radius:6px;padding:7px 10px;}
.aiSummary_actionRow{display:flex;gap:6px;}
.aiSummary_actionBtn{flex:1;padding:7px 4px;font-size:11px;font-weight:700;border-radius:7px;border:1.5px solid #dde3f0;background:#fff;color:#444;cursor:pointer;transition:all 0.15s;}
.aiSummary_actionBtn:hover{border-color:#7c3aed;color:#7c3aed;}
.aiSummary_useBtn{background:linear-gradient(135deg,#059669,#047857);color:#fff;border-color:#059669;}
.aiSummary_useBtn:hover{opacity:0.88;color:#fff;}

/* ── AI HEADING GENERATOR ── */
.aiHeading_section{margin-top:10px;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fafbff;}
.aiHeading_header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;cursor:pointer;background:linear-gradient(90deg,#fff7ed,#fef3c7);border-bottom:1px solid #e2e8f0;user-select:none;}
.aiHeading_header:hover{background:linear-gradient(90deg,#ffedd5,#fde68a);}
.aiHeading_title{font-size:12px;font-weight:700;color:#92400e;text-transform:uppercase;letter-spacing:0.7px;}
.aiHeading_chevron{font-size:11px;color:#d97706;transition:transform 0.2s;}
.aiHeading_chevron.open{transform:rotate(180deg);}
.aiHeading_body{padding:12px;display:flex;flex-direction:column;gap:10px;}
.aiHeading_label{font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:3px;}
.aiHeading_textarea{width:100%;border:1.5px solid #dde3f0;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;min-height:54px;color:#333;outline:none;transition:border 0.15s;background:#fff;}
.aiHeading_textarea:focus{border-color:#d97706;}
.aiHeading_toneRow{display:flex;gap:5px;flex-wrap:wrap;}
.aiHeading_toneBtn{padding:5px 10px;font-size:11px;font-weight:700;border-radius:20px;border:1.5px solid #dde3f0;background:#fff;color:#555;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.aiHeading_toneBtn.active{border-color:#d97706;background:#d97706;color:#fff;}
.aiHeading_countRow{display:flex;align-items:center;gap:8px;}
.aiHeading_countSlider{flex:1;accent-color:#d97706;}
.aiHeading_countVal{font-size:12px;font-weight:700;color:#92400e;min-width:60px;text-align:right;white-space:nowrap;}
.aiHeading_generateBtn{width:100%;padding:9px;background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity 0.15s;}
.aiHeading_generateBtn:disabled{opacity:0.55;cursor:not-allowed;}
.aiHeading_loader{text-align:center;font-size:12px;color:#d97706;padding:6px;animation:aiSummary_pulse 1s infinite;}
.aiHeading_error{font-size:12px;color:#dc2626;background:#fef2f2;border-radius:6px;padding:7px 10px;}
.aiHeading_list{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.aiHeading_item{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;padding:8px 10px;transition:border 0.15s;}
.aiHeading_item:hover{border-color:#d97706;}
.aiHeading_itemText{flex:1;font-size:13px;color:#1f2937;font-weight:500;line-height:1.4;}
.aiHeading_useBtn{padding:5px 10px;font-size:11px;font-weight:700;border-radius:6px;border:none;background:linear-gradient(135deg,#059669,#047857);color:#fff;cursor:pointer;flex-shrink:0;transition:opacity 0.15s;}
.aiHeading_useBtn:hover{opacity:0.85;}
.aiHeading_limitMsg{font-size:12px;color:#b45309;background:#fef3c7;border-radius:6px;padding:7px 10px;text-align:center;font-weight:600;}
.aiSummary_limitMsg{font-size:12px;color:#b45309;background:#fffbeb;border-radius:6px;padding:7px 10px;text-align:center;}

/* ── TEMPLATES ── */
.tpl-gallery-overlay{ animation:helpFadeIn 0.2s ease forwards; }

/* ── UNDO/REDO buttons in topbar ── */
.btn-help[title*="Undo"]:hover, .btn-help[title*="Redo"]:hover {
  background:rgba(108,92,231,0.35);
  border-color:#a855f7;
  color:#fff;
}

/* ══════════════════════════════════════════════════════════════
   IMAGE ADJUSTMENTS PANEL
   Scoped under .img-adj-* — zero collision risk with other styles
   ══════════════════════════════════════════════════════════════ */
.img-adj-panel{
  background:linear-gradient(135deg,#f0f5ff,#f8faff);
  border:1.5px solid #c7d9f7;
  border-radius:10px; padding:12px; margin-top:8px;
  animation:accOpen 0.15s ease;
}
.img-adj-title{
  font-size:10px; font-weight:800; color:#4F8EF7;
  text-transform:uppercase; letter-spacing:0.8px;
  margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.img-adj-reset{
  margin-left:auto; font-size:10px; font-weight:700;
  color:#ef4444; background:none; border:none; cursor:pointer;
  padding:2px 6px; border-radius:4px; transition:background 0.12s;
  white-space:nowrap;
}
.img-adj-reset:hover{ background:#fef2f2; }
.img-adj-overlay-row{
  display:flex; align-items:center; gap:8px; margin-top:4px;
}
.img-adj-overlay-swatch{
  width:28px; height:28px; border-radius:6px;
  border:2px solid #dde3f0; cursor:pointer;
  flex-shrink:0; transition:border-color 0.15s;
}
.img-adj-overlay-swatch:hover{ border-color:#4F8EF7; }

/* ── EXPORT SUCCESS TOAST ── */
.export-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#10b981; color:#fff; font-size:13px; font-weight:700;
  padding:10px 24px; border-radius:30px;
  box-shadow:0 4px 20px rgba(16,185,129,0.4);
  z-index:99999; white-space:nowrap;
  animation:toastIn 0.3s ease forwards;
}
@keyframes toastIn{ from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);} }

/* ── UNSPLASH GRID scrollable container ── */
.unsplash-results-grid{ max-height:200px; overflow-y:auto; }

/* ── LIVE SAVE STATUS dot ── */
#pb-save-status{ transition:color 0.3s; }

/* ── MOBILE Tpl button ── */
.pb-mobile-bar .btn-new[title="Templates"]{ padding:5px 10px; font-size:10px; }

/* ── DROPDOWN (⋯ More button) — desktop + mobile ── */

/* The ⋯ trigger button — shared base */
.btn-more{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  color:#fff; font-size:18px; font-weight:700;
  cursor:pointer; pointer-events:auto;
  flex-shrink:0; letter-spacing:-1px;
  transition:background 0.15s;
}
.btn-more:hover{ background:rgba(255,255,255,0.22); }
.btn-more:active{ background:rgba(255,255,255,0.28); }

/* Dropdown panel — shared */
.pb-more-dropdown{
  position:absolute; top:42px; right:0; z-index:9999;
  background:rgba(15,15,30,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:14px;
  padding:6px;
  min-width:180px;
  box-shadow:0 8px 32px rgba(0,0,0,0.55);
  animation:dropdownOpen 0.15s ease;
  pointer-events:auto;
}
@keyframes dropdownOpen{
  from{ opacity:0; transform:scale(0.92) translateY(-6px); }
  to{   opacity:1; transform:scale(1)    translateY(0); }
}

/* Each menu item */
.pb-more-dropdown-item{
  display:flex; align-items:center; gap:10px;
  min-height:42px; padding:0 14px;
  border-radius:10px;
  color:rgba(255,255,255,0.88); font-size:13px; font-weight:500;
  cursor:pointer; border:none;
  background:transparent; width:100%; text-align:left;
  transition:background 0.12s;
  white-space:nowrap;
}
.pb-more-dropdown-item:hover{ background:rgba(108,92,231,0.25); color:#fff; }
.pb-more-dropdown-item:active{ background:rgba(108,92,231,0.40); }
.pb-more-dropdown-item:disabled{ opacity:0.45; cursor:not-allowed; }
.pb-more-dropdown-item .item-icon{ font-size:16px; width:22px; text-align:center; flex-shrink:0; }

/* Divider between groups */
.pb-more-dropdown-divider{
  height:1px; background:rgba(255,255,255,0.08);
  margin:4px 8px;
}

@media(max-width:768px){
  /* Hide Help, Templates, Tpl, New in mobile bar — grouped into dropdown */
  .pb-mobile-bar .btn-grouped-mobile{ display:none !important; }
  .pb-more-dropdown-item{ min-height:48px; font-size:14px; }
}

/* ── PRO MODE element bounds indicator ── */
.txt-el.near-edge{ outline-color: rgba(239,68,68,0.8) !important; }

/* ── PRO MODE DIVIDER ELEMENTS on canvas ── */
.div-el{
  position:absolute; cursor:grab; user-select:none;
  -webkit-user-select:none; touch-action:none;
  /* Minimum grab area: 24px tall so a thin 2px line is still easy to drag */
  min-height:24px;
  display:flex; align-items:center;
  /* Extend the clickable zone vertically without affecting the visual line */
  padding:10px 0;
  box-sizing:content-box;
}
.div-el:active{ cursor:grabbing; }
.div-el.selected{
  outline:2px solid rgba(79,142,247,0.9);
  outline-offset:4px; border-radius:2px;
}
.div-el-label{
  position:absolute; top:-22px; left:0;
  background:#a855f7; color:#fff; font-size:9px; font-weight:800;
  padding:2px 8px; border-radius:4px 4px 0 0; white-space:nowrap;
  pointer-events:none; letter-spacing:0.5px; text-transform:uppercase;
}
.div-el-del{
  position:absolute; top:-22px; right:0;
  background:#ef4444; color:#fff; border:none; cursor:pointer;
  font-size:10px; font-weight:800; padding:2px 7px;
  border-radius:4px 4px 0 0; line-height:1; pointer-events:all;
}

/* ── PRO DIVIDER ELEMENT LIST ── */
.div-list-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  border:1.5px solid #e0e6f0; background:#fff;
  transition:all 0.13s; margin-bottom:4px;
}
.div-list-row:hover{ border-color:#a855f7; background:#f5f0ff; }
.div-list-row.active{ border-color:#a855f7; background:linear-gradient(135deg,#1a1a2e,#1e1e38); }
.div-list-icon{
  width:28px; height:28px; border-radius:7px;
  background:#f0f4ff; border:1px solid #dde3f0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; color:#a855f7; font-weight:900;
}
.div-list-row.active .div-list-icon{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.15); }
.div-list-name{ font-size:13px; font-weight:700; color:#1f2937; flex:1; }
.div-list-row.active .div-list-name{ color:#fff; }
.div-list-del{
  background:none; border:none; cursor:pointer;
  color:#ef4444; font-size:11px; font-weight:800; padding:2px 4px;
  border-radius:4px; transition:background 0.12s;
  flex-shrink:0;
}
.div-list-del:hover{ background:rgba(239,68,68,0.12); }
.div-list-row.active .div-list-del{ color:rgba(239,100,100,0.9); }

/* ── PRO DIVIDER SETTINGS PANEL ── */
.div-style-panel{
  background:#f5f0ff; border:1.5px solid #d8b4fe;
  border-radius:10px; padding:12px; margin-top:8px;
  animation:accOpen 0.15s ease;
}
.div-style-panel-title{
  font-size:10px; font-weight:800; color:#a855f7;
  text-transform:uppercase; letter-spacing:0.8px; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}

/* Add Divider button */
.add-divider-btn{
  width:100%; padding:9px 14px;
  background:linear-gradient(135deg,#6C5CE7,#a855f7);
  color:#fff; border:none; border-radius:8px;
  font-size:12px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:opacity 0.15s; margin-top:6px;
}
.add-divider-btn:hover{ opacity:0.88; }

/* ── TOOLTIP helper text ── */
.field-tooltip{ font-size:10px; color:#9ca3af; line-height:1.4; margin-top:3px; margin-bottom:8px; }

/* ── DIVIDER LABEL improve ── */
.mode-label-normal{ font-size:10px; color:#6b7280; text-align:center; margin-bottom:4px; }
.mode-label-pro{ font-size:10px; color:#a855f7; text-align:center; margin-bottom:4px; font-weight:700; }

/* ── AI SECTION improvements ── */
.ai-key-notice{
  background:#fffbeb; border:1.5px solid #fde68a; border-radius:10px;
  padding:10px 12px; font-size:12px; color:#92400e; margin-bottom:12px;
  line-height:1.5;
}
.ai-key-notice strong{ color:#78350f; }
.ai-key-notice code{ background:#fef3c7; padding:1px 5px; border-radius:4px; font-size:11px; }