/* ------------------------ GLOBAL ------------------------ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --error-color: #ef4444;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --bg-dark: #0f172a;
            --bg-darker: #020617;
            --border-color: rgba(148,163,184,0.25);
        }

        body {
            font-family: 'Segoe UI', Roboto, Arial;
            background: var(--bg-darker);
            min-height: 100vh;
            padding: 15px;
            color: var(--text-primary);
            overflow-x: hidden;
            /* Performance optimizations */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .background-animation {
            position: fixed; 
            top:0; 
            left:0;
            width:100%; 
            height:100%;
            z-index:0; 
            overflow:hidden;
            /* GPU acceleration */
            will-change: transform;
            transform: translateZ(0);
        }

        .gradient-orb {
            position:absolute; 
            border-radius:50%;
            filter:blur(80px); 
            opacity:.5;
            animation: float 22s infinite ease-in-out;
            /* GPU acceleration for smooth animations */
            will-change: transform;
            transform: translateZ(0);
        }

        .orb1 { 
            width:480px; 
            height:480px; 
            background:linear-gradient(135deg,#6366f1,#8b5cf6); 
            top:-240px; 
            left:-240px; 
        }
        .orb2 { 
            width:380px; 
            height:380px; 
            background:linear-gradient(135deg,#8b5cf6,#ec4899); 
            top:50%; 
            right:-180px; 
            animation-delay: -7s;
        }
        .orb3 { 
            width:560px; 
            height:560px; 
            background:linear-gradient(135deg,#3b82f6,#06b6d4); 
            bottom:-300px; 
            left:28%;
            animation-delay: -14s;
        }

        @keyframes float {
            0%,100% { transform:translate3d(0,0,0) scale(1); }
            50% { transform:translate3d(80px,-60px,0) scale(1.1); }
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        header {
            text-align:center;
            margin-bottom: 35px;
            padding-top: 10px;
        }

        header h1 {
            font-size: 2.8rem;
            letter-spacing: -1px;
            font-weight: 800;
            background: linear-gradient(135deg,#ffffff,#a5b4fc);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
            margin-bottom: 6px;
        }

        .subtitle {
            font-size: 1.1rem;
            color: var(--text-secondary);
        }

        /* ------------------------ MAIN CARD ------------------------ */
        main {
            background: rgba(30,41,59,0.75);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 22px;
            padding: 30px;
            border: 1px solid var(--border-color);
            box-shadow: 0 20px 60px rgba(0,0,0,0.55);
        }

        /* ------------------------ UPLOAD ZONE ------------------------ */
        .upload-zone {
            border: 2px dashed var(--border-color);
            border-radius: 16px;
            padding: 55px 20px;
            text-align:center;
            cursor:pointer;
            background: rgba(15,23,42,0.45);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            /* GPU acceleration */
            will-change: transform, border-color, background;
            transform: translateZ(0);
        }

        .upload-zone:hover,
        .upload-zone.drag-over {
            border-color: var(--primary-color);
            background: rgba(99,102,241,0.12);
            transform: scale(1.015) translateZ(0);
        }

        /* ------------------------ BUTTONS ------------------------ */
        .btn {
            padding: 14px 26px;
            border-radius: 12px;
            border:none;
            font-weight:600;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            cursor:pointer;
            display:inline-flex; 
            align-items:center; 
            justify-content:center;
            gap:8px;
            /* GPU acceleration */
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        .btn-primary {
            background: linear-gradient(135deg,var(--primary-color),var(--secondary-color));
            color:white;
        }
        .btn-primary:hover { 
            transform: translateY(-2px) translateZ(0); 
            box-shadow: 0 4px 12px rgba(99,102,241,0.4);
        }
        .btn-primary:active {
            transform: translateY(0) translateZ(0);
        }

        .btn-success {
            background:linear-gradient(135deg,#10b981,#059669);
            color:white;
        }
        .btn-success:hover {
            transform: translateY(-2px) translateZ(0);
            box-shadow: 0 4px 12px rgba(16,185,129,0.4);
        }
        .btn-success:active {
            transform: translateY(0) translateZ(0);
        }

        .btn-secondary {
            background:rgba(148,163,184,.2);
            border:1px solid var(--border-color);
            color:white;
        }
        .btn-secondary:hover {
            background:rgba(148,163,184,.3);
            transform: translateY(-1px) translateZ(0);
        }
        .btn-secondary:active {
            transform: translateY(0) translateZ(0);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        /* ------------------------ PREVIEW ------------------------ */
        .preview-section { 
            margin-top:35px; 
            display:none;
            /* Smooth appearance */
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .preview-header {
            display:flex; 
            justify-content:space-between;
            flex-wrap:wrap; 
            gap:12px;
            align-items:center;
            margin-bottom:20px;
        }

        .preview-grid {
            display:grid;
            gap:20px;
            grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
        }

        .preview-item {
            background: rgba(15,23,42,0.7);
            border:1px solid var(--border-color);
            border-radius:16px;
            overflow:hidden;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            /* GPU acceleration */
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
            /* Smooth loading */
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: scale(0.9) translateZ(0); }
            to { opacity: 1; transform: scale(1) translateZ(0); }
        }

        .preview-item img {
            width:100%;
            height:150px;
            object-fit:cover;
            display:block;
            /* Smooth image loading */
            opacity: 0;
            transition: opacity 0.3s ease-out;
        }

        .preview-item img.loaded {
            opacity: 1;
        }

        .preview-item:hover {
            transform: translateY(-6px) translateZ(0);
            box-shadow:0 10px 25px rgba(99,102,241,0.30);
        }

        .preview-item-info {
            display:flex; 
            justify-content:space-between;
            align-items:center;
            padding:10px 12px;
        }

        .btn-remove {
            width:30px; 
            height:30px;
            border-radius:8px;
            background:rgba(239,68,68,.25);
            color:var(--error-color);
            font-size:1.2rem;
            border:none;
            cursor:pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            /* GPU acceleration */
            will-change: transform;
            transform: translateZ(0);
        }

        .btn-remove:hover {
            background:rgba(239,68,68,.35);
            transform:scale(1.15) translateZ(0);
        }

        .btn-remove:active {
            transform:scale(1.05) translateZ(0);
        }

        /* ------------------------ LOADER ------------------------ */
        .btn-loader {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* ------------------------ STATUS MESSAGES ------------------------ */
        .status-message {
            margin-top:20px;
            padding:14px 16px;
            border-radius:12px;
            display:none;
            border-left:4px solid transparent;
            font-weight:500;
            /* Smooth appearance */
            animation: slideInUp 0.3s ease-out;
        }

        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .status-message.show { display:block; }
        .status-message.success {
            background:rgba(16,185,129,.18);
            color:#6ee7b7;
            border-left-color:#10b981;
        }
        .status-message.error {
            background:rgba(239,68,68,.18);
            color:#fca5a5;
            border-left-color:#ef4444;
        }
        .status-message.info {
            background:rgba(59,130,246,.18);
            color:#93c5fd;
            border-left-color:#3b82f6;
        }

        /* ----------------------------------------------------------
            MOBILE & TABLET RESPONSIVENESS
        ---------------------------------------------------------- */

        /* Large Tablets */
        @media (max-width: 1024px) {
            header h1 { font-size: 2.5rem; }
            main { padding: 25px; }
        }

        /* Small Tablets */
        @media (max-width: 768px) {
            header h1 { font-size: 2.2rem; }
            .upload-zone { padding: 40px 12px; }

            .preview-grid {
                grid-template-columns: repeat(auto-fill, minmax(135px,1fr));
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .preview-header { flex-direction: column; align-items:flex-start; }
        }

        /* Mobile Screens */
        @media (max-width: 480px) {
            body { padding: 10px; }
            header h1 { font-size: 1.8rem; }
            .subtitle { font-size: 0.95rem; }

            .upload-zone { padding: 35px 10px; }
            .preview-grid { grid-template-columns: repeat(2,1fr); gap:14px; }

            .preview-item img { height:120px; }

            .btn { padding: 12px 20px; font-size: 0.9rem; }
        }

        /* Reduce motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }