.app-icon-customizer{display:flex;width:100%;gap:2rem}.app-icon-customizer__main{display:flex;width:100%;gap:2rem;align-items:flex-start}.app-icon-customizer__controls{flex:1 1 auto;max-height:none;overflow:visible;padding-right:.25rem;padding-top:.25rem}.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{min-width:300px;width:32%;max-width:400px;position:sticky;top:6rem;padding:1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at top right,rgba(252,140,6,.14),transparent 45%),linear-gradient(145deg,#0e0e0ef2,#202020e0);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{display:flex;align-items:start;gap:1rem;margin-bottom:1.25rem;padding:1rem;border-radius:.9rem;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#1c1c1cd1,#101010e6)}.app-icon-customizer .field-container--vertical{flex-direction:column;align-items:flex-start}.app-icon-customizer .field-container__label{min-width:110px;text-align:left;padding:0;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#ffffffdb}.app-icon-customizer .field-container__content{flex:1;width:100%;overflow:visible}.app-icon-customizer .zeq-field{margin-bottom:1.25rem}.app-icon-customizer .zeq-label{display:block;margin-bottom:.45rem;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#ffffffdb}.app-icon-customizer input[type=text],.app-icon-customizer input[type=number],.app-icon-customizer select,.app-icon-customizer .zeq-input,.app-icon-customizer .zeq-select{width:100%;min-height:42px;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:.7rem;background:#111111e6;transition:border-color .2s ease,box-shadow .2s ease}.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 .zeq-input:focus,.app-icon-customizer .zeq-select:focus{outline:none;border-color:#fc8c06f2;box-shadow:0 0 0 3px #fc8c0633}.app-icon-customizer .btn,.app-icon-customizer .zeq-button{border-radius:.7rem}.app-icon-customizer .style-selector{max-height:none}.app-icon-customizer .style-selector button{border-radius:.8rem!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.app-icon-customizer .style-selector button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0000004d}.variant-input__row{display:flex;align-items:center;gap:.55rem;width:100%}.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{border:1px solid rgba(255,255,255,.12);background:#0003;overflow:visible}.variant-input__divider{background-color:#ffffff1a}.variant-input__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .7rem}.variant-input__name{flex:1;min-width:0}.variant-input__edit-input{flex:1;min-width:0;min-height:36px;padding:0 .7rem!important;margin-right:.55rem}.variant-input__actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.variant-input__actions .zeq-icon-button,.variant-input__actions .zeq-color-trigger,.variant-input__actions button{width:30px;height:30px;min-width:30px;min-height:30px;border-radius:.5rem!important;display:inline-flex;align-items:center;justify-content:center}.variant-input__actions .zeq-color-trigger{color:#fff;border:1px solid rgba(255,255,255,.16)!important}.app-icon-customizer .zeq-color-picker-popup{max-width:190px}.app-icon-customizer .zeq-color-picker-custom{display:flex;align-items:stretch;gap:.45rem}.app-icon-customizer .zeq-color-picker-input{width:40px;min-width:40px;height:40px;padding:0;margin:0;border:none;border-radius:.55rem;background:transparent;overflow:hidden;cursor:pointer}.app-icon-customizer .zeq-color-picker-input::-webkit-color-swatch-wrapper{padding:0}.app-icon-customizer .zeq-color-picker-input::-webkit-color-swatch{border:0;border-radius:.5rem}.app-icon-customizer .zeq-color-picker-custom .zeq-input{height:40px;min-height:40px;padding:0 .55rem;line-height:40px}.icon-customizer-select-trigger{width:100%;min-height:42px;border-radius:.7rem;border:1px solid rgba(255,255,255,.14);background:#111111e6;color:#fff;padding:.5rem .75rem;display:inline-flex;align-items:center;justify-content:space-between;transition:border-color .2s ease,box-shadow .2s ease}.icon-customizer-select-trigger:hover,.icon-customizer-select-trigger:focus-visible{border-color:#fc8c06f2;box-shadow:0 0 0 3px #fc8c0633;outline:none}.icon-customizer-select-menu .is-active{color:#fc8c06;font-weight:700}.icon-preview__label{margin:0;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#fffc}.icon-preview__canvas-shell{border-radius:.9rem;padding:.2rem;background:transparent}.icon-preview__canvas{width:100%;border:none;border-radius:.7rem;box-shadow:0 10px 18px #00000047}.icon-preview__nav{margin-top:.65rem;display:flex;align-items:center;justify-content:space-between}.icon-preview__counter{padding:.25rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#ffffff08;font-size:.82rem;font-weight:600;color:#ffffffeb}.error-message{color:var(--color-error);padding:.65rem .75rem;border-radius:.7rem;background:var(--color-error-bg);border:1px solid rgba(255,99,99,.2)}@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}}