.custom-properties-panel-container{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--background-primary);color:var(--font-color);font-family:inherit;box-sizing:border-box;overflow:hidden;min-width:280px;min-height:300px;position:relative}.custom-properties-panel-docking{container-type:inline-size;container-name:custom-props-panel;overflow:hidden}.custom-properties-panel-docking .docking-panel-scroll{overflow:hidden!important;width:100%!important;box-sizing:border-box!important}.cpp-section-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--vw-gap);padding:var(--vw-inset) var(--vw-inset) var(--vw-gap)}.cpp-section-header-label{font-size:12px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--vw-muted)}.cpp-section-header-create{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--vw-r-row);background:transparent;color:var(--vw-muted);cursor:pointer;transition:background-color .14s ease,color .14s ease}.cpp-section-header-create:hover{background:var(--vw-hover);color:var(--font-color)}.cpp-section-header-create:focus-visible{outline:2px solid var(--border-accessible);outline-offset:1px}.cpp-search-bar{flex:none;display:flex;align-items:center;gap:4px;padding:0 var(--vw-inset) var(--vw-gap);box-sizing:border-box;background-color:var(--background-primary)}.cpp-search-input-wrap{position:relative;display:flex;align-items:center;flex:1 1;min-width:0}.cpp-search-icon{position:absolute;left:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--vw-muted);pointer-events:none}.cpp-search-input{width:100%;height:var(--vw-field-h);box-sizing:border-box;padding:0 10px 0 30px;border:1px solid transparent;border-radius:var(--vw-r-control);background-color:var(--vw-surface);color:var(--font-color);font-family:inherit;font-size:12px;outline:none;transition:background-color .14s ease}.cpp-search-input::placeholder{color:var(--input-placeholder)}.cpp-search-input:focus,.cpp-search-input:hover{background-color:var(--vw-surface-strong)}.cpp-search-clear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:var(--vw-r-row);background:transparent;color:var(--vw-muted);cursor:pointer;transition:background-color .14s ease,color .14s ease}.cpp-search-clear:hover{background:var(--vw-hover);color:var(--font-color)}.cpp-search-no-match{padding:20px 12px;text-align:center;font-size:12px;color:var(--vw-muted)}.cpp-loading-bar{flex:none;height:2px;width:100%;background-color:color-mix(in srgb,var(--background-accent) 14%,transparent);overflow:hidden}.cpp-loading-bar:before{content:"";display:block;width:40%;height:100%;background-color:var(--background-accent);animation:cpp-loading-slide 1.1s cubic-bezier(.4,0,.2,1) infinite}@keyframes cpp-loading-slide{0%{transform:translateX(-100%)}to{transform:translateX(350%)}}.cpp-card-list{flex:1 1;min-height:0;overflow-y:auto;padding:0 var(--vw-inset) var(--vw-inset);display:flex;flex-direction:column;gap:3px}.cpp-card{flex-shrink:0;border:none;border-radius:var(--vw-r-control);background-color:transparent;overflow:hidden;transition:background-color .14s ease}.cpp-card:hover{background-color:var(--vw-hover)}.cpp-card.open{background-color:var(--vw-surface)}.cpp-card-head{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cpp-swatch{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-sizing:border-box;background:transparent;border:1.5px solid var(--vw-muted);transition:background .18s ease,border-color .18s ease}.cpp-card.loaded .cpp-swatch{background:var(--generic-success);border-color:var(--generic-success)}.cpp-card-name{flex:1 1 auto;min-width:0;font-size:12px;font-weight:500;color:var(--font-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cpp-card-count{flex-shrink:0;font-size:11px;font-weight:400;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--vw-muted)}.cpp-card-count.cpp-card-count-empty{opacity:.6}.cpp-card-chev{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--vw-muted);transition:transform .18s cubic-bezier(.2,.7,.3,1)}.cpp-card.open .cpp-card-chev{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){.cpp-card-chev{transition:none}}.cpp-card-body{flex-direction:column;padding:var(--vw-gap) 8px 8px;border-top:1px solid var(--vw-hairline);background-color:transparent;overflow-y:auto;max-height:min(420px,60vh)}.cpp-actrow,.cpp-card-body{display:flex;gap:var(--vw-gap)}.cpp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 10px;box-sizing:border-box;border:none;border-radius:var(--vw-r-row);background-color:var(--vw-surface-strong);color:var(--font-color);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .14s ease,color .14s ease,filter .14s ease}.cpp-btn:hover:not(:disabled){background-color:color-mix(in srgb,var(--font-color) 16%,transparent)}.cpp-btn:disabled{opacity:.5;cursor:not-allowed}.cpp-btn:focus-visible{outline:2px solid var(--border-accessible);outline-offset:1px}.cpp-btn-load{flex:1 1 auto;background-color:var(--background-accent);color:var(--vw-on-accent)}.cpp-btn-load:hover:not(:disabled){background-color:var(--background-accent);filter:brightness(1.06)}.cpp-btn-load.loaded{background-color:var(--vw-surface-strong);color:var(--font-color)}.cpp-btn-load.loaded:hover:not(:disabled){background-color:color-mix(in srgb,var(--generic-danger) 16%,transparent);color:var(--generic-danger);filter:none}.cpp-btn-load.is-busy{pointer-events:none;opacity:.85}.cpp-spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid;border-top:2px solid transparent;animation:cpp-spin .7s linear infinite;vertical-align:middle}@keyframes cpp-spin{to{transform:rotate(1turn)}}.cpp-proplist{flex-direction:column;overflow-y:auto;max-height:220px;background-color:transparent}.cpp-prop,.cpp-proplist{display:flex;border:none}.cpp-prop{align-items:center;justify-content:space-between;gap:10px;min-height:22px;margin:0 -6px;padding:2px 6px;border-radius:var(--vw-r-row);font-size:12px;transition:background-color .14s ease}.cpp-prop:hover{background-color:var(--vw-hover)}.cpp-prop-k{max-width:50%;font-weight:400;color:var(--vw-muted)}.cpp-prop-k,.cpp-prop-v{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cpp-prop-v{max-width:60%;font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:11px;color:var(--font-color);text-align:right}.cpp-prop-empty{padding:8px 6px;text-align:center;font-size:11px;color:var(--vw-muted)}.cpp-newprop-trigger{display:flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 10px;box-sizing:border-box;border:1px dashed var(--vw-hairline);border-radius:var(--vw-r-row);background-color:transparent;color:var(--vw-muted);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:border-color .14s ease,color .14s ease}.cpp-newprop-trigger:hover:not(:disabled){border-color:color-mix(in srgb,var(--font-color) 24%,transparent);color:var(--font-color)}.cpp-newprop-trigger:disabled{cursor:not-allowed;opacity:.45}.cpp-newprop{display:grid;grid-template-columns:1fr 1fr auto auto;grid-gap:4px;gap:4px;align-items:center}.cpp-newprop-input{height:26px;padding:0 8px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--vw-r-row);background-color:var(--vw-surface-strong);color:var(--font-color);font-family:inherit;font-size:12px;min-width:0;outline:none;transition:background-color .14s ease}.cpp-newprop-input::placeholder{color:var(--input-placeholder)}.cpp-newprop-input:focus,.cpp-newprop-input:hover:not(:disabled){background-color:color-mix(in srgb,var(--font-color) 16%,transparent)}.cpp-newprop-input:disabled{opacity:.5;cursor:not-allowed}.cpp-newprop-add{width:26px;height:26px;padding:0;border:none;border-radius:var(--vw-r-row);background-color:var(--background-accent);color:var(--vw-on-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter .14s ease,opacity .14s ease}.cpp-newprop-add:hover:not(:disabled){filter:brightness(1.06)}.cpp-newprop-add:disabled{background-color:var(--vw-surface-strong);color:var(--vw-muted);opacity:.6;cursor:not-allowed}.cpp-newprop-cancel{width:26px;height:26px;padding:0;border:none;border-radius:var(--vw-r-row);background-color:transparent;color:var(--vw-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;transition:background-color .14s ease,color .14s ease}.cpp-newprop-cancel:hover{background:var(--vw-hover);color:var(--font-color)}.cpp-newprop-readonly{opacity:.55}.cpp-status{flex:none;min-height:0;padding:0 var(--vw-inset);font-size:12px;font-weight:500;text-align:center;transition:padding .18s ease,min-height .18s ease,opacity .18s ease;opacity:0}.cpp-status:not(:empty){padding:8px var(--vw-inset);min-height:18px;opacity:1}.cpp-status-success{color:var(--generic-success);background-color:color-mix(in srgb,var(--generic-success) 14%,transparent)}.cpp-status-error{color:var(--generic-danger);background-color:color-mix(in srgb,var(--generic-danger) 12%,transparent)}.cpp-empty-state{height:100%}.cpp-empty-create-btn{margin-top:12px}.custom-properties-spinner-overlay{position:absolute;inset:0;background:var(--background-primary);display:flex;align-items:center;justify-content:center;z-index:10}.custom-properties-spinner-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.custom-properties-spinner{width:28px;height:28px;border:2px solid color-mix(in srgb,var(--font-color) 18%,transparent);border-top-color:var(--background-accent);border-radius:50%;animation:custom-spin .8s linear infinite}@keyframes custom-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@container custom-props-panel (max-width: 360px){.cpp-card-list,.cpp-search-bar,.cpp-section-header{padding-left:var(--vw-gap);padding-right:var(--vw-gap)}.cpp-card-head{padding:3px 6px;gap:6px}.cpp-card-body{padding:var(--vw-gap) 6px 6px}.cpp-btn{padding:0 8px}}@container custom-props-panel (max-width: 280px){.cpp-newprop{grid-template-columns:1fr auto auto;grid-template-areas:"name name name" "value add cancel"}.cpp-newprop-input:first-of-type{grid-area:name}.cpp-newprop-input:nth-of-type(2){grid-area:value}.cpp-newprop-add{grid-area:add}.cpp-newprop-cancel{grid-area:cancel}.cpp-prop-k{max-width:45%}.cpp-prop-v{max-width:55%}}