:root {
    --primary-color: #5046e5; /* The target purple */
    --success-green: #059669; /* Darker green for text on light BG */
    --success-bg: #dcfce7; /* Mint green from image_2.png */
    --bg-light: #f8fafc;
}

body {
    background-color: var(--bg-light);
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    font-size: 14px; /* Base scaling */
}


.privacy-badge-v2 {
    font-size: 0.9rem; /* Smaller text */
    color: var(--success-green);
    background: var(--success-bg);
    padding: 6px 18px; /* Compact padding */
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* tighter gap */
}

.upload-zone-v2 {
    border: 2px dashed #cbd5e1;
    border-radius: 1.5rem; /* slightly less rounded */
    background: #ffffff;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.upload-zone-v2:hover {
    border-color: var(--primary-color);
    background: #f8fafc;
}

.icon-circle {
    width: 80px; /* Reduced size */
    height: 80px; /* Reduced size */
    background: #eff6ff; /* light blue */
    color: #2563eb; /* distinct blue from icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem; /* Reduced icon size */
}

.btn-select-file {
    background: var(--primary-color);
    color: white;
    border-radius: 8px; /* Square/rectangular look from image_2.png */
    font-weight: 600;
    font-size: 1.1rem; /* Scaled down */
    border: none;
    transition: background 0.2s;
}

.btn-select-file:hover {
    background: #4338ca;
    color: white;
    /* Removed translate on hover for match */
}

/* --- Functional Editor Styles --- */

.preview-container {
    position: relative;
    max-height: 500px;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

#mainPreview {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

#cropOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

#cropBox {
    position: absolute;
    border: 2px solid white;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
    pointer-events: all;
    box-sizing: border-box;
}

.crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
}

.handle-nw { top: -7px; left: -7px; cursor: nw-resize; }
.handle-ne { top: -7px; right: -7px; cursor: ne-resize; }
.handle-sw { bottom: -7px; left: -7px; cursor: sw-resize; }
.handle-se { bottom: -7px; right: -7px; cursor: se-resize; }

.card {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Softer shadow */
    border-radius: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    border: none;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
}

.btn-primary:hover { background-color: #4338ca; }

.form-label { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.3rem; }

.badge-info { 
    background-color: #e0e7ff; 
    color: #4338ca; 
    padding: 0.5em 0.8em;
}

@media (max-width: 768px) {
    .container { padding-top: 1rem !important; }
}