:root {
  /* Color - Primary */
  --color-primary-50: #eef1ff;
  --color-primary-100: #e1e4fe;
  --color-primary-200: #c9cffc;
  --color-primary-300: #a7affa;
  --color-primary-400: #8485f5;
  --color-primary-500: #7067ed;
  --color-primary-600: #5e48e0;
  --color-primary-700: #533cc6;
  --color-primary-800: #4433a0;
  --color-primary-900: #3a307f;
  /* Color - Secondary */
  --color-secondary-50: #ECFDFF;
  --color-secondary-100: #CFF9FE;
  --color-secondary-200: #A5F0FC;
  --color-secondary-300: #67E3F9;
  --color-secondary-400: #22CCEE;
  --color-secondary-500: #06AED4;
  --color-secondary-600: #EAAA08;
  --color-secondary-700: #0E7090;
  --color-secondary-800: #0E7090;
  --color-secondary-900: #164C63;
  /* Color - Neutral */
  --color-neutral-white: #FFFFFF;
  --color-neutral-50: #F7F7F7;
  --color-neutral-100: #eeeeee;
  --color-neutral-200: #e1e1e1;
  --color-neutral-300: #cfcfcf;
  --color-neutral-400: #aaaaaa;
  --color-neutral-500: #898989;
  --color-neutral-600: #626262;
  --color-neutral-700: #4f4f4f;
  --color-neutral-800: #313131;
  --color-neutral-900: #111111;
  /* Color - Danger */
  --color-danger-50: #ffebed;
  --color-danger-100: #ffcccf;
  --color-danger-200: #fb9893;
  --color-danger-300: #f46e69;
  --color-danger-400: #fe4a40;
  --color-danger-500: #ff361d;
  --color-danger-600: #f5291f;
  --color-danger-700: #e31a1a;
  --color-danger-800: #d60b11;
  --color-danger-900: #c80000;
  /* Color - Warning */
  --color-warning-50: #fef8e1;
  --color-warning-100: #fcecb3;
  --color-warning-200: #fae083;
  --color-warning-300: #f9d550;
  --color-warning-400: #f8cb2b;
  --color-warning-500: #f8c20e;
  --color-warning-600: #f8b404;
  --color-warning-700: #f8a100;
  --color-warning-800: #f89100;
  --color-warning-900: #f87200;
  /* Color - Success */
  --color-success-50: #e7f6e9;
  --color-success-100: #c5e9ca;
  --color-success-200: #9fdaa8;
  --color-success-300: #76cd85;
  --color-success-400: #56c26a;
  --color-success-500: #32b64f;
  --color-success-600: #28a746;
  --color-success-700: #1a953a;
  --color-success-800: #0a842f;
  --color-success-900: #00641b;
  /* Color - Info */
  --color-info-50: #e3f1fe;
  --color-info-100: #bcdcfe;
  --color-info-200: #91c7fe;
  --color-info-300: #65b1fc;
  --color-info-400: #46a1fc;
  --color-info-500: #2e91fa;
  --color-info-600: #2f82eb;
  --color-info-700: #2d70d8;
  --color-info-800: #2a5fc5;
  --color-info-900: #2640a6;
  /* Semantic Colors */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-white);
  --color-border: var(--color-neutral-200);
  --color-border-light: var(--color-neutral-100);
  --color-border-dark: var(--color-neutral-300);
  --color-background: var(--color-neutral-white);
  --color-background-light: var(--color-neutral-50);
  --color-background-dark: var(--color-neutral-100);
  /* Alert Colors */
  --color-alert-success: var(--color-success-600);
  --color-alert-success-bg: var(--color-success-50);
  --color-alert-success-border: var(--color-success-200);
  --color-alert-info: var(--color-info-500);
  --color-alert-info-bg: var(--color-info-50);
  --color-alert-info-border: var(--color-info-200);
  --color-alert-warning: var(--color-warning-700);
  --color-alert-warning-bg: var(--color-warning-50);
  --color-alert-warning-border: var(--color-warning-200);
  --color-alert-danger: var(--color-danger-700);
  --color-alert-danger-bg: var(--color-danger-50);
  --color-alert-danger-border: var(--color-danger-200);
  /* Typography */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 60px;
  --font-size-display: 60px;
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 16px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  /* Spacing */
  --spacing-px: 1px;
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-25: 100px;
  /* Border Radius */
  --radius-none: 0;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* Transitions */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  /* Input */
  --input-height-sm: 36px;
  --input-height-md: 40px;
  --input-height-lg: 48px;
  --input-border-radius: var(--radius-sm);
  /* Button */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-border-radius-sm: var(--radius-xs);
  --btn-border-radius-md: var(--radius-sm);
  --btn-border-radius-lg: var(--radius-lg);
  /* Builder */
  --builder-sidebar-width: 280px;
  --builder-toolbar-height: 48px;
}

[class^=lp-cert-icon-],
[class*=" lp-cert-icon-"] {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
[class^=lp-cert-icon-]:before,
[class*=" lp-cert-icon-"]:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.lp-cert-icon-plus-cer::before {
  -webkit-mask-image: url("../../images/svg/plus-cer.svg");
  mask-image: url("../../images/svg/plus-cer.svg");
  width: 52px;
  height: 52px;
}

.lp-cert-icon-fullscreen:before {
  -webkit-mask-image: url("../../images/svg/fullscreen.svg");
  mask-image: url("../../images/svg/fullscreen.svg");
}

.lp-cert-icon-undo:before {
  -webkit-mask-image: url("../../images/svg/undo.svg");
  mask-image: url("../../images/svg/undo.svg");
}

.lp-cert-icon-redo:before {
  -webkit-mask-image: url("../../images/svg/redo.svg");
  mask-image: url("../../images/svg/redo.svg");
}

.lp-cert-icon-info:before {
  -webkit-mask-image: url("../../images/svg/info_fill.svg");
  mask-image: url("../../images/svg/info_fill.svg");
}

.lp-cert-icon-success:before {
  -webkit-mask-image: url("../../images/svg/success_fill.svg");
  mask-image: url("../../images/svg/success_fill.svg");
}

.lp-cert-icon-warning:before {
  -webkit-mask-image: url("../../images/svg/warning_fill.svg");
  mask-image: url("../../images/svg/warning_fill.svg");
}

.lp-cert-icon-danger:before {
  -webkit-mask-image: url("../../images/svg/danger_fill.svg");
  mask-image: url("../../images/svg/danger_fill.svg");
}

.lp-cert-icon-text:before {
  -webkit-mask-image: url("../../images/svg/text.svg");
  mask-image: url("../../images/svg/text.svg");
}

.lp-cert-icon-qr:before {
  -webkit-mask-image: url("../../images/svg/qr.svg");
  mask-image: url("../../images/svg/qr.svg");
}

.lp-cert-icon-level:before {
  -webkit-mask-image: url("../../images/svg/level.svg");
  mask-image: url("../../images/svg/level.svg");
}

.lp-cert-icon-title:before {
  -webkit-mask-image: url("../../images/svg/title.svg");
  mask-image: url("../../images/svg/title.svg");
}

.lp-cert-icon-date:before {
  -webkit-mask-image: url("../../images/svg/date.svg");
  mask-image: url("../../images/svg/date.svg");
}

.lp-cert-icon-duration:before {
  -webkit-mask-image: url("../../images/svg/duration.svg");
  mask-image: url("../../images/svg/duration.svg");
}

.lp-cert-icon-course-description:before {
  -webkit-mask-image: url("../../images/svg/course-description.svg");
  mask-image: url("../../images/svg/course-description.svg");
}

.lp-cert-icon-course-short-description:before {
  -webkit-mask-image: url("../../images/svg/course-short-description.svg");
  mask-image: url("../../images/svg/course-short-description.svg");
}

.lp-cert-icon-course-price:before {
  -webkit-mask-image: url("../../images/svg/course-price.svg");
  mask-image: url("../../images/svg/course-price.svg");
}

.lp-cert-icon-course-student-count:before {
  -webkit-mask-image: url("../../images/svg/course-student-count.svg");
  mask-image: url("../../images/svg/course-student-count.svg");
}

.lp-cert-icon-course-level:before {
  -webkit-mask-image: url("../../images/svg/course-level.svg");
  mask-image: url("../../images/svg/course-level.svg");
}

.lp-cert-icon-course-duration:before {
  -webkit-mask-image: url("../../images/svg/course-duration.svg");
  mask-image: url("../../images/svg/course-duration.svg");
}

.lp-cert-icon-course-max-students:before {
  -webkit-mask-image: url("../../images/svg/course-max-students.svg");
  mask-image: url("../../images/svg/course-max-students.svg");
}

.lp-cert-icon-course-lesson-count:before {
  -webkit-mask-image: url("../../images/svg/course-lesson-count.svg");
  mask-image: url("../../images/svg/course-lesson-count.svg");
}

.lp-cert-icon-course-quiz-count:before {
  -webkit-mask-image: url("../../images/svg/course-quiz-count.svg");
  mask-image: url("../../images/svg/course-quiz-count.svg");
}

.lp-cert-icon-element:before {
  -webkit-mask-image: url("../../images/svg/element.svg");
  mask-image: url("../../images/svg/element.svg");
}

.lp-cert-icon-uploads:before {
  -webkit-mask-image: url("../../images/svg/uploads.svg");
  mask-image: url("../../images/svg/uploads.svg");
}

.lp-cert-icon-library:before {
  -webkit-mask-image: url("../../images/svg/library.svg");
  mask-image: url("../../images/svg/library.svg");
}

.lp-cert-icon-background:before {
  -webkit-mask-image: url("../../images/svg/background.svg");
  mask-image: url("../../images/svg/background.svg");
}

.lp-cert-icon-templates:before {
  -webkit-mask-image: url("../../images/svg/templates.svg");
  mask-image: url("../../images/svg/templates.svg");
}

.lp-cert-icon-layer:before {
  -webkit-mask-image: url("../../images/svg/layer.svg");
  mask-image: url("../../images/svg/layer.svg");
}

.lp-cert-icon-time:before {
  -webkit-mask-image: url("../../images/svg/time.svg");
  mask-image: url("../../images/svg/time.svg");
}

.lp-cert-icon-student:before {
  -webkit-mask-image: url("../../images/svg/student.svg");
  mask-image: url("../../images/svg/student.svg");
}

.lp-cert-icon-instructor:before {
  -webkit-mask-image: url("../../images/svg/instructor.svg");
  mask-image: url("../../images/svg/instructor.svg");
}

.lp-cert-icon-advanced-settings:before {
  -webkit-mask-image: url("../../images/svg/advanced_settings.svg");
  mask-image: url("../../images/svg/advanced_settings.svg");
}

.lp-cert-icon-text-wrap:before {
  -webkit-mask-image: url("../../images/svg/text_wrap.svg");
  mask-image: url("../../images/svg/text_wrap.svg");
}

.lp-cert-icon-flip-horizontal:before {
  -webkit-mask-image: url("../../images/svg/flip_horizontal.svg");
  mask-image: url("../../images/svg/flip_horizontal.svg");
}

.lp-cert-icon-flip-vertical:before {
  -webkit-mask-image: url("../../images/svg/flip_vertical.svg");
  mask-image: url("../../images/svg/flip_vertical.svg");
}

.lp-cert-icon-round-corners:before {
  -webkit-mask-image: url("../../images/svg/round_corners.svg");
  mask-image: url("../../images/svg/round_corners.svg");
}

.lp-cert-icon-stroke:before {
  -webkit-mask-image: url("../../images/svg/stroke.svg");
  mask-image: url("../../images/svg/stroke.svg");
}

.lp-cert-icon-opacity:before {
  -webkit-mask-image: url("../../images/svg/opacity.svg");
  mask-image: url("../../images/svg/opacity.svg");
}

.lp-cert-icon-text-linethrough:before {
  -webkit-mask-image: url("../../images/svg/text_linethrough.svg");
  mask-image: url("../../images/svg/text_linethrough.svg");
}

.lp-cert-icon-drag-handle:before {
  -webkit-mask-image: url("../../images/svg/ic_drag_handle.svg");
  mask-image: url("../../images/svg/ic_drag_handle.svg");
}

.lp-cert-icon-remove:before {
  -webkit-mask-image: url("../../images/svg/ic_remove.svg");
  mask-image: url("../../images/svg/ic_remove.svg");
}

.lp-cert-alert-container {
  position: fixed;
  top: 50px;
  left: 20px;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  width: 100%;
  pointer-events: none;
}
.lp-cert-alert-container .lp-cert-alert {
  pointer-events: auto;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lp-cert-alert-container .lp-cert-alert.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.lp-cert-alert-container .lp-cert-alert.is-closing {
  opacity: 0;
  transform: translateX(-100%);
}

.lp-cert-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.lp-cert-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.lp-cert-alert__icon:before {
  width: 20px;
  height: 20px;
}
.lp-cert-alert__content {
  flex: 1;
  min-width: 0;
}
.lp-cert-alert__title {
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-1) 0;
}
.lp-cert-alert__message {
  margin: 0;
}
.lp-cert-alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--font-size-lg);
  line-height: 1;
  opacity: 0.5;
  transition: opacity var(--transition-base) var(--transition-ease);
}
.lp-cert-alert__close:hover {
  opacity: 1;
}
.lp-cert-alert--success {
  background-color: var(--color-alert-success-bg);
  border-color: var(--color-alert-success-border);
  color: var(--color-success-900);
}
.lp-cert-alert--success .lp-cert-alert__icon {
  color: var(--color-alert-success);
}
.lp-cert-alert--info {
  background-color: var(--color-alert-info-bg);
  border-color: var(--color-alert-info-border);
  color: var(--color-info-900);
}
.lp-cert-alert--info .lp-cert-alert__icon {
  color: var(--color-alert-info);
}
.lp-cert-alert--warning {
  background-color: var(--color-alert-warning-bg);
  border-color: var(--color-alert-warning-border);
  color: var(--color-warning-900);
}
.lp-cert-alert--warning .lp-cert-alert__icon {
  color: var(--color-alert-warning);
}
.lp-cert-alert--error {
  background-color: var(--color-alert-danger-bg);
  border-color: var(--color-alert-danger-border);
  color: var(--color-danger-900);
}
.lp-cert-alert--error .lp-cert-alert__icon {
  color: var(--color-alert-danger);
}

body.lp-cert-confirm-open {
  overflow: hidden;
}

.lp-cert-confirm-overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow-y: auto;
}
.lp-cert-confirm-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.lp-cert-confirm-popup {
  position: relative;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 100%;
  padding: 24px;
  text-align: center;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lp-cert-confirm-popup.is-visible {
  transform: scale(1);
  opacity: 1;
}

.lp-cert-confirm__close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 35px;
  line-height: 1;
  color: #ccc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  padding: 0;
}
.lp-cert-confirm__close:hover {
  color: #666;
}

.lp-cert-confirm__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid;
}
.lp-cert-confirm__icon--warning {
  border-color: #f8bb86;
  color: #f8bb86;
}
.lp-cert-confirm__icon--warning .lp-cert-confirm__icon-content {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}
.lp-cert-confirm__icon--error {
  border-color: #f27474;
  color: #f27474;
}
.lp-cert-confirm__icon--error .lp-cert-confirm__icon-content {
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
}
.lp-cert-confirm__icon--success {
  border-color: #a5dc86;
  color: #a5dc86;
}
.lp-cert-confirm__icon--success .lp-cert-confirm__icon-content {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}
.lp-cert-confirm__icon--info {
  border-color: #3fc3ee;
  color: #3fc3ee;
}
.lp-cert-confirm__icon--info .lp-cert-confirm__icon-content {
  font-size: 48px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
}
.lp-cert-confirm__icon--question {
  border-color: #87adbd;
  color: #87adbd;
}
.lp-cert-confirm__icon--question .lp-cert-confirm__icon-content {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}

.lp-cert-confirm__title {
  font-size: 24px;
  font-weight: 600;
  color: #595959;
  margin: 0 0 16px 0;
  padding: 0;
  line-height: 1.3;
}

.lp-cert-confirm__content {
  font-size: 16px;
  color: #545454;
  line-height: 1.5;
  margin: 0 0 24px 0;
  padding: 0;
}

.lp-cert-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lp-cert-confirm__btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 100px;
  width: 100%;
}
.lp-cert-confirm__btn--confirm {
  background-color: var(--lp-cert-btn-color, #e02200);
  color: #fff;
}
.lp-cert-confirm__btn--confirm:hover {
  filter: brightness(0.9);
}
.lp-cert-confirm__btn--confirm:focus {
  box-shadow: 0 0 0 3px rgba(224, 34, 0, 0.5);
  outline: none;
}
.lp-cert-confirm__btn--cancel {
  background-color: var(--color-neutral-white);
  color: #000;
  border: 1px solid #ccc;
}
.lp-cert-confirm__btn--cancel:hover {
  filter: brightness(0.9);
}
.lp-cert-confirm__btn--cancel:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
  outline: none;
}

.lp-certificate-edit-wrapper {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.lp-certificate-edit-wrapper.full {
  margin-top: 0;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100000;
}
.lp-certificate-edit-wrapper.full .lp-cert-builder-top-actions {
  justify-content: flex-end;
}
.lp-certificate-edit-wrapper .lp-certificate-template-selection-box {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm, 8px);
  padding: 32px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-selection-header {
  margin-bottom: 24px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-selection-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1d2327;
}
.lp-certificate-edit-wrapper .lp-certificate-template-selection-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-option {
  cursor: pointer;
}
.lp-certificate-edit-wrapper .lp-certificate-template-option input[type=radio] {
  display: none;
}
.lp-certificate-edit-wrapper .lp-certificate-template-option .lp-certificate-template-card {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.lp-certificate-edit-wrapper .lp-certificate-template-option .lp-certificate-template-card:hover {
  border-color: #999;
}
.lp-certificate-edit-wrapper .lp-certificate-template-option input[type=radio]:checked + .lp-certificate-template-card {
  border-color: var(--color-primary-500, #2271b1);
  box-shadow: 0 0 0 1px var(--color-primary-500, #2271b1);
}
.lp-certificate-edit-wrapper .lp-certificate-template-blank {
  justify-content: center;
  align-items: center;
  min-height: 160px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-blank .lp-certificate-template-icon {
  width: 48px;
  height: 48px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-blank .lp-certificate-template-icon .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #999;
}
.lp-certificate-edit-wrapper .lp-certificate-template-preview {
  background: #f5f5f5;
  border-radius: 4px;
  aspect-ratio: 1/1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}
.lp-certificate-edit-wrapper .lp-certificate-template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-certificate-edit-wrapper .lp-certificate-template-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1d2327;
  margin-bottom: 4px;
}
.lp-certificate-edit-wrapper .lp-certificate-template-size {
  display: block;
  font-size: 12px;
  color: #999;
}
.lp-certificate-edit-wrapper .lp-certificate-template-actions {
  display: flex;
  justify-content: center;
}
.lp-certificate-edit-wrapper .lp-certificate-template-actions button {
  min-width: 120px;
  background: #1d2327 !important;
  border-color: #1d2327 !important;
}
.lp-certificate-edit-wrapper .lp-certificate-template-actions button:hover {
  background: #000 !important;
}
.lp-certificate-edit-wrapper .lp-certificate-builder-section {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm, 8px);
  padding: 32px;
  text-align: center;
}
.lp-certificate-edit-wrapper .lp-certificate-builder-section .lp-certificate-builder-preview {
  max-width: 400px;
  margin: 0 auto 24px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lp-certificate-edit-wrapper .lp-certificate-builder-section .lp-certificate-builder-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lp-certificate-edit-wrapper .lp-certificate-builder-section .lp-certificate-builder-placeholder {
  color: #999;
}
.lp-certificate-edit-wrapper .lp-certificate-builder-section .lp-certificate-builder-placeholder .dashicons {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}
.lp-certificate-edit-wrapper .lp-certificate-builder-section .lp-certificate-builder-placeholder p {
  margin: 0;
  font-size: 14px;
}
.lp-certificate-edit-wrapper .lp-certificate-field {
  margin-bottom: 25px;
}
.lp-certificate-edit-wrapper .lp-certificate-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
  color: #1d2327;
}
.lp-certificate-edit-wrapper .lp-certificate-field .description {
  margin-top: 8px;
  color: #646970;
  font-size: 13px;
  font-style: italic;
}
.lp-certificate-edit-wrapper .lp-certificate-field input[type=text],
.lp-certificate-edit-wrapper .lp-certificate-field input[type=number] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.lp-certificate-edit-wrapper .lp-certificate-field input[type=text]:focus,
.lp-certificate-edit-wrapper .lp-certificate-field input[type=number]:focus {
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  outline: none;
}
.lp-certificate-edit-wrapper .lp-certificate-field input[type=number] {
  max-width: 200px;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-preview {
  width: 300px;
  height: 200px;
  border: 2px dashed #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f9f9f9;
  flex-shrink: 0;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-preview .lp-certificate-thumbnail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c8f94;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-preview .lp-certificate-thumbnail-placeholder .dashicons {
  font-size: 48px;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-preview .lp-certificate-thumbnail-placeholder p {
  margin: 0;
  font-size: 13px;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-actions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-actions button {
  width: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #000;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-actions button .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin: 0;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-actions button.lp-cert-icon-btn {
  border: 1px solid #000;
  border-radius: 4px;
  padding: 6px 12px;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-actions button.lp-cert-icon-btn .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #000;
}
.lp-certificate-edit-wrapper .lp-certificate-thumbnail-wrapper .lp-certificate-thumbnail-actions button.lp-cert-icon-btn:hover {
  background: #f0f0f0;
}
.lp-certificate-edit-wrapper .lp-certificate-actions {
  display: flex;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  margin-top: 30px;
}
.lp-certificate-edit-wrapper .lp-certificate-actions button {
  min-width: 120px;
}
.lp-certificate-edit-wrapper .lp-certificate-actions button.lp-loading {
  position: relative;
  pointer-events: none;
}
.lp-certificate-edit-wrapper .lp-certificate-actions button.lp-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 16px;
  height: 16px;
  margin: -8px -8px 0 0;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: lp-spin 0.6s linear infinite;
}

@keyframes lp-spin {
  to {
    transform: rotate(-360deg);
  }
}
.lp-toast {
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.lp-toast.lp-toast-success {
  background: linear-gradient(-135deg, #667eea 0%, #764ba2 100%) !important;
}
.lp-toast.lp-toast-error {
  background: linear-gradient(-135deg, #f093fb 0%, #f5576c 100%) !important;
}
.lp-toast.lp-toast-warning {
  background: linear-gradient(-135deg, #ffc837 0%, #ff8008 100%) !important;
}
.lp-toast.lp-toast-info {
  background: linear-gradient(-135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.lp-cert-layout-selection-wrapper {
  padding: 40px;
  background: #fff;
  min-height: calc(100vh - 200px);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-selection-header {
  margin-bottom: 30px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-selection-header h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #1d2327;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-selection-desc {
  font-size: 14px;
  color: #646970;
  margin: 0;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-search {
  margin-bottom: 20px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-search .lp-cert-template-search-input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-search .lp-cert-template-search-input:focus {
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  outline: none;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 25px;
}
.lp-cert-layout-selection-wrapper .lp-btn-cert-choose-template-first {
  display: none;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: var(--color-primary-500, #7067ED);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
}
.lp-cert-layout-selection-wrapper .lp-btn-cert-choose-template-first:hover {
  background: var(--color-primary-600, #5b53d4);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item {
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item:hover {
  transform: translateY(-2px);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.selected .lp-btn-cert-choose-template-first {
  display: inline-flex;
  align-items: center;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create {
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create > .lp-btn-cert-choose-template-first {
  position: absolute;
  bottom: 12px;
  left: 12px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create:hover {
  border-color: var(--color-primary-500, #7067ED);
  color: var(--color-primary-500, #7067ED);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create:active {
  border-color: var(--color-primary-500, #7067ED);
  color: var(--color-primary-500, #7067ED);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create.selected {
  border-color: var(--color-primary-500, #7067ED);
  color: var(--color-primary-500, #7067ED);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create .lp-cert-template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.lp-cert-template-create .lp-cert-template-label {
  border-top: none;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-item.selected .lp-cert-template-card {
  border-color: var(--color-primary-500, #7067ED);
}
.lp-cert-layout-selection-wrapper .lp-cert-template-label-info {
  display: grid;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-label-info .lp-cert-template-label-desc {
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-card {
  display: flex;
  flex-direction: column;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-card:active {
  border-color: #2271b1;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-icon {
  margin-bottom: 15px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-icon .dashicons {
  font-size: 48px;
  width: 48px;
  height: 48px;
  color: #8c8f94;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-preview {
  aspect-ratio: 16/12;
  overflow: hidden;
  background: var(--color-neutral-50, #f9fafb);
  padding: 10px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-label {
  padding: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1d2327;
  text-align: right;
  background: #fafafa;
  border-top: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-label-create {
  padding: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #1d2327;
  text-align: center;
}
.lp-cert-layout-selection-wrapper .lp-cert-template-label-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2327;
}

.lp-certificate-edit-wrapper.full .lp-cert-layout-builder-wrapper {
  height: 90vh;
}

.lp-cert-layout-builder-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 112px);
  background: #f4f4f4;
  padding: 20px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-back-wrapper {
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 10px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav {
  width: 78px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xs);
  padding: 6px;
  border: 1px solid var(--color-border);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: transparent;
  border-radius: var(--radius-xs);
  margin-bottom: 2px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item:hover {
  background: var(--color-primary-50) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item:hover i {
  color: var(--color-primary-500) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item:hover span {
  color: var(--color-primary-500) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item.active {
  background: var(--color-primary-100) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item.active i {
  color: var(--color-primary-500) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item.active span {
  color: var(--color-primary-500) !important;
  font-weight: 500;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item i {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--color-neutral-400);
  margin-bottom: 6px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-nav .lp-cert-builder-menu .lp-cert-builder-menu-item span {
  font-size: 10px;
  color: var(--color-neutral-400);
  text-align: center;
  line-height: 1.3;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools {
  width: 280px;
  background: #fff;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s, margin 0.3s;
  border-radius: var(--radius-xs);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools.hidden {
  width: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-search-icon {
  color: var(--color-neutral-400) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-search-wrapper {
  position: relative;
  margin-bottom: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-search-wrapper i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-400);
  font-size: 16px;
  pointer-events: none;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-search-wrapper .lp-cert-builder-search-input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 13px;
  background: #fff;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-search-wrapper .lp-cert-builder-search-input:focus {
  border-color: var(--color-primary-400);
  outline: none;
  box-shadow: 0 0 0 2px rgba(112, 103, 237, 0.1);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-search-wrapper .lp-cert-builder-search-input::placeholder {
  color: var(--color-neutral-400);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: transparent;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item {
  display: none;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.active {
  display: block;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library-area {
  padding: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__section {
  margin-bottom: 20px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__title {
  font-size: 14px;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__item:hover {
  background: #fff;
  border-color: #2271b1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__preview {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__preview svg {
  width: 100%;
  height: 100%;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-inserter-library__name {
  font-size: 11px;
  color: #666;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-section {
  margin-bottom: 20px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-section-header .lp-inserter-library__title {
  margin: 0;
  padding: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-images-view-all {
  background: none;
  border: none;
  color: #2271b1;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-images-view-all:hover {
  text-decoration: underline;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-image-item {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-image-item:hover {
  border-color: #2271b1;
  transform: scale(1.02);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-image-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-images-empty {
  padding: 20px;
  text-align: center;
  color: #666;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view {
  padding: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-full-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-full-header .lp-inserter-library__title {
  margin: 0;
  padding: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-images-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #1e1e1e;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-images-back:hover {
  background: #f0f0f0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-images-back .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-images-full-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.library .lp-library-full-view .lp-library-images-full-grid .lp-library-image-item {
  aspect-ratio: 16/10;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layers-empty {
  padding: 40px 20px;
  text-align: center;
  color: #8c8f94;
  font-size: 13px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item {
  margin-bottom: 8px;
  background: #F4FCFF;
  position: relative;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item:hover {
  border-color: #C3C4C7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item:hover > .lp-layer-head > .lp-layer-delete {
  opacity: 1;
  visibility: visible;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item.selected {
  border-color: #2271B1 !important;
  background: #e7f3ff;
  box-shadow: 0 0 0 1px #2271B1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item.editing {
  border-color: #2271B1 !important;
  box-shadow: 0 0 0 1px #2271B1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item.ui-sortable-helper {
  opacity: 0.6;
  cursor: grabbing;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head {
  display: flex;
  position: relative;
  min-height: 42px;
  margin: 0;
  padding: 0 10px;
  line-height: 2.5rem;
  transition: background 200ms ease-out;
  align-items: center;
  gap: 5px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-drag-handle {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin: 0;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #999;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-drag-handle:hover {
  color: #2271B1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-drag-handle:active {
  cursor: grabbing;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-thumbnail {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 4px 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-thumbnail img {
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
  display: block;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-text {
  width: 100%;
  border: none;
  background-color: transparent;
  box-shadow: none;
  font-size: 0.875rem;
  color: #1d2327;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-text:focus {
  box-shadow: none;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-edit-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 5px 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-edit-container .lp-layer-edit-input {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid #2271b1;
  border-radius: 5px;
  font-size: 0.875rem;
  font-family: inherit;
  color: #1d2327;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-edit-container .lp-layer-edit-input:focus {
  outline: none;
  border-color: #2271b1;
  box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-edit-container .lp-layer-cancel {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  color: #646970;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-title-wrapper .lp-layer-edit-container .lp-layer-cancel:hover {
  background: #e8e8e8;
  border-color: #c4c4c4;
  color: #1d2327;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head {
  /*.lp-layer-actions {
  	display: flex;
  	align-items: center;
  	gap: 5px;

  	.lp-layer-delete {
  		width: 24px;
  		height: 24px;
  		padding: 0;
  		border: none;
  		background: transparent;
  		cursor: pointer;
  		display: none;
  		opacity: 0.7;
  		transition: opacity 0.2s;
  		align-items: center;
  		justify-content: center;
  		color: #E74C3C;

  		&:hover {
  			opacity: 1;
  			color: #c0392b;
  		}

  		.lp-cert-icon {
  			&:before {
  				width: 18px;
  				height: 18px;
  			}
  		}
  	}
  }*/
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-delete {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  opacity: 0;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  color: #aaaaaa;
  z-index: 10;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-delete:hover {
  opacity: 1;
  color: #c0392b;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-delete .lp-cert-icon:before {
  width: 16px;
  height: 16px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-save {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  opacity: 0.7;
  transition: opacity 0.2s;
  align-items: center;
  justify-content: center;
  color: #2271B1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-save:hover {
  opacity: 1;
  color: #135e96;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.layers .lp-inserter-layers-area .lp-layers-list .lp-layer-item .lp-layer-head .lp-layer-save .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-header {
  margin-bottom: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-header .lp-inserter-upload-btn {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  background-color: var(--color-primary-500);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-white);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-header .lp-inserter-upload-btn:hover {
  background-color: var(--color-primary-600);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  overflow-y: auto;
  padding: 3px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-grid .lp-inserter-upload-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-background-dark);
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-grid .lp-inserter-upload-item:hover {
  border-color: var(--color-primary-500);
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-grid .lp-inserter-upload-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-empty {
  padding: 40px 20px;
  text-align: center;
  color: #8c8f94;
  font-size: 13px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-load-more {
  margin-top: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #f7f7f7;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.uploads .lp-inserter-upload-area .lp-inserter-upload-load-more.is-loading {
  opacity: 0.6;
  cursor: wait;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section {
  margin-bottom: 20px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section:last-child {
  margin-bottom: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-section-header .lp-background-section-title {
  margin: 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
  background-color: var(--swatch-color, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-swatch:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-swatch.active {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px rgba(112, 103, 237, 0.25);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker-row .lp-background-color-picker-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker-row .lp-background-color-input {
  height: 32px;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker-row .lp-background-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker-row .lp-background-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker {
  width: 100%;
  aspect-ratio: 1;
  border: 2px dashed var(--color-neutral-300);
  border-radius: 8px;
  background: var(--color-background-light);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
  transform: scale(1.05);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker .lp-background-color-picker-icon {
  font-size: 20px;
  line-height: 1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-section .lp-background-color-picker .lp-background-color-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-item {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-background-dark);
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-item:hover {
  border-color: var(--color-primary-500);
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-item.active {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px rgba(112, 103, 237, 0.25);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-empty {
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-load-more {
  margin-top: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--color-background-light);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.backgrounds .lp-inserter-backgrounds-area .lp-background-bg-section .lp-background-bg-load-more.is-loading {
  opacity: 0.6;
  cursor: wait;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area .lp-cert-template-apply-item {
  display: flex;
  flex-direction: column;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area .lp-cert-template-apply-item:hover {
  border-color: #2271b1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area .lp-cert-template-apply-item .lp-cert-template-apply-preview {
  aspect-ratio: 16/12;
  overflow: hidden;
  background: var(--color-neutral-50);
  padding: 10px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area .lp-cert-template-apply-item .lp-cert-template-apply-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area .lp-cert-template-apply-item .lp-cert-template-apply-name {
  padding: 12px;
  font-size: 13px;
  color: #1d2327;
  text-align: center;
  background: #fafafa;
  border-top: 1px solid #E5E7EB;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item.templates .lp-inserter-templates-area .lp-cert-template-apply-item .lp-cert-template-apply-name .lp-cert-template-apply-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2327;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group {
  margin-bottom: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-group-header label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  cursor: pointer;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-group-header .lp-cert-inserter-group-toggle {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-neutral-500);
  transition: transform 0.3s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-group-content {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group.expanded .lp-cert-inserter-group-content {
  max-height: 1000px;
  padding: 0 0 8px 0;
  opacity: 1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group.expanded .lp-cert-inserter-group-toggle {
  transform: rotate(-180deg);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-item:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-item:hover i {
  color: var(--color-primary-500) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-item:hover span {
  color: var(--color-primary-500) !important;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-item i {
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  color: var(--color-neutral-600);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-sidebar-tools .lp-cert-builder-inserter-area .lp-inserter-item .lp-cert-inserter-group .lp-cert-inserter-item span {
  font-size: 12px;
  color: var(--color-text-primary);
  text-align: center;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
  overflow: hidden;
  position: relative;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  position: relative;
  z-index: 100;
  border-radius: var(--radius-xs);
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area__toolbar-row {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 16px;
  overflow-x: auto;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area__toolbar-row::-webkit-scrollbar {
  height: 6px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area__toolbar-row::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area__toolbar-row::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area__toolbar-row::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-toolbar-area__input-container {
  flex: 1;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-canvas-wrapper {
  flex: 1;
  overflow: auto;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.lp-cert-layout-builder-wrapper .lp-cert-builder-canvas-area .lp-cert-builder-canvas {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  min-width: 800px;
  min-height: 600px;
}

.lp-cert-canvas-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-cert-builder-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 20px;
}
.lp-cert-builder-top-actions .lp-btn-cert-undo,
.lp-cert-builder-top-actions .lp-btn-cert-redo,
.lp-cert-builder-top-actions .lp-btn-cert-builder-open-full-screen {
  margin-right: 0;
}

.lp-certificate-edit-builder:has(.lp-cert-layout-selection-wrapper:not(.lp-hidden)) .lp-cert-builder-top-actions {
  display: none;
}

.lp-cert-ai-open-popup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lp-cert-ai-open-popup .dashicons {
  margin: 0;
}

.lp-cert-fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.lp-cert-fullscreen-modal.is-open {
  display: block;
}

.lp-cert-fullscreen-modal__background {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.lp-cert-fullscreen-modal__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.lp-cert-fullscreen-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #dcdcde;
  margin-top: 30px;
}
.lp-cert-fullscreen-modal__header h2 {
  margin: 0;
  font-size: 18px;
}
.lp-cert-fullscreen-modal__header .lp-cert-fullscreen-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 20px;
}

.lp-cert-fullscreen-modal__body {
  flex: 1;
  background: #f6f7f7;
  overflow: auto;
  padding: 20px;
}
.lp-cert-fullscreen-modal__body .lp-cert-builder-main {
  height: 100%;
}

body.lp-cert-fullscreen-open {
  overflow: hidden;
}

#lp-cert-builder-placeholder {
  display: none;
}

.lp-btn-cert-builder-open-full-screen {
  display: flex !important;
  align-items: center;
  gap: 5px;
}
.lp-btn-cert-builder-open-full-screen.lp-hidden {
  display: none !important;
}

.lp-cert-text-toolbar {
  display: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  overflow: visible;
}
.lp-cert-text-toolbar.is-visible {
  display: flex;
}
.lp-cert-text-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: visible;
}
.lp-cert-text-toolbar__group {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}
.lp-cert-text-toolbar__select {
  height: 28px;
  padding: 0 8px 0 24px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  color: #1d2327;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat left 8px center;
  background-size: 8px 5px;
  appearance: none;
  cursor: pointer;
  min-width: 100px;
  max-width: 130px;
}
.lp-cert-text-toolbar__select:hover {
  border-color: #2271b1;
}
.lp-cert-text-toolbar__select:focus {
  border-color: #2271b1;
  outline: none;
  box-shadow: none;
}
.lp-cert-text-toolbar__font-size-group, .lp-cert-text-toolbar__letter-spacing-group, .lp-cert-text-toolbar__line-height-group {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: visible;
  transition: border-color 0.15s ease;
}
.lp-cert-text-toolbar__font-size-group:hover, .lp-cert-text-toolbar__letter-spacing-group:hover, .lp-cert-text-toolbar__line-height-group:hover {
  border-color: var(--color-neutral-300);
}
.lp-cert-text-toolbar__font-size-group:focus-within, .lp-cert-text-toolbar__letter-spacing-group:focus-within, .lp-cert-text-toolbar__line-height-group:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-100);
}
.lp-cert-text-toolbar__stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: var(--color-neutral-white);
  color: var(--color-neutral-600);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  flex-shrink: 0;
  border-radius: 10px;
}
.lp-cert-text-toolbar__stepper:active {
  background: var(--color-neutral-200);
}
.lp-cert-text-toolbar__font-size-group .lp-cert-text-toolbar__input, .lp-cert-text-toolbar__letter-spacing-group .lp-cert-text-toolbar__input, .lp-cert-text-toolbar__line-height-group .lp-cert-text-toolbar__input, .lp-cert-text-toolbar__input.lp-cert-text-toolbar__font-size {
  height: 28px;
  width: 40px;
  padding: 0 4px;
  border: none !important;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: var(--color-neutral-900);
  background: transparent;
  box-shadow: none !important;
}
.lp-cert-text-toolbar__font-size-group .lp-cert-text-toolbar__input:focus, .lp-cert-text-toolbar__letter-spacing-group .lp-cert-text-toolbar__input:focus, .lp-cert-text-toolbar__line-height-group .lp-cert-text-toolbar__input:focus, .lp-cert-text-toolbar__input.lp-cert-text-toolbar__font-size:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}
.lp-cert-text-toolbar__font-size-group .lp-cert-text-toolbar__input::-webkit-inner-spin-button, .lp-cert-text-toolbar__font-size-group .lp-cert-text-toolbar__input::-webkit-outer-spin-button, .lp-cert-text-toolbar__letter-spacing-group .lp-cert-text-toolbar__input::-webkit-inner-spin-button, .lp-cert-text-toolbar__letter-spacing-group .lp-cert-text-toolbar__input::-webkit-outer-spin-button, .lp-cert-text-toolbar__line-height-group .lp-cert-text-toolbar__input::-webkit-inner-spin-button, .lp-cert-text-toolbar__line-height-group .lp-cert-text-toolbar__input::-webkit-outer-spin-button, .lp-cert-text-toolbar__input.lp-cert-text-toolbar__font-size::-webkit-inner-spin-button, .lp-cert-text-toolbar__input.lp-cert-text-toolbar__font-size::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-text-toolbar__font-size-group .lp-cert-text-toolbar__input, .lp-cert-text-toolbar__letter-spacing-group .lp-cert-text-toolbar__input, .lp-cert-text-toolbar__line-height-group .lp-cert-text-toolbar__input, .lp-cert-text-toolbar__input.lp-cert-text-toolbar__font-size {
  -moz-appearance: textfield;
}
.lp-cert-text-toolbar__color-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--color-neutral-200);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  position: relative;
}
.lp-cert-text-toolbar__color-trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-text-toolbar__color-trigger.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__color-preview {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lp-cert-text-toolbar__popup-wrapper {
  position: relative;
  flex-shrink: 0;
}
.lp-cert-text-toolbar__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  color: #1d2327;
  position: relative;
}
.lp-cert-text-toolbar__trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-text-toolbar__trigger.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__trigger .dashicons,
.lp-cert-text-toolbar__trigger .lp-cert-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.lp-cert-text-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.lp-cert-text-toolbar__btn:hover {
  background: var(--color-neutral-50);
}
.lp-cert-text-toolbar__btn:active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__btn.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__btn .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.lp-cert-text-toolbar__btn .lp-cert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.lp-cert-text-toolbar__btn .lp-cert-icon:before {
  width: 16px;
  height: 16px;
}
.lp-cert-text-toolbar__position-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-cert-text-toolbar__position-toggle:hover {
  background: var(--color-neutral-50);
}
.lp-cert-text-toolbar__position-toggle:active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__position-toggle.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__convert-textbox.is-active {
  background: var(--color-primary-500);
}
.lp-cert-text-toolbar__convert-textbox.is-active .lp-cert-icon {
  color: var(--color-neutral-white);
}
.lp-cert-text-toolbar__btn-label {
  font-size: 12px;
  font-weight: 500;
}
.lp-cert-text-toolbar__icon-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.lp-cert-text-toolbar__icon-trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-text-toolbar__icon-trigger.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-text-toolbar__icon-trigger .lp-cert-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}
.lp-cert-text-toolbar__icon-trigger .lp-cert-icon:before {
  width: 18px;
  height: 18px;
}
.lp-cert-text-toolbar__popup {
  display: none;
  background: #fff;
  border-radius: 6px;
  padding: 12px;
}
.lp-cert-text-toolbar__popup.is-visible {
  display: block;
}
.lp-cert-text-toolbar__popup-header {
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.lp-cert-text-toolbar__popup-title {
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
}
.lp-cert-text-toolbar__popup-content .iro-color-picker-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-cert-text-toolbar__settings-popup {
  display: none;
  flex-direction: column;
}
.lp-cert-text-toolbar__settings-popup.is-visible {
  display: flex;
}
.lp-cert-text-toolbar__sidebar-section:not(:last-child) {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-neutral-100);
}
.lp-cert-text-toolbar__sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-900);
  margin-bottom: 12px;
}
.lp-cert-text-toolbar__sidebar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.lp-cert-text-toolbar__sidebar-row:last-child {
  margin-bottom: 0;
}
.lp-cert-text-toolbar__sidebar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-500);
  flex-shrink: 0;
  min-width: 70px;
}
.lp-cert-text-toolbar__sidebar-input {
  height: 32px;
  width: 70px;
  padding: 0 8px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: center;
  color: var(--color-neutral-900);
  background: var(--color-white);
}
.lp-cert-text-toolbar__sidebar-input:hover {
  border-color: var(--color-primary-300);
}
.lp-cert-text-toolbar__sidebar-input:focus {
  border-color: var(--color-primary-500);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-100);
}
.lp-cert-text-toolbar__sidebar-input::-webkit-inner-spin-button, .lp-cert-text-toolbar__sidebar-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-text-toolbar__sidebar-input {
  -moz-appearance: textfield;
}
.lp-cert-text-toolbar__sidebar-input.lp-hidden {
  display: none;
}
.lp-cert-text-toolbar__pos-x, .lp-cert-text-toolbar__pos-y {
  width: 60px;
  flex: 0 0 60px;
}
.lp-cert-text-toolbar__textbox-width {
  width: 60px;
}

@media (max-width: 1400px) {
  .lp-cert-text-toolbar__controls {
    flex-wrap: wrap;
  }
}
.lp-cert-placeholder-autocomplete {
  position: absolute;
  z-index: 100000;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  color: #1f2328;
}
.lp-cert-placeholder-autocomplete__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.lp-cert-placeholder-autocomplete__item:hover, .lp-cert-placeholder-autocomplete__item.is-active {
  background: #f0f6ff;
}
.lp-cert-placeholder-autocomplete__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-cert-placeholder-autocomplete__key {
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .lp-cert-text-toolbar__select {
    min-width: 90px;
    max-width: 110px;
  }
}
@media (max-width: 900px) {
  .lp-cert-text-toolbar__controls {
    gap: 4px;
    flex-wrap: wrap;
  }
  .lp-cert-text-toolbar__select {
    min-width: 80px;
    max-width: 100px;
    height: 32px;
  }
  .lp-cert-text-toolbar__stepper {
    width: 26px;
    height: 32px;
  }
  .lp-cert-text-toolbar__input {
    height: 32px;
    width: 38px;
  }
  .lp-cert-text-toolbar__btn {
    width: 28px;
    height: 28px;
  }
  .lp-cert-text-toolbar__btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }
}
.lp-cert-image-toolbar,
.lp-cert-canvas-toolbar {
  display: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}
.lp-cert-image-toolbar.is-visible,
.lp-cert-canvas-toolbar.is-visible {
  display: flex;
}
.lp-cert-image-toolbar__controls,
.lp-cert-canvas-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.lp-cert-image-toolbar__separator,
.lp-cert-canvas-toolbar__separator {
  width: 1px;
  height: 20px;
  background: #e0e0e0;
  flex-shrink: 0;
  margin: 0 2px;
}
.lp-cert-image-toolbar__group,
.lp-cert-canvas-toolbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lp-cert-image-toolbar__trigger,
.lp-cert-canvas-toolbar__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid var(--color-neutral-500);
  border-radius: 6px;
  background: #fff;
  color: var(--color-neutral-900);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  height: 32px;
}
.lp-cert-image-toolbar__trigger:hover,
.lp-cert-canvas-toolbar__trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-image-toolbar__trigger.active, .lp-cert-image-toolbar__trigger.is-active, .lp-cert-image-toolbar__trigger.lp-cert-canvas-toolbar__resize.active,
.lp-cert-canvas-toolbar__trigger.active,
.lp-cert-canvas-toolbar__trigger.is-active,
.lp-cert-canvas-toolbar__trigger.lp-cert-canvas-toolbar__resize.active {
  background: var(--color-neutral-100);
}
.lp-cert-image-toolbar__label,
.lp-cert-canvas-toolbar__label {
  font-size: 11px;
  font-weight: 500;
  color: #646970;
  white-space: nowrap;
}
.lp-cert-image-toolbar__popup-wrapper,
.lp-cert-canvas-toolbar__popup-wrapper {
  position: relative;
  flex-shrink: 0;
}
.lp-cert-image-toolbar__trigger,
.lp-cert-canvas-toolbar__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  color: #1d2327;
  white-space: nowrap;
  position: relative;
}
.lp-cert-image-toolbar__trigger:hover,
.lp-cert-canvas-toolbar__trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-image-toolbar__trigger.is-active,
.lp-cert-canvas-toolbar__trigger.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-image-toolbar__trigger .dashicons,
.lp-cert-image-toolbar__trigger .lp-cert-icon,
.lp-cert-canvas-toolbar__trigger .dashicons,
.lp-cert-canvas-toolbar__trigger .lp-cert-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-cert-image-toolbar__trigger-arrow,
.lp-cert-canvas-toolbar__trigger-arrow {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  margin-right: 2px;
  transition: transform 0.2s ease;
}
.lp-cert-image-toolbar__trigger.is-active .lp-cert-image-toolbar__trigger-arrow,
.lp-cert-image-toolbar__trigger.is-active .lp-cert-canvas-toolbar__trigger-arrow,
.lp-cert-canvas-toolbar__trigger.is-active .lp-cert-image-toolbar__trigger-arrow,
.lp-cert-canvas-toolbar__trigger.is-active .lp-cert-canvas-toolbar__trigger-arrow {
  transform: rotate(-180deg);
}
.lp-cert-image-toolbar__popup,
.lp-cert-canvas-toolbar__popup {
  display: none;
  background: #fff;
  border-radius: 6px;
  min-width: 200px;
  padding: 12px;
}
.lp-cert-image-toolbar__popup.is-visible,
.lp-cert-canvas-toolbar__popup.is-visible {
  display: block;
}
.lp-cert-image-toolbar__popup-header,
.lp-cert-canvas-toolbar__popup-header {
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.lp-cert-image-toolbar__popup-title,
.lp-cert-canvas-toolbar__popup-title {
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
}
.lp-cert-image-toolbar__popup-content,
.lp-cert-canvas-toolbar__popup-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-cert-image-toolbar__popup-row,
.lp-cert-canvas-toolbar__popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-cert-image-toolbar__popup-row .lp-cert-image-toolbar__range,
.lp-cert-canvas-toolbar__popup-row .lp-cert-image-toolbar__range {
  flex: 1;
  margin: 0;
}
.lp-cert-image-toolbar__popup-row .lp-cert-image-toolbar__range-value,
.lp-cert-canvas-toolbar__popup-row .lp-cert-image-toolbar__range-value {
  min-width: 30px;
  text-align: left;
}
.lp-cert-image-toolbar__popup-label,
.lp-cert-canvas-toolbar__popup-label {
  font-size: 11px;
  font-weight: 500;
  color: #646970;
  min-width: 40px;
}
.lp-cert-image-toolbar__popup-btn,
.lp-cert-canvas-toolbar__popup-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 12px;
  color: #1d2327;
  text-align: right;
}
.lp-cert-image-toolbar__popup-btn:hover,
.lp-cert-canvas-toolbar__popup-btn:hover {
  background: #f6f7f7;
}
.lp-cert-image-toolbar__popup-btn .dashicons,
.lp-cert-image-toolbar__popup-btn .lp-cert-icon,
.lp-cert-canvas-toolbar__popup-btn .dashicons,
.lp-cert-canvas-toolbar__popup-btn .lp-cert-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.lp-cert-image-toolbar__corner-radius-range,
.lp-cert-canvas-toolbar__corner-radius-range {
  flex: 1;
  margin: 0;
}
.lp-cert-image-toolbar__popup-content,
.lp-cert-canvas-toolbar__popup-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-cert-image-toolbar__popup-content:has(.lp-cert-image-toolbar__opacity),
.lp-cert-canvas-toolbar__popup-content:has(.lp-cert-image-toolbar__opacity) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.lp-cert-image-toolbar__popup-content:has(.lp-cert-image-toolbar__opacity) .lp-cert-image-toolbar__range,
.lp-cert-canvas-toolbar__popup-content:has(.lp-cert-image-toolbar__opacity) .lp-cert-image-toolbar__range {
  flex: 1;
  margin: 0;
}
.lp-cert-image-toolbar__popup-content:has(.lp-cert-image-toolbar__opacity) .lp-cert-image-toolbar__range-value,
.lp-cert-canvas-toolbar__popup-content:has(.lp-cert-image-toolbar__opacity) .lp-cert-image-toolbar__range-value {
  min-width: 40px;
  text-align: left;
  font-size: 11px;
  color: #646970;
}
.lp-cert-image-toolbar__input,
.lp-cert-canvas-toolbar__input {
  height: 28px;
  width: 60px;
  padding: 0 6px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  font-size: 12px;
  text-align: center;
  background: var(--color-white);
  transition: all 0.15s ease;
}
.lp-cert-image-toolbar__input:hover,
.lp-cert-canvas-toolbar__input:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-300);
}
.lp-cert-image-toolbar__input:focus,
.lp-cert-canvas-toolbar__input:focus {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  outline: none;
}
.lp-cert-image-toolbar__input::-webkit-inner-spin-button, .lp-cert-image-toolbar__input::-webkit-outer-spin-button,
.lp-cert-canvas-toolbar__input::-webkit-inner-spin-button,
.lp-cert-canvas-toolbar__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-image-toolbar__input,
.lp-cert-canvas-toolbar__input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.lp-cert-image-toolbar__input--sm, .lp-cert-image-toolbar__input--small,
.lp-cert-canvas-toolbar__input--sm,
.lp-cert-canvas-toolbar__input--small {
  width: 45px;
}
.lp-cert-image-toolbar__range,
.lp-cert-canvas-toolbar__range {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #ddd;
  border-radius: 2px;
  cursor: pointer;
}
.lp-cert-image-toolbar__range::-webkit-slider-thumb,
.lp-cert-canvas-toolbar__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #2271b1;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lp-cert-image-toolbar__range::-webkit-slider-thumb:hover,
.lp-cert-canvas-toolbar__range::-webkit-slider-thumb:hover {
  background: #135e96;
}
.lp-cert-image-toolbar__range::-moz-range-thumb,
.lp-cert-canvas-toolbar__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #2271b1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.lp-cert-image-toolbar__range-value,
.lp-cert-canvas-toolbar__range-value {
  font-size: 11px;
  color: #646970;
  min-width: 35px;
  text-align: left;
}
.lp-cert-image-toolbar__slider-row,
.lp-cert-canvas-toolbar__slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-cert-image-toolbar__slider,
.lp-cert-canvas-toolbar__slider {
  --slider-progress: 100%;
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to left, var(--color-primary-500) 0%, var(--color-primary-500) var(--slider-progress), var(--color-neutral-200) var(--slider-progress), var(--color-neutral-200) 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.lp-cert-image-toolbar__slider::-webkit-slider-runnable-track,
.lp-cert-canvas-toolbar__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}
.lp-cert-image-toolbar__slider::-webkit-slider-thumb,
.lp-cert-canvas-toolbar__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-primary-500);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease;
}
.lp-cert-image-toolbar__slider::-webkit-slider-thumb:hover,
.lp-cert-canvas-toolbar__slider::-webkit-slider-thumb:hover {
  background: var(--color-primary-600);
}
.lp-cert-image-toolbar__slider::-moz-range-track,
.lp-cert-canvas-toolbar__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}
.lp-cert-image-toolbar__slider::-moz-range-thumb,
.lp-cert-canvas-toolbar__slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-primary-500);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.lp-cert-image-toolbar__group,
.lp-cert-canvas-toolbar__group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.lp-cert-image-toolbar__label,
.lp-cert-canvas-toolbar__label {
  font-size: 11px;
  font-weight: 500;
  color: #646970;
  white-space: nowrap;
}
.lp-cert-image-toolbar__btn-group,
.lp-cert-canvas-toolbar__btn-group {
  display: flex;
  background: #f6f7f7;
  border-radius: 3px;
  padding: 2px;
  gap: 1px;
}
.lp-cert-image-toolbar__btn,
.lp-cert-canvas-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 26px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  white-space: nowrap;
}
.lp-cert-image-toolbar__btn:hover,
.lp-cert-canvas-toolbar__btn:hover {
  border-color: #2271b1;
  background: #f6f7f7;
}
.lp-cert-image-toolbar__btn.is-active,
.lp-cert-canvas-toolbar__btn.is-active {
  border-color: #2271b1;
  background: #f0f6fc;
}
.lp-cert-image-toolbar__btn .dashicons,
.lp-cert-canvas-toolbar__btn .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.lp-cert-image-toolbar__btn-label,
.lp-cert-canvas-toolbar__btn-label {
  font-size: 12px;
  font-weight: 500;
}
.lp-cert-image-toolbar__set-as-bg,
.lp-cert-canvas-toolbar__set-as-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-cert-image-toolbar__set-as-bg:hover,
.lp-cert-canvas-toolbar__set-as-bg:hover {
  background: var(--color-neutral-50);
}
.lp-cert-image-toolbar__set-as-bg.is-active,
.lp-cert-canvas-toolbar__set-as-bg.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-image-toolbar__position-toggle,
.lp-cert-canvas-toolbar__position-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-cert-image-toolbar__position-toggle:hover,
.lp-cert-canvas-toolbar__position-toggle:hover {
  background: var(--color-neutral-50);
}
.lp-cert-image-toolbar__position-toggle.is-active,
.lp-cert-canvas-toolbar__position-toggle.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-image-toolbar__color,
.lp-cert-canvas-toolbar__color {
  position: relative;
}
.lp-cert-image-toolbar__color .iro-color-picker-container,
.lp-cert-canvas-toolbar__color .iro-color-picker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-cert-canvas-toolbar__controls {
  gap: 6px;
}
.lp-cert-canvas-toolbar__trigger {
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: var(--radius-xs);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.lp-cert-canvas-toolbar__trigger:hover {
  background-color: var(--color-neutral-50);
}
.lp-cert-canvas-toolbar__trigger.is-active {
  background: var(--color-neutral-50);
  color: var(--color-primary-500);
  border: 1px solid var(--color-primary-500);
}

@media (max-width: 1200px) {
  .lp-cert-image-toolbar__controls {
    flex-wrap: wrap;
  }
  .lp-cert-image-toolbar__separator {
    display: none;
  }
  .lp-cert-image-toolbar__range {
    width: 60px;
  }
}
@media (max-width: 900px) {
  .lp-cert-image-toolbar__controls {
    gap: 6px;
  }
  .lp-cert-image-toolbar__input {
    width: 50px;
  }
  .lp-cert-image-toolbar__btn {
    width: 24px;
    height: 24px;
  }
  .lp-cert-image-toolbar__btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }
}
.lp-cert-position-panel {
  display: none;
  overflow: hidden;
}
.lp-cert-position-panel.is-visible {
  display: block;
}
.lp-cert-position-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}
.lp-cert-position-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-800);
}
.lp-cert-position-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-gray-500);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
}
.lp-cert-position-panel__close:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}
.lp-cert-position-panel__content {
  padding: 16px;
}
.lp-cert-position-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lp-cert-position-panel__row:last-child {
  margin-bottom: 0;
}
.lp-cert-position-panel__pos-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-cert-position-panel__pos-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-cert-position-panel__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-600);
  min-width: 12px;
}
.lp-cert-position-panel__input {
  width: 60px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--color-gray-800);
  background: #fff;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
}
.lp-cert-position-panel__input::-webkit-outer-spin-button, .lp-cert-position-panel__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-position-panel__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
}
.lp-cert-position-panel__textwrap-row {
  padding-top: 12px;
  border-top: 1px solid var(--color-gray-200);
  margin-top: 12px;
}
.lp-cert-position-panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #fff;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.15s ease;
}
.lp-cert-position-panel__btn.is-active {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: #fff;
}
.lp-cert-position-panel__btn.is-active .lp-cert-icon:before {
  background-color: #fff;
}
.lp-cert-position-panel__btn .lp-cert-icon {
  width: 16px;
  height: 16px;
}
.lp-cert-position-panel__btn .lp-cert-icon:before {
  width: 16px;
  height: 16px;
}

.lp-cert-svg-toolbar {
  display: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
}
.lp-cert-svg-toolbar.is-visible {
  display: flex;
}
.lp-cert-svg-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.lp-cert-svg-toolbar__separator {
  width: 1px;
  height: 20px;
  background: #e0e0e0;
  flex-shrink: 0;
  margin: 0 2px;
}
.lp-cert-svg-toolbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lp-cert-svg-toolbar__label {
  font-size: 11px;
  font-weight: 500;
  color: #646970;
  white-space: nowrap;
}
.lp-cert-svg-toolbar__popup-wrapper {
  position: relative;
  flex-shrink: 0;
}
.lp-cert-svg-toolbar__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  color: #1d2327;
  white-space: nowrap;
  position: relative;
}
.lp-cert-svg-toolbar__trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-svg-toolbar__trigger.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-svg-toolbar__trigger .dashicons,
.lp-cert-svg-toolbar__trigger .lp-cert-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-cert-svg-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 26px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  white-space: nowrap;
}
.lp-cert-svg-toolbar__btn:hover {
  background: var(--color-neutral-50);
}
.lp-cert-svg-toolbar__btn.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-svg-toolbar__btn-label {
  font-size: 12px;
  font-weight: 500;
}
.lp-cert-svg-toolbar__position-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: #1d2327;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.lp-cert-svg-toolbar__position-toggle:hover {
  background: var(--color-neutral-50);
}
.lp-cert-svg-toolbar__position-toggle.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-svg-toolbar__fill-trigger {
  width: 28px;
  height: 28px;
  padding: 3px;
  border-radius: 4px;
  border: 1px solid var(--color-neutral-200);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
}
.lp-cert-svg-toolbar__fill-trigger:hover {
  background: var(--color-neutral-50);
}
.lp-cert-svg-toolbar__fill-trigger.is-active {
  background: var(--color-neutral-100);
}
.lp-cert-svg-toolbar__fill-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.lp-cert-svg-toolbar__popup {
  display: none;
  background: #fff;
  border-radius: 6px;
  padding: 12px;
}
.lp-cert-svg-toolbar__popup.is-visible {
  display: block;
}
.lp-cert-svg-toolbar__popup-header {
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.lp-cert-svg-toolbar__popup-title {
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
}
.lp-cert-svg-toolbar__popup-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-cert-svg-toolbar__popup-content:has(.lp-cert-svg-toolbar__opacity) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.lp-cert-svg-toolbar__popup-content:has(.lp-cert-svg-toolbar__opacity) .lp-cert-svg-toolbar__range {
  flex: 1;
  margin: 0;
}
.lp-cert-svg-toolbar__popup-content:has(.lp-cert-svg-toolbar__opacity) .lp-cert-svg-toolbar__range-value {
  min-width: 40px;
  text-align: left;
  font-size: 11px;
  color: #646970;
}
.lp-cert-svg-toolbar__popup-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-cert-svg-toolbar__popup-row--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp-cert-svg-toolbar__popup-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-600);
}
.lp-cert-svg-toolbar__popup-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] {
  min-width: 236px;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__popup-content {
  gap: 16px;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__popup-row--inline {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__input {
  width: 64px;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap {
  width: 100%;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-color-picker-container {
  align-items: stretch;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-color-picker-container > div,
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-color-picker-container svg,
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-hex-input-wrap,
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-hex-input {
  width: 100% !important;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-color-picker-container svg {
  height: auto !important;
  display: block;
}
.lp-cert-svg-toolbar__popup[data-popup-id=stroke] .lp-cert-svg-toolbar__color-input-wrap .iro-hex-input {
  box-sizing: border-box;
}
.lp-cert-svg-toolbar__color-presets {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 8px;
}
.lp-cert-svg-toolbar__color-preset {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-neutral-200);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.lp-cert-svg-toolbar__color-preset:hover {
  border-color: var(--color-primary-500);
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.lp-cert-svg-toolbar__color-preset:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-100);
}
.lp-cert-svg-toolbar__color-input-wrap .iro-color-picker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-cert-svg-toolbar__input {
  height: 28px;
  width: 44px;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
}
.lp-cert-svg-toolbar__input:hover {
  border-color: #2271b1;
}
.lp-cert-svg-toolbar__input:focus {
  border-color: #2271b1;
  outline: none;
}
.lp-cert-svg-toolbar__input::-webkit-inner-spin-button, .lp-cert-svg-toolbar__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-svg-toolbar__input {
  -moz-appearance: textfield;
}
.lp-cert-svg-toolbar__input--small {
  width: 45px;
}
.lp-cert-svg-toolbar__slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-cert-svg-toolbar__slider {
  --slider-progress: 100%;
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to left, var(--color-primary-500) 0%, var(--color-primary-500) var(--slider-progress), var(--color-neutral-200) var(--slider-progress), var(--color-neutral-200) 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.lp-cert-svg-toolbar__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}
.lp-cert-svg-toolbar__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-primary-500);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease;
}
.lp-cert-svg-toolbar__slider::-webkit-slider-thumb:hover {
  background: var(--color-primary-600);
}
.lp-cert-svg-toolbar__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}
.lp-cert-svg-toolbar__slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-primary-500);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.lp-cert-svg-toolbar__position-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

@media (max-width: 1200px) {
  .lp-cert-svg-toolbar__controls {
    flex-wrap: wrap;
  }
  .lp-cert-svg-toolbar__separator {
    display: none;
  }
  .lp-cert-svg-toolbar__range {
    width: 60px;
  }
}
@media (max-width: 900px) {
  .lp-cert-svg-toolbar__controls {
    gap: 6px;
  }
  .lp-cert-svg-toolbar__input {
    width: 50px;
  }
}
.lp-cert-resize-popup {
  display: none;
  background: #fff;
  border-radius: var(--radius-lg);
  width: 300px;
  padding: 20px;
}
.lp-cert-resize-popup.is-visible {
  display: block;
}
.lp-cert-resize-popup__header {
  margin-bottom: 16px;
}
.lp-cert-resize-popup__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.lp-cert-resize-popup__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-cert-resize-popup__inputs {
  display: flex;
  gap: 12px;
}
.lp-cert-resize-popup__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-500);
  display: block;
  margin-bottom: 6px;
}
.lp-cert-resize-popup__input-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__label {
  width: 100%;
  margin-bottom: 6px;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
  transition: border-color 0.15s ease;
  width: 100%;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input-wrapper:hover {
  border-color: var(--color-neutral-300);
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input-wrapper:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px var(--color-primary-100);
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 34px;
  padding: 0;
  border: none;
  background: var(--color-neutral-50);
  color: var(--color-neutral-600);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__stepper:active {
  background: var(--color-neutral-150);
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: transparent;
  text-align: center;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input:focus {
  outline: none;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input::-webkit-inner-spin-button, .lp-cert-resize-popup__input-group .lp-cert-resize-popup__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-resize-popup__input-group .lp-cert-resize-popup__input {
  -moz-appearance: textfield;
}
.lp-cert-resize-popup__input {
  width: 100%;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: #fff;
  text-align: center;
}
.lp-cert-resize-popup__input::placeholder {
  color: var(--color-neutral-400);
}
.lp-cert-resize-popup__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  background: #fff;
}
.lp-cert-resize-popup__input:disabled {
  background: var(--color-background-dark);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.lp-cert-resize-popup__input::-webkit-inner-spin-button, .lp-cert-resize-popup__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-resize-popup__input {
  -moz-appearance: textfield;
}
.lp-cert-resize-popup__presets {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.lp-cert-resize-popup__preset {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--color-border-light);
}
.lp-cert-resize-popup__preset:last-child {
  border-bottom: none;
}
.lp-cert-resize-popup__preset:hover {
  background: var(--color-background-light);
}
.lp-cert-resize-popup__preset input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.lp-cert-resize-popup__preset::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-neutral-300);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}
.lp-cert-resize-popup__preset:has(input:checked) {
  background: var(--color-background-light);
}
.lp-cert-resize-popup__preset:has(input:checked)::after {
  background: var(--color-success-400);
  border-color: var(--color-success-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.lp-cert-resize-popup__preset-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-cert-resize-popup__preset-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.lp-cert-resize-popup__preset-size {
  font-size: 11px;
  color: var(--color-neutral-500);
}
.lp-cert-resize-popup__apply {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary-500);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lp-cert-resize-popup__apply:hover {
  background: var(--color-primary-600);
}

.lp-cert-opacity-popup {
  display: none;
  background: #fff;
  border-radius: var(--radius-lg);
  width: 280px;
  padding: 20px;
}
.lp-cert-opacity-popup.is-visible {
  display: block;
  position: absolute;
}
.lp-cert-opacity-popup__header {
  margin-bottom: 14px;
}
.lp-cert-opacity-popup__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.lp-cert-opacity-popup__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-cert-opacity-popup__slider-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-cert-opacity-popup__slider {
  --slider-progress: 100%;
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to left, var(--color-primary-500) 0%, var(--color-primary-500) var(--slider-progress), var(--color-neutral-200) var(--slider-progress), var(--color-neutral-200) 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.lp-cert-opacity-popup__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}
.lp-cert-opacity-popup__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-500);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  margin-top: -6px;
}
.lp-cert-opacity-popup__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-500);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.lp-cert-opacity-popup__slider::-moz-range-track {
  background: var(--color-neutral-200);
  height: 6px;
  border-radius: 3px;
}
.lp-cert-opacity-popup__slider::-moz-range-progress {
  background: var(--color-primary-500);
  height: 6px;
  border-radius: 3px;
}
.lp-cert-opacity-popup__input {
  width: 50px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: #fff;
  text-align: center;
}
.lp-cert-opacity-popup__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  background: #fff;
}
.lp-cert-opacity-popup__input::-webkit-inner-spin-button, .lp-cert-opacity-popup__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.lp-cert-opacity-popup__input {
  -moz-appearance: textfield;
}
.lp-cert-opacity-popup__unit {
  display: none;
}
.lp-cert-opacity-popup__slider:disabled, .lp-cert-opacity-popup__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lp-cert-opacity-popup__no-image {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--color-alert-warning-bg);
  border: 1px solid var(--color-alert-warning-border);
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: var(--color-alert-warning);
  line-height: 1.4;
}

.lp-cert-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  background: rgba(0, 0, 0, 0.85);
}
.lp-cert-preview-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-xs);
  background: var(--color-neutral-50) !important;
  color: #50575e;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lp-cert-preview-modal__close:hover {
  background: var(--color-neutral-100) !important;
  border-color: var(--color-neutral-300) !important;
  color: #1d2327;
}
.lp-cert-preview-modal__close .lp-cert-icon:before {
  width: 16px;
  height: 16px;
}
.lp-cert-preview-modal__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.lp-cert-preview-modal__sidebar {
  width: 320px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.lp-cert-preview-modal__sidebar h3 {
  margin: 0;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1d2327;
}
.lp-cert-preview-modal__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  overflow: hidden;
}

.lp-cert-preview-content-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown {
  position: relative;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-preview-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  background: var(--color-primary-500);
  border: 1px solid var(--color-primary-500);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-preview-download:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-preview-download .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown.open .lp-cert-preview-download .dashicons {
  transform: rotate(-180deg);
}
.lp-cert-preview-content-header .lp-cert-download-dropdown.open .lp-cert-download-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-download-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 130px;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-download-menu li {
  margin: 0;
  padding: 0;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-download-menu .lp-cert-download-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: #3c434a;
  cursor: pointer;
  text-align: right;
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-download-menu .lp-cert-download-option:hover {
  background: #f6f7f7;
  color: var(--color-primary-500);
}
.lp-cert-preview-content-header .lp-cert-download-dropdown .lp-cert-download-menu .lp-cert-download-option .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #8c8f94;
}

.lp-cert-preview-fields {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-cert-preview-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-cert-preview-field label {
  font-size: 12px;
  font-weight: 500;
  color: #50575e;
}
.lp-cert-preview-field input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  color: #1d2327;
  background: #f9f9f9;
  transition: border-color 0.2s, background 0.2s;
}
.lp-cert-preview-field input:focus {
  outline: none;
  border-color: #2271b1;
  background: #fff;
}
.lp-cert-preview-field input::placeholder {
  color: #a0a0a0;
}

.lp-cert-preview-actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  background: #f9f9f9;
}
.lp-cert-preview-actions .lp-cert-preview-clear,
.lp-cert-preview-actions .lp-cert-preview-apply {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lp-cert-preview-actions .lp-cert-preview-clear {
  background: var(--color-neutral-white);
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-primary-500);
  color: var(--color-primary-500);
}
.lp-cert-preview-actions .lp-cert-preview-apply {
  background: var(--color-primary-500);
  border: 1px solid var(--color-primary-500);
  border-radius: var(--radius-xs);
  color: #fff;
}

.lp-cert-preview-canvas-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.lp-cert-preview-canvas-wrapper .canvas-container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.lp-cert-preview-open {
  overflow: hidden;
}

.cb-certificate-editor-header {
  margin-bottom: 20px;
}
.cb-certificate-editor-header .cb-back-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #50575e;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.15s ease;
}
.cb-certificate-editor-header .cb-back-link:hover {
  color: #2271b1;
}

#lp-course-builder .lp-cert-text-toolbar__select,
#lp-course-builder .lp-cert-image-toolbar select,
#lp-course-builder #cb-submitdiv select {
  height: 28px;
  padding: 0 8px 0 24px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  color: #1d2327;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat left 8px center;
  background-size: 8px 5px;
  appearance: none;
}
#lp-course-builder .lp-cert-text-toolbar__select:focus,
#lp-course-builder .lp-cert-image-toolbar select:focus,
#lp-course-builder #cb-submitdiv select:focus {
  border-color: #2271b1;
  outline: none;
  box-shadow: none;
}

.iro-color-picker-container .iro-hex-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.iro-color-picker-container .iro-hex-input-wrap input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  font-family: monospace;
}
.iro-color-picker-container .iro-hex-input-wrap input:focus {
  border-color: #2271b1;
  outline: none;
}

.lp-cert-sidebar__background .iro-color-picker-container {
  width: 100%;
}
.lp-cert-sidebar__background .iro-color-picker-container .IroColorPicker {
  width: 100% !important;
}