:root{--bs-primary:#4DB6AC;--bs-primary-rgb:77,182,172;--bs-link-color:#4DB6AC;--bs-link-hover-color:#3E948A;--bs-pink:#D8AAB7}@keyframes gradient-animation{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}body,html{height:100%}body{font-family:Inter,sans-serif;display:flex;justify-content:center;background:linear-gradient(-45deg,#e0f2f1,#f3e5f5,#e8eaf6,#e0f7fa);background-size:400% 400%;animation:gradient-animation 20s ease infinite;overflow-y:auto;padding-top:2rem;padding-bottom:2rem;color:#333}.container{max-width:720px}.card{border:none;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.08);background:rgba(255,255,255,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin-bottom:2rem;transition:transform .3s ease}.card-header{background:0 0;border-bottom:1px solid rgba(0,0,0,.05);padding:1.5rem 2rem;border-radius:24px 24px 0 0!important}.card-body{padding:2rem}h1.h3{font-weight:800;color:#2c3e50;letter-spacing:-.5px}.form-label{font-weight:700;font-size:.9rem;color:#546e7a;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.form-control,.form-select{border-radius:12px;border:2px solid #eceff1;padding:.8rem 1rem;font-weight:500;transition:all .2s ease;background-color:#fcfcfc}.form-control:focus,.form-select:focus{border-color:var(--bs-primary);box-shadow:0 0 0 4px rgba(77,182,172,.15);background-color:#fff}.btn{border-radius:12px;font-weight:700;padding:.6rem 1.5rem;transition:all .3s cubic-bezier(.25, .8, .25, 1);border:none;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,#4db6ac 0,#26a69a 100%)!important;box-shadow:0 8px 20px rgba(77,182,172,.25);color:#fff!important}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(77,182,172,.35)}.btn-primary:active{transform:translateY(1px)}.btn-secondary{background:#eceff1!important;color:#546e7a!important;box-shadow:none!important}.btn-secondary:hover{background:#cfd8dc!important;color:#37474f!important;transform:translateY(-2px)}.btn-outline-custom-pink{--bs-btn-color:#888;--bs-btn-border-color:#D8AAB7;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#D8AAB7;--bs-btn-hover-border-color:#D8AAB7;--bs-btn-focus-shadow-rgb:216,170,183;--bs-btn-active-color:#fff;--bs-btn-active-bg:#D8AAB7;--bs-btn-active-border-color:#D8AAB7;border-width:2px}.btn-check:checked+.btn-outline-custom-pink{background-color:#d8aab7;border-color:#d8aab7;color:#fff;box-shadow:0 4px 15px rgba(216,170,183,.4)}#add-mode-toggle{background:#f0f2f5;border-radius:50px;padding:4px;border:1px solid #e0e0e0}#add-mode-toggle .btn{border-radius:50px;padding:.3rem 1rem;font-size:.8rem;color:#777;background:0 0!important;box-shadow:none!important}#add-mode-toggle .btn-check:checked+.btn{background-color:#fff!important;color:var(--bs-primary)!important;box-shadow:0 2px 8px rgba(0,0,0,.1)!important}.component-list-container{border:3px dashed #e0e0e0;border-radius:20px;padding:1.5rem;background-color:#fafafa;min-height:160px;transition:all .3s ease}.component-list-container:hover{border-color:#b2dfdb;background-color:#f0fcfc}#component-list:empty::before{content:"Your added components will appear here";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#90a4ae;font-weight:500;font-style:normal}.list-group-item{border:none;border-radius:16px!important;margin-bottom:.8rem;box-shadow:0 4px 12px rgba(0,0,0,.03);padding:1rem 1.2rem;transition:all .2s ease}.list-group-item:hover{transform:scale(1.01)}.list-group-item.removing{background-color:#ffebee;opacity:0;transform:scale(.9)}.modal-content{border-radius:24px;border:none;box-shadow:0 25px 80px rgba(0,0,0,.2);overflow:hidden}.modal-header{background:#f8f9fa;border-bottom:1px solid #eee;padding:1.5rem}.modal-footer{border-top:1px solid #eee;padding:1.5rem}.stepper-nav{display:flex;justify-content:space-around;padding:1rem 0;border-bottom:1px solid #dee2e6;background-color:transparent}.stepper-item{display:flex;flex-direction:column;align-items:center;color:#90a4ae;font-weight:700}.stepper-item .step-counter{height:2rem;width:2rem;background-color:#cfd8dc;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.stepper-item.active{color:var(--bs-primary)}.stepper-item.active .step-counter{background-color:var(--bs-primary)}.component-name{font-size:1rem;font-weight:700;color:#37474f}.form-switch .form-check-input{width:3.5em;height:1.75em;cursor:pointer;background-color:#ccc;border-color:#ccc;transition:background-position .2s ease-in-out}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ccc'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center}.form-switch .form-check-label{font-weight:700;color:#6c757d}[data-theme=dark]{--bs-body-bg:#121212;--bs-body-color:#e0e0e0;--bs-primary:#64ffda;--bs-primary-rgb:100,255,218;--bs-link-color:#64ffda}[data-theme=dark] body{background:linear-gradient(-45deg,#0f172a,#1e293b,#0f172a,#000);background-size:400% 400%}[data-theme=dark] .card{background:rgba(30,30,30,.8);border:1px solid rgba(255,255,255,.05)}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:#fff}[data-theme=dark] .form-label{color:#b0bec5}[data-theme=dark] .form-control,[data-theme=dark] .form-select{background-color:#263238;border-color:#37474f;color:#eceff1}[data-theme=dark] .form-control:focus{border-color:var(--bs-primary);background-color:#263238}[data-theme=dark] .component-list-container{background-color:#1e1e1e;border-color:#333}[data-theme=dark] .list-group-item{background-color:#263238;color:#fff}[data-theme=dark] #add-mode-toggle{background-color:#263238;border-color:#37474f}[data-theme=dark] #add-mode-toggle .btn{color:#90a4ae}[data-theme=dark] #add-mode-toggle .btn-check:checked+.btn{background-color:#37474f!important;color:var(--bs-primary)!important}[data-theme=dark] .modal-content{background-color:#263238;color:#fff}[data-theme=dark] .modal-footer,[data-theme=dark] .modal-header{background-color:#1e293b;border-color:#37474f}[data-theme=dark] .btn-close{filter:invert(1)}[data-theme=dark] .component-name{color:#fff}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);backdrop-filter:blur(5px);z-index:1060;display:none;justify-content:center;align-items:center}[data-theme=dark] .loading-overlay{background-color:rgba(0,0,0,.7)}.spinner-border{width:3rem;height:3rem}.seo-content{background-color:rgba(255,255,255,.5);padding:2.5rem;border-radius:24px;border:none;box-shadow:0 25px 80px rgba(0,0,0,.2);overflow:hidden}.modal-header{background:#f8f9fa;border-bottom:1px solid #eee;padding:1.5rem}.modal-footer{border-top:1px solid #eee;padding:1.5rem}.stepper-nav{display:flex;justify-content:space-around;padding:1rem 0;border-bottom:1px solid #dee2e6;background-color:transparent}.stepper-item{display:flex;flex-direction:column;align-items:center;color:#90a4ae;font-weight:700}.stepper-item .step-counter{height:2rem;width:2rem;background-color:#cfd8dc;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.stepper-item.active{color:var(--bs-primary)}.stepper-item.active .step-counter{background-color:var(--bs-primary)}.component-name{font-size:1rem;font-weight:700;color:#37474f}.form-switch .form-check-input{width:3.5em;height:1.75em;cursor:pointer;background-color:#ccc;border-color:#ccc;transition:background-position .2s ease-in-out}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ccc'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center}.form-switch .form-check-label{font-weight:700;color:#6c757d}[data-theme=dark]{--bs-body-bg:#121212;--bs-body-color:#e0e0e0;--bs-primary:#64ffda;--bs-primary-rgb:100,255,218;--bs-link-color:#64ffda}[data-theme=dark] body{background:linear-gradient(-45deg,#0f172a,#1e293b,#0f172a,#000);background-size:400% 400%}[data-theme=dark] .card{background:rgba(30,30,30,.8);border:1px solid rgba(255,255,255,.05)}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:#fff}[data-theme=dark] .form-label{color:#b0bec5}[data-theme=dark] .form-control,[data-theme=dark] .form-select{background-color:#263238;border-color:#37474f;color:#eceff1}[data-theme=dark] .form-control:focus{border-color:var(--bs-primary);background-color:#263238}[data-theme=dark] .component-list-container{background-color:#1e1e1e;border-color:#333}[data-theme=dark] .list-group-item{background-color:#263238;color:#fff}[data-theme=dark] #add-mode-toggle{background-color:#263238;border-color:#37474f}[data-theme=dark] #add-mode-toggle .btn{color:#90a4ae}[data-theme=dark] #add-mode-toggle .btn-check:checked+.btn{background-color:#37474f!important;color:var(--bs-primary)!important}[data-theme=dark] .modal-content{background-color:#263238;color:#fff}[data-theme=dark] .modal-footer,[data-theme=dark] .modal-header{background-color:#1e293b;border-color:#37474f}[data-theme=dark] .btn-close{filter:invert(1)}[data-theme=dark] .component-name{color:#fff}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);backdrop-filter:blur(5px);z-index:1060;display:none;justify-content:center;align-items:center}[data-theme=dark] .loading-overlay{background-color:rgba(0,0,0,.7)}.spinner-border{width:3rem;height:3rem}.seo-content{background-color:rgba(255,255,255,.5);padding:2.5rem;margin-top:2rem;border-radius:24px;border:1px solid rgba(0,0,0,.05)}[data-theme=dark] .seo-content{background-color:rgba(0,0,0,.2);border-color:rgba(255,255,255,.05)}.logo-img{max-width:150px;margin:0;transition:all .3s ease}.stepper-nav{display:flex;justify-content:space-around;padding:1rem 0;border-bottom:1px solid #dee2e6;background-color:transparent}.stepper-item{display:flex;flex-direction:column;align-items:center;color:#90a4ae;font-weight:700}.stepper-item .step-counter{height:2rem;width:2rem;background-color:#cfd8dc;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.stepper-item.active{color:var(--bs-primary)}.stepper-item.active .step-counter{background-color:var(--bs-primary)}.component-name{font-size:1rem;font-weight:700;color:#37474f}.form-switch .form-check-input{width:3.5em;height:1.75em;cursor:pointer;background-color:#ccc;border-color:#ccc;transition:background-position .2s ease-in-out}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ccc'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center}.form-switch .form-check-label{font-weight:700;color:#6c757d}[data-theme=dark]{--bs-body-bg:#121212;--bs-body-color:#e0e0e0;--bs-primary:#64ffda;--bs-primary-rgb:100,255,218;--bs-link-color:#64ffda}[data-theme=dark] body{background:linear-gradient(-45deg,#0f172a,#1e293b,#0f172a,#000);background-size:400% 400%}[data-theme=dark] .card{background:rgba(30,30,30,.8);border:1px solid rgba(255,255,255,.05)}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:#fff}[data-theme=dark] .form-label{color:#b0bec5}[data-theme=dark] .form-control,[data-theme=dark] .form-select{background-color:#263238;border-color:#37474f;color:#eceff1}[data-theme=dark] .form-control:focus{border-color:var(--bs-primary);background-color:#263238}[data-theme=dark] .component-list-container{background-color:#1e1e1e;border-color:#333}[data-theme=dark] .list-group-item{background-color:#263238;color:#fff}[data-theme=dark] #add-mode-toggle{background-color:#263238;border-color:#37474f}[data-theme=dark] #add-mode-toggle .btn{color:#90a4ae}[data-theme=dark] #add-mode-toggle .btn-check:checked+.btn{background-color:#37474f!important;color:var(--bs-primary)!important}[data-theme=dark] .modal-content{background-color:#263238;color:#fff}[data-theme=dark] .modal-footer,[data-theme=dark] .modal-header{background-color:#1e293b;border-color:#37474f}[data-theme=dark] .btn-close{filter:invert(1)}[data-theme=dark] .component-name{color:#fff}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);backdrop-filter:blur(5px);z-index:1060;display:none;justify-content:center;align-items:center}[data-theme=dark] .loading-overlay{background-color:rgba(0,0,0,.7)}.spinner-border{width:3rem;height:3rem}.seo-content{background-color:rgba(255,255,255,.5);padding:2.5rem;margin-top:2rem;border-radius:24px;border:1px solid rgba(0,0,0,.05)}[data-theme=dark] .seo-content{background-color:rgba(0,0,0,.2);border-color:rgba(255,255,255,.05)}.logo-img{max-width:150px;margin:0;transition:all .3s ease}[data-theme=dark] .logo-img{filter:drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 4px rgba(255, 255, 255, .6))}@media (max-width:576px){.card-header{padding:1rem 1.2rem}.logo-img{max-width:110px}.btn-group-sm>.btn{padding:.25rem .5rem;font-size:.875rem}.card-header .d-flex .me-3{margin-right:.5rem!important}#add-mode-toggle .btn{padding:.2rem .6rem;font-size:.75rem;white-space:nowrap}.btn-lg{padding:.5rem .8rem;font-size:.95rem;white-space:nowrap}}#component-list:empty::before{content:"Your added components will appear here";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#90a4ae;background-color:#ccc;border-color:#ccc;transition:background-position .2s ease-in-out}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ccc'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center}.form-switch .form-check-label{font-weight:700;color:#6c757d}[data-theme=dark]{--bs-body-bg:#121212;--bs-body-color:#e0e0e0;--bs-primary:#64ffda;--bs-primary-rgb:100,255,218;--bs-link-color:#64ffda}[data-theme=dark] body{background:linear-gradient(-45deg,#0f172a,#1e293b,#0f172a,#000);background-size:400% 400%}[data-theme=dark] .card{background:rgba(30,30,30,.8);border:1px solid rgba(255,255,255,.05)}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:#fff}[data-theme=dark] .form-label{color:#b0bec5}[data-theme=dark] .form-control,[data-theme=dark] .form-select{background-color:#263238;border-color:#37474f;color:#eceff1}[data-theme=dark] .form-control:focus{border-color:var(--bs-primary);background-color:#263238}[data-theme=dark] .component-list-container{background-color:#1e1e1e;border-color:#333}[data-theme=dark] .list-group-item{background-color:#263238;color:#fff}[data-theme=dark] #add-mode-toggle{background-color:#263238;border-color:#37474f}[data-theme=dark] #add-mode-toggle .btn{color:#90a4ae}[data-theme=dark] #add-mode-toggle .btn-check:checked+.btn{background-color:#37474f!important;color:var(--bs-primary)!important}[data-theme=dark] .modal-content{background-color:#263238;color:#fff}[data-theme=dark] .modal-footer,[data-theme=dark] .modal-header{background-color:#1e293b;border-color:#37474f}[data-theme=dark] .btn-close{filter:invert(1)}[data-theme=dark] .component-name{color:#fff}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);backdrop-filter:blur(5px);z-index:1060;display:none;justify-content:center;align-items:center}[data-theme=dark] .loading-overlay{background-color:rgba(0,0,0,.7)}.spinner-border{width:3rem;height:3rem}.seo-content{background-color:rgba(255,255,255,.5);padding:2.5rem;margin-top:2rem;border-radius:24px;border:1px solid rgba(0,0,0,.05)}[data-theme=dark] .seo-content{background-color:rgba(0,0,0,.2);border-color:rgba(255,255,255,.05)}.logo-img{max-width:150px;margin:0;transition:all .3s ease}[data-theme=dark] .logo-img{filter:drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 4px rgba(255, 255, 255, .6))}@media (max-width:576px){.card-header{padding:1rem 1.2rem}.logo-img{max-width:110px}.btn-group-sm>.btn{padding:.25rem .5rem;font-size:.875rem}.card-header .d-flex .me-3{margin-right:.5rem!important}#add-mode-toggle .btn{padding:.2rem .6rem;font-size:.75rem;white-space:nowrap}.btn-lg{padding:.5rem .8rem;font-size:.95rem;white-space:nowrap}}#component-list:empty::before{content:"Your added components will appear here";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#90a4ae;font-weight:500;font-style:normal;width:90%;text-align:center;white-space:normal;line-height:1.4}[data-theme=dark] .form-control::placeholder{color:#90a4ae;opacity:1}