@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&display=swap');

:root {
    --bg: radial-gradient(circle at 50% 50%, #fdfbf7 0%, #eef2ff 100%);
    --glass: rgba(255, 255, 255, 0.6);
    --glass-border: 1px solid rgba(255, 255, 255, 0.8);
    --shadow: 0 15px 40px rgba(0,0,0,0.1);
    --primary: #f43f5e; /* Rose Youtube/Passion */
    --text: #1e293b;
    --nacré: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--text); overflow: hidden; }

/* CONTAINER PRINCIPAL */
.glass-panel {
    background: var(--glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: var(--glass-border); border-radius: 40px; box-shadow: var(--shadow);
    padding: 50px; width: 90%; max-width: 600px; text-align: center;
    position: relative; overflow: hidden; animation: pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop { 0%{transform:scale(0.9);opacity:0} 100%{transform:scale(1);opacity:1} }

/* TITRES */
h1 { margin: 0 0 10px 0; font-weight: 900; font-size: 2.5rem; background: -webkit-linear-gradient(45deg, #f43f5e, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
p { margin-bottom: 40px; font-weight: 500; opacity: 0.6; }

/* INPUT URL */
.input-group { position: relative; margin-bottom: 30px; }
input {
    width: 100%; padding: 20px 25px; border-radius: 25px; border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.5); font-family: inherit; font-size: 1.1rem; color: var(--text);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); transition: 0.3s; outline: none;
}
input:focus { background: white; border-color: var(--primary); box-shadow: 0 10px 30px rgba(244, 63, 94, 0.2); transform: scale(1.02); }

/* OPTIONS FORMAT */
.options-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 30px; }
.radio-card {
    background: white; padding: 15px; border-radius: 18px; cursor: pointer;
    transition: 0.3s; border: 2px solid transparent; opacity: 0.7; font-weight: 700;
}
.radio-card:hover { transform: translateY(-3px); }
input[type="radio"] { display: none; }
input[type="radio"]:checked + .radio-card {
    border-color: var(--primary); color: var(--primary); opacity: 1;
    background: #fff1f2; box-shadow: 0 5px 15px rgba(244, 63, 94, 0.2);
}

/* BOUTON CONVERTIR */
.btn-convert {
    width: 100%; padding: 20px; border-radius: 25px; border: none;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: white; font-size: 1.2rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 10px 25px rgba(225, 29, 72, 0.3); transition: 0.3s;
    position: relative; overflow: hidden;
}
.btn-convert:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(225, 29, 72, 0.4); }
.btn-convert:active { transform: scale(0.95); }

/* LOADER & RESULT */
.hidden { display: none; }
.loader { margin: 30px auto; width: 50px; height: 50px; border: 5px solid #ffe4e6; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.result-box {
    margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.8);
    border-radius: 20px; animation: pop 0.4s;
}
.download-link {
    display: inline-block; padding: 15px 30px; background: #10b981; color: white;
    text-decoration: none; border-radius: 15px; font-weight: 700; margin-top: 10px;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); transition: 0.2s;
}
.download-link:hover { transform: scale(1.05); background: #059669; }

/* ABSTRACT SHAPES */
.shape { position: absolute; border-radius: 50%; filter: blur(50px); z-index: -1; }
.s1 { width: 300px; height: 300px; background: #fecdd3; top: -50px; left: -50px; }
.s2 { width: 400px; height: 400px; background: #c7d2fe; bottom: -100px; right: -100px; }