*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#fafafa}#root{min-height:100vh}a{color:#0095f6;text-decoration:none}a:hover{text-decoration:underline}.search-bar-container{max-width:700px;margin:0 auto}.quick-controls{margin-bottom:10px}.search-form{display:flex;flex-direction:column;gap:16px;width:100%}.username-inputs{display:flex;align-items:center;gap:12px;width:100%}.username-input{flex:1;padding:14px 18px;font-size:16px;border:none;border-radius:12px;outline:none;transition:all .3s ease;background:#ffffff1a;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.username-input::placeholder{color:#fff9}.username-input:focus{background:#ffffff26;box-shadow:0 0 20px #ff69b44d}.username-input:disabled{background-color:#ffffff0d;cursor:not-allowed;opacity:.6}.heart-separator{font-size:28px;animation:pulse 2s ease-in-out infinite;-webkit-user-select:none;user-select:none;flex-shrink:0}@keyframes pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.2);filter:brightness(1.3)}}.search-button{padding:14px 32px;font-size:17px;font-weight:600;color:#fff;background:linear-gradient(135deg,#ff69b4,#ff1493,#c71585);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;white-space:nowrap;box-shadow:0 4px 15px #ff149366;position:relative;overflow:hidden}.search-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.search-button:hover:not(:disabled):before{left:100%}.search-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ff149399}.search-button:active:not(:disabled){transform:translateY(0)}.search-button:disabled{background:linear-gradient(135deg,#999,#666);cursor:not-allowed;opacity:.6;box-shadow:none}@media(max-width:700px){.username-inputs{flex-direction:column;gap:12px}.heart-separator{transform:rotate(90deg);font-size:24px}.username-input,.search-button{width:100%}}.compatibility-card-wrapper{display:flex;flex-direction:column;align-items:center;gap:24px;padding:20px;max-width:100%}.compatibility-warning{background:#ffc10726;border:none;border-radius:12px;padding:16px 20px;max-width:500px;width:100%;color:#ffd54f;text-align:left}.compatibility-warning p{margin:8px 0;font-size:14px;line-height:1.5}.warning-text{color:#ffecb3;font-size:13px}.warning-note{margin-top:12px;font-style:italic;opacity:.9;font-size:12px}.compatibility-card{position:relative;width:360px;height:640px;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px 30px;box-shadow:0 20px 60px #00000080;background:linear-gradient(135deg,#1a0033,#2d1b4e,#4a1942)}.compatibility-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.6;z-index:0;animation:gradientShift 8s ease-in-out infinite}.compatibility-card.match-high:before{background:radial-gradient(circle at 30% 50%,rgba(76,175,80,.3),transparent 60%),radial-gradient(circle at 70% 50%,rgba(139,195,74,.3),transparent 60%)}.compatibility-card.match-medium:before{background:radial-gradient(circle at 30% 50%,rgba(255,193,7,.3),transparent 60%),radial-gradient(circle at 70% 50%,rgba(255,152,0,.3),transparent 60%)}.compatibility-card.match-low:before{background:radial-gradient(circle at 30% 50%,rgba(255,87,34,.3),transparent 60%),radial-gradient(circle at 70% 50%,rgba(244,67,54,.3),transparent 60%)}.compatibility-card.match-very-low:before{background:radial-gradient(circle at 30% 50%,rgba(156,39,176,.3),transparent 60%),radial-gradient(circle at 70% 50%,rgba(103,58,183,.3),transparent 60%)}@keyframes gradientShift{0%,to{transform:translate(0) scale(1)}50%{transform:translate(10px,10px) scale(1.05)}}.card-header,.match-circle-container,.couple-title-container,.narrative-container,.card-footer{position:relative;z-index:1}.card-header{text-align:center}.card-title{font-size:24px;font-weight:700;margin:0 0 12px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);letter-spacing:.5px}.card-usernames{font-size:16px;color:#fffc;margin:0;font-weight:500;text-shadow:0 1px 5px rgba(0,0,0,.3)}.match-circle-container{display:flex;justify-content:center;align-items:center;flex:1;padding:20px 0}.match-circle{width:180px;height:180px;border-radius:50%;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:0 8px 32px #0000004d;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none}.match-circle.match-high{box-shadow:0 0 40px #4caf5099}.match-circle.match-medium{box-shadow:0 0 40px #ffc10799}.match-circle.match-low{box-shadow:0 0 40px #ff572299}.match-circle.match-very-low{box-shadow:0 0 40px #9c27b099}.match-percentage{font-size:56px;font-weight:800;color:#fff;text-shadow:0 4px 15px rgba(0,0,0,.5)}.couple-title-container{text-align:center;padding:0 10px}.couple-title{font-size:20px;font-weight:600;color:#ff69b4;margin:0;line-height:1.4;text-shadow:0 2px 10px rgba(0,0,0,.5);font-style:italic}.narrative-container{text-align:center;padding:0 10px}.narrative-text{font-size:16px;line-height:1.6;color:#fffffff2;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.4);font-weight:400}.card-footer{text-align:center;padding-top:10px}.footer-text{font-size:13px;color:#fff9;margin:0;font-style:italic;text-shadow:0 1px 5px rgba(0,0,0,.3)}.export-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:500px;width:100%}.export-button{flex:1;min-width:180px;padding:14px 24px;font-size:15px;font-weight:600;color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.share-button{background:linear-gradient(135deg,#ff69b4,#ff1493)}.share-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ff149380}.download-button{background:linear-gradient(135deg,#667eea,#764ba2)}.download-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #764ba280}.export-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.export-button:active:not(:disabled){transform:translateY(0)}.reset-button{margin-top:16px;padding:12px 32px;font-size:15px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reset-button:hover{background:#ffffff26;transform:translateY(-2px)}.reset-button:active{transform:translateY(0)}@media(max-width:500px){.compatibility-card{width:320px;height:568px;padding:30px 24px}.card-title{font-size:20px}.card-usernames{font-size:14px}.match-circle{width:150px;height:150px}.match-percentage{font-size:48px}.couple-title{font-size:18px}.narrative-text{font-size:15px}.export-buttons{flex-direction:column}.export-button{width:100%;min-width:unset}}@media(max-width:360px){.compatibility-card{width:280px;height:498px;padding:24px 20px}.card-title{font-size:18px}.match-circle{width:130px;height:130px}.match-percentage{font-size:42px}.couple-title{font-size:16px}.narrative-text{font-size:14px}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #0095f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{margin-top:20px;font-size:18px;color:#262626;font-weight:500}.loading-subtext{margin-top:5px;font-size:14px;color:#8e8e8e}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;max-width:600px;margin:0 auto}.error-icon{font-size:60px;margin-bottom:20px}.error-title{margin:0 0 10px;font-size:24px;color:#ed4956;font-weight:600}.error-message{margin:0 0 30px;font-size:16px;color:#8e8e8e;line-height:1.5}.retry-button{padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background-color:#0095f6;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s}.retry-button:hover{background-color:#0081d6}.app{min-height:100vh;position:relative;overflow-x:hidden}.video-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none}.background-iframe{position:absolute;top:50%;left:50%;width:100vw;height:100vh;min-width:100%;min-height:100%;transform:translate(-50%,-50%);pointer-events:none}@media(min-aspect-ratio:16/9){.background-iframe{height:56.25vw}}@media(max-aspect-ratio:16/9){.background-iframe{width:177.78vh}}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a0033d9,#2d1b4ebf 30%,#4a1942bf 70%,#330033d9);z-index:1;pointer-events:none}.video-overlay:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(255,105,180,.1),transparent 50%),radial-gradient(circle at 80% 20%,rgba(138,43,226,.1),transparent 50%);animation:backgroundPulse 15s ease-in-out infinite;pointer-events:none}.audio-control-button{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;color:#fff;font-size:24px;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 16px #0000004d}.audio-control-button:hover{background:#ff69b4cc;transform:scale(1.1);box-shadow:0 6px 24px #ff69b480}.audio-control-button:active{transform:scale(.95)}@keyframes backgroundPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.app-header{text-align:center;padding:40px 20px 20px;color:#fff;position:relative;z-index:10}.app-header h1{margin:0;font-size:48px;font-weight:700;background:linear-gradient(135deg,#ff69b4,#ff1493,#c71585);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 8px rgba(255,20,147,.3);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.app-subtitle{margin:12px auto 0;font-size:16px;opacity:.9;line-height:1.6;max-width:700px;color:#ffffffd9;max-width:600px;line-height:1.5;text-shadow:0 2px 4px rgba(0,0,0,.3)}.search-container{padding:20px;position:relative;z-index:10}.app-content{min-height:400px;position:relative;z-index:10}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:20px}.loading-text{color:#ffffffe6;font-size:18px;text-align:center;animation:fadeInOut 2s ease-in-out infinite;text-shadow:0 2px 4px rgba(0,0,0,.3)}@keyframes fadeInOut{0%,to{opacity:.6}50%{opacity:1}}.card-container{position:relative}.regenerating-overlay{position:absolute;inset:0;background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;border-radius:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.regenerating-content{display:flex;flex-direction:column;align-items:center;gap:16px}.regenerating-text{color:#fffffff2;font-size:17px;font-weight:500;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.5);animation:fadeInOut 2s ease-in-out infinite}.welcome-message{text-align:center;padding:20px;color:#fff;max-width:700px;margin:0 auto}.welcome-icon{font-size:64px;margin-bottom:20px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.welcome-message h2{font-size:36px;margin:0 0 16px;font-weight:700;background:linear-gradient(135deg,#fff,#ffc3e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.2);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.welcome-description{font-size:18px;line-height:1.6;opacity:.9;margin:0 0 32px;color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.3)}.welcome-features{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:32px}.feature{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#ffffff1a;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;min-width:140px;transition:all .3s ease}.feature:hover{transform:translateY(-4px);background:#ffffff26;box-shadow:0 8px 24px #ff69b44d}.feature-icon{font-size:32px}.feature-text{font-size:14px;font-weight:500;color:#ffffffe6}@media(max-width:768px){.app-header h1{font-size:36px}.app-subtitle{font-size:15px;padding:0 10px}.welcome-icon{font-size:52px}.welcome-message h2{font-size:28px}.welcome-description{font-size:16px}.welcome-features{gap:16px}.feature{min-width:120px;padding:14px}.feature-icon{font-size:28px}.feature-text{font-size:13px}.loading-text{font-size:16px}}@media(max-width:480px){.app-header h1{font-size:28px}.app-subtitle{font-size:14px}.welcome-message{padding:40px 16px}.welcome-icon{font-size:48px}.welcome-message h2{font-size:24px}.welcome-description{font-size:15px}.welcome-features{flex-direction:column;gap:12px}.feature{width:100%}.audio-control-button{width:48px;height:48px;bottom:16px;right:16px;font-size:20px}}.legal-disclaimer{max-width:700px;margin:40px auto 20px;padding:16px 20px;background:#ffffff0d;border-radius:12px;border:none;text-align:center}.legal-disclaimer p{font-size:13px;line-height:1.5;color:#ffffffb3;margin:0}.legal-disclaimer strong{color:#ffffffe6}@media(max-width:768px){.legal-disclaimer{max-width:90%;margin:32px auto 16px;padding:14px 16px}.legal-disclaimer p{font-size:12px}}.single-cover-badge{display:flex;gap:20px;max-width:700px;margin:30px auto;padding:24px;border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #00000080;transition:all .3s ease;align-items:flex-start}.single-cover-badge:hover{transform:translateY(-4px);box-shadow:0 12px 40px #ff69b466;border-color:#ff69b480}.badge-image{width:240px;border-radius:12px;object-fit:cover;box-shadow:0 4px 16px #0006;flex-shrink:0}.badge-content{flex:1;display:flex;flex-direction:column;gap:12px}.badge-header{display:flex;flex-direction:column;gap:4px}.badge-title{font-size:20px;font-weight:600;color:gold;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.5)}.badge-artist{font-size:16px;font-weight:500;color:#ffffffe6;margin:0;text-shadow:0 2px 6px rgba(0,0,0,.4)}.badge-description{margin-top:4px}.badge-description p{font-size:15px;line-height:1.6;color:#ffffffd9;margin:0 0 12px;text-shadow:0 1px 3px rgba(0,0,0,.3)}.badge-description p:last-child{margin-bottom:0}.badge-description strong{color:#ff69b4;font-weight:600}.badge-description-footer{font-style:italic;color:#ffffffb3;font-size:14px;margin-top:16px!important;padding-top:12px;border-top:none}@media(max-width:768px){.single-cover-badge{max-width:90%;margin:32px auto;padding:20px;gap:16px}.badge-image{width:110px;height:110px}.badge-title{font-size:18px}.badge-artist{font-size:15px}.badge-description p{font-size:16px}.badge-description-footer{font-size:15px}}@media(max-width:480px){.single-cover-badge{flex-direction:column;padding:16px;gap:16px;align-items:center;text-align:center}.badge-image{width:120px;height:120px}.badge-header{align-items:center}.badge-title{font-size:17px}.badge-artist{font-size:14px}.badge-description p{font-size:15px;text-align:left}.badge-description-footer{font-size:14px;text-align:center}}.social-links{max-width:600px;margin:20px auto 40px;padding:24px 20px;text-align:center}.social-title{font-size:18px;font-weight:600;color:#ffffffe6;margin:0 0 20px;text-shadow:0 2px 8px rgba(0,0,0,.5)}.social-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.social-button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border-radius:50%;text-decoration:none;transition:all .3s ease;background:transparent;border:none}.social-button:hover{transform:translateY(-6px) scale(1.1);box-shadow:0 12px 32px #00000080}.social-button:active{transform:translateY(-4px) scale(1.08)}.social-icon{width:48px;height:48px;object-fit:contain;transition:all .3s ease}.social-button:hover .social-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}@media(max-width:768px){.social-links{padding:20px 16px;margin:16px auto 32px}.social-title{font-size:16px;margin-bottom:16px}.social-buttons{gap:16px}.social-button{width:52px;height:52px}.social-icon{width:44px;height:44px}}@media(max-width:480px){.social-links{padding:16px 12px}.social-title{font-size:15px}.social-buttons{gap:14px}.social-button{width:48px;height:48px}.social-icon{width:40px;height:40px}}