cms-block-editor 1.0.13 → 1.0.16

package/dist/index.css

@@ -3214,4 +3214,1103 @@
   max-width: 100%;
   margin: 16px 0;
 }
+
+/* src/styles/themes.css */
+:root {
+  --cms-color-primary: #667eea;
+  --cms-color-primary-hover: #5568d3;
+  --cms-color-primary-light: #e0e7ff;
+  --cms-color-primary-dark: #4c51bf;
+  --cms-color-secondary: #764ba2;
+  --cms-color-secondary-hover: #6a3f8f;
+  --cms-color-background: #ffffff;
+  --cms-color-surface: #f9fafb;
+  --cms-color-border: #e5e7eb;
+  --cms-color-divider: #d1d5db;
+  --cms-color-text-primary: #1f2937;
+  --cms-color-text-secondary: #6b7280;
+  --cms-color-text-disabled: #9ca3af;
+  --cms-color-success: #10b981;
+  --cms-color-warning: #f59e0b;
+  --cms-color-error: #ef4444;
+  --cms-color-info: #3b82f6;
+  --cms-color-editor-background: #ffffff;
+  --cms-color-editor-text: #1f2937;
+  --cms-color-editor-placeholder: #9ca3af;
+  --cms-color-toolbar-background: #f9fafb;
+  --cms-color-toolbar-text: #374151;
+  --cms-color-toolbar-border: #e5e7eb;
+  --cms-color-selection: #dbeafe;
+  --cms-color-highlight: #fef3c7;
+  --cms-color-focus: #667eea;
+  --cms-typography-font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  --cms-typography-font-family-mono:
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    "Liberation Mono",
+    monospace;
+  --cms-typography-font-size-xs: 0.75rem;
+  --cms-typography-font-size-sm: 0.875rem;
+  --cms-typography-font-size-md: 1rem;
+  --cms-typography-font-size-lg: 1.125rem;
+  --cms-typography-font-size-xl: 1.25rem;
+  --cms-typography-font-weight-normal: 400;
+  --cms-typography-font-weight-medium: 500;
+  --cms-typography-font-weight-bold: 600;
+  --cms-typography-line-height-tight: 1.25;
+  --cms-typography-line-height-normal: 1.5;
+  --cms-typography-line-height-relaxed: 1.75;
+  --cms-spacing-xs: 0.25rem;
+  --cms-spacing-sm: 0.5rem;
+  --cms-spacing-md: 1rem;
+  --cms-spacing-lg: 1.5rem;
+  --cms-spacing-xl: 2rem;
+  --cms-spacing-xxl: 3rem;
+  --cms-radius-none: 0;
+  --cms-radius-sm: 0.25rem;
+  --cms-radius-md: 0.5rem;
+  --cms-radius-lg: 0.75rem;
+  --cms-radius-full: 9999px;
+  --cms-shadow-none: none;
+  --cms-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --cms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --cms-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --cms-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+.cms-editor-shell {
+  background: var(--cms-color-editor-background);
+  color: var(--cms-color-editor-text);
+  font-family: var(--cms-typography-font-family);
+  border-radius: var(--cms-radius-md);
+  box-shadow: var(--cms-shadow-md);
+}
+.cms-toolbar {
+  background: var(--cms-color-toolbar-background);
+  color: var(--cms-color-toolbar-text);
+  border-bottom: 1px solid var(--cms-color-toolbar-border);
+}
+.cms-toolbar button {
+  color: var(--cms-color-toolbar-text);
+  border-radius: var(--cms-radius-sm);
+}
+.cms-toolbar button:hover {
+  background: var(--cms-color-surface);
+}
+.cms-toolbar button.active {
+  background: var(--cms-color-primary);
+  color: white;
+}
+.cms-editor-content {
+  color: var(--cms-color-editor-text);
+  font-size: var(--cms-typography-font-size-md);
+  line-height: var(--cms-typography-line-height-normal);
+}
+.cms-editor-placeholder {
+  color: var(--cms-color-editor-placeholder);
+}
+.cms-btn-primary {
+  background: var(--cms-color-primary);
+  color: white;
+  border-radius: var(--cms-radius-md);
+  box-shadow: var(--cms-shadow-sm);
+}
+.cms-btn-primary:hover {
+  background: var(--cms-color-primary-hover);
+}
+.cms-btn-secondary {
+  background: var(--cms-color-surface);
+  color: var(--cms-color-text-primary);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+}
+.cms-btn-secondary:hover {
+  background: var(--cms-color-background);
+}
+.cms-modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+}
+.cms-modal-content {
+  background: var(--cms-color-background);
+  color: var(--cms-color-text-primary);
+  border-radius: var(--cms-radius-lg);
+  box-shadow: var(--cms-shadow-xl);
+}
+.cms-theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--cms-spacing-sm);
+}
+.cms-theme-mode-toggle {
+  padding: var(--cms-spacing-sm) var(--cms-spacing-md);
+  background: var(--cms-color-surface);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+  cursor: pointer;
+  font-size: var(--cms-typography-font-size-lg);
+  transition: all 0.2s;
+}
+.cms-theme-mode-toggle:hover {
+  background: var(--cms-color-background);
+  transform: scale(1.05);
+}
+.cms-theme-selector {
+  position: relative;
+}
+.cms-theme-selector-button {
+  padding: var(--cms-spacing-sm) var(--cms-spacing-md);
+  background: var(--cms-color-surface);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+  cursor: pointer;
+  font-size: var(--cms-typography-font-size-sm);
+  font-weight: var(--cms-typography-font-weight-medium);
+  color: var(--cms-color-text-primary);
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: var(--cms-spacing-sm);
+}
+.cms-theme-selector-button:hover {
+  background: var(--cms-color-background);
+  border-color: var(--cms-color-primary);
+}
+.cms-theme-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+.cms-theme-selector-dropdown {
+  position: absolute;
+  top: calc(100% + var(--cms-spacing-sm));
+  right: 0;
+  background: var(--cms-color-background);
+  border: 1px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-lg);
+  box-shadow: var(--cms-shadow-xl);
+  padding: var(--cms-spacing-md);
+  min-width: 320px;
+  max-width: 400px;
+  z-index: 1000;
+}
+.cms-theme-selector-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--cms-spacing-md);
+  padding-bottom: var(--cms-spacing-sm);
+  border-bottom: 1px solid var(--cms-color-border);
+}
+.cms-theme-selector-header h3 {
+  margin: 0;
+  font-size: var(--cms-typography-font-size-md);
+  font-weight: var(--cms-typography-font-weight-bold);
+  color: var(--cms-color-text-primary);
+}
+.cms-theme-selector-header button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--cms-color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cms-radius-sm);
+}
+.cms-theme-selector-header button:hover {
+  background: var(--cms-color-surface);
+  color: var(--cms-color-text-primary);
+}
+.cms-theme-selector-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--cms-spacing-sm);
+  margin-bottom: var(--cms-spacing-md);
+}
+.cms-theme-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cms-spacing-sm);
+  padding: var(--cms-spacing-md);
+  background: var(--cms-color-surface);
+  border: 2px solid var(--cms-color-border);
+  border-radius: var(--cms-radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+.cms-theme-option:hover {
+  border-color: var(--cms-color-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--cms-shadow-md);
+}
+.cms-theme-option.active {
+  border-color: var(--cms-color-primary);
+  background: var(--cms-color-primary-light);
+}
+.cms-theme-preview {
+  width: 100%;
+  height: 40px;
+  border-radius: var(--cms-radius-sm);
+  border: 1px solid;
+  position: relative;
+  overflow: hidden;
+}
+.cms-theme-preview-accent {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+.cms-theme-name {
+  font-size: var(--cms-typography-font-size-sm);
+  font-weight: var(--cms-typography-font-weight-medium);
+  color: var(--cms-color-text-primary);
+  text-transform: capitalize;
+}
+.cms-theme-check {
+  position: absolute;
+  top: var(--cms-spacing-xs);
+  right: var(--cms-spacing-xs);
+  color: var(--cms-color-primary);
+  font-weight: var(--cms-typography-font-weight-bold);
+}
+.cms-theme-selector-modes {
+  display: flex;
+  gap: var(--cms-spacing-md);
+  padding-top: var(--cms-spacing-md);
+  border-top: 1px solid var(--cms-color-border);
+}
+.cms-theme-selector-modes label {
+  display: flex;
+  align-items: center;
+  gap: var(--cms-spacing-xs);
+  font-size: var(--cms-typography-font-size-sm);
+  color: var(--cms-color-text-primary);
+  cursor: pointer;
+}
+.cms-theme-selector-modes input[type=radio] {
+  cursor: pointer;
+  accent-color: var(--cms-color-primary);
+}
+@media (max-width: 768px) {
+  .cms-theme-selector-dropdown {
+    right: auto;
+    left: 0;
+    min-width: 280px;
+  }
+  .cms-theme-selector-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.cms-theme-customizer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.cms-theme-customizer-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--cms-color-overlay, rgba(0, 0, 0, 0.5));
+  backdrop-filter: blur(4px);
+}
+.cms-theme-customizer-panel {
+  position: relative;
+  background: var(--cms-color-background, #ffffff);
+  width: 500px;
+  max-width: 90vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--cms-shadow-xxl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
+  animation: slideLeft 0.3s ease-out;
+}
+.cms-theme-customizer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--cms-spacing-lg, 1.5rem);
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-theme-customizer-header h2 {
+  margin: 0;
+  font-size: var(--cms-typography-font-size-xl, 1.25rem);
+  font-weight: var(--cms-typography-font-weight-bold, 600);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-theme-customizer-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-theme-customizer-tabs button {
+  flex: 1;
+  padding: var(--cms-spacing-md, 1rem);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: var(--cms-typography-font-size-sm, 0.875rem);
+  font-weight: var(--cms-typography-font-weight-medium, 500);
+  color: var(--cms-color-text-secondary, #6b7280);
+  cursor: pointer;
+  transition: var(--cms-transition-fast, 150ms);
+}
+.cms-theme-customizer-tabs button:hover {
+  color: var(--cms-color-text-primary, #1f2937);
+  background: var(--cms-color-surface-hover, #f3f4f6);
+}
+.cms-theme-customizer-tabs button.active {
+  color: var(--cms-color-primary, #667eea);
+  border-bottom-color: var(--cms-color-primary, #667eea);
+  background: var(--cms-color-background, #ffffff);
+}
+.cms-theme-customizer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--cms-spacing-lg, 1.5rem);
+}
+.cms-customizer-section h3 {
+  margin: var(--cms-spacing-lg, 1.5rem) 0 var(--cms-spacing-md, 1rem) 0;
+  font-size: var(--cms-typography-font-size-md, 1rem);
+  font-weight: var(--cms-typography-font-weight-semibold, 600);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-customizer-section h3:first-child {
+  margin-top: 0;
+}
+.cms-color-grid,
+.cms-input-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--cms-spacing-md, 1rem);
+  margin-bottom: var(--cms-spacing-lg, 1.5rem);
+}
+.cms-color-input,
+.cms-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cms-spacing-xs, 0.25rem);
+}
+.cms-color-input label,
+.cms-text-input label {
+  font-size: var(--cms-typography-font-size-xs, 0.75rem);
+  font-weight: var(--cms-typography-font-weight-medium, 500);
+  color: var(--cms-color-text-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: var(--cms-typography-letter-spacing-wide, 0.025em);
+}
+.cms-color-input-wrapper {
+  display: flex;
+  gap: var(--cms-spacing-sm, 0.5rem);
+}
+.cms-color-input input[type=color] {
+  width: 48px;
+  height: 40px;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: var(--cms-radius-md, 0.5rem);
+  cursor: pointer;
+}
+.cms-color-input input[type=text],
+.cms-text-input input[type=text] {
+  flex: 1;
+  padding: var(--cms-spacing-sm, 0.5rem) var(--cms-spacing-md, 1rem);
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: var(--cms-radius-md, 0.5rem);
+  font-size: var(--cms-typography-font-size-sm, 0.875rem);
+  color: var(--cms-color-text-primary, #1f2937);
+  font-family: var(--cms-typography-font-family-mono, monospace);
+  transition: var(--cms-transition-fast, 150ms);
+}
+.cms-color-input input[type=text]:focus,
+.cms-text-input input[type=text]:focus {
+  outline: none;
+  border-color: var(--cms-color-focus, #667eea);
+  box-shadow: var(--cms-shadow-outline, 0 0 0 3px rgba(102, 126, 234, 0.5));
+}
+.cms-import-export {
+  display: flex;
+  gap: var(--cms-spacing-md, 1rem);
+  margin-bottom: var(--cms-spacing-lg, 1.5rem);
+}
+.cms-theme-preview-box {
+  margin-top: var(--cms-spacing-md, 1rem);
+}
+.cms-theme-customizer-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--cms-spacing-lg, 1.5rem);
+  border-top: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-theme-customizer-footer > div {
+  display: flex;
+  gap: var(--cms-spacing-md, 1rem);
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideLeft {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideRight {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes scaleUp {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes scaleDown {
+  from {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+@media (max-width: 768px) {
+  .cms-theme-customizer-panel {
+    width: 100vw;
+  }
+  .cms-color-grid,
+  .cms-input-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* src/styles/themeCustomizer.css */
+.cms-theme-customizer-advanced {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.cms-theme-customizer-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  animation: fadeIn 0.3s ease-out;
+}
+.cms-theme-customizer-panel-advanced {
+  position: relative;
+  background: var(--cms-color-background, #ffffff);
+  width: 600px;
+  max-width: 95vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
+  animation: slideLeft 0.3s ease-out;
+  z-index: 1;
+}
+.cms-theme-customizer-header-advanced {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.cms-header-left h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-theme-name-badge {
+  padding: 0.25rem 0.75rem;
+  background: var(--cms-color-primary-light, #e0e7ff);
+  color: var(--cms-color-primary, #667eea);
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-header-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.cms-icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cms-color-surface, #f3f4f6);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-icon-btn:hover:not(:disabled) {
+  background: var(--cms-color-primary, #667eea);
+  color: white;
+  border-color: var(--cms-color-primary, #667eea);
+  transform: translateY(-1px);
+}
+.cms-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.cms-close-btn-advanced {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: var(--cms-color-text-secondary, #6b7280);
+  cursor: pointer;
+  transition: all 0.2s;
+  border-radius: 8px;
+}
+.cms-close-btn-advanced:hover {
+  background: var(--cms-color-error-light, #fee2e2);
+  color: var(--cms-color-error, #ef4444);
+}
+.cms-search-bar {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-search-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  transition: all 0.2s;
+}
+.cms-search-input:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-search-input::placeholder {
+  color: var(--cms-color-text-tertiary, #9ca3af);
+}
+.cms-theme-tabs-advanced {
+  display: flex;
+  border-bottom: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.cms-theme-tabs-advanced::-webkit-scrollbar {
+  display: none;
+}
+.cms-tab-btn-advanced {
+  flex: 1;
+  min-width: 80px;
+  padding: 1rem 0.75rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-tab-btn-advanced:hover {
+  background: var(--cms-color-surface-hover, #f3f4f6);
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-tab-btn-advanced.active {
+  color: var(--cms-color-primary, #667eea);
+  border-bottom-color: var(--cms-color-primary, #667eea);
+  background: var(--cms-color-background, #ffffff);
+}
+.cms-tab-icon {
+  font-size: 1.25rem;
+}
+.cms-tab-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-theme-content-advanced {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+.cms-brand-generator {
+  background:
+    linear-gradient(
+      135deg,
+      var(--cms-color-primary-light, #e0e7ff) 0%,
+      var(--cms-color-secondary-light, #f3e8ff) 100%);
+  padding: 1.5rem;
+  border-radius: 12px;
+  margin-bottom: 2rem;
+}
+.cms-brand-generator h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+}
+.cms-brand-input-group {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+.cms-brand-color-picker {
+  width: 60px;
+  height: 48px;
+  border: 2px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.cms-brand-color-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  background: white;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 8px;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+.cms-color-group {
+  margin-bottom: 2rem;
+}
+.cms-color-group h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-color-grid-advanced {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+.cms-advanced-color-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-advanced-color-input label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-color-input-wrapper-advanced {
+  position: relative;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.cms-color-swatch {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 2px solid var(--cms-color-border, #e5e7eb);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+.cms-color-swatch:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.cms-color-text-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  transition: all 0.2s;
+}
+.cms-color-text-input:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-color-picker-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background: white;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  animation: scaleUp 0.2s ease-out;
+}
+.cms-color-picker-native {
+  width: 200px;
+  height: 150px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.cms-color-presets {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+.cms-color-preset {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 2px solid transparent;
+}
+.cms-color-preset:hover {
+  transform: scale(1.1);
+  border-color: var(--cms-color-primary, #667eea);
+}
+.cms-property-group {
+  margin-bottom: 2rem;
+}
+.cms-property-group h3 {
+  margin: 0 0 1rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--cms-color-text-primary, #1f2937);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.cms-property-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1rem;
+}
+.cms-property-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-property-input label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-property-input-field {
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  transition: all 0.2s;
+}
+.cms-property-input-field:focus {
+  outline: none;
+  border-color: var(--cms-color-primary, #667eea);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.cms-spacing-visual {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-spacing-item {
+  display: grid;
+  grid-template-columns: 60px 1fr 120px;
+  gap: 1rem;
+  align-items: center;
+}
+.cms-spacing-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--cms-color-text-secondary, #6b7280);
+}
+.cms-spacing-bar {
+  height: 32px;
+  background: var(--cms-color-primary, #667eea);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+.cms-spacing-input {
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-family: monospace;
+}
+.cms-radius-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+}
+.cms-radius-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-radius-preview {
+  width: 100%;
+  height: 60px;
+  background: var(--cms-color-primary, #667eea);
+  border: 2px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-shadow-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1rem;
+}
+.cms-shadow-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-shadow-preview {
+  width: 100%;
+  height: 60px;
+  background: white;
+  border-radius: 8px;
+}
+.cms-gradient-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+.cms-gradient-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cms-gradient-preview {
+  width: 100%;
+  height: 80px;
+  border-radius: 8px;
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+}
+.cms-validation {
+  padding: 1rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+}
+.cms-validation.valid {
+  background: var(--cms-color-success-light, #d1fae5);
+  color: var(--cms-color-success-dark, #065f46);
+}
+.cms-validation.invalid {
+  background: var(--cms-color-error-light, #fee2e2);
+  color: var(--cms-color-error-dark, #991b1b);
+}
+.cms-validation-success {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+.cms-validation-errors ul {
+  margin: 0.5rem 0 0 0;
+  padding-left: 1.5rem;
+}
+.cms-preview-tab {
+  padding: 2rem;
+  min-height: 100%;
+}
+.cms-preview-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+.cms-preview-colors {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+.cms-preview-color-box {
+  padding: 2rem;
+  border-radius: 12px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+.cms-preview-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-preview-typography {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cms-theme-footer-advanced {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid var(--cms-color-border, #e5e7eb);
+  background: var(--cms-color-surface, #f9fafb);
+}
+.cms-footer-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+.cms-select {
+  padding: 0.5rem 0.75rem;
+  background: var(--cms-color-surface, #f9fafb);
+  border: 1px solid var(--cms-color-border, #e5e7eb);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--cms-color-text-primary, #1f2937);
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .cms-theme-customizer-panel-advanced {
+    width: 100vw;
+  }
+  .cms-color-grid-advanced,
+  .cms-property-grid {
+    grid-template-columns: 1fr;
+  }
+  .cms-brand-input-group {
+    flex-direction: column;
+  }
+  .cms-brand-color-picker {
+    width: 100%;
+  }
+}
 /*# sourceMappingURL=index.css.map */