:root { --primary: #2563eb; --bg: #f8fafc; --card: #ffffff; --text: #1e293b; --accent: #10b981; }
        body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; justify-content: center; padding: 2rem; margin: 0; }
        .container { background: var(--card); width: 100%; max-width: 600px; padding: 2.5rem; border-radius: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; text-align: center; }
        h1 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.8rem; }
        p.subtitle { color: #64748b; margin-bottom: 2rem; font-size: 0.95rem; }
        
        .drop-zone { border: 2px dashed #cbd5e1; border-radius: 1rem; padding: 3rem 1rem; background: #f1f5f9; cursor: pointer; transition: 0.3s; margin-bottom: 1.5rem; }
        .drop-zone:hover, .drop-zone.dragover { background: #e2e8f0; border-color: var(--primary); }
        
        .btn-main, .btn-success { padding: 1rem; border-radius: 0.75rem; font-weight: bold; cursor: pointer; width: 100%; display: none; text-decoration: none; margin-top: 1rem; border: none; box-sizing: border-box;}
        .btn-main { background: var(--primary); color: white; }
        .btn-success { background: var(--accent); color: white; }
        
        .loader { border: 4px solid #f3f3f3; border-top: 4px solid var(--primary); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 1rem auto; display: none; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        #debugBox { margin-top: 1rem; padding: 1rem; background: #fee2e2; color: #991b1b; border-radius: 0.5rem; font-size: 0.8rem; text-align: left; display: none; border: 1px solid #f87171;}