:root {
  /* Primitive Color Tokens */
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}


/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
.shhablonizator-page h1, .shhablonizator-page h2,
.shhablonizator-page h3, .shhablonizator-page h4,
.shhablonizator-page h5, .shhablonizator-page h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

.shhablonizator-page h1 {
  font-size: var(--font-size-4xl);
}
.shhablonizator-page h2 {
  font-size: var(--font-size-3xl);
}
.shhablonizator-page h3 {
  font-size: var(--font-size-2xl);
}
.shhablonizator-page h4 {
  font-size: var(--font-size-xl);
}
.shhablonizator-page h5 {
  font-size: var(--font-size-lg);
}
.shhablonizator-page h6 {
  font-size: var(--font-size-md);
}

.shhablonizator-page p {
  margin: 0 0 var(--space-16) 0;
}

.shhablonizator-page a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.shhablonizator-page a:hover {
  color: var(--color-primary-hover);
}

/*.shhablonizator-page code, .shhablonizator-page pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}*/

.shhablonizator-page code {
  padding: var(--space-1) var(--space-4);
}

.template-target.body p, .template-target.body pre {
  font-size: 1.2rem;
}

.shhablonizator-page pre {
/*  padding: var(--space-16);
  margin: var(--space-16) 0;*/
/*  overflow: auto;*/
/*  border: 1px solid var(--color-border);*/
}

.shhablonizator-page pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.shhablonizator-page .btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.shhablonizator-page .btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.shhablonizator-page .btn--primary:hover {
  background: var(--color-primary-hover);
}

.shhablonizator-page .btn--primary:active {
  background: var(--color-primary-active);
}

.shhablonizator-page .btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.shhablonizator-page .btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.shhablonizator-page .btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.shhablonizator-page textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

.shhablonizator-page select.form-control {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 2.5px 10px;
  padding-right: var(--space-32);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-8) center;
  background-size: 16px;
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: 15px;
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}



/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*.template-target :focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}*/

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* ============================================
   АККОРДЕОН ДЛЯ ЛЕВОЙ ПАНЕЛИ
   ============================================ */
.panel-blocks {
  padding: 0;
}
.blocks-panel-title, .styles-panel-title {
  display: none;
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.blocks-panel-title h3, .styles-panel-title h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.accordion-item {
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.accordion-header {
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    background: var(--color-background);
/*    border-bottom: 1px #eee solid;*/
    color: var(--color-text);
    transition: all var(--duration-normal) var(--ease-standard);
}

.accordion-header:hover {
    background: rgba(var(--color-teal-500-rgb), 0.08);
}

.accordion-item.active .accordion-header {
  background: #83A6A8;
  color: #fff;
}
.panel-blocks .accordion-item.active .accordion-header {
  color: #333;
}
.accordion-icon {
    transition: transform var(--duration-normal) var(--ease-standard);
    font-size: var(--font-size-sm);
    margin-left: var(--space-10);
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-body {
    display: none;
    padding: 10px;
    background: var(--color-background);
/*    max-height: 550px;*/
    overflow-y: auto;
}

.accordion-item.active .accordion-body {
    display: block;
}
.accordion-item.active .ab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

/* Адаптив для сетки тегов в левой палитре */
@media (max-width: 1280px) {
  .accordion-item.active .ab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .accordion-item.active .ab-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Стили для вложенного аккордеона (группы v3.2) ---- */
.sub-accordion {
    padding: 0;
    margin: 0;
}

.sub-accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
    box-shadow: none;
    margin-bottom: 0;
    background: transparent;
}

.sub-accordion .accordion-item:last-child {
    border-bottom: none;
}
.sub-accordion .accordion-header {
    padding: 5px 10px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    background: var(--color-surface);
    border-left: 3px solid transparent;
    transition: all var(--duration-fast) var(--ease-standard);
}
.sub-accordion .accordion-header:hover {
    background: rgba(var(--color-teal-500-rgb), 0.05);
    border-left-color: var(--color-primary);
}
.sub-accordion .accordion-item .accordion-header {
  padding: 10px 5px 0 0;
  background: initial;
  border: 0;
  border-left-color: initial;
  font-weight: var(--font-weight-medium);
}
.sub-accordion .accordion-body {
  padding: 5px 0 10px 0;
  /* max-height: 300px;*/
  background: var(--color-background);
}


/* ---- Стили для блоков внутри аккордеона (селектор по родителю, без .ready-block) ---- */
.accordion-body .block,
.accordion-body .section-block,
.accordion-body .block-drag > * {
    box-sizing: border-box;
    display: block;
    padding: var(--space-10);
    margin-bottom: 10px;
    border: 1px solid var(--color-card-border);
    background: var(--color-surface);
    cursor: move;
    transition: all var(--duration-fast) var(--ease-standard);
    font-size: var(--font-size-sm);
    width: 100%;
    text-align: center;
}
.ready-block-wrapper {
  max-width: 100%; 
  padding: 0;
  border-bottom: 0px #ccc solid;
  user-select: none;
}
.ready-block-wrapper:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
/* Сам блок (перетаскиваемый) — селектор по родителю .ready-block-wrapper (без .ready-block на элементе) */
.ready-block-wrapper .block-drag > *, .ready-block-wrapper > .img-wrapper.block-drag,
.ready-block-wrapper > .input-wrapper.block-drag,
.ready-block-wrapper > .textarea-wrapper.block-drag,
.ready-block-wrapper > .iframe-wrapper.block-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  user-select: none;
  cursor: grab;
  margin: 0;
  padding: 5px;
  border-radius: var(--radius-base);
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0;
  color: initial;
  border: 1px solid rgba(51, 51, 51, 0.65);
  position: relative;
}


/* Wrapper и block-drag тоже на всю ширину */
.ab-grid .ready-block-wrapper {
  width: 100%;
  min-width: 0;
}
.ab-grid .block-drag {
  width: 100%;
  min-width: 0;
  text-align: center;
}

/* Общее правило для всех псевдоэлементов - не расширять блок (селектор по родителю) */
.ready-block-wrapper .block-drag > *:before,
.ready-block-wrapper .block-drag > *:after {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  box-sizing: border-box;
}

.accordion-body .block h3,
.accordion-body .section-block h3 {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.accordion-body .block p,
.accordion-body .section-block p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.accordion-body .block:hover,
.accordion-body .section-block:hover {
    background: var(--color-secondary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.empty-message {
    padding: var(--space-20) var(--space-10);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Скролл для аккордеона */
.accordion-body::-webkit-scrollbar {
    width: 6px;
}

.accordion-body::-webkit-scrollbar-track {
    background: var(--color-secondary);
    border-radius: var(--radius-md);
}

.accordion-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-md);
}

.accordion-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ============================================
   ОСТАЛЬНЫЕ СТИЛИ (СУЩЕСТВУЮЩИЕ)
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    background: var(--color-background);
}

.shhablonizator-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--color-surface);
}

.header-shhablonizator {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  padding: 0;
  color: var(--color-btn-primary-text);
  box-shadow: var(--shadow-md);
}

.bi-block {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.header-shhablonizator h1 {
    margin: 0 var(--space-10) 0 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}
.header-shhablonizator h1 a.header-shhablonizator-logo {
  display: flex;
  max-width: 100px;
  color: inherit;
  text-decoration: none;
}
.header-shhablonizator h1 a.header-shhablonizator-logo:hover {
    opacity: 0.9;
}
a.header-shhablonizator-logo img {
  max-width: 100%;
  margin: 0!important;
}
.block-intro-top {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed var(--color-border);
}

.svarog-project-page-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.svarog-project-page-title {
    text-align: center;
    font-size: var(--font-size-base);
    color: rgba(3, 3, 3, 0.95);
    font-weight: var(--font-weight-medium);
}

.svarog-project-page-public-url {
    min-width: 0;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.svarog-project-page-public-url .svarog-url-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.svarog-project-page-public-url .svarog-url-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #666);
}

.svarog-project-page-public-url .svarog-url-icon svg {
    display: block;
}

.svarog-project-page-public-url .svarog-public-url-link {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
    word-break: break-all;
}

.svarog-project-page-public-url .svarog-public-url-link:hover {
  text-decoration: underline;
}

.svarog-project-page-public-url .svarog-url-republish-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-muted, #666);
    cursor: pointer;
    vertical-align: middle;
}

.svarog-project-page-public-url .svarog-url-republish-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-primary, #2563eb);
}

.svarog-project-page-public-url .svarog-url-republish-btn:focus-visible {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}

.svarog-project-page-public-url .svarog-url-republish-btn:disabled {
    opacity: 0.45;
    cursor: wait;
}

.svarog-project-page-public-url .svarog-url-republish-icon {
    display: block;
}

.template-name-input {
  min-width: 120px;
  max-width: 200px;
}

/* Блок авторизации в шапке */
.header-auth-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.header-avatar-wrap {
  position: relative;
  z-index: 30;
}
.header-auth-block .avatar {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
}
button.header-avatar-link {
  display: flex;
  align-items: center;
  line-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  color: inherit;
  font: inherit;
}
button.header-avatar-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}
button.header-avatar-link:hover .avatar,
button.header-avatar-link:focus-visible .avatar {
  opacity: 0.9;
}
.header-avatar-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: min(260px, calc(100vw - 24px));
  max-width: 320px;
  padding: 12px 14px;
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.header-avatar-wrap.is-open .header-avatar-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.header-avatar-dropdown-email {
  font-size: 14px;
  line-height: 1.45;
  word-break: break-all;
  color: #374151;
}
.header-avatar-dropdown-plan {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}
a.header-avatar-dropdown-profile {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--svarog-landing-primary, var(--color-primary, #2563eb));
  text-decoration: none;
}
a.header-avatar-dropdown-profile:hover {
  text-decoration: underline;
}
a.header-avatar-dropdown-logout {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #b91c1c;
  text-decoration: none;
}
a.header-avatar-dropdown-logout:hover {
  color: #991b1b;
  text-decoration: underline;
}
.header-auth-btn {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.header-auth-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
  color: inherit;
}

/* Панель действий (иконки) во второй строке */
.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Переключатель палитры тегов — iOS-style switch (Профессиональный / Бизнес) */
.svarog-tags-palette-switcher {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.svarog-tags-palette-track {
    position: relative;
    width: 51px;
    height: 31px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 31px;
    background: #e9e9ea;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.22s ease;
}
.svarog-tags-palette-track.is-on {
    background: #34c759;
}
.svarog-tags-palette-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.svarog-tags-palette-track.is-on .svarog-tags-palette-knob {
    transform: translateX(20px);
}
.svarog-tags-palette-track:focus {
    outline: none;
}
.svarog-tags-palette-track:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 3px;
}
.svarog-tags-palette-track:focus:not(:focus-visible) {
    outline: none;
}
.toolbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.toolbar-icon-btn svg {
    display: block;
    flex-shrink: 0;
}
.toolbar-icon-btn .save-status {
    margin-left: 2px;
    font-size: 10px;
    line-height: 1;
}

.toolbar-icon-btn.download-layout-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.toolbar-icon-btn.code-editor-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #1f2328;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.toolbar-icon-btn.code-editor-btn:hover {
    background: #f6f8fa;
}

.save-btn,
.publish-btn {
    padding: 5px 10px;
    background: var(--color-surface);
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    transition: all var(--duration-fast) var(--ease-standard);
    box-shadow: var(--shadow-inset-sm);
}
.save-btn {
  border: 1px var(--color-primary) solid;
}
.save-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.save-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-ring);
}

.publish-btn {
    background: var(--color-success);
    color: var(--color-btn-primary-text);
}

.publish-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.publish-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-ring);
}

.publish-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.toolbar-icon-btn.save-btn,
.toolbar-icon-btn.publish-btn,
.toolbar-icon-btn.delete-btn {
    padding: 0;
}

.download-layout-btn {
    padding: 5px 10px;
    background: #cdd;
    color: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: var(--font-weight-semibold);
}

.download-layout-btn:hover {
    opacity: 0.65;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.download-layout-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-ring);
}

/* ============================================
   КНОПКА УДАЛЕНИЯ
   ============================================ */

.delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ff4757 0%, #ee5a6f 100%);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: var(--radius-base);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
  white-space: nowrap;
}

.delete-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff3838 0%, #e63946 100%);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.5);
    transform: translateY(-2px);
}

.delete-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.3);
}

.delete-btn:disabled {
    background: linear-gradient(135deg, #ccc 0%, #aaa 100%);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}


.save-btn:disabled {
/*  background: linear-gradient(135deg, #ccc 0%, #aaa 100%);*/
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.publish-btn:disabled {
/*  background: linear-gradient(135deg, #ccc 0%, #aaa 100%);*/
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}



.delete-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.2), 0 2px 8px rgba(255, 71, 87, 0.3);
}


.source-block {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#source {
    width: 280px;
    border-right: 2px solid var(--color-border);
    overflow-y: auto;
    background: var(--color-surface);
    padding: var(--space-10);
}

#target {
    flex: 1;
    padding: var(--space-20);
    overflow-y: auto;
    background: var(--color-background);
    border-right: 2px solid var(--color-border);
}

#style-editor {
    width: 250px;
    border-left: 2px solid var(--color-border);
    overflow-y: auto;
    background: var(--color-surface);
    padding: var(--space-16);
}

#formContainer {
    font-size: var(--font-size-sm);
}

#formContainer p {
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--space-20) 0;
}

.section {
    margin-bottom: var(--space-20);
}

.section h4 {
    margin: 0 0 var(--space-12) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-8);
}

.sect-ls-100 {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-12);
}

.sect-ls-100 span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    font-weight: var(--font-weight-medium);
}

.sect-ls-100 input[type="color"],
.sect-ls-100 input[type="number"] {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.sect-ls-100 input[type="color"]:focus,
.sect-ls-100 input[type="number"]:focus {
    outline: var(--focus-outline);
    border-color: var(--color-primary);
}

.sect-ls-100 input[type="color"] {
    height: 40px;
    cursor: pointer;
}

.block,
.section-block {
    padding: 10px;
    margin: 0;
    background: var(--color-surface);
    border: 1px dotted rgba(95, 95, 95, 0.35);
    /* Для блоков на канве курсор по умолчанию */
    cursor: default;
    transition: border-color var(--duration-fast) var(--ease-standard),
            box-shadow var(--duration-fast) var(--ease-standard),
            background-color var(--duration-fast) var(--ease-standard);
    box-shadow: var(--shadow-xs);
    will-change: border-color, box-shadow, background-color;
}

.block:active,
.section-block:active {
    cursor: default;
}

/* Ховер-подсветка только на конкретном блоке (JS добавляет класс hovered) */
#template-target-zone *.hovered,
.editor-container-outside .template-target.hovered,
.editor-container-outside #template-target-zone.hovered {
    outline: 1px solid rgba(0, 123, 222, 1);
    outline-offset: -1px;
    position: relative;
}


/* Метка с названием тега над блоком при hover (тег берётся из data-display-tag, выставляется в JS) */
.template-target.body.hovered::before,
#template-target-zone *.hovered::before,
.editor-container-outside .template-target *.hovered::before,
.editor-container-outside #template-target-zone *.hovered::before {
  content: "<" attr(data-display-tag) ">";
  position: absolute;
  top: auto;
  bottom: 100%;
  left: -1px;
  background: #2196F3;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px 2px 0 0;
  z-index: 1000;
  pointer-events: none;
  font-family: 'Courier New', monospace;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Переопределяем только content для главной зоны (сама канва при hover) */
.editor-container-outside #template-target-zone.hovered::before {
    content: "<body>";
}

/* Дефолты тегов канвы: css/svarog-editor-tag-defaults.css */


.block.selected,
.section-block.selected {
    border-color: var(--color-primary);
    background: rgba(var(--color-teal-500-rgb), 0.05);
    box-shadow: var(--focus-ring);
}

.block h3,
.section-block h3 {
    margin: 0 0 var(--space-8) 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.block p,
.section-block p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.inner-container,
.header-shhablonizator .block-inside {
  max-width: 100%;
  min-height: 20px;
  padding: 3.5px 10px;
    background: var(--color-background);
}
.block-intro-button {
  min-height: 20px;
  border: 0;
  background: #d9f2fb;
  display: grid;
  grid-template-columns: 20% 1fr 20%;
  align-items: center;
  padding: 3.5px 0;
}
.intro-button-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.intro-button-center,
.intro-button-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-button-right {
  justify-content: flex-end;
  padding-left: 5px;
  padding-right: 8px;
}

.viewport-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Viewport Switcher */
.viewport-switcher {
  display: flex;
  gap: 3px;
  margin-left: 0;
  padding: 0 8px 0 0;
  border-right: 1px solid rgba(33, 128, 141, 0.22);
/*  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 1px solid rgba(33, 128, 141, 0.2);*/
}

.viewport-fullscreen-btn {
  margin-left: 0;
}

.viewport-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0px;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: #555;
  transition: all 0.2s ease;
}

.viewport-btn:hover {
  background: rgba(33, 128, 141, 0.1);
  color: var(--color-primary, #21808d);
}

.viewport-btn.active {
  background: var(--color-primary, #21808d);
  color: white;
  box-shadow: 0 2px 4px rgba(33, 128, 141, 0.2);
}

.viewport-btn svg {
  width: 16px;
  height: 16px;
}

.viewport-fullscreen-btn .icon-expand,
.viewport-fullscreen-btn .icon-collapse {
  display: block;
}
.viewport-fullscreen-btn .icon-collapse {
  display: none;
}
.svarog-canvas-fullscreen .viewport-fullscreen-btn .icon-expand {
  display: none;
}
.svarog-canvas-fullscreen .viewport-fullscreen-btn .icon-collapse {
  display: block;
}

/* Режим полноэкранной канвы */
.svarog-canvas-fullscreen .block-intro-top {
  display: none;
}
.svarog-canvas-fullscreen .block-intro-button {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  min-height: 48px;
  background: #d9f2fb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.svarog-canvas-fullscreen .shhablonizator-container {
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  gap: 0;
}
.svarog-canvas-fullscreen .blocks-panel-left,
.svarog-canvas-fullscreen .styles-panel-right {
  display: none;
}
.svarog-canvas-fullscreen .editor-container-outside {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  border-radius: 0;
}
.svarog-canvas-fullscreen .editor-container-outside .editor-container {
  width: 100%;
  min-height: 100%;
  height: auto;
}
.svarog-canvas-fullscreen #template-target-zone {
  min-height: 100%;
  height: auto;
}
/*.svarog-canvas-fullscreen .title-center-block {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}*/

.ghost {
    opacity: 0.5;
    background: var(--color-secondary);
}

/* Скроллинг */
#source::-webkit-scrollbar,
#target::-webkit-scrollbar,
#style-editor::-webkit-scrollbar {
    width: 8px;
}

#source::-webkit-scrollbar-track,
#target::-webkit-scrollbar-track,
#style-editor::-webkit-scrollbar-track {
    background: var(--color-secondary);
}

#source::-webkit-scrollbar-thumb,
#target::-webkit-scrollbar-thumb,
#style-editor::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

#source::-webkit-scrollbar-thumb:hover,
#target::-webkit-scrollbar-thumb:hover,
#style-editor::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}


/* ============================================
   СТИЛИ ДЛЯ ЯРЛЫЧКОВ БЛОКОВ
   ============================================ */

.block-item {
    margin-bottom: var(--space-12);
}

.block-label {
  display: inline-block;
  padding: var(--space-4) var(--space-10);
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.block-item .block,
.block-item .section-block {
    padding: var(--space-10);
    margin: 0;
    border: 1px solid var(--color-card-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    /* ... остальные стили */
}
.ab-outside {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ab-outside .block-label {
    margin-bottom: var(--space-8) !important; /* Отрываем лейбу */
    margin-right: var(--space-12);
}

.clone-dragging {
    margin-top: 0 !important;
}

/* Блокируем встроенный drag на wrapper, разрешаем на содержимом */
.ready-block-label {
    pointer-events: none;
    user-select: none;
}

/* Название блока (снаружи, не перетаскивается) */
.ready-block-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
    padding: 0;
    letter-spacing: 0.01em;
    user-select: none;  /* Не выделяется */
    pointer-events: none;  /* Не перехватывает события */
}

/* 🖼️ МЕДИА */
.ready-block-wrapper > .img-wrapper.block-drag, .ready-block-wrapper > .picture-wrapper.block-drag,
.ready-block-wrapper > .figure-wrapper.block-drag {
  height: 38px;
  padding: 0;
  overflow: hidden;
}

.ready-block-wrapper > .img-wrapper.block-drag, .ready-block-wrapper > .img-wrapper.block-drag img {
  background: #FFF8E1;
}

.panel-blocks .ready-block-wrapper img {
  display: block;
  height: 100%;
  margin: auto;
  padding: 0;
  border: 0;
}
.panel-blocks .ready-block-wrapper img:before {
  content: none;
}
.ready-block-wrapper .block-drag > picture {padding: 0; background: #FFF3CD;}
.ready-block-wrapper .block-drag > figure {padding: 0; background: #FFEDB8;}
.panel-blocks .ready-block-wrapper .block-drag > video {
  padding: 0;
  background: #FFE6A1 url('../images/video-tag.svg') center / contain no-repeat;
}
.panel-blocks .ready-block-wrapper .block-drag > audio {
  padding: 0;
  background: #FFDF8A url('../images/audio-tag.svg') center / contain no-repeat;
}
.panel-blocks .ready-block-wrapper .block-drag > video::-webkit-media-controls, .panel-blocks .ready-block-wrapper .block-drag > audio::-webkit-media-controls {
  display: none!important;
}
.ready-block-wrapper .block-drag .iframe-wrapper > iframe, .ready-block-wrapper .block-drag .iframe-wrapper {background: #FFD873;}
.ready-block-wrapper .block-drag > .embed-wrapper > embed,
.ready-block-wrapper .block-drag > .embed-wrapper {background: #FFD05C;}
.ready-block-wrapper .block-drag > .object-wrapper > object,
.ready-block-wrapper .block-drag > .object-wrapper {background: #FFC94A;}
.ready-block-wrapper .block-drag > .embed-wrapper,
.ready-block-wrapper .block-drag > .object-wrapper {
  padding: 0!important;
  overflow: hidden;
}
.panel-blocks .ready-block-wrapper .block-drag > .embed-wrapper > embed,
.panel-blocks .ready-block-wrapper .block-drag > .object-wrapper > object {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ready-block-wrapper .block-drag > map {background: #FFC238;}

.ready-block-wrapper .block-drag > source {background: #FFEFC0;}
.ready-block-wrapper .block-drag > track {background: #FFEFC0;}


.ready-block-wrapper .block-drag > *:active {
    cursor: grabbing;
}

/* Разделительная линия */
.ready-block-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border, #ddd), transparent);
    margin-top: 10px;
}

.shhablonizator-container {
  display: flex;
  gap: 10px;
  height: calc(100vh - 83px);
  padding: 0 0 10px 0;
  background: #d9f2fb;
}

.blocks-panel-left {
  width: 20%;
  min-width: 304px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

.template-target {
  height: 100%;
  min-height: calc(100vh - 94px);
  margin: auto;
  padding: 0px;
  line-height: 0;
  background: #fff;
  border: 1px #c9c9c9 solid;
  /*  box-shadow: #ccc 0px 1px 2px 2px;*/
}


.styles-panel-right {
  width: 20%;
  background: var(--color-surface);
/*  border-radius: var(--radius-base);*/
  border: 1px solid var(--color-border);
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

/* Скрыто: имя страницы/шаблона нужно для экспорта в файлы и подстановки при загрузке, в интерфейсе не показываем */
.template-name-input {
  display: none;
}
.template-name-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.block.selected, [class*="block-"].selected,
.template-target.selected, #template-target-zone.selected {
  outline: 2px solid rgba(0, 123, 222, 1);
  outline-offset: -2px;
  box-shadow: inset 0 0 7px rgba(0, 123, 255, 0.35)!important; 
}

/* Выбранное изображение — курсор pointer (можно дважды кликнуть) */
img[class*="block-"].selected {
    cursor: pointer;
}
.editor-container-outside {
  flex: 1;
  background: #eee;
  border-radius: 0;
/*  border: 1px dotted rgba(95, 95, 95, 0.35);*/
  position: relative;
}

/* Отступы между блоками — зона для дропа «между» (главная и вложенные зоны) */
#template-target-zone > * + *,
#template-target-zone [class*="block-"] > * + * {
/*  margin-top: 8px;*/
}

.editor-container-outside a, .editor-container-outside span {
  display: inline-block;
}


/* ============================================
  ЦВЕТОВАЯ СХЕМА CHAKRA RAINBOW (по группам)
  Низ палитры: красный, верх палитры: фиолетовый
  ============================================ */


/* Псевдоэлементы для всех блоков */
.block-drag > *:before {
 content: '';
  width: 100%;
 font-size: 12px;
}

/* 📦 КОНТЕЙНЕРЫ И СТРУКТУРА — фиолетовая гамма (верх палитры) */
.ready-block-wrapper .block-drag > main {background: #F3E8FF;}
.ready-block-wrapper .block-drag > section {background: #E9D8FD;}
.ready-block-wrapper .block-drag > article {background: #DDC4FA;}
.ready-block-wrapper .block-drag > div {background: #D0B0F6;}
.ready-block-wrapper .block-drag > aside {background: #C29BF2;}
.ready-block-wrapper .block-drag > address {background: #B487EE;}
.ready-block-wrapper .block-drag > pre {background: #A874EA;}
.ready-block-wrapper .block-drag > hgroup {background: #9B61E6;}


/* 🧭 НАВИГАЦИЯ — бирюзово-циановая гамма (отдельный спектр) */
.ready-block-wrapper .block-drag > header {
  background: #DDF7F6;
}
.ready-block-wrapper .block-drag > footer {
  background: #BDEEEE;
}
.ready-block-wrapper .block-drag > nav {
  background: #97E3E4;
}

/* 🔗 ССЫЛКИ И КНОПКИ — зелёная гамма */
.ready-block-wrapper .block-drag > a {background: #E5F8EA;}
.ready-block-wrapper .block-drag > button {background: #CFF0D8;}
.ready-block-wrapper .block-drag > details {background: #B4E6C0;}
.ready-block-wrapper .block-drag > dialog {
  background: #98DBA8;
  border: 1px dashed rgba(0, 0, 0, 0.25);
}
.ready-block-wrapper .block-drag > dialog p {
  display: none;
  font-size: 0;
}

/* 📋 СПИСКИ — янтарно-коралловая гамма */
.ready-block-wrapper .block-drag > ul,
.ready-block-wrapper .block-drag > ol {
  padding: 5px 5px;
  max-width: 100%;
  overflow: hidden;
}
.ready-block-wrapper .block-drag > ul li,
.ready-block-wrapper .block-drag > ol li {
  display: none;
  list-style-type: none;
  background: #FF9D6E;
}
.ready-block-wrapper .block-drag > ul {background: #FFDCC8;}
.ready-block-wrapper .block-drag > ol {background: #FFC7A8;}
.ready-block-wrapper .block-drag > dl {background: #FFB286;}


/* 📝 ТЕКСТ И ЗАГОЛОВКИ — сине-голубая гамма */
.ready-block-wrapper .block-drag > h1 {background: #E6F1FF;}
.ready-block-wrapper .block-drag > p {background: #DCEBFF;}
.ready-block-wrapper .block-drag > span {background: #D2E5FF;}
.ready-block-wrapper .block-drag > blockquote {background: #C8DFFF;}
.ready-block-wrapper .block-drag > q {background: #BED8FF;}
.ready-block-wrapper .block-drag > hr {background: #B3D1FF;}
.ready-block-wrapper .block-drag > cite {background: #A8CAFF;}
.ready-block-wrapper .block-drag > abbr {background: #9DC2FC;}
.ready-block-wrapper .block-drag > dfn {background: #92BAF7;}
.ready-block-wrapper .block-drag > data {background: #87B2F1;}
.ready-block-wrapper .block-drag > time {background: #7DA9EA;}
.ready-block-wrapper .block-drag > code {background: #72A0E3;}
.ready-block-wrapper .block-drag > kbd {background: #6797DC;}
.ready-block-wrapper .block-drag > var {background: #5D8ED4;}
.ready-block-wrapper .block-drag > samp {background: #5285CC;}
.ready-block-wrapper .block-drag > sub {background: #487CC3;}
.ready-block-wrapper .block-drag > sup {background: #3F73BA;}
.ready-block-wrapper .block-drag > small {background: #386AB0;}
.ready-block-wrapper .block-drag > bdi {background: #3161A6;}
.ready-block-wrapper .block-drag > bdo {background: #2B589C;}
.ready-block-wrapper .block-drag > ruby {background: #254F92;}

.ready-block-wrapper .block-drag > wbr {background: #9FBFFF;}

/* 🔗 ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ */
.ready-block-wrapper .block-drag > summary {background: #7ECF92;}


/* 📄 ФОРМЫ — красная гамма */
.ready-block-wrapper .block-drag > form {background: #FDEBEC; text-align: left;}

.ready-block-wrapper .block-drag > form input {
  display: none;
}
.input-wrapper, .textarea-wrapper {
  position: relative;
}

.ready-block-wrapper > .input-wrapper.block-drag {background: #FADFE1;}
.ready-block-wrapper .block-drag input[type="text"] {
  height: 100%;
  border: 0;
  background: inherit;
  outline: none;
}
.ready-block-wrapper > .textarea-wrapper.block-drag {background: #F8D2D6;}
.ready-block-wrapper > .textarea-wrapper.block-drag textarea {
  height: 100%;
  min-height: 0;
  border: 0;
  background: inherit;
  outline: none;
  resize: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* В палитре iframe не должен забирать pointer/drag события у карточки блока */
.ready-block-wrapper .block-drag > .iframe-wrapper iframe {
  height: 100%;
  pointer-events: none;
}

/* На канве iframe не должен блокировать выделение и перетаскивание блока-обертки */
#template-target-zone [class*="block-"] iframe,
#template-target-zone [class*="block-"] > embed,
#template-target-zone [class*="block-"] > object {
  pointer-events: none;
}
.ready-block-wrapper > .block-drag label {background: #F5C4CB;}
.ready-block-wrapper .block-drag > fieldset {background: #F2B5C0;}
.ready-block-wrapper .block-drag > .select-wrapper {
  position: relative;
  border-radius: var(--radius-base);
  background: #EEA5B3;
  border: 1px solid #d48a98;
}
.ready-block-wrapper .block-drag > .select-wrapper > select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 28px 8px 10px;
  font-size: 12px;
  color: #3b1f26;
  cursor: grab;
  pointer-events: none;
  opacity: 0;
}
/* Кастомная "кнопка"/стрелка справа */
.ready-block-wrapper .block-drag > .select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #5b2f38;
  font-size: 11px;
}

.ready-block-wrapper .block-drag > datalist {background: #E995A6;}
.ready-block-wrapper .block-drag > output {background: #E38398;}
.ready-block-wrapper .block-drag > legend {background: #DB7690;}
.ready-block-wrapper .block-drag > progress {background: #D36883; }
.ready-block-wrapper .block-drag > meter {background: #CB5B76;}




/* =========================================
   PROGRESS + METER
   Only for left palette (.ready-block-wrapper .block-drag)
   ========================================= */

/* Base elements */
.ready-block-wrapper .block-drag progress,
.ready-block-wrapper .block-drag meter {
  flex-direction: column;
  justify-content: space-between;
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
.ready-block-wrapper .block-drag progress::-webkit-progress-inner-element, .ready-block-wrapper .block-drag meter::-webkit-meter-inner-element {
  height: 11px;
  border-radius: 999px;
}

/* ===== PROGRESS ===== */
/* Chrome/Safari */
.ready-block-wrapper .block-drag progress::-webkit-progress-bar {
  height: 11px;
  border-radius: 999px;
  background: #e5e7eb;
}
.ready-block-wrapper .block-drag progress::-webkit-progress-value {
  height: 11px;
  border-radius: 999px;
  background: #3b82f6; /* fill progress */
}
/* Firefox */
.ready-block-wrapper .block-drag progress::-moz-progress-bar {
  height: 11px;
  border-radius: 999px;
  background: #3b82f6; /* Firefox fill */
}

/* ===== METER ===== */
/* Chrome/Safari */
.ready-block-wrapper .block-drag meter::-webkit-meter-bar {
  height: 11px;
  border-radius: 999px;
  background: #e5e7eb;
}
.ready-block-wrapper .block-drag meter::-webkit-meter-optimum-value,
.ready-block-wrapper .block-drag meter::-webkit-meter-suboptimum-value,
.ready-block-wrapper .block-drag meter::-webkit-meter-even-less-good-value {
  height: 11px;
  border-radius: 999px;
  background: #10b981; /* зелёный */
}
.ready-block-wrapper .block-drag meter::-webkit-meter-optimum-value {
  background: #10b981; /* зелёный */
}
.ready-block-wrapper .block-drag meter::-webkit-meter-suboptimum-value {
  background: #f59e0b; /* жёлтый */
}
.ready-block-wrapper .block-drag meter::-webkit-meter-even-less-good-value {
  background: #ef4444; /* красный */
}
/* Firefox */
.ready-block-wrapper .block-drag meter::-moz-meter-bar {
  height: 11px;
  border-radius: 999px;
  background: #10b981; /* Firefox */
}



.ready-block-wrapper .input-wrapper input::placeholder,
.ready-block-wrapper .textarea-wrapper textarea::placeholder {
  opacity: 0;
}
.ready-block-wrapper .block-drag > label:before {
  content: "<label>";
}
.ready-block-wrapper .block-drag > textarea:before {
  content: "<textarea>";
}

.ready-block-wrapper > .input-wrapper.block-drag:before {
  content: "<input>";
  width: initial;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 12px;
  z-index: 100;
  pointer-events: none;
}

.ready-block-wrapper > .textarea-wrapper.block-drag:before {
  content: "<textarea>";
  width: initial;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 12px;
  z-index: 100;
  pointer-events: none;
}
.ready-block-wrapper .block-drag > form:before {
  content: "<form>\A\00a0\00a0\00a0 input";
}
.ready-block-wrapper .block-drag input[type="text"]:before {
  content: none;
}

/* 📊 ТАБЛИЦЫ — тёмно-красная гамма (нижний уровень) */
.ready-block-wrapper .block-drag > table { background: #E2B7B7;}
.ready-block-wrapper .block-drag > thead { background: #D59898;}
.ready-block-wrapper .block-drag > tbody { background: #C77979;}
.ready-block-wrapper .block-drag > tfoot { background: #B85B5B;}
.ready-block-wrapper .block-drag > tr { background: #CE8A8A;}
.ready-block-wrapper .block-drag > th, .ready-block-wrapper .block-drag > td { background: #DFABAB;}
.ready-block-wrapper .block-drag > caption { background: #EDD0D0;}

/* Hover-эффект для всех блоков палитры (селектор по родителю) */
.ready-block-wrapper .block-drag > *:hover, .ready-block-wrapper > .input-wrapper.block-drag:hover,
.ready-block-wrapper > .textarea-wrapper.block-drag:hover,
.ready-block-wrapper > .img-wrapper.block-drag:hover, .ready-block-wrapper > .picture-wrapper.block-drag:hover,
.ready-block-wrapper > .figure-wrapper.block-drag:hover {
  filter: brightness(95%);
  border-color: #757575; /* тёмно-серая нейтральная рамка */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.ready-block-wrapper > .picture-wrapper.block-drag > *:hover, .ready-block-wrapper > .figure-wrapper.block-drag > *:hover {
  transform: none;
}

.ready-block-wrapper .block-drag input[type="text"]:hover, .panel-blocks .ready-block-wrapper img:hover {
  filter: initial;
  border-color: initial;
  box-shadow: initial;
  transform: initial;
  border-radius: 0;
  overflow: inherit;
  border: initial;
}
.block-drag > .img-wrapper:before, .img-wrapper.block-drag:before {
  content: none;
  border: 0;
}

/* Контент псевдоэлементов для отображения названий тегов (селектор по родителю и по тегу) */
.ready-block-wrapper .block-drag > main:before {
  content: "<main>";
}
.ready-block-wrapper .block-drag > section:before {
  content: "<section>";
}
.ready-block-wrapper .block-drag > article:before {
  content: "<article>";
}
.ready-block-wrapper .block-drag > div:before {
  content: "<div>";
}
.ready-block-wrapper .block-drag > aside:before {
  content: "<aside>";
}
.ready-block-wrapper .block-drag > header:before {
  content: "<header>";
}
.ready-block-wrapper .block-drag > footer:before {
  content: "<footer>";
}
.ready-block-wrapper .block-drag > nav:before {
  content: "<nav>";
}
.ready-block-wrapper .block-drag > button:before {
  content: "<button>";
}
.ready-block-wrapper .block-drag > a:before {
  content: "<a>";
}
.ready-block-wrapper .block-drag > p:before {
  content: "<p>";
}
.ready-block-wrapper .block-drag > div.iframe-wrapper:before {
  content: "<iframe>";
  position: absolute;
}
/* Специальные стили для списков (селектор по родителю и по тегу) */
.ready-block-wrapper .block-drag > ul:before,
.ready-block-wrapper .block-drag > ol:before {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
}
.ready-block-wrapper .block-drag > ul:before {
  content: "<ul>\A\00a0\00a0\00a0 • пункты li";
}
.ready-block-wrapper .block-drag > ol:before {
  content: "<ol>\A\00a0\00a0\00a0 1 пункты li";
}
.ready-block-wrapper .block-drag > ul li:before,
.ready-block-wrapper .block-drag > ol li:before {
  content: "<li>пункт";
}
.ready-block-wrapper .block-drag > h1:before {
  content: "<h1>-<h6>";
}
.ready-block-wrapper .block-drag > span:before {
  content: "<span>";
}
.ready-block-wrapper .block-drag > blockquote:before {
  content: "<blockquote>";
}
.ready-block-wrapper .block-drag > hr:before {
  content: "<hr>";
}
.ready-block-wrapper .block-drag > br:before {
  content: "<br>";
}
.ready-block-wrapper .block-drag > address:before {content: "<address>";}
.ready-block-wrapper .block-drag > pre:before {content: "<pre>";}

.ready-block-wrapper .block-drag > hgroup:before {content: "<hgroup>";}
.ready-block-wrapper .block-drag > q:before {content: "<q>";}
.ready-block-wrapper .block-drag > cite:before {content: "<cite>";}
.ready-block-wrapper .block-drag > abbr:before {content: "<abbr>";}
.ready-block-wrapper .block-drag > dfn:before {content: "<dfn>";}
.ready-block-wrapper .block-drag > data:before {content: "<data>";}
.ready-block-wrapper .block-drag > time:before {content: "<time>";}
.ready-block-wrapper .block-drag > code:before {content: "<code>";}
.ready-block-wrapper .block-drag > var:before {content: "<var>";}
.ready-block-wrapper .block-drag > samp:before {content: "<samp>";}
.ready-block-wrapper .block-drag > kbd:before {content: "<kbd>";}
.ready-block-wrapper .block-drag > sub:before {content: "<sub>";}
.ready-block-wrapper .block-drag > sup:before {content: "<sup>";}
.ready-block-wrapper .block-drag > small:before {content: "<small>";}
.ready-block-wrapper .block-drag > bdi:before {content: "<bdi>";}
.ready-block-wrapper .block-drag > bdo:before {content: "<bdo>";}
.ready-block-wrapper .block-drag > ruby:before {content: "<ruby>";}
.ready-block-wrapper .block-drag > wbr:before {content: "<wbr>";}
.ready-block-wrapper .block-drag > details:before {content: "<details>";}
.ready-block-wrapper .block-drag > dialog:before {content: "<dialog>";}

.ready-block-wrapper .block-drag > picture:before, .ready-block-wrapper .block-drag > figure:before {
  display: inline-block;
  width: auto;
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 2px;
  background: rgba(255, 255, 255, 0.77);
  border-radius: 9px;
}

.ready-block-wrapper .block-drag > picture:before {
  content: "<picture>";
}
.ready-block-wrapper .block-drag > figure:before {
  content: "<figure>";
}
.ready-block-wrapper .block-drag > video:before {content: "<video>";}
.ready-block-wrapper .block-drag > audio:before {content: "<audio>";}
.ready-block-wrapper .block-drag > .embed-wrapper:before {content: "<embed>"; position: absolute;}
.ready-block-wrapper .block-drag > .object-wrapper:before {content: "<object>"; position: absolute;}
.ready-block-wrapper .block-drag > iframe:before {content: "<iframe>";}
.ready-block-wrapper .block-drag > embed:before {content: "<embed>";}
.ready-block-wrapper .block-drag > object:before {content: "<object>";}
.ready-block-wrapper .block-drag > map:before {content: "<map>";}
.ready-block-wrapper .block-drag > dl:before {content: "<dl>";}
.ready-block-wrapper .block-drag > fieldset:before {content: "<fieldset>";}
.ready-block-wrapper .block-drag > .select-wrapper:before {content: "<select>"; position: absolute;}
.ready-block-wrapper .block-drag > datalist:before {content: "<datalist>";}
.ready-block-wrapper .block-drag > output:before {content: "<output>";}
.ready-block-wrapper .block-drag > progress:before {content: "<progress>";}
.ready-block-wrapper .block-drag > meter:before {content: "<meter>";}
.ready-block-wrapper .block-drag > table:before {content: "<table>";}
.ready-block-wrapper .block-drag > caption:before {content: "<caption>";}
.ready-block-wrapper .block-drag > thead:before {content: "<thead>";}
.ready-block-wrapper .block-drag > tbody:before {content: "<tbody>";}
.ready-block-wrapper .block-drag > tfoot:before {content: "<tfoot>";}
.ready-block-wrapper .block-drag > tr:before {content: "<tr>";}
.ready-block-wrapper .block-drag > th:before {content: "<th>";}
.ready-block-wrapper .block-drag > td:before {content: "<td>";}
.ready-block-wrapper .block-drag > colgroup:before {content: "<colgroup>";}
.ready-block-wrapper .block-drag > col:before {content: "<col>";}


#template-target-zone .title-center-block {
  min-height: initial;
  margin: auto;
  padding: 0px 10px; 
  text-align: center; 
  font-size: 12px;
  color: #999;
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  background: var(--color-surface);
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border);
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, transform 0.25s ease-in-out;
  z-index: 10;
}
#template-target-zone .title-center-block.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -12px);
}
.editor-container {
  min-height: 100%;
  box-shadow: #ccc 0px 1px 2px 2px;
  width: 100%;
  margin: 0 auto;
  transition: width 0.3s ease;
}

/* ============================================
   CODE EDITOR BUTTON + MODAL
   ============================================ */
.code-editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  color: #1f2328;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.code-editor-btn:hover {
  background: #f6f8fa;
  border-color: #b6bec6;
}
.code-editor-btn svg {
  display: block;
}

.code-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.code-editor-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.code-editor-content {
  position: relative;
  width: 80%;
  max-width: 980px;
  height: 70%;
  background: #1e1e1e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.code-editor-header,
.code-editor-footer {
  padding: 12px 16px;
  background: #2b2b2b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code-editor-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.code-editor-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}
.code-editor-close-btn {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.code-editor-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  gap: 0;
}
.code-editor-pane {
  flex: 1;
  min-width: 0;
  display: none;
}
.code-editor-pane.active {
  display: block;
}
.code-editor-body .CodeMirror {
  height: 100%;
  font-size: 16px;
  font-family: Monaco, "Courier New", monospace;
}
.code-editor-tabs {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}
.code-editor-tab {
  border: 1px solid #545b66;
  background: #1e1e1e;
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.code-editor-tab.active {
  background: #21808d;
  border-color: #21808d;
}
.code-editor-font-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: normal;
}
.code-editor-font-select {
  padding: 4px 8px;
  font-size: 12px;
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
}
.code-editor-font-select:hover,
.code-editor-font-select:focus {
  border-color: #888;
  outline: none;
}

/* Publish modal: две карточки — приватная и публичная версия */
.svarog-publish-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svarog-publish-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.svarog-publish-content {
  position: relative;
  width: 90%;
  max-width: 520px;
  padding: 24px;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.svarog-publish-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  text-align: center;
}
.svarog-publish-subtitle {
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: var(--color-text-muted, #666);
  text-align: center;
  line-height: 1.4;
}
.svarog-publish-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.svarog-publish-card {
  padding: 16px;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 8px;
  background: var(--color-surface-alt, #f9f9f9);
}
.svarog-publish-card-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
}
.svarog-publish-card-subtext {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted, #666);
  line-height: 1.35;
}
.svarog-publish-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
}
.svarog-publish-toggle {
  margin: 0;
  width: 22px;
  height: 22px;
  accent-color: var(--color-primary, #2271b1);
}
.svarog-publish-toggle-label {
  font-size: 0.95rem;
}
.svarog-publish-card-off {
  font-size: 0.9rem;
  color: var(--color-text-muted, #666);
}
.svarog-publish-card-on {
  margin-top: 8px;
}
.svarog-publish-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.svarog-publish-url-text {
  font-size: 0.8rem;
  color: var(--color-text, #333);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.svarog-publish-url-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.svarog-publish-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 4px;
  background: var(--color-surface, #fff);
  color: var(--color-text-muted, #666);
  cursor: pointer;
}
.svarog-publish-copy-btn:hover {
  background: var(--color-surface-alt, #f0f0f0);
  color: var(--color-text, #333);
}
.svarog-publish-copy-btn .svarog-publish-icon {
  display: inline-flex;
}
.svarog-publish-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-primary, #2271b1);
  text-decoration: none;
  border-radius: 4px;
}
.svarog-publish-open-link:hover {
  background: var(--color-surface-alt, #f0f0f0);
  color: var(--color-primary-hover, #135e96);
}
.svarog-publish-open-link .svarog-publish-icon {
  display: inline-flex;
}
.svarog-publish-category-wrap {
  display: block;
  margin-top: 12px;
  font-size: 0.9rem;
}
.svarog-publish-category-select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 4px;
}
.svarog-publish-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

/* Media library modal */
.svarog-media-library-content { width: min(920px, 96vw); max-height: 82vh; overflow: hidden;}
.svarog-media-library-modal .svarog-modal-body { overflow-x: hidden;}
.svarog-media-library-toolbar { display: flex; gap: 10px; margin-bottom: 12px; align-items: center;}
.svarog-media-library-toolbar .form-control { min-width: 220px;}
.svarog-media-library-list { position: relative; min-height: 220px; max-height: 58vh; overflow-y: auto; overflow-x: hidden; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; background: #fff;}
.svarog-media-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid #f1f5f9;}
.svarog-media-item:last-child { border-bottom: none;}
.svarog-media-thumb { width: 72px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid #d1d5db; background: #f8fafc;}
.svarog-media-name { font-size: 13px; font-weight: 600; color: #111827; word-break: break-all;}
.svarog-media-sub { font-size: 12px; color: #64748b; margin-top: 2px;}
.svarog-media-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;}
.svarog-media-library-list.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  z-index: 2;
}
.svarog-media-library-list.is-loading::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  left: 50%;
  top: 50%;
  margin-left: -13px;
  margin-top: -13px;
  border: 3px solid #d1d5db;
  border-top-color: #21808d;
  border-radius: 999px;
  animation: svarog-spin 0.75s linear infinite;
  z-index: 3;
}
@keyframes svarog-spin {
  to { transform: rotate(360deg);}
}

/* Viewport modes для canvas */
.editor-container-outside.viewport-mobile .editor-container {
  width: 375px;
  max-width: 100%;
}

.editor-container-outside.viewport-tablet .editor-container {
  width: 768px;
  max-width: 100%;
}

.editor-container-outside.viewport-desktop .editor-container {
  width: 100%;
}
#template-target-zone [class*="block-"] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

#template-target-zone [class*="block-"]:active {
    cursor: grabbing;
}

/* Пустые пункты списка — минимальная высота для приёма дропа */
#template-target-zone ul li[class*="block-"],
#template-target-zone ol li[class*="block-"] {
/*    min-height: 2.5em;*/
}



/* ============================================
   ВСПЛЫВАЮЩАЯ ПАНЕЛЬ ФОРМАТИРОВАНИЯ
   ============================================ */

.formatting-toolbar {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 4px 9px rgba(0,0,0,0.2);
  z-index: 10000;
  animation: slideDown 0.2s ease;
}

.format-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.format-separator {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: #d9d9d9;
    flex: 0 0 auto;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.format-btn {
    background: white;
    border: 1px solid #ddd;
    padding: 7px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.2px;
    transition: all 0.2s;
    min-width: 34px;
    height: 30px;
}

.format-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

.format-btn.active {
    background: #0d6efd;
    border-color: #0b5ed7;
    color: #fff;
}

.format-btn:active {
    background: #e0e0e0;
    transform: scale(0.95);
}


/* Режим редактирования */
[contenteditable="true"] {
    outline: 0px dashed #4a90d9;
    outline-offset: 0px;
    padding: 0px;
    cursor: text!important;
}

/* Стили для зон (определяются по схеме тегов, а не по атрибуту) */
#template-target-zone main,
#template-target-zone section,
#template-target-zone article,
#template-target-zone div,
#template-target-zone aside,
#template-target-zone address,
#template-target-zone pre,
#template-target-zone hgroup,
#template-target-zone header,
#template-target-zone footer,
#template-target-zone nav,
#template-target-zone h1,
#template-target-zone h2,
#template-target-zone h3,
#template-target-zone h4,
#template-target-zone h5,
#template-target-zone h6,
#template-target-zone p,
#template-target-zone span,
#template-target-zone blockquote,
#template-target-zone q,
#template-target-zone abbr,
#template-target-zone dfn,
#template-target-zone data,
#template-target-zone time,
#template-target-zone var,
#template-target-zone samp,
#template-target-zone kbd,
#template-target-zone bdi,
#template-target-zone bdo,
#template-target-zone ruby,
#template-target-zone a,
#template-target-zone button,
#template-target-zone details,
#template-target-zone summary,
#template-target-zone dialog,
#template-target-zone img,
#template-target-zone picture,
#template-target-zone figure,
#template-target-zone figcaption,
#template-target-zone video,
#template-target-zone audio,
#template-target-zone iframe,
#template-target-zone embed,
#template-target-zone object,
#template-target-zone map,
#template-target-zone ul,
#template-target-zone ol,
#template-target-zone dl,
#template-target-zone dt,
#template-target-zone dd,
#template-target-zone form,
#template-target-zone label,
#template-target-zone fieldset,
#template-target-zone legend,
#template-target-zone datalist,
#template-target-zone output,
#template-target-zone table,
#template-target-zone caption,
#template-target-zone thead,
#template-target-zone tbody,
#template-target-zone tr,
#template-target-zone th,
#template-target-zone td {
  padding: 11px;
  background-color: rgba(0, 0, 0, 0.05);
  /* transition: all 0.2s ease;*/
}
#template-target-zone img, #template-target-zone video {
  padding: 0;
}
#template-target-zone progress, #template-target-zone meter {
  min-height: auto;
  outline: none !important;
  box-shadow: none !important;
}

/* dialog: в редакторе всегда виден как редактируемый блок */
#template-target-zone dialog {
  display: block;
  position: relative;
  min-height: 60px;
  border: 1px dashed #9ca3af;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.08);
  padding-top: 24px;
}

/* В редакторе backdrop сразу читает значение из поля Backdrop (rgba). */
#template-target-zone dialog::backdrop {
  background: var(--svarog-dialog-backdrop, rgba(0, 0, 0, 0.82));
}

#template-target-zone dialog::after {
  content: "dialog (closed)";
  position: absolute;
  top: 4px;
  right: 6px;
  display: inline-block;
  width: auto;
  font-size: 11px;
  color: #4b5563;
  pointer-events: none;
}

#template-target-zone dialog[open] {
  border-color: #21808d;
  background: rgba(33, 128, 141, 0.1);
}

#template-target-zone dialog[open]::after {
  content: "dialog (open)";
  color: #1f5f68;
}

#template-target-zone main:hover,
#template-target-zone section:hover,
#template-target-zone article:hover,
#template-target-zone div:hover,
#template-target-zone aside:hover,
#template-target-zone header:hover,
#template-target-zone footer:hover,
#template-target-zone nav:hover,
#template-target-zone h1:hover,
#template-target-zone h2:hover,
#template-target-zone h3:hover,
#template-target-zone h4:hover,
#template-target-zone h5:hover,
#template-target-zone h6:hover,
#template-target-zone p:hover,
#template-target-zone span:hover,
#template-target-zone blockquote:hover,
#template-target-zone q:hover,
#template-target-zone abbr:hover,
#template-target-zone dfn:hover,
#template-target-zone data:hover,
#template-target-zone time:hover,
#template-target-zone var:hover,
#template-target-zone samp:hover,
#template-target-zone kbd:hover,
#template-target-zone small:hover,
#template-target-zone bdi:hover,
#template-target-zone bdo:hover,
#template-target-zone ruby:hover,
#template-target-zone a:hover,
#template-target-zone button:hover,
#template-target-zone details:hover,
#template-target-zone summary:hover,
#template-target-zone dialog:hover,
#template-target-zone img:hover,
#template-target-zone picture:hover,
#template-target-zone figure:hover,
#template-target-zone figcaption:hover,
#template-target-zone video:hover,
#template-target-zone audio:hover,
#template-target-zone iframe:hover,
#template-target-zone embed:hover,
#template-target-zone object:hover,
#template-target-zone map:hover,
#template-target-zone ul:hover,
#template-target-zone ol:hover,
#template-target-zone dl:hover,
#template-target-zone dt:hover,
#template-target-zone dd:hover,
#template-target-zone form:hover,
#template-target-zone label:hover,
#template-target-zone fieldset:hover,
#template-target-zone legend:hover,
#template-target-zone datalist:hover,
#template-target-zone output:hover,
#template-target-zone table:hover,
#template-target-zone caption:hover,
#template-target-zone thead:hover,
#template-target-zone tbody:hover,
#template-target-zone tr:hover,
#template-target-zone th:hover,
#template-target-zone td:hover {
    border-color: #999;
/*    background-color: rgba(0, 0, 0, 0.05);*/
}

/* Полоса «здесь будет вставлен блок» при перетаскивании между элементами */
.sortable-placeholder {
  min-height: 8px !important;
  height: 8px !important;
  margin: 4px 0 !important;
  background: rgba(33, 150, 243, 0.2) !important;
  border: 1px dashed rgba(33, 150, 243, 0.5) !important;
  border-radius: 2px;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

#template-target-zone main.sortable-ghost,
#template-target-zone section.sortable-ghost,
#template-target-zone article.sortable-ghost,
#template-target-zone div.sortable-ghost,
#template-target-zone aside.sortable-ghost,
#template-target-zone header.sortable-ghost,
#template-target-zone footer.sortable-ghost,
#template-target-zone nav.sortable-ghost,
#template-target-zone h1.sortable-ghost,
#template-target-zone h2.sortable-ghost,
#template-target-zone h3.sortable-ghost,
#template-target-zone h4.sortable-ghost,
#template-target-zone h5.sortable-ghost,
#template-target-zone h6.sortable-ghost,
#template-target-zone a.sortable-ghost,
#template-target-zone button.sortable-ghost,
#template-target-zone ul.sortable-ghost,
#template-target-zone ol.sortable-ghost,
#template-target-zone form.sortable-ghost {
    opacity: 0.5;
    background-color: #f0f0f0;
}

/* КРИТИЧНО: Стабильные стили для ghost-элемента блоков */
#template-target-zone [class*="block-"].sortable-ghost {
    opacity: 0.4 !important;
    background: #e3f2fd !important;
    border: 1px dashed #2196f3 !important;
    cursor: move !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

#template-target-zone [class*="block-"].sortable-chosen {
    opacity: 0.8 !important;
    cursor: move !important;
}

#template-target-zone [class*="block-"].sortable-drag {
    opacity: 1 !important;
    cursor: move !important;
}

/* ============================================
   MEDIA QUERIES (вынесены в конец)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Dark mode colors (не перебивает ручной data-color-scheme) */
  :root:not([data-color-scheme]) {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }

  /* Dark Mode поддержка (не перебивает ручной data-color-scheme) */
  :root:not([data-color-scheme]) .delete-btn {
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  }
  :root:not([data-color-scheme]) .delete-btn:hover:not(:disabled) {
        box-shadow: 0 4px 12px rgba(255, 71, 87, 0.6);
    }
  :root:not([data-color-scheme]) .delete-btn:disabled {
        background: linear-gradient(135deg, #555 0%, #333 100%);
        opacity: 0.5;
    }
  :root:not([data-color-scheme]) select.form-control {
      background-image: var(--select-caret-dark);
    }

  :root:not([data-color-scheme]) .formatting-toolbar {
    background: #2d2d2d;
    border-color: #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  :root:not([data-color-scheme]) .format-btn {
    background: #2d2d2d;
    border-color: #555;
    color: #fff;
  }
  :root:not([data-color-scheme]) .format-btn:hover {
    background: #3d3d3d;
    border-color: #777;
  }
  :root:not([data-color-scheme]) .format-btn.active {
    background: #0d6efd;
    border-color: #0b5ed7;
    color: #fff;
  }
}


@media (max-width: 990px) {

  .code-editor-content {
    width: 94%;
    height: 80%;
  }

  .shhablonizator-container {
      flex-direction: column;
      height: auto;
  }

  .blocks-panel-left,
  .styles-panel-right,
  .editor-container {
      width: 100%;
  }

  #source {
      width: 250px;
  }
    
  #style-editor {
      width: 220px;
  }
}

@media (max-width: 768px) {
    .shhablonizator-page {
        flex-direction: column;
    }
    
    .source-block {
        flex-direction: column;
    }
    
    #source {
        width: 100%;
        height: 150px;
        border-right: none;
        border-bottom: 2px solid var(--color-border);
    }
    
    #target {
        flex: 1;
        border-right: none;
        border-bottom: 2px solid var(--color-border);
    }
    
    #style-editor {
        width: 100%;
        height: 150px;
        border-left: none;
    }

    .header-shhablonizator h1 {
        font-size: var(--font-size-xl);
    }

  .block-intro-top {
        flex-wrap: wrap;
        gap: var(--space-8);
    }
}

@media (min-width: 640px) {
  .container { max-width: var(--container-sm);}
  }

@media (min-width: 768px) {
  .container { max-width: var(--container-md);}
  }

@media (min-width: 1024px) {
  .container { max-width: var(--container-lg);}
  }

@media (min-width: 1280px) {
  .container { max-width: var(--container-xl);}
}

@media (max-width: 480px) {
    .header-shhablonizator {
        padding: var(--space-12);
    }

    .header-shhablonizator h1 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-8);
    }

  .block-intro-top {
        flex-direction: column;
        gap: var(--space-6);
        align-items: stretch;
    }

    #source {
        width: 100%;
        height: 120px;
        padding: var(--space-8);
    }

    #target {
        padding: var(--space-12);
    }

    #style-editor {
        height: 120px;
        padding: var(--space-12);
    }

    .blocks-panel-title {
        padding: var(--space-12);
    }

    .blocks-panel-title h3 {
        font-size: var(--font-size-md);
    }

    .accordion-header {
        padding: var(--space-10) var(--space-12);
        font-size: var(--font-size-sm);
    }

    .accordion-body {
        padding: var(--space-8);
        max-height: 300px;
    }

    .accordion-body .block,
    .accordion-body .section-block,
  .accordion-body .block-drag > * {
        padding: var(--space-8);
        margin-bottom: var(--space-6);
    }

    .block,
    .section-block {
        padding: var(--space-12);
        margin: var(--space-8) 0;
    }

    .block h3,
    .section-block h3 {
        font-size: var(--font-size-sm);
    }

    .section h4 {
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-8);
    }

    .sect-ls-100 {
        margin-bottom: var(--space-8);
    }

    .sect-ls-100 span {
        font-size: var(--font-size-xs);
    }

    .sect-ls-100 input[type="color"] {
        height: 36px;
    }
}

/* ============================================
   STYLES PANEL: ENHANCED CONTROLS (v3.5)
   ============================================ */

/* Properties accordion */
.properties-accordion {
  
}
.property-group {
  background: var(--color-surface);
  overflow: hidden;
}
.property-group-header {
  padding: var(--space-8) var(--space-12);;
  background: #adc6b8;
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--duration-fast) var(--ease-standard);
  user-select: none;
}

.property-group-header:hover {
  background: #c2d0c8;
}

.property-group.active .property-group-header {
  background: #83A6A8;
}

.property-group-header .accordion-icon {
  transition: transform var(--duration-fast) var(--ease-standard);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.property-group.active .property-group-header .accordion-icon {
  transform: rotate(180deg);
}

.property-group-body {
  display: none;
  padding: var(--space-8) var(--space-8) 0 var(--space-8);
  background: #d2ddd7;
}

.property-group.active .property-group-body {
  display: block;
}

/* Form controls base */
.form-control {
  width: 100%;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* Info control */
.property-info .info-value {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 2.5px 10px;
  background: var(--color-background);
  border-radius: 5px;
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

/* Textarea control */
.property-textarea textarea.form-control {
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  min-height: 60px;
  resize: vertical;
  line-height: 1.4;
}

/* Number with unit */
.number-with-unit {
  display: flex;
  align-items: center;
}

.number-with-unit .number-input {
  flex: 1;
}

.number-with-unit .unit-select {
  flex-shrink: 0;
  width: 50px;
  height: 28px;
  padding: 2.5px 0;
  border-radius: 0 5px 5px 0;
  border: 0;
  outline: none;
  text-align: right;
}
.number-with-unit .unit-select:focus-visible {

}

/* Toggle button group */
.toggle-group {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-background);
  border-radius: var(--radius-base);
}

.toggle-btn {
  flex: 1;
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  user-select: none;
}

.toggle-btn:hover {
  background: var(--color-secondary);
  border-color: var(--color-primary);
}

.toggle-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Range slider */
.property-range label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.range-value {
  padding: 2px 8px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.range-input {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  outline: none;
  -webkit-appearance: none;
  padding: 0;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all var(--duration-fast) var(--ease-standard);
}

.range-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all var(--duration-fast) var(--ease-standard);
}

.range-input::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Box inputs (margin/padding) */
.box-inputs {
  padding: var(--space-12);
  background: var(--color-background);
  border-radius: var(--radius-base);
}

.box-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.box-row:last-of-type {
  margin-bottom: var(--space-12);
}

.box-input-wrapper label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.box-input {
  padding: var(--space-6);
  font-size: var(--font-size-sm);
}

/* Box inputs внутри number-with-unit получают flex layout */
.box-input-wrapper .number-with-unit {
  display: flex;
  align-items: center;
}

.box-input-wrapper .number-with-unit .box-input {
  flex: 1;
}

/*.box-input-wrapper .number-with-unit .unit-select {
  flex-shrink: 0;
}*/

/* Color input with HEX field */
.color-with-hex {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-swatch {
  width: 40px;
  height: 28px;
  min-width: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}

.color-swatch--empty {
  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 10px 10px !important;
}

.color-swatch.picker-open {
  outline: 2px solid var(--color-primary, #4a90d9);
  outline-offset: 1px;
}

.color-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.color-hex-input {
  flex: 1;
  height: 32px;
  padding: 4px 8px;
  font-family: monospace;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-transform: lowercase;
}
.property-group--size .form-control {
  padding: 2.5px 5px;
}
.property-group--image-attributes .form-group.property-info {
  overflow: hidden;
}
.property-group--image-attributes .property-info .info-value {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  height: auto;
  min-height: 28px;
  max-height: 3.1em;
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}
.layout-gaps-wrapper .unit-select {
  width: 43px;
}

input[type="number"].form-control.number-input, input[type="number"].form-control.box-input {
  height: 28px;
  padding: 2.5px 0 2.5px 5px;
  border-radius: 5px 0 0 5px;
  border: 0;
}
input[type="number"].form-control.box-input {
  padding: 1px 0 1px 5px;
}
input[type="number"].form-control.box-input, .box-input-wrapper .number-with-unit .unit-select {
  border: 1px solid #ccc;
}
input[type="number"].form-control.box-input {
  border-right: 0;
}
.box-input-wrapper .number-with-unit .unit-select {
  border-left: 0;
}

/* Keyword unit state (auto, none) */
.number-input.is-keyword,
.box-input.is-keyword {
  background: var(--color-background, #f5f5f5);
  color: var(--color-text-secondary, #888);
  cursor: default;
}
.number-input.is-keyword::placeholder,
.box-input.is-keyword::placeholder {
  color: var(--color-text-secondary, #888);
  opacity: 1;
  font-style: italic;
}

/* ============================================
   BLOCK TOOLBAR (Floating панель действий)
   ============================================ */

.block-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  gap: 2px;
  padding: 0;
  background: rgba(0, 123, 222, 1);
  border: 1px solid var(--color-border);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease;
  overflow: hidden;
}

.block-toolbar:hover {
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.toolbar-btn:hover {
  background: var(--color-background);
  color: var(--color-primary);
}

.toolbar-btn:active {
  transform: scale(0.95);
}

.toolbar-btn--danger:hover {
  background: #fee;
  color: #e53e3e;
}

.toolbar-btn svg {
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dark mode */
[data-color-scheme="dark"] .block-toolbar {
  background: #2d2d2d;
  border-color: #404040;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-color-scheme="dark"] .toolbar-btn:hover {
  background: #3d3d3d;
}

[data-color-scheme="dark"] .toolbar-btn--danger:hover {
  background: #4a2020;
  color: #fc8181;
}


/* Select enhancement */
.select-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23666" d="M6 8L0 2h12z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 30px;
}

/* Property pair (2 controls in a row) */
.property-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.property-pair-left .form-group,
.property-pair-right .form-group {
  margin-bottom: 0;
}

/* Property inline row (3+ controls in a row, e.g. border) */
.property-inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.property-inline-row .form-group {
  margin-bottom: 0;
}

/* Property spacing */
.styles-editor .form-group label {
  font-size: 12px;
}

/* Button enhancements */
.button-group {
  display: grid;
  gap: var(--space-10);
  margin-top: 10px;
}
.styles-editor div.button-group {
  padding: 0 10px;
}
.button-group .btn {
  flex: 1;
  padding: var(--space-8);
  font-size: var(--font-size-sm);
}
.styles-editor div.button-group.styles-actions {
  padding-bottom: 10px;
}
/* ============================================
   CHECKBOX CONTROL (правая панель)
   ============================================ */
.property-checkbox {
  margin: 10px 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-teal-500);
}

.checkbox-label span {
  font-size: var(--font-size-sm);
  color: var(--color-charcoal-700);
}

.checkbox-label:hover span {
  color: var(--color-teal-600);
}

/* Dark mode */
body.dark-mode .checkbox-label span {
  color: var(--color-cream-50);
}

body.dark-mode .checkbox-label:hover span {
  color: var(--color-teal-300);
}

/* ============================================
   LINK MODAL (модальное окно для ссылок)
   ============================================ */
.link-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}

.link-modal {
  background: var(--color-cream-100);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
    transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
    opacity: 1;
  }
}

.link-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--color-gray-200);
}

.link-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-charcoal-700);
}

.link-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-slate-500);
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
    border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.link-modal-close:hover {
  background: var(--color-gray-200);
  color: var(--color-charcoal-700);
}

.link-modal-body {
  padding: 20px;
}

.link-modal-field {
  margin-bottom: 20px;
}

.link-modal-field:last-child {
  margin-bottom: 0;
}

.link-modal-field > label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-charcoal-700);
}

.link-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  font-size: var(--font-size-base);
  color: var(--color-charcoal-700);
  background: var(--color-cream-50);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.link-modal-input:focus {
  outline: none;
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 3px rgba(33, 128, 141, 0.1);
}

.link-modal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
    cursor: pointer;
  user-select: none;
  padding: 10px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}

.link-modal-checkbox-label:hover {
  background: var(--color-gray-200);
}

.link-modal-checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-teal-500);
}

.link-modal-checkbox-label span {
  font-size: var(--font-size-sm);
  color: var(--color-charcoal-700);
}

.link-modal-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-slate-500);
}

.link-modal-footer {
  display: flex;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--color-gray-200);
  justify-content: flex-end;
}

.link-modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.link-modal-btn:active {
  transform: scale(0.98);
}

.link-modal-btn-cancel {
  background: var(--color-gray-200);
  color: var(--color-charcoal-700);
}

.link-modal-btn-cancel:hover {
  background: var(--color-slate-500);
  color: var(--color-cream-50);
}

.link-modal-btn-apply {
  background: var(--color-teal-500);
  color: var(--color-cream-50);
}

.link-modal-btn-apply:hover {
  background: var(--color-teal-600);
}

/* Dark mode для модального окна */
body.dark-mode .link-modal {
  background: var(--color-charcoal-800);
}

body.dark-mode .link-modal-header {
  border-bottom-color: var(--color-slate-500);
}

body.dark-mode .link-modal-header h3 {
  color: var(--color-cream-50);
}

body.dark-mode .link-modal-close {
  color: var(--color-gray-300);
}

body.dark-mode .link-modal-close:hover {
  background: var(--color-slate-500);
  color: var(--color-cream-50);
}

body.dark-mode .link-modal-field > label {
  color: var(--color-cream-50);
}

body.dark-mode .link-modal-input {
  background: var(--color-charcoal-700);
  border-color: var(--color-slate-500);
  color: var(--color-cream-50);
}

body.dark-mode .link-modal-input:focus {
  border-color: var(--color-teal-400);
  box-shadow: 0 0 0 3px rgba(50, 184, 198, 0.2);
}

body.dark-mode .link-modal-checkbox-label:hover {
  background: var(--color-slate-500);
}

body.dark-mode .link-modal-checkbox-label span {
  color: var(--color-cream-50);
}

body.dark-mode .link-modal-hint {
  color: var(--color-gray-300);
}

body.dark-mode .link-modal-footer {
  border-top-color: var(--color-slate-500);
}

body.dark-mode .link-modal-btn-cancel {
  background: var(--color-slate-500);
  color: var(--color-cream-50);
}

body.dark-mode .link-modal-btn-cancel:hover {
  background: var(--color-slate-900);
}

body.dark-mode .link-modal-btn-apply {
  background: var(--color-teal-400);
}

body.dark-mode .link-modal-btn-apply:hover {
  background: var(--color-teal-500);
}

/*-- library-media-library --*/
.library-media-library .media-frame-actions-heading {
  display: none;
}
.library-media-library label.screen-reader-text {
  display: none;
}
.library-media-library .media-modal-content .media-frame select.attachment-filters {
  width: auto;
  max-width: 100%;
}
.library-media-library .media-modal-close span.screen-reader-text {
  display: none;
}
.library-media-library .attachment.save-ready.details .screen-reader-text {
  display: none;
}


/* ============================================
   PROJECTS MANAGER UI (v4.0)
   ============================================ */

/* Модальное окно */
.svarog-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svarog-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.svarog-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-selection-content {
    max-width: 900px;
}
.svarog-width-project-modal-content {
  max-width: 480px;
}
.svarog-modal-header {
  padding: 24px 25px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.svarog-modal-header h2 {
  margin: 0;
  font-size: 24px;
    font-weight: 600;
  color: #111827;
}
.svarog-modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.svarog-modal-close-btn:hover {
    color: #111827;
}
.svarog-modal-body {
  padding: 25px 25px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Модальное окно настроек скачивания: скрыто по умолчанию */
#svarog-download-modal {
  display: none;
}
#svarog-download-modal.svarog-modal-visible {
  display: flex;
}

/* Модал ограничений тарифа (сохранение, создание проекта и т.д.) — скрыт по умолчанию */
#svarog-plan-tariff-modal {
  display: none;
  z-index: 10050;
}
#svarog-plan-tariff-modal.svarog-modal-visible {
  display: flex;
}
#svarog-plan-tariff-modal .svarog-modal-content {
  max-width: 480px;
}

/* Модалки: ссылка «Выбрать тариф» и кнопки — цвет лендинга */
.svarog-modal .svarog-tariffs-link {
  color: var(--svarog-landing-primary, #3b82f6);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.svarog-modal .svarog-tariffs-link:hover {
  opacity: 0.88;
}
.svarog-modal .btn.btn--primary {
  background: var(--svarog-landing-primary, #3b82f6);
  color: #fff;
  border-color: transparent;
}
.svarog-modal .btn.btn--primary:hover {
  filter: brightness(0.92);
}
.svarog-modal .btn.btn--outline {
  border-color: var(--svarog-landing-primary, #3b82f6);
  color: var(--svarog-landing-primary, #3b82f6);
}
.svarog-modal .btn.btn--outline:hover {
  background: color-mix(in srgb, var(--svarog-landing-primary, #3b82f6) 10%, transparent);
  border-color: var(--svarog-landing-primary, #3b82f6);
  color: var(--svarog-landing-primary, #3b82f6);
}

.svarog-download-modal-content {
  max-width: 480px;
}
.svarog-download-options {
  margin: 0 0 20px;
  padding: 0;
  border: none;
}
.svarog-download-legend {
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
  display: block;
}
.svarog-download-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 4px;
}
.svarog-download-option input {
  margin: 0;
}
.svarog-download-hint {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px 24px;
  line-height: 1.4;
}
.svarog-download-actions {
  margin-top: 8px;
}

/* Список проектов */
.projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.project-card {
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
    transition: all 0.2s;
}
.project-card:hover {
  border-color: var(--svarog-landing-primary, #3b82f6);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}
.project-card--current {
    border-color: var(--svarog-landing-primary, #3b82f6);
    background: #effdfc;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.project-card--current:hover {
    border-color: var(--svarog-landing-primary, #3b82f6);
    background: #e7fefd;
}

.project-card-current-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--svarog-landing-primary, #3b82f6);
}

.project-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.project-card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.project-pages-count {
    background: var(--svarog-landing-primary, #3b82f6);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.project-description {
    color: #6b7280;
    font-size: 14px;
    margin: 8px 0;
    line-height: 1.5;
}

.project-card-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.project-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.project-date {
    font-size: 13px;
    color: #9ca3af;
}

/* Пустое состояние (в модалке — вне списка, по центру) */
.projects-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    flex: 1;
    min-height: 120px;
}

.empty-state, .error-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}
.error-state {
    width: 300%;
}
.error-state-auth a {
    font-size: 18px;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
}
.error-state-auth a:hover {
    text-decoration: underline;
}
.error-state-reg-hint {
    font-size: 14px;
    color: #6b7280;
    margin-top: 12px;
    margin-bottom: 0;
}
.error-state-reg-hint a {
    color: #2563eb;
    text-decoration: none;
}
.error-state-reg-hint a:hover {
    text-decoration: underline;
}
.empty-state p:first-child, .error-state p:first-child {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 8px;
}

.hint {
    font-size: 14px;
    color: #9ca3af;
}

.error-message {
    color: #ef4444;
    font-size: 14px;
}

.loading-spinner {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

/* Секция создания проекта */
.create-project-section {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

/* Форма создания проекта */
.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-weight: 500;
  color: #374151;
}

.form-control {
  width: 100%;
  padding: 2.5px 10px;
  border: 0px solid #e5e7eb;
  border-radius: 5px;
  font-size: 14px;
  line-height: 14px;
  transition: border-color 0.2s;
}
.svarog-modal-content .form-control {
  height: auto!important;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
}

input[type="range"].form-control.range-input {
  padding: 0;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
}
input[type="text"].form-control {
  height: 28px;
}
input[type="color"].form-control {
  height: 28px;
  padding: 0;
  border: 0;
}
input[type="text"].form-control.color-hex-input {
  width: 90px;
  color: #333;
}
.border-main-wrapper .form-group.property-color {
  
}
.border-main-wrapper .color-with-hex {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.border-main-wrapper .color-swatch, .border-main-wrapper input[type="text"].form-control.color-hex-input {
  width: 100%;
  height: 14px;
  font-size: 11px;
  line-height: 12px;
  border: none;
  text-align: center;
}
.border-main-wrapper .color-swatch {
  border-radius: 5px 5px 0 0;
}
.border-main-wrapper input[type="text"].form-control.color-hex-input {
  padding: 0;
  border-radius: 0 0 5px 5px;
}
input[type="number"].form-control.border-input {

}
.property-inline-row.border-main-wrapper {
  display: grid;
  grid-template-columns: 4fr 4fr 2.5fr;
  gap: 5px;
  margin-bottom: 10px;
}
.border-main-wrapper .number-with-unit .unit-select {
  width: 43px;
}
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.save-status {
    font-size: 13px;
    margin-left: 8px;
}

.save-btn.saving {
    opacity: 0.7;
    pointer-events: none;
}

.save-btn.saved {
    background: #10b981;
    border-color: #10b981;
}
.save-btn.error {
    background: #ef4444;
    border-color: #ef4444;
}

/* Менеджер страниц в левой панели */
.page-switcher {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 0;
}

.page-switcher-header {
    display: flex;
    justify-content: flex-start;
}

.page-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: visible;
    padding-right: 4px;
}

.page-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    width: calc(100% - 10px);
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
    left: 10px;
    overflow: visible;
    padding-left: calc(10px + (var(--tree-depth, 0) * 4px));
}
.page-tab.page-tab--home {
  width: 100%;
  left: 0;
  padding-left: calc(12px + (var(--tree-depth, 0) * 16px));
}

.page-tab::before,
.page-tab::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.page-tab[data-depth]:not([data-depth="0"])::before {
    left: calc(-10px + ((var(--tree-depth, 1) - 1) * 16px));
    top: -8px;
    bottom: -8px;
    border-left: 1px solid #d1d5db;
}

.page-tab[data-depth]:not([data-depth="0"])::after {
    left: calc(-10px + ((var(--tree-depth, 1) - 1) * 16px));
    top: 50%;
    width: 11px;
    border-top: 1px solid #d1d5db;
}

.page-tab--home::before,
.page-tab--home::after {
    display: none;
}

.page-tab:hover {
    border-color: #3b82f6;
    background: #f8fbff;
}

.page-tab.active {
    background: #eff6ff;
    border-color: #3b82f6;
    font-weight: 500;
}

.page-tab-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-tab-main-badge {
    font-size: 10px;
    color: #6b7280;
    font-weight: 500;
    margin-left: 4px;
    white-space: nowrap;
}

.page-tab-status-badge {
    flex: 0 0 auto;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.page-tab-status-badge--draft {
    background: #fff7ed;
    color: #c2410c;
}

.page-tab-status-badge--published {
    background: #ecfdf5;
    color: #047857;
}

.page-tab-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    display: inline-block;
    flex: 0 0 auto;
}

.page-tab-actions {
    position: relative;
    flex: 0 0 auto;
    margin-left: 2px;
}

.page-tab-menu-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    line-height: 1;
    font-size: 16px;
    padding: 0;
}

.page-tab-menu-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.page-tab-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    padding: 4px;
    z-index: 15;
}

.page-tab-menu[hidden] {
    display: none;
}

.page-tab-menu-item {
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 7px 8px;
    text-align: left;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
}

.page-tab-menu-item:hover {
    background: #f3f4f6;
}

.page-tab-menu-item--danger {
    color: #b91c1c;
}

.page-tab-menu-item--danger:hover {
    background: #fee2e2;
}

.pages-empty-state {
    font-size: 12px;
    color: #6b7280;
    padding: 6px 2px 4px;
}

/* Кнопки */

.btn--primary {
    background: #3b82f6;
    color: white;
}

.btn--primary:hover {
    background: #2563eb;
}

.btn--outline {
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
}

.btn--outline:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn--small {
    padding: 5px 10px;
    font-size: 13px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.svarog-pages-accordion-item .accordion-body {
    padding-bottom: 6px;
}

/* Уведомление «Страница сохранена» */
.svarog-save-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    background: var(--color-slate-900, #13343b);
    color: var(--color-cream-50, #fcfcf9);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100000;
    pointer-events: none;
}
.svarog-save-toast.svarog-save-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Диалог несохранённых изменений (кнопки Да / Нет) */
.svarog-unsaved-modal .svarog-unsaved-content {
    max-width: 430px;
    text-align: center;
    padding: 25px;
}
.svarog-unsaved-text {
    white-space: pre-line;
    margin: 0 0 1.5rem;
    line-height: 1.1;
    font-size: 1.2rem;
}
.svarog-unsaved-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}



.login-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-modal.is-open {
  display: flex;
}
.login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.login-modal__box {
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  position: relative;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}
.login-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.login-modal__close:hover {
  color: #000;
}

/* === DnD Drop Indicator === */
.svarog-drop-indicator {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transition: top 0.05s ease, left 0.05s ease, width 0.05s ease, height 0.05s ease;
}
.svarog-drop-indicator.svarog-drop-line {
  height: 3px;
  background: #2196f3;
  border-radius: 2px;
}
.svarog-drop-indicator.svarog-drop-nest {
  background: rgba(33, 150, 243, 0.08);
  border: 2px dashed #2196f3;
  border-radius: 4px;
}
.svarog-drop-indicator.svarog-drop-nest-pending {
  background: rgba(33, 150, 243, 0.04);
  border: 1px dashed rgba(33, 150, 243, 0.4);
  border-radius: 4px;
}