html,
body {
    height: 100%;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
}

button,
input,
optgroup,
select,
textarea {
    font-feature-settings: inherit;
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    font-variation-settings: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    margin-right: 0px;
    margin-left: 0px;
    padding: 0;
    background-color: transparent;
    border: none;
}

button {
    cursor: pointer;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #9ca3af;
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.lms,
.lms *,
.lms::before,
.lms::after,
.lms *::before,
.lms *::after {
    box-sizing: border-box;
}

.lms {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
}

.lms h1,
.lms h2,
.lms h3,
.lms h4,
.lms h5,
.lms h6 {
    margin-top: 0;
}

.lms p {
    margin: 0;
}

.lms-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

.lms-left {
    border-right: 1px solid #e2e8f0;
    padding: 15px;
    color: #333333;
}

.lms-left__logo {
    width: 180px;
    height: 40px;
    margin-bottom: 30px;
    display: block;
}

.lms-left__ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lms-left__item + .lms-left__item {
    margin-top: 6px;
}

.lms-left__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    gap: 12px;
}

.lms-left__link.active {
    background-color: #3b82f6;
    color: #fff;
}

.lms-left__icon {
    width: 18px;
    height: 18px;
}

.lms-right {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.lms-header {
    color: #718096;
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 12px;
    padding-right: 16px;
}

.lms-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lms-header__title {
    padding: 6px 12px;
}

.lms-header__button {
    padding: 6px 12px;
    background: transparent;
    font-size: inherit;
    color: inherit;
    border-bottom: 2px solid transparent;
}

.lms-header__button.active {
    color: #3b82f6;
    font-weight: 600;
    border-color: #3b82f6;
}

.lms-header-admin {
    color: #4b5563;
    display: flex;
    gap: 16px;
    align-items: center;
    padding-right: 16px;
}

.lms-header-admin__name {
    font-size: 16px;
}

.lms-header-admin__position {
    font-size: 12px;
}

.lms-header-admin__avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    background-color: #3b82f6;
    border-radius: 50%;
    color: #ffffff;
}

.lms-footer {
    border-top: 1px solid #e2e8f0;
    padding: 15px;
    color: #333333;
    text-align: center;
}

.ce__back {
    cursor: pointer;
    display: flex;
    gap: 4px;
    align-items: center;
    color: #4b5563;
    margin-bottom: 16px;
}

.ce__back:hover {
    color: #3b82f6;
}

.ce__icon-back {
    width: 20px;
    height: 20px;
}

.ce__body {
    display: grid;
    grid-template-columns: 256px 1fr;
}

.ce-wrapper {
    padding: 24px;
}

.ce-aside {
    padding-right: 24px;
}

.ce-aside__title {
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 16px;
}

.ce-aside__mode {
    display: flex;
    gap: 8px;
    align-items: center;
    background-color: #eff6ff;
    border-radius: 4px;
    color: #3b82f6;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.ce-aside__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background-color: #3b82f6;
    border-radius: 50%;
}

.ce-aside__back {
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 4px;
    color: #374151;
    padding: 8px 12px;
    margin-bottom: 8px;
    width: 100%;
}

.ce-aside__back:hover {
    background-color: #f3f4f6;
}

.ce-aside__icon-back {
    width: 16px;
    height: 16px;
}

.ce-aside__structure {
    margin-bottom: 8px;
}

.ce-aside__save {
    padding: 8px 0;
    border-radius: 4px;
    background-color: #3b82f6;
    width: 100%;
    color: #fff;
}

.ce-aside__save:hover {
    background-color: #2563eb;
}

.ce-aside__extra {
    margin-bottom: 24px;
}

.ce-aside__link {
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 4px;
    color: #374151;
    padding: 8px 12px;
    margin-bottom: 8px;
    text-decoration: none;
}

.ce-aside__link:hover {
    background-color: #f3f4f6;
}

.ce-aside-structure {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #1f2937;
}

.ce-aside-structure__title {
    background-color: #f9fafb;
    font-weight: 500;
    padding: 8px 16px;
}

.ce-aside-structure__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.ce-aside-structure__link {
    display: flex;
    align-items: center;
    border-radius: 4px;
    font-size: inherit;
    text-decoration: none;
    color: inherit;
    padding: 4px 8px;
    gap: 8px;
}

.ce-aside-structure__link:hover {
    background-color: #f3f4f6;
}

.ce-aside-structure__link.active {
    background-color: #eff6ff;
    color: #3b82f6;
}

.ce-aside-structure__svg {
    width: 14px;
    height: 14px;
}

.ce-aside-structure__footer {
    font-size: 14px;
}

.ce-aside-structure__create {
    width: 100%;
    background-color: transparent;
    color: #3b82f6;
    padding: 8px 0;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.ce-aside-structure__icon-plus {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ce-content {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: #1f2937;
}

.ce-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px;
}

.ce-content-header__info {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #4b5563;
}

.ce-content-header__avatar {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    color: #ffffff;
}

.ce-content-header__action {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ce-content-header__mode {
    background-color: #e5e7eb;
    border-radius: 4px;
    font-size: 14px;
    color: #374151;
    padding: 4px 12px;
}

.ce-content-header__mode.active {
    background-color: #3b82f6;
    color: #fff;
}

.ce-content-header__save {
    display: flex;
    color: #9ca3af;
    padding: 4px;
}

.ce-content-header__save:hover {
    color: #4b5563;
}

.ce-content-header__icon-save {
    width: 18px;
    height: 18px;
}

.ce-content-main {
    padding: 24px;
}

.ce-content-main__header {
    cursor: pointer;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 32px;
}

.ce-content.is-preview .ce-content-main__header {
    cursor: auto;
}

.ce-content-main__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
}

.ce-content-main__header:hover .ce-content-main__title {
    color: #2563eb;
}

.ce-content.is-preview .ce-content-main__header:hover .ce-content-main__title {
    color: initial;
}

.ce-content-main__input {
    width: 100%;
    border-top: none;
    border-right: none;
    border-bottom: 2px solid #3b82f6;
    border-left: none;
    outline: none;
    font-size: 24px;
    font-weight: 700;
    padding: 4px;
}

.ce-render-container__add {
    position: relative;
}

.ce-render-container__button {
    width: 100%;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
    color: #6b7280;
    padding: 32px;
}

.ce-render-container__button:hover {
    border-color: #93c5fd;
}

.ce-render-container-toolbar {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    display: none;
}

.ce-render-container-toolbar.is-shown {
    display: block;
}

.ce-render-container-toolbar__title {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 8px;
    text-align: center;
}

.ce-render-container-toolbar__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ce-render-container-toolbar__button {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #f3f4f6;
    color: #1f2937;
}

.ce-render-container-toolbar__button:hover {
    background-color: #eff6ff;
}

.ce-render-container-toolbar__button:disabled {
    cursor: auto;
    pointer-events: none;
    opacity: 0.3;
}

.ce-render-container-toolbar__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dbeafe;
    border-radius: 50%;
    color: #2563eb;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
}

.ce-render-container-toolbar__svg {
    width: 18px;
    height: 18px;
}

.ce-render-container-toolbar__label {
    font-size: 12px;
}

.ce-render:not(:empty) {
    margin-bottom: 16px;
}

.ce-render-item {
    position: relative;
    padding: 16px;
    border-radius: 6px;
    transition: all 200ms ease;
    border: 1px solid transparent;
}

.ce-render-item + .ce-render-item {
    margin-top: 16px;
}

.ce-render-item:hover,
.ce-render-item.is-active {
    border-color: #bfdbfe;
}

.ce-render-item-controlls {
    display: none;
    position: absolute;
    right: 8px;
    top: 8px;
}

.ce-render-item.is-active .ce-render-item-controlls,
.ce-render-item:hover .ce-render-item-controlls {
    display: block;
}

.ce-render-item-controlls__body {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    padding: 4px;
}

.ce-render-item-controlls__button {
    padding: 4px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1f2937;
}

.ce-render-item-controlls__button:hover {
    background-color: #f3f4f6;
}

.ce-render-item-controlls__button:disabled {
    color: #9ca3af;
    cursor: auto;
}

.ce-render-item-controlls__button:disabled:hover {
    background-color: transparent;
}

.ce-render-item-controlls__button--del {
    color: #ef4444;
}

.ce-render-item-controlls__svg {
    width: 16px;
    height: 16px;
}

.ce-edit-area {
    width: 100%;
    padding: 8px;
    min-height: 100px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
}

.ce-edit-image-text-right .ce-edit-area {
    min-height: 150px;
}

.ce-edit-info .ce-edit-area {
    min-height: auto;
}

.ce-edit-area:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.ce-edit-text-block__label {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.ce-edit-image-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ce-edit-image {
    max-width: 100%;
    border-radius: 4px;
    height: auto;
    margin-bottom: 8px;
    display: block;
}

.ce-edit-upload {
    padding: 4px 12px;
    background-color: #3b82f6;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ce-edit-upload--wide {
    width: 100%;
}

.ce-edit-upload:hover {
    background-color: #2563eb;
}

.ce-edit-bicon {
    width: 14px;
    height: 14px;
}

.ce-edit-input {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background-color: #fff;
}

.ce-edit-image-text-right {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

.ce-edit-image-text-left {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.ce-edit-video-wrapper {
    /*aspect-ratio: 16/9;*/
    margin-bottom: 8px;
}

.ce-edit-video-player {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 4px;
}

.ce-edit-video-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.ce-edit-load-buttons {
    display: flex;
    gap: 8px;
}

.ce-edit-remove {
    padding: 4px 12px;
    background-color: #ef4444;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

.ce-edit-remove:hover {
    background-color: #dc2626;
}

.ce-edit-video-icon {
    height: 48px;
    width: 48px;
    color: #9ca3af;
}

.ce-edit-audio-placeholder {
    width: 100%;
    padding: 16px;
    background-color: #f3f4f6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.ce-edit-audio-icon {
    color: #3b82f6;
    width: 32px;
    height: 32px;
}

.ce-edit-audio-bar {
    flex-grow: 1;
}

.ce-edit-audio-bar__line {
    height: 8px;
    background-color: #d1d5db;
    border-radius: 100px;
}

.ce-edit-audio-bar__fill {
    background-color: #3b82f6;
    border-radius: 100px;
    height: 100%;
}

.ce-edit-audio-player {
    width: 100%;
    padding: 16px;
    background-color: #f3f4f6;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ce-edit-file-wrapper {
    width: 100%;
    padding: 16px;
    background-color: #f3f4f6;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ce-edit-file-placeholder {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ce-edit-file-placeholder__name {
    font-weight: 500;
}

.ce-edit-file-placeholder__size {
    color: #6b7280;
}

.ce-edit-file-preview {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ce-edit-file-name {
    font-weight: 500;
}

.ce-edit-file-size {
    color: #6b7280;
}

.ce-edit-file-icon {
    width: 32px;
    height: 32px;
    color: #3b82f6;
}

.ce-edit-info {
    padding: 16px;
    background-color: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

.ce-edit-info-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.ce-edit-info-icon {
    width: 20px;
    height: 20px;
    color: #3b82f6;
}

.ce-edit-info-title {
    font-weight: 500;
    color: #1d4ed8;
}

.ce-edit-button-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ce-edit-button-preview {
    padding: 12px 24px;
    background-color: #3b82f6;
    color: #fff;
    border-radius: 6px;
    font-size: 18px;
}

.ce-edit-button-preview:hover {
    background-color: #2563eb;
}

.ce-preview-item {
    padding: 8px 0;
}

.ce-preview-image-block {
    display: flex;
    justify-content: center;
}

.ce-preview-image {
    max-width: 100%;
    border-radius: 4px;
    height: auto;
}

.ce-preview-empty {
    background-color: #f3f4f6;
    border-radius: 4px;
    text-align: center;
    color: #6b7280;
    padding: 16px;
}

.ce-preview-image-text-right {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

.ce-preview-image-text-left {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.ce-preview-text {
    white-space: pre-line;
    word-break: break-word;
}

.ce-preview-video-player {
    aspect-ratio: 16/9;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 4px;
    width: 100%;
    height: 100%;
}

.ce-preview-audio-player {
    width: 100%;
    background-color: #f3f4f6;
    border-radius: 4px;
    padding: 16px;
}

.ce-preview-file-container {
    width: 100%;
    padding: 16px;
    background-color: #f3f4f6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ce-preview-file-icon {
    width: 32px;
    height: 32px;
    color: #3b82f6;
}

.ce-preview-file-download {
    text-decoration: none;
    font-size: 14px;
    color: #6b7280;
}

.ce-preview-info {
    padding: 16px;
    background-color: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

.ce-preview-info-content {
    white-space: pre-line;
    word-break: break-word;
}

.ce-preview-info-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.ce-preview-info-icon {
    width: 20px;
    height: 20px;
    color: #3b82f6;
}

.ce-preview-info-title {
    font-weight: 500;
    color: #1d4ed8;
}

.ce-preview-button {
    display: flex;
    justify-content: center;
}

.ce-preview-button-el {
    padding: 12px 24px;
    background-color: #3b82f6;
    color: #fff;
    border-radius: 6px;
    font-size: 18px;
    text-decoration: auto;
}

.ce-preview-button-el:hover {
    background-color: #2563eb;
}

.hidden {
    display: none !important;
}

.ce-render-item-add-zone {
    width: 90%;
    height: 40px; /* Высота зоны наведения после блока */
    margin: 0 auto 10px;
    opacity: 0;
    transition: opacity 0.3s;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
}

.ce-render-item-add-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 3px 30px;
    display: flex;
    z-index: 9999;
}

.ce-add-menu-icons {
    gap: 8px;
    display: flex;
}

.ce-render-item:not(:last-child):hover .ce-render-item-add-zone .ce-render-item-add-menu,
.ce-render-item:not(:last-child):hover .ce-render-item-add-zone {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
}

.ce-render-item:not(:last-child):hover .ce-render-item-add-zone {
    border-bottom: 1px solid #d9ecff;
}

.ce-add-btn {
    border: none;
    background: none;
    cursor: pointer;
    background-color: #3b82f617;
    border-radius: 30px;
    opacity: 0.7;
    width: 30px;
    height: 30px;
}

.ce-add-btn:hover {
    background: #d9ecff;
    opacity: 1;
}

.ce-add-btn:hover svg {
    color: #3b82f6;
}

.ce-add-menu-label {
    position: absolute;
    bottom: -18px; /* надпись под иконками */
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.ce-add-btn svg {
    vertical-align: middle;
    width: 18px;
    height: 18px;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border: none!important;
}

.ce-edit-text-block .ql-editor {
    min-height: 60px;
}

.ce-edit-image-text-right .ql-editor,
.ce-edit-image-text-left .ql-editor {
    min-height: 190px;
}


.ce-edit-image-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f0f3f8;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
}

.ce-edit-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 8px;
}

.ce-edit-upload {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
}

.ce-edit-text-container {
    overflow: hidden; /* важно, чтобы панель Quill не выходила за пределы */
}

.editor-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Дополнительно убедимся, что Quill будет ограничен по ширине */
.editor-wrapper .ql-toolbar,
.editor-wrapper .ql-container {
    width: 100%;
    box-sizing: border-box;
}

.ce-edit-image-text-right {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    align-items: start;
}

.ce-edit-image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Соотношение сторон 16:9 */
    background-color: #f0f3f9;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.ce-edit-image-placeholder,
.ce-edit-image-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.ce-edit-image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fafd;
}

.ce-edit-image-placeholder-icon {
    width: 105px;
    height: 105px;
    background-color: #d9ecff;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='105' height='105' viewBox='0 0 105 105' fill='none'%3E%3Cpath d='M39.375 47.0312C32.725 47.0312 27.3438 41.65 27.3438 35C27.3438 28.35 32.725 22.9688 39.375 22.9688C46.025 22.9688 51.4062 28.35 51.4062 35C51.4062 41.65 46.025 47.0312 39.375 47.0312ZM39.375 29.5312C36.3562 29.5312 33.9062 31.9812 33.9062 35C33.9062 38.0188 36.3562 40.4688 39.375 40.4688C42.3938 40.4688 44.8438 38.0188 44.8438 35C44.8438 31.9812 42.3938 29.5312 39.375 29.5312Z' fill='%23C5D3F0'/%3E%3Cpath d='M65.625 99.5312H39.375C15.6188 99.5312 5.46875 89.3812 5.46875 65.625V39.375C5.46875 15.6188 15.6188 5.46875 39.375 5.46875H56.875C58.6688 5.46875 60.1562 6.95625 60.1562 8.75C60.1562 10.5437 58.6688 12.0312 56.875 12.0312H39.375C19.2062 12.0312 12.0312 19.2062 12.0312 39.375V65.625C12.0312 85.7937 19.2062 92.9688 39.375 92.9688H65.625C85.7937 92.9688 92.9688 85.7937 92.9688 65.625V43.75C92.9688 41.9562 94.4563 40.4688 96.25 40.4688C98.0437 40.4688 99.5312 41.9562 99.5312 43.75V65.625C99.5312 89.3812 89.3812 99.5312 65.625 99.5312Z' fill='%23C5D3F0'/%3E%3Cpath d='M78.75 38.2812C78.3125 38.2812 77.9187 38.1937 77.4812 38.0187C76.2562 37.5375 75.4688 36.3125 75.4688 35V8.75C75.4688 6.95625 76.9563 5.46875 78.75 5.46875C80.5438 5.46875 82.0313 6.95625 82.0313 8.75V27.0813L85.1812 23.9312C86.45 22.6625 88.55 22.6625 89.8188 23.9312C91.0875 25.2 91.0875 27.3 89.8188 28.5688L81.0688 37.3187C80.4563 37.9312 79.625 38.2812 78.75 38.2812Z' fill='%23C5D3F0'/%3E%3Cpath d='M78.7469 38.2813C77.9156 38.2813 77.0844 37.975 76.4281 37.3188L67.6781 28.5688C66.4094 27.3 66.4094 25.2 67.6781 23.9313C68.9469 22.6625 71.0469 22.6625 72.3156 23.9313L81.0656 32.6813C82.3344 33.95 82.3344 36.05 81.0656 37.3188C80.4094 37.975 79.5781 38.2813 78.7469 38.2813Z' fill='%23C5D3F0'/%3E%3Cpath d='M11.6818 86.1875C10.6318 86.1875 9.58184 85.6625 8.96934 84.7437C7.96309 83.2562 8.35684 81.2 9.88809 80.1937L31.4568 65.7125C36.1818 62.5187 42.7006 62.9125 46.9881 66.5437L48.4318 67.8125C50.6193 69.6937 54.3381 69.6937 56.4818 67.8125L74.6818 52.1937C79.3193 48.2125 86.6256 48.2125 91.3068 52.1937L98.4381 58.3187C99.7943 59.5 99.9693 61.5562 98.7881 62.9562C97.6068 64.3125 95.5506 64.4875 94.1506 63.3062L87.0193 57.1812C84.8318 55.3 81.1131 55.3 78.9256 57.1812L60.7256 72.8C56.0881 76.7812 48.7818 76.7812 44.1006 72.8L42.6568 71.5312C40.6443 69.825 37.3193 69.65 35.0881 71.1812L13.5193 85.6625C12.9506 86.0125 12.2943 86.1875 11.6818 86.1875Z' fill='%23C5D3F0'/%3E%3C/svg%3E");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='105' height='105' viewBox='0 0 105 105' fill='none'%3E%3Cpath d='M39.375 47.0312C32.725 47.0312 27.3438 41.65 27.3438 35C27.3438 28.35 32.725 22.9688 39.375 22.9688C46.025 22.9688 51.4062 28.35 51.4062 35C51.4062 41.65 46.025 47.0312 39.375 47.0312ZM39.375 29.5312C36.3562 29.5312 33.9062 31.9812 33.9062 35C33.9062 38.0188 36.3562 40.4688 39.375 40.4688C42.3938 40.4688 44.8438 38.0188 44.8438 35C44.8438 31.9812 42.3938 29.5312 39.375 29.5312Z' fill='%23C5D3F0'/%3E%3Cpath d='M65.625 99.5312H39.375C15.6188 99.5312 5.46875 89.3812 5.46875 65.625V39.375C5.46875 15.6188 15.6188 5.46875 39.375 5.46875H56.875C58.6688 5.46875 60.1562 6.95625 60.1562 8.75C60.1562 10.5437 58.6688 12.0312 56.875 12.0312H39.375C19.2062 12.0312 12.0312 19.2062 12.0312 39.375V65.625C12.0312 85.7937 19.2062 92.9688 39.375 92.9688H65.625C85.7937 92.9688 92.9688 85.7937 92.9688 65.625V43.75C92.9688 41.9562 94.4563 40.4688 96.25 40.4688C98.0437 40.4688 99.5312 41.9562 99.5312 43.75V65.625C99.5312 89.3812 89.3812 99.5312 65.625 99.5312Z' fill='%23C5D3F0'/%3E%3Cpath d='M78.75 38.2812C78.3125 38.2812 77.9187 38.1937 77.4812 38.0187C76.2562 37.5375 75.4688 36.3125 75.4688 35V8.75C75.4688 6.95625 76.9563 5.46875 78.75 5.46875C80.5438 5.46875 82.0313 6.95625 82.0313 8.75V27.0813L85.1812 23.9312C86.45 22.6625 88.55 22.6625 89.8188 23.9312C91.0875 25.2 91.0875 27.3 89.8188 28.5688L81.0688 37.3187C80.4563 37.9312 79.625 38.2812 78.75 38.2812Z' fill='%23C5D3F0'/%3E%3Cpath d='M78.7469 38.2813C77.9156 38.2813 77.0844 37.975 76.4281 37.3188L67.6781 28.5688C66.4094 27.3 66.4094 25.2 67.6781 23.9313C68.9469 22.6625 71.0469 22.6625 72.3156 23.9313L81.0656 32.6813C82.3344 33.95 82.3344 36.05 81.0656 37.3188C80.4094 37.975 79.5781 38.2813 78.7469 38.2813Z' fill='%23C5D3F0'/%3E%3Cpath d='M11.6818 86.1875C10.6318 86.1875 9.58184 85.6625 8.96934 84.7437C7.96309 83.2562 8.35684 81.2 9.88809 80.1937L31.4568 65.7125C36.1818 62.5187 42.7006 62.9125 46.9881 66.5437L48.4318 67.8125C50.6193 69.6937 54.3381 69.6937 56.4818 67.8125L74.6818 52.1937C79.3193 48.2125 86.6256 48.2125 91.3068 52.1937L98.4381 58.3187C99.7943 59.5 99.9693 61.5562 98.7881 62.9562C97.6068 64.3125 95.5506 64.4875 94.1506 63.3062L87.0193 57.1812C84.8318 55.3 81.1131 55.3 78.9256 57.1812L60.7256 72.8C56.0881 76.7812 48.7818 76.7812 44.1006 72.8L42.6568 71.5312C40.6443 69.825 37.3193 69.65 35.0881 71.1812L13.5193 85.6625C12.9506 86.0125 12.2943 86.1875 11.6818 86.1875Z' fill='%23C5D3F0'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.ce-edit-image-preview {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


.ce-edit-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    background-color: #f9fbff;
    border-radius: 12px;
    border: 1px solid #e7ecf6;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    justify-self: center;
}

.ce-edit-video-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.template_video-item__plug {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.template_video-item__plug-input {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 1px solid #d1d9eb;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    margin-bottom: 10px;
    text-align: center;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.template_video-item__plug-text {
    margin-bottom: 10px!important;
    justify-self: center;
}

.template_video-item__plug-inner {
    width: 100%;
}

.template_video-item__plug-link {
    text-align: center;
}

.template_video-item__plug-input:focus {
    border-color: #84a6f9;
}

.template_video-item__plug-btns {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.template_video-item__plug-btn {
    display: inline-block;
    cursor: pointer;
    padding: 12px 24px;
    background-color: #dae6ff;
    color: #3b82f6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    user-select: none;
    width: 100%;
    max-width: 400px;
}

.template_video-item__plug-btn:hover {
    background-color: #b9d0ff;
    color: #3b82f6;
}

.template_video-item__img {
    width: 100%;
    max-width: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.template_video-item__img video {
    max-height: 580px;
}

.template_video-item__iframe {
    width: 100%;
    max-width: 1000px;
    height: 560px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.template_video-item__img-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.template_video-item__remove-btn {
    cursor: pointer;
    padding: 8px 16px;
    background-color: #fce4e4;
    color: #d93025;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.template_video-item__remove-btn:hover {
    background-color: #f8c8c8;
    color: #b9261d;
}

.template_video-item__plug-input::placeholder {
    color: #a6b1c8;
}

.template_video-item__plug-btn input[type=file] {
    display: none;
}

/* Иконка плеера */
.template_video-item__plug::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="%23c1cff3"><rect width="64" height="64" rx="12"/><polygon points="26,20 26,44 46,32" fill="%23fff"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 20px;
}

.ce-edit-video-error {
    color: #ff5c5c;
    font-size: 14px;
    text-align: center;
}

.template_video-item__plug-input.error {
    border-color: #ff5c5c;
}

.incorrect-video-link {
    font-weight: 500;
    display: block;
    margin-top: 5px;
    word-break: break-all;
}

.ce-edit-audio {
    text-align: center;
    padding: 20px;
    background: #f7f9fc;
    border-radius: 8px;
    border: 1px solid #e0e5ec;
}

.ce-audio-placeholder {
    margin-bottom: 10px;
}

.ce-audio-icon i {
    width: 50px;
    height: 50px;
    stroke: #a2b5cd;
}

.ce-audio-actions, .ce-audio-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.ce-edit-file-block {
    background: #f9fbff;
    border: 1px solid #e0e6f2;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ce-edit-file-upload-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ce-edit-file-upload-icon {
    background: #3b82f6;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ce-edit-file-upload-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ce-edit-file-upload-title {
    font-weight: 600;
    font-size: 16px;
    color: #1d1d1f;
}

.ce-edit-file-upload-sub {
    font-size: 14px;
    color: #6b6b6b;
}

.ce-edit-file-upload-actions .ce-btn {
    margin-top: 6px;
}

.ce-edit-file-preview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 12px 16px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
}

.ce-edit-file-preview-icon {
    width: 48px;
    height: 48px;
    background: #eef2ff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #3b82f6;
    font-size: 14px;
}

.ce-edit-file-ext {
    padding: 4px 8px;
    background: #3b82f6;
    color: white;
    border-radius: 4px;
    font-size: 12px;
}

.ce-edit-file-preview-info {
    flex: 1;
    margin-left: 12px;
}

.ce-edit-file-preview-name {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 4px;
}

.ce-edit-file-preview-size {
    font-size: 13px;
    color: #6b6b6b;
    margin-left: 8px;
}

.ce-btn-icon {
    background: transparent;
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.ce-btn-icon:hover {
    color: #ff3b30;
}
.ce-edit-file-upload {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3b82f6;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: background-color 0.2s ease;
}

.ce-edit-file-upload:hover {
    background-color: #3b82f6;
}

.ce-edit-file-upload:active {
    background-color: #3b82f6;
}

.ce-edit-file-upload input[type="file"] {
    display: none;
}

.editable-filename {
    outline: none;
    cursor: text;
}

.ce-edit-icon {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
    vertical-align: middle;
}

.ce-edit-icon:hover {
    color: #000;
}
.ce-preview-file-preview-card {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #f8fafc;
    gap: 16px;
    font-family: sans-serif;
    max-width: 400px;
}

.ce-preview-file-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #e4e7eb;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    color: #4a5568;
    text-transform: uppercase;
}

.ce-preview-file-preview-info {
    flex-grow: 1;
}

.ce-preview-file-preview-name {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    word-break: break-all;
}

.ce-preview-file-preview-size {
    font-size: 13px;
    color: #718096;
    margin-top: 2px;
}

.ce-preview-file-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.ce-preview-file-view,
.ce-preview-file-download {
    color: #3b82f6;
    text-decoration: none;
    font-size: 13px;
}

.ce-preview-file-view:hover,
.ce-preview-file-download:hover {
    text-decoration: underline;
}

.ce-preview-empty {
    padding: 12px;
    font-size: 13px;
    color: #a0aec0;
    background: #f7fafc;
    border-radius: 6px;
    border: 1px dashed #cbd5e0;
}