@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;700&display=swap";:root{--bg-dark:#0f172a;--bg-card:#1e293bb3;--text-main:#f8fafc;--text-muted:#94a3b8;--primary:#3b82f6;--primary-hover:#2563eb;--accent:#8b5cf6;--border:#ffffff1a;--success:#10b981;--error:#ef4444}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);background-image:radial-gradient(at 0 0,#3b82f626 0,#0000 50%),radial-gradient(at 100% 100%,#8b5cf626 0,#0000 50%);background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;padding:1rem;font-family:Inter,sans-serif;display:flex}.app-container{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:24px;width:100%;max-width:500px;padding:2.5rem;animation:.8s cubic-bezier(.16,1,.3,1) fadeIn;box-shadow:0 25px 50px -12px #00000080}.header{text-align:center;margin-bottom:2rem}.header h1{background:linear-gradient(135deg,#fff,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-family:Outfit,sans-serif;font-size:2rem;font-weight:700}.header p{color:var(--text-muted);font-size:.95rem}.form-group{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;display:flex}.form-group label{color:var(--text-main);padding-left:.25rem;font-size:.9rem;font-weight:500}.form-select{appearance:none;border:1px solid var(--border);color:var(--text-main);cursor:pointer;background-color:#0f172a99;border-radius:12px;outline:none;width:100%;padding:1rem;font-family:inherit;font-size:1rem;transition:all .3s}.form-select:focus,.form-select:hover{border-color:var(--primary);box-shadow:0 0 0 4px #3b82f61a}.form-select option{background-color:var(--bg-dark)}.upload-area{border:2px dashed var(--border);text-align:center;cursor:pointer;background:#0f172a66;border-radius:16px;padding:2.5rem 1.5rem;transition:all .3s;position:relative;overflow:hidden}.upload-area:hover,.upload-area.drag-active{border-color:var(--primary);background:#3b82f60d}.upload-icon{width:48px;height:48px;color:var(--primary);background:#3b82f61a;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 1rem;display:flex}.upload-icon svg{width:24px;height:24px}.upload-text{color:var(--text-main);margin-bottom:.25rem;font-size:1rem;font-weight:500}.upload-hint{color:var(--text-muted);font-size:.85rem}.file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.preview-area{border:1px solid var(--border);background:#0f172a99;border-radius:12px;justify-content:space-between;align-items:center;padding:1rem;animation:.3s slideUp;display:flex}.preview-info{flex:1;align-items:center;gap:1rem;min-width:0;display:flex}.preview-thumb{object-fit:cover;background:var(--bg-dark);border-radius:8px;width:40px;height:40px}.preview-name{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;max-width:250px;font-size:.9rem;overflow:hidden}.remove-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.remove-btn:hover{color:var(--error);background:#ef44441a}.submit-btn{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;margin-top:1rem;padding:1rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 15px #3b82f64d}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #3b82f666}.submit-btn:disabled{opacity:.7;cursor:not-allowed;color:var(--text-muted);box-shadow:none;background:#ffffff1a;transform:none}.status-message{text-align:center;border-radius:12px;margin-top:1rem;padding:1rem;font-size:.9rem;font-weight:500;animation:.3s slideUp}.status-success{color:var(--success);background:#10b9811a;border:1px solid #10b98133}.status-error{color:var(--error);background:#ef44441a;border:1px solid #ef444433}.spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}