.btn-secondary {
        background: #64748b;
    }
    .hidden {
    display: none !important;
}
    .btn-secondary:hover { background: #475569; }
    .upload-btn:hover { background: #2563eb; }
    .error-message {
        background: #fee2e2;
        color: #b91c1c;
        padding: 0.75rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        display: none;
    }
    .editor-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 1.5rem;
        margin-top: 1rem;
    }
    .preview-box {
        background: #f1f5f9;
        border-radius: 1rem;
        padding: 1rem;
        overflow-y: auto;
        max-height: 70vh;
    }
    .preview-toolbar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #cbd5e1;
    }
    .page-thumbnails {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
    }
    .tool-settings {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.25rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .hidden { display: none; }
    .file-box {
        background: #f8fafc;
        padding: 0.75rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .file-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .options-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .option-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .option-label {
        font-weight: 600;
        font-size: 0.875rem;
    }
    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .radio-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .checkbox-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .range-input, #custom-pages {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #cbd5e1;
        border-radius: 0.5rem;
    }
    .action-buttons {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
    }
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .loading-spinner {
        border: 4px solid rgba(255,255,255,0.3);
        border-top: 4px solid white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    .toast {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #333;
        color: white;
        padding: 12px 20px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 1100;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .page-thumbnails img {
        width: 100%;
        border: 1px solid #cbd5e1;
        border-radius: 0.375rem;
        cursor: pointer;
    }
    @media (max-width: 768px) {
        .editor-layout { grid-template-columns: 1fr; }
    }