.products{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;padding:40px 20px;width:100%}.products-title{font-size:28px;font-weight:600;margin-bottom:30px;text-align:center}.cards-wrapper{max-width:1200px}.product-card{align-items:center;background:#fff;border:1px solid #000;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;padding:15px;transition:all .25s ease;width:220px}.product-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);transform:translateY(-4px)}.image-box{align-items:center;display:flex;height:150px;justify-content:center}.image-box img{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.product-label{font-size:15px;font-weight:500;margin-top:12px;text-align:center}.loader-overlay{backdrop-filter:blur(2px);position:fixed;z-index:999}.spinner{border:6px solid #e5e7eb;border-top-color:#266397;height:60px;width:60px}body.loading{overflow:hidden}.product-card:disabled{cursor:not-allowed;opacity:.5}@media screen and (max-width:768px){.cards-wrapper{grid-template-columns:1fr}.product-card{width:100%}}.switch-group{margin-top:10px}.switch-row{align-items:center;display:flex;justify-content:space-between;padding:12px 6px}.switch{display:inline-block;height:24px;position:relative;width:44px}.switch input{height:0;opacity:0;width:0}.slider{background-color:#ccc;border-radius:24px;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.3s}.slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;width:18px}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translateX(20px)}.tk-switch{display:inline-block;height:24px;position:relative;width:46px}.tk-switch input{height:0;opacity:0;width:0}.tk-slider{background-color:#d1d5db;border-radius:999px;cursor:pointer;inset:0;position:absolute;transition:background-color .3s ease}.tk-slider:before{background-color:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);content:"";height:18px;left:3px;position:absolute;top:3px;transition:transform .3s ease;width:18px}.tk-switch input:checked+.tk-slider{background-color:#266397}.tk-switch input:checked+.tk-slider:before{transform:translateX(22px)}.tk-switch input:disabled+.tk-slider{cursor:not-allowed;opacity:.5}.attr-group{padding-bottom:25px}h4.group-title{padding-bottom:10px}.app-shell{display:flex;flex-direction:column;font-family:Arial,sans-serif;height:100vh}.app-header{border-bottom:1px solid #e5e7eb;color:#266397;font-size:26px;font-weight:600;padding:16px 32px;text-align:center}.cards-wrapper{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-items:stretch;margin:0 auto;width:100%}.app-body{grid-gap:16px;display:grid;grid-template-columns:auto 35%;height:80vh}.viewer-panel{background:#f9fafb}.form-panel{border-left:1px solid #ddd;overflow-y:auto;padding:16px}.tab-container{border-bottom:1px solid #ddd;gap:10px;margin-bottom:15px}.tab-item{padding:8px 12px}.tab-item.active{background:#fff;border:1px solid #ccc;border-bottom:none}.content-container{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.content-card{align-items:center;aspect-ratio:1/1;background:#fff;border:1px solid #ddd;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;padding:10px;transition:all .2s ease}.content-card.active{border:2px solid #266397}.img-box{align-items:center;display:flex;flex:1 1;justify-content:center;overflow:hidden;width:100%}.img-box img{display:block;max-height:85%;max-width:85%;-o-object-fit:contain;object-fit:contain}.content-card span{font-size:13px;font-weight:500;line-height:1.2;margin-top:8px;min-height:32px;text-align:center}.loader-overlay{align-items:center;background:hsla(0,0%,100%,.7);display:flex;inset:0;justify-content:center;position:absolute}.spinner{animation:spin .8s linear infinite;border:5px solid #ddd;border-radius:50%;border-top-color:#3b82f6;height:50px;width:50px}@keyframes spin{to{transform:rotate(1turn)}}@media screen and (max-width:768px){.app-body{grid-template-columns:100%}.form-panel{padding:0 10px}}@media screen and (min-width:769px) and (max-width:1024px){.app-body{grid-template-columns:100%}.form-panel{padding:0 10px}}.error-modal-overlay{align-items:center;background-color:rgba(0,0,0,.6);display:flex;inset:0;justify-content:center;position:fixed;z-index:50}.error-border{border:1px solid red}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.block{display:block}.flex{display:flex}.w-full{width:100%}.max-w-md{max-width:28rem}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.px-8{padding-left:2rem;padding-right:2rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0}.tk-treble-app{grid-gap:16px;display:grid;grid-template-columns:auto 30%}.tk-treble-player{height:100vh;position:sticky;top:0}.loader{align-items:center;background:#f3f3f370;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999}.ui-btn{background:#e0e1e2 none;border:none;border-radius:.28571429rem;color:rgba(0,0,0,.6);cursor:pointer;font-family:Lato,Helvetica Neue,Arial,Helvetica,sans-serif;font-weight:700;line-height:1em;margin:.4rem;padding:10px 0;width:45%}.ui-btn:hover{background-color:#cacbcd;background-image:none;color:rgba(0,0,0,.8)}.tab-container{background:none transparent;border:none;border-bottom:1px solid #d4d4d5;border-radius:0;box-shadow:none!important;display:flex;flex-wrap:wrap;margin:10px 0}.tab-item{background:transparent;border:1px solid transparent;border-bottom:none;border-top:2px solid transparent;cursor:pointer;font-family:Roboto,sans-serif;font-size:14px;padding:15px 18px}.tab-item,.text{color:rgba(0,0,0,.87)}.text{font-size:.8rem;word-break:break-word}.selected{border:1px solid}@media screen and (max-width:768px){.tk-treble-app{grid-template-columns:auto;grid-template-rows:100% 100%;padding:10px}.tab-item{padding:12px 7px}}.back-btn-header{background:#fff;border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:600;left:20px;padding:6px 14px;position:absolute}.cards-body{padding:24px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 #0000;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253/var(--tw-ring-opacity))}@media (min-width:768px){.md\:flex-row{flex-direction:row}}