:root {
    --primary: #6366f1;
    --accent: #a855f7;
    --bg: #030712;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

body { background: var(--bg); color: white; overflow: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; }

/* Galaxy & Shooting Stars Animation */
.space { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); }
.stars { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; box-shadow: 10vw 20vh white, 30vw 50vh white, 70vw 10vh white, 90vw 80vh white, 50vw 40vh white; animation: twinkle 5s infinite; }

.shooting-stars span { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,0.1), 0 0 0 8px rgba(255,255,255,0.1), 0 0 20px rgba(255,255,255,1); animation: animate 3s linear infinite; }
.shooting-stars span::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 300px; height: 1px; background: linear-gradient(90deg, #fff, transparent); }
.shooting-stars span:nth-child(1) { top: 0; right: 0; left: initial; animation-delay: 0s; animation-duration: 1s; }
.shooting-stars span:nth-child(2) { top: 80px; right: 100px; left: initial; animation-delay: 0.2s; animation-duration: 3s; }

@keyframes animate { 
    0% { transform: rotate(315deg) translateX(0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: rotate(315deg) translateX(-1000px); opacity: 0; }
}

/* Glass Card */
.container { animation: fadeInUp 1s ease-out; }
.glass-card { background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(20px); padding: 40px; border-radius: 32px; width: 380px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }

.header h1 { font-size: 24px; font-weight: 800; margin: 10px 0; background: linear-gradient(to right, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header p { font-size: 14px; color: #94a3b8; margin-bottom: 30px; }

.form-group { text-align: left; margin-bottom: 20px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #818cf8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }

input[type="text"] { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--border); padding: 12px 16px; border-radius: 12px; color: white; transition: 0.3s; }
input[type="text"]:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); }

.file-drop-area { border: 2px dashed var(--border); border-radius: 12px; padding: 20px; text-align: center; position: relative; transition: 0.3s; }
.file-drop-area:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.05); }
#fileInput { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }

/* Buttons */
.btn-glow { width: 100%; padding: 16px; background: linear-gradient(45deg, var(--primary), var(--accent)); border: none; border-radius: 12px; color: white; font-weight: 800; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4); }

/* Custom Toast */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast { background: rgba(15, 23, 42, 0.9); border-left: 4px solid var(--primary); color: white; padding: 15px 25px; border-radius: 8px; margin-bottom: 10px; backdrop-filter: blur(10px); box-shadow: 0 10px 15px rgba(0,0,0,0.2); animation: slideIn 0.3s ease-out; }

/* WA Float */
.wa-float { position: fixed; bottom: 30px; right: 30px; display: flex; align-items: center; text-decoration: none; z-index: 1000; }
.wa-float img { width: 50px; position: relative; z-index: 2; }
.wa-text { background: #25d366; color: white; padding: 8px 15px; border-radius: 20px; margin-right: -20px; padding-right: 30px; font-size: 13px; font-weight: 600; }
.wa-pulse { position: absolute; width: 50px; height: 50px; background: #25d366; border-radius: 50%; right: 0; animation: pulse 2s infinite; }

@keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2); opacity: 0; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }