.app-icon-customizer{gap:2rem;width:100%;display:flex}.app-icon-customizer__main{align-items:flex-start;gap:2rem;width:100%;display:flex}.app-icon-customizer__controls{flex:auto;max-height:none;padding-top:.25rem;padding-right:.25rem;overflow:visible}.app-icon-customizer__controls::-webkit-scrollbar{width:8px}.app-icon-customizer__controls::-webkit-scrollbar-track{background:#2c2d2ba6;border-radius:4px}.app-icon-customizer__controls::-webkit-scrollbar-thumb{background:#fc8c0673;border-radius:4px}.app-icon-customizer__controls::-webkit-scrollbar-thumb:hover{background:#fc8c06bf}.app-icon-customizer__preview{background:radial-gradient(circle at 100% 0,#fc8c0624,#0000 45%),linear-gradient(145deg,#0e0e0ef2,#202020e0);border:1px solid #ffffff1a;border-radius:1rem;width:32%;min-width:300px;max-width:400px;padding:1rem;position:-webkit-sticky;position:sticky;top:6rem;box-shadow:0 14px 28px #00000040,inset 0 1px #ffffff0a}.app-icon-customizer__preview>:not(:last-child){margin-bottom:1rem}.app-icon-customizer .field-container{background:linear-gradient(145deg,#1c1c1cd1,#101010e6);border:1px solid #ffffff14;border-radius:.9rem;align-items:start;gap:1rem;margin-bottom:1.25rem;padding:1rem;display:flex}.app-icon-customizer .field-container--vertical{flex-direction:column;align-items:flex-start}.app-icon-customizer .field-container__label{text-align:left;letter-spacing:.06em;text-transform:uppercase;color:#ffffffdb;min-width:110px;padding:0;font-size:.86rem;font-weight:700}.app-icon-customizer .field-container__content{flex:1;width:100%;overflow:visible}.app-icon-customizer .zek-field{margin-bottom:1.25rem}.app-icon-customizer .zek-label{letter-spacing:.06em;text-transform:uppercase;color:#ffffffdb;margin-bottom:.45rem;font-size:.86rem;font-weight:700;display:block}.app-icon-customizer input[type=text],.app-icon-customizer input[type=number],.app-icon-customizer select,.app-icon-customizer .zek-input,.app-icon-customizer .zek-select{color:#fff;background:#111111e6;border:1px solid #ffffff24;border-radius:.7rem;width:100%;min-height:42px;transition:border-color .2s,box-shadow .2s}.app-icon-customizer input[type=checkbox],.app-icon-customizer input[type=radio]{accent-color:#fc8c06}.app-icon-customizer input[type=text]:focus,.app-icon-customizer input[type=number]:focus,.app-icon-customizer select:focus,.app-icon-customizer .zek-input:focus,.app-icon-customizer .zek-select:focus{border-color:#fc8c06f2;outline:none;box-shadow:0 0 0 3px #fc8c0633}.app-icon-customizer .btn,.app-icon-customizer .zek-button{border-radius:.7rem}.app-icon-customizer .style-selector{max-height:none}.app-icon-customizer .style-selector button{transition:transform .2s,border-color .2s,box-shadow .2s;border-radius:.8rem!important}.app-icon-customizer .style-selector button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0000004d}.variant-input__row{align-items:center;gap:.55rem;width:100%;display:flex}.variant-input__text{flex:1;min-height:42px;padding:0 .75rem}.variant-input__add-btn{align-self:center;min-height:38px;padding-left:.9rem;padding-right:.9rem}.variant-input__list{background:#0003;border:1px solid #ffffff1f;overflow:visible}.variant-input__divider{background-color:#ffffff1a}.variant-input__item{justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .7rem;display:flex}.variant-input__name{flex:1;min-width:0}.variant-input__edit-input{flex:1;min-width:0;min-height:36px;margin-right:.55rem;padding:0 .7rem!important}.variant-input__actions{flex-shrink:0;align-items:center;gap:.4rem;display:flex}.variant-input__actions .zek-icon-button,.variant-input__actions .zek-color-trigger,.variant-input__actions button{justify-content:center;align-items:center;width:30px;min-width:30px;height:30px;min-height:30px;display:inline-flex;border-radius:.5rem!important}.variant-input__actions .zek-color-trigger{color:#fff;border:1px solid #ffffff29!important}.app-icon-customizer .zek-color-picker-popup{max-width:190px}.app-icon-customizer .zek-color-picker-custom{align-items:stretch;gap:.45rem;display:flex}.app-icon-customizer .zek-color-picker-input{cursor:pointer;background:0 0;border:none;border-radius:.55rem;width:40px;min-width:40px;height:40px;margin:0;padding:0;overflow:hidden}.app-icon-customizer .zek-color-picker-input::-webkit-color-swatch-wrapper{padding:0}.app-icon-customizer .zek-color-picker-input::-webkit-color-swatch{border:0;border-radius:.5rem}.app-icon-customizer .zek-color-picker-custom .zek-input{height:40px;min-height:40px;padding:0 .55rem;line-height:40px}.icon-customizer-select-trigger{color:#fff;background:#111111e6;border:1px solid #ffffff24;border-radius:.7rem;justify-content:space-between;align-items:center;width:100%;min-height:42px;padding:.5rem .75rem;transition:border-color .2s,box-shadow .2s;display:inline-flex}.icon-customizer-select-trigger:hover{border-color:#fc8c06f2;outline:none;box-shadow:0 0 0 3px #fc8c0633}.icon-customizer-select-trigger:focus-visible{border-color:#fc8c06f2;outline:none;box-shadow:0 0 0 3px #fc8c0633}.icon-customizer-select-menu .is-active{color:#fc8c06;font-weight:700}.icon-preview__label{letter-spacing:.08em;text-transform:uppercase;color:#fffc;margin:0;font-size:.84rem;font-weight:700}.icon-preview__canvas-shell{background:0 0;border-radius:.9rem;padding:.2rem}.icon-preview__canvas{border:none;border-radius:.7rem;width:100%;box-shadow:0 10px 18px #00000047}.icon-preview__nav{justify-content:space-between;align-items:center;margin-top:.65rem;display:flex}.icon-preview__counter{color:#ffffffeb;background:#ffffff08;border:1px solid #ffffff24;border-radius:999px;padding:.25rem .7rem;font-size:.82rem;font-weight:600}.error-message{color:var(--color-error);background:var(--color-error-bg);border:1px solid #ff636333;border-radius:.7rem;padding:.65rem .75rem}@media (max-width:1024px){.app-icon-customizer__main{flex-direction:column}.app-icon-customizer__controls{padding-right:0}.app-icon-customizer__preview{width:100%;min-width:0;max-width:100%;position:static}}@media (max-width:768px){.app-icon-customizer,.app-icon-customizer__main{gap:1rem}.app-icon-customizer .field-container{flex-direction:column;gap:.7rem;padding:.85rem}.app-icon-customizer .field-container__label{min-width:0}.variant-input__row{flex-wrap:wrap}}
