.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 */
		}