.tool-page {
    min-height:100vh;
    padding-top:calc(var(--nav-height) + 40px);
    padding-bottom:80px;
}
.tool-container {
    max-width: var(--container-max);
    margin:0 auto;
    padding:0 24px;
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:32px;
    font-size:13px;
}
.breadcrumb a {
    color:var(--text-tertiary);
    transition:var(--transition-fast);
}
.breadcrumb a:hover {
    color:var(--text-primary);
}
.breadcrumb svg {
    color:var(--text-muted);
    flex-shrink:0;
}
.breadcrumb span {
    color:var(--text-secondary);
}
.tool-header {
    text-align:center;
    margin-bottom:40px;
}
.tool-page-icon {
    width:72px;
    height:72px;
    border-radius:var(--border-radius-lg);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}
.tool-header h1 {
    font-family:var(--font-display);
    font-size:32px;
    font-weight:800;
    margin-bottom:8px;
}
.tool-header p {
    font-size:16px;
    color:var(--text-secondary);
    max-width:480px;
    margin:0 auto;
}
.upload-area {
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-xl);
    padding:60px 40px;
    text-align:center;
    cursor:pointer;
    transition:var(--transition-base);
    background:var(--glass-bg);
    backdrop-filter:blur(12px);
    position:relative;
    overflow:hidden;
}
.upload-area::before {
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-primary);
    opacity:0;
    transition:var(--transition-base);
}
.upload-area:hover,
.upload-area.drag-over {
    border-color:var(--accent-primary);
    background:rgba(99,102,241,0.05);
}
.upload-area:hover::before,
.upload-area.drag-over::before {
    opacity:0.03;
}
.upload-content {
    position:relative;
    z-index:1;
}
.upload-icon {
    color:var(--text-tertiary);
    margin-bottom:16px;
    transition:var(--transition-base);
}
.upload-area:hover.upload-icon {
    color:var(--accent-primary);
    transform:translateY(-4px);
}
.upload-content h3 {
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
}
.upload-content p {
    font-size:14px;
    color:var(--text-secondary);
    margin-bottom:16px;
}
.upload-formats {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}
.format-badge {
    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--accent-primary);
    background:rgba(99,102,241,0.1);
    border:1px solid rgba(99,102,241,0.2);
    border-radius:var(--border-radius-sm);
}
.upload-limit {
    font-size:13px;
    color:var(--text-muted);
}
.compression-options {
    margin-top:24px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    display:flex;
    flex-direction:column;
    gap:16px;
}
.option-section {
    margin-bottom:15px;
}
.option-section label {
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:8px;
}
.option-section label span {
    color:var(--text-primary);
    font-weight:700;
}
.preset-selector {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}
.preset-btn {
    padding:10px 6px;
    border:1px dashed var(--glass-border);
    border-radius:var(--border-radius-sm);
    background:var(--glass-bg);
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    transition:var(--transition-base);
    text-align:center;
}
.preset-btn:hover {
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
.preset-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:#fff;
}
.mode-selector {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}
.mode-btn {
    padding:10px 6px;
    border:1px dashed var(--glass-border);
    border-radius:var(--border-radius-sm);
    background:var(--glass-bg);
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    transition:var(--transition-base);
    text-align:center;
}
.mode-btn:hover {
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
.mode-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:#fff;
}
input[type="range"] {
    width:100%;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    background:var(--bg-tertiary);
    border-radius:20px;
    border:1px solid var(--glass-border);
    outline:none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-primary);
    cursor:pointer;
    border:2px solid var(--bg-card);
    box-shadow:0 0 6px rgba(99,102,241,0.4);
}
input[type="range"]::-moz-range-thumb {
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-primary);
    cursor:pointer;
    border:2px solid var(--bg-card);
}
.checkbox-label {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:12px;
    color:var(--text-secondary);
    user-select:none;
}
.checkbox-label input[type="checkbox"] {
    width:14px;
    height:14px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.slider-labels {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:var(--text-muted);
    margin-top:4px;
}
.file-list {
    margin-top:24px;
}
.file-list-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}
.file-list-header h3 {
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
}
.btn-sm {
    padding:6px 14px;
    font-size:13px;
}
.file-items {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:24px;
}
.file-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    backdrop-filter:blur(12px);
    transition:var(--transition-base);
    cursor:grab;
}
.file-item:active {
    cursor:grabbing;
}
.file-item:hover {
    border-color:var(--glass-border-hover);
}
.file-item.dragging {
    opacity:0.5;
    border-color:var(--accent-primary);
}
.file-item-icon {
    width:40px;
    height:40px;
    border-radius:var(--border-radius-sm);
    background:rgba(99,102,241,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-primary);
    flex-shrink:0;
}
.file-item-thumb {
    width:40px;
    height:40px;
    border-radius:var(--border-radius-sm);
    overflow:hidden;
    flex-shrink:0;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
}
.file-item-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.file-item-info {
    flex:1;
    min-width:0;
}
.file-item-name {
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.file-item-size {
    font-size:12px;
    color:var(--text-tertiary);
}
.file-item-order {
    font-family:var(--font-display);
    font-size:12px;
    font-weight:700;
    color:var(--text-muted);
    width:24px;
    text-align:center;
}
.file-item-remove {
    width:32px;
    height:32px;
    border-radius:var(--border-radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-tertiary);
    transition:var(--transition-fast);
    flex-shrink:0;
}
.file-item-remove:hover {
    background:rgba(244,63,94,0.1);
    color:#f43f5e;
}
.file-list-actions {
    display:flex;
    gap:12px;
    margin-top:20px;
}
.compression-results {
    margin-top:24px;
}
.results-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
    flex-wrap:wrap;
    gap:12px;
}
.results-header h3 {
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.total-savings {
    font-size:14px;
    font-weight:600;
    color:var(--accent-primary);
    background:rgba(99,102,241,0.1);
    padding:4px 12px;
    border-radius:var(--border-radius-sm);
    margin-bottom:20px;
}
.results-actions {
    display:flex;
    gap:8px;
}
.edit-page-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;
    margin:16px 0;
    padding:16px;
    border-radius:var(--border-radius-md);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
}
.edit-page-thumb {
    position:relative;
    border-radius:var(--border-radius-sm);
    overflow:hidden;
    border:2px solid transparent;
    transition:border-color 0.2s,opacity 0.2s;
    cursor:pointer;
}
.edit-page-thumb.selected {
    border-color:var(--accent-primary);
}
.edit-page-thumb.deleted {
    opacity:0.3;
    border-color:#ef4444;
}
.edit-page-thumb img {
    width:100%;
    display:block;
}
.edit-page-num {
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
}
.edit-page-delete {
    position:absolute;
    top:4px;
    right:4px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(239,68,68,0.9);
    color:#fff;
    border:none;
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:14px;
    line-height:1;
}
.edit-page-thumb:hover.edit-page-delete {
    display:flex;
}
.edit-page-thumb.deleted.edit-page-delete {
    display:flex;
    background:rgba(34,197,94,0.9);
}
.results-items {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
}
.result-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    backdrop-filter:blur(12px);
    transition:var(--transition-base);
}
.result-item:hover {
    border-color:var(--glass-border-hover);
}
.result-icon {
    width:44px;
    height:44px;
    border-radius:var(--border-radius-sm);
    background:rgba(34,197,94,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#22c55e;
    flex-shrink:0;
}
.result-info {
    flex:1;
    min-width:0;
}
.result-name {
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:4px;
}
.result-sizes {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    flex-wrap:wrap;
}
.size-original {
    color:var(--text-tertiary);
    text-decoration:line-through;
}
.size-compressed {
    color:var(--text-primary);
    font-weight:600;
}
.savings-badge {
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    font-size:11px;
    font-weight:700;
    border-radius:var(--border-radius-sm);
}
.savings-good {
    color:#22c55e;
    background:rgba(34,197,94,0.12);
}
.savings-ok {
    color:#f59e0b;
    background:rgba(245,158,11,0.12);
}
.savings-minimal {
    color:var(--text-tertiary);
    background:var(--glass-bg);
}
.result-error {
    margin-top:6px;
    font-size:12px;
    color:#ef4444;
    word-break:break-word;
}
.download-btn {
    flex-shrink:0;
}
.tool-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:48px;
    margin-bottom:48px;
}
.tool-feature {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
}
.tool-feature svg {
    flex-shrink:0;
    margin-top:2px;
}
.tool-feature strong {
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:2px;
}
.tool-feature span {
    font-size:12px;
    color:var(--text-tertiary);
}
.how-to-section {
    margin-top:48px;
}
.how-to-section h2 {
    font-family:var(--font-display);
    font-size:24px;
    font-weight:700;
    margin-bottom:32px;
    text-align:center;
}
.how-to-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.how-step {
    text-align:center;
    padding:24px;
    background: var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    position: relative;
}
.how-step-num {
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--gradient-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    color:white;
    margin:0 auto 16px;
    position: absolute;
    top: 300px;
    left: 45%;
}
.how-step h4 {
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    margin-bottom:8px;
}
.how-step p {
    font-size:13px;
    color:var(--text-secondary);
    line-height:1.6;
}
.how-step-media {
    width:100%;
    height: 300px;
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-md);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-tertiary);
    font-size:13px;
    text-align:center;
    padding: 12px 12px 0 12px;
    margin-bottom:20px;
}
.how-step-tip {
    margin-top:14px;
    padding:10px 14px;
    background:rgba(255,152,0,0.08);
    border-radius: 6px;
    font-size:13px;
    color:var(--accent-primary);
    text-align:left;
    line-height:1.6;
    border: 1px dashed #f59e0b;
}
@media(max-width:1024px) {
    .preset-selector {
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:768px) {
    .tool-features {
        grid-template-columns:1fr;
    }
    .how-to-steps {
        grid-template-columns:1fr;
    }
    .upload-area {
        padding:40px 24px;
    }
    .tool-header h1 {
        font-size:24px;
    }
    .file-list-actions {
        flex-direction:column;
    }
    .preset-selector {
        grid-template-columns:1fr;
    }
    .mode-selector {
        grid-template-columns:1fr;
    }
    .results-header {
        flex-direction:column;
        align-items:flex-start;
    }
    .results-actions {
        width:100%;
    }
    .results-actions.btn {
        flex:1;
    }
}
.editor-shell {
    position:fixed;
    inset:0;
    z-index:1500;
    background:var(--bg-primary);
    display:flex;
    flex-direction:column;
}
.editor-topbar {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    height:52px;
    background:var(--bg-secondary);
    border-bottom:1px solid var(--glass-border);
    z-index:10;
    flex-shrink:0;
    direction:ltr;
}
.editor-topbar-left {
    display:flex;
    align-items:center;
    gap:12px;
}
.editor-topbar-btn {
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.15s;
}
.editor-topbar-btn:hover {
    background:#ff9800;
    color:#fff;
    border:1px dashed#ccc;
}
.editor-topbar-btn.ce-topbar-rail {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:44px;
    padding:4px 0 2px;
    border:none;
    background:transparent;
}
.editor-topbar-btn.ce-topbar-rail:hover {
    background:transparent;
    color:var(--text-primary);
    border:none;
}
.editor-topbar-btn.ce-topbar-rail:active,
.editor-topbar-btn.ce-topbar-rail.active {
    background:rgba(99,102,241,0.1);
    color:#6366f1;
    border:none;
}
.editor-topbar-btn.ce-topbar-rail:active svg,
.editor-topbar-btn.ce-topbar-rail.active svg {
    color:#6366f1;
}
.editor-topbar-btn.ce-topbar-rail svg {
    width:16px;
    height:16px;
}
.editor-topbar-btn.ce-topbar-rail span {
    font-size:8px;
    line-height:1;
    letter-spacing:0.02em;
    opacity:0.7;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}
.editor-topbar-left .ce-rail-divider {
    width:1px;
    height:24px;
    background:var(--glass-border);
    margin:0 2px;
    border-radius:1px;
}
.editor-topbar-left #editorNewBtn {
    margin-inline-start:10px;
}
.editor-file-info {
    display:flex;
    align-items:center;
    gap:8px;
}
.editor-file-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:6px;
    background:rgba(255,152,0,0.1);
    color:#ff9800;
}
.editor-topbar-name {
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.editor-zoom-btn {
    width:26px;
    height:26px;
    border:none;
    border-radius:6px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
    display:flex;
    align-items:center;
    justify-content:center;
}
.editor-zoom-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}
.editor-zoom-level {
    font-size:11px;
    font-weight:600;
    color:var(--text-primary);
    min-width:40px;
    text-align:center;
    font-variant-numeric:tabular-nums;
}
.editor-zoom-divider {
    width:1px;
    height:20px;
    background:var(--glass-border);
    margin:0 2px;
}
.editor-topbar-right {
    display:flex;
    align-items:center;
    gap:12px;
}
.editor-topbar-center {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}
.editor-page-indicator {
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    font-size:12px;
    font-weight:500;
    color:var(--text-secondary);
}
.editor-page-indicator span {
    font-variant-numeric:tabular-nums;
}
.editor-page-nav-btn {
    width:30px;
    height:30px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
}
.editor-page-nav-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}
.editor-topbar-right .editor-topbar-btn {
    padding:5px 10px;
    font-size:11px;
}
.editor-save-btn {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    font-weight:600;
    padding:5px 12px!important;
    border-radius:8px!important;
}
.editor-save-btn:hover {
    opacity:0.9;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(255,152,0,0.4);
}
.editor-save-menu {
    position:relative;
}
.editor-save-menu .editor-save-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    position:relative;
}
.btn-progress-ring {
    width:16px;
    height:16px;
    flex:none;
    transform:rotate(-90deg);
}
.btn-progress-track {
    fill:none;
    stroke:var(--glass-border);
    stroke-width:2;
}
.btn-progress-fill {
    fill:none;
    stroke:var(--accent-primary);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:43.98;
    stroke-dashoffset:43.98;
    transition:stroke-dashoffset 0.25s ease;
}
.process-btn {
    position:relative;
    overflow:hidden;
}
.process-btn.is-busy {
    pointer-events:none;
    opacity:0.9;
}
.process-btn.is-busy svg:not(.btn-progress-ring) {
    display:none;
}
.process-btn .btn-progress-ring[hidden] {
    display:none;
}
.process-btn span[data-i18n] {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.process-btn[data-i18n] {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.process-btn .btn-progress-track {
    stroke:rgba(255,255,255,0.35);
}
.process-btn .btn-progress-fill {
    stroke:#ffffff;
}
.editor-save-btn.exporting {
    pointer-events:none;
    opacity:0.9;
}
.editor-save-btn.exporting .editor-save-icon,
.editor-save-btn.exporting .editor-save-caret {
    display:none;
}
.editor-save-menu .editor-save-caret {
    transition:transform 0.15s;
}
.editor-save-menu.open .editor-save-caret {
    transform:rotate(180deg);
}
.editor-save-dropdown {
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:200px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
    padding:6px;
    display:none;
    z-index:120;
}
.editor-save-dropdown.open {
    display:block;
}
.editor-save-dropdown-item {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 10px;
    border:none;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    font-size:12.5px;
    font-weight:500;
    color:var(--text-primary);
    text-align:left;
    white-space:nowrap;
}
.editor-save-dropdown-item:hover {
    background:var(--bg-tertiary);
}
.editor-save-dropdown-item svg {
    color:var(--text-secondary);
    flex-shrink:0;
}
.editor-save-dropdown-item:hover svg {
    color:var(--text-primary);
}
.editor-save-dropdown-divider {
    height:1px;
    background:var(--glass-border);
    margin:5px 6px;
}
.editor-save-dropdown-option {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:12.5px;
    font-weight:500;
    color:var(--text-primary);
    white-space:nowrap;
}
.editor-save-dropdown-option:hover {
    background:var(--bg-tertiary);
}
.editor-save-dropdown-option input[type="checkbox"] {
    margin:0;
    accent-color:var(--accent, #5b6cff);
    cursor:pointer;
    flex-shrink:0;
}
.editor-body {
    display:flex;
    flex:1;
    overflow:hidden;
    direction:ltr;
}
.editor-sidebar {
    width:250px;
    background:var(--bg-secondary);
    border-left:1px solid var(--glass-border);
    overflow-y:auto;
    flex-shrink:0;
    padding:16px 0;
    height:100%;
}
.editor-sidebar-section {
    padding:0 16px;
    margin-bottom:4px;
}
.editor-sidebar-main {
    flex:1;
    min-height:0;
    overflow-y:auto;
}
.editor-sidebar-title {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    font-weight:700;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.8px;
    margin-bottom:10px;
}
.editor-sidebar-divider {
    height:1px;
    background:var(--glass-border);
    margin:12px 16px;
}
.editor-info-grid {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.editor-info-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    padding:6px 10px;
    background:var(--glass-bg);
    border-radius:6px;
}
.editor-info-label {
    color:var(--text-tertiary);
    font-weight:400;
}
.editor-info-value {
    font-weight:600;
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
}
.editor-tool-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
}
.editor-tool-btn {
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    font-size:11px;
    font-weight:500;
    transition:all 0.15s;
    text-align:left;
}
.editor-tool-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border-color:rgba(255,255,255,0.12);
}
.editor-tool-btn.active {
    background:rgba(255,152,0,0.1);
    border-color:rgba(255,152,0,0.4);
    color:#ff9800;
}
.editor-tool-btn.active svg {
    stroke:#ff9800;
}
.editor-control-group {
    margin-bottom: 22px;
}
.editor-ctrl-cols > .editor-control-group {
    margin-bottom:0;
}
.editor-ctrl-cols {
    display:flex;
    gap:12px;
    margin-bottom: 15px;
}
.editor-ctrl-col {
    flex:1;
    min-width:0;
}
.ce-style-rows {
    flex-wrap:wrap;
}
.ce-style-rows > .editor-ctrl-col {
    flex:1 1 calc(50% - 6px);
}
#fillColorGroup { order:1; }
#cellColorGroup { order:2; }
#strokeColorGroup { order:3; }
#strokeWidthGroup { order:4; }
#opacityGroup { order:5; }
#borderRadiusGroup { order:6; }
#headSizeGroup { order:7; }
#tailSizeGroup { order:8; }
#measureFontGroup { order:9; }
#headColorGroup { order:10; }
#tailColorGroup { order:11; }
#measureColorGroup { order:12; }
.editor-ctrl-label {
    display:block;
    font-size:11px;
    font-weight:500;
    color:var(--text-tertiary);
    margin-bottom:6px;
}
.editor-text-input {
    width:100%;
    padding:7px 10px;
    font-size:12px;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    transition:border-color 0.15s;
    height: 30px;
}
.editor-text-input:focus {
    border-color:var(--accent-primary);
}
.editor-text-input::placeholder {
    color:var(--text-tertiary);
}
.editor-ctrl-hint {
    margin:6px 0 0;
    font-size:11px;
    color:var(--text-tertiary);
    line-height:1.4;
}
.ce-font-picker {
    position:relative;
    width:100%;
}
.ce-font-trigger {
    width:100%;
    padding:7px 28px 7px 10px;
    font-size:12px;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    cursor:pointer;
    transition:border-color 0.15s;
    height: 30px;
}
.ce-font-trigger:hover, .ce-font-trigger:focus {
    border-color:var(--accent-primary);
}
.ce-font-trigger::after {
    content:'';
    position:absolute;
    right:11px;
    top:50%;
    width:8px;
    height:8px;
    border-right:1.5px solid var(--text-tertiary);
    border-bottom:1.5px solid var(--text-tertiary);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
}
.ce-font-picker.open .ce-font-trigger::after {
    transform:translateY(-30%) rotate(225deg);
}
.ce-font-popup {
    position:fixed;
    z-index:1200;
    width:270px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:8px;
    box-shadow:var(--shadow-lg);
    padding:6px;
}
.ce-font-search {
    width:100%;
    padding:6px 9px;
    font-size:12px;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    margin-bottom:6px;
}
.ce-font-search:focus {
    border-color:var(--accent-primary);
}
.ce-font-list {
    max-height:250px;
    overflow-y:auto;
}
.ce-font-item {
    display:block;
    width:100%;
    padding:7px 9px;
    font-size:14px;
    color:var(--text-secondary);
    background:none;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing:border-box;
}
.ce-font-item:hover {
    color:var(--text-primary);
    background:var(--glass-bg);
}
.ce-font-item.active {
    color:var(--accent-primary);
    background:rgba(99,102,241,0.08);
}
.ce-font-empty {
    padding:10px 9px;
    font-size:12px;
    color:var(--text-tertiary);
    text-align:center;
}
[dir="rtl"] .ce-font-trigger {
    text-align:right;
    padding:7px 10px 7px 28px;
}
[dir="rtl"] .ce-font-trigger::after {
    right:auto;
    left:11px;
}
[dir="rtl"] .ce-font-item {
    text-align:right;
}
.ce-chart-editor,
.ce-chart-colors {
    display:flex;
    flex-direction:column;
    gap: 10px;
    margin-bottom: 10px;
}
.ce-chart-data-head {
    display:grid;
    grid-template-columns:1fr 1fr 24px;
    gap:4px;
    font-size:10px;
    font-weight:600;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.4px;
}
.ce-chart-data-table {
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ce-chart-row {
    display:grid;
    grid-template-columns:1fr 1fr 24px;
    gap:4px;
    align-items:center;
}
.ce-chart-cell {
    width:100%;
    padding:6px 8px;
    font-size:12px;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
}
.ce-chart-cell:focus {
    border-color:var(--accent-primary);
}
.ce-chart-row-del,
.ce-chart-color-del {
    width: 20px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:6px;
    color:var(--text-tertiary);
    cursor:pointer;
    transition:all 0.15s;
    font-size:14px;
    line-height:1;
}
.ce-chart-row-del:hover,
.ce-chart-color-del:hover {
    color:#ef4444;
    background:rgba(239,68,68,0.1);
}
.ce-chart-add-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 10px;
    font-size:11px;
    font-weight:600;
    color:var(--text-secondary);
    background:var(--bg-tertiary);
    border:1px dashed var(--glass-border);
    border-radius:6px;
    cursor:pointer;
    transition:all 0.15s;
}
.ce-chart-add-btn:hover {
    border-color:#ff9800;
    color:#ff9800;
    background:rgba(255,152,0,0.06);
}
.ce-chart-colors-list {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.ce-chart-color-item {
    display:flex;
    align-items:center;
    gap:2px;
}
.ce-chart-color-input {
    width:28px;
    height:28px;
    padding: 0;
    border: none;
    border-radius:6px;
    background: none;
    cursor:pointer;
}
.ce-chart-color-input::-webkit-color-swatch-wrapper {
    padding:0;
}
.ce-chart-color-input::-webkit-color-swatch {
    border:none;
    border-radius:6px;
}
.ce-table-cells {
    display:grid;
    gap:4px;
}
.ce-table-cell {
    min-width:0;
    padding:6px 6px;
    text-align:center;
}
.ce-table-cell-head {
    font-weight:600;
    background:rgba(99,102,241,0.08);
}
.ce-table-cell-active {
    border-color:var(--accent-primary,#6366f1);
    box-shadow:0 0 0 1px var(--accent-primary,#6366f1);
}
#tableCellAllBtn {
    width:100%;
    height:30px;
    margin-top:0;
    justify-content:center;
    font-size:11px;
}
#tableGroup .editor-ctrl-cols {
    margin-top:10px;
}
.ce-cell-highlight {
    position:absolute;
    outline:2px solid var(--accent-primary,#6366f1);
    outline-offset:-1px;
    box-sizing:border-box;
    pointer-events:none;
    z-index:5;
}
.editor-color-row {
    display:flex;
    gap:8px;
    align-items:center;
}
.editor-color-pick {
    width:36px;
    height:28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:transparent;
    cursor:pointer;
}
.editor-color-pick::-webkit-color-swatch-wrapper {
    padding:2px;
}
.editor-color-pick::-webkit-color-swatch {
    border:none;
    border-radius:4px;
}
#chartGroup .editor-color-pick {
    width:100%;
    height:30px;
}
#chartGroup .editor-color-row {
    gap:0;
}
.editor-color-hex {
    font-size:11px;
    font-family:'SF Mono','Consolas',monospace;
    color:var(--text-tertiary);
}
.editor-slider-row {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
}
.editor-slider {
    flex:1;
    -webkit-appearance:none;
    height:4px;
    border-radius:2px;
    background:var(--glass-border);
    outline:none;
}
.editor-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ff9800;
    cursor:pointer;
    border:2px solid var(--bg-secondary);
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.editor-slider-val {
    font-size:11px;
    font-weight:600;
    color:var(--text-secondary);
    min-width:32px;
    text-align:right;
    font-variant-numeric:tabular-nums;
}
.editor-shape-btns {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}
.editor-shape-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width: 28px;
    height: 28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius: 4px;
    background: var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:border-color.15s,color.15s,background.15s;
}
.editor-shape-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.editor-shape-btn.active {
    border-color:var(--accent-primary);
    background:var(--accent-primary);
    color:#fff;
}
.editor-shape-btn svg {
    width:18px;
    height:18px;
    display:block;
}
.editor-action-row {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.editor-action-divider {
    width:1px;
    height:28px;
    background:var(--glass-border);
    margin:0 2px;
    align-self:center;
}
.editor-action-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width: 28px;
    height: 28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.editor-action-btn:hover:not(:disabled) {
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border-color:rgba(255,255,255,0.15);
}
.editor-action-btn:disabled {
    opacity:0.3;
    cursor:not-allowed;
}
.editor-action-danger:hover:not(:disabled) {
    background:rgba(239,68,68,0.15);
    color:#ef4444;
    border-color:rgba(239,68,68,0.3);
}
.editor-pages-area {
    position:relative;
    flex:1;
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    grid-template-rows:20px minmax(0,1fr);
    grid-template-areas:"corner h" "v scroll";
    overflow:hidden;
    min-width:0;
}
.ce-ruler-corner {
    grid-area:corner;
    position:relative;
    z-index:6;
    background:var(--bg-secondary);
    border-right:1px solid var(--glass-border);
    border-bottom:1px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
}
.ce-clear-guides {
    width:14px;
    height:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:4px;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    padding:0;
    transition:all 0.15s;
}
.ce-clear-guides:hover {
    background:rgba(239,68,68,0.15);
    color:#ef4444;
}
.ce-ruler {
    position:relative;
    overflow:hidden;
    background:var(--bg-secondary);
    z-index:5;
    user-select:none;
    cursor:crosshair;
    touch-action:none;
}
.ce-ruler-h {
    grid-area:h;
    border-bottom:1px solid var(--glass-border);
}
.ce-ruler-v {
    grid-area:v;
    border-right:1px solid var(--glass-border);
}
.ce-ruler-tick {
    position:absolute;
    background:var(--text-muted);
    opacity:0.5;
    pointer-events:none;
}
.ce-ruler-h .ce-ruler-tick { top:0; width:1px; height:5px; }
.ce-ruler-h .ce-ruler-tick.ce-ruler-tick-maj { height:9px; }
.ce-ruler-v .ce-ruler-tick { left:0; height:1px; width:5px; }
.ce-ruler-v .ce-ruler-tick.ce-ruler-tick-maj { width:9px; }
.ce-ruler-num {
    position:absolute;
    font-size:9px;
    line-height:9px;
    color:var(--text-muted);
    pointer-events:none;
    white-space:nowrap;
}
.ce-ruler-h .ce-ruler-num { top:2px; transform:translateX(3px); }
.ce-ruler-v .ce-ruler-num { left:4px; transform:translateY(-3px); }
.ce-ruler-readout {
    position:absolute;
    z-index:6;
    pointer-events:none;
}
.ce-ruler-readout-h {
    top:0;
    bottom:0;
    width:1px;
    background:#38bdf8;
}
.ce-ruler-readout-v {
    left:0;
    right:0;
    height:1px;
    background:#38bdf8;
}
.ce-ruler-readout .ce-ruler-readout-num {
    position:absolute;
    background:#38bdf8;
    color:#fff;
    font-size:9px;
    line-height:12px;
    padding:0 3px;
    border-radius:3px;
    white-space:nowrap;
}
.ce-ruler-readout-h .ce-ruler-readout-num { top:3px; left:2px; transform:translateX(-50%); }
.ce-ruler-readout-v .ce-ruler-readout-num { top:2px; left:4px; transform:translateY(-50%); }
.editor-pages-scroll {
    grid-area:scroll;
    flex:1;
    overflow-y:auto;
    padding: 24px 24px 0px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--glass-bg);
    background-image:radial-gradient(circle,var(--glass-border)1px,transparent 1px);
    background-size:20px 20px;
    min-width:0;
}
[data-theme="dark"].editor-pages-scroll {
    background-color:#1a1a1a;
    background-image:radial-gradient(circle,rgba(255,255,255,0.03)1px,transparent 1px);
}
[data-theme="dark"].editor-pages-scroll {
    background-color:#1a1a1a;
    background-image:radial-gradient(circle,rgba(255,255,255,0.03)1px,transparent 1px);
}
.editor-thumb-wrapper {
    display:flex;
    flex-shrink:0;
    height:100%;
    position:relative;
}
.editor-thumb-panel {
    width:250px;
    background:var(--bg-secondary);
    border-right:1px solid var(--glass-border);
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    height:100%;
}
.editor-thumb-toggle {
    position:absolute;
    right: -48px;
    top: 40px;
    transform:translateY(-50%);
    z-index:20;
    width:28px;
    height:28px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    color:var(--text-tertiary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
}
.editor-thumb-toggle:hover {
    color:var(--text-primary);
    background:var(--bg-tertiary);
}
.editor-thumb-header {
    display:flex;
    align-items:center;
    gap:6px;
    padding:12px 14px;
    font-size:10px;
    font-weight:700;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.8px;
    border-bottom:1px solid var(--glass-border);
    flex-shrink:0;
}
.editor-thumb-toggle {
    margin-left:auto;
    background:var(--bg-secondary);
    border:none;
    color:var(--text-tertiary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px;
    border-radius:0 4px 4px 0;
    flex-shrink:0;
    transition:all 0.15s;
}
.editor-thumb-toggle:hover {
    color:var(--text-primary);
    background:var(--bg-secondary);
}
.editor-thumb-panel.collapsed {
    width:0;
    min-width:0;
    overflow:visible;
}
.editor-thumb-panel.collapsed.editor-thumb-header {
    padding:12px 0;
    justify-content:center;
    gap:0;
}
.editor-thumb-panel.collapsed.editor-thumb-header>svg,
.editor-thumb-panel.collapsed.editor-thumb-header>span {
    display:none;
}
.editor-thumb-panel.collapsed.editor-thumb-list {
    display:none;
}
.editor-thumb-panel.collapsed.editor-thumb-toggle {
    margin-left:0;
}
.editor-thumb-panel.collapsed.editor-thumb-toggle svg {
    transform:rotate(180deg);
}
.editor-thumb-list {
    flex:1;
    overflow-y:auto;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.ce-layers-panel .editor-thumb-panel {
    width:250px;
}
.ce-layers-panel .editor-thumb-panel .ce-layers-list {
    flex:1;
    max-height:none;
    padding:10px;
    min-height:0;
}
.ce-shapes-panel .editor-thumb-panel {
    width:250px;
}
.ce-shapes-panel .editor-thumb-panel .ce-shapes-list {
    flex:1;
    max-height:none;
    padding:10px;
    min-height:0;
    overflow-y:auto;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    align-content:start;
    gap:6px;
}
body[data-tool="create"] .ce-shapes-panel .ce-shape-btn {
    flex-direction:column;
    width:100%;
    justify-content:center;
    text-align:center;
    padding:8px 12px;
}
body[data-tool="create"] .ce-shapes-panel .ce-shape-btn span {
    flex:none;
    text-align:center;
    line-height:1.15;
}
body[data-tool="create"] .ce-shapes-panel .ce-shape-btn:hover {
    color: var(--text-tertiary);
    transform:translateY(-2px);
}
body[data-tool="create"] .ce-shapes-panel .ce-shape-btn:hover svg {
    color: var(--accent-primary);
    stroke: var(--accent-primary);
}
.editor-thumb-panel.collapsed > .ce-layers-list,
.editor-thumb-panel.collapsed > .ce-shapes-list {
    display:none;
}
.ce-layers-panel .editor-thumb-panel.collapsed,
.ce-shapes-panel .editor-thumb-panel.collapsed {
    width:0;
    min-width:0;
    overflow:visible;
}
.editor-thumb-panel.collapsed > .editor-thumb-header {
    display:none;
}
.editor-canvas-col {
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
}
.ce-pages-strip {
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-shrink:0;
    height:80px;
    box-sizing:border-box;
    background:var(--bg-secondary);
    border-top:1px solid var(--glass-border);
    padding:6px 14px 6px;
    min-height:0;
}
.ce-pages-strip-list {
    flex:1;
    min-height:0;
    flex-direction:row;
    align-items:center;
    overflow-x:hidden;
    overflow-y:hidden;
    max-height:none;
    padding:0 2px 2px;
    gap:8px;
}
.ce-pages-scroll {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:30px;
    height: 58px;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-pages-scroll:hover {
    color:var(--text-primary);
    border-color:var(--glass-border-hover);
    background:var(--bg-tertiary);
}
.ce-pages-scroll-left {
    margin-right:8px;
}
.ce-pages-scroll-right {
    margin-left:8px;
}
.ce-pages-strip-list .editor-thumb-item {
    width:50px;
    height:60px;
}
.ce-pages-strip > .ce-thumb-actions {
    width:auto;
    padding:0;
    flex-shrink:0;
    align-items:center;
    margin-left:8px;
}
.ce-pages-strip > .ce-thumb-actions .ce-add-page-btn {
    width:auto;
    flex:none;
    padding: 21px 10px;
}
.editor-thumb-item {
    position:relative;
    cursor:pointer;
    border-radius: 4px;
    overflow:hidden;
    border:2px solid transparent;
    transition:border-color 0.15s,box-shadow 0.15s;
    background:#fff;
    flex-shrink:0;
    box-shadow: 1px 1px 4px rgba(15, 23, 42, 0.18);
}
.editor-thumb-item:hover {
    border-color:var(--glass-border-hover);
}
.editor-thumb-item.ce-thumb-drag {
    opacity:0.4;
}
.editor-thumb-item.ce-thumb-drop {
    border-color:#6366f1;
    box-shadow:0 0 0 2px rgba(99,102,241,0.25);
}
.editor-thumb-item.active {
    border: 1px dashed #ff9800;
    transform:none;
    opacity:1;
}
.editor-thumb-item canvas,
.editor-thumb-item img {
    width:100%;
    display:block;
    pointer-events:none;
}
.editor-thumb-num {
    position:absolute;
    bottom: 1px;
    left:50%;
    transform:translateX(-50%);
    padding: 3px 5px 2px 5px;
    border-radius:8px;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size: 9px;
    font-weight:600;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.15s;
    line-height: 1.1;
}
.editor-thumb-item:hover .editor-thumb-num {
    opacity:1;
}
.ed-page-wrapper {
    position:relative;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    border-radius:2px;
    flex-shrink:0;
    margin-bottom:24px;
    overflow:hidden;
}
.ed-page-transform {
    position:relative;
}
.ed-page-canvas {
    display:block;
}
.ed-text-layer {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    line-height:1;
    pointer-events:none;
    z-index:2;
    display:none;
}
.ed-text-layer>span {
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    pointer-events:auto;
    transform-origin:0%0%;
}
.ed-text-layer::selection {
    background:rgba(99,102,241,0.3);
}
.ed-text-layer.highlight {
    margin:-1px;
    padding:1px;
    background-color:rgba(255,255,0,0.4);
}
.ed-annotation-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:auto;
    z-index:3;
}
.ed-ann {
    position:absolute;
    cursor:move;
    pointer-events:auto;
    box-sizing:border-box;
}
.ed-ann.selected {
    outline:2px solid var(--accent-primary);
    outline-offset:0px;
}
.ed-ann .ed-resize-handle {
    display:none;
    position:absolute;
    width:8px;
    height:8px;
    background:var(--accent-primary);
    border:1px solid#fff;
    border-radius:1px;
    z-index:10;
    pointer-events:auto;
}
.ed-ann.selected .ed-resize-handle {
    display:block;
}
.ed-rh-nw {
    top:-4px;
    left:-4px;
    cursor:nw-resize;
}
.ed-rh-ne {
    top:-4px;
    right:-4px;
    cursor:ne-resize;
}
.ed-rh-sw {
    bottom:-4px;
    left:-4px;
    cursor:sw-resize;
}
.ed-rh-se {
    bottom:-4px;
    right:-4px;
    cursor:se-resize;
}
.ed-rh-tip {
    right:-10px;
    top:50%;
    margin-top:-6px;
    width:12px;
    height:12px;
    border-radius:50%;
    cursor:grab;
}
.ed-rh-n {
    top:-4px;
    left:50%;
    margin-left:-4px;
    cursor:n-resize;
}
.ed-rh-s {
    bottom:-4px;
    left:50%;
    margin-left:-4px;
    cursor:s-resize;
}
.ed-rh-e {
    right:-4px;
    top:50%;
    margin-top:-4px;
    cursor:e-resize;
}
.ed-rh-w {
    left:-4px;
    top:50%;
    margin-top:-4px;
    cursor:w-resize;
}
.ed-rotate-handle {
    position:absolute;
    top:-26px;
    left:50%;
    margin-left:-8px;
    width:16px;
    height:16px;
    background:var(--accent-primary);
    border:1px solid#fff;
    border-radius:50%;
    cursor:grab;
    z-index:10;
    pointer-events:auto;
    display:none;
    box-sizing:border-box;
}
.ed-ann.selected .ed-rotate-handle {
    display:block;
}
.ed-del-handle {
    position:absolute;
    top:-10px;
    right:-10px;
    width:18px;
    height:18px;
    background:#ef4444;
    color:#fff;
    border-radius:50%;
    font-size:10px;
    line-height:18px;
    text-align:center;
    cursor:pointer;
    z-index:11;
    pointer-events:auto;
    display:none;
}
.ed-ann.selected .ed-del-handle {
    display:block;
}
.ed-ann.text-ann {
    background:transparent;
    border:none;
    min-width:20px;
    min-height:14px;
    padding:2px 4px;
    overflow:visible;
    word-break:break-word;
    white-space:pre-wrap;
}
.ed-ann.text-ann.editing {
    outline:2px solid var(--accent-primary);
    background:rgba(99,102,241,0.05);
    cursor:text;
}
.ed-ann.image-ann img {
    width:100%;
    height:100%;
    object-fit:fill;
    pointer-events:none;
}
.ed-ann.highlight-ann {
    background:rgba(0,0,0,0.001);
    border:none;
    overflow:visible;
    cursor:move;
    pointer-events:auto;
}
.ed-ann.arrow-ann {
    background:transparent;
    border:none;
    overflow:visible;
}
.ed-ann.draw-ann {
    background:transparent;
    border:none;
    overflow:visible;
}
.ed-ann.draw-ann svg {
    position:absolute;
    left:0;
    top:0;
    overflow:visible;
}
.ed-ann.sticky-ann {
    background:#fef08a;
    border:1px solid#eab308;
    border-radius:3px;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    overflow:hidden;
    font-family:Arial,sans-serif;
    cursor:move;
    box-sizing:border-box;
}
.ed-ann.sticky-ann.sticky-content {
    width:100%;
    height:100%;
    padding:6px 8px;
    font-size:12px;
    line-height:1.4;
    color:#422006;
    white-space:pre-wrap;
    overflow:hidden;
    word-break:break-word;
}
.ed-ann.sticky-ann.sticky-pin {
    position:absolute;
    top:4px;
    right:4px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ef4444;
    border:1px solid rgba(0,0,0,0.2);
}
.ed-text-inline-edit {
    background:transparent;
    border:1px solid var(--accent-primary);
    outline:none;
    resize:none;
    overflow:hidden;
    padding:2px 4px;
    width:100%;
    height:100%;
    font-family:Arial,sans-serif;
    color:inherit;
}
.ed-draw-preview {
    position:absolute;
    pointer-events:none;
    border:1px dashed var(--accent-primary);
    background:rgba(99,102,241,0.08);
    z-index:5;
}
.editor-status-bar {
    position:absolute;
    bottom:42px;
    left:0;
    right:0;
    height:32px;
    background:rgba(251,146,60,0.12);
    display:none;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:600;
    color:#f97316;
    z-index:20;
    border-top:1px solid rgba(251,146,60,0.3);
}
.editor-status-bar.active {
    display:flex;
}
.editor-footerbar {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    height:42px;
    background:var(--bg-secondary);
    border-top:1px solid var(--glass-border);
    flex-shrink:0;
    z-index:10;
}
.editor-footerbar-left,
.editor-footerbar-right {
    display:flex;
    align-items:center;
    gap:4px;
}
.editor-footerbar-center {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:4px;
    direction:ltr;
}
.editor-transform-controls {
    display:flex;
    align-items:center;
    gap:6px;
}
.editor-transform-item {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
}
.editor-transform-label {
    font-size:10px;
    font-weight:600;
    color:var(--text-tertiary);
    white-space:nowrap;
}
.editor-transform-divider {
    width:1px;
    height:20px;
    background:var(--glass-border);
    margin:0 2px;
    flex-shrink:0;
}
.editor-transform-stepper {
    position:relative;
    display:inline-flex;
    align-items:stretch;
}
.editor-transform-input {
    width:56px;
    height:22px;
    padding:0 16px 0 4px;
    font-size:11px;
    text-align:center;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:5px;
    outline:none;
    box-sizing:border-box;
    font-variant-numeric:tabular-nums;
    -moz-appearance:textfield;
    appearance:textfield;
}
.editor-transform-input::-webkit-outer-spin-button,
.editor-transform-input::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}
.editor-transform-input:focus {
    border-color:var(--accent-primary);
}
.editor-transform-input:disabled {
    opacity:0.5;
    cursor:not-allowed;
}
.editor-transform-steps {
    position:absolute;
    top:1px;
    right:1px;
    bottom:1px;
    width:14px;
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--glass-border);
}
.editor-transform-step {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    padding:0;
}
.editor-transform-step + .editor-transform-step {
    border-top:1px solid var(--glass-border);
}
.editor-transform-step:hover {
    background:var(--bg-secondary);
    color:var(--text-primary);
}
.editor-transform-input:disabled + .editor-transform-steps .editor-transform-step {
    opacity:0.4;
    cursor:not-allowed;
    pointer-events:none;
}
.editor-transform-stepper--full {
    display:block;
    width:100%;
}
.editor-transform-stepper--full > .editor-text-input {
    width:100%;
    padding-right:20px;
    -moz-appearance:textfield;
    appearance:textfield;
}
.editor-transform-stepper--full > .editor-text-input::-webkit-outer-spin-button,
.editor-transform-stepper--full > .editor-text-input::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}
.editor-transform-stepper--full > .editor-text-input:disabled + .editor-transform-steps .editor-transform-step {
    opacity:0.4;
    cursor:not-allowed;
    pointer-events:none;
}
.editor-transform-btn {
    width:26px;
    height:22px;
    border:none;
    border-radius:5px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
    flex-shrink:0;
}
.editor-transform-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}
.editor-transform-btn.active {
    background:var(--accent-primary);
    color:#fff;
}
.editor-transform-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.editor-transform-btn:disabled:hover {
    background:transparent;
    color:var(--text-secondary);
}
.sign-modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:3000;
    padding:20px;
}
.sign-modal {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-xl);
    width:100%;
    max-width:540px;
    max-height:90vh;
    overflow-y:auto;
    padding:28px;
    box-shadow:0 25px 60px rgba(0,0,0,0.3);
}
.sign-modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}
.sign-modal-header h3 {
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
}
.sign-modal-close {
    width:32px;
    height:32px;
    border-radius:var(--border-radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-tertiary);
    transition:var(--transition-fast);
    background:none;
    border:none;
    cursor:pointer;
}
.sign-modal-close:hover {
    background:rgba(239,68,68,0.1);
    color:#ef4444;
}
.sign-tabs {
    display:flex;
    gap:4px;
    margin-bottom:20px;
    background:var(--glass-bg);
    border-radius:var(--border-radius-md);
    padding:4px;
}
.sign-tab {
    flex:1;
    padding:10px 16px;
    border:none;
    border-radius:var(--border-radius-sm);
    background:transparent;
    font-size:14px;
    font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
}
.sign-tab:hover {
    color:var(--text-primary);
}
.sign-tab.active {
    background:var(--accent-primary);
    color:#fff;
    box-shadow:0 2px 8px rgba(99,102,241,0.3);
}
.sign-panel {
    display:none;
}
.sign-panel.active {
    display:block;
}
.sign-canvas-wrap {
    background:#fff;
    border:2px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    overflow:hidden;
    margin-bottom:12px;
}
.sign-canvas-wrap canvas {
    display:block;
    width:100%;
    cursor:crosshair;
}
.sign-draw-tools {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.sign-tool-group {
    display:flex;
    align-items:center;
    gap:6px;
}
.sign-tool-group label {
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
}
.sign-tool-group input[type="color"] {
    width:28px;
    height:28px;
    border:2px solid var(--glass-border);
    border-radius:var(--border-radius-sm);
    cursor:pointer;
    padding:0;
    background:none;
}
.sign-tool-group input[type="range"] {
    width:80px;
    accent-color:var(--accent-primary);
}
.sign-type-controls {
    display:flex;
    flex-direction:column;
    gap:12px;
}
.sign-text-input {
    width:100%;
    padding:12px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:24px;
    color:var(--text-primary);
    outline:none;
    transition:var(--transition-fast);
    box-sizing:border-box;
}
.sign-text-input:focus {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.sign-font-select {
    width:100%;
    padding:10px 14px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    color:var(--text-primary);
    outline:none;
    cursor:pointer;
    box-sizing:border-box;
}
.sign-type-controls.sign-tool-group {
    margin-top:4px;
}
.sign-upload-area {
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-md);
    padding:32px;
    text-align:center;
    cursor:pointer;
    transition:var(--transition-base);
    position:relative;
}
.sign-upload-area:hover {
    border-color:var(--accent-primary);
    background:rgba(99,102,241,0.03);
}
.sign-upload-area input[type="file"] {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.sign-upload-area p {
    font-size:13px;
    color:var(--text-secondary);
    margin-top:8px;
}
.sign-upload-preview {
    max-width:280px;
    max-height:80px;
    object-fit:contain;
    margin:0px auto;
    margin-top:14px;
}
.sign-remove-bg-label {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:14px;
    color:var(--text-secondary);
    cursor:pointer;
    user-select:none;
}
.sign-remove-bg-label input[type="checkbox"] {
    width:16px;
    height:16px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.sign-preview {
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--glass-border);
}
.sign-preview h4 {
    font-size:12px;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-bottom:8px;
}
.sign-preview-box {
    background:#fff;
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    padding:16px;
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sign-preview-img {
    max-width:100%;
    max-height:80px;
    object-fit:contain;
}
.sign-modal-actions {
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
}
.sign-pdf-area {
    display:flex;
    justify-content:center;
    margin-bottom:12px;
    overflow:auto;
    max-height:calc(90vh - 260px);
    padding:8px;
    background:var(--glass-bg);
    border-radius:var(--border-radius-md);
}
.sign-page-wrapper {
    position:relative;
    display:inline-block;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    border-radius:2px;
    line-height:0;
}
.sign-page-wrapper canvas {
    display:block;
}
.sign-draggable {
    position:absolute;
    cursor:move;
    user-select:none;
    -webkit-user-select:none;
    opacity:0.85;
    transition:opacity 0.15s;
    border:2px dashed rgba(99,102,241,0.5);
    border-radius:2px;
    z-index:10;
}
.sign-draggable:hover {
    opacity:1;
}
.sign-page-nav {
    display:none;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:12px;
}
.sign-page-nav span {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    min-width:100px;
    text-align:center;
}
.sign-place-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.sign-size-control {
    display:flex;
    align-items:center;
    gap:8px;
}
.sign-size-control label {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
}
.sign-size-control input[type="range"] {
    width:120px;
    accent-color:var(--accent-primary);
}
.sign-size-control span {
    font-size:13px;
    font-weight:700;
    color:var(--accent-primary);
    min-width:36px;
}
.lock-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    backdrop-filter:blur(12px);
    display:none;
}
.lock-options-title {
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
}
.lock-field {
    margin-bottom:14px;
}
.lock-field label {
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:6px;
}
.lock-input {
    width:100%;
    padding:10px 14px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    color:var(--text-primary);
    outline:none;
    transition:var(--transition-fast);
    box-sizing:border-box;
}
.lock-input:focus {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.lock-input::placeholder {
    color:var(--text-muted);
}
.lock-permissions {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--glass-border);
}
.lock-check {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:14px;
    color:var(--text-secondary);
}
.lock-check input[type="checkbox"] {
    width:18px;
    height:18px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.rotate-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
}
.rotate-angle-selector,
.rotate-scope-selector {
    margin-bottom:16px;
}
.rotate-angle-selector:last-child,
.rotate-scope-selector:last-child {
    margin-bottom:0;
}
.rotate-angle-selector h4,
.rotate-scope-selector h4 {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:10px;
}
.angle-buttons,
.scope-buttons {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.angle-btn,
.scope-btn {
    flex:1;
    padding:10px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.angle-btn:hover,
.scope-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.angle-btn.active,
.scope-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.page-numbers-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
}
.pn-section {
    margin-bottom:16px;
}
.pn-section:last-child {
    margin-bottom:0;
}
.pn-section h4 {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:10px;
}
.pn-row {
    display:flex;
    gap:16px;
    margin-bottom:16px;
}
.pn-row:last-child {
    margin-bottom:0;
}
.pn-half {
    flex:1;
    margin-bottom:0;
}
.pn-position-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}
.pn-pos-btn {
    padding:10px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:16px;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.pn-pos-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.pn-pos-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.pn-format-buttons {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.pn-format-btn {
    padding:8px 12px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:13px;
    font-family:monospace;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:left;
}
.pn-format-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.pn-format-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.pn-font-row {
    margin-top:10px;
}
.pn-font-row label {
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:6px;
}
.watermark-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
}
.wm-row {
    display:flex;
    gap:16px;
    margin-bottom:16px;
}
.wm-row:last-child {
    margin-bottom:0;
}
.wm-section {
    margin-bottom:0;
}
.wm-full {
    flex:1;
}
.wm-half {
    flex:1;
}
.wm-section h4 {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:10px;
}
.wm-range {
    width:100%;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.wm-range-val {
    font-size:13px;
    font-weight:600;
    color:var(--accent-primary);
    margin-left:8px;
}
.wm-rotation-buttons {
    display:flex;
    gap:6px;
}
.wm-rot-btn {
    flex:1;
    padding:8px 12px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.wm-rot-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.wm-rot-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.wm-color-buttons {
    display:flex;
    gap:8px;
}
.wm-color-btn {
    width:32px;
    height:32px;
    border-radius:50%;
    border:2px solid var(--glass-border);
    cursor:pointer;
    transition:var(--transition-fast);
}
.wm-color-btn:hover {
    border-color:var(--text-primary);
    transform:scale(1.1);
}
.wm-color-btn.active {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 2px var(--accent-primary);
}
.wm-position-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}
.wm-pos-btn {
    padding:10px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:16px;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.wm-pos-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.wm-pos-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.wm-type-buttons {
    display:flex;
    gap:8px;
}
.wm-type-btn {
    flex:1;
    padding:10px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.wm-type-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.wm-type-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.wm-image-upload {
    padding:20px;
    background:var(--glass-bg);
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-md);
    text-align:center;
    cursor:pointer;
    transition:var(--transition-fast);
}
.wm-image-upload:hover {
    border-color:var(--accent-primary);
}
.wm-image-upload p {
    font-size:13px;
    color:var(--text-muted);
    margin:0;
}
.wm-image-name {
    margin-top:8px!important;
    font-weight:600;
    color:var(--accent-primary)!important;
}
.org-load-btn {
    flex-shrink:0;
    white-space:nowrap;
    gap:4px;
}
.org-load-active {
    pointer-events:none;
    opacity:0.8;
}
.org-pages-wrap {
    margin-top:20px;
}
@media(max-width:860px) {
    .org-pages-wrap {
        padding:0 16px;
    }
}
.org-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg)var(--border-radius-lg)0 0;
    flex-wrap:wrap;
    gap:10px;
}
.org-toolbar-left,
.org-toolbar-right {
    display:flex;
    align-items:center;
    gap:12px;
}
.org-check-label {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    user-select:none;
}
.org-check-label input[type="checkbox"] {
    width:16px;
    height:16px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.org-page-count {
    font-size:13px;
    color:var(--text-muted);
}
.org-action-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
}
.org-action-btn:hover:not(:disabled) {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.org-action-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.org-action-danger:hover:not(:disabled) {
    border-color:#ef4444;
    color:#ef4444;
}
.org-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:20px;
    padding:24px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-top:none;
    border-radius:0 0 var(--border-radius-lg)var(--border-radius-lg);
    min-height:200px;
}
.org-page {
    position:relative;
    background:#fff;
    border:2px solid transparent;
    border-radius:8px;
    overflow:hidden;
    cursor:grab;
    transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;
    user-select:none;
}
.org-page:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-2px);
}
.org-page.selected {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.25);
}
.org-page.dragging {
    opacity:0.4;
    transform:scale(0.95);
}
.org-page.drag-over {
    border-color:var(--accent-primary);
    border-style:dashed;
}
.org-page-check {
    position:absolute;
    top:6px;
    left:6px;
    width:22px;
    height:22px;
    border-radius:6px;
    background:rgba(255,255,255,0.9);
    border:2px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition-fast);
    z-index:2;
}
.org-page.selected.org-page-check {
    background:var(--accent-primary);
    border-color:var(--accent-primary);
}
.org-page.selected.org-page-check svg {
    display:block;
}
.org-page-check svg {
    display:none;
    width:12px;
    height:12px;
    stroke:#fff;
    stroke-width:3;
    fill:none;
}
.org-page-num {
    position:absolute;
    bottom:6px;
    left:50%;
    transform:translateX(-50%);
    padding:2px 8px;
    border-radius:10px;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:11px;
    font-weight:600;
    z-index:2;
}
.org-page-thumb {
    width:100%;
    aspect-ratio:1/1.414;
    display:block;
    object-fit:contain;
    background:#fff;
}
.org-page-actions {
    position:absolute;
    top:6px;
    right:6px;
    display:flex;
    gap:4px;
    opacity:0;
    transition:opacity 0.15s;
    z-index:2;
}
.org-page:hover.org-page-actions {
    opacity:1;
}
.org-page-btn {
    width:26px;
    height:26px;
    border-radius:6px;
    background:rgba(255,255,255,0.9);
    border:1px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition-fast);
    color:var(--text-secondary);
}
.org-page-btn:hover {
    background:var(--accent-primary);
    border-color:var(--accent-primary);
    color:#fff;
}
.org-page-btn.org-page-btn-danger:hover {
    background:#ef4444;
    border-color:#ef4444;
}
@media(max-width:640px) {
    .org-grid {
        grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
        gap:10px;
        padding:12px;
    }
    .org-toolbar {
        flex-direction:column;
        align-items:flex-start;
    }
}
.pw-format-toggle {
    margin:20px 0;
    padding:16px 20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    display:flex;
    align-items:center;
    gap:16px;
}
.pw-format-label {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
}
.pw-format-options {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    flex:1;
}
.pw-format-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:12px 14px;
    border:1px dashed var(--glass-border);
    border-radius:var(--border-radius-sm);
    background:var(--glass-bg);
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:var(--transition-base);
}
.pw-format-btn:hover {
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
.pw-format-btn.active {
    background:rgba(99,102,241,0.1);
    border-color:var(--accent-primary);
    color:var(--accent-primary);
    border-style:solid;
}
@media(max-width:480px) {
    .pw-format-toggle {
        flex-direction:column;
        align-items:stretch;
    }
    .pw-format-label {
        text-align:center;
    }
}
/* Content Enrichment: intro, why, faq, related tools */
.tool-intro {
    max-width:720px;
    margin:0 auto 40px;
    font-size:15px;
    line-height:1.7;
    color:var(--text-secondary);
    text-align:center;
}
.why-section {
    margin-top:48px;
    padding:32px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    backdrop-filter:blur(12px);
}
.why-section h2,
.faq-section h2,
.related-tools h2 {
    font-family:var(--font-display);
    font-size:24px;
    font-weight:700;
    margin-bottom:16px;
    text-align:center;
}
.why-section > p {
    font-size:14px;
    line-height:1.7;
    color:var(--text-secondary);
    margin-bottom:20px;
    text-align:center;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}
.why-section ul {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:10px;
    list-style:none;
    padding:0;
    margin:0;
}
.why-section li {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    color:var(--text-primary);
    padding:12px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
}
.why-section li::before {
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent-primary);
    flex-shrink:0;
    margin-top:6px;
}
.faq-section {
    margin-top:48px;
}
.faq-section h2 {
    margin-bottom:32px;
}
.faq-section h3 {
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
}
.faq-section p {
    font-size:14px;
    line-height:1.7;
    color:var(--text-secondary);
    margin-bottom:20px;
}
.related-tools {
    margin-top:48px;
    margin-bottom:48px;
}
.related-tools h2 {
    margin-bottom:24px;
}
.related-tools-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
}
.related-tools-grid a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    transition:var(--transition-fast);
}
.related-tools-grid a:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
    transform:translateY(-2px);
}
.cta-section {
    margin-top:48px;
    padding:56px 40px;
    background:var(--gradient-primary);
    border-radius:var(--border-radius-xl);
    text-align:center;
    color:white;
}
.cta-section h2 {
    font-family:var(--font-display);
    font-size:28px;
    font-weight:800;
    margin-bottom:12px;
}
.cta-section p {
    font-size:15px;
    line-height:1.6;
    opacity:0.95;
    margin-bottom:28px;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
}
.cta-section .btn-primary {
    background:white;
    color:var(--accent-primary);
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
.cta-section .btn-primary:hover {
    box-shadow:0 8px 28px rgba(0,0,0,0.25);
}
@media (max-width:768px) {
    .why-section {
        padding:24px 20px;
    }
    .why-section ul {
        grid-template-columns:1fr;
    }
    .related-tools-grid {
        grid-template-columns:1fr;
    }
}
[dir="rtl"] .breadcrumb {
    flex-direction:row-reverse;
}
[dir="rtl"] .how-step-tip {
    border-left:0;
    border-right:3px solid var(--accent-primary);
    border-radius:var(--border-radius-sm) 0 0 var(--border-radius-sm);
    text-align:right;
}
[dir="rtl"] .breadcrumb svg {
    transform:scaleX(-1);
}
[dir="rtl"] .editor-sidebar {
    border-left:none;
    border-right:1px solid var(--glass-border);
}
[dir="rtl"] .editor-thumb-panel {
    border-right:none;
    border-left:1px solid var(--glass-border);
}
[dir="rtl"] .editor-tool-btn {
    text-align:right;
}
[dir="rtl"] .editor-slider-val {
    text-align:left;
}
[dir="rtl"] .ed-rh-n,
[dir="rtl"] .ed-rh-s {
    left:auto;
    right:50%;
    margin-left:0;
    margin-right:-4px;
}
[dir="rtl"] .tool-options.option-group {
    text-align:right;
}
[dir="rtl"] .result-actions {
    flex-direction:row-reverse;
}
[dir="rtl"] .upload-zone svg,
[dir="rtl"] .upload-zone.upload-icon {
    transform:scaleX(-1);
}
.how-step-media { width: 100%; object-fit: contain; border-radius: var(--border-radius-md); }

/* ============================================
   Create PDF tool
   ============================================ */
/* ---- Setup view format panel ---- */
.create-format {
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    padding:24px;
    margin-bottom:32px;
}
.create-format-head {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.create-format-icon {
    width:46px;
    height:46px;
    border-radius:12px;
    background:rgba(99,102,241,0.1);
    color:#6366f1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.create-format-head h3 {
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
    margin-bottom:2px;
}
.create-format-head p {
    font-size:13px;
    color:var(--text-secondary);
}
.create-format-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin-bottom:20px;
}
.create-format-field .editor-ctrl-label {
    display:block;
    margin-bottom:6px;
}
.create-format-field-action {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}
.create-format-field-action .btn {
    width:100%;
}
@media (max-width:600px) {
    .create-format-grid { grid-template-columns:1fr; }
}

/* ---- Editor: page area ---- */
body.editor-mode { overflow:hidden; }
.ce-page-wrap {
    position:relative;
    margin:0 auto 32px;
    flex-shrink:0;
}
.ce-page {
    position:relative;
    background:#ffffff;
    box-shadow: 0 0px 8px rgba(15,23,42,0.18);
    border-radius:2px;
    overflow:visible;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}
.ce-page.ce-drop-target {
    outline:3px dashed #6366f1;
    outline-offset:-3px;
}
.ce-page.ce-drop-target::after {
    content:attr(data-drop-hint);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:rgba(99,102,241,0.92);
    color:#fff;
    font-size:14px;
    font-weight:600;
    padding:10px 22px;
    border-radius:999px;
    pointer-events:none;
    z-index:50;
}
.ce-page-anim-next {
    animation:cePageInRight 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ce-page-anim-prev {
    animation:cePageInLeft 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes cePageInRight {
    from { transform:translateX(42px) scale(0.86) translateY(14px); opacity:0; }
    to { transform:translateX(0) scale(1) translateY(0); opacity:1; }
}
@keyframes cePageInLeft {
    from { transform:translateX(-42px) scale(0.86) translateY(14px); opacity:0; }
    to { transform:translateX(0) scale(1) translateY(0); opacity:1; }
}
.ce-item-bounce {
    animation:ceItemPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ce-item-land {
    animation:ceItemLand 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ceItemLand {
    0% { transform:scale(1); }
    40% { transform:scale(1.12); }
    65% { transform:scale(0.96); }
    100% { transform:scale(1); }
}
@keyframes ceItemPop {
    0% { transform:scale(0.5); opacity:0; }
    70% { transform:scale(1.06); opacity:1; }
    100% { transform:scale(1); opacity:1; }
}
.ce-item-delete {
    animation:ceItemDelete 0.22s ease-in forwards;
    pointer-events:none;
}
@keyframes ceItemDelete {
    0% { transform:scale(1); opacity:1; }
    30% { transform:scale(1.15); opacity:1; }
    100% { transform:scale(0.2); opacity:0; }
}
.ce-animating {
    transition:left .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                top .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                width .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                height .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity .2s ease;
    will-change:left, top, width, height, transform;
}
.ce-page-flash {
    animation:cePageFlash 0.3s ease-out;
}
@keyframes cePageFlash {
    0% { box-shadow:0 0 0 3px rgba(99,102,241,0.6); }
    100% { box-shadow:0 0 0 0 rgba(99,102,241,0); }
}

/* ---- Ruler guides ---- */
.ce-guide {
    position:absolute;
    pointer-events:auto;
    cursor:move;
    z-index:4;
    touch-action:none;
}
.ce-guide-v {
    top:0;
    bottom:0;
    width:5px;
    margin-left:-2px;
}
.ce-guide-h {
    left:0;
    right:0;
    height:5px;
    margin-top:-2px;
}
.ce-guide-v::after {
    content:'';
    position:absolute;
    left:2px;
    top:0;
    bottom:0;
    width:1px;
    background:repeating-linear-gradient(to bottom, #ff9800 0 6px, transparent 6px 12px);
}
.ce-guide-h::after {
    content:'';
    position:absolute;
    top:2px;
    left:0;
    right:0;
    height:1px;
    background:repeating-linear-gradient(to right, #ff9800 0 6px, transparent 6px 12px);
}
.ce-guide-temp {
    pointer-events:none;
    z-index:5;
}
.ce-guide-temp::after {
    background:#ff9800;
}

/* ---- Add page button in thumbnails ---- */
.ce-thumb-actions {
    display:flex;
    gap:6px;
    flex-shrink:0;
}
.ce-thumb-actions .ce-add-page-btn {
    width:auto;
    flex:1;
    padding:8px 4px;
}
.ce-add-page-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 10px;
    border:1.5px dashed var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
    flex-shrink:0;
    width:100%;
}
.ce-add-page-btn:hover {
    border-color:#ff9800;
    color:#ff9800;
    background:rgba(255,152,0,0.06);
}
.ce-add-page-btn.ce-page-btn-danger:hover {
    border-color:#ef4444;
    color:#ef4444;
    background:rgba(239,68,68,0.06);
}
.ce-add-page-btn.ce-page-btn-neutral:hover {
    border-color:var(--text-secondary);
    color:var(--text-primary);
    background:rgba(255,255,255,0.05);
}

/* ---- Items ---- */
.ce-item {
    position:absolute;
    cursor:move;
    box-sizing:border-box;
    touch-action:none;
}
.ce-item.ce-flip-anim {
    transition: transform 0.22s ease-in-out;
}
.ce-page.ce-flying .ce-selection,
.ce-page.ce-flying .ce-selection * {
    display:none !important;
}
.ce-item-inner {
    position:absolute;
    inset:0;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
}
.ce-item-text {
    display:block;
    padding:0;
    word-break:break-word;
}
.ce-item.ce-item-line .ce-item-inner,
.ce-item.ce-item-arrow .ce-item-inner {
    overflow:visible;
}
.ce-item.ce-item-measure .ce-item-inner {
    overflow:visible;
}
.ce-item.ce-item-rect .ce-item-inner,
.ce-item.ce-item-circle .ce-item-inner {
    display:block;
    box-sizing:border-box;
}
.ce-item.ce-item-image .ce-item-inner img {
    width:100%;
    height:100%;
    object-fit:fill;
    display:block;
    pointer-events:none;
    user-select:none;
}
.ce-svg-box,
.ce-svg-box svg {
    width:100%;
    height:100%;
    display:block;
}
.ce-svg-box svg { overflow:visible; }
.ce-table {
    font-family:var(--font-body);
    font-size:13px;
}
.ce-item.ce-item-table .ce-item-inner {
    padding:0;
}
.ce-item.ce-item-line,
.ce-item.ce-item-arrow,
.ce-item.ce-item-measure { cursor:move; }

.ce-item.ce-item-pen .ce-item-inner,
.ce-item.ce-item-highlight .ce-item-inner {
    overflow:visible;
}
.ce-item.ce-item-pen .ce-item-inner svg,
.ce-item.ce-item-highlight .ce-item-inner svg {
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}
.ce-item.ce-hover {
    outline:1.5px dashed #ff9800;
    outline-offset:1px;
    cursor:default;
}

.ce-note-box,
.ce-sticky-box {
    box-sizing:border-box;
    display:block;
    overflow:hidden;
}
.ce-note-box {
    background:#fef9c3;
    border:1px solid #eab308;
    border-radius:8px;
    padding:8px 10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.ce-sticky-box {
    background:#ffe58f;
    border:1px solid #f2cc5a;
    border-radius:3px;
    padding:14px 12px 18px;
    box-shadow:0 2px 5px rgba(0,0,0,0.12);
}
.ce-sticky-box::after {
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    width:20px;
    height:20px;
    background:linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(0,0,0,0.12) 50%);
    border-top-left-radius:4px;
    pointer-events:none;
}

/* ---- Selection chrome ---- */
.ce-selection {
    position:absolute;
    border:1.5px solid var(--accent-primary,#6366f1);
    pointer-events:none;
    z-index:40;
    box-sizing:border-box;
}
.ce-selection-multi {
    border-style:dashed;
    background:rgba(99,102,241,0.05);
}
.ce-marquee {
    position:absolute;
    border:1px solid var(--accent-primary,#6366f1);
    background:rgba(99,102,241,0.08);
    pointer-events:none;
    z-index:39;
    box-sizing:border-box;
}
.ce-handle {
    position:absolute;
    width:10px;
    height:10px;
    background:#ffffff;
    border:1.5px solid var(--accent-primary,#6366f1);
    border-radius:2px;
    pointer-events:auto;
    box-sizing:border-box;
}
.ce-handle-nw { top:-5px; left:-5px; cursor:nwse-resize; }
.ce-handle-n { top:-5px; left:calc(50% - 5px); cursor:ns-resize; }
.ce-handle-ne { top:-5px; right:-5px; cursor:nesw-resize; }
.ce-handle-e { top:calc(50% - 5px); right:-5px; cursor:ew-resize; }
.ce-handle-se { bottom:-5px; right:-5px; cursor:nwse-resize; }
.ce-handle-s { bottom:-5px; left:calc(50% - 5px); cursor:ns-resize; }
.ce-handle-sw { bottom:-5px; left:-5px; cursor:nesw-resize; }
.ce-handle-w { top:calc(50% - 5px); left:-5px; cursor:ew-resize; }
.ce-rotate-handle {
    position:absolute;
    top:-24px;
    left:calc(50% - 6px);
    width:12px;
    height:12px;
    border:1.5px solid var(--accent-primary,#6366f1);
    border-radius:50%;
    background:#ffffff;
    cursor:grab;
    pointer-events:auto;
}
.ce-rotate-handle:before {
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    width:1.5px;
    height:12px;
    background:var(--accent-primary,#6366f1);
    transform:translateX(-50%);
    pointer-events:none;
}
.ce-rotate-handle:after {
    content:'';
    position:absolute;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color:var(--accent-primary,#6366f1);
}
.ce-arrow-tip {
    position:absolute;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border-radius:50%;
    background:var(--accent-primary,#6366f1);
    border:2px solid #ffffff;
    cursor:grab;
    pointer-events:auto;
    z-index:41;
}

.ce-end-handle {
    position:absolute;
    width:18px;
    height:18px;
    margin:-9px 0 0 -9px;
    border-radius:50%;
    background:transparent;
    cursor:grab;
    pointer-events:auto;
    z-index:41;
    transition:background .15s ease, box-shadow .15s ease;
}

.ce-end-handle:hover {
    background:rgba(99,102,241,0.18);
    box-shadow:0 0 0 2px rgba(99,102,241,0.75);
}

/* ---- Inline editing ---- */
.ce-edit-overlay {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:0;
    outline:2px solid var(--accent-primary,#6366f1);
    outline-offset:-2px;
    border-radius:2px;
    background:rgba(255,255,255,0.98);
    padding:0;
    margin:0;
    resize:none;
    overflow:hidden;
    cursor:text;
    z-index:60;
    white-space:pre-wrap;
    word-break:break-word;
    vertical-align:top;
}
.ce-cell-edit {
    position:absolute;
    box-sizing:border-box;
    border:2px solid var(--accent-primary,#6366f1);
    border-radius:2px;
    background:rgba(255,255,255,0.99);
    padding:3px 4px;
    margin:0;
    resize:none;
    overflow:hidden;
    z-index:60;
    outline:none;
    font-family:var(--font-body);
    font-size:11px;
    line-height:1.35;
}
.ce-draw-preview {
    pointer-events:none;
    z-index:30;
}

/* ---- In-editor confirm dialog ---- */
.ce-confirm-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3000;
    padding:20px;
}
.ce-confirm-card {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-xl);
    padding:24px;
    max-width:400px;
    width:100%;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.ce-confirm-msg {
    color:var(--text-primary);
    font-size:15px;
    line-height:1.6;
    margin-bottom:22px;
}
.ce-confirm-btns {
    display:flex;
    gap:10px;
    justify-content:flex-end;
}
.ce-confirm-btn {
    padding:9px 18px;
    border-radius:var(--border-radius-md);
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition-fast);
}
.ce-confirm-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.ce-confirm-btn-primary {
    background:var(--accent-primary);
    border-color:var(--accent-primary);
    color:#fff;
}
.ce-confirm-btn-primary:hover {
    background:var(--accent-secondary);
    border-color:var(--accent-secondary);
    color:#fff;
}
[dir="rtl"] .ce-confirm-btns { flex-direction:row-reverse; }

/* ---- Inset buttons ---- */
.ce-inset-btn {
    width:100%;
    justify-content:center;
    margin-top:8px;
}

/* ---- Checkbox label ---- */
.ce-checkbox-label {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:12px;
    color:var(--text-secondary);
    font-weight:500;
}
.ce-checkbox-label input[type="checkbox"] {
    accent-color:#6366f1;
    width:15px;
    height:15px;
    cursor:pointer;
}
.ce-textarea {
    min-height:60px;
    resize:vertical;
    line-height:1.5;
}

/* ---- Tool grid (create tool only) ---- */
body[data-tool="create"] .editor-sidebar {
    display:flex;
    flex-direction:column;
}
body[data-tool="create"] .editor-tool-grid {
    display:grid;
    grid-template-columns:repeat(9,29px);
    justify-content:center;
    gap:4px;
}
body[data-tool="create"] .editor-tool-btn {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:29px;
    padding: 6px 0;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    font-size:10px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.15s;
    text-align:center;
}
body[data-tool="create"] .editor-tool-btn svg {
    width:15px;
    height:15px;
}
body[data-tool="create"] .editor-tool-btn:hover {
    border-color:var(--glass-border-hover);
    color:var(--text-primary);
}
body[data-tool="create"] .editor-tool-btn.active {
    border-color:#6366f1;
    background:rgba(99,102,241,0.1);
    color:#6366f1;
}
body[data-tool="create"] .editor-tool-btn.active svg { color:#6366f1; }
body[data-tool="create"] .editor-tool-btn span {
    line-height:1.1;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ---- Left icon rail (Canva-style) ---- */
body[data-tool="create"] .ce-icon-rail {
    width: 56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:10px 0;
    background:var(--bg-secondary);
    border-right:1px solid var(--glass-border);
    flex-shrink:0;
    overflow-y:auto;
    height:100%;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn {
    width: 44px;
    padding:4px 0 2px;
    gap:2px;
    border-radius:8px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn svg {
    width:16px;
    height:16px;
}
body[data-tool="create"] .ce-icon-rail .ce-rail-label {
    font-size:8px;
    line-height:1;
    letter-spacing:0.02em;
    opacity:0.7;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn.active .ce-rail-label {
    opacity:1;
    color: var(--text-secondary);
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn.active {
    border-color:var(--glass-border);
    background:rgba(99,102,241,0.1);
    color:#6366f1;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn.active svg { color:#6366f1; }
body[data-tool="create"] .ce-icon-rail .ce-rail-divider {
    width:24px;
    height:1px;
    background:var(--glass-border);
    margin:2px 0;
}

/* ---- Template picker (create setup view) ---- */
.ce-template-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:12px;
}
.ce-template-card {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border:1.5px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    background:var(--glass-bg);
    cursor:pointer;
    text-align:center;
    transition:all 0.15s;
    color:var(--text-primary);
}
.ce-template-card:hover {
    border-color:#6366f1;
    transform:translateY(-1px);
}
.ce-template-card.active {
    border-color:#6366f1;
    background:rgba(99,102,241,0.08);
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.ce-template-preview {
    display:block;
    width:100%;
    height:90px;
    border-radius:8px;
    border:1px solid var(--glass-border);
    background:#ffffff;
    overflow:hidden;
    position:relative;
}
.ce-template-name {
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
}
.ce-template-card:hover .ce-template-name,
.ce-template-card.active .ce-template-name {
    color:#6366f1;
}
/* --- Preview mini-layouts --- */
.ce-template-blank {
    background:linear-gradient(135deg,#ffffff 0%,#eef2ff 100%);
}
.ce-template-invoice i {
    position:absolute;
    left:10px; top:12px;
    width:30px; height:8px;
    background:#4338ca;
    border-radius:2px;
    opacity:0.85;
}
.ce-template-invoice b {
    position:absolute;
    left:10px; top:28px;
    right:10px; height:5px;
    background:#e0e7ff;
    border-radius:2px;
}
.ce-template-invoice u {
    position:absolute;
    left:10px; top:40px;
    right:10px; height:5px;
    background:#e0e7ff;
    border-radius:2px;
}
.ce-template-certificate i {
    position:absolute;
    left:50%; top:16px;
    transform:translateX(-50%);
    width:50px; height:6px;
    background:#d97706;
    border-radius:2px;
}
.ce-template-certificate b {
    position:absolute;
    left:50%; top:30px;
    transform:translateX(-50%);
    width:64px; height:4px;
    background:#fef3c7;
    border-radius:2px;
}
.ce-template-certificate u {
    position:absolute;
    left:50%; bottom:14px;
    transform:translateX(-50%);
    width:40px; height:6px;
    border-bottom:2px dashed #d97706;
}
.ce-template-poster i {
    position:absolute;
    left:10px; top:10px;
    right:10px; height:34px;
    background:#7c3aed;
    border-radius:4px;
    opacity:0.9;
}
.ce-template-poster b {
    position:absolute;
    left:10px; top:52px;
    width:30px; height:18px;
    background:#c4b5fd;
    border-radius:4px;
}
.ce-template-poster u {
    position:absolute;
    right:10px; bottom:10px;
    left:10px; height:5px;
    background:#ede9fe;
    border-radius:2px;
}
.ce-template-report i {
    position:absolute;
    left:10px; top:12px;
    width:8px; height:34px;
    background:#0ea5e9;
    border-radius:3px;
}
.ce-template-report b {
    position:absolute;
    left:24px; top:12px;
    right:10px; height:7px;
    background:#e0f2fe;
    border-radius:2px;
}
.ce-template-report u {
    position:absolute;
    left:24px; top:26px;
    right:34px; height:5px;
    background:#e0f2fe;
    border-radius:2px;
}

/* ---- Arrange section ---- */
.editor-align-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:12px;
}
.editor-align-divider {
    width:1px;
    height:24px;
    background:var(--glass-border);
    margin:0 3px;
}

/* ---- Layers list ---- */
.ce-layers-list {
    display:flex;
    flex-direction:column;
    gap:4px;
    max-height:240px;
    overflow-y:auto;
}
.ce-layer-row {
    display:flex;
    align-items:center;
    gap:6px;
    padding: 0px 8px;
    border: 1px dashed var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-layer-row:hover {
    border-color:var(--glass-border-hover);
}
.ce-layer-row.ce-layer-drag {
    opacity:0.4;
}
.ce-layer-row.ce-layer-drop {
    border-top:2px solid #6366f1;
    background:rgba(99,102,241,0.08);
}
.ce-layer-row.active {
    border-color: #ff9800;
}
.ce-layer-name {
    flex:1;
    font-size:11px;
    font-weight:500;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ce-layer-name.ce-editing {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    outline:1px dashed var(--accent, #4a7dff);
    outline-offset:1px;
    border-radius:3px;
    padding:1px 3px;
    background:rgba(127,127,127,0.12);
}
.ce-layer-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    border-radius:4px;
    transition:all 0.15s;
    flex-shrink:0;
}
.ce-layer-btn:hover {
    color:var(--text-primary);
    background:var(--bg-tertiary);
}
.ce-layer-btn.ce-off {
    color:var(--text-tertiary);
    opacity:0.45;
}
.ce-layer-row.ce-layer-hidden .ce-layer-name {
    text-decoration:line-through;
    color:var(--text-tertiary);
}

/* ---- Smart guides ---- */
.ce-smart-guide {
    position:absolute;
    pointer-events:none;
    z-index:38;
    background:repeating-linear-gradient(to bottom, #ff9800 0 6px, transparent 6px 12px);
    box-shadow:0 0 0 0.5px rgba(255,255,255,0.8);
}
.ce-smart-guide.ce-smart-v {
    width:1px;
    top:0;
    bottom:0;
}
.ce-smart-guide.ce-smart-h {
    height:1px;
    left:0;
    right:0;
    background:repeating-linear-gradient(to right, #ff9800 0 6px, transparent 6px 12px);
}.tool-page {
    min-height:100vh;
    padding-top:calc(var(--nav-height) + 40px);
    padding-bottom:80px;
}
.tool-container {
    max-width: var(--container-max);
    margin:0 auto;
    padding:0 24px;
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:32px;
    font-size:13px;
}
.breadcrumb a {
    color:var(--text-tertiary);
    transition:var(--transition-fast);
}
.breadcrumb a:hover {
    color:var(--text-primary);
}
.breadcrumb svg {
    color:var(--text-muted);
    flex-shrink:0;
}
.breadcrumb span {
    color:var(--text-secondary);
}
.tool-header {
    text-align:center;
    margin-bottom:40px;
}
.tool-page-icon {
    width:72px;
    height:72px;
    border-radius:var(--border-radius-lg);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}
.tool-header h1 {
    font-family:var(--font-display);
    font-size:32px;
    font-weight:800;
    margin-bottom:8px;
}
.tool-header p {
    font-size:16px;
    color:var(--text-secondary);
    max-width:480px;
    margin:0 auto;
}
.upload-area {
    border: 1px dashed var(--glass-border);
    border-radius:var(--border-radius-xl);
    padding:60px 40px;
    text-align:center;
    cursor:pointer;
    transition:var(--transition-base);
    background:var(--glass-bg);
    backdrop-filter:blur(12px);
    position:relative;
    overflow:hidden;
}
.upload-area::before {
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-primary);
    opacity:0;
    transition:var(--transition-base);
}
.upload-area:hover,
.upload-area.drag-over {
    border-color:var(--accent-primary);
    background:rgba(99,102,241,0.05);
}
.upload-area:hover::before,
.upload-area.drag-over::before {
    opacity:0.03;
}
.upload-content {
    position:relative;
    z-index:1;
}
.upload-icon {
    color:var(--text-tertiary);
    margin-bottom:16px;
    transition:var(--transition-base);
}
.upload-area:hover.upload-icon {
    color:var(--accent-primary);
    transform:translateY(-4px);
}
.upload-content h3 {
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
}
.upload-content p {
    font-size:14px;
    color:var(--text-secondary);
    margin-bottom:16px;
}
.upload-formats {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}
.format-badge {
    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--accent-primary);
    background:rgba(99,102,241,0.1);
    border:1px solid rgba(99,102,241,0.2);
    border-radius:var(--border-radius-sm);
}
.upload-limit {
    font-size:13px;
    color:var(--text-muted);
}
.compression-options {
    margin-top:24px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    display:flex;
    flex-direction:column;
    gap:16px;
}
.option-section {
    margin-bottom:15px;
}
.option-section label {
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:8px;
}
.option-section label span {
    color:var(--text-primary);
    font-weight:700;
}
.preset-selector {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}
.preset-btn {
    padding:10px 6px;
    border:1px dashed var(--glass-border);
    border-radius:var(--border-radius-sm);
    background:var(--glass-bg);
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    transition:var(--transition-base);
    text-align:center;
}
.preset-btn:hover {
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
.preset-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:#fff;
}
.mode-selector {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}
.mode-btn {
    padding:10px 6px;
    border:1px dashed var(--glass-border);
    border-radius:var(--border-radius-sm);
    background:var(--glass-bg);
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    transition:var(--transition-base);
    text-align:center;
}
.mode-btn:hover {
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
.mode-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:#fff;
}
input[type="range"] {
    width:100%;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    background:var(--bg-tertiary);
    border-radius:20px;
    border:1px solid var(--glass-border);
    outline:none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-primary);
    cursor:pointer;
    border:2px solid var(--bg-card);
    box-shadow:0 0 6px rgba(99,102,241,0.4);
}
input[type="range"]::-moz-range-thumb {
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--accent-primary);
    cursor:pointer;
    border:2px solid var(--bg-card);
}
.checkbox-label {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:12px;
    color:var(--text-secondary);
    user-select:none;
}
.checkbox-label input[type="checkbox"] {
    width:14px;
    height:14px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.slider-labels {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:var(--text-muted);
    margin-top:4px;
}
.file-list {
    margin-top:24px;
}
.file-list-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}
.file-list-header h3 {
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
}
.btn-sm {
    padding:6px 14px;
    font-size:13px;
}
.file-items {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:24px;
}
.file-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    backdrop-filter:blur(12px);
    transition:var(--transition-base);
    cursor:grab;
}
.file-item:active {
    cursor:grabbing;
}
.file-item:hover {
    border-color:var(--glass-border-hover);
}
.file-item.dragging {
    opacity:0.5;
    border-color:var(--accent-primary);
}
.file-item-icon {
    width:40px;
    height:40px;
    border-radius:var(--border-radius-sm);
    background:rgba(99,102,241,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-primary);
    flex-shrink:0;
}
.file-item-thumb {
    width:40px;
    height:40px;
    border-radius:var(--border-radius-sm);
    overflow:hidden;
    flex-shrink:0;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
}
.file-item-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.file-item-info {
    flex:1;
    min-width:0;
}
.file-item-name {
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.file-item-size {
    font-size:12px;
    color:var(--text-tertiary);
}
.file-item-order {
    font-family:var(--font-display);
    font-size:12px;
    font-weight:700;
    color:var(--text-muted);
    width:24px;
    text-align:center;
}
.file-item-remove {
    width:32px;
    height:32px;
    border-radius:var(--border-radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-tertiary);
    transition:var(--transition-fast);
    flex-shrink:0;
}
.file-item-remove:hover {
    background:rgba(244,63,94,0.1);
    color:#f43f5e;
}
.file-list-actions {
    display:flex;
    gap:12px;
    margin-top:20px;
}
.compression-results {
    margin-top:24px;
}
.results-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
    flex-wrap:wrap;
    gap:12px;
}
.results-header h3 {
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.total-savings {
    font-size:14px;
    font-weight:600;
    color:var(--accent-primary);
    background:rgba(99,102,241,0.1);
    padding:4px 12px;
    border-radius:var(--border-radius-sm);
    margin-bottom:20px;
}
.results-actions {
    display:flex;
    gap:8px;
}
.edit-page-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;
    margin:16px 0;
    padding:16px;
    border-radius:var(--border-radius-md);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
}
.edit-page-thumb {
    position:relative;
    border-radius:var(--border-radius-sm);
    overflow:hidden;
    border:2px solid transparent;
    transition:border-color 0.2s,opacity 0.2s;
    cursor:pointer;
}
.edit-page-thumb.selected {
    border-color:var(--accent-primary);
}
.edit-page-thumb.deleted {
    opacity:0.3;
    border-color:#ef4444;
}
.edit-page-thumb img {
    width:100%;
    display:block;
}
.edit-page-num {
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:11px;
    padding:2px 8px;
    border-radius:10px;
}
.edit-page-delete {
    position:absolute;
    top:4px;
    right:4px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(239,68,68,0.9);
    color:#fff;
    border:none;
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:14px;
    line-height:1;
}
.edit-page-thumb:hover.edit-page-delete {
    display:flex;
}
.edit-page-thumb.deleted.edit-page-delete {
    display:flex;
    background:rgba(34,197,94,0.9);
}
.results-items {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
}
.result-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    backdrop-filter:blur(12px);
    transition:var(--transition-base);
}
.result-item:hover {
    border-color:var(--glass-border-hover);
}
.result-icon {
    width:44px;
    height:44px;
    border-radius:var(--border-radius-sm);
    background:rgba(34,197,94,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#22c55e;
    flex-shrink:0;
}
.result-info {
    flex:1;
    min-width:0;
}
.result-name {
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:4px;
}
.result-sizes {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    flex-wrap:wrap;
}
.size-original {
    color:var(--text-tertiary);
    text-decoration:line-through;
}
.size-compressed {
    color:var(--text-primary);
    font-weight:600;
}
.savings-badge {
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    font-size:11px;
    font-weight:700;
    border-radius:var(--border-radius-sm);
}
.savings-good {
    color:#22c55e;
    background:rgba(34,197,94,0.12);
}
.savings-ok {
    color:#f59e0b;
    background:rgba(245,158,11,0.12);
}
.savings-minimal {
    color:var(--text-tertiary);
    background:var(--glass-bg);
}
.result-error {
    margin-top:6px;
    font-size:12px;
    color:#ef4444;
    word-break:break-word;
}
.download-btn {
    flex-shrink:0;
}
.tool-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:48px;
    margin-bottom:48px;
}
.tool-feature {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
}
.tool-feature svg {
    flex-shrink:0;
    margin-top:2px;
}
.tool-feature strong {
    display:block;
    font-size:14px;
    font-weight:600;
    margin-bottom:2px;
}
.tool-feature span {
    font-size:12px;
    color:var(--text-tertiary);
}
.how-to-section {
    margin-top:48px;
}
.how-to-section h2 {
    font-family:var(--font-display);
    font-size:24px;
    font-weight:700;
    margin-bottom:32px;
    text-align:center;
}
.how-to-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.how-step {
    text-align:center;
    padding:24px;
    background: var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    position: relative;
}
.how-step-num {
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--gradient-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    color:white;
    margin:0 auto 16px;
    position: absolute;
    top: 300px;
    left: 45%;
}
.how-step h4 {
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    margin-bottom:8px;
}
.how-step p {
    font-size:13px;
    color:var(--text-secondary);
    line-height:1.6;
}
.how-step-media {
    width:100%;
    height: 300px;
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-md);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-tertiary);
    font-size:13px;
    text-align:center;
    padding: 12px 12px 0 12px;
    margin-bottom:20px;
}
.how-step-tip {
    margin-top:14px;
    padding:10px 14px;
    background:rgba(255,152,0,0.08);
    border-radius: 6px;
    font-size:13px;
    color:var(--accent-primary);
    text-align:left;
    line-height:1.6;
    border: 1px dashed #f59e0b;
}
@media(max-width:1024px) {
    .preset-selector {
        grid-template-columns:repeat(3,1fr);
    }
}
@media(max-width:768px) {
    .tool-features {
        grid-template-columns:1fr;
    }
    .how-to-steps {
        grid-template-columns:1fr;
    }
    .upload-area {
        padding:40px 24px;
    }
    .tool-header h1 {
        font-size:24px;
    }
    .file-list-actions {
        flex-direction:column;
    }
    .preset-selector {
        grid-template-columns:1fr;
    }
    .mode-selector {
        grid-template-columns:1fr;
    }
    .results-header {
        flex-direction:column;
        align-items:flex-start;
    }
    .results-actions {
        width:100%;
    }
    .results-actions.btn {
        flex:1;
    }
}
.editor-shell {
    position:fixed;
    inset:0;
    z-index:1500;
    background:var(--bg-primary);
    display:flex;
    flex-direction:column;
}
.editor-topbar {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    height: 52px;
    background:var(--bg-secondary);
    border-bottom:1px solid var(--glass-border);
    z-index:10;
    flex-shrink:0;
    direction:ltr;
}
.editor-topbar-left {
    display:flex;
    align-items:center;
    gap: 7px;
    position: absolute;
    left: 10px;
}
.editor-topbar-btn {
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor:pointer;
    transition:all 0.15s;
}
.editor-topbar-btn:hover {
    background:#ff9800;
    color:#fff;
    border:1px dashed#ccc;
}
.editor-topbar-btn.ce-topbar-rail {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 2px;
    width: 40px;
    padding:4px 0 2px;
    border:none;
    background:transparent;
    height: 40px;
}
.editor-topbar-btn.ce-topbar-rail:hover {
    background:transparent;
    color:var(--text-primary);
    border:none;
}
.editor-topbar-btn.ce-topbar-rail:active,
.editor-topbar-btn.ce-topbar-rail.active {
    background:rgba(99,102,241,0.1);
    color:#6366f1;
    border:none;
}
.editor-topbar-btn.ce-topbar-rail:active svg,
.editor-topbar-btn.ce-topbar-rail.active svg {
    color:#6366f1;
}
.editor-topbar-btn.ce-topbar-rail svg {
    width:16px;
    height:16px;
}
.editor-topbar-btn.ce-topbar-rail span {
    font-size: 10px;
    line-height:1;
    letter-spacing:0.02em;
    opacity:0.7;
    white-space:nowrap;
    max-width:100%;
    overflow: initial;
}
.editor-topbar-left .ce-rail-divider {
    width:1px;
    height:24px;
    background:var(--glass-border);
    margin:0 2px;
    border-radius:1px;
}
.editor-topbar-left #editorNewBtn {
    margin-inline-start:10px;
}
.editor-file-info {
    display:flex;
    align-items:center;
    gap:8px;
}
.editor-file-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:6px;
    background:rgba(255,152,0,0.1);
    color:#ff9800;
}
.editor-topbar-name {
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.editor-zoom-btn {
    width:26px;
    height:26px;
    border:none;
    border-radius:6px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
    display:flex;
    align-items:center;
    justify-content:center;
}
.editor-zoom-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}
.editor-zoom-level {
    font-size:11px;
    font-weight:600;
    color:var(--text-primary);
    min-width:40px;
    text-align:center;
    font-variant-numeric:tabular-nums;
}
.editor-zoom-divider {
    width:1px;
    height:20px;
    background:var(--glass-border);
    margin:0 2px;
}
.editor-topbar-right {
    display:flex;
    align-items:center;
    gap:12px;
    position: absolute;
    right: 10px;
}
.editor-topbar-center {
    flex:1;
    display:flex;
    align-items:center;
    justify-content: start;
    min-width:0;
    padding: 0 20px 0 20px;
    position: absolute;
    left: 240px;
    top: 21px;
    width: calc(100% - 510px);
}
.editor-page-indicator {
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    font-size:12px;
    font-weight:500;
    color:var(--text-secondary);
}
.editor-page-indicator span {
    font-variant-numeric:tabular-nums;
}
.editor-page-nav-btn {
    width:30px;
    height:30px;
    border:none;
    border-radius:8px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
}
.editor-page-nav-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}
.editor-topbar-right .editor-topbar-btn {
    padding: 7px 10px;
    font-size:11px;
}
.editor-save-btn {
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    font-weight:600;
    padding: 7px 12px!important;
    border-radius:8px!important;
}
.editor-save-btn:hover {
    opacity:0.9;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(255,152,0,0.4);
}
.editor-save-menu {
    position:relative;
}
.editor-save-menu .editor-save-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    position:relative;
}
.btn-progress-ring {
    width:16px;
    height:16px;
    flex:none;
    transform:rotate(-90deg);
}
.btn-progress-track {
    fill:none;
    stroke:var(--glass-border);
    stroke-width:2;
}
.btn-progress-fill {
    fill:none;
    stroke:var(--accent-primary);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:43.98;
    stroke-dashoffset:43.98;
    transition:stroke-dashoffset 0.25s ease;
}
.process-btn {
    position:relative;
    overflow:hidden;
}
.process-btn.is-busy {
    pointer-events:none;
    opacity:0.9;
}
.process-btn.is-busy svg:not(.btn-progress-ring) {
    display:none;
}
.process-btn .btn-progress-ring[hidden] {
    display:none;
}
.process-btn span[data-i18n] {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.process-btn[data-i18n] {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.process-btn .btn-progress-track {
    stroke:rgba(255,255,255,0.35);
}
.process-btn .btn-progress-fill {
    stroke:#ffffff;
}
.editor-save-btn.exporting {
    pointer-events:none;
    opacity:0.9;
}
.editor-save-btn.exporting .editor-save-icon,
.editor-save-btn.exporting .editor-save-caret {
    display:none;
}
.editor-save-menu .editor-save-caret {
    transition:transform 0.15s;
}
.editor-save-menu.open .editor-save-caret {
    transform:rotate(180deg);
}
.editor-save-dropdown {
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:200px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
    padding:6px;
    display:none;
    z-index:120;
}
.editor-save-dropdown.open {
    display:block;
}
.editor-save-dropdown-item {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 10px;
    border:none;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    font-size:12.5px;
    font-weight:500;
    color:var(--text-primary);
    text-align:left;
    white-space:nowrap;
}
.editor-save-dropdown-item:hover {
    background:var(--bg-tertiary);
}
.editor-save-dropdown-item svg {
    color:var(--text-secondary);
    flex-shrink:0;
}
.editor-save-dropdown-item:hover svg {
    color:var(--text-primary);
}
.editor-save-dropdown-divider {
    height:1px;
    background:var(--glass-border);
    margin:5px 6px;
}
.editor-save-dropdown-option {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:12.5px;
    font-weight:500;
    color:var(--text-primary);
    white-space:nowrap;
}
.editor-save-dropdown-option:hover {
    background:var(--bg-tertiary);
}
.editor-save-dropdown-option input[type="checkbox"] {
    margin:0;
    accent-color:var(--accent, #5b6cff);
    cursor:pointer;
    flex-shrink:0;
}
.editor-body {
    display:flex;
    flex:1;
    overflow:hidden;
    direction:ltr;
}
.editor-sidebar {
    width:250px;
    background:var(--bg-secondary);
    border-left:1px solid var(--glass-border);
    overflow-y:auto;
    flex-shrink:0;
    padding:16px 0;
    height:100%;
}
.editor-sidebar-section {
    padding:0 16px;
    margin-bottom:4px;
}
.editor-sidebar-main {
    flex:1;
    min-height:0;
    overflow-y:auto;
}
.editor-sidebar-title {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    font-weight:700;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.8px;
    margin-bottom:10px;
}
.editor-sidebar-divider {
    height:1px;
    background:var(--glass-border);
    margin:12px 16px;
}
.editor-info-grid {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.editor-info-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    padding:6px 10px;
    background:var(--glass-bg);
    border-radius:6px;
}
.editor-info-label {
    color:var(--text-tertiary);
    font-weight:400;
}
.editor-info-value {
    font-weight:600;
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
}
.editor-tool-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
}
.editor-tool-btn {
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    font-size:11px;
    font-weight:500;
    transition:all 0.15s;
    text-align:left;
}
.editor-tool-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border-color:rgba(255,255,255,0.12);
}
.editor-tool-btn.active {
    background:rgba(255,152,0,0.1);
    border-color:rgba(255,152,0,0.4);
    color:#ff9800;
}
.editor-tool-btn.active svg {
    stroke:#ff9800;
}
.editor-control-group {
    margin-bottom: 22px;
}
.editor-ctrl-cols > .editor-control-group {
    margin-bottom:0;
}
.editor-ctrl-cols {
    display:flex;
    gap:12px;
    margin-bottom: 15px;
}
.editor-ctrl-col {
    flex:1;
    min-width:0;
}
.ce-style-rows {
    flex-wrap:wrap;
}
.ce-style-rows > .editor-ctrl-col {
    flex:1 1 calc(50% - 6px);
}
#fillColorGroup { order:1; }
#cellColorGroup { order:2; }
#strokeColorGroup { order:3; }
#strokeWidthGroup { order:4; }
#opacityGroup { order:5; }
#borderRadiusGroup { order:6; }
#headSizeGroup { order:7; }
#tailSizeGroup { order:8; }
#measureFontGroup { order:9; }
#headColorGroup { order:10; }
#tailColorGroup { order:11; }
#measureColorGroup { order:12; }
.editor-ctrl-label {
    display:block;
    font-size:11px;
    font-weight:500;
    color:var(--text-tertiary);
    margin-bottom:6px;
    margin-top: 10px;
}
.editor-text-input {
    width:100%;
    padding: 2px 10px;
    font-size: 12px;
    color:var(--text-secondary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    transition:border-color 0.15s;
    height: 25px;
}
.editor-text-input:focus {
    border-color:var(--accent-primary);
}
.editor-text-input::placeholder {
    color:var(--text-tertiary);
}
.editor-ctrl-hint {
    margin:6px 0 0;
    font-size:11px;
    color:var(--text-tertiary);
    line-height:1.4;
}
.ce-font-picker {
    position:relative;
    width:100%;
}
.ce-font-trigger {
    width:100%;
    padding: 3px 28px 3px 10px;
    font-size:12px;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    cursor:pointer;
    transition:border-color 0.15s;
    height: 25px;
}
.ce-font-trigger:hover, .ce-font-trigger:focus {
    border-color:var(--accent-primary);
}
.ce-font-trigger::after {
    content:'';
    position:absolute;
    right:11px;
    top:50%;
    width:8px;
    height:8px;
    border-right:1.5px solid var(--text-tertiary);
    border-bottom:1.5px solid var(--text-tertiary);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
}
.ce-font-picker.open .ce-font-trigger::after {
    transform:translateY(-30%) rotate(225deg);
}
.ce-font-popup {
    position:fixed;
    z-index:1200;
    width:270px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:8px;
    box-shadow:var(--shadow-lg);
    padding:6px;
}
.ce-font-search {
    width:100%;
    padding:6px 9px;
    font-size:12px;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    margin-bottom:6px;
}
.ce-font-search:focus {
    border-color:var(--accent-primary);
}
.ce-font-list {
    max-height:250px;
    overflow-y:auto;
}
.ce-font-item {
    display:block;
    width:100%;
    padding:7px 9px;
    font-size:14px;
    color:var(--text-secondary);
    background:none;
    border:none;
    border-radius:6px;
    cursor:pointer;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-sizing:border-box;
}
.ce-font-item:hover {
    color:var(--text-primary);
    background:var(--glass-bg);
}
.ce-font-item.active {
    color:var(--accent-primary);
    background:rgba(99,102,241,0.08);
}
.ce-font-empty {
    padding:10px 9px;
    font-size:12px;
    color:var(--text-tertiary);
    text-align:center;
}
[dir="rtl"] .ce-font-trigger {
    text-align:right;
    padding:7px 10px 7px 28px;
}
[dir="rtl"] .ce-font-trigger::after {
    right:auto;
    left:11px;
}
[dir="rtl"] .ce-font-item {
    text-align:right;
}
.ce-chart-editor,
.ce-chart-colors {
    display:flex;
    flex-direction:column;
    gap: 10px;
    margin-bottom: 10px;
}
.ce-chart-data-head {
    display:grid;
    grid-template-columns:1fr 1fr 24px;
    gap:4px;
    font-size:10px;
    font-weight:600;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.4px;
}
.ce-chart-data-table {
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ce-chart-row {
    display:grid;
    grid-template-columns:1fr 1fr 24px;
    gap:4px;
    align-items:center;
}
.ce-chart-cell {
    width:100%;
    padding:6px 8px;
    font-size:12px;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
}
.ce-chart-cell:focus {
    border-color:var(--accent-primary);
}
.ce-chart-row-del,
.ce-chart-color-del {
    width: 20px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:6px;
    color:var(--text-tertiary);
    cursor:pointer;
    transition:all 0.15s;
    font-size:14px;
    line-height:1;
}
.ce-chart-row-del:hover,
.ce-chart-color-del:hover {
    color:#ef4444;
    background:rgba(239,68,68,0.1);
}
.ce-chart-add-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:6px 10px;
    font-size:11px;
    font-weight:600;
    color:var(--text-secondary);
    background:var(--bg-tertiary);
    border:1px dashed var(--glass-border);
    border-radius:6px;
    cursor:pointer;
    transition:all 0.15s;
}
.ce-chart-add-btn:hover {
    border-color:#ff9800;
    color:#ff9800;
    background:rgba(255,152,0,0.06);
}
.ce-chart-colors-list {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.ce-chart-color-item {
    display:flex;
    align-items:center;
    gap:2px;
}
.ce-chart-color-input {
    width:28px;
    height:28px;
    padding: 0;
    border: none;
    border-radius:6px;
    background: none;
    cursor:pointer;
}
.ce-chart-color-input::-webkit-color-swatch-wrapper {
    padding:0;
}
.ce-chart-color-input::-webkit-color-swatch {
    border:none;
    border-radius:6px;
}
.ce-table-cells {
    display:grid;
    gap:4px;
}
.ce-table-cell {
    min-width:0;
    padding:6px 6px;
    text-align:center;
}
.ce-table-cell-head {
    font-weight:600;
    background:rgba(99,102,241,0.08);
}
.ce-table-cell-active {
    border-color:var(--accent-primary,#6366f1);
    box-shadow:0 0 0 1px var(--accent-primary,#6366f1);
}
#tableCellAllBtn {
    width:100%;
    height:30px;
    margin-top:0;
    justify-content:center;
    font-size:11px;
}
#tableGroup .editor-ctrl-cols {
    margin-top:10px;
}
.ce-cell-highlight {
    position:absolute;
    outline:2px solid var(--accent-primary,#6366f1);
    outline-offset:-1px;
    box-sizing:border-box;
    pointer-events:none;
    z-index:5;
}
.editor-color-row {
    display:flex;
    gap:8px;
    align-items:center;
}
.editor-color-pick {
    width:36px;
    height:28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:transparent;
    cursor:pointer;
}
.editor-color-pick::-webkit-color-swatch-wrapper {
    padding:2px;
}
.editor-color-pick::-webkit-color-swatch {
    border:none;
    border-radius:4px;
}
#chartGroup .editor-color-pick {
    width:100%;
    height:30px;
}
#chartGroup .editor-color-row {
    gap:0;
}
.editor-color-hex {
    font-size:11px;
    font-family:'SF Mono','Consolas',monospace;
    color:var(--text-tertiary);
}
.editor-slider-row {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
}
.editor-slider {
    flex:1;
    -webkit-appearance:none;
    height:4px;
    border-radius:2px;
    background:var(--glass-border);
    outline:none;
}
.editor-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#ff9800;
    cursor:pointer;
    border:2px solid var(--bg-secondary);
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.editor-slider-val {
    font-size:11px;
    font-weight:600;
    color:var(--text-secondary);
    min-width:32px;
    text-align:right;
    font-variant-numeric:tabular-nums;
}
.editor-shape-btns {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}
.editor-shape-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width: 28px;
    height: 28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius: 4px;
    background: var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:border-color.15s,color.15s,background.15s;
}
.editor-shape-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.editor-shape-btn.active {
    border-color:var(--accent-primary);
    background:var(--accent-primary);
    color:#fff;
}
.editor-shape-btn svg {
    width:18px;
    height:18px;
    display:block;
}
.editor-action-row {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
}
.editor-action-divider {
    width:1px;
    height:28px;
    background:var(--glass-border);
    margin:0 2px;
    align-self:center;
}
.editor-action-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width: 28px;
    height: 28px;
    padding:0;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.editor-action-btn:hover:not(:disabled) {
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border-color:rgba(255,255,255,0.15);
}
.editor-action-btn:disabled {
    opacity:0.3;
    cursor:not-allowed;
}
.editor-action-danger:hover:not(:disabled) {
    background:rgba(239,68,68,0.15);
    color:#ef4444;
    border-color:rgba(239,68,68,0.3);
}
.editor-pages-area {
    position:relative;
    flex:1;
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    grid-template-rows:20px minmax(0,1fr);
    grid-template-areas:"corner h" "v scroll";
    overflow:hidden;
    min-width:0;
}
.ce-ruler-corner {
    grid-area:corner;
    position:relative;
    z-index:6;
    background:var(--bg-secondary);
    border-right:1px solid var(--glass-border);
    border-bottom:1px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
}
.ce-clear-guides {
    width:14px;
    height:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:4px;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    padding:0;
    transition:all 0.15s;
}
.ce-clear-guides:hover {
    background:rgba(239,68,68,0.15);
    color:#ef4444;
}
.ce-ruler {
    position:relative;
    overflow:hidden;
    background:var(--bg-secondary);
    z-index:5;
    user-select:none;
    cursor:crosshair;
    touch-action:none;
}
.ce-ruler-h {
    grid-area:h;
    border-bottom:1px solid var(--glass-border);
}
.ce-ruler-v {
    grid-area:v;
    border-right:1px solid var(--glass-border);
}
.ce-ruler-tick {
    position:absolute;
    background:var(--text-muted);
    opacity:0.5;
    pointer-events:none;
}
.ce-ruler-h .ce-ruler-tick { top:0; width:1px; height:5px; }
.ce-ruler-h .ce-ruler-tick.ce-ruler-tick-maj { height:9px; }
.ce-ruler-v .ce-ruler-tick { left:0; height:1px; width:5px; }
.ce-ruler-v .ce-ruler-tick.ce-ruler-tick-maj { width:9px; }
.ce-ruler-num {
    position:absolute;
    font-size:9px;
    line-height:9px;
    color:var(--text-muted);
    pointer-events:none;
    white-space:nowrap;
}
.ce-ruler-h .ce-ruler-num { top:2px; transform:translateX(3px); }
.ce-ruler-v .ce-ruler-num { left:4px; transform:translateY(-3px); }
.ce-ruler-readout {
    position:absolute;
    z-index:6;
    pointer-events:none;
}
.ce-ruler-readout-h {
    top:0;
    bottom:0;
    width:1px;
    background:#38bdf8;
}
.ce-ruler-readout-v {
    left:0;
    right:0;
    height:1px;
    background:#38bdf8;
}
.ce-ruler-readout .ce-ruler-readout-num {
    position:absolute;
    background:#38bdf8;
    color:#fff;
    font-size:9px;
    line-height:12px;
    padding:0 3px;
    border-radius:3px;
    white-space:nowrap;
}
.ce-ruler-readout-h .ce-ruler-readout-num { top:3px; left:2px; transform:translateX(-50%); }
.ce-ruler-readout-v .ce-ruler-readout-num { top:2px; left:4px; transform:translateY(-50%); }
.editor-pages-scroll {
    grid-area:scroll;
    flex:1;
    overflow-y:auto;
    padding: 24px 24px 0px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--glass-bg);
    background-image:radial-gradient(circle,var(--glass-border)1px,transparent 1px);
    background-size:20px 20px;
    min-width:0;
}
[data-theme="dark"].editor-pages-scroll {
    background-color:#1a1a1a;
    background-image:radial-gradient(circle,rgba(255,255,255,0.03)1px,transparent 1px);
}
[data-theme="dark"].editor-pages-scroll {
    background-color:#1a1a1a;
    background-image:radial-gradient(circle,rgba(255,255,255,0.03)1px,transparent 1px);
}
.editor-thumb-wrapper {
    display:flex;
    flex-shrink:0;
    height:100%;
    position:relative;
}
.editor-thumb-panel {
    width:250px;
    background:var(--bg-secondary);
    border-right:1px solid var(--glass-border);
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    height:100%;
}
.editor-thumb-toggle {
    position:absolute;
    right: -48px;
    top: 40px;
    transform:translateY(-50%);
    z-index: 5;
    width: 48px;
    height:28px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    color:var(--text-tertiary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
}
.editor-thumb-toggle:hover {
    color:var(--text-primary);
    background:var(--bg-tertiary);
}
.editor-thumb-header {
    display:flex;
    align-items:center;
    gap:6px;
    padding:12px 14px;
    font-size:10px;
    font-weight:700;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.8px;
    border-bottom:1px solid var(--glass-border);
    flex-shrink:0;
}
.editor-thumb-toggle {
    margin-left:auto;
    background: var(--bg-secondary);
    border:none;
    color:var(--text-tertiary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 2px 2px 2px 20px;
    border-radius:0 4px 4px 0;
    flex-shrink:0;
    transition:all 0.15s;
}
.editor-thumb-toggle:hover {
    color:var(--text-primary);
    background:var(--bg-secondary);
}
.editor-thumb-panel.collapsed {
    width:0;
    min-width:0;
    overflow:visible;
}
.editor-thumb-panel.collapsed.editor-thumb-header {
    padding:12px 0;
    justify-content:center;
    gap:0;
}
.editor-thumb-panel.collapsed.editor-thumb-header>svg,
.editor-thumb-panel.collapsed.editor-thumb-header>span {
    display:none;
}
.editor-thumb-panel.collapsed.editor-thumb-list {
    display:none;
}
.editor-thumb-panel.collapsed.editor-thumb-toggle {
    margin-left:0;
}
.editor-thumb-panel.collapsed.editor-thumb-toggle svg {
    transform:rotate(180deg);
}
.editor-thumb-list {
    flex:1;
    overflow-y:auto;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.ce-layers-panel .editor-thumb-panel {
    width:250px;
}
.ce-layers-panel .editor-thumb-panel .ce-layers-list {
    flex:1;
    max-height:none;
    padding:10px;
    min-height:0;
}
.ce-shapes-panel .editor-thumb-panel {
    width:250px;
}
.ce-shapes-panel .editor-thumb-panel .ce-shapes-list {
    flex:1;
    max-height:none;
    padding:10px;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    align-content:start;
    gap: 4px;
    overflow-y:auto;
}
body[data-tool="create"] .ce-shapes-panel .ce-shape-btn {
    flex-direction:column;
    width: 100%;
    justify-content:center;
    text-align:center;
    padding:8px 8px;
    height:auto;
    min-height:44px;
}
body[data-tool="create"] .ce-shapes-panel .ce-shape-btn span {
    flex:none;
    text-align:center;
    line-height:1.15;
}
.ce-shapes-list > .ai-tool-progress {
    grid-column:1 / -1;
    width:100%;
}
.ce-shapes-list > .ai-sub-title {
    grid-column:1 / -1;
    font-size: 10px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color: var(--text-tertiary);
    padding-bottom:2px;
}
.ce-ocr-panel .ce-ai-subpanel {
    flex:1;
    min-height:0;
    overflow-y:auto;
}
.ce-ocr-panel .ai-sub-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    padding:5px 8px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color: var(--text-tertiary);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
}
.ce-ocr-panel .ai-sub-btn:hover {
    border-color:var(--glass-border-hover);
}
.ce-ocr-panel .ai-sub-btn.active {
    border-color:#ff9800;
    color:#ff9800;
}
.ce-ocr-panel .ocr-preview {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:64px;
    max-height:112px;
    border:1px dashed var(--glass-border);
    border-radius:8px;
    background:var(--bg-primary);
    overflow:hidden;
    margin-bottom:8px;
}
.ce-ocr-panel .ocr-preview img {
    display:block;
    max-width:100%;
    max-height:106px;
    object-fit:contain;
}
.ce-ocr-panel .ai-ocr-run {
    margin-top:8px;
}
.ce-ocr-panel .ocr-status-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:14px;
    padding:4px 0;
}
.ce-ocr-panel .ocr-confidence {
    font-size:11px;
    font-weight:700;
    color:#ff9800;
    white-space:nowrap;
}
.ce-ocr-panel .ce-ai-subpanel .ocr-options-row {
    flex-direction:row;
    gap:8px;
    align-items:flex-start;
}
.ce-ocr-panel .ocr-option-col {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ce-ocr-panel .ce-ai-subpanel .ai-sub-row > .ai-scale-btns {
    margin-top:8px;
}
.ce-ocr-panel .ocr-result-text {
    width:100%;
    min-height:120px;
    padding:8px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--bg-primary);
    color:var(--text-primary);
    font-size:12px;
    font-family:inherit;
    line-height:1.5;
    resize:vertical;
}
.ce-ocr-panel .ocr-result-text:focus {
    outline:none;
    border-color:var(--glass-border-hover);
}
.ce-ai-subpanel {
    border-top:1px solid var(--glass-border);
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:9px;
}
.ce-upscale-panel .ce-ai-subpanel {
    flex:1;
    min-height:0;
    overflow-y:auto;
}
.ce-upscale-panel .ce-ai-subpanel .ai-tool-progress {
    flex:none;
    width:100%;
}
.ce-replace-panel .ce-ai-subpanel {
    flex:1;
    min-height:0;
    overflow-y:auto;
}
.ce-replace-panel .ce-ai-subpanel .replace-opt-cols {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.ce-replace-panel .ce-ai-subpanel .replace-opt-cols > label {
    flex:1 1 42%;
    min-width:92px;
}
.ce-replace-panel .ce-ai-subpanel .ai-scale-btns-replace {
    display:flex;
    flex-direction:row;
    gap:8px;
}
.ce-replace-panel .ce-ai-subpanel .ai-scale-btns-replace .ai-scale-btn {
    flex:1;
    width:auto;
}
.ce-replace-panel .ce-ai-subpanel .replace-msg {
    font-size:11px;
    font-weight:700;
    color:var(--text-secondary);
    min-height:15px;
}
.ce-replace-panel .ce-ai-subpanel .replace-msg.replace-err {
    color:#e67e22;
}
.ce-replace-panel .ce-ai-subpanel .replace-hint {
    line-height:1.5;
}
.ce-ai-subpanel .ai-sub-title {
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-secondary);
}
.ce-ai-subpanel .ai-sub-row {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-bottom:8px;
}
.ce-ai-subpanel .ai-sub-row:last-of-type {
    padding-bottom:0;
}
.ce-upscale-panel .ce-ai-subpanel .ai-upscale-run {
    margin-top:8px;
}
.ce-ai-subpanel .ai-sub-label {
    font-size:11px;
    color:var(--text-muted);
}
.ce-ai-subpanel .ai-sub-select {
    width:100%;
    padding:6px 8px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--bg-primary);
    color: var(--text-tertiary);
    font-size:12px;
    cursor:pointer;
}
.ce-ai-subpanel .ai-scale-btns {
    display:flex;
    gap:6px;
}
.ce-ai-subpanel .ai-scale-btn {
    flex:1;
    padding:6px 0;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
}
.ce-ai-subpanel .ai-scale-btn:hover {
    border-color:var(--glass-border-hover);
}
.ce-ai-subpanel .ai-scale-btn.active {
    border-color:#ff9800;
    color:#ff9800;
    background:rgba(255,152,0,0.1);
}
.ce-ai-subpanel .ai-sub-range {
    width:100%;
    accent-color:#ff9800;
}
.ce-ai-subpanel .ai-sub-row.ai-sub-slider-row {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
}
.ce-ai-subpanel .ai-sub-slider-row .ai-sub-range {
    flex:1;
    min-width:0;
}
.ce-ai-subpanel .ai-sub-slider-row .ai-sub-label {
    flex:0 0 auto;
    margin:0;
}
.ce-ai-subpanel .ai-sub-slider-row .ai-sub-range-val {
    flex:0 0 auto;
    min-width:36px;
    text-align:center;
}
.ce-ai-subpanel .ai-sub-range-val {
    font-weight:700;
    color:#ff9800;
    background:rgba(255,152,0,0.12);
    border-radius:5px;
    padding:1px 6px;
    font-size:11px;
}
.ce-ai-subpanel .ai-upscale-run {
    width:100%;
    height:34px;
    border:1px solid #ff9800;
    border-radius:8px;
    background:rgba(255,152,0,0.12);
    color:#ff9800;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
    justify-content:center;
}
.ce-ai-subpanel .ai-upscale-run:hover {
    background:rgba(255,152,0,0.22);
}
.ce-ai-subpanel .ai-upscale-run:disabled {
    opacity:0.45;
    cursor:not-allowed;
}
.ce-ai-subpanel .ai-tool-progress {
    width:100%;
}
body[data-tool="create"] .ce-ai-panel .ce-ai-subpanel .ai-upscale-run span {
    flex:none;
}
.editor-thumb-panel.collapsed > .ce-layers-list,
.editor-thumb-panel.collapsed > .ce-shapes-list {
    display:none;
}
.ce-layers-panel .editor-thumb-panel.collapsed,
.ce-shapes-panel .editor-thumb-panel.collapsed {
    width:0;
    min-width:0;
    overflow:visible;
}
.editor-thumb-panel.collapsed > .editor-thumb-header {
    display:none;
}
.editor-canvas-col {
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
}
.ce-pages-strip {
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-shrink:0;
    height:80px;
    box-sizing:border-box;
    background:var(--bg-secondary);
    border-top:1px solid var(--glass-border);
    padding:6px 14px 6px;
    min-height:0;
}
.ce-pages-strip-list {
    flex:1;
    min-height:0;
    flex-direction:row;
    align-items:center;
    overflow-x:hidden;
    overflow-y:hidden;
    max-height:none;
    padding:0 2px 2px;
    gap:8px;
}
.ce-pages-scroll {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:30px;
    height: 58px;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-pages-scroll:hover {
    color:var(--text-primary);
    border-color:var(--glass-border-hover);
    background:var(--bg-tertiary);
}
.ce-pages-scroll-left {
    margin-right:8px;
}
.ce-pages-scroll-right {
    margin-left:8px;
}
.ce-pages-strip-list .editor-thumb-item {
    width:50px;
    height:60px;
}
.ce-pages-strip > .ce-thumb-actions {
    width:auto;
    padding:0;
    flex-shrink:0;
    align-items:center;
    margin-left:8px;
}
.ce-pages-strip > .ce-thumb-actions .ce-add-page-btn {
    width:auto;
    flex:none;
    padding: 21px 10px;
}
.editor-thumb-item {
    position:relative;
    cursor:pointer;
    border-radius: 4px;
    overflow:hidden;
    border: 0px solid transparent;
    transition:border-color 0.15s,box-shadow 0.15s;
    background:#fff;
    flex-shrink:0;
    box-shadow: 1px 1px 4px rgba(15, 23, 42, 0.18);
}
.editor-thumb-item:hover {
    border-color:var(--glass-border-hover);
}
.editor-thumb-item.ce-thumb-drag {
    opacity:0.4;
}
.editor-thumb-item.ce-thumb-drop {
    border-color:#6366f1;
    box-shadow:0 0 0 2px rgba(99,102,241,0.25);
}
.editor-thumb-item.active {
    border: 1px dashed #ff9800;
    transform:none;
    opacity:1;
}
.editor-thumb-item canvas,
.editor-thumb-item img {
    width:100%;
    display:block;
    pointer-events:none;
}
.editor-thumb-num {
    position:absolute;
    bottom: 1px;
    left:50%;
    transform:translateX(-50%);
    padding: 3px 5px 2px 5px;
    border-radius:8px;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size: 9px;
    font-weight:600;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.15s;
    line-height: 1.1;
}
.editor-thumb-item:hover .editor-thumb-num {
    opacity:1;
}
.ed-page-wrapper {
    position:relative;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    border-radius:2px;
    flex-shrink:0;
    margin-bottom:24px;
    overflow:hidden;
}
.ed-page-transform {
    position:relative;
}
.ed-page-canvas {
    display:block;
}
.ed-text-layer {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    line-height:1;
    pointer-events:none;
    z-index:2;
    display:none;
}
.ed-text-layer>span {
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    pointer-events:auto;
    transform-origin:0%0%;
}
.ed-text-layer::selection {
    background:rgba(99,102,241,0.3);
}
.ed-text-layer.highlight {
    margin:-1px;
    padding:1px;
    background-color:rgba(255,255,0,0.4);
}
.ed-annotation-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:auto;
    z-index:3;
}
.ed-ann {
    position:absolute;
    cursor:move;
    pointer-events:auto;
    box-sizing:border-box;
}
.ed-ann.selected {
    outline:2px solid var(--accent-primary);
    outline-offset:0px;
}
.ed-ann .ed-resize-handle {
    display:none;
    position:absolute;
    width:8px;
    height:8px;
    background:var(--accent-primary);
    border:1px solid#fff;
    border-radius:1px;
    z-index:10;
    pointer-events:auto;
}
.ed-ann.selected .ed-resize-handle {
    display:block;
}
.ed-rh-nw {
    top:-4px;
    left:-4px;
    cursor:nw-resize;
}
.ed-rh-ne {
    top:-4px;
    right:-4px;
    cursor:ne-resize;
}
.ed-rh-sw {
    bottom:-4px;
    left:-4px;
    cursor:sw-resize;
}
.ed-rh-se {
    bottom:-4px;
    right:-4px;
    cursor:se-resize;
}
.ed-rh-tip {
    right:-10px;
    top:50%;
    margin-top:-6px;
    width:12px;
    height:12px;
    border-radius:50%;
    cursor:grab;
}
.ed-rh-n {
    top:-4px;
    left:50%;
    margin-left:-4px;
    cursor:n-resize;
}
.ed-rh-s {
    bottom:-4px;
    left:50%;
    margin-left:-4px;
    cursor:s-resize;
}
.ed-rh-e {
    right:-4px;
    top:50%;
    margin-top:-4px;
    cursor:e-resize;
}
.ed-rh-w {
    left:-4px;
    top:50%;
    margin-top:-4px;
    cursor:w-resize;
}
.ed-rotate-handle {
    position:absolute;
    top:-26px;
    left:50%;
    margin-left:-8px;
    width:16px;
    height:16px;
    background:var(--accent-primary);
    border:1px solid#fff;
    border-radius:50%;
    cursor:grab;
    z-index:10;
    pointer-events:auto;
    display:none;
    box-sizing:border-box;
}
.ed-ann.selected .ed-rotate-handle {
    display:block;
}
.ed-del-handle {
    position:absolute;
    top:-10px;
    right:-10px;
    width:18px;
    height:18px;
    background:#ef4444;
    color:#fff;
    border-radius:50%;
    font-size:10px;
    line-height:18px;
    text-align:center;
    cursor:pointer;
    z-index:11;
    pointer-events:auto;
    display:none;
}
.ed-ann.selected .ed-del-handle {
    display:block;
}
.ed-ann.text-ann {
    background:transparent;
    border:none;
    min-width:20px;
    min-height:14px;
    padding:2px 4px;
    overflow:visible;
    word-break:break-word;
    white-space:pre-wrap;
}
.ed-ann.text-ann.editing {
    outline:2px solid var(--accent-primary);
    background:rgba(99,102,241,0.05);
    cursor:text;
}
.ed-ann.image-ann img {
    width:100%;
    height:100%;
    object-fit:fill;
    pointer-events:none;
}
.ed-ann.highlight-ann {
    background:rgba(0,0,0,0.001);
    border:none;
    overflow:visible;
    cursor:move;
    pointer-events:auto;
}
.ed-ann.arrow-ann {
    background:transparent;
    border:none;
    overflow:visible;
}
.ed-ann.draw-ann {
    background:transparent;
    border:none;
    overflow:visible;
}
.ed-ann.draw-ann svg {
    position:absolute;
    left:0;
    top:0;
    overflow:visible;
}
.ed-ann.sticky-ann {
    background:#fef08a;
    border:1px solid#eab308;
    border-radius:3px;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    overflow:hidden;
    font-family:Arial,sans-serif;
    cursor:move;
    box-sizing:border-box;
}
.ed-ann.sticky-ann.sticky-content {
    width:100%;
    height:100%;
    padding:6px 8px;
    font-size:12px;
    line-height:1.4;
    color:#422006;
    white-space:pre-wrap;
    overflow:hidden;
    word-break:break-word;
}
.ed-ann.sticky-ann.sticky-pin {
    position:absolute;
    top:4px;
    right:4px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ef4444;
    border:1px solid rgba(0,0,0,0.2);
}
.ed-text-inline-edit {
    background:transparent;
    border:1px solid var(--accent-primary);
    outline:none;
    resize:none;
    overflow:hidden;
    padding:2px 4px;
    width:100%;
    height:100%;
    font-family:Arial,sans-serif;
    color:inherit;
}
.ed-draw-preview {
    position:absolute;
    pointer-events:none;
    border:1px dashed var(--accent-primary);
    background:rgba(99,102,241,0.08);
    z-index:5;
}
.editor-status-bar {
    position:absolute;
    bottom:42px;
    left:0;
    right:0;
    height:32px;
    background:rgba(251,146,60,0.12);
    display:none;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:600;
    color:#f97316;
    z-index:20;
    border-top:1px solid rgba(251,146,60,0.3);
}
.editor-status-bar.active {
    display: none;
}
.editor-footerbar {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    height:42px;
    background:var(--bg-secondary);
    border-top:1px solid var(--glass-border);
    flex-shrink:0;
    z-index:10;
}
.editor-footerbar-left,
.editor-footerbar-right {
    display:flex;
    align-items:center;
    gap:4px;
}
.editor-footerbar-center {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:4px;
    direction:ltr;
}
.editor-transform-controls {
    display:flex;
    align-items:center;
    gap:6px;
}
.editor-transform-item {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
}
.editor-transform-label {
    font-size:10px;
    font-weight:600;
    color:var(--text-tertiary);
    white-space:nowrap;
}
.editor-transform-divider {
    width:1px;
    height:20px;
    background:var(--glass-border);
    margin:0 2px;
    flex-shrink:0;
}
.editor-transform-stepper {
    position:relative;
    display:inline-flex;
    align-items:stretch;
}
.editor-transform-input {
    width:56px;
    height:22px;
    padding:0 16px 0 4px;
    font-size:11px;
    text-align:center;
    color:var(--text-primary);
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
    border-radius:5px;
    outline:none;
    box-sizing:border-box;
    font-variant-numeric:tabular-nums;
    -moz-appearance:textfield;
    appearance:textfield;
}
.editor-transform-input::-webkit-outer-spin-button,
.editor-transform-input::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}
.editor-transform-input:focus {
    border-color:var(--accent-primary);
}
.editor-transform-input:disabled {
    opacity:0.5;
    cursor:not-allowed;
}
.editor-transform-steps {
    position:absolute;
    top:1px;
    right:1px;
    bottom:1px;
    width:14px;
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--glass-border);
}
.editor-transform-step {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    padding:0;
}
.editor-transform-step + .editor-transform-step {
    border-top:1px solid var(--glass-border);
}
.editor-transform-step:hover {
    background:var(--bg-secondary);
    color:var(--text-primary);
}
.editor-transform-input:disabled + .editor-transform-steps .editor-transform-step {
    opacity:0.4;
    cursor:not-allowed;
    pointer-events:none;
}
.editor-transform-stepper--full {
    display:block;
    width:100%;
}
.editor-transform-stepper--full > .editor-text-input {
    width:100%;
    padding-right:20px;
    -moz-appearance:textfield;
    appearance:textfield;
}
.editor-transform-stepper--full > .editor-text-input::-webkit-outer-spin-button,
.editor-transform-stepper--full > .editor-text-input::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}
.editor-transform-stepper--full > .editor-text-input:disabled + .editor-transform-steps .editor-transform-step {
    opacity:0.4;
    cursor:not-allowed;
    pointer-events:none;
}
.editor-transform-btn {
    width:26px;
    height:22px;
    border:none;
    border-radius:5px;
    background:transparent;
    color:var(--text-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.15s;
    flex-shrink:0;
}
.editor-transform-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}
.editor-transform-btn.active {
    background:var(--accent-primary);
    color:#fff;
}
.editor-transform-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.editor-transform-btn:disabled:hover {
    background:transparent;
    color:var(--text-secondary);
}
.sign-modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:3000;
    padding:20px;
}
.sign-modal {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-xl);
    width:100%;
    max-width:540px;
    max-height:90vh;
    overflow-y:auto;
    padding:28px;
    box-shadow:0 25px 60px rgba(0,0,0,0.3);
}
.sign-modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}
.sign-modal-header h3 {
    font-family:var(--font-display);
    font-size:20px;
    font-weight:700;
}
.sign-modal-close {
    width:32px;
    height:32px;
    border-radius:var(--border-radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-tertiary);
    transition:var(--transition-fast);
    background:none;
    border:none;
    cursor:pointer;
}
.sign-modal-close:hover {
    background:rgba(239,68,68,0.1);
    color:#ef4444;
}
.sign-tabs {
    display:flex;
    gap:4px;
    margin-bottom:20px;
    background:var(--glass-bg);
    border-radius:var(--border-radius-md);
    padding:4px;
}
.sign-tab {
    flex:1;
    padding:10px 16px;
    border:none;
    border-radius:var(--border-radius-sm);
    background:transparent;
    font-size:14px;
    font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
}
.sign-tab:hover {
    color:var(--text-primary);
}
.sign-tab.active {
    background:var(--accent-primary);
    color:#fff;
    box-shadow:0 2px 8px rgba(99,102,241,0.3);
}
.sign-panel {
    display:none;
}
.sign-panel.active {
    display:block;
}
.sign-canvas-wrap {
    background:#fff;
    border:2px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    overflow:hidden;
    margin-bottom:12px;
}
.sign-canvas-wrap canvas {
    display:block;
    width:100%;
    cursor:crosshair;
}
.sign-draw-tools {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.sign-tool-group {
    display:flex;
    align-items:center;
    gap:6px;
}
.sign-tool-group label {
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
}
.sign-tool-group input[type="color"] {
    width:28px;
    height:28px;
    border:2px solid var(--glass-border);
    border-radius:var(--border-radius-sm);
    cursor:pointer;
    padding:0;
    background:none;
}
.sign-tool-group input[type="range"] {
    width:80px;
    accent-color:var(--accent-primary);
}
.sign-type-controls {
    display:flex;
    flex-direction:column;
    gap:12px;
}
.sign-text-input {
    width:100%;
    padding:12px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:24px;
    color:var(--text-primary);
    outline:none;
    transition:var(--transition-fast);
    box-sizing:border-box;
}
.sign-text-input:focus {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.sign-font-select {
    width:100%;
    padding:10px 14px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    color:var(--text-primary);
    outline:none;
    cursor:pointer;
    box-sizing:border-box;
}
.sign-type-controls.sign-tool-group {
    margin-top:4px;
}
.sign-upload-area {
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-md);
    padding:32px;
    text-align:center;
    cursor:pointer;
    transition:var(--transition-base);
    position:relative;
}
.sign-upload-area:hover {
    border-color:var(--accent-primary);
    background:rgba(99,102,241,0.03);
}
.sign-upload-area input[type="file"] {
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}
.sign-upload-area p {
    font-size:13px;
    color:var(--text-secondary);
    margin-top:8px;
}
.sign-upload-preview {
    max-width:280px;
    max-height:80px;
    object-fit:contain;
    margin:0px auto;
    margin-top:14px;
}
.sign-remove-bg-label {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    font-size:14px;
    color:var(--text-secondary);
    cursor:pointer;
    user-select:none;
}
.sign-remove-bg-label input[type="checkbox"] {
    width:16px;
    height:16px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.sign-preview {
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--glass-border);
}
.sign-preview h4 {
    font-size:12px;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-bottom:8px;
}
.sign-preview-box {
    background:#fff;
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    padding:16px;
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sign-preview-img {
    max-width:100%;
    max-height:80px;
    object-fit:contain;
}
.sign-modal-actions {
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
}
.sign-pdf-area {
    display:flex;
    justify-content:center;
    margin-bottom:12px;
    overflow:auto;
    max-height:calc(90vh - 260px);
    padding:8px;
    background:var(--glass-bg);
    border-radius:var(--border-radius-md);
}
.sign-page-wrapper {
    position:relative;
    display:inline-block;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
    border-radius:2px;
    line-height:0;
}
.sign-page-wrapper canvas {
    display:block;
}
.sign-draggable {
    position:absolute;
    cursor:move;
    user-select:none;
    -webkit-user-select:none;
    opacity:0.85;
    transition:opacity 0.15s;
    border:2px dashed rgba(99,102,241,0.5);
    border-radius:2px;
    z-index:10;
}
.sign-draggable:hover {
    opacity:1;
}
.sign-page-nav {
    display:none;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:12px;
}
.sign-page-nav span {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    min-width:100px;
    text-align:center;
}
.sign-place-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.sign-size-control {
    display:flex;
    align-items:center;
    gap:8px;
}
.sign-size-control label {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
}
.sign-size-control input[type="range"] {
    width:120px;
    accent-color:var(--accent-primary);
}
.sign-size-control span {
    font-size:13px;
    font-weight:700;
    color:var(--accent-primary);
    min-width:36px;
}
.lock-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    backdrop-filter:blur(12px);
    display:none;
}
.lock-options-title {
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
}
.lock-field {
    margin-bottom:14px;
}
.lock-field label {
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:6px;
}
.lock-input {
    width:100%;
    padding:10px 14px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    color:var(--text-primary);
    outline:none;
    transition:var(--transition-fast);
    box-sizing:border-box;
}
.lock-input:focus {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.lock-input::placeholder {
    color:var(--text-muted);
}
.lock-permissions {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--glass-border);
}
.lock-check {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-size:14px;
    color:var(--text-secondary);
}
.lock-check input[type="checkbox"] {
    width:18px;
    height:18px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.rotate-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
}
.rotate-angle-selector,
.rotate-scope-selector {
    margin-bottom:16px;
}
.rotate-angle-selector:last-child,
.rotate-scope-selector:last-child {
    margin-bottom:0;
}
.rotate-angle-selector h4,
.rotate-scope-selector h4 {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:10px;
}
.angle-buttons,
.scope-buttons {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.angle-btn,
.scope-btn {
    flex:1;
    padding:10px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.angle-btn:hover,
.scope-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.angle-btn.active,
.scope-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.page-numbers-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
}
.pn-section {
    margin-bottom:16px;
}
.pn-section:last-child {
    margin-bottom:0;
}
.pn-section h4 {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:10px;
}
.pn-row {
    display:flex;
    gap:16px;
    margin-bottom:16px;
}
.pn-row:last-child {
    margin-bottom:0;
}
.pn-half {
    flex:1;
    margin-bottom:0;
}
.pn-position-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}
.pn-pos-btn {
    padding:10px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:16px;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.pn-pos-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.pn-pos-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.pn-format-buttons {
    display:flex;
    flex-direction:column;
    gap:6px;
}
.pn-format-btn {
    padding:8px 12px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:13px;
    font-family:monospace;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:left;
}
.pn-format-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.pn-format-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.pn-font-row {
    margin-top:10px;
}
.pn-font-row label {
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:6px;
}
.watermark-options {
    margin-top:20px;
    padding:20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
}
.wm-row {
    display:flex;
    gap:16px;
    margin-bottom:16px;
}
.wm-row:last-child {
    margin-bottom:0;
}
.wm-section {
    margin-bottom:0;
}
.wm-full {
    flex:1;
}
.wm-half {
    flex:1;
}
.wm-section h4 {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:10px;
}
.wm-range {
    width:100%;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.wm-range-val {
    font-size:13px;
    font-weight:600;
    color:var(--accent-primary);
    margin-left:8px;
}
.wm-rotation-buttons {
    display:flex;
    gap:6px;
}
.wm-rot-btn {
    flex:1;
    padding:8px 12px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.wm-rot-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.wm-rot-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.wm-color-buttons {
    display:flex;
    gap:8px;
}
.wm-color-btn {
    width:32px;
    height:32px;
    border-radius:50%;
    border:2px solid var(--glass-border);
    cursor:pointer;
    transition:var(--transition-fast);
}
.wm-color-btn:hover {
    border-color:var(--text-primary);
    transform:scale(1.1);
}
.wm-color-btn.active {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 2px var(--accent-primary);
}
.wm-position-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}
.wm-pos-btn {
    padding:10px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:16px;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.wm-pos-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.wm-pos-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.wm-type-buttons {
    display:flex;
    gap:8px;
}
.wm-type-btn {
    flex:1;
    padding:10px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:14px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
    text-align:center;
}
.wm-type-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.wm-type-btn.active {
    background:var(--gradient-secondary);
    border-color:var(--accent-primary);
    color:white;
}
.wm-image-upload {
    padding:20px;
    background:var(--glass-bg);
    border:2px dashed var(--glass-border);
    border-radius:var(--border-radius-md);
    text-align:center;
    cursor:pointer;
    transition:var(--transition-fast);
}
.wm-image-upload:hover {
    border-color:var(--accent-primary);
}
.wm-image-upload p {
    font-size:13px;
    color:var(--text-muted);
    margin:0;
}
.wm-image-name {
    margin-top:8px!important;
    font-weight:600;
    color:var(--accent-primary)!important;
}
.org-load-btn {
    flex-shrink:0;
    white-space:nowrap;
    gap:4px;
}
.org-load-active {
    pointer-events:none;
    opacity:0.8;
}
.org-pages-wrap {
    margin-top:20px;
}
@media(max-width:860px) {
    .org-pages-wrap {
        padding:0 16px;
    }
}
.org-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg)var(--border-radius-lg)0 0;
    flex-wrap:wrap;
    gap:10px;
}
.org-toolbar-left,
.org-toolbar-right {
    display:flex;
    align-items:center;
    gap:12px;
}
.org-check-label {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    user-select:none;
}
.org-check-label input[type="checkbox"] {
    width:16px;
    height:16px;
    accent-color:var(--accent-primary);
    cursor:pointer;
}
.org-page-count {
    font-size:13px;
    color:var(--text-muted);
}
.org-action-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    cursor:pointer;
    transition:var(--transition-fast);
}
.org-action-btn:hover:not(:disabled) {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.org-action-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.org-action-danger:hover:not(:disabled) {
    border-color:#ef4444;
    color:#ef4444;
}
.org-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:20px;
    padding:24px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-top:none;
    border-radius:0 0 var(--border-radius-lg)var(--border-radius-lg);
    min-height:200px;
}
.org-page {
    position:relative;
    background:#fff;
    border:2px solid transparent;
    border-radius:8px;
    overflow:hidden;
    cursor:grab;
    transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;
    user-select:none;
}
.org-page:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-2px);
}
.org-page.selected {
    border-color:var(--accent-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.25);
}
.org-page.dragging {
    opacity:0.4;
    transform:scale(0.95);
}
.org-page.drag-over {
    border-color:var(--accent-primary);
    border-style:dashed;
}
.org-page-check {
    position:absolute;
    top:6px;
    left:6px;
    width:22px;
    height:22px;
    border-radius:6px;
    background:rgba(255,255,255,0.9);
    border:2px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition-fast);
    z-index:2;
}
.org-page.selected.org-page-check {
    background:var(--accent-primary);
    border-color:var(--accent-primary);
}
.org-page.selected.org-page-check svg {
    display:block;
}
.org-page-check svg {
    display:none;
    width:12px;
    height:12px;
    stroke:#fff;
    stroke-width:3;
    fill:none;
}
.org-page-num {
    position:absolute;
    bottom:6px;
    left:50%;
    transform:translateX(-50%);
    padding:2px 8px;
    border-radius:10px;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:11px;
    font-weight:600;
    z-index:2;
}
.org-page-thumb {
    width:100%;
    aspect-ratio:1/1.414;
    display:block;
    object-fit:contain;
    background:#fff;
}
.org-page-actions {
    position:absolute;
    top:6px;
    right:6px;
    display:flex;
    gap:4px;
    opacity:0;
    transition:opacity 0.15s;
    z-index:2;
}
.org-page:hover.org-page-actions {
    opacity:1;
}
.org-page-btn {
    width:26px;
    height:26px;
    border-radius:6px;
    background:rgba(255,255,255,0.9);
    border:1px solid var(--glass-border);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:var(--transition-fast);
    color:var(--text-secondary);
}
.org-page-btn:hover {
    background:var(--accent-primary);
    border-color:var(--accent-primary);
    color:#fff;
}
.org-page-btn.org-page-btn-danger:hover {
    background:#ef4444;
    border-color:#ef4444;
}
@media(max-width:640px) {
    .org-grid {
        grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
        gap:10px;
        padding:12px;
    }
    .org-toolbar {
        flex-direction:column;
        align-items:flex-start;
    }
}
.pw-format-toggle {
    margin:20px 0;
    padding:16px 20px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    display:flex;
    align-items:center;
    gap:16px;
}
.pw-format-label {
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
}
.pw-format-options {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    flex:1;
}
.pw-format-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:12px 14px;
    border:1px dashed var(--glass-border);
    border-radius:var(--border-radius-sm);
    background:var(--glass-bg);
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:var(--transition-base);
}
.pw-format-btn:hover {
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
.pw-format-btn.active {
    background:rgba(99,102,241,0.1);
    border-color:var(--accent-primary);
    color:var(--accent-primary);
    border-style:solid;
}
@media(max-width:480px) {
    .pw-format-toggle {
        flex-direction:column;
        align-items:stretch;
    }
    .pw-format-label {
        text-align:center;
    }
}
/* Content Enrichment: intro, why, faq, related tools */
.tool-intro {
    max-width:720px;
    margin:0 auto 40px;
    font-size:15px;
    line-height:1.7;
    color:var(--text-secondary);
    text-align:center;
}
.why-section {
    margin-top:48px;
    padding:32px;
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    backdrop-filter:blur(12px);
}
.why-section h2,
.faq-section h2,
.related-tools h2 {
    font-family:var(--font-display);
    font-size:24px;
    font-weight:700;
    margin-bottom:16px;
    text-align:center;
}
.why-section > p {
    font-size:14px;
    line-height:1.7;
    color:var(--text-secondary);
    margin-bottom:20px;
    text-align:center;
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}
.why-section ul {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:10px;
    list-style:none;
    padding:0;
    margin:0;
}
.why-section li {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    color:var(--text-primary);
    padding:12px 16px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
}
.why-section li::before {
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent-primary);
    flex-shrink:0;
    margin-top:6px;
}
.faq-section {
    margin-top:48px;
}
.faq-section h2 {
    margin-bottom:32px;
}
.faq-section h3 {
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
}
.faq-section p {
    font-size:14px;
    line-height:1.7;
    color:var(--text-secondary);
    margin-bottom:20px;
}
.related-tools {
    margin-top:48px;
    margin-bottom:48px;
}
.related-tools h2 {
    margin-bottom:24px;
}
.related-tools-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
}
.related-tools-grid a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-md);
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    transition:var(--transition-fast);
}
.related-tools-grid a:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
    transform:translateY(-2px);
}
.cta-section {
    margin-top:48px;
    padding:56px 40px;
    background:var(--gradient-primary);
    border-radius:var(--border-radius-xl);
    text-align:center;
    color:white;
}
.cta-section h2 {
    font-family:var(--font-display);
    font-size:28px;
    font-weight:800;
    margin-bottom:12px;
}
.cta-section p {
    font-size:15px;
    line-height:1.6;
    opacity:0.95;
    margin-bottom:28px;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
}
.cta-section .btn-primary {
    background:white;
    color:var(--accent-primary);
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
.cta-section .btn-primary:hover {
    box-shadow:0 8px 28px rgba(0,0,0,0.25);
}
@media (max-width:768px) {
    .why-section {
        padding:24px 20px;
    }
    .why-section ul {
        grid-template-columns:1fr;
    }
    .related-tools-grid {
        grid-template-columns:1fr;
    }
}
[dir="rtl"] .breadcrumb {
    flex-direction:row-reverse;
}
[dir="rtl"] .how-step-tip {
    border-left:0;
    border-right:3px solid var(--accent-primary);
    border-radius:var(--border-radius-sm) 0 0 var(--border-radius-sm);
    text-align:right;
}
[dir="rtl"] .breadcrumb svg {
    transform:scaleX(-1);
}
[dir="rtl"] .editor-sidebar {
    border-left:none;
    border-right:1px solid var(--glass-border);
}
[dir="rtl"] .editor-thumb-panel {
    border-right:none;
    border-left:1px solid var(--glass-border);
}
[dir="rtl"] .editor-tool-btn {
    text-align:right;
}
[dir="rtl"] .editor-slider-val {
    text-align:left;
}
[dir="rtl"] .ed-rh-n,
[dir="rtl"] .ed-rh-s {
    left:auto;
    right:50%;
    margin-left:0;
    margin-right:-4px;
}
[dir="rtl"] .tool-options.option-group {
    text-align:right;
}
[dir="rtl"] .result-actions {
    flex-direction:row-reverse;
}
[dir="rtl"] .upload-zone svg,
[dir="rtl"] .upload-zone.upload-icon {
    transform:scaleX(-1);
}
.how-step-media { width: 100%; object-fit: contain; border-radius: var(--border-radius-md); }

/* ============================================
   Create PDF tool
   ============================================ */
/* ---- Setup view format panel ---- */
.create-format {
    background:var(--bg-card);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    padding:24px;
    margin-bottom:32px;
}
.create-format-head {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.create-format-icon {
    width:46px;
    height:46px;
    border-radius:12px;
    background:rgba(99,102,241,0.1);
    color:#6366f1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.create-format-head h3 {
    font-family:var(--font-display);
    font-size:18px;
    font-weight:700;
    margin-bottom:2px;
}
.create-format-head p {
    font-size:13px;
    color:var(--text-secondary);
}
.create-format-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin-bottom:20px;
}
.create-format-field .editor-ctrl-label {
    display:block;
    margin-bottom:6px;
}
.create-format-field-action {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}
.create-format-field-action .btn {
    width:100%;
    padding: 10px;
    border-radius: 8px;
}
@media (max-width:600px) {
    .create-format-grid { grid-template-columns:1fr; }
}

/* ---- Editor: page area ---- */
body.editor-mode { overflow:hidden; }
.ce-page-wrap {
    position:relative;
    margin:0 auto 32px;
    flex-shrink:0;
}
.ce-page {
    position:relative;
    background:#ffffff;
    box-shadow: 0 0px 8px rgba(15,23,42,0.18);
    border-radius: 6px;
    overflow:hidden;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}
.ce-page-anim-next {
    animation:cePageInRight 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ce-page-anim-prev {
    animation:cePageInLeft 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes cePageInRight {
    from { transform:translateX(42px) scale(0.86) translateY(14px); opacity:0; }
    to { transform:translateX(0) scale(1) translateY(0); opacity:1; }
}
@keyframes cePageInLeft {
    from { transform:translateX(-42px) scale(0.86) translateY(14px); opacity:0; }
    to { transform:translateX(0) scale(1) translateY(0); opacity:1; }
}
.ce-item-bounce {
    animation:ceItemPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ce-item-land {
    animation:ceItemLand 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ceItemLand {
    0% { transform:scale(1); }
    40% { transform:scale(1.12); }
    65% { transform:scale(0.96); }
    100% { transform:scale(1); }
}
@keyframes ceItemPop {
    0% { transform:scale(0.5); opacity:0; }
    70% { transform:scale(1.06); opacity:1; }
    100% { transform:scale(1); opacity:1; }
}
.ce-item-delete {
    animation:ceItemDelete 0.22s ease-in forwards;
    pointer-events:none;
}
@keyframes ceItemDelete {
    0% { transform:scale(1); opacity:1; }
    30% { transform:scale(1.15); opacity:1; }
    100% { transform:scale(0.2); opacity:0; }
}
.ce-animating {
    transition:left .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                top .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                width .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                height .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform .2s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity .2s ease;
    will-change:left, top, width, height, transform;
}
.ce-page-flash {
    animation:cePageFlash 0.3s ease-out;
}
@keyframes cePageFlash {
    0% { box-shadow:0 0 0 3px rgba(99,102,241,0.6); }
    100% { box-shadow:0 0 0 0 rgba(99,102,241,0); }
}

/* ---- Ruler guides ---- */
.ce-guide {
    position:absolute;
    pointer-events:auto;
    cursor:move;
    z-index:4;
    touch-action:none;
}
.ce-guide-v {
    top:0;
    bottom:0;
    width:5px;
    margin-left:-2px;
}
.ce-guide-h {
    left:0;
    right:0;
    height:5px;
    margin-top:-2px;
}
.ce-guide-v::after {
    content:'';
    position:absolute;
    left:2px;
    top:0;
    bottom:0;
    width:1px;
    background:repeating-linear-gradient(to bottom, #ff9800 0 6px, transparent 6px 12px);
}
.ce-guide-h::after {
    content:'';
    position:absolute;
    top:2px;
    left:0;
    right:0;
    height:1px;
    background:repeating-linear-gradient(to right, #ff9800 0 6px, transparent 6px 12px);
}
.ce-guide-temp {
    pointer-events:none;
    z-index:5;
}
.ce-guide-temp::after {
    background:#ff9800;
}

/* ---- Add page button in thumbnails ---- */
.ce-thumb-actions {
    display:flex;
    gap:6px;
    flex-shrink:0;
}
.ce-thumb-actions .ce-add-page-btn {
    width:auto;
    flex:1;
    padding:8px 4px;
}
.ce-add-page-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 10px;
    border:1.5px dashed var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
    flex-shrink:0;
    width:100%;
}
.ce-add-page-btn:hover {
    border-color:#ff9800;
    color:#ff9800;
    background:rgba(255,152,0,0.06);
}
.ce-add-page-btn.ce-page-btn-danger:hover {
    border-color:#ef4444;
    color:#ef4444;
    background:rgba(239,68,68,0.06);
}
.ce-add-page-btn.ce-page-btn-neutral:hover {
    border-color:var(--text-secondary);
    color:var(--text-primary);
    background:rgba(255,255,255,0.05);
}

/* ---- Items ---- */
.ce-item {
    position:absolute;
    cursor:move;
    box-sizing:border-box;
    touch-action:none;
}
.ce-item.ce-flip-anim {
    transition: transform 0.22s ease-in-out;
}
.ce-page.ce-flying .ce-selection,
.ce-page.ce-flying .ce-selection * {
    display:none !important;
}
.ce-item-inner {
    position:absolute;
    inset:0;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
}
.ce-item-text {
    display:block;
    padding:0;
    word-break:break-word;
}
.ce-item.ce-item-line .ce-item-inner,
.ce-item.ce-item-arrow .ce-item-inner {
    overflow:visible;
}
.ce-item.ce-item-measure .ce-item-inner {
    overflow:visible;
}
.ce-item.ce-item-rect .ce-item-inner,
.ce-item.ce-item-circle .ce-item-inner {
    display:block;
    box-sizing:border-box;
}
.ce-item.ce-item-image .ce-item-inner img {
    width:100%;
    height:100%;
    object-fit:fill;
    display:block;
    pointer-events:none;
    user-select:none;
}
.ce-svg-box,
.ce-svg-box svg {
    width:100%;
    height:100%;
    display:block;
}
.ce-svg-box svg { overflow:visible; }
.ce-table {
    font-family:var(--font-body);
    font-size:13px;
}
.ce-item.ce-item-table .ce-item-inner {
    padding:0;
}
.ce-item.ce-item-line,
.ce-item.ce-item-arrow,
.ce-item.ce-item-measure { cursor:move; }

.ce-item.ce-item-pen .ce-item-inner,
.ce-item.ce-item-highlight .ce-item-inner {
    overflow:visible;
}
.ce-item.ce-item-pen .ce-item-inner svg,
.ce-item.ce-item-highlight .ce-item-inner svg {
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}
.ce-item.ce-hover {
    outline:1.5px dashed #ff9800;
    outline-offset:1px;
    cursor:default;
}

.ce-note-box,
.ce-sticky-box {
    box-sizing:border-box;
    display:block;
    overflow:hidden;
}
.ce-note-box {
    background:#fef9c3;
    border:1px solid #eab308;
    border-radius:8px;
    padding:8px 10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.ce-sticky-box {
    background:#ffe58f;
    border:1px solid #f2cc5a;
    border-radius:3px;
    padding:14px 12px 18px;
    box-shadow:0 2px 5px rgba(0,0,0,0.12);
}
.ce-sticky-box::after {
    content:'';
    position:absolute;
    right:0;
    bottom:0;
    width:20px;
    height:20px;
    background:linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(0,0,0,0.12) 50%);
    border-top-left-radius:4px;
    pointer-events:none;
}

/* ---- Selection chrome ---- */
.ce-selection {
    position:absolute;
    border:1.5px solid var(--accent-primary,#6366f1);
    pointer-events:none;
    z-index:40;
    box-sizing:border-box;
}
.ce-selection-multi {
    border-style:dashed;
    background:rgba(99,102,241,0.05);
}
.ce-marquee {
    position:absolute;
    border:1px solid var(--accent-primary,#6366f1);
    background:rgba(99,102,241,0.08);
    pointer-events:none;
    z-index:39;
    box-sizing:border-box;
}
.ce-handle {
    position:absolute;
    width: 13px;
    height: 13px;
    background:#ffffff;
    border:1.5px solid var(--accent-primary,#6366f1);
    border-radius: 2px;
    pointer-events:auto;
    box-sizing:border-box;
}
.ce-handle-nw {top: -2px;left: -2px;cursor:nwse-resize;border-top: 3px solid var(--accent-primary);background: none;border-left: 3px solid var(--accent-primary);border-right: none;border-bottom: none;}
.ce-handle-n {top: -4px;left: calc(50% - 10px);cursor:ns-resize;border-radius: 10px;height: 6px;width: 20px;}
.ce-handle-ne {top: -2px;right: -2px;cursor:nesw-resize;border-top: 3px solid var(--accent-primary);background: none;border-left: none;border-right: 3px solid var(--accent-primary);border-bottom: none;}
.ce-handle-e {top: calc(50% - 9px);right: -3px;cursor:ew-resize;border-radius: 10px;height: 20px;width: 6px;}
.ce-handle-se {bottom: -2px;right: -2px;cursor:nwse-resize;border-top: none;background: none;border-left: none;border-right: 3px solid var(--accent-primary);border-bottom: 3px solid var(--accent-primary);}
.ce-handle-s {bottom: -3px;left: calc(50% - 10px);cursor:ns-resize;border-radius: 10px;height: 6px;width: 20px;}
.ce-handle-sw {bottom: -2px;left: -2px;cursor:nesw-resize;border-top: none;background: none;border-left: 3px solid var(--accent-primary);border-right: none;border-bottom: 3px solid var(--accent-primary);}
.ce-handle-w {top: calc(50% - 9px);left: -4px;cursor:ew-resize;border-radius: 10px;height: 20px;width: 6px;}
.ce-selection.ce-text-item .ce-handle-nw,
.ce-selection.ce-text-item .ce-handle-n,
.ce-selection.ce-text-item .ce-handle-ne,
.ce-selection.ce-text-item .ce-handle-se,
.ce-selection.ce-text-item .ce-handle-s,
.ce-selection.ce-text-item .ce-handle-sw {
    display:none;
}
.ce-rotate-handle {
    position:absolute;
    top:-24px;
    left:calc(50% - 6px);
    width:12px;
    height:12px;
    border:1.5px solid var(--accent-primary,#6366f1);
    border-radius:50%;
    background:#ffffff;
    cursor:grab;
    pointer-events:auto;
}
.ce-rotate-handle:before {
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    width:1.5px;
    height:12px;
    background:var(--accent-primary,#6366f1);
    transform:translateX(-50%);
    pointer-events:none;
}
.ce-rotate-handle:after {
    content:'';
    position:absolute;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border-radius:50%;
    border:2px solid transparent;
    border-top-color:var(--accent-primary,#6366f1);
}
.ce-arrow-tip {
    position:absolute;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border-radius:50%;
    background:var(--accent-primary,#6366f1);
    border:2px solid #ffffff;
    cursor:grab;
    pointer-events:auto;
    z-index:41;
}

.ce-end-handle {
    position:absolute;
    width:18px;
    height:18px;
    margin:-9px 0 0 -9px;
    border-radius:50%;
    background:transparent;
    cursor:grab;
    pointer-events:auto;
    z-index:41;
    transition:background .15s ease, box-shadow .15s ease;
}

.ce-end-handle:hover {
    background:rgba(99,102,241,0.18);
    box-shadow:0 0 0 2px rgba(99,102,241,0.75);
}

/* ---- Inline editing ---- */
.ce-edit-overlay {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:0;
    outline:2px solid var(--accent-primary,#6366f1);
    outline-offset:-2px;
    border-radius:2px;
    background:rgba(255,255,255,0.98);
    padding:0;
    margin:0;
    resize:none;
    overflow:hidden;
    cursor:text;
    z-index:60;
    white-space:pre-wrap;
    word-break:break-word;
    vertical-align:top;
}
.ce-cell-edit {
    position:absolute;
    box-sizing:border-box;
    border:2px solid var(--accent-primary,#6366f1);
    border-radius:2px;
    background:rgba(255,255,255,0.99);
    padding:3px 4px;
    margin:0;
    resize:none;
    overflow:hidden;
    z-index:60;
    outline:none;
    font-family:var(--font-body);
    font-size:11px;
    line-height:1.35;
}
.ce-draw-preview {
    pointer-events:none;
    z-index:30;
}

/* ---- In-editor confirm dialog ---- */
.ce-confirm-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3000;
    padding:20px;
}
.ce-confirm-card {
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:var(--border-radius-xl);
    padding:24px;
    max-width:400px;
    width:100%;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.ce-confirm-msg {
    color:var(--text-primary);
    font-size:15px;
    line-height:1.6;
    margin-bottom:22px;
}
.ce-confirm-btns {
    display:flex;
    gap:10px;
    justify-content:flex-end;
}
.ce-confirm-btn {
    padding:9px 18px;
    border-radius:var(--border-radius-md);
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    color:var(--text-primary);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition-fast);
}
.ce-confirm-btn:hover {
    border-color:var(--accent-primary);
    color:var(--accent-primary);
}
.ce-confirm-btn-primary {
    background:var(--accent-primary);
    border-color:var(--accent-primary);
    color:#fff;
}
.ce-confirm-btn-primary:hover {
    background:var(--accent-secondary);
    border-color:var(--accent-secondary);
    color:#fff;
}
[dir="rtl"] .ce-confirm-btns { flex-direction:row-reverse; }

/* ---- Inset buttons ---- */
.ce-inset-btn {
    width:100%;
    justify-content:center;
    margin-top:8px;
}

/* ---- Checkbox label ---- */
.ce-checkbox-label {
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-size:12px;
    color:var(--text-secondary);
    font-weight:500;
}
.ce-checkbox-label input[type="checkbox"] {
    accent-color:#6366f1;
    width:15px;
    height:15px;
    cursor:pointer;
}
.ce-textarea {
    min-height:60px;
    resize:vertical;
    line-height:1.5;
}

/* ---- Tool grid (create tool only) ---- */
body[data-tool="create"] .editor-sidebar {
    display:flex;
    flex-direction:column;
}
body[data-tool="create"] .editor-tool-grid {
    display:grid;
    grid-template-columns:repeat(9,29px);
    justify-content:center;
    gap:4px;
}
body[data-tool="create"] .editor-tool-btn {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width: 100%;
    padding: 6px 0;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    color: var(--text-secondary);
    font-size:10px;
    font-weight:500;
    cursor:pointer;
    transition:all 0.15s;
    text-align:center;
}
body[data-tool="create"] .editor-tool-btn svg {
    width:15px;
    height:15px;
}
body[data-tool="create"] .editor-tool-btn:hover {
    border-color:var(--glass-border-hover);
    color: var(--text-tertiary);
}
body[data-tool="create"] .editor-tool-btn.active {
    border-color:#6366f1;
    background:rgba(99,102,241,0.1);
    color:#6366f1;
}
body[data-tool="create"] .editor-tool-btn.active svg { color:#6366f1; }
body[data-tool="create"] .editor-tool-btn span {
    line-height:1.1;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ---- Left icon rail (Canva-style) ---- */
body[data-tool="create"] .ce-icon-rail {
    width: 70px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding: 10px 0 10px 0;
    background:var(--bg-secondary);
    border-right:1px solid var(--glass-border);
    flex-shrink:0;
    overflow-y:auto;
    height:100%;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn {
    width: 60px;
    padding: 6px 0 6px;
    gap: 4px;
    border-radius:8px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background: none;
    border: none;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn svg {
    width:16px;
    height:16px;
}
body[data-tool="create"] .ce-icon-rail .ce-rail-label {
    font-size: 10px;
    line-height: 1.1;
    letter-spacing:0.02em;
    opacity:0.7;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn.active .ce-rail-label {
    opacity:1;
    color: var(--text-secondary);
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn.active {
    border-color: transparent;
    background: none;
    color: #2f2f2f;
}
body[data-tool="create"] .ce-icon-rail .editor-tool-btn.active svg { color:#6366f1; }
body[data-tool="create"] .ce-icon-rail .ce-rail-divider {
    width:24px;
    height:1px;
    background:var(--glass-border);
    margin:2px 0;
}

/* ---- Template picker (create setup view) ---- */
.ce-template-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:12px;
}
.ce-template-card {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border:1.5px solid var(--glass-border);
    border-radius:var(--border-radius-lg);
    background:var(--glass-bg);
    cursor:pointer;
    text-align:center;
    transition:all 0.15s;
    color:var(--text-primary);
}
.ce-template-card:hover {
    border-color:#6366f1;
    transform:translateY(-1px);
}
.ce-template-card.active {
    border-color:#6366f1;
    background:rgba(99,102,241,0.08);
    box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.ce-template-preview {
    display:block;
    width:100%;
    height:90px;
    border-radius:8px;
    border:1px solid var(--glass-border);
    background:#ffffff;
    overflow:hidden;
    position:relative;
}
.ce-template-name {
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
}
.ce-template-card:hover .ce-template-name,
.ce-template-card.active .ce-template-name {
    color:#6366f1;
}
/* --- Preview mini-layouts --- */
.ce-template-blank {
    background:linear-gradient(135deg,#ffffff 0%,#eef2ff 100%);
}
.ce-template-invoice i {
    position:absolute;
    left:10px; top:12px;
    width:30px; height:8px;
    background:#4338ca;
    border-radius:2px;
    opacity:0.85;
}
.ce-template-invoice b {
    position:absolute;
    left:10px; top:28px;
    right:10px; height:5px;
    background:#e0e7ff;
    border-radius:2px;
}
.ce-template-invoice u {
    position:absolute;
    left:10px; top:40px;
    right:10px; height:5px;
    background:#e0e7ff;
    border-radius:2px;
}
.ce-template-certificate i {
    position:absolute;
    left:50%; top:16px;
    transform:translateX(-50%);
    width:50px; height:6px;
    background:#d97706;
    border-radius:2px;
}
.ce-template-certificate b {
    position:absolute;
    left:50%; top:30px;
    transform:translateX(-50%);
    width:64px; height:4px;
    background:#fef3c7;
    border-radius:2px;
}
.ce-template-certificate u {
    position:absolute;
    left:50%; bottom:14px;
    transform:translateX(-50%);
    width:40px; height:6px;
    border-bottom:2px dashed #d97706;
}
.ce-template-poster i {
    position:absolute;
    left:10px; top:10px;
    right:10px; height:34px;
    background:#7c3aed;
    border-radius:4px;
    opacity:0.9;
}
.ce-template-poster b {
    position:absolute;
    left:10px; top:52px;
    width:30px; height:18px;
    background:#c4b5fd;
    border-radius:4px;
}
.ce-template-poster u {
    position:absolute;
    right:10px; bottom:10px;
    left:10px; height:5px;
    background:#ede9fe;
    border-radius:2px;
}
.ce-template-report i {
    position:absolute;
    left:10px; top:12px;
    width:8px; height:34px;
    background:#0ea5e9;
    border-radius:3px;
}
.ce-template-report b {
    position:absolute;
    left:24px; top:12px;
    right:10px; height:7px;
    background:#e0f2fe;
    border-radius:2px;
}
.ce-template-report u {
    position:absolute;
    left:24px; top:26px;
    right:34px; height:5px;
    background:#e0f2fe;
    border-radius:2px;
}

/* ---- Arrange section ---- */
.editor-align-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:12px;
}
.editor-align-divider {
    width:1px;
    height:24px;
    background:var(--glass-border);
    margin:0 3px;
}

/* ---- Layers list ---- */
.ce-layers-list {
    display:flex;
    flex-direction:column;
    gap:4px;
    max-height:240px;
    overflow-y:auto;
}
.ce-layer-row {
    display:flex;
    align-items:center;
    gap:6px;
    padding: 0px 8px;
    border: 1px dashed var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-layer-row:hover {
    border-color:var(--glass-border-hover);
}
.ce-layer-row.ce-layer-drag {
    opacity:0.4;
}
.ce-layer-row.ce-layer-drop {
    border-top:2px solid #6366f1;
    background:rgba(99,102,241,0.08);
}
.ce-layer-row.active {
    border-color: #ff9800;
}
.ce-layer-name {
    flex:1;
    font-size:11px;
    font-weight:500;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ce-layer-name.ce-editing {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    outline:1px dashed var(--accent, #4a7dff);
    outline-offset:1px;
    border-radius:3px;
    padding:1px 3px;
    background:rgba(127,127,127,0.12);
}
.ce-layer-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    border-radius:4px;
    transition:all 0.15s;
    flex-shrink:0;
}
.ce-layer-btn:hover {
    color:var(--text-primary);
    background:var(--bg-tertiary);
}
.ce-layer-btn.ce-off {
    color:var(--text-tertiary);
    opacity:0.45;
}
.ce-layer-row.ce-layer-hidden .ce-layer-name {
    text-decoration:line-through;
    color:var(--text-tertiary);
}

/* ---- Smart guides ---- */
.ce-smart-guide {
    position:absolute;
    pointer-events:none;
    z-index:38;
    background:repeating-linear-gradient(to bottom, #ff9800 0 6px, transparent 6px 12px);
    box-shadow:0 0 0 0.5px rgba(255,255,255,0.8);
}
.ce-smart-guide.ce-smart-v {
    width:1px;
    top:0;
    bottom:0;
}
.ce-smart-guide.ce-smart-h {
    height:1px;
    left:0;
    right:0;
    background:repeating-linear-gradient(to right, #ff9800 0 6px, transparent 6px 12px);
}
/* Editor Tabs */
.editor-tabs {
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 0;
    background:transparent;
    border:none;
    overflow-x:auto;
    flex-shrink:1;
    min-width:0;
    width: 100%;
    z-index:auto;
    direction:ltr;
    scrollbar-width:none;
}
.editor-tabs::-webkit-scrollbar { height:0; }
.editor-tab {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding: 3px 8px 3px 12px;
    border:1px solid var(--glass-border);
    border-radius: 8px 8px 0 0;
    background:var(--glass-bg);
    color:var(--text-secondary);
    font-size: 11px;
    font-weight:500;
    cursor:pointer;
    white-space:nowrap;
    min-width:0;
    max-width: 200px;
    flex: 1 1 auto;
    transition:all 0.15s;
    border-bottom: none;
    border-bottom: 1px solid var(--glass-border);
}
.editor-tab:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.editor-tab.active {background: var(--glass-bg);border-color: #ff9800;color: var(--text-secondary);border-bottom: 1px solid var(--glass-border);}
.editor-tab-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto; }
.editor-tab-dot {
    width:7px;height:7px;border-radius:50%;
    background:currentColor;opacity:0;flex-shrink:0;
}
.editor-tab.dirty .editor-tab-dot { opacity:0.9; }
.editor-tab.active .editor-tab-dot {background: #ff9800;}
.editor-tab-close {
    display:flex;align-items:center;justify-content:center;
    width:17px;height:17px;border:none;border-radius:50%;
    background:transparent;color:inherit;cursor:pointer;
    font-size:14px;line-height:1;padding:0;flex-shrink:0;
}
.editor-tab-close:hover { background:rgba(0,0,0,0.18); }
.editor-tab-add {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height: 28px;
    border: 1px solid var(--glass-border);
    border-radius: 8px 8px 0 0;
    background: var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    font-size:16px;
    line-height:1;
    flex-shrink:0;
    transition:all 0.15s;
}
.editor-tab-add:hover { color:var(--text-primary); border-color:var(--text-secondary); }
.editor-tab-add.ce-at-max { opacity:0.45; cursor:not-allowed; }
.editor-tab-add.ce-at-max:hover { color:var(--text-secondary); border-color:var(--glass-border); }
.editor-tabs.busy { pointer-events:none; opacity:0.55; }

/* ---- Panel element pop animation ---- */
@keyframes cePop {
    0%   { opacity:0; transform:scale(0.6); }
    60%  { opacity:1; transform:scale(1.08); }
    100% { opacity:1; transform:scale(1); }
}
body[data-tool="create"] .ce-shape-btn.ce-pop {
    animation: cePop 0.18s cubic-bezier(0.34,1.56,0.64,1) both;
}
body[data-tool="create"] .ce-design-card.ce-pop {
    animation: cePop 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ---- Image Crop Overlay ---- */
/* Hide default selection chrome while crop mode is active */
.ce-selection.ce-chrome-hidden,
.ce-end-handle.ce-chrome-hidden {
    display:none !important;
}
.ce-crop-overlay {
    position:absolute; z-index:9000; background:rgba(0,0,0,0.55);
    cursor:default; user-select:none; overflow:visible;
}
.ce-crop-img {
    position:absolute; pointer-events:none; user-select:none;
    image-rendering:auto; -webkit-user-drag:none;
}
.ce-crop-region {
    position:absolute;
    cursor:move;
    z-index:2;
    border: none;
    box-sizing:border-box;
}
.ce-crop-dim-t, .ce-crop-dim-b, .ce-crop-dim-l, .ce-crop-dim-r {
    position:absolute;
    background: rgb(255 255 255 / 80%);
    z-index:1;
}
.ce-crop-dim-t { top:0; left:0; right:0; }
.ce-crop-dim-b { bottom:0; left:0; right:0; }
.ce-crop-dim-l { top:0; bottom:0; left:0; }
.ce-crop-dim-r { top:0; bottom:0; right:0; }
.ce-crop-handles {position:absolute;top: -1px;left: 0px;right: -1px;bottom: -1px;z-index:3;pointer-events:none;border: 1.5px solid var(--accent-primary,#6366f1);}
.ce-crop-handle {
    position:absolute; pointer-events:auto; z-index:4;
}
.ce-crop-handle-se {right: -3px;bottom: -2px;cursor:se-resize;width: 13px;height: 13px;border-top: none;background: none;border-left: none;border-right: 3px solid var(--accent-primary);border-bottom: 3px solid var(--accent-primary);}
.ce-crop-handle-sw {left: -2px;bottom: -2px;cursor:sw-resize;width: 13px;height: 13px;border-top: none;background: none;border-left: 3px solid var(--accent-primary);border-right: none;border-bottom: 3px solid var(--accent-primary);}
.ce-crop-handle-ne {right: -3px;top: -2px;cursor:ne-resize;width: 13px;height: 13px;border-top: 3px solid var(--accent-primary);background: none;border-left: none;border-right: 3px solid var(--accent-primary);border-bottom: none;}
.ce-crop-handle-nw {left: -2px;top: -2px;cursor:nw-resize;width: 13px;height: 13px;border-top: 3px solid var(--accent-primary);background: none;border-left: 3px solid var(--accent-primary);border-right: none;border-bottom: none;}
.ce-crop-handle-n {top: -4px;left: 50%;transform:translateX(-50%);cursor:n-resize;border-radius: 10px !important;height: 6px;width: 20px;background: var(--accent-primary);border: 1.5px solid var(--accent-primary, #6366f1);}
.ce-crop-handle-s {bottom: -3px;left:50%;transform:translateX(-50%);cursor:s-resize;border-radius: 10px !important;height: 6px;width: 20px;background: var(--accent-primary);border: 1.5px solid var(--accent-primary, #6366f1);}
.ce-crop-handle-e {right: -4px;top:50%;transform:translateY(-50%);cursor:e-resize;border-radius: 10px !important;height: 20px;width: 6px;background: var(--accent-primary);border: 1.5px solid var(--accent-primary, #6366f1);}
.ce-crop-handle-w {left: -4px;top:50%;transform:translateY(-50%);cursor:w-resize;border-radius: 10px !important;height: 20px;width: 6px;background: var(--accent-primary);border: 1.5px solid var(--accent-primary, #6366f1);}
[data-theme="dark"] .ce-crop-handle {
}
[data-theme="light"] .ce-crop-handle,
:root:not([data-theme]) .ce-crop-handle {
    border-radius: 2px;
}
.ce-crop-grid {
    position:absolute;
    top:0;
    left: 0px;
    right:0;
    bottom:0;
    pointer-events:none;
    z-index:2;
}
.ce-crop-grid-line {
    position:absolute;
    background: rgb(255 255 255 / 0%);
}
.ce-crop-grid-h1 { top:33.33%; left:0; right:0; height:1px; }
.ce-crop-grid-h2 { top:66.66%; left:0; right:0; height:1px; }
.ce-crop-grid-v1 { left:33.33%; top:0; bottom:0; width:1px; }
.ce-crop-grid-v2 { left:66.66%; top:0; bottom:0; width:1px; }
/* Crop button in sidebar */
.ce-crop-sidebar-btn {
    display:flex; align-items:center; gap:6px; width:100%;
    padding:7px 10px; border:none; border-radius:6px;
    background:rgba(99,102,241,0.12); color:#6366f1; cursor:pointer;
    font-size:12px; font-weight:600; transition:all 0.15s; margin-top:4px;
}
[data-theme="dark"] .ce-crop-sidebar-btn { background:rgba(99,102,241,0.2); color:#818cf8; }
.ce-crop-sidebar-btn:hover { background:rgba(99,102,241,0.22); }
.ce-crop-sidebar-btn svg { width:14px; height:14px; flex-shrink:0; }
/* ---- Pixabay stock images panel ---- */
.ce-pixabay-panel .editor-thumb-panel { overflow: hidden; }
.ce-pixabay-body {
    display:flex; flex-direction:column; gap:8px;
    padding:10px; flex:1; min-height:0;
}
.ce-pixabay-search { display:flex; gap:6px; flex-shrink:0; }
.ce-pixabay-search input {
    flex:1; min-width:0; padding:7px 10px;
    border:1px solid var(--glass-border); border-radius:var(--border-radius-sm);
    background:var(--bg-primary); color:var(--text-primary);
    font-size:12px; outline:none;
}
.ce-pixabay-search input:focus { border-color:var(--accent-primary,#6366f1); }
.ce-pixabay-search button {
    flex:0 0 auto; width:32px; height:31px;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:var(--border-radius-sm);
    background:var(--accent-primary,#6366f1); color:#fff; cursor:pointer;
}
.ce-pixabay-results {
    flex:1; min-height:0;
    overflow-y:auto; overflow-x:hidden;
    display:flex; gap:6px; align-items:flex-start;
    padding-right:2px;
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
}
.ce-pixabay-panel:hover .ce-pixabay-results {
    scrollbar-color:var(--text-muted) transparent;
}
.ce-pixabay-results::-webkit-scrollbar { width:8px; }
.ce-pixabay-results::-webkit-scrollbar-track { background:transparent; }
.ce-pixabay-results::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
.ce-pixabay-panel:hover .ce-pixabay-results::-webkit-scrollbar-thumb { background:var(--glass-border); }
.ce-pixabay-panel:hover .ce-pixabay-results::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
.ce-pixabay-col {
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; gap:6px;
}
.ce-pixabay-item {
    position:relative; width:100%; padding:0; margin:0;
    border:none; border-radius:var(--border-radius-sm);
    overflow:hidden; cursor:pointer; background:var(--bg-tertiary);
}
.ce-pixabay-item img { width:100%; height:auto; display:block; transition:transform .15s ease; }
.ce-pixabay-item:hover img, .ce-pixabay-item:focus-visible img { transform:scale(1.07); }
body[data-tool="create"] .ce-pixabay-item.ce-pop {
    animation: cePop 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ce-pixabay-more {
    flex-shrink:0; padding:7px 10px;
    border:1px dashed var(--glass-border); border-radius:var(--border-radius-sm);
    background:transparent; color:var(--text-secondary);
    font-size:12px; cursor:pointer;
}
.ce-pixabay-more:hover { color:var(--text-primary); border-color:var(--accent-primary,#6366f1); }
.ce-pixabay-status { font-size:11px; color:var(--text-tertiary); min-height:15px; line-height:1.4; flex-shrink:0; }
.ce-pixabay-note {
    font-size:10px; color:var(--text-tertiary);
    text-decoration:none; text-align:center; padding-bottom:4px; flex-shrink:0;
}
.ce-pixabay-note:hover { color:var(--accent-primary,#6366f1); }

/* ---- Designs (templates) panel ---- */
.ce-designs-panel .editor-thumb-panel { overflow:hidden; }
.ce-designs-body {
    display:flex; flex-direction:column; gap:8px;
    padding:10px; flex:1; min-height:0;
}
.ce-designs-search {
    display:flex; align-items:center; gap:6px;
    flex-shrink:0;
}
.ce-designs-cat-select {
    flex:0 0 auto; max-width:108px; min-width:0;
    padding:5px 4px;
    border:1px solid var(--glass-border); border-radius:var(--border-radius-sm);
    background:var(--bg-primary); color:var(--text-tertiary);
    font-size:11px; outline:none; cursor:pointer;
}
.ce-designs-cat-select:focus { border-color:var(--accent-primary,#6366f1); color:var(--text-primary); }
.ce-designs-search-field {
    position:relative; flex:1; min-width:0;
    display:flex; align-items:center;
}
.ce-designs-search-icon {
    position:absolute; left:8px; width:13px; height:13px;
    color:var(--text-tertiary); pointer-events:none;
}
.ce-designs-search-field input {
    flex:1; min-width:0; width:100%; padding:6px 26px 6px 25px;
    border:1px solid var(--glass-border); border-radius:var(--border-radius-sm);
    background:var(--bg-primary); color:var(--text-primary);
    font-size:12px; outline:none;
}
.ce-designs-search-field input:focus { border-color:var(--accent-primary,#6366f1); }
.ce-designs-search-field button {
    position:absolute; right:4px; width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    border:none; background:transparent; color:var(--text-tertiary);
    cursor:pointer; border-radius:var(--border-radius-sm); padding:0;
}
.ce-designs-search-field button:hover { color:var(--text-primary); background:var(--bg-tertiary); }
.ce-designs-results {
    flex:1; min-height:0;
    overflow-y:auto; overflow-x:hidden;
    display:flex; gap:8px;
    align-items:flex-start;
    padding-right:2px;
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
}
.ce-designs-panel:hover .ce-designs-results {
    scrollbar-color:var(--text-muted) transparent;
}
.ce-designs-results::-webkit-scrollbar { width:8px; }
.ce-designs-results::-webkit-scrollbar-track { background:transparent; }
.ce-designs-results::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
.ce-designs-panel:hover .ce-designs-results::-webkit-scrollbar-thumb { background:var(--glass-border); }
.ce-designs-panel:hover .ce-designs-results::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
.ce-design-col {
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap: 15px;
}
.ce-design-card {
    position:relative; width:100%;
    display:block; padding:0; margin:0;
    border:none; border-radius:var(--border-radius-sm);
    background:var(--bg-tertiary); cursor:pointer; text-align:left;
    overflow:hidden;
}
.ce-design-card:hover, .ce-design-card:focus-visible { outline:none; }
.ce-design-img { width:100%; height:auto; display:block; transition:transform .15s ease; }
.ce-design-card:hover .ce-design-img, .ce-design-card:focus-visible .ce-design-img { transform:scale(1.07); }
.ce-design-nothumb { display:block; width:100%; aspect-ratio:3 / 4; }
.ce-design-badge {
    font-size: 9px;
    font-weight:600;
    text-transform:capitalize;
    padding:2px 6px;
    border-radius:99px;
    background:var(--accent-primary,#6366f1);
    color:#fff;
    pointer-events:none;
}
.ce-design-badge-ol { position:absolute; top:5px; right:5px; opacity:0; transition:opacity .15s ease; }
.ce-design-card:hover .ce-design-badge-ol, .ce-design-card:focus-visible .ce-design-badge-ol { opacity:1; }
.ce-design-pages-ol { position:absolute; left:5px; bottom:5px; opacity:0; transition:opacity .15s ease; }
.ce-design-card:hover .ce-design-pages-ol, .ce-design-card:focus-visible .ce-design-pages-ol { opacity:1; }
.ce-designs-empty {
    grid-column:1 / -1; text-align:center; color:var(--text-tertiary);
    font-size:12px; padding:20px 8px;
}
#createTemplates .ce-template-grid {
    max-height: 400px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:2px;
    display:flex;
    gap: 15px;
    align-items:flex-start;
    scrollbar-width:thin;
    scrollbar-color:var(--glass-border) transparent;
}
#createTemplates .ce-template-grid::-webkit-scrollbar { width:8px; }
#createTemplates .ce-template-grid::-webkit-scrollbar-track { background:transparent; }
#createTemplates .ce-template-grid::-webkit-scrollbar-thumb {
    background:var(--glass-border);
    border-radius:4px;
}
#createTemplates .ce-template-grid::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
#createTemplates .ce-template-card {
    position:relative;
    overflow:hidden;
    width:100%;
    display:block;
    padding:0;
    gap:0;
    border:none;
    border-radius:var(--border-radius-sm);
    background:var(--bg-tertiary);
    cursor:pointer;
    text-align:left;
    box-shadow: 0 0px 8px rgba(15, 23, 42, 0.18);
}
#createTemplates .ce-template-img {
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:0;
    border:none;
    transition:transform .15s ease;
}
#createTemplates .ce-template-card:hover,
#createTemplates .ce-template-card:focus-visible {
    border-color:transparent;
    transform:none;
}
#createTemplates .ce-template-card .ce-design-badge-ol,
#createTemplates .ce-template-card .ce-design-pages-ol {
    opacity:0;
    transition:opacity .15s ease;
}
#createTemplates .ce-template-card:hover .ce-design-badge-ol,
#createTemplates .ce-template-card:focus-visible .ce-design-badge-ol,
#createTemplates .ce-template-card:hover .ce-design-pages-ol,
#createTemplates .ce-template-card:focus-visible .ce-design-pages-ol {
    opacity:1;
}
#createTemplates .ce-start-controls {
    display:flex; align-items:center; gap:8px;
    margin-bottom:10px;
}
#createTemplates .ce-start-controls .ce-designs-cat-select {
    flex-shrink:0;
}
#createTemplates .ce-designs-more {
    margin-top:10px;
}
#createTemplates .ce-designs-status {
    margin-top:6px;
}
#createTemplates .ce-template-grid .ce-design-nothumb {
    aspect-ratio:3 / 4;
}
.ce-designs-status {
    font-size:11px; color:var(--text-tertiary); min-height:15px; line-height:1.4; flex-shrink:0;
}
.ce-designs-more {
    flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:7px 10px;
    border:1px dashed var(--glass-border); border-radius:var(--border-radius-sm);
    background:transparent; color:var(--text-secondary);
    font-size:12px; cursor:pointer;
}
.ce-designs-more:hover { color:var(--text-primary); border-color:var(--accent-primary,#6366f1); }

/* ---- Editor settings ---- */
body[data-tool="create"] .editor-body { position:relative; }
.editor-pages-area.rulers-hidden {
    grid-template-columns:0 minmax(0, 1fr);
    grid-template-rows:0 minmax(0, 1fr);
}
.editor-pages-area.rulers-hidden .ce-ruler-corner,
.editor-pages-area.rulers-hidden .ce-ruler-h,
.editor-pages-area.rulers-hidden .ce-ruler-v {
    visibility:hidden;
}
body.rulers-hidden .editor-thumb-toggle {
    right:-28px;
    width:28px;
    padding:2px;
}
.ce-rail-bottom {
    margin-top:auto;
    padding-top:6px;
}
#ceGridOverlay { position:absolute; inset:0; pointer-events:none; z-index:0; }
.ce-settings-pop {
    position:absolute; left:62px; bottom:14px; z-index:1200;
    width:236px; display:flex; flex-direction:column;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,0.18); overflow:hidden;
}
.ce-settings-body { padding:8px; display:flex; flex-direction:column; gap:2px; }
.ce-setting-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 8px;
    border-radius:6px;
    font-size: 11px;
    color: var(--text-tertiary);
    cursor:pointer;
    user-select:none;
    font-weight: 500;
}
.ce-setting-select {
    padding:4px 6px;
    border-radius:6px;
    border:1px solid var(--glass-border);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size:12px;
    outline:none;
    cursor:pointer;
}
.ce-switch { position:relative; width:30px; height:17px; flex-shrink:0; }
.ce-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.ce-switch i {
    position:absolute; inset:0; border-radius:999px;
    background:var(--bg-tertiary); transition:background 0.15s; pointer-events:none;
}
.ce-switch i::after {
    content:''; position:absolute; top:2px; left:2px;
    width:13px; height:13px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25);
    transition:left 0.15s;
}
.ce-switch input:checked + i { background:var(--accent-primary,#6366f1); }
.ce-switch input:checked + i::after { left:15px; }

/* Any other checkbox inside the create editor becomes a switch */
.editor-topbar input[type="checkbox"]:not(.ce-switch input),
.editor-body input[type="checkbox"]:not(.ce-switch input) {
    -webkit-appearance:none; appearance:none;
    position:relative; width:30px; height:17px;
    margin:0; padding:0; cursor:pointer;
    border-radius:999px; border:none;
    background:var(--bg-tertiary);
    transition:background 0.15s;
    flex-shrink:0; vertical-align:middle;
}
.editor-topbar input[type="checkbox"]:not(.ce-switch input)::after,
.editor-body input[type="checkbox"]:not(.ce-switch input)::after {
    content:''; position:absolute; top:2px; left:2px;
    width:13px; height:13px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25);
    transition:left 0.15s;
}
.editor-topbar input[type="checkbox"]:not(.ce-switch input):checked,
.editor-body input[type="checkbox"]:not(.ce-switch input):checked {
    background:var(--accent-primary,#6366f1);
}
.editor-topbar input[type="checkbox"]:not(.ce-switch input):checked::after,
.editor-body input[type="checkbox"]:not(.ce-switch input):checked::after {
    left:15px;
}

/* Editor context menu */
.ce-context-menu {
    position:fixed;
    z-index:100000;
    min-width:180px;
    max-width:240px;
    margin:0;
    padding:6px;
    list-style:none;
    background: var(--bg-primary);
    border-radius:10px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.15), 0 3px 3px rgba(0,0,0,0.15);
    font-size: 10px;
    color: var(--text-secondary);
    user-select:none;
    font-weight: bold;
}
.ce-context-item {
    display:flex; align-items:center; gap:9px;
    width:100%; padding:8px 10px;
    border:none; border-radius:7px;
    background:transparent; color:inherit;
    font:inherit; text-align:left; cursor:pointer;
    white-space:nowrap;
}
.ce-context-item:hover { background:var(--bg-tertiary); }
.ce-context-item svg { flex-shrink:0; opacity:0.85; }
.ce-context-item .ce-context-shortcut { margin-left:auto; opacity:0.55; font-weight:600; }
.ce-context-item.disabled { opacity:0.4; pointer-events:none; }
.ce-context-sep { height:1px; margin:5px 8px; background:var(--glass-border); border:none; }

/* Save panel in right sidebar */
.ce-save-panel-btn {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 12px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    font-size:12px;
    text-align:left;
    transition:all 0.15s;
    margin-bottom:6px;
}
.ce-save-panel-btn:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border-color:rgba(255,152,0,0.3);
}
.ce-save-panel-btn svg {
    flex-shrink:0;
    stroke:var(--text-tertiary);
}
.ce-save-panel-btn:hover svg {
    stroke:var(--accent-primary, #ff9800);
}
.ce-save-panel-btn-text {
    display:flex;
    flex-direction:column;
    gap:1px;
}
.ce-save-panel-btn-text span {
    font-weight:600;
    color:var(--text-primary);
    font-size:12px;
}
.ce-save-panel-btn-text small {
    font-size:10px;
    color:var(--text-tertiary);
    font-weight:400;
}
.ce-save-panel-option {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 12px;
    font-size:12px;
    color:var(--text-secondary);
    cursor:pointer;
    border-radius:6px;
    transition:background 0.15s;
}
.ce-save-panel-option:hover {
    background:var(--bg-tertiary);
}
.ce-save-panel-option input[type="checkbox"] {
    margin:0;
    accent-color:var(--accent, #5b6cff);
    cursor:pointer;
    flex-shrink:0;
}
.ce-save-panel-close {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    padding:8px;
    margin-top:10px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:11px;
    transition:all 0.15s;
}
.ce-save-panel-close:hover {
    background:var(--bg-tertiary);
    color:var(--text-primary);
}

/* Image Informations panel (create editor) */
#imageInfoGroup .ce-img-info {
    border:1px solid var(--glass-border);
    border-radius:8px;
    padding:8px 10px;
    background:var(--bg-tertiary);
}
.ce-img-info-row {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    font-size: 10.5px;
    padding:3px 0;
}
.ce-img-info-row span {
    color:var(--text-tertiary);
    flex-shrink:0;
}
.ce-img-info-row b {
    color: var(--text-tertiary);
    font-weight: 600;
    text-align:right;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ce-img-author {
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:8px;
    padding:8px 10px;
    border-radius:8px;
    background:var(--bg-tertiary);
    border:1px solid var(--glass-border);
}
.ce-img-author-avatar {
    position:relative;
    width:32px;
    height:32px;
    border-radius:50%;
    flex-shrink:0;
    background:var(--glass-border);
    color:var(--text-tertiary);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.ce-img-author-avatar svg {
    width:17px;
    height:17px;
}
.editor-image-info .ce-img-author-avatar img,
.ce-img-author-avatar img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.ce-img-author-meta {
    display:flex;
    flex-direction:column;
    min-width:0;
}
.ce-img-author-meta span {
    font-size:12px;
    font-weight:600;
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ce-img-author-meta small {
    font-size:10px;
    color:var(--text-tertiary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ce-img-author-meta small a {
    color: var(--text-tertiary);
    text-decoration:none;
}
.ce-img-author-meta small a:hover {
    text-decoration:underline;
}
.ce-img-note-label {
    margin-top:10px;
}
.ce-img-note {
    resize:vertical;
    min-height:44px;
    font-family:inherit;
    line-height:1.45;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
}
.ce-img-link-row {
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
}
.ce-img-link-row .editor-text-input {
    flex:1;
    min-width:0;
}
.ce-img-link-open {
    flex-shrink:0;
    width: 25px;
    height: 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--bg-tertiary);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-img-link-open:hover {
    color:var(--accent-primary,#6366f1);
    border-color:var(--accent-primary,#6366f1);
}
#ceImgDownloadBtn {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:8px 10px;
    border:1px solid var(--glass-border);
    border-radius:8px;
    background:var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.15s;
}
#ceImgDownloadBtn:hover {
    color:var(--accent-primary,#6366f1);
    border-color:var(--accent-primary,#6366f1);
}

/* Editor settings: Pixabay section heading */
.ce-settings-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-tertiary, #8a8f98);
    padding: 10px 12px 2px;
    border-top: 1px solid rgba(128, 128, 142, .25);
    margin-top: 6px;
}

/* Settings side panel */
.ce-settings-panel .editor-thumb-panel { width:250px; }
.ce-settings-panel .ce-settings-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 8px;
}

#shapeSidesGroup { order: 13; }

/* Uniform width for editor settings selects */
.ce-settings-panel .ce-setting-select {
    width: 90px;
    flex-shrink: 0;
}

#pixabaySearchInput::placeholder {
    opacity: 0.4;
}

/* Pixabay inline filters */
.ce-pixabay-type {
    width: 87px;
    flex-shrink: 0;
    padding: 6px 4px;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    font-size: 11px;
    outline: none;
    cursor: pointer;
}
.ce-pixabay-type:focus { border-color: var(--accent-primary, #6366f1); }

.editor-topbar-btn:disabled,
.editor-topbar-btn.ce-ctrl-busy {
    opacity:0.5;
    cursor:not-allowed;
    background:var(--bg-tertiary);
    color:var(--text-tertiary);
    border:1px solid var(--glass-border);
}
.editor-topbar-btn.ce-at-max {
    opacity:0.45;
    cursor:not-allowed;
}
.editor-topbar-btn.ce-at-max:hover {
    background:var(--bg-tertiary);
    color:var(--text-tertiary);
    border-color:var(--glass-border);
}


/* ===== Image Filters Panel ===== */
.ce-filters-panel .editor-thumb-panel { width:250px; }
.ce-filters-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 10px;
}
.ce-filters-note {
    padding: 8px 10px;
    border: 1px dashed var(--glass-border);
    border-radius: 8px;
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    text-align: center;
}
.ce-filters-presets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
}
.ce-filter-preset {
    padding: 4px 6px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.ce-filter-preset:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
}
.ce-filter-preset.active {
    border-color: #ff9800;
    color: #ff9800;
    background: rgba(255,152,0,0.12);
}
.ce-filters-sliders {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.ce-filter-slider-row {
    display: grid;
    grid-template-columns: 68px 1fr 34px;
    align-items: center;
    gap: 8px;
}
.ce-filter-slider-label {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ce-filter-slider {
    width: 100%;
    height: 4px;
    accent-color: #ff9800;
    cursor: pointer;
}
.ce-filter-slider-val {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ce-filters-reset {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.ce-filters-reset:hover {
    border-color: #ff9800;
    color: #ff9800;
}

.ce-filters-body.ce-filters-disabled {
    opacity:0.5;
    pointer-events:none;
}
.ce-effects-panel .ce-filters-body {
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.ce-effects-tiles {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom:14px;
    max-height:calc(100% - 109px);
    overflow-y:auto;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
}
.ce-effects-tiles::-webkit-scrollbar { width:8px; }
.ce-effects-tiles::-webkit-scrollbar-track { background:transparent; }
.ce-effects-tiles::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
.ce-effects-tiles:hover { scrollbar-color:var(--text-muted) transparent; }
.ce-effects-tiles:hover::-webkit-scrollbar-thumb { background:var(--text-muted); }
.ce-effects-tiles:hover::-webkit-scrollbar-thumb:hover { background:var(--text-tertiary); }
.ce-effects-group-title {
    grid-column:1 / -1;
    margin-top:6px;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-tertiary);
}
.ce-effects-tile {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:10px 4px 8px;
    border:1px solid var(--glass-border);
    border-radius:10px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-effects-tile:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
}
.ce-effects-tile .ce-effects-tile-dot {
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.25);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.ce-effects-tile .ce-effects-tile-label {
    font-size:10px;
    font-weight:600;
    line-height:1;
}
.ce-effects-tile.active {
    border-color:#ff9800;
    color:#ff9800;
    background:rgba(255,152,0,0.12);
}

.ce-pdf-pass-body {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:14px;
}
.ce-pdf-pass-title {
    font-size:14px;
    font-weight:700;
    color:var(--text-primary);
}
.ce-pdf-pass-desc {
    font-size:12px;
    color:var(--text-secondary);
}
.ce-pdf-pass-input {
    padding:8px 10px;
}
.ce-pdf-pass-error {
    font-size:11px;
    color:#ff9800;
}
html[dir="rtl"] .editor-footerbar-left { order: 2; }
html[dir="rtl"] .editor-footerbar-right { order: 1; }
html[dir="rtl"] .editor-footerbar-left,
html[dir="rtl"] .editor-footerbar-right { direction: ltr; }
.ce-lang-toggle { gap: 5px; }
.ce-lang-toggle svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.ce-lang-code { font-size: 11px; font-weight: 600; line-height: 1; }

/* ---- Page Numbers sub-panel (Tools) ---- */
.ce-tools-subpanel {
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
}
.ce-tools-subpanel-head {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--text-secondary);
    border-bottom:1px solid var(--glass-border);
    flex-shrink:0;
}
.ce-tools-back {
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    flex-shrink:0;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    color:var(--text-secondary);
    cursor:pointer;
    transition:all 0.15s;
}
.ce-tools-back:hover { color:var(--text-primary); background:var(--bg-tertiary); }
.ce-tools-subpanel-body {
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.ce-tools-subpanel-body .editor-ctrl-label { margin-bottom:2px; }
.ce-tools-subpanel-body select.editor-text-input {
    width:100%;
    box-sizing:border-box;
    background:var(--glass-bg);
    color:var(--text-primary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    font-size:11px;
}
.ce-tools-subpanel-body input[type="color"] {
    width:100%;
    height:30px !important;
    border:1px solid var(--glass-border);
    border-radius:6px;
    background:var(--glass-bg);
    padding:2px;
    cursor:pointer;
}
.ce-pn-apply {
    width:100%;
    background:var(--accent-primary,#6366f1);
    border:1px solid transparent;
    color:#fff;
    font-weight:600;
    border-radius:8px;
    min-height:34px;
}
.ce-pn-apply:hover { background:var(--accent-primary,#6366f1); filter:brightness(1.08); color:#fff; }
.ce-pn-remove {
    width:100%;
    background:transparent;
    border:1px solid rgba(220,38,38,0.5);
    color:#ef4444;
    font-weight:600;
    border-radius:8px;
    min-height:34px;
}
.ce-pn-remove:hover { background:rgba(220,38,38,0.12); color:#ef4444; }

/* ---- themed custom color picker ---- */
.ce-cp-wrap {
    display:inline-flex;
    align-items:center;
    position:relative;
    flex-shrink:0;
}
.ce-cp-wrap input[type="color"].ce-cp-native {
    position:absolute;
    left:0;top:0;
    width:1px;height:1px;
    opacity:0;
    border:0;padding:0;margin:0;
    pointer-events:none;
}
.ce-cp-swatch {
    display:block;
    width: 24px;
    height: 24px !important;
    border:1px solid var(--glass-border);
    border-radius: 60px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    padding:0;
    margin:0;
    background:transparent;
    transition:border-color .15s, box-shadow .15s, transform .1s;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.ce-cp-swatch:hover { border-color:var(--accent-primary,#6366f1); }
.ce-cp-swatch:active { transform:scale(.95); }
.ce-cp-swatch::after {
    content:'';
    position:absolute;
    inset:0;
    background:var(--cp-val,#ffffff);
}
.ce-cp-pop {
    position:fixed;
    z-index:10000;
    width:236px;
    background:var(--bg-secondary);
    border:1px solid var(--glass-border);
    border-radius:12px;
    box-shadow:0 14px 44px rgba(0,0,0,.38);
    padding:14px;
    display:none;
    font-family:inherit;
    color:var(--text-primary);
}
.ce-cp-pop.ce-open { display:block; }
.ce-cp-close {
    position:absolute;
    top:8px;right:8px;
    width:22px;height:22px;
    border:none;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    font-size:16px;line-height:1;
    border-radius:50%;
    z-index:2;
}
.ce-cp-close:hover { color:var(--text-primary); background:var(--glass-bg); }
.ce-cp-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin:2px 0 12px;
    padding-right:24px;
}
.ce-cp-lbl {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    letter-spacing:.5px;
    color:var(--text-tertiary);
    text-transform:uppercase;
    font-weight:600;
}
.ce-cp-chip {
    width:22px;
    height:22px;
    border-radius: 60px;
    border:1px solid var(--glass-border);
    flex-shrink:0;
}
.ce-cp-svbox {
    position:relative;
    height:150px;
    border-radius:8px;
    cursor:crosshair;
    margin-bottom:10px;
    overflow:hidden;
}
.ce-cp-sv-handle {
    position:absolute;
    width:14px;height:14px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    transform:translate(-50%,-50%);
    pointer-events:none;
    left:50%;top:0;
}
.ce-cp-hue {
    position:relative;
    height:14px;
    border-radius:8px;
    background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
    margin-bottom:8px;
    cursor:pointer;
    border:1px solid var(--glass-border);
}
.ce-cp-hue-handle {
    position:absolute;
    top:50%;
    width:14px;height:20px;
    border-radius:5px;
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.45);
    transform:translate(-50%,-50%);
    pointer-events:none;
    left:0;
}
.ce-cp-hexrow {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:4px;
}
.ce-cp-hexrow label {
    font-size:10px;
    letter-spacing:.5px;
    color:var(--text-tertiary);
    font-weight:600;
}
.ce-cp-hex {
    flex:1;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:var(--text-primary);
    border-radius:6px;
    padding:5px 8px;
    font-size:12px;
    font-family:'Consolas','SF Mono',monospace;
    outline:none;
    text-transform:uppercase;
    min-width:0;
}
.ce-cp-hex:focus { border-color:var(--accent-primary,#6366f1); }
.ce-cp-presets {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:6px;
    margin-top:12px;
}
.ce-cp-preset {
    width:100%;
    aspect-ratio:1;
    border-radius: 60px;
    border:1px solid var(--glass-border);
    cursor:pointer;
    position:relative;
    padding:0;
    margin:0;
    transition:transform .1s, border-color .1s;
}
.ce-cp-preset:hover { transform:scale(1.14); border-color:var(--accent-primary,#6366f1); }
#chartGroup .ce-cp-wrap { width:100%; }

.ce-cp-eyedrop {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    margin-left:8px;
    border:none;
    background:transparent;
    color:var(--text-tertiary);
    cursor:pointer;
    border-radius:6px;
    transition:color .15s, background .15s;
}
.ce-cp-eyedrop:hover { color:var(--text-primary); background:var(--glass-bg); }
.ce-cp-eyedrop svg { width:15px; height:15px; }

.ce-cp-swatch::before {
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(45deg, rgba(128,128,128,.18) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.18) 75%),
        linear-gradient(45deg, rgba(128,128,128,.18) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.18) 75%);
    background-size:8px 8px;
    background-position:0 0, 4px 4px;
    pointer-events:none;
}
.ce-cp-oprow {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
}
.ce-cp-oprow label {
    font-size:10px;
    letter-spacing:.5px;
    color:var(--text-tertiary);
    font-weight:600;
    flex-shrink:0;
    text-transform:uppercase;
}
.ce-cp-op {
    flex:1;
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:3px;
    background:linear-gradient(to right, rgba(99,102,241,.25), var(--accent-primary,#6366f1));
    outline:none;
    cursor:pointer;
    min-width:0;
}
.ce-cp-op::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:14px;height:14px;
    border-radius:50%;
    background:var(--accent-primary,#6366f1);
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.3);
    cursor:pointer;
}
.ce-cp-op::-moz-range-thumb {
    width:14px;height:14px;
    border-radius:50%;
    background:var(--accent-primary,#6366f1);
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.3);
    cursor:pointer;
}
.ce-cp-op:disabled { opacity:.45; cursor:default; }
.ce-cp-opval {
    flex-shrink:0;
    min-width:38px;
    text-align:right;
    font-size:11px;
    color:var(--text-primary);
    font-family:'Consolas','SF Mono',monospace;
}

/* ---- QR Code panel ---- */
.ce-qr-panel .editor-thumb-panel .ce-shapes-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
    max-height:none;
    min-height:0;
    padding:12px;
    overflow-y:auto;
    align-content:normal;
    grid-template-columns:none;
    grid-auto-flow:row;
}
.ce-qr-panel .editor-ctrl-label {
    margin-bottom:0;
    display:block;
}
.ce-qr-panel .editor-ctrl-col .editor-ctrl-label {
    margin-bottom:4px;
}
.ce-qr-panel textarea.editor-text-input {
    width:100%;
    height:auto;
    min-height:46px;
    box-sizing:border-box;
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    font-size:12px;
    font-family:inherit;
    resize:vertical;
}
.ce-qr-panel select.editor-text-input,
.ce-qr-panel input[type="number"].editor-text-input,
.ce-qr-panel input[type="color"].editor-text-input {
    width:100%;
    box-sizing:border-box;
}
.ce-qr-panel input[type="color"].editor-text-input {
    height:30px;
    padding:3px;
    cursor:pointer;
}
.ce-qr-panel .qr-preview-wrap {
    text-align:center;
    margin:6px 0 2px;
    flex:none;
}
.ce-qr-panel #qrPreview {
    border:1px solid var(--glass-border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.14);
    max-width: 60%;
    height:auto;
}
.ce-qr-panel #qrStats {
    text-align:center;
    font-size:11px;
    min-height:14px;
    opacity:.85;
    flex:none;
}
.ce-qr-panel .qr-actions {
    display:flex;
    gap:8px;
    margin-top:8px;
    flex:none;
}
.ce-qr-panel .qr-actions .editor-ctrl-col {
    flex:1;
    min-width:0;
}
.ce-qr-panel .ce-pn-apply,
.ce-qr-panel .ce-pn-remove {
    min-height:34px;
    font-weight:600;
    border-radius:8px;
}

/* ---- Barcode panel ---- */
.ce-barcode-panel .editor-thumb-panel .ce-shapes-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
    max-height:none;
    min-height:0;
    padding:12px;
    overflow-y:auto;
    align-content:normal;
    grid-template-columns:none;
    grid-auto-flow:row;
}
.ce-barcode-panel .editor-ctrl-label {
    margin-bottom:0;
    display:block;
}
.ce-barcode-panel .editor-ctrl-col .editor-ctrl-label {
    margin-bottom:4px;
}
.ce-barcode-panel textarea.editor-text-input {
    width:100%;
    height:auto;
    min-height:46px;
    box-sizing:border-box;
    background:var(--bg-tertiary);
    color:var(--text-primary);
    border:1px solid var(--glass-border);
    border-radius:6px;
    font-size:12px;
    font-family:inherit;
    resize:vertical;
}
.ce-barcode-panel select.editor-text-input,
.ce-barcode-panel input[type="number"].editor-text-input,
.ce-barcode-panel input[type="color"].editor-text-input {
    width:100%;
    box-sizing:border-box;
}
.ce-barcode-panel input[type="color"].editor-text-input {
    height:30px;
    padding:3px;
    cursor:pointer;
}
.ce-barcode-panel .bar-preview-wrap {
    text-align:center;
    margin:6px 0 2px;
    flex:none;
}
.ce-barcode-panel #barPreview {
    border:1px solid var(--glass-border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.14);
    max-width:100%;
    min-height:60px;
    padding:6px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ce-barcode-panel #barPreview svg {
    max-width:100%;
    max-height:220px;
    width:auto;
    height:auto;
    display:block;
}
.ce-barcode-panel #barStats {
    text-align:center;
    font-size:11px;
    min-height:14px;
    opacity:.85;
    flex:none;
}
.ce-barcode-panel .bar-actions {
    display:flex;
    gap:8px;
    margin-top:8px;
    flex:none;
}
.ce-barcode-panel .bar-actions .editor-ctrl-col {
    flex:1;
    min-width:0;
}
.ce-barcode-panel .ce-pn-apply,
.ce-barcode-panel .ce-pn-remove {
    min-height:34px;
    font-weight:600;
    border-radius:8px;
}

/* ---- Template loading ring ---- */
.ce-loading-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(255,255,255,0.55);
    backdrop-filter:blur(2px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:4000;
    padding:10px;
}
.ce-loading-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 14px;
    background:var(--bg-secondary);
    border-radius: 8px;
    padding: 16px 26px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.25);
}
.ce-loading-ring {
    display:flex;
}
.ce-loading-track {
    stroke:var(--glass-border);
    opacity:0.5;
}
.ce-loading-spin {
    stroke:var(--accent-primary);
    transform-origin:50% 50%;
    animation:ceLoadSpin 1s linear infinite;
}
@keyframes ceLoadSpin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
.ce-loading-text {
    color:var(--text-primary);
    font-size: 10px;
    font-weight:600;
    margin:0;
}