@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--font-main:"Inter", system-ui, -apple-system, sans-serif;--bg-color:#fff;--text-color:#1f2937;--primary-gradient:linear-gradient(180deg, #2e68f5 0%, #5b8af7 100%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{flex-direction:column;width:100%;min-height:100vh;margin:0 auto;display:flex;overflow-x:hidden}.container{width:100%;max-width:1440px;margin:0 auto;padding:0 40px}.main-content{flex:1;width:100%}.header{z-index:10;background-color:#fff;justify-content:center;width:100%;display:flex;position:relative;box-shadow:0 5.5px 19.25px #2e68f51f}.header-content{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;max-width:1980px;height:96.25px;padding:0 110px;display:flex}.logoContainer{align-items:center;gap:16px;display:flex}.logoIcon{width:49.5px;height:49.5px;display:block}.logoText{color:#000;letter-spacing:-.02em;font-size:24px;font-weight:700}.authContainer{align-items:center;gap:32px;margin-left:auto;display:flex}.btnLogin{cursor:pointer;width:120.81px;height:49.5px;font-family:var(--font-main);color:#4a5565;background:0 0;border:none;border-radius:8.25px;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:500;transition:opacity .2s;display:flex}.btnLogin:hover{opacity:.7}.btnRegister{cursor:pointer;width:232.07px;height:60.5px;font-family:var(--font-main);color:#fff;background-color:#2e68f5;border:none;border-radius:8.25px;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:500;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 5.5px 19.25px #2e68f54d}.btnRegister:hover{transform:translateY(-2px);box-shadow:0 8px 24px #2e68f566}.footer{background-color:#fff;justify-content:center;width:100%;display:flex}.footer-content{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;max-width:1980px;height:127.87px;padding:0 115.5px;display:flex}.footer-copyright{color:#9ca3af;margin:0;font-family:Inter,sans-serif;font-size:19.25px;font-weight:400;line-height:28.88px}.footer-policy{color:#6b7280;margin:0;font-family:Inter,sans-serif;font-size:19.25px;font-weight:400;line-height:28.88px;text-decoration-line:none;transition:color .2s}.footer-policy:hover{color:#4b5563;text-decoration-line:underline}.modalOverlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#ffffffb8;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modalContent{box-sizing:border-box;background:#fff;border:1.38px solid #e5e7eb;border-radius:27.5px;flex-direction:column;align-items:center;width:825px;padding-bottom:80px;display:flex;position:relative;box-shadow:0 13.75px 20.63px #0f172a14}.modalCloseBtn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:56.38px;height:56.38px;padding:0;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:20.62px;right:20.62px}.modalCloseBtn:hover{opacity:.7;transform:scale(1.05)}.modalHeader{flex-direction:column;align-items:center;margin-top:88.75px;display:flex}.modalLoginIcon{border:none;outline:none;width:88px;height:88px;margin-bottom:23.38px}.modalTitle{color:#0f172a;letter-spacing:-.69px;margin:0 0 25.62px;font-family:Space Grotesk,sans-serif;font-size:44px;font-weight:400;line-height:48.5px}.modalSubtitle{color:#64748b;letter-spacing:-.69px;margin:0 0 50.88px;font-family:Inter,sans-serif;font-size:24.75px;font-weight:400;line-height:27.5px}.modalForm{flex-direction:column;width:550px;display:flex}.formGroup{flex-direction:column;width:100%;display:flex}.formLabel{color:#0f172a;margin-bottom:11px;font-family:Inter,sans-serif;font-size:20px;font-weight:500;line-height:27.5px}.formInput{color:#0f172a;box-sizing:border-box;background:#fff;border:2.75px solid #e2e8f0;border-radius:12px;outline:none;width:100%;height:55px;padding:0 20px;font-family:Inter,sans-serif;font-size:18px;font-weight:400;transition:border-color .2s}.formInput::placeholder{color:#94a3b8}.formInput:focus{border-color:#2e68f5}.passwordInputContainer{width:100%;position:relative}.passwordInput{padding-right:50px}.passwordToggleBtn{box-shadow:none;cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:opacity .2s;display:flex;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.passwordToggleBtn img{border:none;outline:none;display:block}.passwordToggleBtn:hover{opacity:.7}.formOptions{justify-content:space-between;align-items:center;margin-top:13.75px;margin-bottom:34.38px;display:flex}.checkboxLabel{color:#64748b;cursor:pointer;align-items:center;gap:8px;font-family:Inter,sans-serif;font-size:16px;display:flex}.customCheckbox{appearance:none;cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:4px;outline:none;width:20px;height:20px;transition:all .2s;position:relative}.customCheckbox:checked{background-color:#2563eb;border-color:#2563eb}.customCheckbox:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:10px;position:absolute;top:2px;left:6px;transform:rotate(45deg)}.forgotPassword{color:#2e68f5;font-family:Inter,sans-serif;font-size:16px;text-decoration:none;transition:color .2s}.forgotPassword:hover{color:#1d4ed8;text-decoration:underline}.loginSubmitBtn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:20px;justify-content:center;align-items:center;width:100%;height:71.5px;font-family:Inter,sans-serif;font-size:24.75px;font-weight:400;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 13.75px 20.63px #2563eb33,0 5.5px 8.25px #2563eb33}.loginSubmitBtn:hover{transform:translateY(-2px);box-shadow:0 18px 25px #2563eb4d,0 8px 12px #2563eb40}.loginSubmitBtn:active{transform:translateY(1px);box-shadow:0 8px 15px #2563eb33,0 4px 6px #2563eb33}.modalFooter{justify-content:center;align-items:center;width:100%;margin-top:34.38px;display:flex}.noAccountText{letter-spacing:-.69px;color:#64748b;margin-right:6px;font-family:Inter,sans-serif;font-size:22px;font-weight:400;line-height:23.38px}.createAccountLink{letter-spacing:-.69px;color:#2563eb;cursor:pointer;font-family:Inter,sans-serif;font-size:22px;font-weight:600;line-height:23.38px;text-decoration:none}.createAccountLink:hover{text-decoration:underline}.heroSection{justify-content:center;align-items:center;width:100%;height:856.63px;padding:0 20px;display:flex;position:relative;overflow:hidden}.heroBackground{z-index:1;background-image:url(/assets/Background-FHyEJwP1.png);background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}.heroContent{z-index:2;text-align:center;flex-direction:column;align-items:center;max-width:900px;display:flex;position:relative}.heroTitle{color:#1f2937;letter-spacing:-.02em;margin-bottom:24px;font-size:80px;font-weight:700}.highlight{color:#2e68f5}.heroSubtitle{color:#6b7280;margin-bottom:88.88px;font-size:24px;line-height:1.5}.btnPanel{color:#fff;width:427.12px;height:77px;font-family:var(--font-main);cursor:pointer;background-color:#2563eb;border:none;border-radius:11px;justify-content:center;align-items:center;font-size:18px;font-weight:500;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 5.5px 19.25px #2e68f54d}.btnPanel:hover{transform:translateY(-2px);box-shadow:0 8px 24px #2e68f566}.cardsSection{justify-content:center;align-items:center;width:100%;margin-top:165.56px;margin-bottom:200px;display:flex}.cardsContainer{flex-direction:row;justify-content:center;align-items:stretch;gap:33px;width:100%;display:flex}.featureCard{box-sizing:border-box;background-color:#fff;border-radius:20px;flex-direction:column;justify-content:flex-start;width:506px;padding:40px;display:flex;box-shadow:0 5.5px 19.25px #2e68f514}.featureCard-header{flex-direction:column;align-items:flex-start;margin-bottom:27.5px;display:flex}.featureCard-icon{width:55px;height:55px;margin-bottom:27.5px}.featureCard-title{color:#111827;margin:0 0 8.25px;font-family:Inter,sans-serif;font-size:24.75px;font-weight:700;line-height:38.5px}.featureCard-subtitle{color:#64748b;margin:0;font-family:Inter,sans-serif;font-size:19.25px;font-weight:400;line-height:27.5px}.featureCard-list{flex-direction:column;gap:16.5px;margin:0;padding:0;list-style:none;display:flex}.featureCard-listItem{color:#374151;align-items:center;gap:16.5px;font-family:Inter,sans-serif;font-size:19.25px;font-weight:400;line-height:27.5px;display:flex}.featureCard-checkIcon{flex-shrink:0;width:20.62px;height:20.62px}.howItWorksSection{flex-direction:column;align-items:center;width:100%;margin-top:176px;margin-bottom:120px;display:flex}.howItWorksHeader{text-align:center;flex-direction:column;align-items:center;margin-bottom:72px;display:flex}.howItWorksTitle{font-family:var(--font-main);color:#111827;margin-bottom:16px;font-size:40px;font-weight:700}.howItWorksSubtitle{font-family:var(--font-main);color:#6b7280;max-width:600px;font-size:18px}.howItWorksSteps{flex-direction:row;justify-content:center;align-items:center;gap:33px;width:100%;display:flex}.howItWorksCard{text-align:center;box-sizing:border-box;background-color:#fff;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;width:327.25px;height:231px;padding:0 52px;display:flex;box-shadow:0 5.5px 19.25px #2e68f514}.howItWorksCard-number{color:#2e68f5;margin-bottom:5.5px;font-family:Inter,sans-serif;font-size:41.25px;font-weight:900;line-height:48.5px}.howItWorksCard-title{color:#111827;margin:0 0 5.5px;font-family:Inter,sans-serif;font-size:22px;font-weight:700;line-height:33px}.howItWorksCard-desc{color:#64748b;margin:0;font-family:Inter,sans-serif;font-size:19.25px;font-weight:400;line-height:27.5px}.ctaSection{justify-content:center;width:100%;display:flex}.ctaContainer{box-sizing:border-box;text-align:center;background:linear-gradient(135deg,#2e68f5 0%,#3d7af7 100%);border-radius:33px;flex-direction:column;align-items:center;width:1056px;height:440px;margin-top:176px;margin-bottom:176px;padding-top:66px;display:flex;position:relative;overflow:hidden;box-shadow:0 27.5px 82.5px #2e68f559}.ctaIcon{width:55px;height:55px;margin-bottom:27.5px}.ctaTitle{color:#fff;letter-spacing:0;margin:0 0 22px;font-size:49.5px;font-weight:800;line-height:55px}.ctaSubtitle{color:#dbeafe;margin:0 0 55px;font-size:24.75px;font-weight:400;line-height:38.5px}.ctaButton{color:#2e68f5;cursor:pointer;background-color:#fff;border:none;border-radius:8.25px;justify-content:center;align-items:center;gap:12px;width:326px;height:66px;font-family:inherit;font-size:18px;font-weight:600;transition:all .25s;display:flex;box-shadow:0 4px 10px #0000000d}.ctaButton:hover{background-color:#f8faff;transform:translateY(-2px);box-shadow:0 8px 20px #0000001f}.ctaButton:active{transform:translateY(0);box-shadow:0 2px 5px #0000000d}.ctaArrow{margin-left:2px;transition:transform .2s}.ctaButton:hover .ctaArrow{transform:translate(4px)}.header-library{z-index:10;background-color:#fff;justify-content:center;width:100%;height:99.56px;display:flex;position:relative;box-shadow:0 5.5px 19.25px #2e68f51f}.header-library .header-content{justify-content:space-between;align-items:center;height:100%;display:flex}.logo-section{align-items:center;gap:16px;display:flex}.logo-text{color:#111827;font-family:Inter,sans-serif;font-size:24.75px;font-weight:700}.nav-menu{gap:8px;display:flex}.nav-link{color:#64748b;border-radius:12px;padding:10px 24px;font-family:Inter,sans-serif;font-size:22px;font-weight:500;text-decoration:none;transition:all .2s}.nav-link.active{color:#2168f5;background-color:#eef2ff;font-weight:600}.avatar{object-fit:cover;border:2px solid #0000;border-radius:50%;width:44px;height:44px}.modal-overlay{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background-color:#ffffffb8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{box-sizing:border-box;background-color:#fff;border:1.38px solid #fff9;border-radius:27.5px;flex-direction:column;width:662px;padding:40px;display:flex;position:relative;box-shadow:0 13.75px 20.63px #1f2a0d14}.close-btn{cursor:pointer;color:#9ca3af;background:0 0;border:none;padding:0;font-size:24px;line-height:1;position:absolute;top:30px;right:30px}.modal-header{flex-direction:column;align-items:center;margin-bottom:30px;display:flex}.modal-icon-wrapper{background:linear-gradient(#2563eb 0%,#1d4ed8 100%);border-radius:22px;justify-content:center;align-items:center;width:88px;height:88px;margin-bottom:15px;display:flex}.modal-title{color:#111827;margin:0;font-family:Inter,sans-serif;font-size:24px;font-weight:700}.add-song-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-label{color:#374151;font-family:Inter,sans-serif;font-size:14px;font-weight:500}.required{color:#ef4444}.form-input,.form-select{color:#111827;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;outline:none;padding:12px 16px;font-family:Inter,sans-serif;font-size:14px;transition:border-color .2s}.form-input:focus,.form-select:focus{border-color:#2563eb}.drag-drop-zone{text-align:center;cursor:pointer;background-color:#f8fafc;border:1px dashed #a1a1aa;border-radius:12px;flex-direction:column;align-items:center;padding:30px;transition:border-color .2s,background-color .2s;display:flex;position:relative}.drag-drop-zone:hover{background-color:#eff6ff;border-color:#2563eb}.drag-drop-icon{color:#6b7280;margin-bottom:10px;font-size:24px}.drag-drop-text{color:#374151;margin:0 0 5px;font-family:Inter,sans-serif;font-size:14px;font-weight:500}.drag-drop-subtext{color:#6b7280;margin:0;font-family:Inter,sans-serif;font-size:12px}.file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.modal-actions{justify-content:space-between;gap:15px;margin-top:10px;display:flex}.btn-cancel{color:#374151;cursor:pointer;background-color:#e5e7eb;border:none;border-radius:20px;flex:1;padding:14px 24px;font-family:Inter,sans-serif;font-size:16px;font-weight:600;transition:background-color .2s}.btn-cancel:hover{background-color:#d1d5db}.btn-submit{color:#fff;cursor:pointer;background:linear-gradient(#2563eb 0%,#1d4ed8 100%);border:none;border-radius:20px;flex:1;padding:14px 24px;font-family:Inter,sans-serif;font-size:16px;font-weight:600;transition:opacity .2s}.btn-submit:hover{opacity:.9}.file-success-preview{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:0 10px;display:flex}.file-success-name{text-align:left;color:#9ca3af;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;margin:0 20px;font-family:Inter,sans-serif;font-size:16px;font-weight:500;overflow:hidden}.drag-drop-zone.has-preview{padding:0;overflow:hidden}.cover-image-preview{object-fit:contain;background-color:#f8fafc;border-radius:11px;width:100%;height:220px;display:block}.notification-toast{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1050;box-sizing:border-box;background-color:#ffffffb8;border-radius:15.32px;justify-content:center;align-items:center;width:536px;padding:15px 20px;animation:.3s ease-out forwards slideDown;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.toast-delete{border:1px solid #f44;box-shadow:0 7.66px 11.49px #ff44441a}.toast-delete .toast-title{color:#f44}.toast-add,.toast-edit,.toast-play{border:1px solid #2563eb;box-shadow:0 7.66px 11.49px #2563eb1a}.toast-add .toast-title,.toast-edit .toast-title,.toast-play .toast-title{color:#2563eb}.toast-content{text-align:center;flex-direction:column;gap:4px;width:100%;display:flex}.toast-title{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:600}.toast-subtitle{color:#374151;margin:0;font-family:Inter,sans-serif;font-size:14px}.toast-close{color:#9ca3af;cursor:pointer;background:0 0;border:none;padding:0;font-size:16px;line-height:1;position:absolute;top:15px;right:15px}.library-wrapper{background-color:#f8fafc;min-height:100vh}.library-main{padding-top:40px}.library-title-row{justify-content:space-between;margin-bottom:30px;display:flex}.library-heading{color:#0f172a;font-size:36px;font-weight:700}.library-counter{color:#64748b;margin-top:4px;font-size:18px}.add-song-btn{color:#fff;cursor:pointer;background-color:#2e68f5;border:none;border-radius:8px;align-items:center;gap:10px;height:60px;padding:0 24px;font-size:18px;font-weight:600;display:flex}.library-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:30px}.search-bar{align-items:center;margin-bottom:30px;display:flex;position:relative}.search-icon{pointer-events:none;width:20px;height:20px;position:absolute;left:24px}.search-input{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;outline:none;width:100%;height:70px;padding:0 20px 0 60px;font-size:18px;transition:border-color .2s}.search-input:focus{border-color:#2e68f5}.table-header,.table-row{grid-template-columns:60px 1fr 150px 150px;align-items:center;display:grid}.table-header{color:#94a3b8;border-bottom:1.5px solid #e2e8f0;padding-bottom:15px;font-size:18px;font-weight:500}.table-row{border-bottom:1px solid #f1f5f9;padding:15px 0}.song-cell{align-items:center;gap:16px;display:flex}.song-icon-placeholder{background:#f1f5f9;border-radius:8px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.song-cover-image{object-fit:contain;background-color:#f8fafc;border-radius:8px;width:48px;height:48px}.file-name{color:#0f172a;font-size:18px;font-weight:500}.col-time{text-align:center;color:#0f172a;font-size:18px}.col-actions{justify-content:center;gap:10px;display:flex}.icon-btn{cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:transform .2s;display:flex}.icon-btn:hover{transform:scale(1.05)}.icon-btn img{width:100%;height:100%;display:block}.pause-icon-wrapper{background-color:#eef2ff;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.cgm-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background-color:#11182766;justify-content:center;align-items:flex-start;padding:40px 20px;display:flex;position:fixed;inset:0;overflow-y:auto}.cgm-content{box-sizing:border-box;background-color:#f3f4f6;border-radius:24px;width:680px;max-width:100%;margin:auto;padding:48px 64px;font-family:Inter,sans-serif;position:relative;box-shadow:0 10px 25px #0000001a}.cgm-close-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex;position:absolute;top:20px;right:20px}.cgm-close-btn:hover svg path{stroke:#4b5563}.cgm-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:28px;display:flex}.cgm-icon{justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:20px;display:flex}.cgm-icon img{object-fit:contain;width:100%;height:100%}.cgm-title{color:#111827;margin:0 0 8px;font-size:28px;font-weight:700}.cgm-subtitle{color:#6b7280;margin:0;font-size:14px}.cgm-form{flex-direction:column;gap:20px;display:flex}.cgm-field{flex-direction:column;gap:8px;display:flex}.cgm-field label{color:#374151;font-size:14px;font-weight:600}.cgm-req{color:#ef4444}.cgm-field input{color:#111827;background:#fff;border:1px solid #e5e7eb;border-radius:12px;outline:none;padding:16px 20px;font-size:16px;transition:border-color .2s}.cgm-field input::placeholder{color:#9ca3af}.cgm-field input:focus{border-color:#2563eb}.cgm-rules-grid{justify-content:space-between;gap:12px;margin-top:4px;display:flex}.cgm-rule-card{cursor:pointer;flex-direction:column;align-items:center;gap:12px;width:100px;display:flex}.cgm-rule-icon{background:0 0;border:2px solid #0000;border-radius:12px;justify-content:center;align-items:center;width:100px;height:100px;transition:all .2s;display:flex}.cgm-rule-card.active .cgm-rule-icon{border-color:#2563eb}.cgm-rule-icon img{object-fit:cover;border-radius:10px;width:100%;height:100%}.cgm-rule-card span{color:#4b5563;text-align:center;font-size:13px;font-weight:500}.cgm-rule-card.active span{color:#2563eb;font-weight:600}.cgm-actions{gap:16px;margin-top:36px;display:flex}.cgm-btn-cancel{color:#374151;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:27px;flex:1;justify-content:center;align-items:center;height:54px;font-size:16px;font-weight:600;transition:background .2s,border-color .2s;display:flex}.cgm-btn-cancel:hover{background:#f9fafb;border-color:#d1d5db}.cgm-btn-submit{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:27px;flex:1;justify-content:center;align-items:center;height:54px;font-size:16px;font-weight:600;transition:background .2s;display:flex}.cgm-btn-submit:hover{background:#1d4ed8}.cgm-btn-submit:disabled,.cgm-btn-cancel:disabled{opacity:.7;cursor:not-allowed}.cgm-error{color:#dc2626;text-align:center;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;margin-bottom:20px;padding:12px;font-size:14px}.cabinet-wrapper{background-color:#f8fafc;min-height:100vh}.cabinet-main{padding-top:40px;padding-bottom:60px}.cabinet-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:50px;box-shadow:0 4px 20px #00000005}.cabinet-header-section{justify-content:space-between;align-items:flex-start;margin-bottom:40px;display:flex}.cabinet-heading{color:#0f172a;margin-bottom:8px;font-family:Inter,sans-serif;font-size:33px;font-weight:700}.cabinet-subtitle{color:#64748b;font-family:Inter,sans-serif;font-size:19px}.create-game-btn{color:#fff;cursor:pointer;background-color:#2e68f5;border:none;border-radius:8.25px;align-items:center;gap:8px;height:60px;padding:0 32px;font-family:Inter,sans-serif;font-size:18px;font-weight:600;transition:background-color .2s,transform .1s;display:flex}.create-game-plus-icon{width:22px;height:22px}.create-game-btn:hover{background-color:#2558d6}.create-game-btn:active{transform:scale(.98)}.cabinet-stats-grid{grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:60px;display:grid}.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;flex-direction:column;justify-content:flex-start;gap:18px;height:191px;padding:29px;display:flex}.stat-icon-wrapper{justify-content:center;align-items:center;width:49.5px;height:49.5px;display:flex}.stat-info{flex-direction:column;gap:5.5px;display:flex}.stat-value{color:#111827;margin-bottom:0;font-family:Inter,sans-serif;font-size:33px;font-weight:800;line-height:44px}.stat-label{color:#64748b;font-family:Inter,sans-serif;font-size:16.5px;line-height:22px}.cabinet-games-section{margin-top:20px}.games-heading{color:#0f172a;margin-bottom:24px;font-size:24px;font-weight:700}.games-list{flex-direction:column;gap:16px;display:flex}.game-row{background:#fff;border:1px solid #e2e8f0;border-radius:16px;justify-content:space-between;align-items:center;padding:20px 24px;transition:border-color .2s,box-shadow .2s;display:flex}.game-row:hover{border-color:#cbd5e1;box-shadow:0 4px 12px #00000008}.game-info-col{align-items:center;gap:29px;display:flex}.game-icon-placeholder{background:#2e88f51a;border:1.38px solid #2e88f533;border-radius:18.5px;justify-content:center;align-items:center;width:55px;height:55px;display:flex}.game-details{flex-direction:column;gap:6px;display:flex}.game-title-row{align-items:center;gap:12px;display:flex}.game-title{color:#0f172a;font-size:18px;font-weight:600}.game-badge{text-transform:uppercase;border-radius:100px;padding:4px 10px;font-size:12px;font-weight:600}.badge-active{color:#2e68f5;background-color:#ebf1ff}.badge-completed{color:#ef4444;background-color:#fee2e2}.game-meta{color:#64748b;align-items:center;gap:16px;font-size:14px;display:flex}.game-empty{color:#64748b;padding:20px 0;font-size:16px}.game-actions-col{align-items:center;gap:16px;display:flex}.play-game-btn{color:#fff;cursor:pointer;background-color:#2e68f5;border:none;border-radius:8px;align-items:center;gap:8px;height:38.5px;padding:0 16px;font-size:16px;font-weight:600;transition:background-color .2s;display:flex}.play-game-btn:hover{background-color:#2558d6}.play-game-icon{width:16.5px;height:16.5px}.delete-game-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s;display:flex}.delete-game-btn:hover{background-color:#fee2e2}.delete-game-btn img{width:20.6px;height:20.6px}@media (width<=1200px){.cabinet-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.cabinet-header-section{flex-direction:column;align-items:stretch;gap:20px}.cabinet-stats-grid{grid-template-columns:1fr}.game-row{flex-direction:column;align-items:flex-start;gap:20px}.game-actions-col{justify-content:space-between;width:100%}.play-game-btn{flex:1;justify-content:center}}.ssm-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ssm-content{background:#fff;border-radius:24px;flex-direction:column;width:100%;max-width:600px;max-height:90vh;padding:32px;display:flex;position:relative;box-shadow:0 10px 40px #0000001a}.ssm-close-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .2s;display:flex;position:absolute;top:24px;right:24px}.ssm-close-btn:hover{background-color:#f3f4f6}.ssm-header{text-align:center;margin-bottom:24px}.ssm-title{color:#111827;margin:0 0 8px;font-family:Inter,sans-serif;font-size:24px;font-weight:700}.ssm-subtitle{color:#6b7280;margin:0;font-family:Inter,sans-serif;font-size:14px;font-weight:400}.ssm-list{border:1px solid #e5e7eb;border-radius:12px;flex:1;min-height:200px;margin-bottom:24px;padding:8px;overflow-y:auto}.ssm-item{cursor:pointer;border-radius:8px;align-items:center;padding:12px;transition:background-color .2s;display:flex}.ssm-item:hover{background-color:#f9fafb}.ssm-item input[type=checkbox]{cursor:pointer;width:20px;height:20px;margin-right:16px}.ssm-item-info{flex-direction:column;display:flex}.ssm-item-title{color:#111827;font-family:Inter,sans-serif;font-size:16px;font-weight:600}.ssm-item-artist{color:#6b7280;font-family:Inter,sans-serif;font-size:14px;font-weight:400}.ssm-actions{gap:16px;display:flex}.ssm-btn-cancel,.ssm-btn-submit{cursor:pointer;border-radius:12px;flex:1;padding:16px;font-family:Inter,sans-serif;font-size:16px;font-weight:600;transition:all .2s}.ssm-btn-cancel{color:#374151;background:#fff;border:1px solid #e5e7eb}.ssm-btn-cancel:hover{background:#f9fafb;border-color:#d1d5db}.ssm-btn-submit{color:#fff;background:#3b82f6;border:none;box-shadow:0 4px 12px #3b82f64d}.ssm-btn-submit:hover{background:#2563eb}.ssm-btn-submit:disabled{box-shadow:none;cursor:not-allowed;background:#9ca3af}.ssm-loading{text-align:center;color:#6b7280;padding:40px;font-family:Inter,sans-serif}.generator-wrapper{background-color:#f8f9fa;min-height:100vh;font-family:Inter,sans-serif}.generator-main{max-width:1374px;margin:0 auto;padding:32px 16px}.generator-header{margin-bottom:24px}.generator-title{color:#111827;margin:0 0 8px;font-size:32px;font-weight:700}.generator-subtitle{color:#6b7280;margin:0;font-size:16px}.generator-settings{background:#fff;border:1px solid #e5e7eb;border-radius:22px;justify-content:space-between;align-items:flex-start;margin-bottom:48px;padding:38px 34px;display:flex;box-shadow:0 5.5px 19.25px #2f68f51f}.settings-left{flex-direction:column;flex:1;padding-right:32px;display:flex}.settings-header{justify-content:space-between;align-items:center;margin-bottom:34px;display:flex}.settings-title{color:#111827;margin:0;font-size:22px;font-weight:700}.settings-count{color:#111827;font-size:16px;font-weight:500}.settings-slider-wrapper{margin-bottom:27px}.range-slider{appearance:none;border-radius:3px;outline:none;width:100%;height:6px}.range-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#2563eb;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 4px #0000001a}.btn-select-songs{color:#4b5563;cursor:pointer;background:#fff;border:1.38px dashed #9ca3af;border-radius:20px;align-self:flex-start;align-items:center;gap:8px;padding:10px 24px;font-size:16px;transition:all .2s;display:flex}.btn-select-songs:hover{color:#111827;border-color:#6b7280}.settings-middle{box-sizing:border-box;background:#f8fafc;border-radius:18.5px;flex-direction:column;justify-content:center;align-items:center;width:270px;height:88px;margin:0 32px;padding:24px;display:flex}.settings-middle-val{color:#111827;margin-bottom:4px;font-size:18px;font-weight:600}.settings-middle-desc{color:#6b7280;font-size:14px}.settings-right{flex-direction:column;gap:16px;display:flex}.btn-presentation{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8.25px;width:268px;height:60px;font-size:16px;font-weight:600;transition:background .2s}.btn-presentation:hover{background:#1d4ed8}.btn-generate{color:#111827;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:8.25px;justify-content:center;align-items:center;gap:8px;width:268px;height:60px;font-size:16px;font-weight:600;transition:background .2s;display:flex}.btn-generate:hover{background:#f9fafb}.btn-generate:disabled{opacity:.5;cursor:not-allowed}.preview-section{margin-bottom:32px}.preview-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.preview-title{color:#111827;margin:0;font-size:20px;font-weight:700}.btn-load-bg{color:#374151;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.btn-load-bg:hover{background:#f9fafb}.preview-container{background:#fff;border:1px solid #e5e7eb;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:845px;display:flex;position:relative}.pagination{background:#fff;border-radius:12px;align-items:center;gap:16px;margin-bottom:24px;padding:8px 16px;display:flex;box-shadow:0 2px 4px #0000000d}.btn-page{cursor:pointer;color:#374151;background:#fff;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.btn-page:hover:not(:disabled){background:#f9fafb}.btn-page:disabled{opacity:.5;cursor:not-allowed}.page-info{color:#374151;font-weight:500}.bingo-card{border:2px solid #e5e7eb;border-radius:16px;grid-template-columns:repeat(5,1fr);gap:12px;width:100%;max-width:600px;margin-bottom:16px;padding:16px;display:grid}.bingo-cell{aspect-ratio:1;text-align:center;cursor:grab;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:8px;transition:box-shadow .2s,border-color .2s;display:flex}.bingo-cell:hover{border-color:#3b82f6}.bingo-cell:active{cursor:grabbing}.bingo-cell-dragging{opacity:.5;background:#eef2ff;border-color:#3b82f6;box-shadow:0 10px 15px -3px #3b82f64d}.cell-icon{color:#3b82f6;margin-bottom:4px}.cell-title{color:#111827;-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;font-size:10px;font-weight:600;display:-webkit-box;overflow:hidden}.preview-hint{color:#9ca3af;margin-bottom:24px;font-size:14px}.btn-download-pdf{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-weight:600;display:flex;position:absolute;bottom:32px;right:32px}.generator-stats{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;display:grid}.stat-box{background:#fff;border:1px solid #e5e7eb;border-radius:18.5px;flex-direction:column;justify-content:center;align-items:center;height:113px;display:flex}.stat-box-val{color:#3b82f6;justify-content:center;align-items:center;margin-bottom:8px;font-size:24px;font-weight:700;display:flex}.stat-box-label{color:#6b7280;font-size:14px}.presentation-page{background-color:#f8fafc;min-height:100vh;font-family:Inter,sans-serif}.presentation-main{padding-top:40px;padding-bottom:80px}.presentation-content{align-items:flex-start;gap:24px;display:flex}.presentation-left{flex:1;padding:0}.presentation-header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.game-title{color:#111827;margin:0;font-size:33px;font-weight:700;line-height:44px}.presentation-actions{gap:12px;display:flex}.btn-add-slide{color:#64748b;letter-spacing:-.69px;cursor:pointer;background:#fff;border:1px solid #f3f0f9;border-radius:18.5px;justify-content:center;align-items:center;gap:10px;width:258.5px;height:71.5px;padding:10px 20px;font-size:22px;font-weight:600;line-height:27.5px;transition:background-color .2s;display:flex}.btn-add-slide:hover{background:#f9fafb}.plus-icon{color:#64748b;font-size:24px;font-weight:600}.btn-preview-scenario,.btn-play-scenario{letter-spacing:-.69px;cursor:pointer;border:none;border-radius:18.5px;justify-content:center;align-items:center;gap:12px;width:258.5px;height:71.5px;padding:10px 24px;font-size:22px;font-weight:600;line-height:27.5px;transition:background-color .2s;display:flex}.btn-preview-scenario{color:#fff;background:#2168f5}.btn-preview-scenario:hover{background:#1a56cc}.btn-play-scenario{color:#fff;background:#2168f5}.btn-play-scenario:hover{background:#1a56cc}.btn-preview-scenario img,.btn-play-scenario img{width:auto;height:24px}.slides-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.slides-title{color:#111827;margin:0;font-size:33px;font-weight:700;line-height:44px}.drag-hint{color:#d1d5dc;font-size:24.75px;font-weight:600;line-height:44px}.slides-list{flex-direction:column;gap:16px;display:flex}.slide-item{background:#fff;border:1px solid #e5e7eb;border-radius:16px;align-items:center;gap:16px;padding:16px;display:flex}.slide-drag-handle{cursor:grab;justify-content:center;align-items:center;padding:4px;display:flex}.slide-icon-box{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.slide-icon-box.type-title{color:#3b82f6;background:#eff6ff}.slide-icon-box.type-rules{color:#ea580c;background:#fff7ed}.slide-icon-box.type-song{color:#3b82f6;background:#eff6ff}.slide-icon-box.type-qr{color:#16a34a;background:#f0fdf4}.slide-icon-box.type-winner{color:#ca8a04;background:#fefce8}.slide-icon-box.empty{background:#f9fafb;border:1px dashed #d1d5dc}.slide-texts{flex-direction:column;flex:1;gap:4px;display:flex}.slide-header-text{align-items:center;gap:8px;display:flex}.slide-number{color:#6b7280;font-size:14px;font-weight:500}.slide-badge{color:#9ca3af;background:#f3f4f6;border-radius:12px;padding:2px 8px;font-size:12px}.slide-main-title{color:#111827;font-size:16px;font-weight:700}.slide-subtitle{color:#6b7280;font-size:14px}.btn-edit-slide{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex}.btn-edit-slide:hover svg{stroke:#3b82f6}.music-mixer-bar{z-index:1000;background:#fff;border:1px solid #e2e8f0;border-radius:20px;justify-content:space-between;align-items:center;width:900px;padding:12px 24px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #0f172a1f}.mixer-info{align-items:center;gap:12px;width:220px;min-width:0;display:flex}.mixer-cover,.mixer-cover-placeholder{object-fit:cover;border-radius:8px;flex-shrink:0;width:44px;height:44px}.mixer-cover-placeholder{background-color:#f1f5f9;justify-content:center;align-items:center;font-size:20px;display:flex}.mixer-text{flex-direction:column;min-width:0;display:flex}.mixer-playing-label{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:700}.mixer-song-name{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.mixer-center{flex:1;padding:0 30px}.mixer-progress-container{align-items:center;gap:12px;display:flex}.time-label{color:#64748b;min-width:35px;font-family:monospace;font-size:12px}.seek-slider{-webkit-appearance:none;cursor:pointer;background:#e2e8f0;border-radius:3px;outline:none;width:100%;height:6px}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#2563eb;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 2px 4px #0000001a}.mixer-controls{justify-content:flex-end;align-items:center;gap:16px;width:320px;display:flex}.mixer-skip-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:background-color .2s;display:flex}.mixer-skip-btn:hover{background-color:#f1f5f9}.mixer-play-btn{cursor:pointer;background:#2563eb;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:transform .2s,background-color .2s;display:flex;box-shadow:0 4px 10px #2563eb40}.mixer-play-btn:hover{background-color:#1d4ed8;transform:scale(1.05)}.volume-control{align-items:center;gap:8px;width:110px;margin-left:5px;display:flex}.volume-slider{-webkit-appearance:none;background:#e2e8f0;border-radius:2px;outline:none;width:100%;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#2563eb;border-radius:50%;width:12px;height:12px}.mixer-close-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:8px;padding:6px;transition:background-color .2s;display:flex}.mixer-close-btn:hover{background-color:#f1f5f9}
