/**
 * Spotless Editor - Styles
 * 
 * @package     SpotlessEditor
 * @version     1.0.0
 * @author      Josh / Spotless Web Design
 * @copyright   2026 Spotless Web Design
 * @license     Proprietary
 * 
 * Core styles for the Spotless WYSIWYG Editor.
 * Requires Line Awesome icons: https://icons8.com/line-awesome
 */

/* ============================================
   CSS VARIABLES / THEME
   ============================================ */
:root {
    --swp-accent-color: #2a9d90;
    --swp-accent-hover: #238b7e;
    --swp-accent-light: #e8f5f3;
    --swp-bg-color: #f5f5f5;
    --swp-bg-white: #ffffff;
    --swp-border-color: #ddd;
    --swp-border-light: #eee;
    --swp-text-color: #333;
    --swp-text-muted: #666;
    --swp-text-light: #999;
}

/* ============================================
   EDITOR CONTAINER
   ============================================ */
.swp_editor {
    margin: 5px;
    background-color: #f5f5f5;
    border-top: 1px solid #f5f5f5;
    border-right: 2px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    border-left: 2px solid #f5f5f5;
    border-radius: 4px;
    position: relative;
}

.swp_secontrols {
    background-color: #f5f5f5;
    padding: 0px 5px 5px 5px;
    position: relative;
    z-index: 100;
}

/* Ensure all toolbar dropdowns appear above page content */
.swp_secontrols select,
.swp_secontrols .swp_eselectframe,
.swp_secontrols .swp_edropdown,
.swp_secontrols .swp_epicker,
.swp_ecadiv,
.swp_fontselect,
.swp_fontsizeselect,
.swp_aligndropdown,
.swp_textcasedropdown {
    position: relative;
    z-index: 101;
}

/* Dropdown menus and pickers that appear from toolbar */
.swp_dropdown_menu,
.swp_fontpicker,
.swp_colourpicker,
.swp_highlightpicker,
.swp_alignpicker,
.swp_listpicker,
.swp_ecallout_picker,
.swp_edivider_picker,
.swp_ecolumns_picker,
.swp_textcase_dropdown {
    z-index: 10000 !important;
}

.swp_seinput {
    border: 0px solid #f5f5f5;
    padding: 10px;
    width: 100%;
    min-height: 400px;
    margin: 0px;
    line-height: normal;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    background: white;
}

.swp_sehtmlinput {
    background-color: #ffffff;
    border: 1px solid #f5f5f5;
    padding: 10px;
    min-height: 200px;
    margin: 0px;
    white-space: normal;
}

.swp_evcompare {
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    margin: 0px;
}

.swp_cversion {
    display: inline-block;
    min-height: 400px;
    width: 49%;
    margin-left: 1%;
    vertical-align: top;
    border-radius: 4px;
}

.swp_oversion {
    display: inline-block;
    width: 49%;
    margin-left: 1%;
    vertical-align: top;
    border-radius: 4px;
}

.swp_ovcontrol,
.swp_cvcontrol {
    background-color: #f5f5f5;
    padding: 10px;
}

.swp_ovcontrol>* {
    display: inline-block;
}

.swp_ecvinput,
.swp_eovinput {
    background-color: #ffffff;
    padding: 10px;
    min-height: 400px;
}

.swp_evbutton {
    display: inline-block;
    margin-right: 2px;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 20px;
    font-size: 14px;
    user-select: none;
}

.swp_evbutton:hover {
    background-color: #000000;
    color: #ffffff;
}

.swp_evbdisabled {
    opacity: 0.5;
}

.swp_ecvid,
.swp_eovid {
    margin: 0px 5px;
    user-select: none;
}

/* ============================================
   TOOLBAR BUTTONS
   ============================================ */
.swp_ecitem {
    display: inline-block;
    margin-left: 2px;
    padding: 5px 2px;
    border-radius: 3px;
    cursor: pointer;
}

.swp_ecbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
    color: #555;
}

.swp_ecbutton.swp_ecbutton_active {
    background-color: var(--swp-accent-color, #2a9d90);
    color: #fff;
}

.swp_ecbutton_active {
    background-color: #e0f2f1 !important;
    color: #2a9d90 !important;
}

/* Floating show toolbar button */
.swp_etoolbar_show_float {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: #2a9d90;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

.swp_etoolbar_show_float:hover {
    background: #238b7e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.swp_etoolbar_show_float i {
    font-size: 14px;
}

.swp_ecbutton:hover {
    background: #e8e8e8;
    color: #333;
}

.swp_ecbutton.swp_selecbutton,
.swp_ecbutton.swp_selecabutton {
    background: #e0e0e0;
    color: #333;
}

.swp_ecbutton.swp_ebdisabled {
    opacity: 0.4;
    pointer-events: none;
}

.swp_ecbutton i {
    font-size: 16px;
}

.swp_ecbutton_split {
    position: relative;
    padding-right: 14px;
}

.swp_ecbutton_split .swp_epaste_dropdown {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ddd;
}

.swp_ecbutton_split .swp_epaste_dropdown i {
    font-size: 10px;
}

.swp_ecabutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
    color: #555;
}

.swp_ecabutton:hover {
    background: #e8e8e8;
    color: #333;
}

.swp_ecabutton.swp_selecabutton {
    background: #e0e0e0;
    color: #333;
}

.swp_ecabutton.swp_ebdisabled {
    opacity: 0.4;
    pointer-events: none;
}

.swp_eselectframe {
    display: inline-block;
    min-width: 90px;
    max-width: 125px;
    background-color: transparent;
    margin-right: 5px;
    margin-top: -2px;
    padding: 5px 0px;
    vertical-align: middle;
    cursor: pointer;
}

.swp_ecitem>.select_numberframe {
    background-color: #efefef;
    border: 1px solid #efefef;
}

.select_num_input {
    background-color: #efefef !important;
}

.swp_eselect>.select_singledropdown {
    background-color: #efefef;
    padding: 3px 5px;
    border: 1px solid #efefef;
    min-height: 11px;
    max-height: 18px;
    line-height: 10px;
    font-size: 10px;
    vertical-align: middle;
    border-radius: 4px;
    text-overflow: ellipsis;
}

.swp_eselect>.select_singledropdown:after {
    float: right;
    content: "\25bc";
    color: var(--accent1);
    margin-left: 5px;
    margin-right: 2px;
}

.swp_eselect>.select_dropdown>.select_dropdownitem {
    font-size: 10px;
}

.swp_ecadiv {
    display: inline-flex;
    align-items: center;
    color: #ccc;
    padding: 0 4px;
    user-select: none;
}

/* ============================================
   EDITOR CONTENT FORMATTING
   ============================================ */
.swp_seinput>ul {
    margin-bottom: 5px;
}

.swp_seinput>p {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.swp_seinput h1,
.swp_seinput h2,
.swp_seinput h3,
.swp_seinput h4,
.swp_seinput h5,
.swp_seinput h6 {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Ensure all style spans stay inline */
span[swp_etype="swp_estyle"] {
    display: inline !important;
}

.swp_ebold {
    font-weight: bold;
}

.swp_eitalics {
    font-style: italic;
}

.swp_estrike {
    text-decoration: line-through;
}

.swp_eunderline {
    text-decoration: underline;
}

.swp_equote {
    display: inline;
    background: #f5f5f5;
    margin: 0px 10px;
    padding: 2px 10px;
    border-radius: 4px;
}

.swp_equote:before {
    display: inline;
    color: #ccc;
    content: "\200E\201C";
    font-size: 2.5em;
    line-height: 0.1em;
    margin-right: 0.15em;
    vertical-align: -0.35em;
}

.swp_equote:after {
    display: inline;
    color: #ccc;
    content: "\201D\200E";
    font-size: 2.5em;
    line-height: 0.1em;
    margin-left: 0.15em;
    vertical-align: -0.35em;
}

.swp_ertl {
    text-align: right;
}

.swp_elstyle {
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-left: 30px;
    padding-right: 0;
    list-style-position: outside;
}

.swp_elstyle li {
    padding-left: 0;
    padding-right: 0;
}

.swp_ertl .swp_elstyle,
.swp_ertl.swp_elstyle {
    margin-left: 0 !important;
    margin-right: 0;
    margin-bottom: 0 !important;
    padding-left: 0;
    padding-right: 30px;
    list-style-position: inside;
    direction: rtl;
}

.swp_ertl .swp_elstyle li,
.swp_ertl.swp_elstyle li {
    text-align: right;
    direction: rtl;
}

/* ============================================
   IMAGE PANEL
   ============================================ */
.swp_eimage_panel {
    width: 100%;
    background: #fff;
    z-index: 1000;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.swp_eimage_panel_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.swp_eimage_close {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.swp_eimage_close:hover {
    background: #e0e0e0;
}

.swp_eimage_dropzone {
    padding: 60px 20px;
    text-align: center;
    border: 2px dashed #ccc;
    margin: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.swp_eimage_dropzone:hover {
    border-color: #2a9d8f;
    background: #f9fffe;
}

.swp_eimage_dropzone.dragover {
    border-color: #2a9d8f;
    background: #e8f5f3;
}

.swp_eimage_dropzone i {
    font-size: 48px;
    color: #aaa;
    margin-bottom: 10px;
    display: block;
}

.swp_eimage_dropzone p {
    margin: 5px 0;
    color: #666;
}

.swp_eimage_preview_container {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.swp_eimage_preview_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.swp_eimage_preview_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.swp_eimage_preview_count {
    font-weight: 600;
    color: #333;
}

.swp_eimage_preview_actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.swp_eimage_preview_actions button {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.swp_eimage_preview_actions button:hover {
    background: #f5f5f5;
}

.swp_eimage_uploadmore_btn {
    background: #2a9d90 !important;
    color: white !important;
    border-color: #2a9d90 !important;
}

.swp_eimage_uploadmore_btn:hover {
    background: #238b7e !important;
}

.swp_eimage_preview_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swp_eimage_preview_item {
    position: relative;
    width: 120px;
    height: 120px;
    border: 3px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.swp_eimage_preview_item:hover {
    border-color: #999;
}

.swp_eimage_preview_item.checked {
    border-color: #2a9d90;
}

.swp_eimage_preview_item.editing {
    border-color: #f0ad4e;
    box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.4);
}

.swp_eimage_preview_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swp_eimage_preview_item_checkbox {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 2;
}

.swp_eimage_preview_item_checkbox:hover {
    border-color: #2a9d90;
}

.swp_eimage_preview_item.checked .swp_eimage_preview_item_checkbox {
    background: #2a9d90;
    border-color: #2a9d90;
    color: white;
}

.swp_eimage_preview_item_remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    z-index: 2;
}

.swp_eimage_preview_item:hover .swp_eimage_preview_item_remove {
    opacity: 1;
}

.swp_eimage_preview_item_remove:hover {
    background: rgba(220, 53, 69, 0.9);
}

.swp_eimage_preview {
    max-width: 100%;
    max-height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.swp_eimage_size_controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 10px;
}

.swp_eimage_buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid #eee;
}

.swp_eimage_btn_cancel,
.swp_eimage_btn_insert {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.swp_eimage_btn_cancel {
    background: #f0f0f0;
    color: #333;
}

.swp_eimage_btn_cancel:hover {
    background: #e0e0e0;
}

.swp_eimage_btn_insert {
    background: #2a9d8f;
    color: #fff;
}

.swp_eimage_btn_insert:hover:not(:disabled) {
    background: #238b7e;
}

.swp_eimage_btn_insert:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Image Wrapper */
.swp_eimage_wrapper {
    display: block;
    position: relative;
    margin: 8px auto;
    line-height: 0;
    user-select: none;
    width: fit-content;
    max-width: 100%;
}

.swp_eimage_wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}

.swp_eimage_wrapper.selected {
    outline: 2px solid #2a9d8f;
}

/* Resize Handles */
.swp_eimage_handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #2a9d8f;
    border: 1px solid #fff;
    border-radius: 2px;
    display: none;
}

.swp_eimage_wrapper.selected .swp_eimage_handle {
    display: block;
}

.swp_eimage_handle_nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.swp_eimage_handle_ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.swp_eimage_handle_sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.swp_eimage_handle_se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.swp_eimage_size_tooltip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
}

.swp_eimage_wrapper.selected .swp_eimage_size_tooltip {
    display: block;
}

.swp_ecdisabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Image Tabs */
.swp_eimage_tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.swp_eimage_tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    cursor: pointer;
    background: #f5f5f5;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.swp_eimage_tab:hover {
    background: #eee;
}

.swp_eimage_tab_active {
    background: #fff;
    border-bottom: 2px solid #2a9d8f;
    font-weight: 600;
}

.swp_eimage_content {
    min-height: 200px;
}

/* Library grid */
.swp_eimage_library {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.swp_eimage_library_empty {
    width: 100%;
    text-align: center;
    color: #999;
    padding: 40px;
}

.swp_eimage_library_item {
    position: relative;
    width: 120px;
    height: 120px;
    border: 3px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.swp_eimage_library_item:hover {
    border-color: #999;
}

.swp_eimage_library_item.checked {
    border-color: #2a9d90;
}

.swp_eimage_library_item.editing {
    border-color: #f0ad4e;
    box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.4);
}

.swp_eimage_library_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swp_eimage_library_item_checkbox {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    cursor: pointer;
    transition: all 0.15s;
    z-index: 2;
}

.swp_eimage_library_item_checkbox:hover {
    border-color: #2a9d90;
}

.swp_eimage_library_item.checked .swp_eimage_library_item_checkbox {
    background: #2a9d90;
    border-color: #2a9d90;
    color: white;
}

.swp_eimage_library_item_delete {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    z-index: 2;
}

.swp_eimage_library_item:hover .swp_eimage_library_item_delete {
    opacity: 1;
}

.swp_eimage_library_item_delete:hover {
    background: rgba(220, 53, 69, 0.9);
}

.swp_eimage_wrapper.dragging {
    opacity: 0.5;
}

.swp_eimage_wrapper[draggable="true"] {
    cursor: grab;
}

.swp_eimage_wrapper[draggable="true"]:active {
    cursor: grabbing;
}

.swp_seinput.swp_eimage_drop_active {
    background: #f5fffe;
}

.swp_eimage_drop_indicator {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #2a9d8f;
    margin: 0 -1px;
    animation: swp_eimage_blink 1s infinite;
}

@keyframes swp_eimage_blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ============================================
   FIND/REPLACE DIALOG
   ============================================ */
.swp_efindreplace_dialog {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
}

.swp_efr_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.swp_efr_title {
    font-weight: 600;
    color: #333;
}

.swp_efr_close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}

.swp_efr_close:hover {
    color: #333;
}

.swp_efr_body {
    padding: 15px;
}

.swp_efr_row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.swp_efr_row label {
    width: 60px;
    color: #666;
    font-size: 13px;
}

.swp_efr_row input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.swp_efr_row input[type="text"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

.swp_efr_options {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.swp_efr_options label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}

.swp_efr_status {
    font-size: 12px;
    color: #666;
    min-height: 18px;
}

.swp_efr_footer {
    display: flex;
    gap: 8px;
    padding: 12px 15px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.swp_efr_footer button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.swp_efr_footer button:hover {
    background: #f0f0f0;
}

/* Find Highlights */
.swp_efind_highlight {
    background-color: #ffeb3b;
    border-radius: 2px;
}

.swp_efind_highlight_active {
    background-color: #ff9800;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.3);
}

/* ============================================
   CLIPBOARD HISTORY DIALOG
   ============================================ */
.swp_eclipboard_dialog {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 350px;
    max-height: 400px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.swp_ecb_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.swp_ecb_title {
    font-weight: 600;
    color: #333;
}

.swp_ecb_close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.swp_ecb_close:hover {
    color: #333;
}

.swp_ecb_body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.swp_ecb_empty {
    padding: 20px;
    text-align: center;
    color: #999;
}

.swp_ecb_item {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_ecb_item:hover {
    border-color: #007bff;
    background: #f8f9ff;
}

.swp_ecb_preview {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    word-break: break-word;
    max-height: 60px;
    overflow: hidden;
    line-height: 1.4;
}

.swp_ecb_meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.swp_ecb_time {
    font-size: 11px;
    color: #999;
    flex: 1;
}

.swp_ecb_type {
    color: #999;
    font-size: 14px;
}

.swp_ecb_actions {
    display: flex;
    gap: 5px;
}

.swp_ecb_actions button {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    color: #666;
}

.swp_ecb_actions button:hover {
    background: #f0f0f0;
    color: #333;
}

.swp_ecb_actions .swp_ecb_delete {
    color: #dc3545;
}

.swp_ecb_actions .swp_ecb_delete:hover {
    background: #fff5f5;
    border-color: #dc3545;
}

.swp_ecb_footer {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.swp_ecb_footer button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.swp_ecb_footer button:hover {
    background: #f0f0f0;
}

/* Format Painter Active State */
.swp_ecabutton.swp_ebactive {
    background: #007bff !important;
    color: #fff !important;
}

.swp_ecabutton.swp_eblockedactive {
    background: #28a745 !important;
    color: #fff !important;
    animation: swp_pulse 1s infinite;
}

@keyframes swp_pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Paste Options */
.swp_epaste_options {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    font-size: 13px;
    overflow: hidden;
}

.swp_epaste_option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.15s;
}

.swp_epaste_option:hover {
    background: #f0f0f0;
}

.swp_epaste_option i {
    font-size: 16px;
    color: #666;
    width: 20px;
    text-align: center;
}

.swp_epaste_divider {
    height: 1px;
    background: #eee;
    margin: 5px 0;
}

/* ============================================
   LINK DIALOG
   ============================================ */
.swp_elink_dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 350px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.swp_elink_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_elink_title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.swp_elink_close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.swp_elink_close:hover {
    color: #333;
}

.swp_elink_body {
    padding: 16px;
}

.swp_elink_row {
    margin-bottom: 12px;
}

.swp_elink_row:last-child {
    margin-bottom: 0;
}

.swp_elink_row label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.swp_elink_row input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}

.swp_elink_row input[type="text"]:focus {
    outline: none;
    border-color: #2a9d90;
    box-shadow: 0 0 0 2px rgba(42, 157, 144, 0.1);
}

.swp_elink_row input[type="checkbox"] {
    margin-right: 6px;
}

.swp_elink_footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.swp_elink_footer button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
}

.swp_elink_footer button:hover {
    background: #f5f5f5;
}

.swp_elink_footer button.swp_elink_primary {
    background: #2a9d90;
    border-color: #2a9d90;
    color: #fff;
}

.swp_elink_footer button.swp_elink_primary:hover {
    background: #238b7e;
}

/* Link styling in editor */
.swp_seinput a {
    color: #2a9d90;
    text-decoration: underline;
}

.swp_seinput a:hover {
    color: #238b7e;
}

/* Horizontal rule */
.swp_seinput hr {
    border: none;
    border-top: 2px solid #ddd;
    margin: 16px 0;
    cursor: default;
}

.swp_seinput hr:hover {
    border-top-color: #2a9d90;
}

.swp_seinput hr::selection {
    background: rgba(42, 157, 144, 0.2);
}

/* ============================================
   STATUS BAR
   ============================================ */
.swp_estatus {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 0 0 4px 4px;
    font-size: 11px;
    color: #888;
}

.swp_estatus_left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.swp_estatus_right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.swp_estatus_right span {
    color: #666;
}

/* Toggle switch */
.swp_etoggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.swp_etoggle input {
    display: none;
}

.swp_etoggle_slider {
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    position: relative;
    transition: background 0.2s;
}

.swp_etoggle_slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}

.swp_etoggle input:checked+.swp_etoggle_slider {
    background: #2a9d90;
}

.swp_etoggle input:checked+.swp_etoggle_slider::before {
    transform: translateX(14px);
}

.swp_etoggle_label {
    color: #666;
    font-size: 11px;
}

/* ============================================
   CODE BLOCK
   ============================================ */
.swp_ecodeblock {
    display: flex;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin: 12px 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 20px;
    overflow: hidden;
}

.swp_ecodeblock_lines {
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    padding: 12px 0;
    text-align: right;
    user-select: none;
    min-width: 40px;
    border-right: 1px solid #ddd;
}

.swp_ecodeblock_lines span {
    display: block;
    padding: 0 12px;
    color: #999;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
}

.swp_ecodeblock_content {
    flex: 1;
    padding: 12px 16px;
    color: #333;
    margin: 0;
    white-space: pre;
    overflow-x: auto;
    outline: none;
    min-height: 20px;
    background: #f8f8f8;
}

.swp_ecodeblock_content:empty::before {
    content: 'Enter code...';
    color: #aaa;
}

.swp_ecodeblock.swp_ecodeblock_inline {
    display: inline-flex;
    margin: 0 4px;
    vertical-align: middle;
    border-radius: 4px;
}

.swp_ecodeblock.swp_ecodeblock_inline .swp_ecodeblock_lines {
    display: none;
}

.swp_ecodeblock.swp_ecodeblock_inline .swp_ecodeblock_content {
    padding: 2px 8px;
    background: #f4f4f4;
    color: #c7254e;
    border: 1px solid #ddd;
    border-radius: 4px;
    white-space: pre;
    line-height: 1.4;
}

.swp_ecodeblock_content::selection {
    background: rgba(42, 157, 144, 0.3);
}

.swp_ecodeblock:focus-within {
    border-color: #2a9d90;
    box-shadow: 0 0 0 2px rgba(42, 157, 144, 0.15);
}

/* ============================================
   TABBED CONTROLS
   ============================================ */
.swp_secontrols_tabbed {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.swp_etab_buttons {
    display: flex;
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.swp_etab_buttons::-webkit-scrollbar {
    display: none;
}

.swp_etab_button {
    padding: 4px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.15s ease;
    user-select: none;
}

.swp_etab_button:hover {
    background: #f0f0f0;
    color: #333;
}

.swp_etab_button.swp_etab_active {
    background: #fff;
}

.swp_etab_button i {
    font-size: 13px;
}

.swp_etab_button span {
    font-weight: 500;
}

.swp_etab_contents {
    padding: 6px 8px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}

.swp_etab_content {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.swp_etab_divider {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 6px;
    flex-shrink: 0;
}

.swp_secontrols_tabbed .swp_ecadiv {
    display: none;
}

@media (max-width: 480px) {
    .swp_etab_button {
        padding: 4px 8px;
        font-size: 10px;
    }

    .swp_etab_button i {
        font-size: 12px;
    }

    .swp_etab_contents {
        padding: 4px 6px;
    }

    .swp_etab_divider {
        height: 16px;
        margin: 0 2px;
    }
}

@media (max-width: 360px) {
    .swp_etab_button span {
        display: none;
    }

    .swp_etab_button {
        padding: 4px 8px;
    }

    .swp_etab_button i {
        font-size: 14px;
    }
}

/* ============================================
   SYMBOL PICKER
   ============================================ */
.swp_symbolpicker {
    position: absolute;
    width: 380px;
    max-height: 500px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.swp_symbolpicker_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.swp_symbolpicker_tabs {
    display: flex;
    gap: 5px;
}

.swp_symbolpicker_tab {
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    transition: background 0.2s;
}

.swp_symbolpicker_tab:hover {
    background: #e0e0e0;
}

.swp_symbolpicker_tab_active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.swp_symbolpicker_close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px;
    color: #666;
}

.swp_symbolpicker_close:hover {
    background: #e0e0e0;
    color: #333;
}

.swp_symbolpicker_search {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.swp_symbolpicker_search input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.swp_symbolpicker_search input:focus {
    border-color: #2a9d90;
}

/* Skin tone selector - inline row */
.swp_symbolpicker_skintone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.swp_skintone_label {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.swp_skintone_options {
    display: flex;
    gap: 4px;
}

.swp_skintone_option {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.15s;
}

.swp_skintone_option:hover {
    background: #e8f5f3;
}

.swp_skintone_active {
    border-color: #2a9d90;
    background: #e8f5f3;
}

/* Categories - compact row without scroll */
.swp_symbolpicker_categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.swp_symbolcat {
    padding: 4px 10px;
    font-size: 11px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.swp_symbolcat:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.swp_symbolcat_active {
    background: #2a9d90;
    color: #fff;
    border-color: #2a9d90;
}

.swp_symbolpicker_content {
    padding: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.swp_symbolgrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.swp_symbolitem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: background 0.15s;
}

.swp_symbolitem:hover {
    background: #e8f5f3;
}

.swp_symbolitem_char {
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.swp_symbolnoresults {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}

/* Table Dialog - Modal Overlay */
.swp_tabledialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_tabledialog_content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.swp_tabledialog_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.swp_tabledialog_close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.swp_tabledialog_close:hover {
    background: #e0e0e0;
}

.swp_tabledialog_body {
    padding: 20px;
    overflow-y: auto;
}

.swp_tabledialog_section {
    margin-bottom: 20px;
}

.swp_tabledialog_section:last-child {
    margin-bottom: 0;
}

.swp_tabledialog_section>label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 13px;
    color: #333;
}

.swp_tabledialog_size {
    display: flex;
    gap: 15px;
}

.swp_tabledialog_input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_tabledialog_input span {
    font-size: 13px;
    color: #666;
}

.swp_tabledialog_input input {
    width: 60px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* Quick select grid */
.swp_tabledialog_grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    padding: 5px;
    background: #f5f5f5;
    border-radius: 4px;
}

.swp_tablegrid_cell {
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.1s;
}

.swp_tablegrid_cell:hover,
.swp_tablegrid_cell_active {
    background: #2a9d90;
    border-color: #2a9d90;
}

.swp_tablegrid_cell_selected {
    background: #1a7a6e !important;
    border-color: #1a7a6e !important;
}

.swp_tabledialog_gridlabel {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

/* Table style options */
.swp_tabledialog_styles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.swp_tablestyle_option {
    cursor: pointer;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.swp_tablestyle_option:hover {
    border-color: #ddd;
}

.swp_tablestyle_active {
    border-color: #2a9d90;
}

.swp_tablestyle_preview {
    width: 60px;
    height: 40px;
    margin-bottom: 5px;
    border-radius: 2px;
}

.swp_tablestyle_default {
    background: linear-gradient(to bottom, #f5f5f5 25%, #fff 25%, #fff 50%, #f9f9f9 50%, #f9f9f9 75%, #fff 75%);
    border: 1px solid #ddd;
}

.swp_tablestyle_bordered {
    background: linear-gradient(to bottom, #f0f0f0 0%, #f0f0f0 30%, #fff 30%, #fff 33%, #333 33%, #333 34%, #fff 34%, #fff 66%, #333 66%, #333 67%, #fff 67%, #fff 100%);
    border: 2px solid #333;
}

.swp_tablestyle_striped {
    background: linear-gradient(to bottom, #2a9d90 25%, #fff 25%, #fff 50%, #e8f5f3 50%, #e8f5f3 75%, #fff 75%);
    border: 1px solid #ddd;
}

.swp_tablestyle_minimal {
    background: #fff;
    border: none;
    border-bottom: 2px solid #333;
    border-top: 2px solid #333;
}

.swp_tablestyle_option span {
    font-size: 11px;
    color: #666;
}

.swp_tabledialog_footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
}

.swp_tabledialog_btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.swp_tabledialog_btn_cancel {
    background: #e0e0e0;
    color: #333;
}

.swp_tabledialog_btn_cancel:hover {
    background: #d0d0d0;
}

.swp_tabledialog_btn_insert {
    background: #2a9d90;
    color: #fff;
}

.swp_tabledialog_btn_insert:hover {
    background: #238b7e;
}

/* Table wrapper and styles */
.swp_etable_wrapper {
    position: relative;
    margin: 15px 0;
    overflow: visible;
}

.swp_seinput table.swp_etable,
.swp_etable_wrapper table.swp_etable,
table.swp_etable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff !important;
    border: none !important;
}

.swp_etable_fullwidth {
    width: 100% !important;
    table-layout: fixed;
}

.swp_etable:not(.swp_etable_fullwidth) {
    width: auto;
    table-layout: auto;
}

.swp_seinput .swp_etable td,
.swp_seinput .swp_etable th,
.swp_etable td,
.swp_etable th {
    padding: 8px 12px !important;
    min-width: 30px !important;
    vertical-align: top !important;
    outline: none !important;
    background-color: transparent !important;
}

.swp_etable th {
    font-weight: 600 !important;
}

/* Table style: Default */
table.swp_etable_default {
    border: 1px solid #ddd !important;
}

.swp_etable_default td,
.swp_etable_default th {
    border: 1px solid #ddd !important;
}

.swp_etable_default th {
    background: #f5f5f5 !important;
}

/* Table style: Bordered */
table.swp_etable_bordered {
    border: 2px solid #333 !important;
}

.swp_etable_bordered td,
.swp_etable_bordered th {
    border: 1px solid #333 !important;
}

.swp_etable_bordered th {
    background: #f0f0f0 !important;
}

/* Table style: Striped */
table.swp_etable_striped {
    border: 1px solid #ddd !important;
}

.swp_etable_striped td,
.swp_etable_striped th {
    border: 1px solid #ddd !important;
}

.swp_etable_striped th {
    background: #2a9d90 !important;
    color: #fff !important;
    border-color: #2a9d90 !important;
}

.swp_etable_striped tbody tr:nth-child(even) {
    background: #e8f5f3 !important;
}

.swp_etable_striped tbody tr:nth-child(even) td {
    background: #e8f5f3 !important;
}

/* Table style: Minimal */
table.swp_etable_minimal {
    border: none !important;
    border-top: 2px solid #333 !important;
    border-bottom: 2px solid #333 !important;
}

.swp_etable_minimal td,
.swp_etable_minimal th {
    border: none !important;
    border-bottom: 1px solid #ddd !important;
}

.swp_etable_minimal th {
    background: transparent !important;
    border-bottom: 2px solid #333 !important;
}

/* Cell selection */
.swp_etable_cell_selected,
table.swp_etable td.swp_etable_cell_selected,
table.swp_etable th.swp_etable_cell_selected {
    outline: 3px solid #0066cc !important;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 100px rgba(0, 102, 204, 0.3) !important;
}

/* Resize handles */
.swp_etable_resize_handle {
    position: absolute;
    background: transparent;
    z-index: 10;
}

.swp_etable_resize_col {
    width: 6px;
    top: 0;
    cursor: col-resize;
}

.swp_etable_resize_col:hover {
    background: #2a9d90;
}

.swp_etable_resize_row {
    height: 6px;
    left: 0;
    cursor: row-resize;
}

.swp_etable_resize_row:hover {
    background: #2a9d90;
}

/* Context menu */
.swp_table_contextmenu {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10002;
    min-width: 200px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 5px 0;
}

.swp_table_contextmenu_section {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.swp_table_contextmenu_section:last-child {
    border-bottom: none;
}

.swp_table_contextmenu_title {
    padding: 5px 15px;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
}

.swp_table_contextmenu_item {
    padding: 8px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    transition: background 0.1s;
}

.swp_table_contextmenu_item:hover {
    background: #f5f5f5;
}

.swp_table_contextmenu_item i {
    width: 16px;
    color: #666;
}

.swp_table_contextmenu_danger {
    color: #e74c3c;
}

.swp_table_contextmenu_danger i {
    color: #e74c3c;
}

.swp_table_contextmenu_disabled {
    color: #ccc;
    cursor: not-allowed;
}

.swp_table_contextmenu_disabled:hover {
    background: transparent;
}

/* ============================================
   TEMPLATES & EXPORT PANELS
   ============================================ */
.swp_etemplates_panel,
.swp_eexport_panel,
.swp_estats_panel,
.swp_eshortcuts_panel {
    position: fixed;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 10000;
}

.swp_etemplates_panel {
    width: 500px;
    max-height: 600px;
    overflow-y: auto;
}

.swp_eexport_panel {
    width: 450px;
}

.swp_estats_panel {
    width: 400px;
}

.swp_eshortcuts_panel {
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.swp_etemplates_overlay,
.swp_eexport_overlay,
.swp_estats_overlay,
.swp_eshortcuts_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.swp_etemplates_panel_header,
.swp_eexport_panel_header,
.swp_estats_panel_header,
.swp_eshortcuts_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eee;
}

.swp_etemplates_panel_title,
.swp_eexport_panel_title,
.swp_estats_panel_title,
.swp_eshortcuts_title {
    font-weight: 600;
    font-size: 18px;
}

.swp_etemplates_close,
.swp_eexport_close,
.swp_estats_close,
.swp_eshortcuts_close {
    cursor: pointer;
    font-size: 24px;
    color: #999;
    line-height: 1;
}

.swp_etemplates_close:hover,
.swp_eexport_close:hover,
.swp_estats_close:hover,
.swp_eshortcuts_close:hover {
    color: #333;
}

/* Templates grid */
.swp_etemplates_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.swp_etemplate_item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_etemplate_item:hover {
    border-color: #2a9d90;
    background: #f8fffe;
    box-shadow: 0 2px 8px rgba(42, 157, 144, 0.1);
}

.swp_etemplate_icon {
    font-size: 48px;
    margin-bottom: 8px;
    color: #2a9d90;
}

.swp_etemplate_icon i {
    font-size: 48px;
}

.swp_etemplate_desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Export grid */
.swp_eexport_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.swp_eexport_item {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.swp_eexport_item:hover {
    border-color: #2a9d90;
    background: #f8fffe;
    box-shadow: 0 2px 8px rgba(42, 157, 144, 0.15);
    transform: translateY(-2px);
}

.swp_eexport_icon {
    font-size: 64px;
    margin-bottom: 12px;
    color: #2a9d90;
}

.swp_eexport_icon i {
    font-size: 64px;
}

.swp_eexport_name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 6px;
    color: #333;
}

.swp_eexport_desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Stats grid */
.swp_estats_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.swp_estats_item {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    text-align: center;
}

.swp_estats_value {
    font-size: 32px;
    font-weight: 700;
    color: #2a9d90;
    line-height: 1;
    margin-bottom: 8px;
}

.swp_estats_label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.swp_estats_reading {
    background: #e8f5f3;
    padding: 16px;
    border-radius: 6px;
    border-left: 4px solid #2a9d90;
}

.swp_estats_reading_title {
    font-weight: 600;
    color: #2a9d90;
    margin-bottom: 8px;
    font-size: 14px;
}

.swp_estats_reading_value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.swp_estats_note {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 16px;
    font-style: italic;
}

/* Shortcuts grid */
.swp_eshortcuts_section {
    margin-bottom: 24px;
}

.swp_eshortcuts_section:last-child {
    margin-bottom: 0;
}

.swp_eshortcuts_section_title {
    font-weight: 600;
    font-size: 14px;
    color: #2a9d90;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swp_eshortcuts_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.swp_eshortcuts_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

.swp_eshortcuts_action {
    font-size: 13px;
    color: #333;
}

.swp_eshortcuts_keys {
    display: flex;
    gap: 4px;
}

.swp_eshortcuts_key {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
    color: #555;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Placeholder */
.swp_eplaceholder {
    position: absolute;
    top: 0;
    left: 0;
    color: #999;
    font-style: italic;
    pointer-events: none;
    z-index: 1;
    padding: 8px 9px;
    margin: 0;
}

/* Page break */
.swp_epagebreak {
    position: relative;
    margin: 30px 0;
    text-align: center;
    border-top: 2px dashed #999;
    padding-top: 10px;
    font-size: 11px;
    color: #999;
    page-break-after: always;
    user-select: none;
    cursor: pointer;
}

.swp_epagebreak::before {
    content: "Page Break";
    background: white;
    padding: 0 10px;
    position: relative;
    top: -18px;
}

.swp_epagebreak:hover {
    background: #f9f9f9;
    border-color: #666;
    color: #666;
}

.swp_epagebreak:hover::before {
    background: #f9f9f9;
}

.swp_epagebreak_delete {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
}

.swp_epagebreak:hover .swp_epagebreak_delete {
    display: inline-block;
}

@media print {
    .swp_epagebreak::before {
        display: none;
    }

    .swp_epagebreak {
        border: none;
        margin: 0;
        padding: 0;
        height: 0;
    }

    .swp_epagebreak_delete {
        display: none !important;
    }
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.swp_toast_container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10003;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.swp_toast {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: swp_toast_slide_in 0.3s ease;
    position: relative;
    overflow: hidden;
}

.swp_toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.swp_toast.success::before {
    background: #2a9d90;
}

.swp_toast.error::before {
    background: #dc3545;
}

.swp_toast.warning::before {
    background: #f0ad4e;
}

.swp_toast.info::before {
    background: #5bc0de;
}

.swp_toast_icon {
    font-size: 24px;
    flex-shrink: 0;
}

.swp_toast.success .swp_toast_icon {
    color: #2a9d90;
}

.swp_toast.error .swp_toast_icon {
    color: #dc3545;
}

.swp_toast.warning .swp_toast_icon {
    color: #f0ad4e;
}

.swp_toast.info .swp_toast_icon {
    color: #5bc0de;
}

.swp_toast_content {
    flex: 1;
}

.swp_toast_message {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.swp_toast_close {
    cursor: pointer;
    color: #999;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.swp_toast_close:hover {
    background: #f0f0f0;
    color: #333;
}

@keyframes swp_toast_slide_in {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes swp_toast_slide_out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.swp_toast.removing {
    animation: swp_toast_slide_out 0.3s ease;
}

/* ============================================
   FULLSCREEN MODE
   ============================================ */
.swp_editor.swp_fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10001 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
}

.swp_editor.swp_fullscreen .swp_seinput {
    flex: 1 !important;
    height: auto !important;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 40px !important;
}

.swp_editor.swp_fullscreen .swp_secontrols {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f5f5f5;
}

#swp_fullscreen_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #525659;
    z-index: 999999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#swp_fullscreen_wrapper.active {
    display: flex;
}

#swp_fullscreen_wrapper .swp_editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0px;
    border-radius: 0px;
}

#swp_fullscreen_wrapper .swp_secontrols {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f5f5f5;
}

#swp_fullscreen_wrapper .swp_seinput_wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#swp_fullscreen_wrapper .swp_seinput {
    height: auto !important;
    max-height: none !important;
    min-height: 100% !important;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 40px !important;
}

#swp_fullscreen_wrapper .swp_estatus {
    flex-shrink: 0;
    margin: 0 auto;
    width: 100%;
    padding: 8px 20px !important;
    position: sticky;
    bottom: 0;
    border-radius: 0;
    background: #f5f5f5;
}

body.swp_fullscreen_active {
    overflow: hidden !important;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
}

html.swp_fullscreen_active,
body.swp_fullscreen_active {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html.swp_fullscreen_active::-webkit-scrollbar,
body.swp_fullscreen_active::-webkit-scrollbar {
    display: none;
}

/* ============================================
   DOCUMENT MODE
   ============================================ */
.swp_editor[data-document-mode="true"] {
    background: #525659 !important;
}

.swp_editor[data-document-mode="true"] .swp_seinput_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
}

.swp_editor[data-document-mode="true"] .swp_seinput {
    background: white !important;
}

/* Page Sizes */
.swp_editor[data-document-size="a4"] .swp_seinput {
    width: 793px !important;
    max-width: 793px !important;
}

.swp_editor[data-document-size="letter"] .swp_seinput {
    width: 816px !important;
    max-width: 816px !important;
}

.swp_editor[data-document-size="legal"] .swp_seinput {
    width: 816px !important;
    max-width: 816px !important;
}

.swp_editor[data-document-size="a5"] .swp_seinput {
    width: 559px !important;
    max-width: 559px !important;
}

/* Margin Presets */
.swp_editor[data-document-margin="normal"] .swp_seinput {
    padding: 96px !important;
}

.swp_editor[data-document-margin="narrow"] .swp_seinput {
    padding: 48px !important;
}

.swp_editor[data-document-margin="moderate"] .swp_seinput {
    padding: 72px !important;
}

.swp_editor[data-document-margin="wide"] .swp_seinput {
    padding: 144px !important;
}

#swp_fullscreen_wrapper .swp_editor[data-document-mode="true"] .swp_seinput_wrapper {
    padding: 40px 20px;
}

/* Multi-page styling */
.swp_page {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid #d0d0d0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.swp_page_content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
}

.swp_page::after {
    content: attr(data-page);
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 10px;
    color: #999;
    pointer-events: none;
}

.swp_editor[data-document-mode="true"] .swp_estatus {
    background: #f5f5f5;
    border-top: 1px solid #ddd;
}

.swp_seinput_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================
   DOCUMENT SETTINGS MODAL
   ============================================ */
.swp_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.swp_modal_content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.swp_modal_header {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swp_modal_header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.swp_modal_close {
    font-size: 28px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.swp_modal_close:hover {
    color: #333;
}

.swp_modal_body {
    padding: 24px;
}

.swp_modal_footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.swp_btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_btn_secondary {
    background: #e0e0e0;
    color: #333;
}

.swp_btn_secondary:hover {
    background: #d0d0d0;
}

.swp_btn_primary {
    background: #2a9d90;
    color: white;
}

.swp_btn_primary:hover {
    background: #238b7e;
}

.swp_info_box {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #1976d2;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

.swp_info_box i {
    font-size: 20px;
    flex-shrink: 0;
}

.swp_field_group {
    margin-bottom: 24px;
}

.swp_field_group:last-child {
    margin-bottom: 0;
}

.swp_field_group>label:first-child {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swp_switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s;
}

.swp_switch:hover {
    background: #ebebeb;
    border-color: #d0d0d0;
}

.swp_switch input {
    display: none;
}

.swp_switch_slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.3s;
    flex-shrink: 0;
}

.swp_switch input:checked~.swp_switch_slider {
    background: #2a9d90;
}

.swp_switch_slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.swp_switch input:checked~.swp_switch_slider::before {
    transform: translateX(20px);
}

.swp_switch_label {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.swp_field_group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
    font-family: inherit;
}

.swp_field_group select:hover {
    border-color: #2a9d90;
}

.swp_field_group select:focus {
    outline: none;
    border-color: #2a9d90;
    box-shadow: 0 0 0 3px rgba(42, 157, 144, 0.1);
}

/* AI Assistant Dropdown */
.swp_editor.swp_darkmode [id^="swp_eaiassist_drop"] {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_editor.swp_darkmode [id^="swp_eaiassist_drop"] .swp_editem {
    color: #e0e0e0;
}

.swp_editor.swp_darkmode [id^="swp_eaiassist_drop"] .swp_editem:hover {
    background-color: #3d3d3d;
}

/* ============================================
   EXTRACTED FROM EDITOR.JS
   ============================================ */

/* --- swp_ai_dropdown_styles --- */

.swp_eai_dropdown {
    min-width: 180px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.swp_eai_dropitem {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

.swp_eai_dropitem:hover {
    background-color: #f0f0f0;
}

.swp_eai_dropitem i {
    width: 16px;
    text-align: center;
    color: #666;
}

.swp_eai_dropdivider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Dark mode */
.swp_darkmode_active .swp_eai_dropdown {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.swp_darkmode_active .swp_eai_dropitem {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eai_dropitem:hover {
    background-color: #3d3d3d;
}

.swp_darkmode_active .swp_eai_dropitem i {
    color: #a0a0a0;
}

.swp_darkmode_active .swp_eai_dropdivider {
    background: #404040;
}


/* --- swp_ai_styles --- */

.swp_ai_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ai_dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.swp_ai_dialog_wide {
    max-width: 700px;
}

.swp_ai_dialog_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_ai_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_ai_close:hover {
    color: #333;
}

.swp_ai_dialog_body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.swp_ai_dialog_body label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.swp_ai_dialog_body select,
.swp_ai_dialog_body textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.swp_ai_dialog_body textarea {
    resize: vertical;
}

.swp_ai_dialog_footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.swp_ai_btn_primary,
.swp_ai_btn_secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swp_ai_btn_primary {
    background: #2a9d90;
    color: white;
}

.swp_ai_btn_primary:hover {
    background: #1976D2;
}

.swp_ai_btn_secondary {
    background: #e0e0e0;
    color: #333;
}

.swp_ai_btn_secondary:hover {
    background: #d0d0d0;
}

.swp_ai_comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .swp_ai_comparison {
        grid-template-columns: 1fr;
    }
}

.swp_ai_original,
.swp_ai_result {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.swp_ai_label {
    background: #f5f5f5;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

.swp_ai_result .swp_ai_label {
    background: #e3f2fd;
    color: #1976D2;
}

.swp_ai_text {
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
}

.swp_ai_setup_info {
    background: #e3f2fd;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.swp_ai_setup_info p {
    margin: 8px 0;
}

.swp_ai_setup_info ul {
    margin: 8px 0 0 20px;
}

.swp_ai_setup_info li {
    margin: 4px 0;
}

.swp_ai_prompt_box label {
    font-size: 13px;
    color: #666;
}

#swp_ai_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.swp_ai_spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #2a9d90;
    border-radius: 50%;
    animation: swp_ai_spin 1s linear infinite;
}

@keyframes swp_ai_spin {
    to {
        transform: rotate(360deg);
    }
}

.swp_ai_toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    z-index: 100002;
    transition: transform 0.3s ease;
    font-size: 14px;
}

.swp_ai_toast_show {
    transform: translateX(-50%) translateY(0);
}

.swp_ai_toast_success {
    background: #4CAF50;
}

.swp_ai_toast_warning {
    background: #FF9800;
}

.swp_ai_toast_error {
    background: #f44336;
}

/* Dark mode support */
.swp_darkmode_active .swp_ai_dialog {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ai_dialog_header,
.swp_darkmode_active .swp_ai_dialog_footer {
    border-color: #404040;
    background: #252525;
}

.swp_darkmode_active .swp_ai_dialog_body select,
.swp_darkmode_active .swp_ai_dialog_body textarea {
    background: #1e1e1e;
    border-color: #404040;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ai_original,
.swp_darkmode_active .swp_ai_result {
    border-color: #404040;
}

.swp_darkmode_active .swp_ai_label {
    background: #3d3d3d;
    border-color: #404040;
}

.swp_darkmode_active .swp_ai_result .swp_ai_label {
    background: #1a3a5c;
}

.swp_darkmode_active .swp_ai_setup_info {
    background: #1a3a5c;
}

.swp_darkmode_active #swp_ai_loading {
    background: #2d2d2d;
    color: #e0e0e0;
}


/* --- swp_bookmark_styles --- */
.swp_bookmark {
    display: inline-block;
    color: #2a9d90;
    margin: 0 2px;
    cursor: default;
    vertical-align: middle;
}

.swp_bookmark i {
    font-size: 14px;
}

.swp_bookmark_link {
    color: #2a9d90;
    text-decoration: underline;
    cursor: pointer;
}

.swp_bookmark_highlight {
    animation: swp_bm_flash 0.5s ease 3;
}

@keyframes swp_bm_flash {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: #ffeb3b;
    }
}

.swp_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_modal_small {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.swp_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.swp_modal_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_modal_close:hover {
    color: #333;
}

.swp_modal_content {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.swp_bookmark_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swp_bookmark_list_item {
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.swp_bookmark_list_item:hover {
    background: #e8e8e8;
}

.swp_bookmark_list_item i {
    color: #2a9d90;
}

.swp_bookmark_manage_item {
    justify-content: space-between;
    cursor: default;
}

.swp_bookmark_actions {
    display: flex;
    gap: 8px;
}

.swp_bookmark_actions button {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.swp_bookmark_actions button:hover {
    background: #f0f0f0;
}

.swp_darkmode_active .swp_modal_small {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_modal_header {
    border-color: #404040;
}

.swp_darkmode_active .swp_modal_close {
    color: #aaa;
}

.swp_darkmode_active .swp_modal_close:hover {
    color: #fff;
}

.swp_darkmode_active .swp_bookmark_list_item {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_bookmark_list_item:hover {
    background: #4d4d4d;
}

.swp_darkmode_active .swp_bookmark_actions button {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

/* --- swp_crossref_styles --- */
.swp_crossref {
    color: #2a9d90;
    text-decoration: none;
    cursor: pointer;
}

.swp_crossref:hover {
    text-decoration: underline;
}

.swp_crossref_broken {
    color: #f44336;
    text-decoration: line-through;
}

.swp_crossref_options {
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 6px;
}

.swp_crossref_options label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.swp_crossref_section {
    margin-bottom: 16px;
}

.swp_crossref_section:last-child {
    margin-bottom: 0;
}

.swp_crossref_section_title {
    font-weight: 600;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swp_crossref_section_title i {
    font-size: 14px;
}

.swp_crossref_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.swp_crossref_item {
    padding: 10px 16px;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.swp_crossref_item:hover {
    background: #e0e0e0;
}

.swp_crossref_empty {
    text-align: center;
    padding: 24px;
    color: #666;
}

.swp_crossref_empty i {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 12px;
    display: block;
}

.swp_crossref_empty p {
    margin: 8px 0;
}

.swp_crossref_empty ul {
    text-align: left;
    margin: 12px auto;
    max-width: 250px;
}

.swp_crossref_empty li {
    margin: 4px 0;
}

.swp_crossref_manage_toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_crossref_manage_toolbar span {
    font-size: 13px;
    color: #666;
}

.swp_crossref_manage_toolbar button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.swp_crossref_manage_toolbar button:hover {
    background: #f5f5f5;
}

.swp_crossref_manage_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.swp_crossref_manage_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: 6px;
}

.swp_crossref_manage_item.swp_crossref_manage_broken {
    background: #ffebee;
    border-left: 3px solid #f44336;
}

.swp_crossref_manage_info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.swp_crossref_manage_info i {
    color: #666;
    font-size: 16px;
    flex-shrink: 0;
}

.swp_crossref_manage_text {
    font-size: 13px;
    color: #2a9d90;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swp_crossref_manage_status {
    font-size: 11px;
    color: #f44336;
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    flex-shrink: 0;
}

.swp_crossref_manage_actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.swp_crossref_manage_actions button {
    padding: 6px 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_crossref_manage_actions button:hover {
    background: #e8e8e8;
}

.swp_darkmode_active .swp_crossref_options {
    background: #353535;
}

.swp_darkmode_active .swp_crossref_section_title {
    color: #aaa;
}

.swp_darkmode_active .swp_crossref_item {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_crossref_item:hover {
    background: #4d4d4d;
}

.swp_darkmode_active .swp_crossref_empty {
    color: #999;
}

.swp_darkmode_active .swp_crossref_empty i {
    color: #555;
}

.swp_darkmode_active .swp_crossref_manage_toolbar {
    border-color: #404040;
}

.swp_darkmode_active .swp_crossref_manage_toolbar span {
    color: #aaa;
}

.swp_darkmode_active .swp_crossref_manage_toolbar button {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_crossref_manage_item {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_crossref_manage_item.swp_crossref_manage_broken {
    background: #4a2c2c;
}

.swp_darkmode_active .swp_crossref_manage_info i {
    color: #aaa;
}

.swp_darkmode_active .swp_crossref_manage_actions button {
    background: #2d2d2d;
    border-color: #555;
    color: #e0e0e0;
}

/* --- swp_darkmode_styles --- */

/* Dark Mode Variables */
.swp_editor.swp_darkmode {
    --swp-bg-primary: #1e1e1e;
    --swp-bg-secondary: #2d2d2d;
    --swp-bg-tertiary: #3d3d3d;
    --swp-text-primary: #e0e0e0;
    --swp-text-secondary: #a0a0a0;
    --swp-text-muted: #707070;
    --swp-border-color: #404040;
    --swp-border-light: #505050;
    --swp-highlight: #4a4a4a;
    --swp-input-bg: #2d2d2d;
    --swp-shadow: rgba(0, 0, 0, 0.4);
}

/* Editor Container */
.swp_editor.swp_darkmode {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

/* Toolbar */
.swp_editor.swp_darkmode .swp_etoolbar {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_etabs {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_etab {
    color: var(--swp-text-secondary) !important;
    border-color: transparent !important;
}

.swp_editor.swp_darkmode .swp_etab:hover {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_etab.active {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
    border-color: var(--swp-border-light) !important;
}

/* Toolbar Buttons */
.swp_editor.swp_darkmode .swp_ecbutton {
    color: var(--swp-text-secondary) !important;
}

.swp_editor.swp_darkmode .swp_ecbutton:hover {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_ecbutton_active,
.swp_editor.swp_darkmode .swp_ecbutton.swp_ecbutton_active {
    background-color: var(--swp-highlight) !important;
    color: var(--swp-text-primary) !important;
}

/* Dropdowns */
.swp_editor.swp_darkmode .swp_edrop {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
    box-shadow: 0 4px 12px var(--swp-shadow) !important;
}

.swp_editor.swp_darkmode .swp_editem {
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_editem:hover {
    background-color: var(--swp-bg-tertiary) !important;
}

.swp_editor.swp_darkmode .swp_edivider {
    background-color: var(--swp-border-color) !important;
}

/* Editor Content Area */
.swp_editor.swp_darkmode .swp_seinput {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
    border-color: var(--swp-border-color) !important;
}

/* Multipage View */
.swp_editor.swp_darkmode .swp_seinput_wrapper {
    background-color: #151515 !important;
}

.swp_editor.swp_darkmode .swp_page {
    background-color: var(--swp-bg-primary) !important;
    box-shadow: 0 2px 8px var(--swp-shadow) !important;
}

.swp_editor.swp_darkmode .swp_page_content {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_page_header,
.swp_editor.swp_darkmode .swp_page_footer {
    color: var(--swp-text-muted) !important;
    border-color: var(--swp-border-color) !important;
}

/* Tables */
.swp_editor.swp_darkmode table,
.swp_editor.swp_darkmode .swp_seinput table {
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode td,
.swp_editor.swp_darkmode th,
.swp_editor.swp_darkmode .swp_seinput td,
.swp_editor.swp_darkmode .swp_seinput th {
    border-color: var(--swp-border-color) !important;
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode th {
    background-color: var(--swp-bg-secondary) !important;
}

/* Callouts */
.swp_editor.swp_darkmode .swp_callout {
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_callout_info {
    background-color: #1a3a5c !important;
}

.swp_editor.swp_darkmode .swp_callout_warning {
    background-color: #5c4a1a !important;
}

.swp_editor.swp_darkmode .swp_callout_error {
    background-color: #5c1a1a !important;
}

.swp_editor.swp_darkmode .swp_callout_success {
    background-color: #1a5c2e !important;
}

.swp_editor.swp_darkmode .swp_callout_note {
    background-color: #3d3d3d !important;
}

/* Blockquotes */
.swp_editor.swp_darkmode blockquote,
.swp_editor.swp_darkmode .swp_blockquote {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-light) !important;
    color: var(--swp-text-secondary) !important;
}

/* Code blocks */
.swp_editor.swp_darkmode pre,
.swp_editor.swp_darkmode code,
.swp_editor.swp_darkmode .swp_codeblock {
    background-color: #0d0d0d !important;
    color: #c5c5c5 !important;
    border-color: var(--swp-border-color) !important;
}

/* Comments panel */
.swp_editor.swp_darkmode .swp_comments_panel {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_comment_item {
    background-color: var(--swp-bg-tertiary) !important;
    border-color: var(--swp-border-color) !important;
    color: var(--swp-text-primary) !important;
}

/* Links */
.swp_editor.swp_darkmode a {
    color: #6cb2ff !important;
}

/* Selection */
.swp_editor.swp_darkmode ::selection {
    background-color: #264f78 !important;
    color: #ffffff !important;
}

/* Placeholder */
.swp_editor.swp_darkmode .swp_seinput:empty:before,
.swp_editor.swp_darkmode .swp_page_content:empty:before {
    color: var(--swp-text-muted) !important;
}

/* Status bar */
.swp_editor.swp_darkmode .swp_status_bar {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
    color: var(--swp-text-secondary) !important;
}

/* Modals and overlays in dark mode */
.swp_darkmode_active .swp_modal,
.swp_darkmode_active .swp_eshortcuts_panel {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_modal input,
.swp_darkmode_active .swp_modal select,
.swp_darkmode_active .swp_modal textarea {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_eshortcuts_header {
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_eshortcuts_key {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

/* Smooth transition */
.swp_editor,
.swp_editor .swp_etoolbar,
.swp_editor .swp_seinput,
.swp_editor .swp_page,
.swp_editor .swp_ecbutton {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Auto-save indicator */
.swp_eautosave_indicator {
    color: #4CAF50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swp_eautosave_indicator.swp_eautosave_show {
    opacity: 1;
}

.swp_eautosave_indicator i {
    margin-right: 4px;
}

.swp_editor.swp_darkmode .swp_eautosave_indicator {
    color: #81C784;
}

/* Reading time */
.swp_ereadtime {
    color: #666;
    font-style: italic;
}

.swp_editor.swp_darkmode .swp_ereadtime {
    color: #999;
}


/* --- swp_eblockquote_styles --- */
.swp_eblockquote_wrapper {
    position: relative;
    margin: 20px 0;
}

.swp_eblockquote {
    margin: 0;
    padding: 20px 24px;
    border-left: 4px solid #2563eb;
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
}

.swp_eblockquote_icon {
    font-size: 48px;
    font-family: Georgia, serif;
    color: #2563eb;
    opacity: 0.3;
    line-height: 1;
    margin-bottom: -10px;
}

.swp_eblockquote_content {
    font-size: 17px;
    line-height: 1.7;
    color: #334155;
    outline: none;
    min-height: 24px;
    font-style: italic;
}

.swp_eblockquote_content:focus {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

.swp_eblockquote_cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #64748b;
    font-style: normal;
    outline: none;
    font-weight: 500;
}

.swp_eblockquote_cite:empty:before {
    content: attr(placeholder);
    color: #94a3b8;
    font-style: italic;
    font-weight: normal;
}

.swp_eblockquote_cite:focus {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

.swp_eblockquote_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_eblockquote_wrapper:hover .swp_eblockquote_delete {
    opacity: 1;
}

/* --- swp_ecallout_styles --- */
.swp_ecallout {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 6px;
    border-left: 4px solid;
    position: relative;
}

.swp_ecallout_info {
    background: #eff6ff;
    border-color: #3b82f6;
}

.swp_ecallout_success {
    background: #f0fdf4;
    border-color: #22c55e;
}

.swp_ecallout_warning {
    background: #fffbeb;
    border-color: #f59e0b;
}

.swp_ecallout_error {
    background: #fef2f2;
    border-color: #ef4444;
}

.swp_ecallout_note {
    background: #faf5ff;
    border-color: #8b5cf6;
}

.swp_ecallout_icon {
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.swp_ecallout_content {
    flex: 1;
    outline: none;
    min-height: 20px;
}

.swp_ecallout_delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    color: #999;
}

.swp_ecallout:hover .swp_ecallout_delete {
    opacity: 1;
}

.swp_ecallout_delete:hover {
    color: #666;
}

/* --- swp_ecolumns_styles --- */
.swp_ecolumns {
    display: flex;
    gap: 20px;
    margin: 16px 0;
    position: relative;
}

.swp_ecolumn {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background: #fafafa;
}

.swp_ecolumn:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
}

.swp_ecolumn p {
    margin: 0 0 8px 0;
}

.swp_ecolumns_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ecolumns:hover .swp_ecolumns_delete {
    opacity: 1;
}

.swp_ecolumns_picker {
    padding: 4px 0;
}

.swp_ecolumns_option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 10px;
}

.swp_ecolumns_option:hover {
    background: #f5f5f5;
}

.swp_ecolumns_icon {
    font-family: monospace;
    letter-spacing: 2px;
    color: #666;
}

/* --- swp_ecomment_styles --- */
.swp_ecomment_highlight {
    background: #fef3c7;
    border-bottom: 2px solid #f59e0b;
    cursor: pointer;
    position: relative;
}

.swp_ecomment_highlight:hover {
    background: #fde68a;
}

.swp_ecomment_indicator {
    font-size: 10px;
    vertical-align: super;
    margin-left: 2px;
}

.swp_ecomment_flash {
    animation: swp_comment_flash 1.5s ease;
}

@keyframes swp_comment_flash {

    0%,
    100% {
        background: #fef3c7;
    }

    50% {
        background: #fbbf24;
    }
}

.swp_ecomment_popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 300px;
}

.swp_ecomment_popup_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}

.swp_ecomment_popup_header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.swp_ecomment_popup_date {
    padding: 5px 14px;
    font-size: 11px;
    color: #888;
}

.swp_ecomment_popup_body {
    padding: 10px 14px;
}

.swp_ecomment_popup_body textarea {
    width: 100%;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}

.swp_ecomment_popup_footer {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #eee;
}

.swp_ecomment_popup_footer button {
    flex: 1;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.swp_ecomment_popup_footer button:first-child {
    background: #2563eb;
    color: #fff;
}

.swp_ecomment_popup_footer button:last-child {
    background: #fee2e2;
    color: #dc2626;
}

.swp_ecomment_panel {
    position: fixed;
    right: 20px;
    top: 100px;
    width: 280px;
    max-height: calc(100vh - 140px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
}

.swp_ecomment_panel_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

.swp_ecomment_panel_header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.swp_ecomment_panel_body {
    padding: 10px;
}

.swp_ecomment_panel_item {
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
}

.swp_ecomment_panel_item:hover {
    background: #f9fafb;
}

.swp_ecomment_panel_text {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-bottom: 5px;
}

.swp_ecomment_panel_comment {
    font-size: 13px;
    margin-bottom: 5px;
}

.swp_ecomment_panel_date {
    font-size: 10px;
    color: #999;
}

.swp_ecomment_panel_empty {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* --- swp_edivider_styles --- */
.swp_edivider {
    margin: 16px 0;
    border: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.swp_edivider.swp_edivider_solid {
    border-top: 1px solid #ccc;
}

.swp_edivider.swp_edivider_dashed {
    border-top: 2px dashed #ccc;
}

.swp_edivider.swp_edivider_dotted {
    border-top: 2px dotted #999;
}

.swp_edivider.swp_edivider_double {
    border-top: 4px double #ccc;
}

.swp_edivider.swp_edivider_thick {
    border-top: 4px solid #999;
}

.swp_edivider.swp_edivider_fade {
    height: 1px;
    background: linear-gradient(to right, transparent, #999, transparent);
}

.swp_edivider_picker {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 10000;
    min-width: 200px;
}

.swp_edivider_option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    gap: 10px;
}

.swp_edivider_option:hover {
    background: #f5f5f5;
}

.swp_edivider_preview {
    font-family: monospace;
    color: #666;
    flex: 1;
}

.swp_edivider_label {
    font-size: 12px;
    color: #333;
}

.swp_edivider_color_section {
    padding: 10px 12px;
    border-top: 1px solid #eee;
    margin-top: 5px;
}

.swp_edivider_color_section label {
    font-size: 11px;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.swp_edivider_color_row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_edivider_color_input {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.swp_edivider_color_presets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.swp_edivider_color_preset {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.swp_edivider_color_preset:hover {
    transform: scale(1.1);
}

.swp_readonly .swp_seinput,
.swp_readonly .swp_page_content {
    background: #f9f9f9;
    cursor: default;
}

.swp_readonly .swp_secontrols .swp_ecbutton:not([id*="readonly"]):not([id*="continuous"]):not([id*="multipage"]) {
    opacity: 0.5;
    pointer-events: none;
}

.swp_readonly .swp_secontrols .swp_eselectframe {
    opacity: 0.5;
    pointer-events: none;
}

/* --- swp_edragdrop_styles --- */
.swp_edragdrop_mode .swp_edraggable {
    cursor: grab;
    position: relative;
}

.swp_edragdrop_mode .swp_edraggable:hover {
    outline: 2px dashed #2563eb;
    outline-offset: 2px;
}

.swp_edragdrop_mode .swp_edraggable_block::before {
    content: "⋮⋮";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    cursor: grab;
}

.swp_edragging {
    opacity: 0.5;
    cursor: grabbing !important;
}

.swp_edrop_placeholder {
    background: #e0e7ff;
    border: 2px dashed #2563eb;
    border-radius: 4px;
    margin: 10px 0;
}

.swp_edrop_before {
    box-shadow: 0 -3px 0 0 #2563eb;
}

.swp_edrop_after {
    box-shadow: 0 3px 0 0 #2563eb;
}

.swp_edrop_line {
    height: 3px;
    background: #2563eb;
    margin: 5px 0;
    border-radius: 2px;
    pointer-events: none;
}

.swp_edrag_textline {
    display: block;
    padding: 2px 4px;
    margin: 2px 0;
    border-radius: 3px;
}

.swp_edragdrop_mode .swp_edrag_textline:hover {
    background: #f0f4ff;
}

.swp_edragdrop_mode .swp_edrag_textline::before {
    content: "≡";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
    cursor: grab;
}

/* --- swp_edropcap_styles --- */
.swp_edropcap {
    display: block !important;
    min-height: 3.5em;
}

.swp_edropcap::first-letter {
    float: left !important;
    font-size: 3.5em !important;
    line-height: 0.8 !important;
    padding: 4px 8px 0 0 !important;
    font-weight: bold !important;
    color: #333 !important;
}

span.swp_edropcap {
    display: block !important;
}

.swp_page_content .swp_edropcap::first-letter {
    float: left !important;
    font-size: 3.5em !important;
    line-height: 0.8 !important;
    padding: 4px 8px 0 0 !important;
    font-weight: bold !important;
    color: #333 !important;
}

/* --- swp_efocus_styles --- */
.swp_focus_mode .swp_seinput>*,
.swp_focus_mode .swp_page_content>* {
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.swp_focus_mode .swp_seinput>.swp_focus_current,
.swp_focus_mode .swp_page_content>.swp_focus_current {
    opacity: 1 !important;
}

.swp_focus_mode .swp_seinput>*:hover,
.swp_focus_mode .swp_page_content>*:hover {
    opacity: 0.6;
}

.swp_focus_mode .swp_ecolumns {
    opacity: 1 !important;
}

.swp_focus_mode .swp_ecolumn {
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.swp_focus_mode .swp_ecolumn.swp_focus_current {
    opacity: 1 !important;
}

.swp_focus_mode .swp_ecolumn:hover:not(.swp_focus_current) {
    opacity: 0.6;
}

.swp_focus_mode .swp_ecallout.swp_focus_current,
.swp_focus_mode .swp_eblockquote_wrapper.swp_focus_current {
    opacity: 1 !important;
}

.swp_focus_mode .swp_ecallout_content.swp_focus_current,
.swp_focus_mode .swp_eblockquote_content.swp_focus_current {
    opacity: 1 !important;
}

/* --- swp_efootnote_styles --- */
.swp_efootnote_ref {
    cursor: pointer;
    color: #2563eb;
    display: inline;
    white-space: nowrap;
    user-select: all;
    -webkit-user-select: all;
}

.swp_efootnote_ref a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

.swp_efootnote_ref:hover {
    background: #e0e7ff;
    border-radius: 2px;
}

.swp_efootnotes_section {
    padding: 10px 20px;
    font-size: 0.8em;
    border-top: 1px solid #ddd;
    background: #fafafa;
    margin-top: auto;
    flex-shrink: 0;
}

.swp_efootnotes_title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.95em;
    color: #444;
}

.swp_efootnote_item {
    margin-bottom: 4px;
    line-height: 1.4;
}

.swp_efootnote_num {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.swp_efootnote_num:hover {
    text-decoration: underline;
}

.swp_efootnote_content {
    outline: none;
}

/* --- swp_egallery_styles --- */
.swp_egallery_wrapper {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 15px 0;
    overflow: visible;
}

.swp_egallery_toolbar {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    flex-wrap: wrap;
}

.swp_egallery_toolbar button {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.swp_egallery_toolbar button:hover {
    background: #f3f4f6;
}

.swp_egallery_toolbar select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
}

.swp_egallery_delete_btn {
    margin-left: auto !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.swp_egallery_delete_btn:hover {
    background: #fee2e2 !important;
}

.swp_egallery_grid {
    display: grid;
    gap: 8px;
    padding: 10px;
    min-height: 100px;
    overflow: visible;
}

.swp_egallery_item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    background: #f3f4f6;
    min-width: 0;
}

.swp_egallery_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swp_egallery_item_overlay {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.swp_egallery_item:hover .swp_egallery_item_overlay {
    opacity: 1;
}

.swp_egallery_item_overlay button {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.swp_egallery_empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 40px;
    color: #888;
    font-style: italic;
}

.swp_egallery_library_modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_egallery_library_content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.swp_egallery_library_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 16px;
}

.swp_egallery_library_header button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.swp_egallery_library_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.swp_egallery_library_item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
}

.swp_egallery_library_item:hover {
    border-color: #93c5fd;
}

.swp_egallery_library_item.swp_egallery_library_selected {
    border-color: #2563eb;
}

.swp_egallery_library_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swp_egallery_library_check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background: #2563eb;
    color: #fff;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.swp_egallery_library_selected .swp_egallery_library_check {
    display: flex;
}

.swp_egallery_library_footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

.swp_egallery_library_footer button {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.swp_egallery_library_footer button:first-child {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
}

.swp_egallery_library_footer button:last-child {
    background: #2563eb;
    color: #fff;
    border: none;
}

@media print {
    .swp_egallery_toolbar {
        display: none;
    }

    .swp_egallery_item_overlay {
        display: none;
    }
}

/* --- swp_eheaderfooter_styles --- */
.swp_eheaderfooter_panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 350px;
}

.swp_eheaderfooter_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}

.swp_eheaderfooter_close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.swp_eheaderfooter_close:hover {
    color: #000;
}

.swp_eheaderfooter_body {
    padding: 16px;
}

.swp_eheaderfooter_input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    min-height: 60px;
    outline: none;
}

.swp_eheaderfooter_input:focus {
    border-color: #2563eb;
}

.swp_eheaderfooter_hint {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
}

.swp_eheaderfooter_footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.swp_eheaderfooter_footer button {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.swp_eheaderfooter_footer button:first-child {
    background: #2563eb;
    color: #fff;
}

.swp_eheaderfooter_footer button:first-child:hover {
    background: #1d4ed8;
}

.swp_eheaderfooter_footer button:last-child {
    background: #f3f4f6;
    color: #666;
}

.swp_eheaderfooter_footer button:last-child:hover {
    background: #e5e7eb;
}

.swp_page {
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    position: relative;
}

.swp_page_content {
    flex: 1;
    display: block;
    position: relative;
    min-height: 100px;
}

.swp_seinput_wrapper:has(.swp_page) {
    background: #e0e0e0;
    padding: 20px 0;
    position: relative;
}

.swp_page_header {
    padding: 8px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 11px;
    color: #666;
    text-align: center;
    background: #fafafa;
    flex-shrink: 0;
}

.swp_page_footer {
    padding: 8px 20px;
    border-top: 1px solid #e5e7eb;
    font-size: 11px;
    color: #666;
    text-align: center;
    background: #fafafa;
    flex-shrink: 0;
    margin-top: auto;
}

@media print {

    .swp_page_header,
    .swp_page_footer {
        display: block !important;
    }
}

/* --- swp_eimage_caption_styles --- */
.swp_eimage_wrapper {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.swp_eimage_wrapper[data-align="left"] {
    margin-left: 0;
    margin-right: auto;
}

.swp_eimage_wrapper[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

.swp_eimage_wrapper[data-align="right"] {
    margin-left: auto;
    margin-right: 0;
}

.swp_eimage_caption {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #666;
    font-style: italic;
    padding: 8px 12px;
    margin: 4px auto 12px auto;
    outline: none;
    min-height: 1.5em;
    line-height: 1.5;
    border: 1px dashed #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
}

.swp_eimage_caption[data-align="left"] {
    margin-left: 0;
    margin-right: auto;
}

.swp_eimage_caption[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

.swp_eimage_caption[data-align="right"] {
    margin-left: auto;
    margin-right: 0;
}

.swp_eimage_caption:empty:before,
.swp_eimage_caption:has(br:only-child):before {
    content: attr(data-placeholder);
    color: #999;
}

.swp_eimage_caption:focus {
    background: #f9f9f9;
    border-color: #2563eb;
}

.swp_media_toolbar {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 6px;
    display: none;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 20;
    white-space: nowrap;
}

.swp_eimage_wrapper:hover .swp_media_toolbar,
.swp_eimage_wrapper.selected .swp_media_toolbar,
.swp_emedia_wrapper:hover .swp_media_toolbar {
    display: flex;
}

.swp_media_toolbar button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 16px;
}

.swp_media_toolbar button:hover {
    background: #f0f0f0;
    color: #333;
}

.swp_media_toolbar button.swp_media_toolbar_active {
    background: #e0f2f1;
    color: #2a9d90;
}

.swp_media_toolbar_danger {
    color: #ef4444 !important;
}

.swp_media_toolbar_danger:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.swp_media_toolbar_sep {
    width: 1px;
    background: #ddd;
    margin: 4px 4px;
}

/* --- swp_eimage_replace_styles --- */
.swp_eimage_replace_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_eimage_replace_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    z-index: 100001;
}

.swp_eimage_replace_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_eimage_replace_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_eimage_replace_close:hover {
    color: #333;
}

.swp_eimage_replace_content {
    padding: 20px;
}

.swp_eimage_replace_dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_eimage_replace_dropzone:hover,
.swp_eimage_replace_dropzone.dragover {
    border-color: #2a9d90;
    background: #f0fdf4;
}

.swp_eimage_replace_dropzone i {
    font-size: 48px;
    color: #2a9d90;
    margin-bottom: 10px;
    display: block;
}

.swp_eimage_replace_dropzone p {
    margin: 5px 0;
    color: #666;
}

/* --- swp_elimit_styles --- */
.swp_elimit_exceeded {
    color: #dc3545 !important;
    font-weight: bold;
}

.swp_editor.swp_elimit_exceeded .swp_seinput,
.swp_editor.swp_elimit_exceeded .swp_page_content {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* --- swp_emedia_styles --- */
.swp_emedia_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_emedia_modal {
    background: #fff;
    border-radius: 8px;
    width: 550px;
    max-width: 95%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.swp_emedia_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 16px;
}

.swp_emedia_modal_header i {
    margin-right: 8px;
}

.swp_emedia_close {
    cursor: pointer;
    padding: 4px;
    color: #666;
}

.swp_emedia_close:hover {
    color: #333;
}

.swp_emedia_tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}

.swp_emedia_tab {
    padding: 12px 20px;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
}

.swp_emedia_tab:hover {
    color: #333;
    background: #f9f9f9;
}

.swp_emedia_tab_active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.swp_emedia_content {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.swp_emedia_url_input {
    margin-bottom: 16px;
}

.swp_emedia_url_input label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #666;
}

.swp_emedia_url_input input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.swp_emedia_url_input input:focus {
    outline: none;
    border-color: #2563eb;
}

.swp_emedia_size_inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.swp_emedia_field {
    flex: 1;
    min-width: 100px;
}

.swp_emedia_field label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #666;
}

.swp_emedia_field input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.swp_emedia_preview {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.swp_emedia_preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 4px;
}

.swp_emedia_preview_placeholder {
    width: 80px;
    height: 80px;
    background: #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #999;
}

.swp_emedia_preview_placeholder.swp_emedia_audio {
    width: 200px;
    height: 60px;
}

.swp_emedia_preview_label {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

.swp_emedia_library_empty {
    text-align: center;
    color: #999;
    padding: 40px;
}

.swp_emedia_library_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.swp_emedia_library_item {
    background: #f9f9f9;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.swp_emedia_library_item:hover {
    border-color: #ccc;
}

.swp_emedia_library_item.selected {
    border-color: #2563eb;
}

.swp_emedia_library_thumb {
    height: 80px;
    background: #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #999;
    overflow: hidden;
}

.swp_emedia_library_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swp_emedia_library_title {
    padding: 8px;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swp_emedia_library_delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

.swp_emedia_library_item:hover .swp_emedia_library_delete {
    opacity: 1;
}

.swp_emedia_buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
}

.swp_emedia_btn_cancel {
    padding: 10px 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.swp_emedia_btn_cancel:hover {
    background: #f5f5f5;
}

.swp_emedia_btn_insert {
    padding: 10px 20px;
    border: none;
    background: #2563eb;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.swp_emedia_btn_insert:hover {
    background: #1d4ed8;
}

.swp_emedia_btn_insert:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.swp_emedia_wrapper {
    position: relative;
    display: inline-block;
    margin: 12px 0;
    max-width: 100%;
}

.swp_emedia_wrapper iframe,
.swp_emedia_wrapper audio,
.swp_emedia_wrapper video {
    display: block;
}

.swp_emedia_delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_emedia_wrapper:hover .swp_emedia_delete {
    opacity: 1;
}

/* --- swp_eoutline_styles --- */

.swp_eoutline_panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: white;
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.swp_eoutline_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_eoutline_close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
    line-height: 1;
}

.swp_eoutline_close:hover {
    color: #333;
}

.swp_eoutline_content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.swp_eoutline_item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent;
}

.swp_eoutline_item:hover {
    background-color: #f5f5f5;
    border-left-color: #2a9d90;
}

.swp_eoutline_tag {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    background: #e0e0e0;
    padding: 2px 4px;
    border-radius: 3px;
}

.swp_eoutline_h1 .swp_eoutline_tag {
    background: #2a9d90;
    color: white;
}

.swp_eoutline_h2 .swp_eoutline_tag {
    background: #4CAF50;
    color: white;
}

.swp_eoutline_h3 .swp_eoutline_tag {
    background: #FF9800;
    color: white;
}

.swp_eoutline_empty {
    padding: 24px 16px;
    text-align: center;
    color: #666;
}

.swp_eoutline_footer {
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
}

.swp_eoutline_footer button {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.swp_eoutline_footer button:hover {
    background: #e0e0e0;
}

.swp_eoutline_highlight {
    animation: swp_outline_flash 1.5s ease-out;
}

@keyframes swp_outline_flash {

    0%,
    50% {
        background-color: #ffeb3b;
    }

    100% {
        background-color: transparent;
    }
}

/* Dark mode */
.swp_editor.swp_darkmode .swp_eoutline_panel {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_editor.swp_darkmode .swp_eoutline_header,
.swp_editor.swp_darkmode .swp_eoutline_footer {
    border-color: #404040;
}

.swp_editor.swp_darkmode .swp_eoutline_item:hover {
    background-color: #3d3d3d;
}

.swp_editor.swp_darkmode .swp_eoutline_tag {
    background: #404040;
    color: #e0e0e0;
}

.swp_editor.swp_darkmode .swp_eoutline_footer button {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}


/* --- swp_estats_styles --- */
.swp_estats_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_estats_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.swp_estats_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_estats_title {
    font-weight: 600;
    font-size: 18px;
}

.swp_estats_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.swp_estats_close:hover {
    color: #333;
    background: #f0f0f0;
}

.swp_estats_body {
    padding: 20px;
}

.swp_estats_times {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.swp_estats_time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.swp_estats_time i {
    color: #2a9d90;
    font-size: 18px;
}

.swp_estats_time strong {
    color: #333;
}

.swp_estats_tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.swp_estats_tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.swp_estats_tab:hover {
    background: #f5f5f5;
}

.swp_estats_tab.active {
    color: #2a9d90;
    border-bottom-color: #2a9d90;
}

.swp_estats_content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.swp_estats_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.swp_estats_item {
    text-align: center;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}

.swp_estats_value {
    font-size: 28px;
    font-weight: 700;
    color: #2a9d90;
}

.swp_estats_label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.swp_estats_times {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.swp_estats_time_item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}

.swp_estats_time_item i {
    font-size: 32px;
    color: #2a9d90;
}

.swp_estats_tip {
    padding: 12px 16px;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 12px;
    color: #856404;
}

.swp_estats_tip i {
    margin-right: 8px;
    color: #856404;
}

.swp_estats_freq_summary {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 16px;
}

.swp_estats_freq_stat {
    text-align: center;
    font-size: 12px;
    color: #666;
}

.swp_estats_freq_stat strong {
    font-size: 24px;
    display: block;
    color: #2a9d90;
}

.swp_estats_freq_filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.swp_estats_freq_filter {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.swp_estats_freq_filter:hover {
    background: #f5f5f5;
}

.swp_estats_freq_filter.active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_estats_freq_table_wrap {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.swp_estats_freq_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.swp_estats_freq_table th {
    text-align: left;
    padding: 10px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.swp_estats_freq_table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.swp_estats_freq_table tr:hover td {
    background: #f9f9f9;
}

.swp_estats_freq_bar {
    display: inline-block;
    height: 8px;
    background: #2a9d90;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

.swp_darkmode_active .swp_estats_panel {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_estats_header,
.swp_darkmode_active .swp_estats_tabs {
    border-color: #404040;
}

.swp_darkmode_active .swp_estats_tab:hover {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_estats_item,
.swp_darkmode_active .swp_estats_time_item,
.swp_darkmode_active .swp_estats_freq_summary {
    background: #353535;
}

.swp_darkmode_active .swp_estats_tip {
    background: #3d3520;
    color: #ffc107;
}

.swp_darkmode_active .swp_estats_freq_filter {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_estats_freq_filter.active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_darkmode_active .swp_estats_freq_table_wrap {
    border-color: #404040;
}

.swp_darkmode_active .swp_estats_freq_table th {
    background: #353535;
    border-color: #404040;
}

.swp_darkmode_active .swp_estats_freq_table td {
    border-color: #404040;
}

.swp_darkmode_active .swp_estats_freq_table tr:hover td {
    background: #3d3d3d;
}

@media (max-width: 500px) {
    .swp_estats_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .swp_estats_times {
        flex-direction: column;
    }
}

/* --- swp_estyle_styles --- */
.swp_estyle_panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    width: 300px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.swp_estyle_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 15px;
}

.swp_estyle_header button {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.swp_estyle_body {
    flex: 1;
    overflow-y: auto;
}

.swp_estyle_list {
    padding: 10px;
}

.swp_estyle_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
}

.swp_estyle_item:hover {
    background: #f9fafb;
}

.swp_estyle_preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
}

.swp_estyle_actions {
    display: flex;
    gap: 4px;
}

.swp_estyle_actions button {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
}

.swp_estyle_actions button:hover {
    background: #f3f4f6;
}

.swp_estyle_actions .swp_estyle_delete {
    color: #dc2626;
    border-color: #fecaca;
}

.swp_estyle_actions .swp_estyle_delete:hover {
    background: #fee2e2;
}

.swp_estyle_add {
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swp_estyle_add button {
    padding: 8px 12px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}

.swp_estyle_add button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.swp_estyle_edit_modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_estyle_edit_content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
}

.swp_estyle_edit_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 16px;
}

.swp_estyle_edit_header button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.swp_estyle_edit_body {
    padding: 20px;
}

.swp_estyle_edit_field {
    margin-bottom: 16px;
}

.swp_estyle_edit_field label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.swp_estyle_edit_field input[type="text"],
.swp_estyle_edit_field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.swp_estyle_edit_field input[type="color"] {
    width: 60px;
    height: 36px;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
}

.swp_estyle_edit_field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.swp_estyle_edit_row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.swp_estyle_edit_row .swp_estyle_edit_field {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_estyle_edit_row .swp_estyle_edit_field label {
    margin-bottom: 0;
}

.swp_estyle_edit_preview {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.swp_estyle_edit_preview label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

#swp_estyle_edit_preview_box {
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    min-height: 40px;
}

.swp_estyle_edit_footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

.swp_estyle_edit_footer button {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.swp_estyle_edit_footer button:first-child {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
}

.swp_estyle_edit_footer button:last-child {
    background: #2563eb;
    color: #fff;
    border: none;
}

/* --- swp_etoc_styles --- */
.swp_etoc_wrapper {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal !important;
    color: #333 !important;
    text-decoration: none !important;
}

.swp_etoc_wrapper * {
    font-family: inherit;
    font-size: inherit;
}

.swp_etoc_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.swp_etoc_title {
    font-size: 1.3em !important;
    font-weight: 600 !important;
    color: #111 !important;
}

.swp_etoc_actions {
    display: flex;
    gap: 8px;
}

.swp_etoc_refresh,
.swp_etoc_delete {
    cursor: pointer;
    color: #666 !important;
    font-size: 18px !important;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    font-weight: normal !important;
}

.swp_etoc_refresh:hover {
    background: #e5e7eb;
    color: #111 !important;
}

.swp_etoc_delete {
    color: #999 !important;
    font-size: 22px !important;
}

.swp_etoc_delete:hover {
    background: #fee2e2;
    color: #dc2626 !important;
}

.swp_etoc_content {
    line-height: 1.8;
}

.swp_etoc_item {
    margin: 4px 0;
}

.swp_etoc_item a {
    color: #2563eb !important;
    text-decoration: none !important;
}

.swp_etoc_item a:hover {
    text-decoration: underline !important;
}

.swp_etoc_level1 {
    font-weight: 600 !important;
}

.swp_etoc_level2 {
    font-weight: 500 !important;
}

.swp_etoc_level3,
.swp_etoc_level4,
.swp_etoc_level5,
.swp_etoc_level6 {
    font-weight: 400 !important;
    color: #666 !important;
}

.swp_etoc_empty {
    color: #888 !important;
    font-style: italic !important;
}

@media print {
    .swp_etoc_wrapper {
        background: #f8f9fa !important;
        border: 1px solid #ccc !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin: 15px 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .swp_etoc_actions {
        display: none !important;
    }

    .swp_etoc_title {
        font-size: 1.2em !important;
        font-weight: 600 !important;
        color: #000 !important;
    }

    .swp_etoc_content {
        line-height: 1.6 !important;
    }

    .swp_etoc_item {
        margin: 3px 0 !important;
    }

    .swp_etoc_item a {
        color: #000 !important;
        text-decoration: none !important;
    }

    .swp_etoc_level1 {
        font-weight: 600 !important;
    }

    .swp_etoc_level2 {
        font-weight: 500 !important;
    }

    .swp_etoc_level3,
    .swp_etoc_level4,
    .swp_etoc_level5,
    .swp_etoc_level6 {
        font-weight: 400 !important;
        color: #333 !important;
    }
}

/* --- swp_etypewriter_styles --- */
.swp_typewriter_mode {
    scroll-behavior: smooth;
}

/* --- swp_ewordgoal_styles --- */
.swp_ewordgoal_dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 280px;
}

.swp_ewordgoal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}

.swp_ewordgoal_close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.swp_ewordgoal_close:hover {
    color: #000;
}

.swp_ewordgoal_body {
    padding: 16px;
}

.swp_ewordgoal_body label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.swp_ewordgoal_body input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.swp_ewordgoal_footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.swp_ewordgoal_footer button {
    flex: 1;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.swp_ewordgoal_footer button:first-child {
    background: #2563eb;
    color: #fff;
}

.swp_ewordgoal_footer button:first-child:hover {
    background: #1d4ed8;
}

.swp_ewordgoal_footer button:last-child {
    background: #f3f4f6;
    color: #666;
}

.swp_ewordgoal_footer button:last-child:hover {
    background: #e5e7eb;
}

.swp_ewordgoal_indicator {
    color: #2563eb;
    font-weight: 500;
}

.swp_ewordgoal_indicator.complete {
    color: #10b981;
}

/* --- swp_ezoom_styles --- */

/* Zoom slider control in status bar */
.swp_ezoom_control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.swp_ezoom_btn {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.15s;
}

.swp_ezoom_btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

.swp_ezoom_btn:active {
    background: #d0d0d0;
}

.swp_ezoom_slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.swp_ezoom_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
}

.swp_ezoom_slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.swp_ezoom_slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.swp_ezoom_level {
    min-width: 40px;
    text-align: right;
    font-size: 11px;
    color: #666;
}

/* Dropdown styles */
.swp_ezoom_dropdown {
    min-width: 140px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.swp_ezoom_item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_ezoom_item:hover {
    background-color: #f0f0f0;
}

.swp_ezoom_active {
    background-color: #e8f5f3;
    font-weight: 600;
    color: #2a9d90;
}

.swp_ezoom_divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Scroll container for zoomed content */
.swp_seinput_scroll {
    overflow: auto;
    flex: 1;
    position: relative;
}

/* Dark mode */
.swp_editor.swp_darkmode .swp_ezoom_btn {
    background: #3d3d3d;
    border-color: #555;
    color: #ccc;
}

.swp_editor.swp_darkmode .swp_ezoom_btn:hover {
    background: #4d4d4d;
    border-color: #666;
}

.swp_editor.swp_darkmode .swp_ezoom_slider {
    background: #444;
}

.swp_editor.swp_darkmode .swp_ezoom_level {
    color: #aaa;
}

.swp_darkmode_active .swp_ezoom_dropdown {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_darkmode_active .swp_ezoom_item {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ezoom_item:hover {
    background-color: #3d3d3d;
}

.swp_darkmode_active .swp_ezoom_active {
    background-color: #1a3d38;
    color: #5fd3c4;
}

.swp_darkmode_active .swp_ezoom_divider {
    background: #404040;
}


/* --- swp_fullscreen_styles --- */
#swp_fullscreen_wrapper {
    display: none;
}

#swp_fullscreen_wrapper.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #f5f5f5;
    overflow: auto;
}

#swp_fullscreen_wrapper.active .swp_editor {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#swp_fullscreen_wrapper.active .swp_seinput_wrapper {
    flex: 1;
    overflow: auto;
}

#swp_fullscreen_wrapper.active .swp_eimage_wrapper img {
    max-width: 100%;
    height: auto !important;
}

.swp_fullscreen_active .swp_eimage_panel,
.swp_fullscreen_active .swp_emedia_dialog,
.swp_fullscreen_active .swp_elink_panel,
.swp_fullscreen_active .swp_ewordgoal_dialog,
.swp_fullscreen_active .swp_efindreplace_panel,
.swp_fullscreen_active .swp_ecallout_picker,
.swp_fullscreen_active .swp_edivider_picker,
.swp_fullscreen_active .swp_ecolumns_picker {
    z-index: 10001 !important;
}

/* --- swp_import_styles --- */
.swp_eimport_note {
    padding: 12px 16px;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 12px;
    color: #856404;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_eimport_note i {
    font-size: 16px;
}

.swp_darkmode_active .swp_eimport_note {
    background: #3d3520;
    color: #ffc107;
}

/* --- swp_markdown_styles --- */
.swp_dropdown_menu {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.swp_dropdown_item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.swp_dropdown_item:hover {
    background: #f5f5f5;
}

.swp_dropdown_item i {
    font-size: 16px;
    color: #666;
    width: 18px;
}

.swp_dropdown_divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

.swp_darkmode_active .swp_dropdown_menu {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_darkmode_active .swp_dropdown_item {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_dropdown_item:hover {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_dropdown_item i {
    color: #aaa;
}

.swp_darkmode_active .swp_dropdown_divider {
    background: #404040;
}

/* --- swp_print_styles --- */
@media print {

    .swp_eblockquote_delete,
    .swp_ecolumns_delete,
    .swp_ecallout_delete,
    .swp_emedia_delete,
    .swp_eimage_delete_btn,
    .swp_etable_delete,
    .swp_eimage_resize_handle,
    .swp_eimage_toolbar,
    .swp_eimage_handle,
    .swp_eimage_replace_btn,
    .swp_eimage_caption_btn,
    .swp_eimage_size_tooltip {
        display: none !important;
    }

    .swp_ecolumn {
        border: none !important;
        background: transparent !important;
    }

    .swp_eimage_caption {
        border: none !important;
    }

    .swp_ecallout {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .swp_eblockquote {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .swp_page_header,
    .swp_page_footer {
        display: block !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .swp_page_header {
        border-bottom: 1px solid #ccc !important;
    }

    .swp_page_footer {
        border-top: 1px solid #ccc !important;
    }

    .swp_efootnotes_section {
        display: block !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- swp_trackchanges_styles --- */
.swp_track_insertion {
    background: #c8e6c9;
    color: #2e7d32;
    text-decoration: underline;
}

.swp_track_deletion {
    background: #ffcdd2;
    color: #c62828;
    text-decoration: line-through;
}

.swp_trackchanges_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_trackchanges_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.swp_trackchanges_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_trackchanges_header i {
    margin-right: 8px;
}

.swp_trackchanges_close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
}

.swp_trackchanges_toolbar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_trackchanges_toolbar button {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.swp_trackchanges_toolbar button:hover {
    background: #f5f5f5;
}

.swp_trackchanges_author {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
}

.swp_trackchanges_author input {
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.swp_trackchanges_list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.swp_trackchanges_empty {
    text-align: center;
    color: #999;
    padding: 20px;
}

.swp_trackchanges_item {
    background: #f9f9f9;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    font-size: 12px;
}

.swp_trackchanges_item.swp_change_ins {
    border-left: 3px solid #4caf50;
}

.swp_trackchanges_item.swp_change_del {
    border-left: 3px solid #f44336;
}

.swp_trackchanges_item_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.swp_change_type {
    font-weight: 600;
}

.swp_change_ins .swp_change_type {
    color: #4caf50;
}

.swp_change_del .swp_change_type {
    color: #f44336;
}

.swp_change_author {
    color: #666;
}

.swp_trackchanges_item_text {
    color: #333;
    margin-bottom: 8px;
    word-break: break-word;
}

.swp_trackchanges_item_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swp_change_time {
    color: #999;
    font-size: 10px;
}

.swp_trackchanges_actions {
    display: flex;
    gap: 4px;
}

.swp_trackchanges_actions button {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_trackchanges_actions button:hover {
    background: #f0f0f0;
}

.swp_darkmode_active .swp_trackchanges_panel {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_darkmode_active .swp_trackchanges_header,
.swp_darkmode_active .swp_trackchanges_toolbar,
.swp_darkmode_active .swp_trackchanges_author {
    border-color: #404040;
}

.swp_darkmode_active .swp_trackchanges_toolbar button,
.swp_darkmode_active .swp_trackchanges_author input {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_trackchanges_item {
    background: #353535;
}

.swp_darkmode_active .swp_trackchanges_item_text {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_trackchanges_actions button {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_track_insertion {
    background: #1b5e20;
    color: #a5d6a7;
}

.swp_darkmode_active .swp_track_deletion {
    background: #b71c1c;
    color: #ffcdd2;
}

/* --- swp_ui_base_styles --- */

/* Auto-save indicator */
.swp_eautosave_indicator {
    color: #4CAF50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swp_eautosave_indicator.swp_eautosave_show {
    opacity: 1;
}

.swp_eautosave_indicator i {
    margin-right: 4px;
}

.swp_eautosave_sep {
    margin: 0 4px;
    color: #ccc;
}

/* Reading time */
.swp_ereadtime {
    color: #666;
    font-style: italic;
}

/* Scroll container for zoom support */
.swp_seinput_scroll {
    flex: 1;
    overflow: auto;
    position: relative;
}

.swp_seinput_wrapper {
    position: relative;
    transform-origin: top left;
    transition: transform 0.15s ease-out;
}

/* When zoomed, wrapper needs explicit dimensions for scrolling */
.swp_editor[data-document-mode="true"] .swp_seinput_scroll {
    background: #e8e8e8;
}

.swp_editor.swp_darkmode .swp_seinput_scroll {
    background: #1a1a1a;
}

/* Spinning animation for saving state */
@keyframes la-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.la-spin {
    animation: la-spin 1s linear infinite;
}


/* --- swp_wordfreq_styles --- */

.swp_wordfreq_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_wordfreq_modal {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.swp_wordfreq_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_wordfreq_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
}

.swp_wordfreq_close:hover {
    color: #333;
}

.swp_wordfreq_stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.swp_wordfreq_stat {
    text-align: center;
    font-size: 12px;
    color: #666;
}

.swp_wordfreq_stat strong {
    font-size: 24px;
    color: #333;
    display: block;
}

.swp_wordfreq_tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_wordfreq_tab {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.swp_wordfreq_tab:hover {
    background: #f5f5f5;
}

.swp_wordfreq_tab.active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_wordfreq_content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.swp_wordfreq_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.swp_wordfreq_table th {
    text-align: left;
    padding: 10px 16px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.swp_wordfreq_table td {
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.swp_wordfreq_table tr:hover td {
    background: #f9f9f9;
}

.swp_wordfreq_bar {
    display: inline-block;
    height: 8px;
    background: #2a9d90;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Dark mode */
.swp_darkmode_active .swp_wordfreq_modal {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_header,
.swp_darkmode_active .swp_wordfreq_stats,
.swp_darkmode_active .swp_wordfreq_tabs {
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_stats {
    background: #252525;
}

.swp_darkmode_active .swp_wordfreq_stat strong {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_tab {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_table th {
    background: #353535;
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_table td {
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_table tr:hover td {
    background: #353535;
}



/* --- swp_edoc_controls_styles --- */
.swp_edoc_controls_wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.swp_ebutton_group {
    display: inline-flex;
    flex-shrink: 0;
}

.swp_ebutton_group .swp_ecbutton {
    margin: 0 1px;
}

.swp_view_toggle_group {
    display: flex;
    gap: 8px;
}

.swp_view_toggle_btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.swp_view_toggle_btn:hover {
    background: #eee;
    border-color: #ccc;
}

.swp_view_toggle_btn.swp_view_toggle_active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_view_toggle_btn i {
    font-size: 16px;
}


/* ============================================
   EXTRACTED FROM JAVASCRIPT
   ============================================ */


/* --- Block 1 (template literal) --- */
/* Dark Mode Variables */
.swp_editor.swp_darkmode {
    --swp-bg-primary: #1e1e1e;
    --swp-bg-secondary: #2d2d2d;
    --swp-bg-tertiary: #3d3d3d;
    --swp-text-primary: #e0e0e0;
    --swp-text-secondary: #a0a0a0;
    --swp-text-muted: #707070;
    --swp-border-color: #404040;
    --swp-border-light: #505050;
    --swp-highlight: #4a4a4a;
    --swp-input-bg: #2d2d2d;
    --swp-shadow: rgba(0, 0, 0, 0.4);
}

/* Editor Container */
.swp_editor.swp_darkmode {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

/* Toolbar */
.swp_editor.swp_darkmode .swp_etoolbar {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_etabs {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_etab {
    color: var(--swp-text-secondary) !important;
    border-color: transparent !important;
}

.swp_editor.swp_darkmode .swp_etab:hover {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_etab.active {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
    border-color: var(--swp-border-light) !important;
}

/* Toolbar Buttons */
.swp_editor.swp_darkmode .swp_ecbutton {
    color: var(--swp-text-secondary) !important;
}

.swp_editor.swp_darkmode .swp_ecbutton:hover {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_ecbutton_active,
.swp_editor.swp_darkmode .swp_ecbutton.swp_ecbutton_active {
    background-color: var(--swp-highlight) !important;
    color: var(--swp-text-primary) !important;
}

/* Dropdowns */
.swp_editor.swp_darkmode .swp_edrop {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
    box-shadow: 0 4px 12px var(--swp-shadow) !important;
}

.swp_editor.swp_darkmode .swp_editem {
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_editem:hover {
    background-color: var(--swp-bg-tertiary) !important;
}

.swp_editor.swp_darkmode .swp_edivider {
    background-color: var(--swp-border-color) !important;
}

/* Editor Content Area */
.swp_editor.swp_darkmode .swp_seinput {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
    border-color: var(--swp-border-color) !important;
}

/* Multipage View */
.swp_editor.swp_darkmode .swp_seinput_wrapper {
    background-color: #151515 !important;
}

.swp_editor.swp_darkmode .swp_page {
    background-color: var(--swp-bg-primary) !important;
    box-shadow: 0 2px 8px var(--swp-shadow) !important;
}

.swp_editor.swp_darkmode .swp_page_content {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_page_header,
.swp_editor.swp_darkmode .swp_page_footer {
    color: var(--swp-text-muted) !important;
    border-color: var(--swp-border-color) !important;
}

/* Tables */
.swp_editor.swp_darkmode table,
.swp_editor.swp_darkmode .swp_seinput table {
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode td,
.swp_editor.swp_darkmode th,
.swp_editor.swp_darkmode .swp_seinput td,
.swp_editor.swp_darkmode .swp_seinput th {
    border-color: var(--swp-border-color) !important;
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode th {
    background-color: var(--swp-bg-secondary) !important;
}

/* Callouts */
.swp_editor.swp_darkmode .swp_callout {
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_callout_info {
    background-color: #1a3a5c !important;
}

.swp_editor.swp_darkmode .swp_callout_warning {
    background-color: #5c4a1a !important;
}

.swp_editor.swp_darkmode .swp_callout_error {
    background-color: #5c1a1a !important;
}

.swp_editor.swp_darkmode .swp_callout_success {
    background-color: #1a5c2e !important;
}

.swp_editor.swp_darkmode .swp_callout_note {
    background-color: #3d3d3d !important;
}

/* Blockquotes */
.swp_editor.swp_darkmode blockquote,
.swp_editor.swp_darkmode .swp_blockquote {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-light) !important;
    color: var(--swp-text-secondary) !important;
}

/* Code blocks */
.swp_editor.swp_darkmode pre,
.swp_editor.swp_darkmode code,
.swp_editor.swp_darkmode .swp_codeblock {
    background-color: #0d0d0d !important;
    color: #c5c5c5 !important;
    border-color: var(--swp-border-color) !important;
}

/* Comments panel */
.swp_editor.swp_darkmode .swp_comments_panel {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_comment_item {
    background-color: var(--swp-bg-tertiary) !important;
    border-color: var(--swp-border-color) !important;
    color: var(--swp-text-primary) !important;
}

/* Links */
.swp_editor.swp_darkmode a {
    color: #6cb2ff !important;
}

/* Selection */
.swp_editor.swp_darkmode ::selection {
    background-color: #264f78 !important;
    color: #ffffff !important;
}

/* Placeholder */
.swp_editor.swp_darkmode .swp_seinput:empty:before,
.swp_editor.swp_darkmode .swp_page_content:empty:before {
    color: var(--swp-text-muted) !important;
}

/* Status bar */
.swp_editor.swp_darkmode .swp_status_bar {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
    color: var(--swp-text-secondary) !important;
}

/* Modals and overlays in dark mode */
.swp_darkmode_active .swp_modal,
.swp_darkmode_active .swp_eshortcuts_panel {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_modal input,
.swp_darkmode_active .swp_modal select,
.swp_darkmode_active .swp_modal textarea {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_eshortcuts_header {
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_eshortcuts_key {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

/* Smooth transition */
.swp_editor,
.swp_editor .swp_etoolbar,
.swp_editor .swp_seinput,
.swp_editor .swp_page,
.swp_editor .swp_ecbutton {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Auto-save indicator */
.swp_eautosave_indicator {
    color: #4CAF50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swp_eautosave_indicator.swp_eautosave_show {
    opacity: 1;
}

.swp_eautosave_indicator i {
    margin-right: 4px;
}

.swp_editor.swp_darkmode .swp_eautosave_indicator {
    color: #81C784;
}

/* Reading time */
.swp_ereadtime {
    color: #666;
    font-style: italic;
}

.swp_editor.swp_darkmode .swp_ereadtime {
    color: #999;
}

/* --- Block 2 (template literal) --- */
/* Auto-save indicator */
.swp_eautosave_indicator {
    color: #4CAF50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swp_eautosave_indicator.swp_eautosave_show {
    opacity: 1;
}

.swp_eautosave_indicator i {
    margin-right: 4px;
}

.swp_eautosave_sep {
    margin: 0 4px;
    color: #ccc;
}

/* Reading time */
.swp_ereadtime {
    color: #666;
    font-style: italic;
}

/* Scroll container for zoom support */
.swp_seinput_scroll {
    flex: 1;
    overflow: auto;
    position: relative;
}

.swp_seinput_wrapper {
    position: relative;
    transform-origin: top left;
    transition: transform 0.15s ease-out;
}

/* When zoomed, wrapper needs explicit dimensions for scrolling */
.swp_editor[data-document-mode="true"] .swp_seinput_scroll {
    background: #e8e8e8;
}

.swp_editor.swp_darkmode .swp_seinput_scroll {
    background: #1a1a1a;
}

/* Spinning animation for saving state */
@keyframes la-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.la-spin {
    animation: la-spin 1s linear infinite;
}

/* --- Block 3 (template literal) --- */
/* Zoom slider control in status bar */
.swp_ezoom_control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.swp_ezoom_btn {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.15s;
}

.swp_ezoom_btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

.swp_ezoom_btn:active {
    background: #d0d0d0;
}

.swp_ezoom_slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.swp_ezoom_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
}

.swp_ezoom_slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.swp_ezoom_slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.swp_ezoom_level {
    min-width: 40px;
    text-align: right;
    font-size: 11px;
    color: #666;
}

/* Dropdown styles */
.swp_ezoom_dropdown {
    min-width: 140px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.swp_ezoom_item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_ezoom_item:hover {
    background-color: #f0f0f0;
}

.swp_ezoom_active {
    background-color: #e8f5f3;
    font-weight: 600;
    color: #2a9d90;
}

.swp_ezoom_divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Scroll container for zoomed content */
.swp_seinput_scroll {
    overflow: auto;
    flex: 1;
    position: relative;
}

/* Dark mode */
.swp_editor.swp_darkmode .swp_ezoom_btn {
    background: #3d3d3d;
    border-color: #555;
    color: #ccc;
}

.swp_editor.swp_darkmode .swp_ezoom_btn:hover {
    background: #4d4d4d;
    border-color: #666;
}

.swp_editor.swp_darkmode .swp_ezoom_slider {
    background: #444;
}

.swp_editor.swp_darkmode .swp_ezoom_level {
    color: #aaa;
}

.swp_darkmode_active .swp_ezoom_dropdown {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_darkmode_active .swp_ezoom_item {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ezoom_item:hover {
    background-color: #3d3d3d;
}

.swp_darkmode_active .swp_ezoom_active {
    background-color: #1a3d38;
    color: #5fd3c4;
}

.swp_darkmode_active .swp_ezoom_divider {
    background: #404040;
}

/* --- Block 4 (template literal) --- */
.swp_eoutline_panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: white;
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.swp_eoutline_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_eoutline_close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
    line-height: 1;
}

.swp_eoutline_close:hover {
    color: #333;
}

.swp_eoutline_content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.swp_eoutline_item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent;
}

.swp_eoutline_item:hover {
    background-color: #f5f5f5;
    border-left-color: #2a9d90;
}

.swp_eoutline_tag {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    background: #e0e0e0;
    padding: 2px 4px;
    border-radius: 3px;
}

.swp_eoutline_h1 .swp_eoutline_tag {
    background: #2a9d90;
    color: white;
}

.swp_eoutline_h2 .swp_eoutline_tag {
    background: #4CAF50;
    color: white;
}

.swp_eoutline_h3 .swp_eoutline_tag {
    background: #FF9800;
    color: white;
}

.swp_eoutline_empty {
    padding: 24px 16px;
    text-align: center;
    color: #666;
}

.swp_eoutline_footer {
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
}

.swp_eoutline_footer button {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.swp_eoutline_footer button:hover {
    background: #e0e0e0;
}

.swp_eoutline_highlight {
    animation: swp_outline_flash 1.5s ease-out;
}

@keyframes swp_outline_flash {

    0%,
    50% {
        background-color: #ffeb3b;
    }

    100% {
        background-color: transparent;
    }
}

/* Dark mode */
.swp_editor.swp_darkmode .swp_eoutline_panel {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_editor.swp_darkmode .swp_eoutline_header,
.swp_editor.swp_darkmode .swp_eoutline_footer {
    border-color: #404040;
}

.swp_editor.swp_darkmode .swp_eoutline_item:hover {
    background-color: #3d3d3d;
}

.swp_editor.swp_darkmode .swp_eoutline_tag {
    background: #404040;
    color: #e0e0e0;
}

.swp_editor.swp_darkmode .swp_eoutline_footer button {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}

/* --- Block 5 (template literal) --- */
.swp_wordfreq_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_wordfreq_modal {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.swp_wordfreq_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_wordfreq_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
}

.swp_wordfreq_close:hover {
    color: #333;
}

.swp_wordfreq_stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.swp_wordfreq_stat {
    text-align: center;
    font-size: 12px;
    color: #666;
}

.swp_wordfreq_stat strong {
    font-size: 24px;
    color: #333;
    display: block;
}

.swp_wordfreq_tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_wordfreq_tab {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.swp_wordfreq_tab:hover {
    background: #f5f5f5;
}

.swp_wordfreq_tab.active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_wordfreq_content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.swp_wordfreq_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.swp_wordfreq_table th {
    text-align: left;
    padding: 10px 16px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.swp_wordfreq_table td {
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.swp_wordfreq_table tr:hover td {
    background: #f9f9f9;
}

.swp_wordfreq_bar {
    display: inline-block;
    height: 8px;
    background: #2a9d90;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Dark mode */
.swp_darkmode_active .swp_wordfreq_modal {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_header,
.swp_darkmode_active .swp_wordfreq_stats,
.swp_darkmode_active .swp_wordfreq_tabs {
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_stats {
    background: #252525;
}

.swp_darkmode_active .swp_wordfreq_stat strong {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_tab {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_table th {
    background: #353535;
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_table td {
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_table tr:hover td {
    background: #353535;
}

/* --- Block 6 (template literal) --- */
.swp_eai_dropdown {
    min-width: 180px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.swp_eai_dropitem {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

.swp_eai_dropitem:hover {
    background-color: #f0f0f0;
}

.swp_eai_dropitem i {
    width: 16px;
    text-align: center;
    color: #666;
}

.swp_eai_dropdivider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Dark mode */
.swp_darkmode_active .swp_eai_dropdown {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.swp_darkmode_active .swp_eai_dropitem {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eai_dropitem:hover {
    background-color: #3d3d3d;
}

.swp_darkmode_active .swp_eai_dropitem i {
    color: #a0a0a0;
}

.swp_darkmode_active .swp_eai_dropdivider {
    background: #404040;
}

/* --- Block 7 (template literal) --- */
.swp_ai_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ai_dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.swp_ai_dialog_wide {
    max-width: 700px;
}

.swp_ai_dialog_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_ai_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_ai_close:hover {
    color: #333;
}

.swp_ai_dialog_body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.swp_ai_dialog_body label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.swp_ai_dialog_body select,
.swp_ai_dialog_body textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.swp_ai_dialog_body textarea {
    resize: vertical;
}

.swp_ai_dialog_footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.swp_ai_btn_primary,
.swp_ai_btn_secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swp_ai_btn_primary {
    background: #2a9d90;
    color: white;
}

.swp_ai_btn_primary:hover {
    background: #1976D2;
}

.swp_ai_btn_secondary {
    background: #e0e0e0;
    color: #333;
}

.swp_ai_btn_secondary:hover {
    background: #d0d0d0;
}

.swp_ai_comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .swp_ai_comparison {
        grid-template-columns: 1fr;
    }
}

.swp_ai_original,
.swp_ai_result {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.swp_ai_label {
    background: #f5f5f5;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

.swp_ai_result .swp_ai_label {
    background: #e3f2fd;
    color: #1976D2;
}

.swp_ai_text {
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
}

.swp_ai_setup_info {
    background: #e3f2fd;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.swp_ai_setup_info p {
    margin: 8px 0;
}

.swp_ai_setup_info ul {
    margin: 8px 0 0 20px;
}

.swp_ai_setup_info li {
    margin: 4px 0;
}

.swp_ai_prompt_box label {
    font-size: 13px;
    color: #666;
}

#swp_ai_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.swp_ai_spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #2a9d90;
    border-radius: 50%;
    animation: swp_ai_spin 1s linear infinite;
}

@keyframes swp_ai_spin {
    to {
        transform: rotate(360deg);
    }
}

.swp_ai_toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    z-index: 100002;
    transition: transform 0.3s ease;
    font-size: 14px;
}

.swp_ai_toast_show {
    transform: translateX(-50%) translateY(0);
}

.swp_ai_toast_success {
    background: #4CAF50;
}

.swp_ai_toast_warning {
    background: #FF9800;
}

.swp_ai_toast_error {
    background: #f44336;
}

/* Dark mode support */
.swp_darkmode_active .swp_ai_dialog {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ai_dialog_header,
.swp_darkmode_active .swp_ai_dialog_footer {
    border-color: #404040;
    background: #252525;
}

.swp_darkmode_active .swp_ai_dialog_body select,
.swp_darkmode_active .swp_ai_dialog_body textarea {
    background: #1e1e1e;
    border-color: #404040;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ai_original,
.swp_darkmode_active .swp_ai_result {
    border-color: #404040;
}

.swp_darkmode_active .swp_ai_label {
    background: #3d3d3d;
    border-color: #404040;
}

.swp_darkmode_active .swp_ai_result .swp_ai_label {
    background: #1a3a5c;
}

.swp_darkmode_active .swp_ai_setup_info {
    background: #1a3a5c;
}

.swp_darkmode_active #swp_ai_loading {
    background: #2d2d2d;
    color: #e0e0e0;
}

/* --- Block 1 (concatenated) --- */
.swp_eimage_replace_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_eimage_replace_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    z-index: 100001;
}

.swp_eimage_replace_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_eimage_replace_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_eimage_replace_close:hover {
    color: #333;
}

.swp_eimage_replace_content {
    padding: 20px;
}

.swp_eimage_replace_dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_eimage_replace_dropzone:hover,
.swp_eimage_replace_dropzone.dragover {
    border-color: #2a9d90;
    background: #f0fdf4;
}

.swp_eimage_replace_dropzone i {
    font-size: 48px;
    color: #2a9d90;
    margin-bottom: 10px;
    display: block;
}

.swp_eimage_replace_dropzone p {
    margin: 5px 0;
    color: #666;
}

/* --- Block 2 (concatenated) --- */
.swp_eimport_note {
    padding: 12px 16px;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 12px;
    color: #856404;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_eimport_note i {
    font-size: 16px;
}

.swp_darkmode_active .swp_eimport_note {
    background: #3d3520;
    color: #ffc107;
}

/* --- Block 3 (concatenated) --- */
.swp_edivider {
    margin: 16px 0;
    border: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.swp_edivider.swp_edivider_solid {
    border-top: 1px solid #ccc;
}

.swp_edivider.swp_edivider_dashed {
    border-top: 2px dashed #ccc;
}

.swp_edivider.swp_edivider_dotted {
    border-top: 2px dotted #999;
}

.swp_edivider.swp_edivider_double {
    border-top: 4px double #ccc;
}

.swp_edivider.swp_edivider_thick {
    border-top: 4px solid #999;
}

.swp_edivider.swp_edivider_fade {
    height: 1px;
    background: linear-gradient(to right, transparent, #999, transparent);
}

.swp_edivider_picker {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 10000;
    min-width: 150px;
}

.swp_edivider_option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 10px;
}

.swp_edivider_option:hover {
    background: #f5f5f5;
}

.swp_edivider_preview {
    font-family: monospace;
    color: #666;
    flex: 1;
}

.swp_edivider_label {
    font-size: 12px;
    color: #333;
}

.swp_readonly .swp_seinput,
.swp_readonly .swp_page_content {
    background: #f9f9f9;
    cursor: default;
}

.swp_readonly .swp_secontrols .swp_ecbutton:not([id*="readonly"]):not([id*="continuous"]):not([id*="multipage"]) {
    opacity: 0.5;
    pointer-events: none;
}

.swp_readonly .swp_secontrols .swp_eselectframe {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Block 4 (concatenated) --- */
.swp_edropcap {
    display: block !important;
    min-height: 3.5em;
}

.swp_edropcap::first-letter {
    float: left !important;
    font-size: 3.5em !important;
    line-height: 0.8 !important;
    padding: 4px 8px 0 0 !important;
    font-weight: bold !important;
    color: #333 !important;
}

span.swp_edropcap {
    display: block !important;
}

.swp_page_content .swp_edropcap::first-letter {
    float: left !important;
    font-size: 3.5em !important;
    line-height: 0.8 !important;
    padding: 4px 8px 0 0 !important;
    font-weight: bold !important;
    color: #333 !important;
}

/* --- Block 5 (concatenated) --- */
.swp_elimit_exceeded {
    color: #dc3545 !important;
    font-weight: bold;
}

.swp_editor.swp_elimit_exceeded .swp_seinput,
.swp_editor.swp_elimit_exceeded .swp_page_content {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* --- Block 6 (concatenated) --- */
.swp_ecallout {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 6px;
    border-left: 4px solid;
    position: relative;
}

.swp_ecallout_info {
    background: #eff6ff;
    border-color: #3b82f6;
}

.swp_ecallout_success {
    background: #f0fdf4;
    border-color: #22c55e;
}

.swp_ecallout_warning {
    background: #fffbeb;
    border-color: #f59e0b;
}

.swp_ecallout_error {
    background: #fef2f2;
    border-color: #ef4444;
}

.swp_ecallout_note {
    background: #faf5ff;
    border-color: #8b5cf6;
}

.swp_ecallout_icon {
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.swp_ecallout_content {
    flex: 1;
    outline: none;
    min-height: 20px;
}

.swp_ecallout_delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    color: #999;
}

.swp_ecallout:hover .swp_ecallout_delete {
    opacity: 1;
}

.swp_ecallout_delete:hover {
    color: #666;
}

/* --- Block 7 (concatenated) --- */
.swp_ecolumns {
    display: flex;
    gap: 20px;
    margin: 16px 0;
    position: relative;
}

.swp_ecolumn {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background: #fafafa;
}

.swp_ecolumn:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
}

.swp_ecolumn p {
    margin: 0 0 8px 0;
}

.swp_ecolumns_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ecolumns:hover .swp_ecolumns_delete {
    opacity: 1;
}

.swp_ecolumns_picker {
    padding: 4px 0;
}

.swp_ecolumns_option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 10px;
}

.swp_ecolumns_option:hover {
    background: #f5f5f5;
}

.swp_ecolumns_icon {
    font-family: monospace;
    letter-spacing: 2px;
    color: #666;
}

/* --- Block 8 (concatenated) --- */
.swp_eblockquote_wrapper {
    position: relative;
    margin: 20px 0;
}

.swp_eblockquote {
    margin: 0;
    padding: 20px 24px;
    border-left: 4px solid #2563eb;
    background: #f8fafc;
    border-radius: 0 8px 8px 0;
}

.swp_eblockquote_icon {
    font-size: 48px;
    font-family: Georgia, serif;
    color: #2563eb;
    opacity: 0.3;
    line-height: 1;
    margin-bottom: -10px;
}

.swp_eblockquote_content {
    font-size: 17px;
    line-height: 1.7;
    color: #334155;
    outline: none;
    min-height: 24px;
    font-style: italic;
}

.swp_eblockquote_content:focus {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

.swp_eblockquote_cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #64748b;
    font-style: normal;
    outline: none;
    font-weight: 500;
}

.swp_eblockquote_cite:empty:before {
    content: attr(placeholder);
    color: #94a3b8;
    font-style: italic;
    font-weight: normal;
}

.swp_eblockquote_cite:focus {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

.swp_eblockquote_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_eblockquote_wrapper:hover .swp_eblockquote_delete {
    opacity: 1;
}

/* --- Block 9 (concatenated) --- */
.swp_typewriter_mode {
    scroll-behavior: smooth;
}

/* --- Block 10 (concatenated) --- */
.swp_dropdown_menu {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.swp_dropdown_item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.swp_dropdown_item:hover {
    background: #f5f5f5;
}

.swp_dropdown_item i {
    font-size: 16px;
    color: #666;
    width: 18px;
}

.swp_dropdown_divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

.swp_darkmode_active .swp_dropdown_menu {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_darkmode_active .swp_dropdown_item {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_dropdown_item:hover {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_dropdown_item i {
    color: #aaa;
}

.swp_darkmode_active .swp_dropdown_divider {
    background: #404040;
}

/* --- Block 11 (concatenated) --- */
.swp_bookmark {
    display: inline-block;
    color: #2a9d90;
    margin: 0 2px;
    cursor: default;
    vertical-align: middle;
}

.swp_bookmark i {
    font-size: 14px;
}

.swp_bookmark_link {
    color: #2a9d90;
    text-decoration: underline;
    cursor: pointer;
}

.swp_bookmark_highlight {
    animation: swp_bm_flash 0.5s ease 3;
}

@keyframes swp_bm_flash {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: #ffeb3b;
    }
}

.swp_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_modal_small {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.swp_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.swp_modal_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_modal_close:hover {
    color: #333;
}

.swp_modal_content {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.swp_bookmark_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swp_bookmark_list_item {
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.swp_bookmark_list_item:hover {
    background: #e8e8e8;
}

.swp_bookmark_list_item i {
    color: #2a9d90;
}

.swp_bookmark_manage_item {
    justify-content: space-between;
    cursor: default;
}

.swp_bookmark_actions {
    display: flex;
    gap: 8px;
}

.swp_bookmark_actions button {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.swp_bookmark_actions button:hover {
    background: #f0f0f0;
}

.swp_darkmode_active .swp_modal_small {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_modal_header {
    border-color: #404040;
}

.swp_darkmode_active .swp_modal_close {
    color: #aaa;
}

.swp_darkmode_active .swp_modal_close:hover {
    color: #fff;
}

.swp_darkmode_active .swp_bookmark_list_item {
    background: #3d3d3d;
}

.swp_darkmode_active .swp_bookmark_list_item:hover {
    background: #4d4d4d;
}

.swp_darkmode_active .swp_bookmark_actions button {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

/* ============================================
   EXTRACTED FROM JAVASCRIPT
   ============================================ */


/* Block 1 */
/* Dark Mode Variables */
.swp_editor.swp_darkmode {
    --swp-bg-primary: #1e1e1e;
    --swp-bg-secondary: #2d2d2d;
    --swp-bg-tertiary: #3d3d3d;
    --swp-text-primary: #e0e0e0;
    --swp-text-secondary: #a0a0a0;
    --swp-text-muted: #707070;
    --swp-border-color: #404040;
    --swp-border-light: #505050;
    --swp-highlight: #4a4a4a;
    --swp-input-bg: #2d2d2d;
    --swp-shadow: rgba(0, 0, 0, 0.4);
}

/* Editor Container */
.swp_editor.swp_darkmode {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

/* Toolbar */
.swp_editor.swp_darkmode .swp_etoolbar {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_etabs {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_etab {
    color: var(--swp-text-secondary) !important;
    border-color: transparent !important;
}

.swp_editor.swp_darkmode .swp_etab:hover {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_etab.active {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
    border-color: var(--swp-border-light) !important;
}

/* Toolbar Buttons */
.swp_editor.swp_darkmode .swp_ecbutton {
    color: var(--swp-text-secondary) !important;
}

.swp_editor.swp_darkmode .swp_ecbutton:hover {
    background-color: var(--swp-bg-tertiary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_ecbutton_active,
.swp_editor.swp_darkmode .swp_ecbutton.swp_ecbutton_active {
    background-color: var(--swp-highlight) !important;
    color: var(--swp-text-primary) !important;
}

/* Dropdowns */
.swp_editor.swp_darkmode .swp_edrop {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
    box-shadow: 0 4px 12px var(--swp-shadow) !important;
}

.swp_editor.swp_darkmode .swp_editem {
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_editem:hover {
    background-color: var(--swp-bg-tertiary) !important;
}

.swp_editor.swp_darkmode .swp_edivider {
    background-color: var(--swp-border-color) !important;
}

/* Editor Content Area */
.swp_editor.swp_darkmode .swp_seinput {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
    border-color: var(--swp-border-color) !important;
}

/* Multipage View */
.swp_editor.swp_darkmode .swp_seinput_wrapper {
    background-color: #151515 !important;
}

.swp_editor.swp_darkmode .swp_page {
    background-color: var(--swp-bg-primary) !important;
    box-shadow: 0 2px 8px var(--swp-shadow) !important;
}

.swp_editor.swp_darkmode .swp_page_content {
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode .swp_page_header,
.swp_editor.swp_darkmode .swp_page_footer {
    color: var(--swp-text-muted) !important;
    border-color: var(--swp-border-color) !important;
}

/* Tables */
.swp_editor.swp_darkmode table,
.swp_editor.swp_darkmode .swp_seinput table {
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode td,
.swp_editor.swp_darkmode th,
.swp_editor.swp_darkmode .swp_seinput td,
.swp_editor.swp_darkmode .swp_seinput th {
    border-color: var(--swp-border-color) !important;
    background-color: var(--swp-bg-primary) !important;
    color: var(--swp-text-primary) !important;
}

.swp_editor.swp_darkmode th {
    background-color: var(--swp-bg-secondary) !important;
}

/* Callouts */
.swp_editor.swp_darkmode .swp_callout {
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_callout_info {
    background-color: #1a3a5c !important;
}

.swp_editor.swp_darkmode .swp_callout_warning {
    background-color: #5c4a1a !important;
}

.swp_editor.swp_darkmode .swp_callout_error {
    background-color: #5c1a1a !important;
}

.swp_editor.swp_darkmode .swp_callout_success {
    background-color: #1a5c2e !important;
}

.swp_editor.swp_darkmode .swp_callout_note {
    background-color: #3d3d3d !important;
}

/* Blockquotes */
.swp_editor.swp_darkmode blockquote,
.swp_editor.swp_darkmode .swp_blockquote {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-light) !important;
    color: var(--swp-text-secondary) !important;
}

/* Code blocks */
.swp_editor.swp_darkmode pre,
.swp_editor.swp_darkmode code,
.swp_editor.swp_darkmode .swp_codeblock {
    background-color: #0d0d0d !important;
    color: #c5c5c5 !important;
    border-color: var(--swp-border-color) !important;
}

/* Comments panel */
.swp_editor.swp_darkmode .swp_comments_panel {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
}

.swp_editor.swp_darkmode .swp_comment_item {
    background-color: var(--swp-bg-tertiary) !important;
    border-color: var(--swp-border-color) !important;
    color: var(--swp-text-primary) !important;
}

/* Links */
.swp_editor.swp_darkmode a {
    color: #6cb2ff !important;
}

/* Selection */
.swp_editor.swp_darkmode ::selection {
    background-color: #264f78 !important;
    color: #ffffff !important;
}

/* Placeholder */
.swp_editor.swp_darkmode .swp_seinput:empty:before,
.swp_editor.swp_darkmode .swp_page_content:empty:before {
    color: var(--swp-text-muted) !important;
}

/* Status bar */
.swp_editor.swp_darkmode .swp_status_bar {
    background-color: var(--swp-bg-secondary) !important;
    border-color: var(--swp-border-color) !important;
    color: var(--swp-text-secondary) !important;
}

/* Modals and overlays in dark mode */
.swp_darkmode_active .swp_modal,
.swp_darkmode_active .swp_eshortcuts_panel {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_modal input,
.swp_darkmode_active .swp_modal select,
.swp_darkmode_active .swp_modal textarea {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_eshortcuts_header {
    border-color: #404040 !important;
}

.swp_darkmode_active .swp_eshortcuts_key {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
    border-color: #505050 !important;
}

/* Smooth transition */
.swp_editor,
.swp_editor .swp_etoolbar,
.swp_editor .swp_seinput,
.swp_editor .swp_page,
.swp_editor .swp_ecbutton {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Auto-save indicator */
.swp_eautosave_indicator {
    color: #4CAF50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swp_eautosave_indicator.swp_eautosave_show {
    opacity: 1;
}

.swp_eautosave_indicator i {
    margin-right: 4px;
}

.swp_editor.swp_darkmode .swp_eautosave_indicator {
    color: #81C784;
}

/* Reading time */
.swp_ereadtime {
    color: #666;
    font-style: italic;
}

.swp_editor.swp_darkmode .swp_ereadtime {
    color: #999;
}

/* Block 2 */
/* Auto-save indicator */
.swp_eautosave_indicator {
    color: #4CAF50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swp_eautosave_indicator.swp_eautosave_show {
    opacity: 1;
}

.swp_eautosave_indicator i {
    margin-right: 4px;
}

.swp_eautosave_sep {
    margin: 0 4px;
    color: #ccc;
}

/* Reading time */
.swp_ereadtime {
    color: #666;
    font-style: italic;
}

/* Scroll container for zoom support */
.swp_seinput_scroll {
    flex: 1;
    overflow: auto;
    position: relative;
}

.swp_seinput_wrapper {
    position: relative;
    transform-origin: top left;
    transition: transform 0.15s ease-out;
}

/* When zoomed, wrapper needs explicit dimensions for scrolling */
.swp_editor[data-document-mode="true"] .swp_seinput_scroll {
    background: #e8e8e8;
}

.swp_editor.swp_darkmode .swp_seinput_scroll {
    background: #1a1a1a;
}

/* Spinning animation for saving state */
@keyframes la-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.la-spin {
    animation: la-spin 1s linear infinite;
}

/* Block 3 */
/* Zoom slider control in status bar */
.swp_ezoom_control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.swp_ezoom_btn {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.15s;
}

.swp_ezoom_btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

.swp_ezoom_btn:active {
    background: #d0d0d0;
}

.swp_ezoom_slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.swp_ezoom_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
}

.swp_ezoom_slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.swp_ezoom_slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.swp_ezoom_level {
    min-width: 40px;
    text-align: right;
    font-size: 11px;
    color: #666;
}

/* Dropdown styles */
.swp_ezoom_dropdown {
    min-width: 140px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.swp_ezoom_item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_ezoom_item:hover {
    background-color: #f0f0f0;
}

.swp_ezoom_active {
    background-color: #e8f5f3;
    font-weight: 600;
    color: #2a9d90;
}

.swp_ezoom_divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Scroll container for zoomed content */
.swp_seinput_scroll {
    overflow: auto;
    flex: 1;
    position: relative;
}

/* Dark mode */
.swp_editor.swp_darkmode .swp_ezoom_btn {
    background: #3d3d3d;
    border-color: #555;
    color: #ccc;
}

.swp_editor.swp_darkmode .swp_ezoom_btn:hover {
    background: #4d4d4d;
    border-color: #666;
}

.swp_editor.swp_darkmode .swp_ezoom_slider {
    background: #444;
}

.swp_editor.swp_darkmode .swp_ezoom_level {
    color: #aaa;
}

.swp_darkmode_active .swp_ezoom_dropdown {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_darkmode_active .swp_ezoom_item {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ezoom_item:hover {
    background-color: #3d3d3d;
}

.swp_darkmode_active .swp_ezoom_active {
    background-color: #1a3d38;
    color: #5fd3c4;
}

.swp_darkmode_active .swp_ezoom_divider {
    background: #404040;
}

/* Block 4 */
.swp_eoutline_panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: white;
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.swp_eoutline_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_eoutline_close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
    line-height: 1;
}

.swp_eoutline_close:hover {
    color: #333;
}

.swp_eoutline_content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.swp_eoutline_item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent;
}

.swp_eoutline_item:hover {
    background-color: #f5f5f5;
    border-left-color: #2a9d90;
}

.swp_eoutline_tag {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    background: #e0e0e0;
    padding: 2px 4px;
    border-radius: 3px;
}

.swp_eoutline_h1 .swp_eoutline_tag {
    background: #2a9d90;
    color: white;
}

.swp_eoutline_h2 .swp_eoutline_tag {
    background: #4CAF50;
    color: white;
}

.swp_eoutline_h3 .swp_eoutline_tag {
    background: #FF9800;
    color: white;
}

.swp_eoutline_empty {
    padding: 24px 16px;
    text-align: center;
    color: #666;
}

.swp_eoutline_footer {
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
}

.swp_eoutline_footer button {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.swp_eoutline_footer button:hover {
    background: #e0e0e0;
}

.swp_eoutline_highlight {
    animation: swp_outline_flash 1.5s ease-out;
}

@keyframes swp_outline_flash {

    0%,
    50% {
        background-color: #ffeb3b;
    }

    100% {
        background-color: transparent;
    }
}

/* Dark mode */
.swp_editor.swp_darkmode .swp_eoutline_panel {
    background: #2d2d2d;
    border-color: #404040;
}

.swp_editor.swp_darkmode .swp_eoutline_header,
.swp_editor.swp_darkmode .swp_eoutline_footer {
    border-color: #404040;
}

.swp_editor.swp_darkmode .swp_eoutline_item:hover {
    background-color: #3d3d3d;
}

.swp_editor.swp_darkmode .swp_eoutline_tag {
    background: #404040;
    color: #e0e0e0;
}

.swp_editor.swp_darkmode .swp_eoutline_footer button {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}

/* Block 5 */
.swp_wordfreq_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_wordfreq_modal {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.swp_wordfreq_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_wordfreq_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
}

.swp_wordfreq_close:hover {
    color: #333;
}

.swp_wordfreq_stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.swp_wordfreq_stat {
    text-align: center;
    font-size: 12px;
    color: #666;
}

.swp_wordfreq_stat strong {
    font-size: 24px;
    color: #333;
    display: block;
}

.swp_wordfreq_tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_wordfreq_tab {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.swp_wordfreq_tab:hover {
    background: #f5f5f5;
}

.swp_wordfreq_tab.active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_wordfreq_content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.swp_wordfreq_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.swp_wordfreq_table th {
    text-align: left;
    padding: 10px 16px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.swp_wordfreq_table td {
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.swp_wordfreq_table tr:hover td {
    background: #f9f9f9;
}

.swp_wordfreq_bar {
    display: inline-block;
    height: 8px;
    background: #2a9d90;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Dark mode */
.swp_darkmode_active .swp_wordfreq_modal {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_header,
.swp_darkmode_active .swp_wordfreq_stats,
.swp_darkmode_active .swp_wordfreq_tabs {
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_stats {
    background: #252525;
}

.swp_darkmode_active .swp_wordfreq_stat strong {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_tab {
    background: #3d3d3d;
    border-color: #505050;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_wordfreq_table th {
    background: #353535;
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_table td {
    border-color: #404040;
}

.swp_darkmode_active .swp_wordfreq_table tr:hover td {
    background: #353535;
}

/* Block 6 */
.swp_eai_dropdown {
    min-width: 180px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

.swp_eai_dropitem {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

.swp_eai_dropitem:hover {
    background-color: #f0f0f0;
}

.swp_eai_dropitem i {
    width: 16px;
    text-align: center;
    color: #666;
}

.swp_eai_dropdivider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

/* Dark mode */
.swp_darkmode_active .swp_eai_dropdown {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.swp_darkmode_active .swp_eai_dropitem {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eai_dropitem:hover {
    background-color: #3d3d3d;
}

.swp_darkmode_active .swp_eai_dropitem i {
    color: #a0a0a0;
}

.swp_darkmode_active .swp_eai_dropdivider {
    background: #404040;
}

/* Block 7 */
.swp_ai_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ai_dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.swp_ai_dialog_wide {
    max-width: 700px;
}

.swp_ai_dialog_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_ai_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_ai_close:hover {
    color: #333;
}

.swp_ai_dialog_body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.swp_ai_dialog_body label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.swp_ai_dialog_body select,
.swp_ai_dialog_body textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.swp_ai_dialog_body textarea {
    resize: vertical;
}

.swp_ai_dialog_footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.swp_ai_btn_primary,
.swp_ai_btn_secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swp_ai_btn_primary {
    background: #2a9d90;
    color: white;
}

.swp_ai_btn_primary:hover {
    background: #1976D2;
}

.swp_ai_btn_secondary {
    background: #e0e0e0;
    color: #333;
}

.swp_ai_btn_secondary:hover {
    background: #d0d0d0;
}

.swp_ai_comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .swp_ai_comparison {
        grid-template-columns: 1fr;
    }
}

.swp_ai_original,
.swp_ai_result {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.swp_ai_label {
    background: #f5f5f5;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

.swp_ai_result .swp_ai_label {
    background: #e3f2fd;
    color: #1976D2;
}

.swp_ai_text {
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
}

.swp_ai_setup_info {
    background: #e3f2fd;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.swp_ai_setup_info p {
    margin: 8px 0;
}

.swp_ai_setup_info ul {
    margin: 8px 0 0 20px;
}

.swp_ai_setup_info li {
    margin: 4px 0;
}

.swp_ai_prompt_box label {
    font-size: 13px;
    color: #666;
}

#swp_ai_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.swp_ai_spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #2a9d90;
    border-radius: 50%;
    animation: swp_ai_spin 1s linear infinite;
}

@keyframes swp_ai_spin {
    to {
        transform: rotate(360deg);
    }
}

.swp_ai_toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    z-index: 100002;
    transition: transform 0.3s ease;
    font-size: 14px;
}

.swp_ai_toast_show {
    transform: translateX(-50%) translateY(0);
}

.swp_ai_toast_success {
    background: #4CAF50;
}

.swp_ai_toast_warning {
    background: #FF9800;
}

.swp_ai_toast_error {
    background: #f44336;
}

/* Dark mode support */
.swp_darkmode_active .swp_ai_dialog {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ai_dialog_header,
.swp_darkmode_active .swp_ai_dialog_footer {
    border-color: #404040;
    background: #252525;
}

.swp_darkmode_active .swp_ai_dialog_body select,
.swp_darkmode_active .swp_ai_dialog_body textarea {
    background: #1e1e1e;
    border-color: #404040;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ai_original,
.swp_darkmode_active .swp_ai_result {
    border-color: #404040;
}

.swp_darkmode_active .swp_ai_label {
    background: #3d3d3d;
    border-color: #404040;
}

.swp_darkmode_active .swp_ai_result .swp_ai_label {
    background: #1a3a5c;
}

.swp_darkmode_active .swp_ai_setup_info {
    background: #1a3a5c;
}

.swp_darkmode_active #swp_ai_loading {
    background: #2d2d2d;
    color: #e0e0e0;
}

/* Block 8 */
.swp_eimage_replace_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_eimage_replace_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_eimage_replace_close:hover {
    color: #333;
}

.swp_eimage_replace_dropzone {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_eimage_replace_dropzone i {
    font-size: 48px;
    color: #2a9d90;
    margin-bottom: 10px;
    display: block;
}

/* Block 9 */
.swp_eimport_note {
    padding: 12px 16px;
    background: #fff3cd;
    border-radius: 6px;
    font-size: 12px;
    color: #856404;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_darkmode_active .swp_eimport_note {
    background: #3d3520;
    color: #ffc107;
}

/* Block 10 */
.swp_edivider {
    border: none;
    margin: 16px 0;
}

.swp_edivider_dashed {
    border-top: 2px dashed #ccc;
}

.swp_edivider_double {
    border-top: 4px double #ccc;
}

.swp_edivider_fade {
    height: 1px;
    background: linear-gradient(to right, transparent, #999, transparent);
}

.swp_edivider_option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 10px;
}

.swp_edivider_preview {
    font-family: monospace;
    color: #666;
    flex: 1;
}

.swp_readonly .swp_seinput,
.swp_readonly .swp_page_content {
    background: #f9f9f9;
    cursor: default;
}

.swp_readonly .swp_secontrols .swp_eselectframe {
    opacity: 0.5;
    pointer-events: none;
}

/* Block 11 */
.swp_edropcap {
    display: block !important;
    min-height: 3.5em;
}

span.swp_edropcap {
    display: block !important;
}

/* Block 12 */
.swp_elimit_exceeded {
    color: #dc3545 !important;
    font-weight: bold;
}

/* Block 13 */
.swp_ecallout {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 6px;
    border-left: 4px solid;
    position: relative;
}

.swp_ecallout_success {
    background: #f0fdf4;
    border-color: #22c55e;
}

.swp_ecallout_error {
    background: #fef2f2;
    border-color: #ef4444;
}

.swp_ecallout_icon {
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.swp_ecallout_delete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    color: #999;
}

.swp_ecallout_delete:hover {
    color: #666;
}

/* Block 14 */
.swp_ecolumns {
    display: flex;
    gap: 20px;
    margin: 16px 0;
    position: relative;
}

.swp_ecolumn:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
}

.swp_ecolumns_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ecolumns_picker {
    padding: 4px 0;
}

.swp_ecolumns_option:hover {
    background: #f5f5f5;
}

/* Block 15 */
.swp_eblockquote_wrapper {
    position: relative;
    margin: 20px 0;
}

.swp_eblockquote_icon {
    font-size: 48px;
    font-family: Georgia, serif;
    color: #2563eb;
    opacity: 0.3;
    line-height: 1;
    margin-bottom: -10px;
}

.swp_eblockquote_content:focus {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
}

.swp_eblockquote_cite:empty:before {
    content: attr(placeholder);
    color: #94a3b8;
    font-style: italic;
    font-weight: normal;
}

.swp_eblockquote_delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Block 16 */
.swp_typewriter_mode {
    scroll-behavior: smooth;
}

/* Block 17 */
.swp_dropdown_menu {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.swp_dropdown_item:hover {
    background: #f5f5f5;
}

.swp_dropdown_divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

.swp_darkmode_active .swp_dropdown_item {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_dropdown_item i {
    color: #aaa;
}

/* Block 18 */
.swp_bookmark {
    display: inline-block;
    color: #2a9d90;
    margin: 0 2px;
    cursor: default;
    vertical-align: middle;
}

.swp_bookmark_link {
    color: #2a9d90;
    text-decoration: underline;
    cursor: pointer;
}

@keyframes swp_bm_flash {

    0%,
    100% {
        background: transparent;
    }

    50% {
        background: #ffeb3b;
    }
}

.swp_modal_small {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.swp_modal_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_modal_content {
    padding: 16px 20px;
    max-height: 60vh;
    overflow-y: auto;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.swp_bookmark_list_item {
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.swp_bookmark_list_item i {
    color: #2a9d90;
}

.swp_bookmark_actions {
    display: flex;
    gap: 8px;
}

.swp_bookmark_actions button:hover {
    background: #f0f0f0;
}

.swp_darkmode_active .swp_modal_header {
    border-color: #404040;
}

.swp_darkmode_active .swp_modal_close:hover {
    color: #fff;
}

.swp_darkmode_active .swp_bookmark_list_item:hover {
    background: #4d4d4d;
}

/* ============================================
   CHARTS MODULE (editor-charts.js)
   ============================================ */

.swp_echart_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_echart_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    z-index: 100001;
}

.swp_echart_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_echart_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_echart_close:hover {
    color: #333;
}

.swp_echart_content {
    padding: 16px 20px;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.swp_echart_row {
    display: flex;
    gap: 20px;
}

.swp_echart_form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.swp_echart_field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.swp_echart_field label {
    font-weight: 600;
    font-size: 12px;
    color: #666;
}

.swp_echart_field input,
.swp_echart_field select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.swp_echart_size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_echart_size input {
    width: 80px;
}

.swp_echart_preview_wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 250px;
}

.swp_echart_preview_wrap>label {
    font-weight: 600;
    font-size: 12px;
    color: #666;
}

.swp_echart_preview {
    background: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
    height: 250px;
}

.swp_echart_actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.swp_echart_cancel {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_echart_insert {
    padding: 8px 16px;
    border: none;
    background: #2a9d90;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_echart_insert:hover {
    background: #238b7e;
}

.swp_chart_wrapper {
    position: relative;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.swp_chart_wrapper:hover {
    border-color: #2a9d90;
}

.swp_chart_wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.swp_chart_wrapper:hover .swp_media_toolbar {
    display: flex;
}

.swp_chart_resize {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 2px;
    display: none;
    z-index: 10;
}

.swp_chart_resize_nw {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.swp_chart_resize_ne {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.swp_chart_resize_sw {
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}

.swp_chart_resize_se {
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}

.swp_chart_wrapper:hover .swp_chart_resize {
    display: block;
}

.swp_darkmode_active .swp_echart_field label {
    color: #aaa;
}

.swp_darkmode_active .swp_echart_field input,
.swp_darkmode_active .swp_echart_field select {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_echart_preview {
    background: #353535;
}

.swp_darkmode_active .swp_echart_actions {
    border-color: #404040;
}

.swp_darkmode_active .swp_echart_cancel {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

/* ============================================
   MATH MODULE (editor-math.js)
   ============================================ */

.swp_emath_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_emath_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    z-index: 100001;
}

.swp_emath_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_emath_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_emath_close:hover {
    color: #333;
}

.swp_emath_content {
    padding: 16px 20px;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.swp_emath_display_options {
    display: flex;
    gap: 20px;
}

.swp_emath_display_options label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

.swp_emath_input_wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swp_emath_input_wrap label {
    font-weight: 600;
    font-size: 13px;
}

.swp_emath_input_wrap textarea {
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.swp_emath_preview_wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swp_emath_preview_wrap label {
    font-weight: 600;
    font-size: 13px;
}

.swp_emath_preview {
    min-height: 50px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
}

.swp_emath_preview_error {
    background: #ffebee;
}

.swp_emath_helpers {
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
}

.swp_emath_helper_title {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.swp_emath_helper_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.swp_emath_helper_buttons button {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_emath_helper_buttons button:hover {
    background: #f0f0f0;
    border-color: #2a9d90;
}

.swp_emath_actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.swp_emath_cancel {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_emath_insert {
    padding: 8px 16px;
    border: none;
    background: #2a9d90;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_emath_insert:hover {
    background: #238b7e;
}

.swp_math {
    display: inline-block;
    padding: 2px 4px;
    margin: 0 2px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    transition: background 0.15s;
}

.swp_math:hover {
    background: #e3f2fd;
}

.swp_math_inline {
    vertical-align: middle;
}

.swp_math_block {
    display: block;
    text-align: center;
    padding: 16px;
    margin: 12px 0;
}

.swp_math_block_wrapper {
    display: block;
    margin: 12px 0;
}

.swp_math_delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #f44336;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    display: none;
}

.swp_math:hover .swp_math_delete {
    display: block;
}

.swp_darkmode_active .swp_emath_input_wrap textarea {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_emath_preview {
    background: #353535;
}

.swp_darkmode_active .swp_emath_helper_buttons button {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_emath_helpers {
    border-color: #404040;
}

.swp_darkmode_active .swp_emath_actions {
    border-color: #404040;
}

.swp_darkmode_active .swp_emath_cancel {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_math:hover {
    background: #2a4a5e;
}

/* ============================================
   DRAWING MODULE (editor-drawing.js)
   ============================================ */

.swp_edraw_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_edraw_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 100001;
}

.swp_edraw_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.swp_edraw_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_edraw_close:hover {
    color: #333;
}

.swp_edraw_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px !important;
}

.swp_edraw_toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 6px;
}

.swp_edraw_tools {
    display: flex;
    gap: 4px;
}

.swp_edraw_tool {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.swp_edraw_tool:hover {
    background: #e8e8e8;
}

.swp_edraw_tool.active {
    background: #2a9d90;
    color: white;
    border-color: #2a9d90;
}

.swp_edraw_separator {
    width: 1px;
    height: 30px;
    background: #ddd;
}

.swp_edraw_colors {
    display: flex;
    align-items: center;
    gap: 6px;
}

.swp_edraw_colors input[type="color"] {
    width: 36px;
    height: 36px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
}

.swp_edraw_color_preset {
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px #ddd;
}

.swp_edraw_color_preset:hover {
    transform: scale(1.1);
}

.swp_edraw_size_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.swp_edraw_size_wrap input[type="range"] {
    width: 80px;
}

.swp_edraw_actions_top {
    display: flex;
    gap: 4px;
}

.swp_edraw_actions_top button {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.swp_edraw_actions_top button:hover {
    background: #e8e8e8;
}

.swp_edraw_canvas_wrap {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: auto;
    background: #e0e0e0;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.swp_edraw_canvas_wrap canvas {
    display: block;
    cursor: crosshair;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.swp_edraw_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.swp_edraw_size_inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.swp_edraw_size_inputs input {
    width: 70px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.swp_edraw_actions {
    display: flex;
    gap: 8px;
}

.swp_edraw_cancel {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_edraw_insert {
    padding: 8px 16px;
    border: none;
    background: #2a9d90;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.swp_drawing_wrapper {
    position: relative;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    margin: 16px auto;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.swp_drawing_wrapper:hover {
    border-color: #2a9d90;
}

.swp_drawing_wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.swp_drawing_wrapper:hover .swp_media_toolbar {
    display: flex;
}

.swp_drawing_resize {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #2a9d90;
    border-radius: 2px;
    display: none;
    z-index: 10;
}

.swp_drawing_resize_nw {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}

.swp_drawing_resize_ne {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.swp_drawing_resize_sw {
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}

.swp_drawing_resize_se {
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}

.swp_drawing_wrapper:hover .swp_drawing_resize {
    display: block;
}

.swp_darkmode_active .swp_edraw_toolbar {
    background: #353535;
}

.swp_darkmode_active .swp_edraw_tool {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_edraw_tool:hover {
    background: #4d4d4d;
}

.swp_darkmode_active .swp_edraw_tool.active {
    background: #2a9d90;
    color: white;
}

/* ============================================
   DOCUMENT TEMPLATES MODULE (editor-doctemplates.js)
   ============================================ */

.swp_edoctemplate_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_edoctemplate_panel {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100001;
}

.swp_edoctemplate_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_edoctemplate_header h2 {
    margin: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.swp_edoctemplate_header h2 i {
    color: #2a9d90;
}

.swp_edoctemplate_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_edoctemplate_close:hover {
    color: #333;
}

.swp_edoctemplate_subtitle {
    padding: 12px 24px;
    margin: 0;
    color: #666;
    font-size: 14px;
    border-bottom: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.swp_edoctemplate_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
}

.swp_edoctemplate_item {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.swp_edoctemplate_item:hover {
    background: #f0f0f0;
    border-color: #2a9d90;
    transform: translateY(-2px);
}

.swp_edoctemplate_icon {
    font-size: 32px;
    color: #2a9d90;
    margin-bottom: 12px;
}

.swp_edoctemplate_name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.swp_edoctemplate_desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.swp_darkmode_active .swp_edoctemplate_modal {
    background: #2d2d2d;
}

.swp_darkmode_active .swp_edoctemplate_header {
    border-color: #404040;
}

.swp_darkmode_active .swp_edoctemplate_header h2 {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_edoctemplate_subtitle {
    background: #353535;
    border-color: #404040;
    color: #aaa;
}

.swp_darkmode_active .swp_edoctemplate_item {
    background: #353535;
}

.swp_darkmode_active .swp_edoctemplate_item:hover {
    background: #404040;
}

.swp_darkmode_active .swp_edoctemplate_name {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_edoctemplate_desc {
    color: #999;
}

/* ============================================
   NEW FEATURES - Version History, Snippets, etc.
   ============================================ */

/* --- VERSION HISTORY --- */
.swp_eversion_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_eversion_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_eversion_modal_content {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.swp_eversion_modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.swp_eversion_modal_title {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
}

.swp_eversion_modal_title i {
    color: #2a9d90;
    font-size: 22px;
}

.swp_eversion_modal_close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.swp_eversion_modal_close:hover {
    background: #e0e0e0;
    color: #333;
}

.swp_eversion_modal_body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background: #f5f5f5;
}

.swp_eversion_modal_body .swp_evcompare {
    display: flex !important;
    gap: 20px;
    width: 100%;
}

.swp_eversion_modal_body .swp_cversion,
.swp_eversion_modal_body .swp_oversion {
    flex: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.swp_eversion_modal_body .swp_cvcontrol,
.swp_eversion_modal_body .swp_ovcontrol {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.swp_eversion_modal_body .swp_ecvinput,
.swp_eversion_modal_body .swp_eovinput {
    padding: 16px;
    max-height: 50vh;
    overflow-y: auto;
}

.swp_eversion_modal_body .swp_evbutton {
    padding: 8px 16px;
    background: #2a9d90;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.swp_eversion_modal_body .swp_evbutton:hover {
    background: #238b7e;
}

.swp_eversion_modal_body .swp_evbutton.la-caret-left,
.swp_eversion_modal_body .swp_evbutton.la-caret-right {
    padding: 8px 12px;
    background: #e0e0e0;
    color: #333;
}

.swp_eversion_modal_body .swp_evbutton.la-caret-left:hover,
.swp_eversion_modal_body .swp_evbutton.la-caret-right:hover {
    background: #d0d0d0;
}

.swp_eversion_modal_body .swp_eovsel {
    margin-left: auto;
}

.swp_eversion_modal_footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.swp_eversion_modal_btn {
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.swp_eversion_modal_btn:hover {
    background: #5a6268;
}

.swp_eversion_modal_btn.primary {
    background: #2a9d90;
}

.swp_eversion_modal_btn.primary:hover {
    background: #238b7e;
}

.swp_eversion_panel {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.swp_eversion_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_eversion_title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_eversion_title i {
    color: #2a9d90;
}

.swp_eversion_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_eversion_close:hover {
    color: #333;
}

.swp_eversion_content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.swp_eversion_save {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.swp_eversion_save input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.swp_eversion_save button {
    padding: 10px 16px;
    background: #2a9d90;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.swp_eversion_save button:hover {
    background: #238b7e;
}

.swp_eversion_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swp_eversion_empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.swp_eversion_empty i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

.swp_eversion_hint {
    font-size: 12px;
    margin-top: 8px;
}

.swp_eversion_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: background 0.2s;
}

.swp_eversion_item:hover {
    background: #f0f0f0;
}

.swp_eversion_item_name {
    font-weight: 500;
    margin-bottom: 4px;
}

.swp_eversion_item_meta {
    font-size: 12px;
    color: #666;
}

.swp_eversion_item_actions {
    display: flex;
    gap: 4px;
}

.swp_eversion_item_actions button {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.swp_eversion_item_actions button:hover {
    background: #e0e0e0;
    color: #333;
}

.swp_eversion_item_actions .swp_eversion_delete:hover {
    background: #fee;
    color: #e53935;
}

/* --- TEXT SNIPPETS --- */
.swp_esnippet_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_esnippet_panel {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.swp_esnippet_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_esnippet_title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_esnippet_title i {
    color: #2a9d90;
}

.swp_esnippet_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_esnippet_tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
}

.swp_esnippet_tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 14px;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.swp_esnippet_tab:hover {
    background: #f5f5f5;
}

.swp_esnippet_tab.active {
    color: #2a9d90;
    border-bottom-color: #2a9d90;
}

.swp_esnippet_content {
    flex: 1;
    overflow-y: auto;
}

.swp_esnippet_tabcontent {
    display: none;
    padding: 16px;
}

.swp_esnippet_tabcontent.active {
    display: block;
}

.swp_esnippet_empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.swp_esnippet_empty i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

.swp_esnippet_search {
    margin-bottom: 12px;
}

.swp_esnippet_search input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.swp_esnippet_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swp_esnippet_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.swp_esnippet_item:hover {
    background: #e8f5f3;
    border-color: #2a9d90;
}

.swp_esnippet_item_main {
    flex: 1;
}

.swp_esnippet_item_name {
    font-weight: 500;
    margin-bottom: 4px;
}

.swp_esnippet_item_shortcode {
    font-size: 11px;
    font-family: monospace;
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 4px;
}

.swp_esnippet_item_preview {
    font-size: 12px;
    color: #666;
}

.swp_esnippet_item_actions {
    display: flex;
    gap: 4px;
}

.swp_esnippet_item_actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
}

.swp_esnippet_form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.swp_esnippet_form label {
    font-weight: 500;
    font-size: 13px;
    color: #555;
}

.swp_esnippet_form input {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.swp_esnippet_form textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.swp_esnippet_form button {
    padding: 12px 20px;
    background: #2a9d90;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- ACCESSIBILITY CHECKER --- */
.swp_ea11y_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_ea11y_panel {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 550px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.swp_ea11y_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_ea11y_title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_ea11y_title i {
    color: #2a9d90;
}

.swp_ea11y_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_ea11y_content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.swp_ea11y_score {
    text-align: center;
    padding: 24px;
    margin-bottom: 20px;
    border-radius: 12px;
}

.swp_ea11y_score.good {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.swp_ea11y_score.warning {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
}

.swp_ea11y_score.poor {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
}

.swp_ea11y_score_value {
    font-size: 48px;
    font-weight: 700;
}

.swp_ea11y_score.good .swp_ea11y_score_value {
    color: #2e7d32;
}

.swp_ea11y_score.warning .swp_ea11y_score_value {
    color: #f57c00;
}

.swp_ea11y_score.poor .swp_ea11y_score_value {
    color: #c62828;
}

.swp_ea11y_score_label {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.swp_ea11y_success {
    text-align: center;
    padding: 20px;
    background: #e8f5e9;
    border-radius: 8px;
    color: #2e7d32;
}

.swp_ea11y_success i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.swp_ea11y_issues {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.swp_ea11y_issue {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
}

.swp_ea11y_issue.error {
    background: #ffebee;
}

.swp_ea11y_issue.warning {
    background: #fff8e1;
}

.swp_ea11y_issue_icon {
    font-size: 20px;
}

.swp_ea11y_issue.error .swp_ea11y_issue_icon {
    color: #c62828;
}

.swp_ea11y_issue.warning .swp_ea11y_issue_icon {
    color: #f57c00;
}

.swp_ea11y_issue_title {
    font-weight: 600;
    margin-bottom: 4px;
}

.swp_ea11y_issue_desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.swp_ea11y_issue_element {
    font-family: monospace;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
}

.swp_ea11y_tips {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 8px;
}

.swp_ea11y_tips h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
}

.swp_ea11y_tips ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #666;
}

.swp_ea11y_tips li {
    margin-bottom: 6px;
}

/* --- WATERMARK --- */
.swp_ewatermark_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

.swp_ewatermark_panel {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    z-index: 100001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.swp_ewatermark_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_ewatermark_title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_ewatermark_title i {
    color: #2a9d90;
}

.swp_ewatermark_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_ewatermark_content {
    padding: 20px;
}

.swp_ewatermark_presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.swp_ewatermark_presets button {
    padding: 12px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.swp_ewatermark_presets button:hover {
    background: #e8f5f3;
    border-color: #2a9d90;
}

.swp_ewatermark_custom {
    margin-bottom: 16px;
}

.swp_ewatermark_custom label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #555;
}

.swp_ewatermark_custom input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.swp_ewatermark_options {
    margin-bottom: 16px;
}

.swp_ewatermark_options label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #555;
}

.swp_ewatermark_options input[type="range"] {
    width: 100%;
}

.swp_ewatermark_actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.swp_ewatermark_remove {
    padding: 10px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.swp_ewatermark_apply {
    padding: 10px 16px;
    border: none;
    background: #2a9d90;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Watermark display on pages */
.swp_has_watermark::before {
    content: var(--watermark-text, "");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 72px;
    font-weight: 700;
    color: rgba(0, 0, 0, var(--watermark-opacity, 0.1));
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}

/* --- SPEECH RECORDING INDICATOR --- */
.swp_espeech_recording {
    animation: swp_pulse_record 1.5s infinite;
}

@keyframes swp_pulse_record {

    0%,
    100% {
        background-color: #e0f2f1;
    }

    50% {
        background-color: #ffcdd2;
    }
}

.swp_espeech_interim {
    background: #e3f2fd;
    padding: 2px 4px;
    border-radius: 3px;
    color: #666;
    font-style: italic;
}

/* --- DARK MODE FOR NEW FEATURES --- */
.swp_darkmode_active .swp_eversion_panel,
.swp_darkmode_active .swp_esnippet_panel,
.swp_darkmode_active .swp_ea11y_panel,
.swp_darkmode_active .swp_ewatermark_panel {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eversion_header,
.swp_darkmode_active .swp_esnippet_header,
.swp_darkmode_active .swp_ea11y_header,
.swp_darkmode_active .swp_ewatermark_header,
.swp_darkmode_active .swp_esnippet_tabs {
    border-color: #404040;
}

.swp_darkmode_active .swp_eversion_item,
.swp_darkmode_active .swp_esnippet_item {
    background: #353535;
}

.swp_darkmode_active .swp_eversion_item:hover,
.swp_darkmode_active .swp_esnippet_item:hover {
    background: #404040;
}

.swp_darkmode_active .swp_eversion_save input,
.swp_darkmode_active .swp_esnippet_search input,
.swp_darkmode_active .swp_esnippet_form input,
.swp_darkmode_active .swp_esnippet_form textarea,
.swp_darkmode_active .swp_ewatermark_custom input {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eversion_item_actions button,
.swp_darkmode_active .swp_esnippet_item_actions button {
    background: #3d3d3d;
    color: #aaa;
}

.swp_darkmode_active .swp_ea11y_tips {
    background: #353535;
}

.swp_darkmode_active .swp_ewatermark_presets button {
    background: #353535;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ewatermark_remove {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_has_watermark::before {
    color: rgba(255, 255, 255, var(--watermark-opacity, 0.1));
}

/* ============================================
   FULLSCREEN MODE
   ============================================ */

.swp_fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    background: white;
}

.swp_fullscreen .swp_seinput_wrapper {
    height: calc(100vh - 120px) !important;
}

.swp_fullscreen_active {
    overflow: hidden !important;
}

/* ============================================
   KEYBOARD SHORTCUTS PANEL
   ============================================ */

.swp_eshortcuts_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100001;
}

.swp_eshortcuts_panel {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.swp_eshortcuts_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.swp_eshortcuts_title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_eshortcuts_title i {
    color: #2a9d90;
}

.swp_eshortcuts_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    line-height: 1;
}

.swp_eshortcuts_close:hover {
    color: #333;
}

.swp_eshortcuts_content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.swp_eshortcuts_category h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #2a9d90;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.swp_eshortcuts_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swp_eshortcuts_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.swp_eshortcuts_keys {
    font-family: monospace;
    font-size: 12px;
    background: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    color: #333;
}

.swp_eshortcuts_desc {
    font-size: 13px;
    color: #666;
}

/* Dark mode for shortcuts */
.swp_darkmode_active .swp_eshortcuts_panel {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eshortcuts_header {
    border-color: #404040;
}

.swp_darkmode_active .swp_eshortcuts_keys {
    background: #404040;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eshortcuts_desc {
    color: #aaa;
}

@media (max-width: 600px) {
    .swp_eshortcuts_content {
        grid-template-columns: 1fr;
    }
}

/* Snippet Selection Section */
.swp_esnippet_selection {
    background: #e8f5e9;
    padding: 12px 16px;
    border-bottom: 1px solid #c8e6c9;
}

.swp_esnippet_selection_header {
    font-weight: 600;
    font-size: 13px;
    color: #2e7d32;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.swp_esnippet_selection_preview {
    background: white;
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    margin-bottom: 10px;
    max-height: 60px;
    overflow: hidden;
    border: 1px solid #c8e6c9;
}

.swp_esnippet_save_selection {
    width: 100%;
    padding: 10px;
    background: #2e7d32;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.swp_esnippet_save_selection:hover {
    background: #1b5e20;
}

.swp_darkmode_active .swp_esnippet_selection {
    background: #1b3320;
    border-color: #2e5930;
}

.swp_darkmode_active .swp_esnippet_selection_preview {
    background: #2d2d2d;
    border-color: #2e5930;
    color: #e0e0e0;
}

/* Watermark - applied to .swp_page wrapper only, NOT page_content */
.swp_has_watermark {
    position: relative;
}

/* Line 1 - 20% from top */
.swp_has_watermark::before {
    content: var(--watermark-text, "") "     " var(--watermark-text, "") "     " var(--watermark-text, "");
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    font-size: 56px;
    font-weight: 700;
    color: rgba(0, 0, 0, var(--watermark-opacity, 0.08));
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000;
}

/* Line 2 - 55% from top */
.swp_has_watermark::after {
    content: var(--watermark-text, "") "     " var(--watermark-text, "") "     " var(--watermark-text, "");
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    font-size: 56px;
    font-weight: 700;
    color: rgba(0, 0, 0, var(--watermark-opacity, 0.08));
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000;
}

/* Dark mode support */
.swp_darkmode_active .swp_has_watermark::before,
.swp_darkmode_active .swp_has_watermark::after {
    color: rgba(255, 255, 255, var(--watermark-opacity, 0.08));
}

/* Text Utilities Panel */
.swp_etextutils_panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 350px;
    max-height: 80vh;
    overflow-y: auto;
}

.swp_etextutils_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 15px;
}

.swp_etextutils_header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}

.swp_etextutils_body {
    padding: 16px;
}

.swp_etextutils_section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.swp_etextutils_section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.swp_etextutils_section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
}

.swp_etextutils_section p {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
}

.swp_etextutils_section button {
    padding: 8px 12px;
    margin: 4px 4px 4px 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.swp_etextutils_section button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.swp_etextutils_section button i {
    margin-right: 4px;
}

/* Dark mode support */
.swp_darkmode_active .swp_etextutils_panel {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_etextutils_header {
    border-color: #444;
}

.swp_darkmode_active .swp_etextutils_section {
    border-color: #444;
}

.swp_darkmode_active .swp_etextutils_section h4 {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_etextutils_section p {
    color: #aaa;
}

.swp_darkmode_active .swp_etextutils_section button {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_etextutils_section button:hover {
    background: #4d4d4d;
}

/* Fix dropdown z-index issues in multipage mode */
.swp_eselect {
    position: relative;
    z-index: 100;
}

.swp_eselect .select_dropdown,
.swp_eselect>.select_dropdown {
    z-index: 10001 !important;
    position: absolute !important;
}

/* Ensure toolbar dropdowns appear above page content */
.swp_editor .swp_ebuttons {
    position: relative;
    z-index: 100;
}

/* Ensure toolbar area has higher stacking context */
.swp_editor .swp_ecommands {
    position: relative;
    z-index: 100;
}

.swp_editor .swp_etoolbar {
    position: relative;
    z-index: 100;
}

/* All dropdown menus should be above multipage content */
.swp_dropdown_menu,
.swp_ezoom_dropdown,
.swp_eai_dropdown,
.swp_epaste_dropdown,
.select_dropdown {
    z-index: 10001 !important;
}

/* Fix multipage wrapper stacking context - must be lower than toolbar */
.swp_seinput_wrapper {
    position: relative;
    z-index: 1;
}

/* Ensure pages are below toolbar dropdowns */
.swp_page {
    z-index: 1;
}

/* Ensure editor input area is below toolbar */
.swp_seinput {
    position: relative;
    z-index: 1;
}


/* Media Embed Panel (Video/Audio) */
.swp_emedia_panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 400px;
    max-width: 500px;
}

.swp_emedia_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

.swp_emedia_header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

.swp_emedia_header button:hover {
    color: #333;
}

.swp_emedia_body {
    padding: 20px;
}

.swp_emedia_section {
    margin-bottom: 15px;
}

.swp_emedia_section label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 13px;
    color: #333;
}

.swp_emedia_section input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.swp_emedia_section input:focus {
    border-color: #2a9d90;
    outline: none;
}

.swp_emedia_actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
}

/* Media tabs */
.swp_emedia_tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.swp_emedia_tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: all 0.2s;
}

.swp_emedia_tab:hover {
    background: #eee;
}

.swp_emedia_tab.active {
    background: white;
    color: #2a9d90;
    font-weight: 500;
}

.swp_emedia_tab_content {
    display: none;
}

.swp_emedia_tab_content.active {
    display: block;
}

.swp_emedia_option {
    margin-top: 10px;
}

.swp_emedia_option label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

.swp_emedia_option input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Media library */
.swp_emedia_library_list {
    max-height: 250px;
    overflow-y: auto;
}

.swp_emedia_library_empty {
    padding: 30px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.swp_emedia_library_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.swp_emedia_library_item:hover {
    background: #f9f9f9;
}

.swp_emedia_library_item.selected {
    background: #e0f2f1;
    border-color: #2a9d90;
}

.swp_emedia_library_thumb {
    width: 60px;
    height: 45px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.swp_emedia_library_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swp_emedia_library_thumb i {
    font-size: 24px;
    color: #999;
}

.swp_emedia_library_info {
    flex: 1;
    min-width: 0;
}

.swp_emedia_library_title {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swp_emedia_library_url {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swp_emedia_library_delete {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
    font-size: 16px;
}

.swp_emedia_library_delete:hover {
    color: #e74c3c;
}

.swp_emedia_actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.swp_emedia_actions button:first-child {
    background: #2a9d90;
    color: white;
}

.swp_emedia_actions button:first-child:hover {
    background: #238b7e;
}

.swp_emedia_actions button:last-child {
    background: #f0f0f0;
    color: #333;
}

.swp_emedia_actions button:last-child:hover {
    background: #e0e0e0;
}

/* Media wrapper in editor */
.swp_emedia_wrapper {
    margin: 15px 0;
    text-align: center;
}

.swp_emedia_wrapper iframe,
.swp_emedia_wrapper video,
.swp_emedia_wrapper audio {
    max-width: 100%;
    border-radius: 4px;
}

/* Dark mode */
.swp_darkmode_active .swp_emedia_panel {
    background: #2d2d2d;
}

.swp_darkmode_active .swp_emedia_header {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_emedia_section label {
    color: #e0e0e0;
}

.swp_darkmode_active .swp_emedia_section input {
    background: #3d3d3d;
    border-color: #555;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_emedia_actions {
    border-color: #555;
}

.swp_darkmode_active .swp_emedia_actions button:last-child {
    background: #3d3d3d;
    color: #e0e0e0;
}

/* Draggable paragraphs in drag & drop mode */
.swp_edragdrop_mode .swp_edraggable_paragraph {
    position: relative;
    cursor: move;
    border: 1px dashed #ccc;
    transition: border-color 0.2s, background-color 0.2s;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 25px;
    padding-right: 5px;
    border-radius: 3px;
}

.swp_edragdrop_mode .swp_edraggable_paragraph:hover {
    border-color: #2a9d90;
    background-color: rgba(42, 157, 144, 0.05);
}

.swp_edragdrop_mode .swp_edraggable_paragraph::before {
    content: '⋮⋮';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 14px;
    cursor: grab;
    user-select: none;
}

.swp_edragdrop_mode .swp_edraggable_paragraph:hover::before {
    color: #2a9d90;
}

.swp_edragdrop_mode .swp_edraggable_paragraph.swp_edragging {
    opacity: 0.5;
    border-color: #2a9d90;
    background-color: rgba(42, 157, 144, 0.1);
}

/* Dark mode */
.swp_darkmode_active .swp_edragdrop_mode .swp_edraggable_paragraph {
    border-color: #555;
}

.swp_darkmode_active .swp_edragdrop_mode .swp_edraggable_paragraph:hover {
    border-color: #4ecdc4;
    background-color: rgba(78, 205, 196, 0.1);
}

.swp_darkmode_active .swp_edragdrop_mode .swp_edraggable_paragraph::before {
    color: #888;
}

.swp_darkmode_active .swp_edragdrop_mode .swp_edraggable_paragraph:hover::before {
    color: #4ecdc4;
}

/* Text Utilities Error Message */
.swp_etextutils_error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.swp_etextutils_error::before {
    content: '⚠';
    font-size: 16px;
}

/* Dark mode */
.swp_darkmode_active .swp_etextutils_error {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* ============================================================================
   IMAGE MODAL OVERLAY (wraps existing image panel)
   ============================================================================ */

.swp_eimage_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.swp_eimage_modal_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Make the panel inside the modal fill it properly */
.swp_eimage_modal_panel .swp_eimage_panel {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

.swp_eimage_modal_panel .swp_eimage_panel_header {
    flex-shrink: 0;
}

.swp_eimage_modal_panel .swp_eimage_tabs {
    flex-shrink: 0;
}

.swp_eimage_modal_panel .swp_eimage_content {
    flex: 1;
    overflow-y: auto;
    min-height: 150px;
}

.swp_eimage_modal_panel .swp_eimage_preview_container {
    flex-shrink: 0;
    max-height: 280px;
    overflow-y: auto;
}

.swp_eimage_modal_panel .swp_eimage_buttons {
    flex-shrink: 0;
}

.swp_eimage_modal_panel .swp_eimage_tabs {
    flex-shrink: 0;
}

.swp_eimage_modal_panel .swp_eimage_content {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
}

.swp_eimage_modal_panel .swp_eimage_preview_container {
    flex-shrink: 0;
    max-height: 200px;
    overflow-y: auto;
}

.swp_eimage_modal_panel .swp_eimage_preview_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swp_eimage_modal_panel .swp_eimage_preview_item {
    width: 70px;
    height: 70px;
}

.swp_eimage_modal_panel .swp_eimage_buttons {
    flex-shrink: 0;
    padding: 15px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

.swp_eimage_modal_panel .swp_eimage_dropzone {
    margin: 15px;
    padding: 40px 20px;
}

/* Dark mode support */
.swp_darkmode_active .swp_eimage_modal_panel {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_eimage_modal_panel .swp_eimage_panel_header {
    background: #1a1a1a;
    border-color: #444;
}

.swp_darkmode_active .swp_eimage_modal_panel .swp_eimage_buttons {
    background: #1a1a1a;
    border-color: #444;
}

/* ============================================================================
   CODE BLOCK DIALOG
   ============================================================================ */

.swp_ecodeblock_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swp_ecodeblock_panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 450px;
    overflow: hidden;
}

.swp_ecodeblock_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 16px;
}

.swp_ecodeblock_close {
    cursor: pointer;
    font-size: 24px;
    color: #666;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.swp_ecodeblock_close:hover {
    background: #e0e0e0;
}

.swp_ecodeblock_body {
    padding: 20px;
}

.swp_ecodeblock_options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.swp_ecodeblock_option {
    cursor: pointer;
}

.swp_ecodeblock_option input[type="radio"] {
    display: none;
}

.swp_ecodeblock_option_content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
}

.swp_ecodeblock_option input:checked+.swp_ecodeblock_option_content {
    border-color: #2a9d90;
    background: #f0faf9;
}

.swp_ecodeblock_option_icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 8px;
    font-size: 20px;
    color: #666;
}

.swp_ecodeblock_option input:checked+.swp_ecodeblock_option_content .swp_ecodeblock_option_icon {
    background: #2a9d90;
    color: white;
}

.swp_ecodeblock_option_text {
    flex: 1;
}

.swp_ecodeblock_option_text strong {
    display: block;
    margin-bottom: 2px;
}

.swp_ecodeblock_option_text span {
    font-size: 12px;
    color: #666;
}

.swp_ecodeblock_field {
    margin-bottom: 15px;
}

.swp_ecodeblock_field label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.swp_ecodeblock_field select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.swp_ecodeblock_footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

.swp_ecodeblock_btn_cancel,
.swp_ecodeblock_btn_insert {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.swp_ecodeblock_btn_cancel {
    background: #e0e0e0;
    color: #333;
}

.swp_ecodeblock_btn_cancel:hover {
    background: #d0d0d0;
}

.swp_ecodeblock_btn_insert {
    background: #2a9d90;
    color: white;
}

.swp_ecodeblock_btn_insert:hover {
    background: #238b7e;
}

/* Language label on code blocks */
.swp_ecodeblock_lang {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 8px;
    font-size: 10px;
    color: #999;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 4px 0 4px;
    text-transform: uppercase;
}

/* Inline code styling */
.swp_einlinecode {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    color: #c7254e;
    border: 1px solid #e0e0e0;
}

/* Dark mode */
.swp_darkmode_active .swp_ecodeblock_panel {
    background: #2d2d2d;
    color: #e0e0e0;
}

.swp_darkmode_active .swp_ecodeblock_header,
.swp_darkmode_active .swp_ecodeblock_footer {
    background: #1a1a1a;
    border-color: #444;
}

.swp_darkmode_active .swp_ecodeblock_option_content {
    border-color: #444;
}

.swp_darkmode_active .swp_ecodeblock_option input:checked+.swp_ecodeblock_option_content {
    background: #1a3a36;
}

.swp_darkmode_active .swp_einlinecode {
    background: #3d3d3d;
    border-color: #555;
    color: #f8b4b4;
}

/* Library Preview Area */
.swp_eimage_library_preview {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.swp_eimage_upload_preview {
    padding: 15px;
}