.x-demo{--x-border:var(--klic-semantic-color-border,#dce3ee);--x-muted:var(--klic-semantic-color-muted,#64748b);--x-panel:var(--klic-component-card-background-default,#fff);--x-accent:var(--klic-semantic-color-accent,#245fc2);width:100%;max-width:330px;min-width:0;color:var(--klic-semantic-color-text,#172b49);font:calc(13px * var(--klic-text-scale,1))/1.6 var(--klic-ui-font,inherit);overflow-wrap:anywhere;text-align:left;position:relative}
.x-demo *{box-sizing:border-box}.x-demo [hidden]{display:none!important}.x-demo svg{width:18px;height:18px;flex-shrink:0}.x-demo .btn{font-size:inherit;white-space:normal;min-height:32px;height:auto;padding:6px 11px;gap:6px}.x-demo :is(button,input,textarea,select,summary,a):focus-visible{outline:2px solid var(--x-accent);outline-offset:3px}.x-demo button:disabled{opacity:.45;cursor:not-allowed}.x-demo :is(input,textarea,select){accent-color:var(--x-accent);font:inherit;min-width:0;max-width:100%}.x-demo :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select){width:100%;border:1px solid var(--klic-component-input-border-default,var(--x-border));border-radius:var(--klic-custom-radius,8px);padding:9px 10px;background:var(--x-panel);color:inherit;min-height:var(--klic-component-input-size-default-height,34px)}.x-demo textarea{resize:vertical;display:block;max-height:300px}.x-demo input[type=range]{display:block;width:100%;min-height:30px;background:transparent;padding:0}.x-demo input[type=checkbox],.x-demo input[type=radio]{width:16px;height:16px;flex-shrink:0}.x-label{display:block;margin:0 0 7px;font-weight:600}.x-field{min-width:0}.x-field+.x-field{margin-top:12px}.x-hint{font-size:calc(12px * var(--klic-text-scale,1));line-height:1.6;color:var(--x-muted);margin-top:9px}.x-status{font-size:calc(12px * var(--klic-text-scale,1));line-height:1.6;color:var(--x-accent);margin-top:9px}.x-status:empty{display:none}.x-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.x-columns>.x-field+.x-field{margin-top:0}.x-stack{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.x-button-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.x-button-row button[aria-pressed=true]{background:var(--klic-ui-selected,#eaf0ff);border-color:var(--x-accent);color:var(--x-accent)}.x-demo fieldset{border:0;padding:0;min-width:0}.x-demo legend{font-weight:600;margin-bottom:10px}.x-options>label,.x-option-list>label{display:flex;align-items:center;gap:9px;margin:9px 0}.x-options details summary{cursor:pointer;padding:7px}.x-options input[type=range]{margin-bottom:8px}.x-options output{color:var(--x-accent);font-weight:600}.x-number{display:block;text-align:right;font-size:calc(28px * var(--klic-text-scale,1));font-weight:600;color:var(--x-accent)}
.x-rating,.x-segment{display:flex;gap:7px;flex-wrap:wrap}.x-rating legend,.x-segment legend{width:100%}.x-rating label,.x-segment label{position:relative}.x-rating input,.x-segment input{position:absolute;opacity:0}.x-rating span,.x-segment span{display:block;border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:5px 10px;color:var(--x-muted);cursor:pointer;text-align:center}.x-rating span{font-size:22px}.x-segment label{flex:1}.x-segment span{padding:8px 18px}.x-rating input:checked+span,.x-segment input:checked+span{color:var(--x-accent);border-color:var(--x-accent);background:var(--klic-ui-selected,#eaf0ff)}.x-rating input:focus-visible+span,.x-segment input:focus-visible+span{outline:2px solid var(--x-accent);outline-offset:3px}
.xc-combobox{isolation:isolate}.x-combo-options{position:absolute;top:68px;left:0;right:0;z-index:5;background:var(--x-panel);border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:5px;box-shadow:0 8px 24px #081a3520}.x-combo-options button{display:block;width:100%;padding:8px 10px;text-align:left;border:0;background:transparent;color:inherit;border-radius:4px}.x-combo-options button:hover,.x-combo-options button.x-active{background:var(--klic-ui-selected,#eaf0ff);color:var(--x-accent)}.x-dropdown{border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:9px 12px;background:var(--x-panel)}.x-dropdown summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}.x-dropdown summary span{color:var(--x-accent);font-weight:600}.x-option-list{padding-top:5px}.x-number-input{display:flex;align-items:center;gap:8px}.x-number-input input{text-align:center}.x-password{display:flex;gap:7px;align-items:center}.x-password input{flex:1}.x-password button{flex-shrink:0}.xc-input-otp input[data-otp-style]{letter-spacing:.4em;font:calc(24px * var(--klic-text-scale,1))/1.5 var(--klic-ui-mono,monospace);text-align:center;padding-left:14px}.x-search-results,.x-page-items{list-style:none;padding:0;margin:12px 0}.x-search-results li,.x-page-items li{padding:7px 0;border-bottom:1px solid var(--x-border)}.x-search-results li:last-child,.x-page-items li:last-child{border-bottom:0}.x-search-results .btn{width:100%;text-align:left;justify-content:flex-start;background:transparent;border-color:transparent}.x-input-group{display:flex;align-items:center;border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);overflow:hidden;background:var(--klic-ui-soft,#f3f6fb)}.x-input-group>span{padding:8px 10px;color:var(--x-muted);white-space:nowrap;font-size:calc(12px * var(--klic-text-scale,1))}.x-input-group input{border:0!important;border-left:1px solid var(--x-border)!important;border-radius:0!important}
.x-file,.x-dropzone{display:flex;align-items:center;flex-direction:column;gap:8px;padding:20px 12px;border:1px dashed var(--x-border);border-radius:var(--klic-custom-radius,8px);background:var(--x-panel)}.x-dropzone{background:var(--klic-ui-soft,#f3f6fb);border-color:var(--x-accent)}.x-file>svg,.x-dropzone>svg{width:24px;height:24px;color:var(--x-accent)}.x-demo input[type=file]{width:100%;font-size:calc(12px * var(--klic-text-scale,1))}.x-file small,.x-dropzone small{color:var(--x-muted);font-size:calc(11px * var(--klic-text-scale,1));text-align:center}.x-file-results{margin:8px 0 0;padding-left:17px;color:var(--x-muted);font-size:calc(12px * var(--klic-text-scale,1))}.x-chip-list{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.x-chip,.x-tag{display:inline-flex;align-items:center;gap:6px;background:var(--klic-ui-selected,#eaf0ff);border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:4px 9px;color:var(--x-accent);font-size:calc(12px * var(--klic-text-scale,1))}.x-chip button{background:none;border:0;color:inherit;min-width:22px;min-height:24px;cursor:pointer;font-size:18px}.x-tag-outline{background:transparent;color:inherit}.x-tag-amber{background:var(--klic-ui-amber-soft,#fff4df);color:var(--klic-ui-amber,#986916)}.xc-mentions .x-button-row{margin-top:8px}.x-transfer{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);gap:7px;align-items:center}.x-transfer fieldset{padding:10px!important;border:1px solid var(--x-border)!important;border-radius:var(--klic-custom-radius,8px);align-self:stretch;min-height:120px}.x-transfer fieldset label{display:flex;align-items:center;gap:5px;margin:8px 0}.x-transfer legend{font-size:calc(12px * var(--klic-text-scale,1));margin:0 2px}.x-transfer>div{display:flex;flex-direction:column;gap:7px}.x-transfer .btn{padding:3px}.x-tree-indent{padding-left:22px}.x-tree-indent label{display:flex;gap:8px;align-items:center;margin:8px 0}.xc-color-picker .x-options label span{display:flex;align-items:center;gap:8px}.xc-color-picker .x-options label span:before{content:'';background:var(--swatch);border-radius:50%;display:block;width:23px;height:23px}.xc-color-picker [data-choice-result]{border-left:5px solid var(--chosen-blue,#2641b9);padding-left:10px}
.x-profile{display:flex;gap:14px;align-items:center}.x-profile .root-person{width:56px;height:56px;font-size:18px;background-color:var(--klic-ui-selected,#eaf0ff)}.x-profile strong{display:block;font-size:calc(16px * var(--klic-text-scale,1))}.x-profile small{color:var(--x-muted)}.x-avatar-group{display:flex;align-items:center;padding:10px 0 10px 7px}.x-avatar-group .root-person,.x-avatar-group>span{width:46px;height:46px;border:3px solid var(--x-panel);margin-left:-7px;background-color:var(--klic-ui-selected,#eaf0ff);display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:calc(12px * var(--klic-text-scale,1))}.x-type>small{display:block;color:var(--x-muted);font-size:calc(11px * var(--klic-text-scale,1))}.x-type h3{font-size:calc(23px * var(--klic-text-scale,1));line-height:1.4;letter-spacing:-.04em;margin:9px 0}.x-type p{margin-bottom:12px}
.x-line-chart{display:block!important;width:100%!important;height:auto!important;max-height:125px;color:var(--x-accent)}.x-chart-grid{stroke:var(--x-border);stroke-width:1;fill:none}.x-chart-area{fill:var(--klic-ui-selected,#eaf0ff)}.x-chart-line{stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}.xc-sparkline .x-line-chart{max-height:72px}.x-bar-chart{height:115px;display:flex;gap:12px;align-items:flex-end;padding-bottom:21px}.x-bar-chart>div{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}.x-bar-chart span{display:block;width:100%;background:var(--x-accent);border-radius:4px 4px 0 0;opacity:.85}.x-bar-chart>div:nth-child(even) span{opacity:.55}.x-bar-chart small{position:absolute;bottom:-23px;left:0;width:100%;text-align:center;color:var(--x-muted);font-size:calc(11px * var(--klic-text-scale,1))}.x-donut{height:130px;width:130px;border-radius:50%;background:conic-gradient(var(--klic-component-block-chart-series-1,var(--x-accent)) 0 50%,var(--klic-component-block-chart-series-2,#647bc1) 50% 80%,var(--klic-component-block-chart-series-3,#a8bbdc) 80% 100%);display:grid;place-items:center;margin:0 auto 10px}.x-donut strong{height:86px;width:86px;border-radius:50%;background:var(--x-panel);display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:calc(25px * var(--klic-text-scale,1))}.x-donut small{font-size:calc(10px * var(--klic-text-scale,1));font-weight:400;color:var(--x-muted)}.x-legend{list-style:none;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0;font-size:calc(11px * var(--klic-text-scale,1))}.x-legend b{margin-left:4px}.x-quote{border-left:3px solid var(--x-accent);padding:8px 0 8px 18px}.x-quote p{font-size:calc(17px * var(--klic-text-scale,1));line-height:1.7}.x-quote cite{display:block;font-size:calc(11px * var(--klic-text-scale,1));font-style:normal;color:var(--x-muted);margin-top:12px}.x-code-head{display:flex;align-items:center;justify-content:space-between;font:calc(11px * var(--klic-text-scale,1)) var(--klic-ui-mono);background:var(--klic-ui-soft,#f3f6fb);padding:7px 10px;border:1px solid var(--x-border);border-bottom:0;border-radius:8px 8px 0 0}.x-code{margin:0;padding:14px;border:1px solid var(--x-border);background:var(--x-panel);border-radius:0 0 8px 8px;overflow:auto;font:calc(12px * var(--klic-text-scale,1))/1.8 var(--klic-ui-mono,monospace)}.x-demo kbd{border:1px solid var(--x-border);border-bottom-width:3px;background:var(--x-panel);border-radius:5px;display:inline-block;min-width:25px;padding:2px 6px;text-align:center;font:calc(12px * var(--klic-text-scale,1)) var(--klic-ui-mono)}.x-demo hr{border:0;border-top:1px solid var(--x-border);width:100%}.x-aspect{aspect-ratio:16/9;border-radius:var(--klic-custom-radius,8px);overflow:hidden;position:relative;background:var(--klic-ui-soft,#f3f6fb)}.x-aspect img{width:100%;height:100%;object-fit:cover}.x-aspect>span{position:absolute;bottom:10px;left:10px;background:#0b1c38c9;color:white;padding:3px 7px;border-radius:4px;font-family:var(--klic-ui-mono)}.x-figure img,.x-carousel img{width:100%;height:135px;object-fit:cover;border-radius:var(--klic-custom-radius,8px)}.x-figure figcaption,.x-carousel figcaption{font-size:calc(11px * var(--klic-text-scale,1));color:var(--x-muted);margin-top:6px}.x-carousel-tools{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:9px}.x-carousel-tools>span{font:calc(11px * var(--klic-text-scale,1)) var(--klic-ui-mono)}
.x-skeleton{height:12px;border-radius:5px;background:var(--klic-ui-border-strong,#d5dfed);margin:12px 0;animation:x-pulse 1.7s ease-in-out infinite}.x-skeleton.short{width:65%}.x-skeleton-avatar{width:38px;height:38px;border-radius:50%}.x-spinner-row{display:flex;align-items:center;gap:14px}.x-spinner{width:25px;height:25px;display:inline-block;border:3px solid var(--x-border);border-top-color:var(--x-accent);border-radius:50%;flex-shrink:0;animation:x-spin .9s linear infinite}.x-stat small{color:var(--x-muted)}.x-stat>strong{display:block;font:600 calc(39px * var(--klic-text-scale,1))/1.4 var(--klic-ui-font,inherit)}.x-stat em{font-size:calc(15px * var(--klic-text-scale,1));font-style:normal;font-weight:400}.x-stat>span{display:flex;gap:5px;align-items:center;color:var(--x-accent);font-size:calc(12px * var(--klic-text-scale,1))}.x-stat>p{font-size:calc(11px * var(--klic-text-scale,1));color:var(--x-muted);margin-top:12px}.x-descriptions>div{display:grid;grid-template-columns:85px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--x-border)}.x-descriptions dt{color:var(--x-muted)}.x-descriptions dd{margin:0}.x-list{list-style:none;padding:0}.x-list>li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--x-border)}.x-list>li>span{display:flex;gap:9px;align-items:center}.x-timeline{list-style:none;padding:0 0 0 7px}.x-timeline li{position:relative;border-left:1px solid var(--x-border);padding:0 0 17px 20px}.x-timeline li:last-child{padding-bottom:0}.x-timeline li:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--x-accent);position:absolute;left:-5px;top:5px}.x-timeline time{display:block;font-size:calc(11px * var(--klic-text-scale,1));color:var(--x-muted)}.x-timeline strong{font-weight:500}.x-file-tree summary{padding:5px 0;cursor:pointer}.x-file-tree svg{width:15px;height:15px;vertical-align:middle;margin-right:5px}.x-file-tree details>div,.x-file-tree details>p{padding-left:20px}.x-file-tree p{font-family:var(--klic-ui-mono);font-size:calc(11px * var(--klic-text-scale,1));padding:5px 0 5px 20px}
.x-calendar{max-width:280px;margin:auto}.x-calendar-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.x-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center;font-size:calc(11px * var(--klic-text-scale,1))}.x-calendar-grid>span{color:var(--x-muted);padding:3px 0}.x-calendar-grid>button{background:transparent;color:inherit;border:1px solid transparent;border-radius:var(--klic-custom-radius,6px);padding:3px 0;min-height:26px;font:inherit;cursor:pointer}.x-calendar-grid>button:hover{background:var(--klic-ui-soft,#f3f6fb)}.x-calendar-grid>button[aria-pressed=true]{background:var(--x-accent);color:var(--klic-semantic-color-on-accent,#fff)}.x-empty{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;padding:8px}.x-empty>svg{width:35px;height:35px;color:var(--x-accent);margin-bottom:6px}.x-empty>p{color:var(--x-muted);font-size:calc(12px * var(--klic-text-scale,1))}.x-icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 8px;text-align:center}.x-icon-grid>div{min-width:0}.x-icon-grid svg{display:block;margin:0 auto 5px;width:22px;height:22px;color:var(--x-accent)}.x-icon-grid small{font-size:calc(9px * var(--klic-text-scale,1));color:var(--x-muted);overflow-wrap:anywhere}.x-scroll{max-height:160px;overflow:auto;border:1px solid var(--x-border);padding:0 14px;border-radius:var(--klic-custom-radius,8px);overscroll-behavior:contain}.x-scroll p{padding:10px 0;border-bottom:1px solid var(--x-border)}.x-scroll strong{color:var(--x-muted);font:calc(11px * var(--klic-text-scale,1)) var(--klic-ui-mono);margin-right:10px}.x-resize{resize:horizontal;overflow:auto;width:240px;min-width:min(140px,100%);max-width:100%;padding:15px;border:1px solid var(--x-border);background:var(--x-panel);border-radius:var(--klic-custom-radius,8px);margin-bottom:10px}.x-resize p{color:var(--x-muted);margin-top:6px;font-size:calc(12px * var(--klic-text-scale,1))}.x-split{display:grid;grid-template-columns:minmax(0,var(--split)) minmax(0,1fr);border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);overflow:hidden;min-height:100px;margin-bottom:10px}.x-split>div{padding:14px 10px;background:var(--x-panel)}.x-split>div:first-child{background:var(--klic-ui-soft,#f3f6fb);border-right:3px solid var(--x-accent)}.x-split small{font-size:calc(11px * var(--klic-text-scale,1));color:var(--x-muted)}.x-watermark{position:relative;overflow:hidden;border:1px solid var(--x-border);padding:25px 20px;min-height:150px;background:var(--x-panel)}.x-watermark>span{position:absolute;inset:-25px -20px;transform:rotate(-20deg);font-size:23px;line-height:2;opacity:.11;color:var(--x-accent);pointer-events:none;white-space:nowrap}.x-watermark p{margin-top:10px;color:var(--x-muted);font-size:calc(12px * var(--klic-text-scale,1))}
.x-alert{border:1px solid var(--x-border);background:var(--klic-ui-selected,#eaf0ff);border-radius:var(--klic-custom-radius,8px);padding:15px;display:flex;align-items:flex-start;gap:11px}.x-alert>svg{color:var(--x-accent);margin-top:2px}.x-alert strong{font-weight:600}.x-alert p{margin-top:5px;color:var(--x-muted);font-size:calc(12px * var(--klic-text-scale,1))}.x-confirm{margin:auto;max-width:calc(100vw - 36px);width:400px;border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,12px);background:var(--x-panel);color:inherit;padding:26px;box-shadow:0 20px 80px #0003;font:inherit}.x-confirm::backdrop{background:#0b1c3866}.x-confirm h3{font-size:calc(19px * var(--klic-text-scale,1));margin-bottom:12px}.x-confirm p{line-height:1.8;color:var(--x-muted);font-size:calc(13px * var(--klic-text-scale,1))}.x-confirm form{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.x-tooltip-wrap{position:relative;display:inline-block}.x-tooltip-wrap [role=tooltip]{display:block;visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 10px);left:0;z-index:10;width:220px;max-width:80vw;padding:9px 12px;background:var(--klic-semantic-color-text,#172b49);color:var(--klic-semantic-color-surface,#fff);border-radius:6px;font-size:calc(12px * var(--klic-text-scale,1));pointer-events:none}.x-tooltip-wrap:hover [role=tooltip],.x-tooltip-wrap:focus-within [role=tooltip]{opacity:1;visibility:visible}.x-tooltip-dismissed [role=tooltip]{visibility:hidden!important;opacity:0!important}.x-hovercard summary{display:flex;align-items:center;gap:9px;cursor:pointer}.x-hovercard .root-person{width:32px;height:32px;background-color:var(--klic-ui-selected,#eaf0ff)}.x-hovercard>div{margin-top:12px;border:1px solid var(--x-border);background:var(--x-panel);padding:14px;border-radius:var(--klic-custom-radius,8px)}.x-hovercard small,.x-hovercard p{color:var(--x-muted)}
.x-popover{position:fixed;inset:0;margin:auto;max-width:calc(100vw - 32px);width:260px;border:1px solid var(--klic-semantic-color-border,#dce3ee);padding:10px;border-radius:var(--klic-custom-radius,8px);background:var(--klic-semantic-color-panel,#fff);color:var(--klic-semantic-color-text,#172b49);box-shadow:0 12px 40px #081a3530;font:calc(13px * var(--klic-text-scale,1))/1.6 var(--klic-ui-font,inherit)}.x-popover:popover-open{display:flex;flex-direction:column;gap:6px}.x-popover .btn{justify-content:flex-start}.x-popover>p{font-size:calc(12px * var(--klic-text-scale,1));color:var(--klic-semantic-color-muted,#64748b);margin:5px 0}.x-context-target{border:1px dashed var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:18px;margin-bottom:12px;display:flex;align-items:center;gap:9px;background:var(--x-panel)}.x-notification>strong{display:flex;justify-content:space-between;font-size:calc(13px * var(--klic-text-scale,1))}.x-notification>strong span{color:var(--x-accent)}.x-notification article{padding:11px 0;border-bottom:1px solid var(--x-border);display:flex;align-items:center;justify-content:space-between;gap:9px}.x-notification article[data-unread=false]{opacity:.6}.x-notification article p{font-size:calc(12px * var(--klic-text-scale,1))}.x-notification .btn{flex-shrink:0;font-size:calc(11px * var(--klic-text-scale,1));padding:4px 7px}.x-banner{background:var(--klic-ui-selected,#eaf0ff);border:1px solid var(--x-border);padding:10px;border-radius:var(--klic-custom-radius,8px);display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:12px}.x-banner>span{display:flex;gap:7px;align-items:center}.x-banner>span svg{color:var(--x-accent)}.x-loading-region{position:relative;border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:18px}.x-loading-region p{margin-bottom:14px}.x-loading-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--x-panel) 90%,transparent);border-radius:inherit;z-index:2;pointer-events:none}
.x-breadcrumb{list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0}.x-breadcrumb li+li:before{content:'/';color:var(--x-muted);margin-right:8px}.x-breadcrumb a{color:var(--x-muted)}.x-breadcrumb [aria-current]{color:var(--x-accent)}.xc-pagination .x-button-row{justify-content:center}.xc-pagination [aria-current=page]{background:var(--x-accent);color:var(--klic-semantic-color-on-accent,#fff)}.x-menu-bar{display:flex;gap:5px;border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);padding:5px;flex-wrap:wrap}.x-menu-bar summary{padding:7px 13px;cursor:pointer;border-radius:5px}.x-menu-bar details[open]>summary{background:var(--klic-ui-selected,#eaf0ff);color:var(--x-accent)}.x-menu-bar details>div{padding:10px 5px}.x-navigation,.x-bottom-nav{display:flex;align-items:stretch;border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);background:var(--x-panel);padding:5px}.x-navigation a,.x-bottom-nav a{display:flex;align-items:center;justify-content:center;flex:1;gap:7px;padding:9px 7px;border-radius:5px;color:var(--x-muted)}.x-navigation [aria-current=page],.x-bottom-nav [aria-current=page]{background:var(--klic-ui-selected,#eaf0ff);color:var(--x-accent)}.x-bottom-nav a{flex-direction:column;gap:5px;font-size:calc(11px * var(--klic-text-scale,1))}.x-steps{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:0;margin-bottom:18px}.x-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}.x-steps li>span{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--x-border);border-radius:50%;background:var(--x-panel);color:var(--x-muted)}.x-steps li[aria-current]>span{background:var(--x-accent);color:var(--klic-semantic-color-on-accent,#fff);border-color:var(--x-accent)}.x-steps small{font-size:calc(11px * var(--klic-text-scale,1))}.x-step-form .x-button-row{justify-content:space-between;margin-top:16px}.x-anchor-nav{display:flex;gap:15px;padding-bottom:10px}.x-anchor-nav a{color:var(--x-accent)}.x-anchor-content{max-height:130px;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--x-border)}.x-anchor-content section{padding:15px 0;scroll-margin-top:100px}.x-anchor-content h4{font-weight:600;margin-bottom:6px}.x-anchor-content p{color:var(--x-muted)}.x-button-group{display:flex;flex-wrap:wrap}.x-button-group .btn{border-radius:0;margin-left:-1px}.x-button-group .btn:first-child{border-radius:var(--klic-custom-radius,8px) 0 0 var(--klic-custom-radius,8px);margin-left:0}.x-button-group .btn:last-child{border-radius:0 var(--klic-custom-radius,8px) var(--klic-custom-radius,8px) 0}.x-collapsible{border:1px solid var(--x-border);border-radius:var(--klic-custom-radius,8px);background:var(--x-panel)}.x-collapsible summary{display:flex;align-items:center;gap:8px;padding:12px;cursor:pointer;list-style:none}.x-collapsible[open] summary svg{transform:rotate(90deg)}.x-collapsible>div{border-top:1px solid var(--x-border);padding:12px 16px;color:var(--x-muted)}.x-collapsible p+p{margin-top:7px}
.x-demo-context{border:1px solid var(--klic-semantic-color-border,#dce3ee);background:var(--klic-semantic-color-panel,#fff);padding:20px;border-radius:var(--klic-custom-radius,8px);max-width:430px;width:100%}.x-context-eyebrow{font:10px var(--klic-ui-mono,monospace);color:var(--klic-semantic-color-muted,#64748b);letter-spacing:.08em;margin-bottom:18px}.x-narrow-example{width:260px;max-width:100%;container-type:inline-size}.x-narrow-example>.x-hint{margin-bottom:15px}.component-guide-live:has(.x-demo){display:flex;justify-content:center;align-items:flex-start;padding:24px!important;min-height:120px}.specimen:has(>.x-demo){height:250px;overflow:hidden;align-items:center}.specimen>.x-demo{max-width:300px}.specimen:has(.xc-combobox){overflow:visible;z-index:1}.specimen .x-combo-options{max-height:130px;overflow:auto}.specimen .xc-form{font-size:calc(12px * var(--klic-text-scale,1))}.specimen .xc-form .x-label{margin-bottom:3px}.specimen .xc-form .x-field+.x-field{margin-top:7px}.specimen .xc-form .btn{margin-top:9px}.xc-form .btn{margin-top:14px}.specimen .x-calendar-grid{font-size:calc(10px * var(--klic-text-scale,1));gap:1px}.specimen .x-calendar-grid>button{min-height:22px}.specimen .x-calendar-head{margin-bottom:4px}.specimen .x-file,.specimen .x-dropzone{padding:11px}.specimen .x-donut{height:112px;width:112px}.specimen .x-donut strong{height:74px;width:74px}.preview-workarea:has(.x-demo){padding:36px 24px;min-height:350px}.specimen-content:has(.x-demo){width:100%;display:flex;justify-content:center;max-width:100%}.content-tabs{overflow-x:auto;overscroll-behavior-inline:contain}.content-tab{flex-shrink:0}.catalog-toolbar{flex-wrap:wrap}.filter-tabs{flex-wrap:wrap}.catalog-reference-note{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px;font-size:calc(12px * var(--klic-text-scale,1));color:var(--klic-semantic-color-muted,#64748b)}.catalog-reference-note a{color:var(--klic-semantic-color-accent,#245fc2);text-underline-offset:3px}.catalog-reference-note strong{color:var(--klic-semantic-color-text,#172b49);font-weight:500}.component-new-label{font:9px var(--klic-ui-mono,monospace);letter-spacing:.04em;color:var(--klic-semantic-color-accent,#245fc2);margin-left:6px}
@keyframes x-spin{to{transform:rotate(360deg)}}@keyframes x-pulse{50%{opacity:.45}}
@container (max-width:280px){.x-demo .x-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.specimen:has(>.x-demo){height:250px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.x-columns{grid-template-columns:minmax(0,1fr)}.component-guide-live:has(.x-demo){padding:18px 12px!important}.x-demo .btn{padding:6px 9px}.x-input-group{flex-wrap:wrap}.x-input-group>span{width:100%}.x-input-group input{border-left:0!important;border-top:1px solid var(--x-border)!important}}
@media(max-width:560px){.gallery{grid-template-columns:minmax(0,1fr)}.specimen:has(>.x-demo){height:auto;min-height:240px;padding:42px 24px 24px}.specimen .x-calendar-grid>button{min-height:30px}.component-title>span{display:inline}.x-confirm{width:calc(100vw - 36px)}}
:root[data-narrow=true] .gallery{grid-template-columns:minmax(0,1fr)}
@media(prefers-reduced-motion:reduce){.x-spinner,.x-skeleton{animation:none}}
@media(forced-colors:active){.x-demo button,.x-demo input,.x-demo textarea,.x-demo select,.x-tag,.x-chip{border:1px solid ButtonText}.x-bar-chart span{background:Highlight}.x-donut{border:12px solid Highlight}}
.gallery .specimen{height:250px}.xc-cascader .x-columns>.x-field{margin-top:0}.filter-count{opacity:.55;margin-left:4px;font-size:10px}

.x-line-chart{color:var(--klic-component-block-chart-series-1,var(--x-accent))}.x-bar-chart span{background:var(--klic-component-block-chart-series-1,var(--x-accent))}.x-bar-chart>div:nth-child(even) span{background:var(--klic-component-block-chart-series-2,var(--x-accent));opacity:1}.x-demo .btn{min-height:var(--klic-component-button-size-default-height,32px)}.x-stack,.x-button-row{gap:var(--klic-component-field-spacing-internal,8px)}

.x-confirm{max-width:calc(100vw / var(--klic-ui-scale,1) - 36px);max-height:calc(100dvh / var(--klic-ui-scale,1) - 36px);overflow:auto}.x-popover{max-width:calc(100vw / var(--klic-ui-scale,1) - 32px)}
/* Grow working previews with their content instead of clipping enlarged controls. */
.gallery .specimen:has(>.x-demo){height:auto;min-height:250px}
.x-demo [aria-invalid=true]{border-color:var(--klic-semantic-color-danger,#c53e4a)!important}
.x-demo [aria-invalid=true]:focus-visible{outline-color:var(--klic-semantic-color-danger,#c53e4a)}