.toolkit-item { color: #9ca3af; /* text-gray-400 */ }
		.toolkit-item.active, .toolkit-item:hover { color: #a7f3d0; /* text-emerald-200 */ }
		.toolkit-item.active { background-color: rgba(16, 185, 129, 0.2); /* Semi-transparent green */ }
	    .toolkit-item:hover { background-color: #1f2937; /* bg-gray-800 */ }
	    .tool-showcase-panel svg { color: #f9a8d4; /* text-pink-300 */ }
	    
	    .showcase-drop-zone {
	        background-color: #111827; /* bg-gray-900 */
	        border: 2px dashed transparent;
	        border-radius: 0.75rem; /* rounded-xl */
	        padding: 2rem;
	        transition: all 0.2s ease-in-out;
	        cursor: pointer;
	    }
	    .showcase-drop-zone:hover, .showcase-drop-zone.drag-over {
	    border-color: #10b981; /* border-emerald-500 */
	    background-color: #1f2937; /* bg-gray-800 */
	    transform: scale(1.02);
	    }
	    .icon-wrapper {
	        background-color: rgba(79, 70, 229, 0.1);
	        border: 1px solid rgba(99, 102, 241, 0.2);
	        padding: 1rem;
	        border-radius: 0.75rem;
	        display: inline-block;
	        margin-bottom: 1.5rem;
	    }
	    /* --- MODIFIED --- */
		.action-button {
		    background-color: #10b981; /* bg-emerald-500 */
		    color: white;
		    font-weight: 600;
		    padding: 0.75rem 2rem;
		    border-radius: 0.5rem; /* rounded-lg */
		    transition: background-color 0.2s;
		}
		.action-button:hover { background-color: #059669; /* bg-emerald-600 */ }
		/* --- END MODIFIED --- */
		
        * { font-family: 'Inter', sans-serif; }
        .tab-active {
            border-color: #6366f1;
            color: #6366f1;
            background: linear-gradient(to bottom, #eef2ff, #e0e7ff);
        }
        .page-thumbnail {
            cursor: grab;
            transition: all 0.3s ease;
            position: relative;
        }
        .page-thumbnail:active { cursor: grabbing; }
        .page-thumbnail .thumbnail-overlay {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .page-thumbnail:hover .thumbnail-overlay {
            opacity: 1;
        }
        .sortable-ghost {
            opacity: 0.4;
            background: #c7d2fe;
        }
        .drop-zone {
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-size: 200% 200%;
            animation: gradient 3s ease infinite;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .drop-zone.drag-over {
            background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
            transform: scale(1.02);
        }
        .action-btn {
            transition: all 0.2s ease;
            transform: scale(0.9);
        }
        .page-thumbnail:hover .action-btn {
            transform: scale(1);
        }
        .action-btn:hover {
            transform: scale(1.2) !important;
        }
        .loading-spinner {
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 3px solid white;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* --- NEW: Styles for Selection Mode --- */
        .selection-mode-active .page-thumbnail {
            cursor: pointer;
        }
        .page-thumbnail.is-selected {
            box-shadow: 0 0 0 3px #6366f1, 0 4px 6px -1px rgba(0,0,0,0.5);
            transform: scale(1.05);
        }
        .is-selected .selection-indicator {
            display: flex;
        }
		.cursor-fit-h {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23f43f5e' stroke-width='2'/%3E%3Cpolyline points='12 22 16 26 20 22' fill='none' stroke='%23f43f5e' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair;
        }
        .cursor-fit-v {
             cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23f43f5e' stroke-width='2'/%3E%3Cpolyline points='22 12 26 16 22 20' fill='none' stroke='%23f43f5e' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair;
        }
		#toolkit-nav h3 {
		    color: #f472b6; /* A nice, soft pink */
		}
		
		/* --- NEW: Watermark Styles --- */
		#watermark-preview-container .page-container {
		    position: relative;
		    margin: 0 auto 1.5rem auto;
		    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
		}
		
		#watermark-preview-container-wrapper {
		    /* Custom scrollbar for better aesthetics */
		    scrollbar-width: thin;
		    scrollbar-color: #4f46e5 #1f2937;
		}
		#watermark-preview-container-wrapper::-webkit-scrollbar {
		    width: 8px;
		    height: 8px;
		}
		#watermark-preview-container-wrapper::-webkit-scrollbar-track {
		    background: #1f2937;
		}
		#watermark-preview-container-wrapper::-webkit-scrollbar-thumb {
		    background-color: #4f46e5;
		    border-radius: 4px;
		}

		#watermark-preview-container canvas {
		    display: block;
		    max-width: 100%;
		    height: auto;
		    border-radius: 4px;
		}

		.watermark-overlay {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    pointer-events: none; /* Overlay doesn't capture mouse events by default */
		    overflow: hidden;
		}

		.watermark-interactive {
		    position: absolute;
		    border: 2px dashed rgba(255, 255, 255, 0.7);
		    box-sizing: border-box;
		    touch-action: none;
		    user-select: none;
		    pointer-events: auto; /* The interactive element itself IS pointer-sensitive */
		    cursor: move;
		}

		.watermark-interactive:hover .resize-handle,
		.watermark-interactive:hover .rotate-handle {
		    opacity: 1;
		}

		.watermark-interactive img {
		    width: 100%;
		    height: 100%;
		    object-fit: contain;
		    pointer-events: none; /* The image inside should NOT capture events */
		}

		.resize-handle {
		    position: absolute;
		    width: 12px;
		    height: 12px;
		    background-color: #a78bfa;
		    border: 1px solid #1f2937;
		    border-radius: 50%;
		    opacity: 0.5;
		    transition: opacity 0.2s;
		    pointer-events: auto;
		}
		.resize-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
		.resize-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
		.resize-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
		.resize-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }

		.rotate-handle {
		    position: absolute;
		    width: 16px;
		    height: 16px;
		    top: -24px;
		    left: 50%;
		    transform: translateX(-50%);
		    background-color: #a78bfa;
		    border-radius: 50%;
		    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/%3E%3C/svg%3E") 8 8, auto;
		    opacity: 0.5;
		    transition: opacity 0.2s;
		    pointer-events: auto;
		}
		.rotate-handle::before {
		    content: '';
		    position: absolute;
		    width: 1px;
		    height: 16px;
		    background: #a78bfa;
		    top: 12px;
		    left: 50%;
		}

		.watermark-page-controls {
		    position: absolute;
		    top: 10px;
		    right: 10px;
		    background-color: rgba(17, 24, 39, 0.8);
		    backdrop-filter: blur(4px);
		    padding: 6px 10px;
		    border-radius: 9999px;
		    display: flex;
		    align-items: center;
		    gap: 8px;
		}

		.watermark-toggle {
		    position: relative;
		    display: inline-block;
		    width: 36px;
		    height: 20px;
		}

		.watermark-toggle input {
		    opacity: 0;
		    width: 0;
		    height: 0;
		}

		.watermark-slider {
		    position: absolute;
		    cursor: pointer;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    background-color: #4b5563;
		    transition: .4s;
		    border-radius: 20px;
		}

		.watermark-slider:before {
		    position: absolute;
		    content: "";
		    height: 14px;
		    width: 14px;
		    left: 3px;
		    bottom: 3px;
		    background-color: white;
		    transition: .4s;
		    border-radius: 50%;
		}

		input:checked + .watermark-slider {
		    background-color: #2563eb;
		}

		input:checked + .watermark-slider:before {
		    transform: translateX(16px);
		}