:root{--white:#fff;--black:#000;--gray-050:hsl(212,60%,97%);--gray-100:hsl(212,50%,93%);--gray-150:hsl(212,40%,89%);--gray-200:hsl(212,30%,85%);--gray-300:hsl(211,13%,65%);--gray-350:hsl(211,11%,59%);--gray-400:hsl(210,10%,53%);--gray-500:hsl(211,12%,43%);--gray-550:hsl(210,13%,40%);--gray-600:hsl(209,14%,37%);--gray-700:hsl(209,18%,30%);--gray-800:hsl(209,20%,25%);--gray-900:hsl(210,24%,16%);--gray-1000:hsl(210,24%,10%);--red-050:#fef2f2;--red-100:#fee2e2;--red-300:#fca5a5;--red-600:#dc2626;--red-700:#b91c1c;--red-800:#991b1b;--orange-100:#ffedd5;--orange-400:#fb923c;--orange-600:#ea580c;--amber-100:#fef3c7;--amber-300:#fcd34d;--amber-600:#d97706;--amber-700:#b45309;--teal-100:#ccfbf1;--teal-300:#5eead4;--teal-550:#11a697;--teal-700:#0f766e;--sky-100:#e0f2fe;--sky-300:#7dd3fc;--sky-600:#0284c7;--sky-700:#0369a1;--blue-300:#93c5fd;--blue-600:#2563eb;--bg-error:var(--red-100);--bg-warning:var(--amber-100);--bg-success:var(--teal-100);--bg-notice:var(--sky-100);--bg-enabled:var(--teal-550);--bg-pending:var(--orange-400);--bg-disabled:var(--red-600);--fg-error:#d81f23;--fg-warning:var(--amber-700);--fg-success:var(--teal-700);--fg-notice:var(--sky-700);--rose-600:#e11d48;--fg-subtle:var(--gray-550);--fg-input:hsl(212,25%,50%);--border-hairline:rgb(from var(--gray-800) r g b / 10%);--border-hairline-medium:#cfd8e3;--focus-outline:#0284c7;--text-color:var(--gray-700);--font-size:14px;--lh:1.42em;--sans:system-ui,BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--body-bg:var(--gray-100);--sidebar-bg:var(--gray-150);--radius-sm:3px;--radius-md:4px;--radius-lg:5px;--2xs:2px;--xs:4px;--s:8px;--m:14px;--l:18px;--xl:24px;--ui-control-height:34px;--ui-control-height-small:30px;--ui-control-bg:rgb(from var(--fg-input) r g b / 25%);--ui-control-bg-hover:rgb(from var(--fg-input) r g b / 30%);--ui-control-fg:var(--fg-subtle)}.cp-demo *{box-sizing:border-box}.cp-demo{font-family:var(--sans);font-size:var(--font-size);line-height:var(--lh);color:var(--text-color);-webkit-font-smoothing:subpixel-antialiased}.cp-demo a{color:var(--sky-700);text-decoration:none}.cp-demo a:hover{text-decoration:underline}.cp-demo code,.md-typeset .cp-demo code{font-family:var(--mono);font-size:.86em;background:transparent;color:inherit}.cp-demo h3{font-size:16px;color:var(--gray-800);margin:34px 0 4px;font-weight:600}.cp-demo .demo{border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:#fff;padding:22px 24px;margin-top:16px}.cp-demo .demo+.code{margin-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top:0}.cp-demo .demo.row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}.cp-demo .pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:16px}.cp-demo .pal .chipc{border:1px solid var(--border-hairline);border-radius:var(--radius-md);overflow:hidden;font-size:11px}.cp-demo .pal .chipc .sw{height:46px}.cp-demo .pal .chipc .lb{padding:5px 7px;background:#fff}.cp-demo .pal .chipc .lb b{display:block;color:var(--gray-800)}.cp-demo .pal .chipc .lb span{color:var(--fg-subtle);font-family:var(--mono);font-size:10px}.cp-demo .spacing-row{display:flex;align-items:center;gap:14px;margin:6px 0;font-size:13px}.cp-demo .spacing-row .bar{background:var(--sky-600);height:14px;border-radius:2px}.cp-demo .spacing-row code{color:var(--red-700)}.cp-demo .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--ui-control-height);min-height:var(--ui-control-height);padding:0 14px;border:1px solid transparent;border-radius:var(--radius-lg);font-family:inherit;font-size:14px;line-height:1;font-weight:400;cursor:pointer;background:var(--ui-control-bg);color:var(--gray-700);white-space:nowrap;user-select:none}.cp-demo .btn:hover{background:var(--ui-control-bg-hover);text-decoration:none}.cp-demo .btn:focus-visible{outline:0;box-shadow:0 0 0 1px #fff,0 0 0 3px var(--focus-outline)}.cp-demo .btn.submit{background:var(--red-600);color:#fff}.cp-demo .btn.submit:hover{background:var(--red-700)}.cp-demo .btn.submit:active{background:var(--red-800)}.cp-demo .btn.secondary{background:var(--gray-500);color:#fff}.cp-demo .btn.secondary:hover{background:var(--gray-550)}.cp-demo .btn.caution{background:var(--red-050);color:var(--fg-error)}.cp-demo .btn.caution:hover{background:var(--red-100)}.cp-demo .btn.dashed{background:transparent;border:1px dashed var(--gray-400);color:var(--gray-600)}.cp-demo .btn.dashed:hover{background:var(--gray-050)}.cp-demo .btn.small{height:var(--ui-control-height-small);min-height:var(--ui-control-height-small);font-size:13px;padding:0 11px}.cp-demo .btn.big{height:40px;min-height:40px;padding:0 18px;font-size:15px}.cp-demo .btn.disabled{opacity:.25;pointer-events:none}.cp-demo .btn .cp-icon{width:16px;height:16px;display:inline-flex}.cp-demo .btn .cp-icon svg{width:100%;height:100%;fill:currentColor}.cp-demo .ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:0 0 auto;fill:none}.cp-demo .fld-element-icon .ic{width:100%;height:100%}.cp-demo .copytextbtn .ic{width:15px;height:15px}.cp-demo .tip-dismiss-btn .ic{width:14px;height:14px}.cp-demo .btngroup{display:inline-flex;border-radius:var(--radius-lg)}.cp-demo .btngroup .btn{border-radius:0;margin-left:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.cp-demo .btngroup .btn:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg);margin-left:0}.cp-demo .btngroup .btn:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}.cp-demo .btngroup .btn.active{background:var(--gray-500);color:#fff}.cp-demo .field{margin:0}.cp-demo .field+.field{margin-top:24px}.cp-demo .field>.heading{margin-bottom:5px}.cp-demo .field>.heading{display:flex;align-items:center}.cp-demo .field>.heading>label,.cp-demo .field>.heading>legend{font-weight:600;color:var(--gray-800);font-size:13px}.cp-demo .field .heading .required::after{content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 384 512'><path fill='%23e11d48' d='M192 32c17.7 0 32 14.3 32 32l0 132.5 115.6-66.8c15.3-8.8 34.9-3.6 43.7 11.7s3.6 34.9-11.7 43.7L256 251.5l115.6 66.8c15.3 8.8 20.5 28.4 11.7 43.7s-28.4 20.5-43.7 11.7L224 315.5 224 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-132.5L44.4 373.7c-15.3 8.8-34.9 3.6-43.7-11.7s-3.6-34.9 11.7-43.7L128 251.5 12.4 184.7C-2.9 175.9-8.1 156.3 .7 141s28.4-20.5 43.7-11.7L160 196.5 160 64c0-17.7 14.3-32 32-32z'/></svg>");display:inline-block;margin-inline:5px 0;vertical-align:2px;line-height:0}.cp-demo .field .heading .flex-grow{flex:1;max-width:100%}.cp-demo .field .heading .read-only-badge{margin-left:8px;font-size:11px;color:var(--fg-subtle);background:var(--gray-100);padding:2px 6px;border-radius:var(--radius-md)}.cp-demo .field>.instructions{color:var(--fg-subtle);font-size:12.5px;margin-bottom:6px}.cp-demo .field>.instructions p{margin:0}.cp-demo .field .input{position:relative}.cp-demo .field .notice,.cp-demo .field .warning,.cp-demo .field .errors{font-size:12.5px;margin:6px 0 0;display:flex;gap:6px;align-items:flex-start}.cp-demo .field .notice{color:var(--fg-notice)}.cp-demo .field .warning{color:var(--fg-warning)}.cp-demo .field .has-icon .icon{display:inline-flex;align-items:center;flex:0 0 auto;margin-top:1px}.cp-demo .field .has-icon .icon .ic{width:13px;height:13px}.cp-demo .field .errors{list-style:none;padding:0;color:var(--fg-error);flex-direction:column;gap:2px}.cp-demo .field .errors li{margin:0}.cp-demo .field{position:relative}.cp-demo .field>.status-badge{position:absolute;inset-inline-start:-16px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--bg-pending)}.cp-demo .field>.status-badge.modified{background:var(--sky-600)}.cp-demo .text,.cp-demo textarea.text,.cp-demo .select select{width:100%;height:var(--ui-control-height);padding:0 10px;border:1px solid var(--fg-input);border-radius:var(--radius-lg);background:#fff;color:var(--gray-800);font-family:inherit;font-size:14px}.cp-demo textarea.text{height:auto;min-height:82px;padding:8px 10px;line-height:1.5;resize:vertical}.cp-demo .text:focus,.cp-demo textarea.text:focus,.cp-demo .select select:focus{outline:0;border-color:var(--focus-outline);box-shadow:0 0 0 2px rgb(from var(--focus-outline) r g b / 30%)}.cp-demo .text::placeholder{color:var(--gray-350)}.cp-demo .text.fullwidth{width:100%}.cp-demo .select:not(.selectize){position:relative;display:inline-block;max-width:100%;width:100%}.cp-demo .select:not(.selectize) select{appearance:none;padding-right:30px;border-radius:5px;white-space:nowrap;cursor:pointer}.cp-demo .select:not(.selectize)::after{content:'';position:absolute;right:9px;top:calc(50% - 5px);width:.4375rem;height:.4375rem;border:solid var(--fg-subtle);border-width:0 .125rem .125rem 0;transform:rotate(45deg);opacity:.8;pointer-events:none;z-index:1}.cp-demo{--checkbox-size:14px;--radio-size:1rem}.cp-demo .checkbox-group,.cp-demo .radio-group{display:flex;flex-direction:column;gap:.3125rem}.cp-demo input.checkbox,.cp-demo input.radio{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);opacity:0}.cp-demo input.checkbox+label,.cp-demo input.radio+label{position:relative;display:inline-block;cursor:pointer;font-size:13.5px;color:var(--gray-700);line-height:max(1rem,var(--checkbox-size));min-height:max(1rem,var(--checkbox-size));padding-inline-start:calc(var(--checkbox-size) + .35rem)}.cp-demo input.checkbox+label::before{content:'';position:absolute;top:0;inset-inline-start:0;box-sizing:border-box;width:var(--checkbox-size);height:var(--checkbox-size);background:#fbfcfe;border:1px solid var(--fg-input);border-radius:var(--radius-sm)}.cp-demo input.checkbox:checked+label::after{content:'';position:absolute;inset-inline-start:5px;top:2px;width:3px;height:7px;border:solid var(--gray-800);border-width:0 2px 2px 0;transform:rotate(45deg)}.cp-demo input.radio+label{padding-inline-start:calc(var(--radio-size) + .35rem)}.cp-demo input.radio+label::before{content:'';position:absolute;top:50%;inset-inline-start:0;box-sizing:border-box;width:var(--radio-size);height:var(--radio-size);background:#fbfcfe;border:1px solid var(--fg-input);border-radius:100%;transform:translateY(-50%)}.cp-demo input.radio:checked+label::after{content:'';position:absolute;top:50%;inset-inline-start:4px;width:calc(var(--radio-size) - 8px);height:calc(var(--radio-size) - 8px);background:var(--gray-900);border-radius:100%;transform:translateY(-50%)}.cp-demo .lightswitch{display:inline-block;width:34px;height:22px;border-radius:11px;background:var(--gray-200);box-shadow:inset 0 0 0 1px rgb(from var(--fg-input) r g b / 55%);position:relative;cursor:pointer;vertical-align:middle;border:0;padding:0;transition:background-color .1s}.cp-demo .lightswitch .handle{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgb(from var(--fg-input) r g b / 45%);transition:left .13s ease}.cp-demo .lightswitch.on{background:var(--teal-550);box-shadow:inset 0 0 0 1px oklch(from var(--teal-550) calc(l - .1) c h)}.cp-demo .lightswitch.on .handle{left:14px}.cp-demo .lightswitch.on .handle::after{content:'';position:absolute;inset:0;margin:auto;width:10px;height:10px;background:var(--teal-550);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/contain no-repeat}.cp-demo .lightswitch.small{width:28px;height:18px;border-radius:9px}.cp-demo .lightswitch.small .handle{width:14px;height:14px}.cp-demo .lightswitch.small.on .handle{left:12px}.cp-demo .lightswitch.small.on .handle::after{width:8px;height:8px}.cp-demo .datetimewrapper{display:flex;flex-wrap:wrap;gap:6px}.cp-demo .datewrapper,.cp-demo .timewrapper{position:relative;display:inline-block}.cp-demo .datewrapper .text{width:9.5em;padding-right:30px}.cp-demo .timewrapper .text{width:8.5em;padding-right:30px}.cp-demo .datetimewrapper [data-icon]{position:absolute;top:0;right:9px;display:flex;align-items:center;height:var(--ui-control-height);color:var(--fg-subtle);pointer-events:none}.cp-demo .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cp-demo .copytext{display:inline-flex;align-items:stretch;border:1px solid var(--fg-input);border-radius:var(--radius-lg);overflow:hidden;background:#fff;max-width:100%}.cp-demo .copytext input{border:0;padding:0 10px;height:var(--ui-control-height);font-family:var(--mono);font-size:13px;color:var(--gray-800);background:transparent;min-width:220px}.cp-demo .copytext .copytextbtn{border:0;border-left:1px solid var(--border-hairline-medium);background:var(--gray-050);padding:0 11px;cursor:pointer;color:var(--fg-subtle)}.cp-demo .copytext .copytextbtn:hover{background:var(--gray-100);color:var(--gray-700)}.cp-demo .status{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:0;margin-right:6px;background:transparent;box-shadow:inset 0 0 0 2px var(--gray-350)}.cp-demo .status.on,.cp-demo .status.live,.cp-demo .status.active,.cp-demo .status.enabled{background:var(--bg-enabled);box-shadow:none}.cp-demo .status.off,.cp-demo .status.suspended,.cp-demo .status.expired{background:var(--bg-disabled);box-shadow:none}.cp-demo .status.pending{background:var(--bg-pending);box-shadow:none}.cp-demo .status.disabled,.cp-demo .status.inactive{background:var(--gray-350);box-shadow:none}.cp-demo .status-item{font-size:13.5px;color:var(--gray-700);margin-right:20px;display:inline-flex;align-items:center}.cp-demo .badge{display:inline-block;min-width:20px;text-align:center;padding:1px 7px;border-radius:var(--radius-lg);background:var(--fg-subtle);color:#fff;font-size:12px;font-weight:600;line-height:1.5}.cp-demo .chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);background:#fff;font-size:13px;color:var(--gray-800)}.cp-demo .chip .thumb{width:20px;height:20px;border-radius:var(--radius-sm);background:var(--gray-200);flex:0 0 auto}.cp-demo .token{display:inline-block;padding:2px 8px;border-radius:var(--radius-lg);background:var(--gray-150);color:var(--gray-700);font-size:12.5px}.cp-demo .pane,.cp-demo .content-pane{background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);padding:24px}.cp-demo .pane-header{margin:-24px -24px 24px;padding:5px 24px 6px;min-height:45px;background:var(--gray-050);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:inset 0 -1px 0 0 rgb(from var(--border-hairline-medium) r g b / 60%)}.cp-demo .pane-header>.so-toolbar{display:flex;flex-direction:row;align-items:center;gap:var(--xs,6px);min-height:28px}.cp-demo .meta{background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);overflow:hidden;--heading-width:132px}.cp-demo .meta:not(.read-only){background:var(--gray-050)}.cp-demo .meta>.flex-fields>.field{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;min-height:44px;margin:0;padding:0}.cp-demo .meta>.flex-fields>.field+.field{border-top:1px solid var(--border-hairline)}.cp-demo .meta>.flex-fields>.field>.heading{flex:0 0 var(--heading-width);margin:0;padding:12px 8px 12px 14px;border-right:1px solid var(--border-hairline);line-height:18px}.cp-demo .meta>.flex-fields>.field>.heading label{color:var(--gray-600)}.cp-demo .meta>.flex-fields>.field>.input{display:flex;flex:1;align-items:center;min-width:0;padding:0 14px;font-size:13.5px}.cp-demo .meta>.flex-fields>.field>.input .text{border:0;background:transparent;padding:0;height:auto}.cp-demo table.data{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);overflow:hidden;font-size:13.5px}.cp-demo table.data th{text-align:left;padding:10px 14px;font-weight:600;color:var(--gray-800);border-bottom:1px solid var(--border-hairline-medium);background:var(--gray-050);font-size:12.5px}.cp-demo table.data td{padding:10px 14px;border-bottom:1px solid var(--border-hairline);color:var(--gray-700)}.cp-demo table.data tbody tr:last-child td,.cp-demo table.data tr:last-child td{border-bottom:0}.cp-demo table.data tbody tr:hover{background:var(--gray-050)}.cp-demo table.editable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);overflow:hidden;font-size:13.5px}.cp-demo table.editable th{text-align:left;padding:8px 10px;font-weight:600;font-size:12.5px;color:var(--gray-800);background:var(--gray-050);border-bottom:1px solid var(--border-hairline-medium)}.cp-demo table.editable td{padding:0;border-bottom:1px solid var(--border-hairline);border-inline-end:1px solid var(--border-hairline)}.cp-demo table.editable tr:last-child td{border-bottom:0}.cp-demo table.editable td:last-child{border-inline-end:0}.cp-demo table.editable td.textual textarea{width:100%;border:0;padding:8px 10px;font-family:inherit;font-size:13.5px;color:var(--gray-700);resize:none;background:transparent;line-height:1.4}.cp-demo table.editable td.thin{width:1%;white-space:nowrap;padding:0 8px;text-align:center;color:var(--fg-subtle);opacity:.5}.cp-demo .color-container{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.cp-demo .color{display:inline-flex;align-items:center;justify-content:center;width:var(--ui-control-height);height:var(--ui-control-height);border:1px solid var(--fg-input);border-radius:var(--radius-lg);background:#fff;flex:0 0 auto;padding:3px}.cp-demo .color.small{width:var(--ui-control-height-small);height:var(--ui-control-height-small)}.cp-demo .color .color-preview{width:100%;height:100%;border-radius:3px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / 12%)}.cp-demo .color-input-container{position:relative;display:inline-flex;align-items:center;flex:1;min-width:0}.cp-demo .color-hex-indicator{position:absolute;inset-inline-start:10px;color:var(--fg-subtle);font-family:var(--mono);font-size:13px;pointer-events:none}.cp-demo .color-input{width:100%;padding-left:22px;font-family:var(--mono)}.cp-demo .autosuggest-container{position:relative}.cp-demo .vue-admin-table .tableview{border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);overflow:hidden}.cp-demo .vue-admin-table table.data{border:0;border-radius:0}.cp-demo .vue-admin-table td.cell-bold{font-weight:600;color:var(--gray-800)}.cp-demo .vue-admin-table td.thin{width:1%;white-space:nowrap;color:var(--fg-subtle);opacity:.5}.cp-demo .pane-tabs{display:flex;flex-direction:row;align-items:center;margin:-5px -24px -6px}.cp-demo .pane-tabs .scrollable{display:flex;flex:1;flex-direction:row;overflow-x:auto;scrollbar-width:none}.cp-demo .pane-tabs .scrollable::-webkit-scrollbar{display:none}.cp-demo .pane-tabs a{--tab-label-color:var(--gray-600);color:var(--tab-label-color);border-radius:2px 2px 0 0;cursor:pointer;text-decoration:none;font-size:13.5px}.cp-demo .pane-tabs a .tab-label{display:flex;flex-direction:row;align-items:center;gap:5px;height:45px;padding:0 24px;border-radius:2px 2px 0 0;white-space:nowrap}.cp-demo .pane-tabs a.sel{--highlight-color:var(--gray-500);--tab-label-color:var(--gray-800);background:#fff;box-shadow:inset 0 2px 0 var(--highlight-color),0 0 0 1px rgb(51 64 77 / 10%),0 2px 12px var(--gray-200);cursor:default;position:relative;z-index:1}.cp-demo .pane-tabs a.error{--highlight-color:var(--red-600) !important;--tab-label-color:var(--red-600) !important}.cp-demo .pane-tabs a.error .ic{width:13px;height:13px}.cp-demo .hidden{display:none}.cp-demo .btn.menubtn{display:inline-flex;align-items:center;gap:5px;min-height:0;padding:4px 9px}.cp-demo .btn.menubtn.error{color:var(--red-600);border-color:var(--red-300)}.cp-demo .menu{background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);box-shadow:0 3px 12px rgb(0 0 0 / 12%);padding:0;display:inline-block;min-width:160px}.cp-demo .menu ul.padded{list-style:none;margin:0;padding:5px}.cp-demo .menu ul.padded li a,.cp-demo .menu ul.padded li button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px 6px 28px;border:0;border-radius:4px;background:0;font-family:inherit;font-size:13.5px;text-align:left;color:var(--gray-700);text-decoration:none;cursor:pointer;white-space:nowrap}.cp-demo .menu ul.padded li a:hover,.cp-demo .menu ul.padded li button:hover{background:var(--gray-050);color:var(--gray-900)}.cp-demo .menu ul.padded li a.sel{color:var(--gray-900);font-weight:600}.cp-demo .menu ul.padded li a.sel::before{content:'';position:absolute;margin-inline-start:-18px;width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}.cp-demo .menu ul.padded li a.error,.cp-demo .menu ul.padded li button.error{color:var(--red-600)}.cp-demo .menu ul.padded li a.error .ic{width:13px;height:13px}.cp-demo .menu .menu-item-label{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}.cp-demo .menu .menu-item-description{font-size:11.5px;color:var(--fg-subtle);font-weight:400}.cp-demo .menu hr.padded{margin:5px 0;border:0;border-top:1px solid var(--border-hairline)}.cp-demo .menu .menu-group h3{margin:6px 0 2px;padding:0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-subtle)}.cp-demo .toolbar{display:flex;gap:10px;align-items:center;padding:10px 12px;background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg)}.cp-demo .toolbar .flex-grow{flex:1}.cp-demo .search-container{position:relative;flex:1;max-width:280px}.cp-demo .search-container input{width:100%;height:var(--ui-control-height);padding:0 10px 0 32px;border:1px solid var(--fg-input);border-radius:var(--radius-lg);font-size:14px;background:#fff;color:var(--gray-800)}.cp-demo .search-container::before{content:'';position:absolute;left:11px;top:50%;width:11px;height:11px;border:2px solid var(--fg-subtle);border-radius:50%;transform:translateY(-60%)}.cp-demo .search-container::after{content:'';position:absolute;left:20px;top:20px;width:6px;height:2px;background:var(--fg-subtle);transform:rotate(45deg)}.cp-demo .spinner{width:24px;height:24px;border:2px solid var(--gray-200);border-top-color:var(--sky-600);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.cp-demo .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cp-demo .status-label{display:inline-flex;align-items:center;gap:var(--xs);padding:4px 8px 4px 6px;line-height:1.1;font-size:11px;font-weight:500;text-transform:uppercase;border-radius:11px;margin-right:8px;background-color:rgb(from var(--sl-bg) r g b / 15%)}.cp-demo .status-label .status{margin:0;width:8px;height:8px;box-shadow:none;background:var(--sl-bg)}.cp-demo .status-label .status-label-text{color:var(--sl-fg)}.cp-demo .status-label.green{--sl-bg:#22c55e;--sl-fg:#14532d}.cp-demo .status-label.teal{--sl-bg:var(--teal-550);--sl-fg:#134e4a}.cp-demo .status-label.blue{--sl-bg:var(--blue-600);--sl-fg:#1e3a8a}.cp-demo .status-label.amber{--sl-bg:#f59e0b;--sl-fg:#78350f}.cp-demo .status-label.orange{--sl-bg:var(--orange-400);--sl-fg:#7c2d12}.cp-demo .status-label.red{--sl-bg:var(--red-600);--sl-fg:#7f1d1d}.cp-demo .status-label.gray{--sl-bg:var(--gray-400);--sl-fg:var(--gray-800)}.cp-demo .money-container{display:inline-flex;align-items:stretch;border:1px solid var(--fg-input);border-radius:var(--radius-lg);overflow:hidden;background:#fff;max-width:220px}.cp-demo .money-currency-label{display:flex;align-items:center;padding:0 10px;background:var(--gray-050);color:var(--fg-subtle);border-right:1px solid var(--border-hairline-medium);font-size:13px;white-space:nowrap;flex:0 0 auto}.cp-demo .money-container input{border:0;height:var(--ui-control-height);padding:0 10px;font-size:14px;color:var(--gray-800);width:100%;text-align:right;font-variant-numeric:tabular-nums}.cp-demo dl.meta.read-only{margin:0;background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);overflow:hidden}.cp-demo dl.meta.read-only .data{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-hairline);font-size:13px}.cp-demo dl.meta.read-only .data:last-child{border-bottom:0}.cp-demo dl.meta.read-only dt.heading{margin:0;color:var(--fg-subtle);flex:0 0 40%;font-weight:500}.cp-demo dl.meta.read-only dd.value{margin:0;color:var(--gray-800);flex:1;text-align:right;font-variant-numeric:tabular-nums}.cp-demo .order-total{margin-top:0;border-top:0}.cp-demo .order-total tr td{padding:7px 14px;border-bottom:1px solid var(--border-hairline)}.cp-demo .order-total tr td:last-child{text-align:right;font-variant-numeric:tabular-nums}.cp-demo .order-total tr.grand td{font-weight:700;color:var(--gray-900);border-bottom:0;border-top:2px solid var(--gray-200);font-size:15px}.cp-demo .element-index{border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);overflow:hidden;background:#fff}.cp-demo .element-index .toolbar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border-hairline-medium)}.cp-demo .element-index table.data{border:0;border-radius:0}.cp-demo .sources-list{--source-item-toggle-size:1.25rem;position:relative;list-style:none;margin:0;padding-inline-start:var(--m)}.cp-demo .source-item{position:relative}.cp-demo .source-item--heading{color:var(--fg-subtle);font-size:11px;font-weight:700;text-transform:uppercase;padding-inline-start:var(--s);padding-block:2px}.cp-demo .sidebar .heading>.source-item--heading+.sources-list{margin-block:var(--xs) 2px}.cp-demo .source-item .source-item__toggle{position:absolute;inset-inline-start:0;inset-block-start:50%;transform:translateY(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--source-item-toggle-size);height:var(--source-item-toggle-size);border:0;background:0;color:inherit;cursor:pointer;padding:0}.cp-demo .source-item--heading>craft-disclosure>.source-item__toggle{inset-block-start:0;transform:none}.cp-demo .cp-icon.puny .ic{width:11px;height:11px}.cp-demo .sources-list[data-state="collapsed"] li:not(:has(.sel)){display:none}.cp-demo .source-item a .label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-demo .element-index .sources-list a{display:flex}.cp-demo .address-card{border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);padding:16px 18px;background:#fff;max-width:300px;font-size:13.5px;line-height:1.6}.cp-demo .address-card .name{font-weight:600;color:var(--gray-900);margin-bottom:2px}.cp-demo .address-card address{font-style:normal;color:var(--gray-700)}.cp-demo .address-card .card-actions{margin-top:12px;display:flex;gap:8px}.cp-demo .fld-workspace{background:var(--gray-100);border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);padding:16px}.cp-demo .fld-ui-library{display:flex;flex-wrap:wrap;gap:10px}.cp-demo .fld-element{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;box-shadow:inset 0 0 0 1px var(--border-hairline);border-radius:var(--radius-md);background:#fff;cursor:grab;font-size:13px}.cp-demo .fld-element .fld-element-icon{width:16px;height:16px;color:var(--fg-subtle);display:inline-flex;align-items:center;justify-content:center}.cp-demo .fld-element .fld-element-icon svg{width:16px;height:16px;fill:none}.cp-demo .fld-element h4{margin:0;font-size:13px;font-weight:500;color:var(--gray-800)}.cp-demo .fld-element.fld-field{background:var(--gray-100);color:var(--fg-subtle);box-shadow:none}.cp-demo .pane.tip,.cp-demo .pane.warning{position:relative;border:1px solid;border-radius:var(--radius-lg);padding:16px 18px 16px 44px;font-size:13.5px;line-height:1.5;margin:0}.cp-demo .pane.tip{border-color:var(--sky-600);background:#f0f9ff;color:var(--fg-notice)}.cp-demo .pane.warning{border-color:var(--amber-600);background:#fffbeb;color:var(--fg-warning)}.cp-demo .pane.tip p,.cp-demo .pane.warning p{margin:0}.cp-demo .pane.tip::before,.cp-demo .pane.warning::before{position:absolute;left:15px;top:15px;width:18px;height:18px;content:'';background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.cp-demo .pane.tip::before{color:var(--sky-600);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368.4 75.8 288.9 0 192.4 0S16.4 75.8 16.4 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c19.8 27.1 39.7 54.4 49.2 86.2h159.6zM192.4 512c44.2 0 80-35.8 80-80v-16H112.4v16c0 44.2 35.8 80 80 80zM160.4 176c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 35.3 28.7 64 64 64c8.8 0 16-7.2 16-16s-7.2-16-16-16c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368.4 75.8 288.9 0 192.4 0S16.4 75.8 16.4 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c19.8 27.1 39.7 54.4 49.2 86.2h159.6zM192.4 512c44.2 0 80-35.8 80-80v-16H112.4v16c0 44.2 35.8 80 80 80z'/%3E%3C/svg%3E")}.cp-demo .pane.warning::before{color:var(--amber-600);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")}.cp-demo .pane.dismissible{padding-right:44px}.cp-demo .tip-dismiss-btn{position:absolute;top:14px;right:14px;width:20px;height:20px;border:0;border-radius:var(--radius-md);background:transparent;color:currentColor;cursor:pointer;opacity:.6;font-size:15px;line-height:1}.cp-demo .tip-dismiss-btn:hover{opacity:1;background:rgb(from currentColor r g b / 12%)}.cp-demo .demo>h2{font-size:18px;font-weight:700;color:var(--gray-900);margin:0;letter-spacing:-.01em}.cp-demo .demo>hr{border:0;border-top:1px solid var(--border-hairline-medium);margin:4px 0}.cp-demo .line-break{display:flex;align-items:center;gap:10px;color:var(--fg-subtle);font-size:12px}.cp-demo .line-break::before,.cp-demo .line-break::after{content:'';flex:1;height:4px;border-radius:2px;background-image:repeating-linear-gradient(to right,var(--gray-300) 0 8px,transparent 8px 16px)}.cp-demo .fld-element .field-name{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-demo .fld-element .fld-element-label{margin:0;font-size:13px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-demo .sidebar{width:230px;background:transparent}.cp-demo .sidebar nav{padding-block:0;padding-inline:var(--s)}.cp-demo .sidebar nav ul{list-style:none;margin:0;padding:0}.cp-demo .sidebar nav li{position:relative}.cp-demo .sidebar .heading{line-height:1.2;margin:0;position:relative}.cp-demo .sidebar .heading:not(:first-child){margin-block-start:var(--m)}.cp-demo .sidebar .heading>span{display:inline-block;margin:0;padding-block:0;padding-inline:var(--xl) var(--m);position:relative;z-index:1;text-transform:uppercase;color:var(--fg-subtle);font-size:11px;font-weight:700}.cp-demo .sidebar .heading>ul{margin-block:var(--xs) 2px}.cp-demo .sidebar nav li a{display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;min-height:var(--xl);padding-block:7px;padding-inline:var(--xl) var(--m);margin-block-end:1px;color:var(--text-color);border-radius:var(--radius-lg);font-size:13.5px;text-decoration:none;cursor:pointer;word-break:break-word}.cp-demo .sidebar nav li:not(.has-subnav)>a:not(.sel):hover{background:var(--gray-200);text-decoration:none}.cp-demo .sidebar nav li:not(.has-subnav)>a.sel{background:var(--gray-500);color:#fff;cursor:default}.cp-demo .sidebar nav li a .badge{margin-inline:10px -4px;background:var(--fg-subtle);color:#fff;border-radius:var(--s);font-size:.625rem;height:1rem;line-height:1rem;min-width:1.1rem;padding-inline:var(--xs);text-align:center}.cp-demo .cp-sidebar-frame{display:grid;grid-template-columns:230px 1fr;gap:20px;background:var(--gray-100);border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);padding:18px}.cp-demo .cp-sidebar-frame .content-stub{background:#fff;border:1px solid var(--border-hairline-medium);border-radius:var(--radius-lg);padding:22px;color:var(--fg-subtle);font-size:13.5px}@media(max-width:880px){.cp-demo .grid2{grid-template-columns:1fr}.cp-demo .cp-sidebar-frame{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.cp-demo *{animation:none !important;transition:none !important}}.cp-demo .modal-stage{position:relative;background:var(--gray-200);border-radius:var(--radius-lg);padding:26px;overflow:hidden;min-height:150px;background-image:linear-gradient(rgba(11,19,36,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,19,36,.04) 1px,transparent 1px);background-size:16px 16px}.cp-demo .modal-stage.shaded::before{content:'';position:absolute;inset:0;background:rgba(11,19,36,.55);border-radius:var(--radius-lg)}.cp-demo .modal{position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:0 6px 30px rgba(11,19,36,.28);max-width:440px;margin:0 auto;overflow:hidden}.cp-demo .cpmodal-body{padding:20px;font-size:13.5px;color:var(--gray-700)}.cp-demo .cpmodal-content h1{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--gray-900)}.cp-demo .modal .body{padding:20px;font-size:13.5px;color:var(--gray-700)}.cp-demo .modal .body p,.cp-demo .cpmodal-content p{margin:0 0 8px}.cp-demo .modal .body p:last-child,.cp-demo .cpmodal-content p:last-child{margin:0}.cp-demo .cpmodal-footer,.cp-demo .modal .buttons.right{background:var(--gray-100);padding:8px 14px;box-shadow:inset 0 1px 0 var(--border-hairline-medium);display:flex;justify-content:flex-end;gap:8px;align-items:center}.cp-demo .modal.alert .body{padding-left:64px;position:relative}.cp-demo .modal.alert .body .alert-ic{position:absolute;left:18px;top:18px;width:34px;height:34px;color:var(--amber-600)}.cp-demo .modal.alert .body .alert-ic .ic{width:34px;height:34px}.cp-demo .hud{position:relative;background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 18px rgba(11,19,36,.24);max-width:230px;margin:0 auto}.cp-demo .hud::after{content:'';position:absolute;left:-8px;top:22px;border:8px solid transparent;border-right-color:#fff;filter:drop-shadow(-2px 0 1px rgba(11,19,36,.06))}.cp-demo .hud .hud-header{border-radius:var(--radius-md) var(--radius-md) 0 0;padding:9px 12px}.cp-demo .hud .hud-header h1{margin:0;font-size:13px;font-weight:600}.cp-demo .hud .main{padding:11px 12px;font-size:13px;color:var(--gray-700)}.cp-demo .elementselect{display:flex;flex-direction:column;gap:7px;max-width:430px}.cp-demo ul.chips{display:flex;align-items:flex-start;gap:var(--xs);list-style:none;margin:0;padding:0}.cp-demo ul.chips:not(.inline-chips){flex-direction:column}.cp-demo ul.chips.inline-chips{flex-direction:row;flex-wrap:wrap}.cp-demo ul.chips li{max-width:100%}.cp-demo ul.chips.chips-small li{height:2.125rem}.cp-demo .chip{position:relative;overflow:hidden;display:flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--radius-lg);background:#fff}.cp-demo .chip::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--gray-200)}.cp-demo .chip.small{flex-direction:row;--thumb-size:1.875rem}.cp-demo .chip .chip-content{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%;min-width:0}.cp-demo .chip .label{display:flex;align-items:center;gap:var(--xs);overflow:hidden;font-size:13px;color:var(--gray-800)}.cp-demo .chip .label .label-link{flex:1 1 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cp-demo .chip-actions{display:flex;align-items:center;gap:2px;margin-left:auto}.cp-demo .chip-actions .btn.action-btn{height:auto;min-height:0;padding:3px;border:0;background:0;color:var(--fg-subtle)}.cp-demo .chip-actions .btn .cp-icon{width:14px;height:14px;display:inline-flex}.cp-demo .chip-actions .btn .cp-icon svg{width:100%;height:100%;fill:currentColor}.cp-demo .inline-flex{display:inline-flex}.cp-demo .gap-xs{gap:var(--xs)}.cp-demo .chip-actions .btn.chromeless{height:auto;min-height:0;padding:3px;border:0;background:0;color:var(--fg-subtle)}.cp-demo .chip-actions .btn.chromeless .ic{width:14px;height:14px}.cp-demo .move-btn{cursor:grab}.cp-demo .flex{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cp-demo .btn.dashed{background:transparent;border:1px dashed rgb(96 125 159 / 50%);color:var(--gray-700)}.cp-demo .btn.dashed:hover{background:var(--gray-050)}.cp-demo .texticon{position:relative;display:inline-flex;align-items:center}.cp-demo .texticon>.ic{position:absolute;left:9px;width:14px;height:14px;color:var(--fg-subtle);pointer-events:none}.cp-demo .texticon .text{width:auto;padding-left:28px}.cp-demo ul.chips.inline-chips.chips-large{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}.cp-demo .chip.large{flex-direction:column;align-items:stretch;--thumb-size:120px;min-width:calc(16px + var(--thumb-size));width:100%;padding:8px}.cp-demo .chip.large>.thumb{width:100%;height:var(--thumb-size);border-radius:var(--radius-sm);background:var(--gray-150);display:flex;align-items:center;justify-content:center;color:var(--fg-subtle);overflow:hidden}.cp-demo .chip.large>.thumb .ic{width:26px;height:26px}.cp-demo .chip.large .label{font-size:12px}.cp-demo ul.cards,.cp-demo ul.card-grid{list-style:none;margin:0;padding:0}.cp-demo ul.cards{display:flex;flex-direction:column;gap:8px}.cp-demo ul.card-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.cp-demo .card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);background:#fff}.cp-demo .card::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--gray-200)}.cp-demo .card-titlebar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:28px;padding-inline:14px;background:var(--gray-100);border-radius:var(--radius-lg) var(--radius-lg) 0 0;user-select:none}.cp-demo .card-titlebar-label{font-size:.8em;color:var(--gray-700)}.cp-demo .card-titlebar .flex{gap:8px;flex-wrap:nowrap}.cp-demo .card-actions{display:flex;align-items:center;gap:2px}.cp-demo .card-main{display:grid;gap:8px;padding:8px 14px;width:100%;overflow:hidden;border-radius:0 0 var(--radius-lg) var(--radius-lg)}.cp-demo .card-heading{display:flex;flex-direction:row;align-items:center;gap:5px;min-height:1.375rem;font-size:13.5px;font-weight:600;color:var(--gray-800)}.cp-demo .card-body{display:flex;flex:1;flex-direction:column;gap:4px;font-size:12px;color:var(--fg-subtle)}.cp-demo .cp-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--fg-subtle)}.cp-demo .cp-icon.small .ic{width:13px;height:13px}