.drop-zone { border: 2px dashed var(--border-color); border-radius: 8px; padding: 25px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fafafa; }
            .drop-zone:hover { border-color: var(--primary-color); background: #eff6ff; }
            .drop-zone input { display: none; }
            .drop-zone p { font-size: 0.9rem; color: var(--text-muted); margin-top: 6px; }

            .editor-container { display: none; margin-top: 20px; text-align: center; }
        
            .img-preview-box { height: 350px; width: 100%; background: #f1f5f9; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 10px; border: 1px solid var(--border-color); margin-bottom: 15px; }
            .img-preview-box img { max-width: 100%; max-height: 100%; display: block; border-radius: 4px; }

            .controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }
            .control-btn { background: #e2e8f0; border: none; padding: 10px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--text-main); transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
            .control-btn:hover { background: #cbd5e1; }

            .result-box {
                margin-top: 15px;
                padding: 15px;
                font-size: 1.1rem;
                font-weight: bold;
                border-radius: 8px;
                color: white;
                text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
                display: none;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .action-btn { width: 100%; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
            .action-btn:hover { background-color: var(--primary-hover); }