:root{--swal2-outline: 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-container-padding: 0.625em;--swal2-backdrop: rgba(0, 0, 0, 0.4);--swal2-backdrop-transition: background-color 0.15s;--swal2-width: 32em;--swal2-padding: 0 0 1.25em;--swal2-border: none;--swal2-border-radius: 0.3125rem;--swal2-background: white;--swal2-color: #545454;--swal2-show-animation: swal2-show 0.3s;--swal2-hide-animation: swal2-hide 0.15s forwards;--swal2-icon-zoom: 1;--swal2-icon-animations: true;--swal2-title-padding: 0.8em 1em 0;--swal2-html-container-padding: 1em 1.6em 0.3em;--swal2-input-border: 1px solid #d9d9d9;--swal2-input-border-radius: 0.1875em;--swal2-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-background: transparent;--swal2-input-transition: border-color 0.2s, box-shadow 0.2s;--swal2-input-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-focus-border: 1px solid #b4dbed;--swal2-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-progress-step-background: #add8e6;--swal2-validation-message-background: #f0f0f0;--swal2-validation-message-color: #666;--swal2-footer-border-color: #eee;--swal2-footer-background: transparent;--swal2-footer-color: inherit;--swal2-timer-progress-bar-background: rgba(0, 0, 0, 0.3);--swal2-close-button-position: initial;--swal2-close-button-inset: auto;--swal2-close-button-font-size: 2.5em;--swal2-close-button-color: #ccc;--swal2-close-button-transition: color 0.2s, box-shadow 0.2s;--swal2-close-button-outline: initial;--swal2-close-button-box-shadow: inset 0 0 0 3px transparent;--swal2-close-button-focus-box-shadow: inset var(--swal2-outline);--swal2-close-button-hover-transform: none;--swal2-actions-justify-content: center;--swal2-actions-width: auto;--swal2-actions-margin: 1.25em auto 0;--swal2-actions-padding: 0;--swal2-actions-border-radius: 0;--swal2-actions-background: transparent;--swal2-action-button-transition: background-color 0.2s, box-shadow 0.2s;--swal2-action-button-hover: black 10%;--swal2-action-button-active: black 10%;--swal2-confirm-button-box-shadow: none;--swal2-confirm-button-border-radius: 0.25em;--swal2-confirm-button-background-color: #7066e0;--swal2-confirm-button-color: #fff;--swal2-deny-button-box-shadow: none;--swal2-deny-button-border-radius: 0.25em;--swal2-deny-button-background-color: #dc3741;--swal2-deny-button-color: #fff;--swal2-cancel-button-box-shadow: none;--swal2-cancel-button-border-radius: 0.25em;--swal2-cancel-button-background-color: #6e7881;--swal2-cancel-button-color: #fff;--swal2-toast-show-animation: swal2-toast-show 0.5s;--swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards;--swal2-toast-border: none;--swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075), 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075)}[data-swal2-theme=dark]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}@media(prefers-color-scheme: dark){[data-swal2-theme=auto]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto !important}body.swal2-no-backdrop .swal2-container{background-color:rgba(0,0,0,0) !important;pointer-events:none}body.swal2-no-backdrop .swal2-container .swal2-popup{pointer-events:all}body.swal2-no-backdrop .swal2-container .swal2-modal{box-shadow:0 0 10px var(--swal2-backdrop)}body.swal2-toast-shown .swal2-container{box-sizing:border-box;width:360px;max-width:100%;background-color:rgba(0,0,0,0);pointer-events:none}body.swal2-toast-shown .swal2-container.swal2-top{inset:0 auto auto 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{inset:0 0 auto auto}body.swal2-toast-shown .swal2-container.swal2-top-start,body.swal2-toast-shown .swal2-container.swal2-top-left{inset:0 auto auto 0}body.swal2-toast-shown .swal2-container.swal2-center-start,body.swal2-toast-shown .swal2-container.swal2-center-left{inset:50% auto auto 0;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{inset:50% auto auto 50%;transform:translate(-50%, -50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{inset:50% 0 auto auto;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-start,body.swal2-toast-shown .swal2-container.swal2-bottom-left{inset:auto auto 0 0}body.swal2-toast-shown .swal2-container.swal2-bottom{inset:auto auto 0 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{inset:auto 0 0 auto}@media print{body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow-y:scroll !important}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown) .swal2-container{position:static !important}}div:where(.swal2-container){display:grid;position:fixed;z-index:1060;inset:0;box-sizing:border-box;grid-template-areas:"top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";grid-template-rows:minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);height:100%;padding:var(--swal2-container-padding);overflow-x:hidden;transition:var(--swal2-backdrop-transition);-webkit-overflow-scrolling:touch}div:where(.swal2-container).swal2-backdrop-show,div:where(.swal2-container).swal2-noanimation{background:var(--swal2-backdrop)}div:where(.swal2-container).swal2-backdrop-hide{background:rgba(0,0,0,0) !important}div:where(.swal2-container).swal2-top-start,div:where(.swal2-container).swal2-center-start,div:where(.swal2-container).swal2-bottom-start{grid-template-columns:minmax(0, 1fr) auto auto}div:where(.swal2-container).swal2-top,div:where(.swal2-container).swal2-center,div:where(.swal2-container).swal2-bottom{grid-template-columns:auto minmax(0, 1fr) auto}div:where(.swal2-container).swal2-top-end,div:where(.swal2-container).swal2-center-end,div:where(.swal2-container).swal2-bottom-end{grid-template-columns:auto auto minmax(0, 1fr)}div:where(.swal2-container).swal2-top-start>.swal2-popup{align-self:start}div:where(.swal2-container).swal2-top>.swal2-popup{grid-column:2;place-self:start center}div:where(.swal2-container).swal2-top-end>.swal2-popup,div:where(.swal2-container).swal2-top-right>.swal2-popup{grid-column:3;place-self:start end}div:where(.swal2-container).swal2-center-start>.swal2-popup,div:where(.swal2-container).swal2-center-left>.swal2-popup{grid-row:2;align-self:center}div:where(.swal2-container).swal2-center>.swal2-popup{grid-column:2;grid-row:2;place-self:center center}div:where(.swal2-container).swal2-center-end>.swal2-popup,div:where(.swal2-container).swal2-center-right>.swal2-popup{grid-column:3;grid-row:2;place-self:center end}div:where(.swal2-container).swal2-bottom-start>.swal2-popup,div:where(.swal2-container).swal2-bottom-left>.swal2-popup{grid-column:1;grid-row:3;align-self:end}div:where(.swal2-container).swal2-bottom>.swal2-popup{grid-column:2;grid-row:3;place-self:end center}div:where(.swal2-container).swal2-bottom-end>.swal2-popup,div:where(.swal2-container).swal2-bottom-right>.swal2-popup{grid-column:3;grid-row:3;place-self:end end}div:where(.swal2-container).swal2-grow-row>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-column:1/4;width:100%}div:where(.swal2-container).swal2-grow-column>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-row:1/4;align-self:stretch}div:where(.swal2-container).swal2-no-transition{transition:none !important}div:where(.swal2-container)[popover]{width:auto;border:0}div:where(.swal2-container) div:where(.swal2-popup){display:none;position:relative;box-sizing:border-box;grid-template-columns:minmax(0, 100%);width:var(--swal2-width);max-width:100%;padding:var(--swal2-padding);border:var(--swal2-border);border-radius:var(--swal2-border-radius);background:var(--swal2-background);color:var(--swal2-color);font-family:inherit;font-size:1rem;container-name:swal2-popup}div:where(.swal2-container) div:where(.swal2-popup):focus{outline:none}div:where(.swal2-container) div:where(.swal2-popup).swal2-loading{overflow-y:hidden}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable{cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable div:where(.swal2-icon){cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging{cursor:grabbing}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging div:where(.swal2-icon){cursor:grabbing}div:where(.swal2-container) h2:where(.swal2-title){position:relative;max-width:100%;margin:0;padding:var(--swal2-title-padding);color:inherit;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;overflow-wrap:break-word;cursor:initial}div:where(.swal2-container) div:where(.swal2-actions){display:flex;z-index:1;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:var(--swal2-actions-justify-content);width:var(--swal2-actions-width);margin:var(--swal2-actions-margin);padding:var(--swal2-actions-padding);border-radius:var(--swal2-actions-border-radius);background:var(--swal2-actions-background)}div:where(.swal2-container) div:where(.swal2-loader){display:none;align-items:center;justify-content:center;width:2.2em;height:2.2em;margin:0 1.875em;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border-width:.25em;border-style:solid;border-radius:100%;border-color:#2778c4 rgba(0,0,0,0) #2778c4 rgba(0,0,0,0)}div:where(.swal2-container) button:where(.swal2-styled){margin:.3125em;padding:.625em 1.1em;transition:var(--swal2-action-button-transition);border:none;box-shadow:0 0 0 3px rgba(0,0,0,0);font-weight:500}div:where(.swal2-container) button:where(.swal2-styled):not([disabled]){cursor:pointer}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){border-radius:var(--swal2-confirm-button-border-radius);background:initial;background-color:var(--swal2-confirm-button-background-color);box-shadow:var(--swal2-confirm-button-box-shadow);color:var(--swal2-confirm-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):active{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){border-radius:var(--swal2-deny-button-border-radius);background:initial;background-color:var(--swal2-deny-button-background-color);box-shadow:var(--swal2-deny-button-box-shadow);color:var(--swal2-deny-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):active{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){border-radius:var(--swal2-cancel-button-border-radius);background:initial;background-color:var(--swal2-cancel-button-background-color);box-shadow:var(--swal2-cancel-button-box-shadow);color:var(--swal2-cancel-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):active{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):focus-visible{outline:none;box-shadow:var(--swal2-action-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-styled)[disabled]:not(.swal2-loading){opacity:.4}div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-footer){margin:1em 0 0;padding:1em 1em 0;border-top:1px solid var(--swal2-footer-border-color);background:var(--swal2-footer-background);color:var(--swal2-footer-color);font-size:1em;text-align:center;cursor:initial}div:where(.swal2-container) .swal2-timer-progress-bar-container{position:absolute;right:0;bottom:0;left:0;grid-column:auto !important;overflow:hidden;border-bottom-right-radius:var(--swal2-border-radius);border-bottom-left-radius:var(--swal2-border-radius)}div:where(.swal2-container) div:where(.swal2-timer-progress-bar){width:100%;height:.25em;background:var(--swal2-timer-progress-bar-background)}div:where(.swal2-container) img:where(.swal2-image){max-width:100%;margin:2em auto 1em;cursor:initial}div:where(.swal2-container) button:where(.swal2-close){position:var(--swal2-close-button-position);inset:var(--swal2-close-button-inset);z-index:2;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-top:0;margin-right:0;margin-bottom:-1.2em;padding:0;overflow:hidden;transition:var(--swal2-close-button-transition);border:none;border-radius:var(--swal2-border-radius);outline:var(--swal2-close-button-outline);background:rgba(0,0,0,0);color:var(--swal2-close-button-color);font-family:monospace;font-size:var(--swal2-close-button-font-size);cursor:pointer;justify-self:end}div:where(.swal2-container) button:where(.swal2-close):hover{transform:var(--swal2-close-button-hover-transform);background:rgba(0,0,0,0);color:#f27474}div:where(.swal2-container) button:where(.swal2-close):focus-visible{outline:none;box-shadow:var(--swal2-close-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-html-container){z-index:1;justify-content:center;margin:0;padding:var(--swal2-html-container-padding);overflow:auto;color:inherit;font-size:1.125em;font-weight:normal;line-height:normal;text-align:center;overflow-wrap:break-word;word-break:break-word;cursor:initial}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea),div:where(.swal2-container) select:where(.swal2-select),div:where(.swal2-container) div:where(.swal2-radio),div:where(.swal2-container) label:where(.swal2-checkbox){margin:1em 2em 3px}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea){box-sizing:border-box;width:auto;transition:var(--swal2-input-transition);border:var(--swal2-input-border);border-radius:var(--swal2-input-border-radius);background:var(--swal2-input-background);box-shadow:var(--swal2-input-box-shadow);color:inherit;font-size:1.125em}div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror{border-color:#f27474 !important;box-shadow:0 0 2px #f27474 !important}div:where(.swal2-container) input:where(.swal2-input):hover,div:where(.swal2-container) input:where(.swal2-file):hover,div:where(.swal2-container) textarea:where(.swal2-textarea):hover{box-shadow:var(--swal2-input-hover-box-shadow)}div:where(.swal2-container) input:where(.swal2-input):focus,div:where(.swal2-container) input:where(.swal2-file):focus,div:where(.swal2-container) textarea:where(.swal2-textarea):focus{border:var(--swal2-input-focus-border);outline:none;box-shadow:var(--swal2-input-focus-box-shadow)}div:where(.swal2-container) input:where(.swal2-input)::placeholder,div:where(.swal2-container) input:where(.swal2-file)::placeholder,div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder{color:#ccc}div:where(.swal2-container) .swal2-range{margin:1em 2em 3px;background:var(--swal2-background)}div:where(.swal2-container) .swal2-range input{width:80%}div:where(.swal2-container) .swal2-range output{width:20%;color:inherit;font-weight:600;text-align:center}div:where(.swal2-container) .swal2-range input,div:where(.swal2-container) .swal2-range output{height:2.625em;padding:0;font-size:1.125em;line-height:2.625em}div:where(.swal2-container) .swal2-input{height:2.625em;padding:0 .75em}div:where(.swal2-container) .swal2-file{width:75%;margin-right:auto;margin-left:auto;background:var(--swal2-input-background);font-size:1.125em}div:where(.swal2-container) .swal2-textarea{height:6.75em;padding:.75em}div:where(.swal2-container) .swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;background:var(--swal2-input-background);color:inherit;font-size:1.125em}div:where(.swal2-container) .swal2-radio,div:where(.swal2-container) .swal2-checkbox{align-items:center;justify-content:center;background:var(--swal2-background);color:inherit}div:where(.swal2-container) .swal2-radio label,div:where(.swal2-container) .swal2-checkbox label{margin:0 .6em;font-size:1.125em}div:where(.swal2-container) .swal2-radio input,div:where(.swal2-container) .swal2-checkbox input{flex-shrink:0;margin:0 .4em}div:where(.swal2-container) label:where(.swal2-input-label){display:flex;justify-content:center;margin:1em auto 0}div:where(.swal2-container) div:where(.swal2-validation-message){align-items:center;justify-content:center;margin:1em 0 0;padding:.625em;overflow:hidden;background:var(--swal2-validation-message-background);color:var(--swal2-validation-message-color);font-size:1em;font-weight:300}div:where(.swal2-container) div:where(.swal2-validation-message)::before{content:"!";display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center}div:where(.swal2-container) .swal2-progress-steps{flex-wrap:wrap;align-items:center;max-width:100%;margin:1.25em auto;padding:0;background:rgba(0,0,0,0);font-weight:600}div:where(.swal2-container) .swal2-progress-steps li{display:inline-block;position:relative}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step{z-index:20;flex-shrink:0;width:2em;height:2em;border-radius:2em;background:#2778c4;color:#fff;line-height:2em;text-align:center}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:#2778c4}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step{background:var(--swal2-progress-step-background);color:#fff}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:var(--swal2-progress-step-background)}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line{z-index:10;flex-shrink:0;width:2.5em;height:.4em;margin:0 -1px;background:#2778c4}div:where(.swal2-icon){position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:2.5em auto .6em;zoom:var(--swal2-icon-zoom);border:.25em solid rgba(0,0,0,0);border-radius:50%;border-color:#000;font-family:inherit;line-height:5em;cursor:default;user-select:none}div:where(.swal2-icon) .swal2-icon-content{display:flex;align-items:center;font-size:3.75em}div:where(.swal2-icon).swal2-error{border-color:#f27474;color:#f27474}div:where(.swal2-icon).swal2-error .swal2-x-mark{position:relative;flex-grow:1}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}@container swal2-popup style(--swal2-icon-animations:true){div:where(.swal2-icon).swal2-error.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark{animation:swal2-animate-error-x-mark .5s}}div:where(.swal2-icon).swal2-warning{border-color:#f8bb86;color:#f8bb86}@container swal2-popup style(--swal2-icon-animations:true){div:where(.swal2-icon).swal2-warning.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .5s}}div:where(.swal2-icon).swal2-info{border-color:#3fc3ee;color:#3fc3ee}@container swal2-popup style(--swal2-icon-animations:true){div:where(.swal2-icon).swal2-info.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .8s}}div:where(.swal2-icon).swal2-question{border-color:#87adbd;color:#87adbd}@container swal2-popup style(--swal2-icon-animations:true){div:where(.swal2-icon).swal2-question.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content{animation:swal2-animate-question-mark .8s}}div:where(.swal2-icon).swal2-success{border-color:#a5dc86;color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;border-radius:50%}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}div:where(.swal2-icon).swal2-success .swal2-success-ring{position:absolute;z-index:2;top:-0.25em;left:-0.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}div:where(.swal2-icon).swal2-success .swal2-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}@container swal2-popup style(--swal2-icon-animations:true){div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-animate-success-line-tip .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-animate-success-line-long .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right{animation:swal2-rotate-success-circular-line 4.25s ease-in}}[class^=swal2]{-webkit-tap-highlight-color:rgba(0,0,0,0)}.swal2-show{animation:var(--swal2-show-animation)}.swal2-hide{animation:var(--swal2-hide-animation)}.swal2-noanimation{transition:none}.swal2-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.swal2-rtl .swal2-close{margin-right:initial;margin-left:0}.swal2-rtl .swal2-timer-progress-bar{right:0;left:auto}.swal2-toast{box-sizing:border-box;grid-column:1/4 !important;grid-row:1/4 !important;grid-template-columns:min-content auto min-content;padding:1em;overflow-y:hidden;border:var(--swal2-toast-border);background:var(--swal2-background);box-shadow:var(--swal2-toast-box-shadow);pointer-events:all}.swal2-toast>*{grid-column:2}.swal2-toast h2:where(.swal2-title){margin:.5em 1em;padding:0;font-size:1em;text-align:initial}.swal2-toast .swal2-loading{justify-content:center}.swal2-toast input:where(.swal2-input){height:2em;margin:.5em;font-size:1em}.swal2-toast .swal2-validation-message{font-size:1em}.swal2-toast div:where(.swal2-footer){margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-toast button:where(.swal2-close){grid-column:3/3;grid-row:1/99;align-self:center;width:.8em;height:.8em;margin:0;font-size:2em}.swal2-toast div:where(.swal2-html-container){margin:.5em 1em;padding:0;overflow:initial;font-size:1em;text-align:initial}.swal2-toast div:where(.swal2-html-container):empty{padding:0}.swal2-toast .swal2-loader{grid-column:1;grid-row:1/99;align-self:center;width:2em;height:2em;margin:.25em}.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;width:2em;min-width:2em;height:2em;margin:0 .5em 0 0}.swal2-toast .swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:1.8em;font-weight:bold}.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-toast div:where(.swal2-actions){justify-content:flex-start;height:auto;margin:0;margin-top:.5em;padding:0 .5em}.swal2-toast button:where(.swal2-styled){margin:.25em .5em;padding:.4em .6em;font-size:1em}.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:1.6em;height:3em;border-radius:50%}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.8em;left:-0.5em;transform:rotate(-45deg);transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.25em;left:.9375em;transform-origin:0 1.5em;border-radius:0 4em 4em 0}.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}@container swal2-popup style(--swal2-icon-animations:true){.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-toast-animate-success-line-tip .75s}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-toast-animate-success-line-long .75s}}.swal2-toast.swal2-show{animation:var(--swal2-toast-show-animation)}.swal2-toast.swal2-hide{animation:var(--swal2-toast-hide-animation)}@keyframes swal2-show{0%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}100%{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes swal2-hide{0%{transform:translate3d(0, 0, 0) scale(1);opacity:1}100%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-0.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(0.4);opacity:0}50%{margin-top:1.625em;transform:scale(0.4);opacity:0}80%{margin-top:-0.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}@keyframes swal2-rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes swal2-animate-question-mark{0%{transform:rotateY(-360deg)}100%{transform:rotateY(0)}}@keyframes swal2-animate-i-mark{0%{transform:rotateZ(45deg);opacity:0}25%{transform:rotateZ(-25deg);opacity:.4}50%{transform:rotateZ(15deg);opacity:.8}75%{transform:rotateZ(-5deg);opacity:1}100%{transform:rotateX(0);opacity:1}}@keyframes swal2-toast-show{0%{transform:translateY(-0.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(0.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0deg)}}@keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-0.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}
/* Global styles or scoped styles if you prefer */
.default-popup {
  background: white !important;
  border-radius: 16px !important;
  padding: 32px !important;
  max-width: 418px !important;
}

.default-title {
  color: #0a0a0a !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 18px 0px 0px 0px !important;
}

.default-html-container {
  margin: 8px 0 0 0 !important;
  padding: 0px 0px 0px 0px !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.default-confirm-button {
  background-color: var(--color-primary, #27b199) !important;
  color: white !important;
  border: none !important;
  padding: 8px 24px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0% !important;
  vertical-align: middle !important;
  border-radius: 64px !important;
  margin: 0px !important;
}

/* .default-confirm-button:focus {
  box-shadow: gray !important;
} */

.default-confirm-button:hover {
  background-color: color-mix(in oklab, var(--color-primary, #27b199) 80%, transparent) !important;
}

.default-cancel-button {
  padding: 8px 20px !important;
  background: transparent !important;
  color: var(--color-primary, #27b199) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0% !important;
  vertical-align: middle !important;
  border-radius: 64px !important;
  margin: 0px !important;
}

.default-cancel-button:hover {
  background: #f3f3f3 !important;
}

.default-actions {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.default-actions button {
  width: 100%;
}

.default-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto !important;
  border: none !important;
}

.default-icon .swal2-icon-content {
  font-size: 36px !important;
  font-weight: 600 !important;
  /* transform: rotate(180deg) !important; */
}

.swal2-actions {
  margin-top: 32px !important;
}


.callout-panel[data-positioned='false'][data-v-9e472e5c] {
  opacity: 0;
  pointer-events: none;
}
.callout-panel[data-v-9e472e5c]::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) translateY(10%) rotate(45deg);
  left: var(--callout-tail-offset, 50%);
}
.callout-panel[data-placement='bottom'][data-v-9e472e5c]::after {
  top: -5px;
}
.callout-panel[data-placement='top'][data-v-9e472e5c]::after {
  bottom: -5px;
}
.callout-enter-active[data-v-9e472e5c],
.callout-leave-active[data-v-9e472e5c] {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.callout-enter-from[data-v-9e472e5c],
.callout-leave-to[data-v-9e472e5c] {
  opacity: 0;
  transform: translateY(-2px);
}

/* Base transform for centering */
div[role='dialog'][data-v-2e4a5f96] {
  transform: translate(-50%, -50%);
}

/* Handle dialog transition */
.modal-content-enter-active[data-v-2e4a5f96],
.modal-content-leave-active[data-v-2e4a5f96] {
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-content-enter-from[data-v-2e4a5f96],
.modal-content-leave-to[data-v-2e4a5f96] {
  opacity: 0;
  transform: translate(-50%, -48%) scale(0.95);
}

.modal-overlay-enter-active[data-v-2790013f],
.modal-overlay-leave-active[data-v-2790013f] {
  transition: opacity 0.5s ease;
}
.modal-overlay-enter-from[data-v-2790013f],
.modal-overlay-leave-to[data-v-2790013f] {
  opacity: 0;
}

/* Overlay transitions */
.select-overlay-enter-active[data-v-68251f32],
.select-overlay-leave-active[data-v-68251f32] {
  transition: opacity 0.2s ease;
}
.select-overlay-enter-from[data-v-68251f32],
.select-overlay-leave-to[data-v-68251f32] {
  opacity: 0;
}

/* Initial state - hidden while calculating position */
[data-state='calculating'][data-v-68251f32] {
  opacity: 0;
  transform: scale(0.95);
  transition: none;
}

/* Final state - visible with smooth transition */
[data-state='positioned'][data-v-68251f32] {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

/* Hide number input spinners */
input[type='number'][data-v-9855c44c]::-webkit-inner-spin-button,
input[type='number'][data-v-9855c44c]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'][data-v-9855c44c] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.time-input[data-v-9855c44c] {
  width: 52px;
  height: 40px;
  padding-block: 8px;
  padding-inline: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
  border-radius: 8px;
}

span[data-text][data-v-b3b16a0a]::before {
  color: var(--color-text-title);
  font-weight: 400;
  position: absolute;
  content: attr(data-text);
}
span[data-text].tab-active[data-v-b3b16a0a]::before {
  font-weight: 600;
  color: var(--color-primary);
}

/* Initial state - hidden while calculating position */
[data-state='calculating'][data-v-89f6de45] {
  opacity: 0;
  transform: scale(0.95);
  transition: none;
}

/* Final state - visible with smooth transition */
[data-state='positioned'][data-v-89f6de45] {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

.hsm-preview[data-v-16d3c0ea] {
  min-width: 300px;
  max-width: 300px;
  word-wrap: break-word;
  margin-bottom: 4px;
}
.hsm-preview[data-v-16d3c0ea] .wa-quote {
  border-left: 3px solid #cfcfcf;
  padding-left: 8px;
  margin: 4px 0;
  color: #667781;
}
.hsm-preview[data-v-16d3c0ea] .wa-list-item {
  margin: 2px 0;
}
.preview-content[data-v-16d3c0ea] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hsm-preview-time[data-v-16d3c0ea] {
  display: block;
  text-align: right;
}

/* Carousel styles */
.wa-message-preview[data-v-ab305230] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wa-message-preview .title[data-v-ab305230] {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1a1a1a;
}
.wa-message-preview .bubble[data-v-ab305230] {
  min-width: 300px;
  max-width: 300px;
  background: white;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.wa-message-preview .message-html[data-v-ab305230] {
  margin-bottom: 8px;
  word-wrap: break-word;
}
.wa-message-preview .clock[data-v-ab305230] {
  font-size: 11px;
  color: #9f9f9f;
  text-align: right;
}
#slider-container[data-v-ab305230] {
  position: relative;
  min-width: 300px;
  max-width: 300px;
  overflow: hidden;
}
#slider[data-v-ab305230] {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#slider[data-v-ab305230]::-webkit-scrollbar {
  display: none;
}
.bubble-carousel[data-v-ab305230] {
  min-width: 300px;
  max-width: 300px;
  background: white;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-right: 8px;
  flex-shrink: 0;
}
.bubble-carousel.activated[data-v-ab305230] {
  scroll-snap-align: start;
}
.media-container[data-v-ab305230] {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.media-container.empty[data-v-ab305230] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #f5f5f5;
  border: 1px dashed #d0d0d0;
}
.media-container img[data-v-ab305230],
.media-container video[data-v-ab305230] {
  width: 100%;
  height: auto;
  display: block;
}
.media-container.video video[data-v-ab305230] {
  width: 202px;
}
.bubble-carousel .message[data-v-ab305230] {
  margin-bottom: 12px;
  word-wrap: break-word;
}
.button-list[data-v-ab305230] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.button-list button[data-v-ab305230] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #007bff;
  transition: background-color 0.2s;
}
.button-list button[data-v-ab305230]:hover {
  background-color: #f5f5f5;
}
.nav-prev[data-v-ab305230],
.nav-next[data-v-ab305230] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
  transition: background-color 0.2s;
}
.nav-prev[data-v-ab305230]:hover,
.nav-next[data-v-ab305230]:hover {
  background-color: #f5f5f5;
}
.nav-prev[data-v-ab305230] {
  left: 8px;
}
.nav-next[data-v-ab305230] {
  right: 8px;
}
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scroll-snap-strictness:proximity;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-100:#fee2e2;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-red-900:#7f1d1d;--color-red-950:#450a0a;--color-orange-100:#ffedd5;--color-orange-300:#fdba74;--color-orange-400:#fb923c;--color-orange-500:#f97316;--color-orange-600:#ea580c;--color-orange-700:#c2410c;--color-orange-800:#9a3412;--color-orange-950:#431407;--color-amber-100:#fef3c7;--color-amber-300:#fcd34d;--color-amber-400:#fbbf24;--color-amber-500:#f59e0b;--color-amber-600:#d97706;--color-amber-700:#b45309;--color-amber-800:#92400e;--color-amber-900:#78350f;--color-amber-950:#451a03;--color-green-100:#dcfce7;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-500:#22c55e;--color-green-600:#16a34a;--color-green-700:#15803d;--color-green-800:#166534;--color-green-900:#14532d;--color-green-950:#052e16;--color-blue-100:#dbeafe;--color-blue-300:#93c5fd;--color-blue-400:#60a5fa;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-blue-700:#1d4ed8;--color-blue-800:#1e40af;--color-blue-900:#1e3a8a;--color-blue-950:#172554;--color-purple-100:#f3e8ff;--color-purple-300:#d8b4fe;--color-purple-400:#c084fc;--color-purple-500:#a855f7;--color-purple-600:#9333ea;--color-purple-700:#7e22ce;--color-purple-800:#6b21a8;--color-purple-950:#3b0764;--color-pink-100:#fce7f3;--color-pink-300:#f9a8d4;--color-pink-400:#f472b6;--color-pink-500:#ec4899;--color-pink-600:#db2777;--color-pink-700:#be185d;--color-pink-800:#9d174d;--color-pink-950:#500724;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-normal:1.5;--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-4xl:48px;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-chart-1:#509ee3;--color-brand-100:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-100:color-mix(in oklab, var(--brand), white 77%)}}:root,:host{--color-brand-200:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-200:color-mix(in oklab, var(--brand), white 55%)}}:root,:host{--color-brand-300:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-300:color-mix(in oklab, var(--brand), white 34%)}}:root,:host{--color-brand-400:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-400:color-mix(in oklab, var(--brand), white 19%)}}:root,:host{--color-brand-500:var(--brand);--color-brand-600:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-600:color-mix(in oklab, var(--brand), black 9%)}}:root,:host{--color-brand-700:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-700:color-mix(in oklab, var(--brand), black 21%)}}:root,:host{--color-brand-800:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-800:color-mix(in oklab, var(--brand), black 34%)}}:root,:host{--color-brand-900:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-900:color-mix(in oklab, var(--brand), black 46%)}}:root,:host{--color-brand-950:var(--brand)}@supports (color:color-mix(in lab,red,red)){:root,:host{--color-brand-950:color-mix(in oklab, var(--brand), black 60%)}}:root,:host{--color-black-alpha-50:#1a1a1a0a;--color-black-alpha-200:#1a1a1a1f;--color-black-alpha-400:#1a1a1a3d;--color-black-alpha-500:#1a1a1a5c;--color-black-alpha-700:#1a1a1a99;--color-white-alpha-100:#ffffff14;--color-white-alpha-300:#ffffff29;--color-white-alpha-400:#ffffff3d;--color-white-alpha-500:#ffffff5c;--color-bg-primary:var(--color-white);--color-bg-secondary:var(--color-slate-50);--color-bg-tertiary:var(--color-slate-100);--color-bg-inverse:var(--color-slate-900);--color-bg-disabled:var(--color-slate-100);--color-bg-brand-primary:var(--color-brand-100);--color-bg-brand-secondary:var(--color-brand-700);--color-bg-brand-hover:var(--color-brand-800);--color-bg-brand-active:var(--color-brand-900);--color-bg-error-primary:var(--color-red-100);--color-bg-error-secondary:var(--color-red-700);--color-bg-success-primary:var(--color-green-100);--color-bg-success-secondary:var(--color-green-700);--color-bg-warning-primary:var(--color-amber-100);--color-bg-warning-secondary:var(--color-amber-700);--color-bg-info-primary:var(--color-blue-100);--color-bg-info-secondary:var(--color-blue-700);--color-bg-overlay-primary:var(--color-black-alpha-500);--color-bg-overlay-inverse:var(--color-white-alpha-500);--color-bg-orange-secondary:var(--color-orange-700);--color-bg-purple-primary:var(--color-purple-100);--color-bg-purple-secondary:var(--color-purple-700);--color-bg-pink-secondary:var(--color-pink-700);--color-bg-bubble-customer:var(--color-bg-secondary);--color-bg-bubble-admin:var(--color-brand-500);--color-bg-bubble-agent:var(--color-brand-700);--color-bg-bubble-bot:var(--color-slate-600);--color-bg-bubble-whisper:var(--color-bg-warning-primary);--color-text-primary:var(--color-slate-900);--color-text-secondary:var(--color-slate-600);--color-text-tertiary:var(--color-slate-500);--color-text-disabled:var(--color-slate-400);--color-text-placeholder:var(--color-slate-500);--color-text-white:var(--color-white);--color-text-inverse:var(--color-white);--color-text-brand-primary:var(--color-brand-800);--color-text-brand-secondary:var(--color-brand-900);--color-text-error-primary:var(--color-red-600);--color-text-error-secondary:var(--color-red-800);--color-text-success-primary:var(--color-green-600);--color-text-warning-primary:var(--color-amber-700);--color-text-info-primary:var(--color-blue-600);--color-text-on-brand:var(--color-white);--color-text-on-purple:var(--color-white);--color-text-on-error:var(--color-white);--color-text-on-success:var(--color-white);--color-text-on-warning:var(--color-white);--color-text-on-info:var(--color-white);--color-text-link:var(--color-blue-600);--color-text-link-hover:var(--color-blue-800);--color-icon-primary:var(--color-slate-900);--color-icon-secondary:var(--color-slate-600);--color-icon-tertiary:var(--color-slate-500);--color-icon-disabled:var(--color-slate-400);--color-icon-brand-primary:var(--color-brand-700);--color-icon-brand-secondary:var(--color-brand-800);--color-icon-error-primary:var(--color-red-700);--color-icon-error-secondary:var(--color-red-800);--color-icon-success-primary:var(--color-green-700);--color-icon-warning-primary:var(--color-amber-700);--color-icon-info-primary:var(--color-blue-700);--color-icon-purple-primary:var(--color-purple-700);--color-icon-on-purple:var(--color-white);--color-icon-on-error:var(--color-white);--color-icon-on-success:var(--color-white);--color-icon-on-warning:var(--color-white);--color-icon-on-info:var(--color-white);--color-border-primary:var(--color-slate-200);--color-border-secondary:var(--color-slate-300);--color-border-tertiary:var(--color-slate-400);--color-border-disabled:var(--color-slate-300);--color-border-focus-ring:var(--color-blue-700);--color-border-brand-secondary:var(--color-brand-700);--color-border-error-primary:var(--color-red-500);--color-border-error-secondary:var(--color-red-700);--color-border-success-secondary:var(--color-green-700);--color-border-warning-secondary:var(--color-amber-700);--color-border-info-secondary:var(--color-blue-700);--color-border-purple-secondary:var(--color-purple-700);--color-indicator-success:var(--color-green-600);--color-indicator-error:var(--color-red-600);--color-indicator-warning:var(--color-amber-600);--color-indicator-info:var(--color-blue-600);--color-indicator-neutral:var(--color-slate-500);--radius-none:0px;--radius-3xs:2px;--radius-2xs:4px;--radius-full:9999px;--animate-overlay-show:overlay-show var(--duration-base) var(--ease-emphasized) forwards;--animate-overlay-hide:overlay-hide var(--duration-fast) var(--ease-exit) forwards;--animate-content-show:content-show var(--duration-moderate) var(--ease-emphasized) forwards;--animate-content-hide:content-hide var(--duration-fast) var(--ease-exit) forwards;--animate-toast-show:toast-show var(--duration-slow) var(--ease-standard);--animate-toast-hide:toast-hide var(--duration-base) var(--ease-exit) forwards;--animate-accordion-down:accordion-down var(--duration-slow) var(--ease-standard);--animate-accordion-up:accordion-up var(--duration-slow) var(--ease-standard) forwards;--animate-drawer-in-right:drawer-in-right var(--duration-moderate) var(--ease-emphasized) forwards;--animate-drawer-out-right:drawer-out-right var(--duration-fast) var(--ease-exit) forwards;--animate-drawer-in-left:drawer-in-left var(--duration-moderate) var(--ease-emphasized) forwards;--animate-drawer-out-left:drawer-out-left var(--duration-fast) var(--ease-exit) forwards;--animate-drawer-in-top:drawer-in-top var(--duration-moderate) var(--ease-emphasized) forwards;--animate-drawer-out-top:drawer-out-top var(--duration-fast) var(--ease-exit) forwards;--animate-drawer-in-bottom:drawer-in-bottom var(--duration-moderate) var(--ease-emphasized) forwards;--animate-drawer-out-bottom:drawer-out-bottom var(--duration-fast) var(--ease-exit) forwards;--animate-skeleton-pulse:skeleton-pulse 1.5s var(--ease-standard) infinite;--animate-dot-loader:dot-loader 1.4s var(--ease-standard) infinite}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.-end{inset-inline-end:calc(var(--spacing) * -1)}.end{inset-inline-end:var(--spacing)}.-top-1{top:calc(var(--spacing) * -1)}.-top-1\.5{top:calc(var(--spacing) * -1.5)}.-top-\[3px\]{top:-3px}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-\[11px\]{top:11px}.-right-1\.5{right:calc(var(--spacing) * -1.5)}.-right-1\/2{right:-50%}.right-0{right:calc(var(--spacing) * 0)}.right-6{right:calc(var(--spacing) * 6)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-6{bottom:calc(var(--spacing) * 6)}.bottom-full{bottom:100%}.-left-\[9999px\]{left:-9999px}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.isolate{isolation:isolate}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\[1\]{z-index:1}.z-\[6\]{z-index:6}.z-\[7\]{z-index:7}.z-\[var\(--z-dropdown\)\]{z-index:var(--z-dropdown)}.z-\[var\(--z-modal\)\]{z-index:var(--z-modal)}.z-\[var\(--z-modal-backdrop\)\]{z-index:var(--z-modal-backdrop)}.z-\[var\(--z-popover\)\]{z-index:var(--z-popover)}.z-\[var\(--z-toast\)\]{z-index:var(--z-toast)}.z-\[var\(--z-tooltip\)\]{z-index:var(--z-tooltip)}.order-last{order:9999}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.-mx-6{margin-inline:calc(var(--spacing) * -6)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.-my-\[11px\]{margin-block:-11px}.my-1{margin-block:calc(var(--spacing) * 1)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3\.5{margin-top:calc(var(--spacing) * 3.5)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-auto{margin-top:auto}.-mr-3{margin-right:calc(var(--spacing) * -3)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.-mb-6{margin-bottom:calc(var(--spacing) * -6)}.-mb-px{margin-bottom:-1px}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.-ml-3{margin-left:calc(var(--spacing) * -3)}.-ml-px{margin-left:-1px}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-7{margin-left:calc(var(--spacing) * 7)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-0{width:calc(var(--spacing) * 0);height:calc(var(--spacing) * 0)}.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}.size-1\/3{width:33.3333%;height:33.3333%}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-6\!{width:calc(var(--spacing) * 6)!important;height:calc(var(--spacing) * 6)!important}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-\[18px\]{width:18px;height:18px}.size-full{width:100%;height:100%}.h-0{height:calc(var(--spacing) * 0)}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1{height:calc(var(--spacing) * 1)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-11{height:calc(var(--spacing) * 11)}.h-16{height:calc(var(--spacing) * 16)}.h-35{height:calc(var(--spacing) * 35)}.h-36{height:calc(var(--spacing) * 36)}.h-40{height:calc(var(--spacing) * 40)}.h-60{height:calc(var(--spacing) * 60)}.h-\[3px\]{height:3px}.h-\[42px\]{height:42px}.h-\[70vh\]{height:70vh}.h-\[132px\]{height:132px}.h-\[180px\]{height:180px}.h-\[240px\]{height:240px}.h-\[360px\]{height:360px}.h-\[480px\]{height:480px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.max-h-10{max-height:calc(var(--spacing) * 10)}.max-h-30{max-height:calc(var(--spacing) * 30)}.max-h-40{max-height:calc(var(--spacing) * 40)}.max-h-52{max-height:calc(var(--spacing) * 52)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-\[70vh\]{max-height:70vh}.max-h-\[calc\(100vh-2rem\)\]{max-height:calc(100vh - 2rem)}.max-h-\[var\(--reka-combobox-content-available-height\)\]{max-height:var(--reka-combobox-content-available-height)}.max-h-\[var\(--reka-dropdown-menu-content-available-height\)\]{max-height:var(--reka-dropdown-menu-content-available-height)}.max-h-\[var\(--reka-popper-available-height\)\]{max-height:var(--reka-popper-available-height)}.max-h-\[var\(--reka-select-content-available-height\)\]{max-height:var(--reka-select-content-available-height)}.max-h-screen{max-height:100vh}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-5{min-height:calc(var(--spacing) * 5)}.min-h-9{min-height:calc(var(--spacing) * 9)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-16{min-height:calc(var(--spacing) * 16)}.min-h-40{min-height:calc(var(--spacing) * 40)}.min-h-45{min-height:calc(var(--spacing) * 45)}.min-h-60{min-height:calc(var(--spacing) * 60)}.min-h-\[72px\]{min-height:72px}.min-h-\[114px\]{min-height:114px}.min-h-\[200px\]{min-height:200px}.w-1{width:calc(var(--spacing) * 1)}.w-1\/2{width:50%}.w-2{width:calc(var(--spacing) * 2)}.w-2\/3{width:66.6667%}.w-3\/4{width:75%}.w-3\/5{width:60%}.w-4{width:calc(var(--spacing) * 4)}.w-4\/5{width:80%}.w-5\/6{width:83.3333%}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-36{width:calc(var(--spacing) * 36)}.w-40{width:calc(var(--spacing) * 40)}.w-44{width:calc(var(--spacing) * 44)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-80{width:calc(var(--spacing) * 80)}.w-\[--reka-popover-trigger-width\]{width:--reka-popover-trigger-width}.w-\[3px\]{width:3px}.w-\[18px\]{width:18px}.w-\[34px\]{width:34px}.w-\[258px\]{width:258px}.w-\[320px\]{width:320px}.w-\[400px\]{width:400px}.w-\[420px\]{width:420px}.w-\[480px\]{width:480px}.w-\[640px\]{width:640px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[calc\(100vw-2rem\)\]{width:calc(100vw - 2rem)}.w-\[var\(--reka-combobox-trigger-width\)\]{width:var(--reka-combobox-trigger-width)}.w-\[var\(--reka-select-trigger-width\)\]{width:var(--reka-select-trigger-width)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-10{max-width:calc(var(--spacing) * 10)}.max-w-\[65\%\]{max-width:65%}.max-w-\[85\%\]{max-width:85%}.max-w-\[92vw\]{max-width:92vw}.max-w-\[220px\]{max-width:220px}.max-w-\[280px\]{max-width:280px}.max-w-\[320px\]{max-width:320px}.max-w-\[420px\]{max-width:420px}.max-w-\[440px\]{max-width:440px}.max-w-\[456px\]{max-width:456px}.max-w-\[520px\]{max-width:520px}.max-w-\[552px\]{max-width:552px}.max-w-\[640px\]{max-width:640px}.max-w-\[800px\]{max-width:800px}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-3{min-width:calc(var(--spacing) * 3)}.min-w-4{min-width:calc(var(--spacing) * 4)}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-9{min-width:calc(var(--spacing) * 9)}.min-w-60{min-width:calc(var(--spacing) * 60)}.min-w-\[6rem\]{min-width:6rem}.min-w-\[8rem\]{min-width:8rem}.min-w-\[180px\]{min-width:180px}.min-w-\[200px\]{min-width:200px}.min-w-\[220px\]{min-width:220px}.min-w-\[222px\]{min-width:222px}.flex-1{flex:1}.flex-none{flex:none}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.border-separate{border-collapse:separate}.border-spacing-\[2px\]{--tw-border-spacing-x:2px;--tw-border-spacing-y:2px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.origin-\[var\(--reka-combobox-content-transform-origin\)\]{transform-origin:var(--reka-combobox-content-transform-origin)}.origin-\[var\(--reka-dropdown-menu-content-transform-origin\)\]{transform-origin:var(--reka-dropdown-menu-content-transform-origin)}.origin-\[var\(--reka-popover-content-transform-origin\)\]{transform-origin:var(--reka-popover-content-transform-origin)}.origin-\[var\(--reka-popper-transform-origin\)\]{transform-origin:var(--reka-popper-transform-origin)}.origin-\[var\(--reka-select-content-transform-origin\)\]{transform-origin:var(--reka-select-content-transform-origin)}.origin-bottom-left{transform-origin:0 100%}.origin-bottom-right{transform-origin:100% 100%}.origin-center{transform-origin:50%}.origin-left{transform-origin:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-dot-loader{animation:var(--animate-dot-loader)}.animate-pulse{animation:var(--animate-pulse)}.animate-skeleton-pulse{animation:var(--animate-skeleton-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize{resize:both}.resize-none{resize:none}.resize-y{resize:vertical}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.list-none{list-style-type:none}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-cols-\[90px_1fr\]{grid-template-columns:90px 1fr}.grid-cols-\[minmax\(90px\,45\%\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(90px,45%) minmax(0,1fr)}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0{gap:calc(var(--spacing) * 0)}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-\[5px\]{gap:5px}.self-center{align-self:center}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-2xs{border-radius:var(--radius-2xs)}.rounded-3xs{border-radius:var(--radius-3xs)}.rounded-4xl{border-radius:var(--radius-4xl)}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-t-xs{border-top-left-radius:var(--radius-xs);border-top-right-radius:var(--radius-xs)}.rounded-l-none{border-top-left-radius:var(--radius-none);border-bottom-left-radius:var(--radius-none)}.rounded-l-sm{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.rounded-tl-2xs{border-top-left-radius:var(--radius-2xs)}.rounded-tl-lg{border-top-left-radius:var(--radius-lg)}.rounded-r-none{border-top-right-radius:var(--radius-none);border-bottom-right-radius:var(--radius-none)}.rounded-r-sm{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.rounded-tr-2xs{border-top-right-radius:var(--radius-2xs)}.rounded-tr-lg{border-top-right-radius:var(--radius-lg)}.rounded-br-2xs{border-bottom-right-radius:var(--radius-2xs)}.rounded-br-lg{border-bottom-right-radius:var(--radius-lg)}.rounded-bl-2xs{border-bottom-left-radius:var(--radius-2xs)}.rounded-bl-lg{border-bottom-left-radius:var(--radius-lg)}.rounded-bl-md{border-bottom-left-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-t-\[3px\]{border-top-style:var(--tw-border-style);border-top-width:3px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-8{border-left-style:var(--tw-border-style);border-left-width:8px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-amber-800{border-color:var(--color-amber-800)}.border-amber-900{border-color:var(--color-amber-900)}.border-bg-tertiary{border-color:var(--color-bg-tertiary)}.border-border-brand-secondary{border-color:var(--color-border-brand-secondary)}.border-border-error-primary{border-color:var(--color-border-error-primary)}.border-border-error-secondary{border-color:var(--color-border-error-secondary)}.border-border-info-secondary{border-color:var(--color-border-info-secondary)}.border-border-primary{border-color:var(--color-border-primary)}.border-border-purple-secondary{border-color:var(--color-border-purple-secondary)}.border-border-secondary{border-color:var(--color-border-secondary)}.border-border-success-secondary{border-color:var(--color-border-success-secondary)}.border-border-warning-secondary{border-color:var(--color-border-warning-secondary)}.border-red-300{border-color:var(--color-red-300)}.border-slate-300{border-color:var(--color-slate-300)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.border-white-alpha-400{border-color:var(--color-white-alpha-400)}.border-t-bg-brand-secondary{border-top-color:var(--color-bg-brand-secondary)}.bg-\[var\(--toast-accent\)\]{background-color:var(--toast-accent)}.bg-amber-900{background-color:var(--color-amber-900)}.bg-bg-brand-hover{background-color:var(--color-bg-brand-hover)}.bg-bg-brand-primary{background-color:var(--color-bg-brand-primary)}.bg-bg-brand-secondary{background-color:var(--color-bg-brand-secondary)}.bg-bg-bubble-admin{background-color:var(--color-bg-bubble-admin)}.bg-bg-bubble-agent{background-color:var(--color-bg-bubble-agent)}.bg-bg-bubble-bot{background-color:var(--color-bg-bubble-bot)}.bg-bg-bubble-customer{background-color:var(--color-bg-bubble-customer)}.bg-bg-bubble-whisper{background-color:var(--color-bg-bubble-whisper)}.bg-bg-error-primary{background-color:var(--color-bg-error-primary)}.bg-bg-error-secondary{background-color:var(--color-bg-error-secondary)}.bg-bg-info-primary{background-color:var(--color-bg-info-primary)}.bg-bg-info-secondary{background-color:var(--color-bg-info-secondary)}.bg-bg-inverse{background-color:var(--color-bg-inverse)}.bg-bg-orange-secondary{background-color:var(--color-bg-orange-secondary)}.bg-bg-overlay-primary{background-color:var(--color-bg-overlay-primary)}.bg-bg-pink-secondary{background-color:var(--color-bg-pink-secondary)}.bg-bg-primary{background-color:var(--color-bg-primary)}.bg-bg-purple-primary{background-color:var(--color-bg-purple-primary)}.bg-bg-purple-secondary{background-color:var(--color-bg-purple-secondary)}.bg-bg-secondary{background-color:var(--color-bg-secondary)}.bg-bg-success-primary{background-color:var(--color-bg-success-primary)}.bg-bg-success-secondary{background-color:var(--color-bg-success-secondary)}.bg-bg-tertiary{background-color:var(--color-bg-tertiary)}.bg-bg-warning-primary{background-color:var(--color-bg-warning-primary)}.bg-bg-warning-secondary{background-color:var(--color-bg-warning-secondary)}.bg-black{background-color:var(--color-black)}.bg-black-alpha-200{background-color:var(--color-black-alpha-200)}.bg-black-alpha-400{background-color:var(--color-black-alpha-400)}.bg-black-alpha-500{background-color:var(--color-black-alpha-500)}.bg-border-brand-secondary{background-color:var(--color-border-brand-secondary)}.bg-border-primary{background-color:var(--color-border-primary)}.bg-border-secondary{background-color:var(--color-border-secondary)}.bg-border-tertiary{background-color:var(--color-border-tertiary)}.bg-brand-700{background-color:var(--color-brand-700)}.bg-icon-brand-primary{background-color:var(--color-icon-brand-primary)}.bg-icon-secondary{background-color:var(--color-icon-secondary)}.bg-indicator-error{background-color:var(--color-indicator-error)}.bg-indicator-info{background-color:var(--color-indicator-info)}.bg-indicator-neutral{background-color:var(--color-indicator-neutral)}.bg-indicator-success{background-color:var(--color-indicator-success)}.bg-indicator-warning{background-color:var(--color-indicator-warning)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-400{background-color:var(--color-slate-400)}.bg-slate-600{background-color:var(--color-slate-600)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.\[mask-image\:linear-gradient\(to_bottom\,black_70\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(#000 70%,#0000 100%);mask-image:linear-gradient(#000 70%,#0000)}.fill-bg-inverse{fill:var(--color-bg-inverse)}.fill-bg-primary{fill:var(--color-bg-primary)}.fill-chart-1{fill:var(--color-chart-1)}.stroke-2{stroke-width:2px}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.object-none{object-fit:none}.object-scale-down{object-fit:scale-down}.p-0{padding:calc(var(--spacing) * 0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-12{padding:calc(var(--spacing) * 12)}.px-0{padding-inline:calc(var(--spacing) * 0)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.py-0{padding-block:calc(var(--spacing) * 0)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-\[11px\]{padding-block:11px}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3\.5{padding-top:calc(var(--spacing) * 3.5)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-14{padding-bottom:calc(var(--spacing) * 14)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-center{text-align:center}.text-left{text-align:left}.align-\[-0\.1875em\]{vertical-align:-.1875em}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0px\]{font-size:0}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[20px\]{font-size:20px}.text-\[28px\]{font-size:28px}.text-\[32px\]{font-size:32px}.text-\[40px\]{font-size:40px}.leading-3{--tw-leading:calc(var(--spacing) * 3);line-height:calc(var(--spacing) * 3)}.leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-5{--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-9{--tw-leading:calc(var(--spacing) * 9);line-height:calc(var(--spacing) * 9)}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-\[14px\]{--tw-leading:14px;line-height:14px}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-\[24px\]{--tw-leading:24px;line-height:24px}.leading-\[26px\]{--tw-leading:26px;line-height:26px}.leading-\[48px\]{--tw-leading:48px;line-height:48px}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.1px\]{--tw-tracking:-.1px;letter-spacing:-.1px}.tracking-\[-0\.5px\]{--tw-tracking:-.5px;letter-spacing:-.5px}.tracking-\[-0\.16px\]{--tw-tracking:-.16px;letter-spacing:-.16px}.tracking-\[0\.2px\]{--tw-tracking:.2px;letter-spacing:.2px}.tracking-\[0\.4px\]{--tw-tracking:.4px;letter-spacing:.4px}.tracking-\[1\.1px\]{--tw-tracking:1.1px;letter-spacing:1.1px}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.\[overflow-wrap\:anywhere\]{overflow-wrap:anywhere}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[var\(--banner-accent\)\]{color:var(--banner-accent)}.text-\[var\(--toast-accent\)\]{color:var(--toast-accent)}.text-brand-600{color:var(--color-brand-600)}.text-brand-700{color:var(--color-brand-700)}.text-icon-brand-primary{color:var(--color-icon-brand-primary)}.text-icon-brand-secondary{color:var(--color-icon-brand-secondary)}.text-icon-error-primary{color:var(--color-icon-error-primary)}.text-icon-error-secondary{color:var(--color-icon-error-secondary)}.text-icon-info-primary{color:var(--color-icon-info-primary)}.text-icon-primary{color:var(--color-icon-primary)}.text-icon-secondary{color:var(--color-icon-secondary)}.text-icon-success-primary{color:var(--color-icon-success-primary)}.text-icon-tertiary{color:var(--color-icon-tertiary)}.text-icon-warning-primary{color:var(--color-icon-warning-primary)}.text-inherit{color:inherit}.text-text-brand-primary{color:var(--color-text-brand-primary)}.text-text-brand-secondary{color:var(--color-text-brand-secondary)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-error-primary{color:var(--color-text-error-primary)}.text-text-error-secondary{color:var(--color-text-error-secondary)}.text-text-info-primary{color:var(--color-text-info-primary)}.text-text-inverse{color:var(--color-text-inverse)}.text-text-link{color:var(--color-text-link)}.text-text-on-brand{color:var(--color-text-on-brand)}.text-text-on-error{color:var(--color-text-on-error)}.text-text-on-info{color:var(--color-text-on-info)}.text-text-on-purple{color:var(--color-text-on-purple)}.text-text-on-success{color:var(--color-text-on-success)}.text-text-on-warning{color:var(--color-text-on-warning)}.text-text-placeholder{color:var(--color-text-placeholder)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.text-text-success-primary{color:var(--color-text-success-primary)}.text-text-tertiary{color:var(--color-text-tertiary)}.text-text-warning-primary{color:var(--color-text-warning-primary)}.text-text-white{color:var(--color-text-white)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-1{text-decoration-thickness:1px}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[-8px_0_32px_0_rgba\(0\,0\,0\,0\.18\)\]{--tw-shadow:-8px 0 32px 0 var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_-8px_32px_0_rgba\(0\,0\,0\,0\.18\)\]{--tw-shadow:0 -8px 32px 0 var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_8px_32px_0_rgba\(0\,0\,0\,0\.18\)\]{--tw-shadow:0 8px 32px 0 var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_12px_32px_0_rgba\(0\,0\,0\,0\.18\)\]{--tw-shadow:0 12px 32px 0 var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[8px_0_32px_0_rgba\(0\,0\,0\,0\.18\)\]{--tw-shadow:8px 0 32px 0 var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0px 10px 15px -3px var(--tw-shadow-color,#0000001a), 0px 4px 6px -2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0px 4px 6px -1px var(--tw-shadow-color,#0000001a), 0px 2px 4px -1px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0px 1px 3px 0px var(--tw-shadow-color,#0000001a), 0px 1px 2px 0px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.inset-ring{--tw-inset-ring-shadow:inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-bg-primary{--tw-ring-color:var(--color-bg-primary)}.ring-border-brand-secondary{--tw-ring-color:var(--color-border-brand-secondary)}.ring-border-focus-ring{--tw-ring-color:var(--color-border-focus-ring)}.ring-border-primary{--tw-ring-color:var(--color-border-primary)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background-color\,border-color\,color\]{transition-property:background-color,border-color,color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background-color\,border-color\]{transition-property:background-color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background-color\,color\,border-color\]{transition-property:background-color,color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,box-shadow\]{transition-property:border-color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-radius\]{transition-property:border-radius;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-\[120ms\]{--tw-duration:.12s;transition-duration:.12s}.\[transition-duration\:var\(--duration-base\)\]{transition-duration:var(--duration-base)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.\[transition-timing-function\:var\(--ease-standard\)\]{transition-timing-function:var(--ease-standard)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[--banner-accent\:var\(--color-icon-error-primary\)\]{--banner-accent:var(--color-icon-error-primary)}.\[--banner-accent\:var\(--color-icon-info-primary\)\]{--banner-accent:var(--color-icon-info-primary)}.\[--banner-accent\:var\(--color-icon-on-error\)\]{--banner-accent:var(--color-icon-on-error)}.\[--banner-accent\:var\(--color-icon-on-info\)\]{--banner-accent:var(--color-icon-on-info)}.\[--banner-accent\:var\(--color-icon-on-purple\)\]{--banner-accent:var(--color-icon-on-purple)}.\[--banner-accent\:var\(--color-icon-on-success\)\]{--banner-accent:var(--color-icon-on-success)}.\[--banner-accent\:var\(--color-icon-on-warning\)\]{--banner-accent:var(--color-icon-on-warning)}.\[--banner-accent\:var\(--color-icon-purple-primary\)\]{--banner-accent:var(--color-icon-purple-primary)}.\[--banner-accent\:var\(--color-icon-success-primary\)\]{--banner-accent:var(--color-icon-success-primary)}.\[--banner-accent\:var\(--color-icon-warning-primary\)\]{--banner-accent:var(--color-icon-warning-primary)}.\[--toast-accent\:var\(--color-icon-error-primary\)\]{--toast-accent:var(--color-icon-error-primary)}.\[--toast-accent\:var\(--color-icon-info-primary\)\]{--toast-accent:var(--color-icon-info-primary)}.\[--toast-accent\:var\(--color-icon-purple-primary\)\]{--toast-accent:var(--color-icon-purple-primary)}.\[--toast-accent\:var\(--color-icon-success-primary\)\]{--toast-accent:var(--color-icon-success-primary)}.\[--toast-accent\:var\(--color-icon-warning-primary\)\]{--toast-accent:var(--color-icon-warning-primary)}.ring-inset{--tw-ring-inset:inset}.group-focus-within\/message\:pointer-events-auto:is(:where(.group\/message):focus-within *){pointer-events:auto}.group-focus-within\/message\:hidden:is(:where(.group\/message):focus-within *){display:none}.group-focus-within\/message\:inline:is(:where(.group\/message):focus-within *){display:inline}.group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *){opacity:1}@media(hover:hover){.group-hover\/message\:pointer-events-auto:is(:where(.group\/message):hover *){pointer-events:auto}.group-hover\/message\:hidden:is(:where(.group\/message):hover *){display:none}.group-hover\/message\:inline:is(:where(.group\/message):hover *){display:inline}.group-hover\/message\:opacity-100:is(:where(.group\/message):hover *){opacity:1}}.group-disabled\:bg-icon-disabled:is(:where(.group):disabled *){background-color:var(--color-icon-disabled)}.group-has-\[\:disabled\]\/cbf\:text-text-disabled:is(:where(.group\/cbf):has(:disabled) *),.group-has-\[\:disabled\]\/radio\:text-text-disabled:is(:where(.group\/radio):has(:disabled) *){color:var(--color-text-disabled)}.group-has-\[\[aria-invalid\=true\]\]\/cbf\:text-text-error-primary:is(:where(.group\/cbf):has([aria-invalid=true]) *){color:var(--color-text-error-primary)}.group-aria-\[invalid\=true\]\/dz\:bg-transparent:is(:where(.group\/dz)[aria-invalid=true] *){background-color:#0000}.group-aria-\[invalid\=true\]\/dz\:text-icon-error-primary:is(:where(.group\/dz)[aria-invalid=true] *){color:var(--color-icon-error-primary)}.group-aria-\[invalid\=true\]\/dz\:text-text-error-primary:is(:where(.group\/dz)[aria-invalid=true] *){color:var(--color-text-error-primary)}.group-aria-\[invalid\=true\]\/radio-group\:bg-bg-error-primary:is(:where(.group\/radio-group)[aria-invalid=true] *){background-color:var(--color-bg-error-primary)}.group-aria-\[invalid\=true\]\/radio-group\:text-text-error-primary:is(:where(.group\/radio-group)[aria-invalid=true] *){color:var(--color-text-error-primary)}.group-aria-\[sort\=ascending\]\:-rotate-180:is(:where(.group)[aria-sort=ascending] *){rotate:-180deg}.group-aria-\[sort\=ascending\]\:text-text-primary:is(:where(.group)[aria-sort=ascending] *),.group-aria-\[sort\=descending\]\:text-text-primary:is(:where(.group)[aria-sort=descending] *){color:var(--color-text-primary)}.group-data-\[dragover\=true\]\/dz\:bg-bg-brand-secondary:is(:where(.group\/dz)[data-dragover=true] *){background-color:var(--color-bg-brand-secondary)}.group-data-\[dragover\=true\]\/dz\:text-white:is(:where(.group\/dz)[data-dragover=true] *){color:var(--color-white)}.group-data-\[orientation\=horizontal\]\:top-4:is(:where(.group)[data-orientation=horizontal] *){top:calc(var(--spacing) * 4)}.group-data-\[orientation\=horizontal\]\:right-\[calc\(-50\%\+22px\)\]:is(:where(.group)[data-orientation=horizontal] *){right:calc(22px - 50%)}.group-data-\[orientation\=horizontal\]\:left-\[calc\(50\%\+22px\)\]:is(:where(.group)[data-orientation=horizontal] *){left:calc(50% + 22px)}.group-data-\[orientation\=horizontal\]\:h-0\.5:is(:where(.group)[data-orientation=horizontal] *){height:calc(var(--spacing) * .5)}.group-data-\[orientation\=horizontal\]\:text-center:is(:where(.group)[data-orientation=horizontal] *){text-align:center}.group-data-\[orientation\=vertical\]\:top-9:is(:where(.group)[data-orientation=vertical] *){top:calc(var(--spacing) * 9)}.group-data-\[orientation\=vertical\]\:bottom-1:is(:where(.group)[data-orientation=vertical] *){bottom:calc(var(--spacing) * 1)}.group-data-\[orientation\=vertical\]\:left-\[15px\]:is(:where(.group)[data-orientation=vertical] *){left:15px}.group-data-\[orientation\=vertical\]\:w-0\.5:is(:where(.group)[data-orientation=vertical] *){width:calc(var(--spacing) * .5)}.group-data-\[orientation\=vertical\]\:text-sm:is(:where(.group)[data-orientation=vertical] *){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.group-data-\[orientation\=vertical\]\:font-semibold:is(:where(.group)[data-orientation=vertical] *){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.group-data-\[state\=active\]\:border-bg-brand-secondary:is(:where(.group)[data-state=active] *){border-color:var(--color-bg-brand-secondary)}.group-data-\[state\=active\]\:bg-bg-brand-secondary:is(:where(.group)[data-state=active] *){background-color:var(--color-bg-brand-secondary)}.group-data-\[state\=active\]\:bg-bg-overlay-inverse:is(:where(.group)[data-state=active] *){background-color:var(--color-bg-overlay-inverse)}.group-data-\[state\=active\]\:font-semibold:is(:where(.group)[data-state=active] *){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.group-data-\[state\=active\]\:text-text-brand-primary:is(:where(.group)[data-state=active] *){color:var(--color-text-brand-primary)}.group-data-\[state\=active\]\:text-text-on-brand:is(:where(.group)[data-state=active] *){color:var(--color-text-on-brand)}.group-data-\[state\=active\]\:text-text-primary:is(:where(.group)[data-state=active] *){color:var(--color-text-primary)}.group-data-\[state\=active\]\:text-text-white:is(:where(.group)[data-state=active] *){color:var(--color-text-white)}.group-data-\[state\=active\]\:shadow-\[0_0_0_3px_var\(--color-bg-brand-primary\)\]:is(:where(.group)[data-state=active] *){--tw-shadow:0 0 0 3px var(--tw-shadow-color,var(--color-bg-brand-primary));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-data-\[state\=active\]\:shadow-\[0_0_0_4px_var\(--color-bg-brand-primary\)\]:is(:where(.group)[data-state=active] *){--tw-shadow:0 0 0 4px var(--tw-shadow-color,var(--color-bg-brand-primary));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.group-data-\[state\=checked\]\:block:is(:where(.group)[data-state=checked] *){display:block}.group-data-\[state\=checked\]\:scale-100:is(:where(.group)[data-state=checked] *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-data-\[state\=completed\]\:border-bg-brand-secondary:is(:where(.group)[data-state=completed] *){border-color:var(--color-bg-brand-secondary)}.group-data-\[state\=completed\]\:bg-bg-brand-secondary:is(:where(.group)[data-state=completed] *){background-color:var(--color-bg-brand-secondary)}.group-data-\[state\=completed\]\:text-text-secondary:is(:where(.group)[data-state=completed] *){color:var(--color-text-secondary)}.group-data-\[state\=completed\]\:text-text-white:is(:where(.group)[data-state=completed] *){color:var(--color-text-white)}.group-data-\[state\=error\]\/item\:bg-bg-error-primary:is(:where(.group\/item)[data-state=error] *){background-color:var(--color-bg-error-primary)}.group-data-\[state\=error\]\/item\:text-icon-error-primary:is(:where(.group\/item)[data-state=error] *){color:var(--color-icon-error-primary)}.group-data-\[state\=error\]\/item\:text-text-error-primary:is(:where(.group\/item)[data-state=error] *){color:var(--color-text-error-primary)}.group-data-\[state\=indeterminate\]\:block:is(:where(.group)[data-state=indeterminate] *){display:block}.group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state=open] *){rotate:180deg}.group-data-\[state\=success\]\/item\:bg-bg-success-primary:is(:where(.group\/item)[data-state=success] *){background-color:var(--color-bg-success-primary)}.group-data-\[state\=success\]\/item\:text-icon-success-primary:is(:where(.group\/item)[data-state=success] *){color:var(--color-icon-success-primary)}.group-data-\[state\=uploading\]\/item\:bg-bg-brand-primary:is(:where(.group\/item)[data-state=uploading] *){background-color:var(--color-bg-brand-primary)}.group-data-\[state\=uploading\]\/item\:text-icon-brand-primary:is(:where(.group\/item)[data-state=uploading] *){color:var(--color-icon-brand-primary)}.peer-data-\[validated\=true\]\:block:is(:where(.peer)[data-validated=true]~*){display:block}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing) * 7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-text-primary::file-selector-button{color:var(--color-text-primary)}.placeholder\:text-text-placeholder::placeholder{color:var(--color-text-placeholder)}.placeholder\:text-text-tertiary::placeholder{color:var(--color-text-tertiary)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:h-7:before{content:var(--tw-content);height:calc(var(--spacing) * 7)}.before\:h-px:before{content:var(--tw-content);height:1px}.before\:w-7:before{content:var(--tw-content);width:calc(var(--spacing) * 7)}.before\:w-px:before{content:var(--tw-content);width:1px}.before\:bg-border-primary:before{content:var(--tw-content);background-color:var(--color-border-primary)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.first\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:border-border-brand-secondary:focus-within{border-color:var(--color-border-brand-secondary)}.focus-within\:border-border-error-secondary:focus-within{border-color:var(--color-border-error-secondary)}@media(hover:hover){.hover\:border-border-secondary:hover{border-color:var(--color-border-secondary)}.hover\:border-border-tertiary:hover{border-color:var(--color-border-tertiary)}.hover\:border-red-500:hover{border-color:var(--color-red-500)}.hover\:bg-bg-brand-hover:hover{background-color:var(--color-bg-brand-hover)}.hover\:bg-bg-brand-primary:hover{background-color:var(--color-bg-brand-primary)}.hover\:bg-bg-error-primary:hover{background-color:var(--color-bg-error-primary)}.hover\:bg-bg-secondary:hover{background-color:var(--color-bg-secondary)}.hover\:bg-bg-tertiary:hover{background-color:var(--color-bg-tertiary)}.hover\:bg-black-alpha-50:hover{background-color:var(--color-black-alpha-50)}.hover\:bg-slate-400:hover{background-color:var(--color-slate-400)}.hover\:bg-white-alpha-300:hover{background-color:var(--color-white-alpha-300)}.hover\:text-icon-brand-secondary:hover{color:var(--color-icon-brand-secondary)}.hover\:text-icon-error-primary:hover{color:var(--color-icon-error-primary)}.hover\:text-icon-primary:hover{color:var(--color-icon-primary)}.hover\:text-text-brand-primary:hover{color:var(--color-text-brand-primary)}.hover\:text-text-link-hover:hover{color:var(--color-text-link-hover)}.hover\:text-text-primary:hover{color:var(--color-text-primary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-2:hover{text-underline-offset:2px}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}}.focus\:bg-bg-brand-primary:focus{background-color:var(--color-bg-brand-primary)}.focus\:font-semibold:focus{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.focus\:text-text-brand-primary:focus{color:var(--color-text-brand-primary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-border-focus-ring:focus-visible{border-color:var(--color-border-focus-ring)}.focus-visible\:text-icon-primary:focus-visible{color:var(--color-icon-primary)}.focus-visible\:text-text-primary:focus-visible{color:var(--color-text-primary)}.focus-visible\:opacity-100:focus-visible{opacity:1}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-border-focus-ring:focus-visible{--tw-ring-color:var(--color-border-focus-ring)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-transparent:focus-visible{--tw-ring-offset-color:transparent}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.active\:border-red-600:active{border-color:var(--color-red-600)}.active\:bg-bg-brand-active:active{background-color:var(--color-bg-brand-active)}.active\:bg-bg-tertiary:active{background-color:var(--color-bg-tertiary)}.active\:bg-red-100:active{background-color:var(--color-red-100)}.active\:text-blue-900:active{color:var(--color-blue-900)}.active\:text-text-brand-secondary:active{color:var(--color-text-brand-secondary)}.active\:text-text-error-secondary:active{color:var(--color-text-error-secondary)}.active\:text-text-primary:active{color:var(--color-text-primary)}.enabled\:cursor-pointer:enabled{cursor:pointer}@media(hover:hover){.enabled\:hover\:border-border-tertiary:enabled:hover{border-color:var(--color-border-tertiary)}.enabled\:hover\:bg-bg-secondary:enabled:hover{background-color:var(--color-bg-secondary)}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-border-disabled:disabled{border-color:var(--color-border-disabled)}.disabled\:border-transparent:disabled{border-color:#0000}.disabled\:bg-bg-disabled:disabled{background-color:var(--color-bg-disabled)}.disabled\:bg-bg-tertiary:disabled{background-color:var(--color-bg-tertiary)}.disabled\:text-icon-disabled:disabled{color:var(--color-icon-disabled)}.disabled\:text-text-disabled:disabled{color:var(--color-text-disabled)}.disabled\:opacity-40:disabled{opacity:.4}@media(hover:hover){.disabled\:hover\:border-border-primary:disabled:hover{border-color:var(--color-border-primary)}.disabled\:hover\:border-border-secondary:disabled:hover{border-color:var(--color-border-secondary)}.disabled\:hover\:bg-slate-300:disabled:hover{background-color:var(--color-slate-300)}}.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){cursor:not-allowed}.has-\[\:disabled\]\:border-border-secondary:has(:disabled){border-color:var(--color-border-secondary)}.has-\[\:disabled\]\:bg-bg-disabled:has(:disabled){background-color:var(--color-bg-disabled)}.has-\[\:focus-within\]\:not-has-\[\[aria-invalid\=\"true\"\]\]\:not-has-\[\[data-validated\=\"true\"\]\]\:border-border-brand-secondary:has(:focus-within):not(:has([aria-invalid=true])):not(:has([data-validated=true])){border-color:var(--color-border-brand-secondary)}.has-\[\[aria-invalid\=\"true\"\]\]\:border-border-error-secondary:has([aria-invalid=true]){border-color:var(--color-border-error-secondary)}.has-\[\[data-validated\=\"true\"\]\]\:border-border-success-secondary:has([data-validated=true]){border-color:var(--color-border-success-secondary)}.has-\[\[readonly\]\]\:bg-bg-secondary:has([readonly]){background-color:var(--color-bg-secondary)}.aria-\[busy\=true\]\:cursor-progress[aria-busy=true]{cursor:progress}.aria-\[invalid\=true\]\:border-border-error-primary[aria-invalid=true]{border-color:var(--color-border-error-primary)}.aria-\[invalid\=true\]\:border-border-error-secondary[aria-invalid=true]{border-color:var(--color-border-error-secondary)}.aria-\[invalid\=true\]\:bg-bg-error-primary[aria-invalid=true]{background-color:var(--color-bg-error-primary)}.aria-\[invalid\=true\]\:focus-visible\:border-border-error-primary[aria-invalid=true]:focus-visible{border-color:var(--color-border-error-primary)}.aria-\[invalid\=true\]\:focus-visible\:border-border-error-secondary[aria-invalid=true]:focus-visible{border-color:var(--color-border-error-secondary)}.aria-\[invalid\=true\]\:focus-visible\:ring-border-error-primary[aria-invalid=true]:focus-visible{--tw-ring-color:var(--color-border-error-primary)}.aria-\[invalid\=true\]\:focus-visible\:ring-border-error-secondary[aria-invalid=true]:focus-visible{--tw-ring-color:var(--color-border-error-secondary)}.aria-\[pressed\=true\]\:text-text-primary[aria-pressed=true]{color:var(--color-text-primary)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:bg-bg-disabled[data-disabled]{background-color:var(--color-bg-disabled)}.data-\[disabled\]\:text-text-disabled[data-disabled]{color:var(--color-text-disabled)}.data-\[disabled\]\:opacity-40[data-disabled]{opacity:.4}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}@media(hover:hover){.data-\[disabled\]\:hover\:bg-bg-disabled[data-disabled]:hover{background-color:var(--color-bg-disabled)}}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\[disabled\=true\]\:text-text-disabled[data-disabled=true]{color:var(--color-text-disabled)}.data-\[disabled\=true\]\:opacity-40[data-disabled=true]{opacity:.4}.data-\[dragover\=true\]\:border-solid[data-dragover=true]{--tw-border-style:solid;border-style:solid}.data-\[dragover\=true\]\:border-border-brand-secondary[data-dragover=true]{border-color:var(--color-border-brand-secondary)}.data-\[dragover\=true\]\:bg-bg-brand-primary[data-dragover=true]{background-color:var(--color-bg-brand-primary)}.data-\[highlighted\]\:bg-bg-error-primary[data-highlighted]{background-color:var(--color-bg-error-primary)}.data-\[highlighted\]\:bg-bg-secondary[data-highlighted]{background-color:var(--color-bg-secondary)}.data-\[highlighted\]\:not-data-\[selection-start\]\:not-data-\[selection-end\]\:rounded-none[data-highlighted]:not([data-selection-start]):not([data-selection-end]){border-radius:var(--radius-none)}.data-\[highlighted\]\:not-data-\[selection-start\]\:not-data-\[selection-end\]\:bg-bg-brand-primary[data-highlighted]:not([data-selection-start]):not([data-selection-end]){background-color:var(--color-bg-brand-primary)}.data-\[highlighted\]\:not-data-\[selection-start\]\:not-data-\[selection-end\]\:text-text-brand-primary[data-highlighted]:not([data-selection-start]):not([data-selection-end]){color:var(--color-text-brand-primary)}.data-\[orientation\=horizontal\]\:flex[data-orientation=horizontal]{display:flex}.data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=horizontal\]\:flex-1[data-orientation=horizontal]{flex:1}.data-\[orientation\=horizontal\]\:flex-col[data-orientation=horizontal]{flex-direction:column}.data-\[orientation\=horizontal\]\:items-center[data-orientation=horizontal]{align-items:center}.data-\[orientation\=horizontal\]\:items-start[data-orientation=horizontal]{align-items:flex-start}.data-\[orientation\=horizontal\]\:gap-2[data-orientation=horizontal]{gap:calc(var(--spacing) * 2)}.data-\[orientation\=vertical\]\:flex[data-orientation=vertical]{display:flex}.data-\[orientation\=vertical\]\:w-full[data-orientation=vertical]{width:100%}.data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical]{flex-direction:column}.data-\[orientation\=vertical\]\:items-start[data-orientation=vertical]{align-items:flex-start}.data-\[orientation\=vertical\]\:gap-3[data-orientation=vertical]{gap:calc(var(--spacing) * 3)}.data-\[orientation\=vertical\]\:pb-6[data-orientation=vertical]{padding-bottom:calc(var(--spacing) * 6)}.data-\[orientation\=vertical\]\:text-left[data-orientation=vertical]{text-align:left}.data-\[orientation\=vertical\]\:last\:pb-0[data-orientation=vertical]:last-child{padding-bottom:calc(var(--spacing) * 0)}.data-\[outside-view\]\:pointer-events-none[data-outside-view]{pointer-events:none}.data-\[outside-view\]\:text-text-disabled[data-outside-view]{color:var(--color-text-disabled)}.data-\[placeholder\]\:text-text-placeholder[data-placeholder]{color:var(--color-text-placeholder)}.data-\[placeholder\]\:text-text-tertiary[data-placeholder]{color:var(--color-text-tertiary)}.data-\[selected\]\:cursor-default[data-selected]{cursor:default}.data-\[selected\]\:rounded-sm[data-selected]{border-radius:var(--radius-sm)}.data-\[selected\]\:border-bg-brand-secondary[data-selected]{border-color:var(--color-bg-brand-secondary)}.data-\[selected\]\:bg-bg-brand-secondary[data-selected]{background-color:var(--color-bg-brand-secondary)}.data-\[selected\]\:font-semibold[data-selected]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[selected\]\:text-text-white[data-selected]{color:var(--color-text-white)}.data-\[selected\]\:text-white[data-selected]{color:var(--color-white)}.data-\[selected\]\:not-data-\[selection-start\]\:not-data-\[selection-end\]\:rounded-none[data-selected]:not([data-selection-start]):not([data-selection-end]){border-radius:var(--radius-none)}.data-\[selected\]\:not-data-\[selection-start\]\:not-data-\[selection-end\]\:bg-bg-brand-primary[data-selected]:not([data-selection-start]):not([data-selection-end]){background-color:var(--color-bg-brand-primary)}.data-\[selected\]\:not-data-\[selection-start\]\:not-data-\[selection-end\]\:text-text-brand-primary[data-selected]:not([data-selection-start]):not([data-selection-end]){color:var(--color-text-brand-primary)}@media(hover:hover){.data-\[selected\]\:hover\:bg-bg-brand-secondary[data-selected]:hover{background-color:var(--color-bg-brand-secondary)}}.data-\[selected\=true\]\:bg-bg-tertiary[data-selected=true]{background-color:var(--color-bg-tertiary)}@media(hover:hover){.data-\[selected\=true\]\:hover\:bg-bg-tertiary[data-selected=true]:hover{background-color:var(--color-bg-tertiary)}}.data-\[selection-end\]\:rounded-l-none[data-selection-end]{border-top-left-radius:var(--radius-none);border-bottom-left-radius:var(--radius-none)}.data-\[selection-end\]\:rounded-r-sm[data-selection-end]{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.data-\[selection-end\]\:bg-bg-brand-secondary[data-selection-end]{background-color:var(--color-bg-brand-secondary)}.data-\[selection-end\]\:font-semibold[data-selection-end]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[selection-end\]\:text-text-white[data-selection-end]{color:var(--color-text-white)}@media(hover:hover){.data-\[selection-end\]\:hover\:bg-bg-brand-secondary[data-selection-end]:hover{background-color:var(--color-bg-brand-secondary)}}.data-\[selection-start\]\:rounded-l-sm[data-selection-start]{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.data-\[selection-start\]\:rounded-r-none[data-selection-start]{border-top-right-radius:var(--radius-none);border-bottom-right-radius:var(--radius-none)}.data-\[selection-start\]\:bg-bg-brand-secondary[data-selection-start]{background-color:var(--color-bg-brand-secondary)}.data-\[selection-start\]\:font-semibold[data-selection-start]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[selection-start\]\:text-text-white[data-selection-start]{color:var(--color-text-white)}@media(hover:hover){.data-\[selection-start\]\:hover\:bg-bg-brand-secondary[data-selection-start]:hover{background-color:var(--color-bg-brand-secondary)}}.data-\[state\=active\]\:border-bg-brand-secondary[data-state=active]{border-color:var(--color-bg-brand-secondary)}.data-\[state\=active\]\:bg-bg-brand-secondary[data-state=active]{background-color:var(--color-bg-brand-secondary)}.data-\[state\=active\]\:text-text-brand-primary[data-state=active]{color:var(--color-text-brand-primary)}.data-\[state\=active\]\:text-text-on-brand[data-state=active]{color:var(--color-text-on-brand)}.data-\[state\=checked\]\:translate-x-\[18px\][data-state=checked]{--tw-translate-x:18px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:translate-x-\[22px\][data-state=checked]{--tw-translate-x:22px;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[state\=checked\]\:border-bg-brand-secondary[data-state=checked]{border-color:var(--color-bg-brand-secondary)}.data-\[state\=checked\]\:border-border-brand-secondary[data-state=checked]{border-color:var(--color-border-brand-secondary)}.data-\[state\=checked\]\:bg-bg-brand-primary[data-state=checked]{background-color:var(--color-bg-brand-primary)}.data-\[state\=checked\]\:bg-bg-brand-secondary[data-state=checked]{background-color:var(--color-bg-brand-secondary)}.data-\[state\=checked\]\:ring-1[data-state=checked]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.data-\[state\=checked\]\:ring-border-brand-secondary[data-state=checked]{--tw-ring-color:var(--color-border-brand-secondary)}.data-\[state\=checked\]\:ring-inset[data-state=checked]{--tw-ring-inset:inset}@media(hover:hover){.data-\[state\=checked\]\:hover\:bg-bg-brand-hover[data-state=checked]:hover{background-color:var(--color-bg-brand-hover)}.enabled\:data-\[state\=checked\]\:hover\:border-bg-brand-hover:enabled[data-state=checked]:hover{border-color:var(--color-bg-brand-hover)}.enabled\:data-\[state\=checked\]\:hover\:bg-bg-brand-hover:enabled[data-state=checked]:hover{background-color:var(--color-bg-brand-hover)}}.disabled\:data-\[state\=checked\]\:border-slate-300:disabled[data-state=checked]{border-color:var(--color-slate-300)}.disabled\:data-\[state\=checked\]\:bg-slate-300:disabled[data-state=checked]{background-color:var(--color-slate-300)}.disabled\:data-\[state\=checked\]\:opacity-40:disabled[data-state=checked]{opacity:.4}@media(hover:hover){.data-\[state\=checked\]\:disabled\:hover\:bg-bg-brand-secondary[data-state=checked]:disabled:hover{background-color:var(--color-bg-brand-secondary)}}.data-\[state\=closed\]\:pointer-events-none[data-state=closed]{pointer-events:none}.data-\[state\=closed\]\:invisible[data-state=closed]{visibility:hidden}.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:var(--animate-accordion-up)}.data-\[state\=closed\]\:animate-content-hide[data-state=closed]{animation:var(--animate-content-hide)}.data-\[state\=closed\]\:animate-drawer-out-bottom[data-state=closed]{animation:var(--animate-drawer-out-bottom)}.data-\[state\=closed\]\:animate-drawer-out-left[data-state=closed]{animation:var(--animate-drawer-out-left)}.data-\[state\=closed\]\:animate-drawer-out-right[data-state=closed]{animation:var(--animate-drawer-out-right)}.data-\[state\=closed\]\:animate-drawer-out-top[data-state=closed]{animation:var(--animate-drawer-out-top)}.data-\[state\=closed\]\:animate-overlay-hide[data-state=closed]{animation:var(--animate-overlay-hide)}.data-\[state\=closed\]\:animate-toast-hide[data-state=closed]{animation:var(--animate-toast-hide)}.data-\[state\=disabled\]\:pointer-events-none[data-state=disabled]{pointer-events:none}.data-\[state\=disabled\]\:cursor-not-allowed[data-state=disabled]{cursor:not-allowed}.data-\[state\=disabled\]\:border-bg-disabled[data-state=disabled]{border-color:var(--color-bg-disabled)}.data-\[state\=disabled\]\:bg-bg-disabled[data-state=disabled]{background-color:var(--color-bg-disabled)}.data-\[state\=disabled\]\:text-text-disabled[data-state=disabled]{color:var(--color-text-disabled)}.data-\[state\=error\]\:border-border-error-primary[data-state=error]{border-color:var(--color-border-error-primary)}@media(hover:hover){.enabled\:data-\[state\=inactive\]\:hover\:bg-bg-secondary:enabled[data-state=inactive]:hover{background-color:var(--color-bg-secondary)}.enabled\:data-\[state\=inactive\]\:hover\:text-text-primary:enabled[data-state=inactive]:hover{color:var(--color-text-primary)}}.data-\[state\=indeterminate\]\:border-bg-brand-secondary[data-state=indeterminate]{border-color:var(--color-bg-brand-secondary)}.data-\[state\=indeterminate\]\:bg-bg-brand-secondary[data-state=indeterminate]{background-color:var(--color-bg-brand-secondary)}@media(hover:hover){.enabled\:data-\[state\=indeterminate\]\:hover\:border-bg-brand-hover:enabled[data-state=indeterminate]:hover{border-color:var(--color-bg-brand-hover)}.enabled\:data-\[state\=indeterminate\]\:hover\:bg-bg-brand-hover:enabled[data-state=indeterminate]:hover{background-color:var(--color-bg-brand-hover)}}.disabled\:data-\[state\=indeterminate\]\:border-slate-300:disabled[data-state=indeterminate]{border-color:var(--color-slate-300)}.disabled\:data-\[state\=indeterminate\]\:bg-slate-300:disabled[data-state=indeterminate]{background-color:var(--color-slate-300)}.disabled\:data-\[state\=indeterminate\]\:opacity-40:disabled[data-state=indeterminate]{opacity:.4}@media(hover:hover){.data-\[state\=off\]\:hover\:bg-bg-secondary[data-state=off]:hover{background-color:var(--color-bg-secondary)}.data-\[state\=off\]\:hover\:text-icon-primary[data-state=off]:hover{color:var(--color-icon-primary)}}.data-\[state\=on\]\:bg-bg-brand-primary[data-state=on]{background-color:var(--color-bg-brand-primary)}.data-\[state\=on\]\:text-icon-brand-secondary[data-state=on]{color:var(--color-icon-brand-secondary)}@media(hover:hover){.data-\[state\=on\]\:hover\:bg-brand-200[data-state=on]:hover{background-color:var(--color-brand-200)}}.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:var(--animate-accordion-down)}.data-\[state\=open\]\:animate-content-show[data-state=open]{animation:var(--animate-content-show)}.data-\[state\=open\]\:animate-drawer-in-bottom[data-state=open]{animation:var(--animate-drawer-in-bottom)}.data-\[state\=open\]\:animate-drawer-in-left[data-state=open]{animation:var(--animate-drawer-in-left)}.data-\[state\=open\]\:animate-drawer-in-right[data-state=open]{animation:var(--animate-drawer-in-right)}.data-\[state\=open\]\:animate-drawer-in-top[data-state=open]{animation:var(--animate-drawer-in-top)}.data-\[state\=open\]\:animate-overlay-show[data-state=open]{animation:var(--animate-overlay-show)}.data-\[state\=open\]\:animate-toast-show[data-state=open]{animation:var(--animate-toast-show)}.data-\[state\=open\]\:border-border-brand-secondary[data-state=open]{border-color:var(--color-border-brand-secondary)}.data-\[state\=open\]\:bg-bg-secondary[data-state=open]{background-color:var(--color-bg-secondary)}.data-\[state\=selected\]\:border-border-brand-secondary[data-state=selected]{border-color:var(--color-border-brand-secondary)}.data-\[state\=selected\]\:bg-bg-brand-primary[data-state=selected]{background-color:var(--color-bg-brand-primary)}.data-\[state\=selected\]\:text-text-brand-primary[data-state=selected]{color:var(--color-text-brand-primary)}@media(hover:hover){.data-\[state\=selected\]\:hover\:bg-bg-brand-primary[data-state=selected]:hover{background-color:var(--color-bg-brand-primary)}}.group-aria-\[invalid\=true\]\/radio-group\:data-\[state\=unchecked\]\:border-border-error-primary:is(:where(.group\/radio-group)[aria-invalid=true] *)[data-state=unchecked]{border-color:var(--color-border-error-primary)}@media(hover:hover){.enabled\:data-\[state\=unchecked\]\:hover\:border-border-tertiary:enabled[data-state=unchecked]:hover{border-color:var(--color-border-tertiary)}}.disabled\:data-\[state\=unchecked\]\:border-border-disabled:disabled[data-state=unchecked]{border-color:var(--color-border-disabled)}.disabled\:data-\[state\=unchecked\]\:bg-bg-disabled:disabled[data-state=unchecked]{background-color:var(--color-bg-disabled)}.aria-\[invalid\=true\]\:data-\[state\=unchecked\]\:border-border-error-primary[aria-invalid=true][data-state=unchecked]{border-color:var(--color-border-error-primary)}.data-\[highlighted\]\:data-\[state\=unchecked\]\:bg-bg-secondary[data-highlighted][data-state=unchecked]{background-color:var(--color-bg-secondary)}.data-\[highlighted\]\:data-\[state\=unchecked\]\:ring-1[data-highlighted][data-state=unchecked]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.data-\[highlighted\]\:data-\[state\=unchecked\]\:ring-border-primary[data-highlighted][data-state=unchecked]{--tw-ring-color:var(--color-border-primary)}.data-\[highlighted\]\:data-\[state\=unchecked\]\:ring-inset[data-highlighted][data-state=unchecked]{--tw-ring-inset:inset}.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel]{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=cancel\]\:transition-\[translate\][data-swipe=cancel]{transition-property:translate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.data-\[swipe\=end\]\:animate-toast-hide[data-swipe=end]{animation:var(--animate-toast-hide)}.data-\[swipe\=move\]\:translate-x-\[var\(--reka-toast-swipe-move-x\)\][data-swipe=move]{--tw-translate-x:var(--reka-toast-swipe-move-x);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[swipe\=move\]\:transition-none[data-swipe=move]{transition-property:none}.data-\[today\]\:rounded-sm[data-today]{border-radius:var(--radius-sm)}.data-\[today\]\:border[data-today]{border-style:var(--tw-border-style);border-width:1px}.data-\[today\]\:border-border-brand-secondary[data-today]{border-color:var(--color-border-brand-secondary)}.data-\[today\]\:font-semibold[data-today]{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[today\]\:text-brand-700[data-today]{color:var(--color-brand-700)}.data-\[today\]\:not-data-\[selected\]\:not-data-\[highlighted\]\:rounded-sm[data-today]:not([data-selected]):not([data-highlighted]){border-radius:var(--radius-sm)}.data-\[today\]\:not-data-\[selected\]\:not-data-\[highlighted\]\:border[data-today]:not([data-selected]):not([data-highlighted]){border-style:var(--tw-border-style);border-width:1px}.data-\[today\]\:not-data-\[selected\]\:not-data-\[highlighted\]\:border-border-brand-secondary[data-today]:not([data-selected]):not([data-highlighted]){border-color:var(--color-border-brand-secondary)}.data-\[today\]\:not-data-\[selected\]\:not-data-\[highlighted\]\:font-semibold[data-today]:not([data-selected]):not([data-highlighted]){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.data-\[today\]\:not-data-\[selected\]\:not-data-\[highlighted\]\:text-brand-700[data-today]:not([data-selected]):not([data-highlighted]){color:var(--color-brand-700)}.data-\[today\]\:data-\[selected\]\:border-0[data-today][data-selected]{border-style:var(--tw-border-style);border-width:0}.data-\[today\]\:data-\[selected\]\:text-text-white[data-today][data-selected]{color:var(--color-text-white)}.data-\[today\]\:data-\[selected\]\:after\:absolute[data-today][data-selected]:after{content:var(--tw-content);position:absolute}.data-\[today\]\:data-\[selected\]\:after\:bottom-1[data-today][data-selected]:after{content:var(--tw-content);bottom:calc(var(--spacing) * 1)}.data-\[today\]\:data-\[selected\]\:after\:left-1\/2[data-today][data-selected]:after{content:var(--tw-content);left:50%}.data-\[today\]\:data-\[selected\]\:after\:size-1[data-today][data-selected]:after{content:var(--tw-content);width:calc(var(--spacing) * 1);height:calc(var(--spacing) * 1)}.data-\[today\]\:data-\[selected\]\:after\:-translate-x-1\/2[data-today][data-selected]:after{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[today\]\:data-\[selected\]\:after\:rounded-full[data-today][data-selected]:after{content:var(--tw-content);border-radius:var(--radius-full)}.data-\[today\]\:data-\[selected\]\:after\:bg-current[data-today][data-selected]:after{content:var(--tw-content);background-color:currentColor}.data-\[today\]\:data-\[selected\]\:after\:content-\[\'\'\][data-today][data-selected]:after{--tw-content:"";content:var(--tw-content)}.data-\[unavailable\]\:pointer-events-none[data-unavailable]{pointer-events:none}.data-\[unavailable\]\:text-text-disabled[data-unavailable]{color:var(--color-text-disabled)}.data-\[unavailable\]\:opacity-40[data-unavailable]{opacity:.4}@media(prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse)}}@media(prefers-reduced-motion:reduce){.motion-reduce\:translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.motion-reduce\:animate-none{animation:none}.motion-reduce\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.motion-reduce\:transition-none{transition-property:none}}@media not all and (min-width:520px){.max-\[520px\]\:mt-1{margin-top:calc(var(--spacing) * 1)}.max-\[520px\]\:ml-12{margin-left:calc(var(--spacing) * 12)}.max-\[520px\]\:basis-full{flex-basis:100%}.max-\[520px\]\:justify-start{justify-content:flex-start}}.\[\&_img\]\:block img{display:block}.\[\&_img\]\:size-6 img{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.\[\&_img\]\:h-full img{height:100%}.\[\&_img\]\:w-full img{width:100%}.\[\&_img\]\:max-w-\[280px\] img{max-width:280px}.\[\&_img\]\:flex-none img{flex:none}.\[\&_img\]\:rounded-sm img{border-radius:var(--radius-sm)}.\[\&_img\]\:object-cover img{object-fit:cover}.\[\&_svg\]\:block svg{display:block}.\[\&_svg\]\:size-2\.5 svg{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.\[\&_svg\]\:size-3 svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\]\:size-3\.5 svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:size-5 svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.\[\&_svg\]\:size-6 svg{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.\[\&_svg\]\:size-8 svg{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.\[\&_svg\]\:size-15 svg{width:calc(var(--spacing) * 15);height:calc(var(--spacing) * 15)}.\[\&_svg\]\:size-\[22px\] svg{width:22px;height:22px}.\[\&_svg\]\:flex-none svg{flex:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\]\:text-icon-primary svg{color:var(--color-icon-primary)}.\[\&_svg\]\:text-text-error-primary svg{color:var(--color-text-error-primary)}.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button{appearance:none}.\[\&\:\:-webkit-search-decoration\]\:appearance-none::-webkit-search-decoration{appearance:none}.\[\&\:not\(\[data-selected\]\)\:not\(\:disabled\)\:hover\]\:border-border-tertiary:not([data-selected]):not(:disabled):hover{border-color:var(--color-border-tertiary)}.\[\&\:not\(\[data-selected\]\)\:not\(\:disabled\)\:hover\]\:bg-bg-secondary:not([data-selected]):not(:disabled):hover{background-color:var(--color-bg-secondary)}.\[\&\>\*\]\:relative>*{position:relative}.\[\&\>\*\]\:snap-start>*{scroll-snap-align:start}.\[\&\>\*\]\:ring-2>*{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.\[\&\>\*\]\:ring-bg-primary>*{--tw-ring-color:var(--color-bg-primary)}.\[\&\>\*\:not\(\:first-child\)\]\:-ml-3>:not(:first-child){margin-left:calc(var(--spacing) * -3)}.\[\&\>\*\:nth-child\(1\)\]\:z-\[6\]>:first-child{z-index:6}.\[\&\>\*\:nth-child\(2\)\]\:z-\[5\]>:nth-child(2){z-index:5}.\[\&\>\*\:nth-child\(3\)\]\:z-\[4\]>:nth-child(3){z-index:4}.\[\&\>\*\:nth-child\(4\)\]\:z-\[3\]>:nth-child(4){z-index:3}.\[\&\>\*\:nth-child\(5\)\]\:z-\[2\]>:nth-child(5){z-index:2}.\[\&\>\*\:nth-child\(6\)\]\:z-\[1\]>:nth-child(6){z-index:1}.\[\&\>\[data-card-media\]\>img\]\:block>[data-card-media]>img{display:block}.\[\&\>\[data-card-media\]\>img\]\:h-\[180px\]>[data-card-media]>img{height:180px}.\[\&\>\[data-card-media\]\>img\]\:w-full>[data-card-media]>img{width:100%}.\[\&\>\[data-card-media\]\>img\]\:object-cover>[data-card-media]>img{object-fit:cover}.\[\&\>img\]\:block>img{display:block}.\[\&\>img\]\:size-full>img{width:100%;height:100%}.\[\&\>img\]\:object-cover>img{object-fit:cover}.\[\&\>svg\]\:block>svg{display:block}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:size-6>svg{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.\[\&\>svg\]\:size-\[18px\]>svg{width:18px;height:18px}.\[\&\>svg\]\:w-full>svg{width:100%}.\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:text-icon-error-primary>svg{color:var(--color-icon-error-primary)}.\[\&\>svg\]\:text-icon-secondary>svg{color:var(--color-icon-secondary)}.data-\[disabled\]\:\[\&\>svg\]\:text-icon-disabled[data-disabled]>svg{color:var(--color-icon-disabled)}.\[\&\>tr\]\:last\:border-0>tr:last-child,.\[\&\>tr\:last-child\]\:border-0>tr:last-child{border-style:var(--tw-border-style);border-width:0}@media(hover:none){.\[\@media\(hover\:none\)\]\:pointer-events-auto{pointer-events:auto}.\[\@media\(hover\:none\)\]\:opacity-100{opacity:1}}@media(hover:hover){[data-theme=dark] .\[\[data-theme\=dark\]_\&\]\:hover\:bg-white-alpha-100:hover{background-color:var(--color-white-alpha-100)}}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:focus-within\:border-border-focus-ring\!:focus-within{border-color:var(--color-border-focus-ring)!important}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:focus-within\:ring-1:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:focus-within\:ring-border-focus-ring:focus-within{--tw-ring-color:var(--color-border-focus-ring)}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:focus-within\:ring-inset:focus-within{--tw-ring-inset:inset}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:has-\[\:focus-within\]\:border-border-focus-ring\!:has(:focus-within){border-color:var(--color-border-focus-ring)!important}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:has-\[\:focus-within\]\:ring-1:has(:focus-within){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:has-\[\:focus-within\]\:ring-border-focus-ring:has(:focus-within){--tw-ring-color:var(--color-border-focus-ring)}html[data-focus-mode=keyboard] .\[html\[data-focus-mode\=keyboard\]_\&\]\:has-\[\:focus-within\]\:ring-inset:has(:focus-within){--tw-ring-inset:inset}}:root{--brand:#27b199;--duration-fast:.12s;--duration-base:.15s;--duration-moderate:.18s;--duration-slow:.2s;--ease-emphasized:cubic-bezier(.16, 1, .3, 1);--ease-standard:ease-out;--ease-exit:ease-in;--z-base:0;--z-sticky:1100;--z-fixed:1200;--z-modal-backdrop:1300;--z-modal:1400;--z-dropdown:1500;--z-popover:1600;--z-tooltip:1700;--z-toast:1800;--shadow-inner:inset 0px 2px 4px 0px #0000000d;--shadow-knob:0 1px 2px 0px #0003;--shadow-drawer:-8px 0 32px 0px #0000002e}[data-theme=dark]{--color-bg-primary:var(--color-slate-900);--color-bg-secondary:var(--color-slate-800);--color-bg-tertiary:var(--color-slate-700);--color-bg-inverse:var(--color-slate-50);--color-bg-black-solid:var(--color-slate-950);--color-bg-disabled:var(--color-slate-800);--color-bg-disabled-alt:var(--color-slate-700);--color-bg-brand-primary:var(--color-brand-950);--color-bg-brand-secondary:var(--color-brand-500);--color-bg-brand-hover:var(--color-brand-400);--color-bg-brand-active:var(--color-brand-300);--color-bg-error-primary:var(--color-red-950);--color-bg-error-secondary:var(--color-red-500);--color-bg-error-hover:var(--color-red-400);--color-bg-error-active:var(--color-red-300);--color-bg-success-primary:var(--color-green-950);--color-bg-success-secondary:var(--color-green-500);--color-bg-success-hover:var(--color-green-400);--color-bg-success-active:var(--color-green-300);--color-bg-warning-primary:var(--color-amber-950);--color-bg-warning-secondary:var(--color-amber-500);--color-bg-warning-hover:var(--color-amber-400);--color-bg-warning-active:var(--color-amber-300);--color-bg-info-primary:var(--color-blue-950);--color-bg-info-secondary:var(--color-blue-500);--color-bg-info-hover:var(--color-blue-400);--color-bg-info-active:var(--color-blue-300);--color-bg-overlay-primary:var(--color-black-alpha-500);--color-bg-overlay-secondary:var(--color-black-alpha-700);--color-bg-overlay-inverse:var(--color-white-alpha-100);--color-bg-orange-primary:var(--color-orange-950);--color-bg-orange-secondary:var(--color-orange-500);--color-bg-purple-primary:var(--color-purple-950);--color-bg-purple-secondary:var(--color-purple-500);--color-bg-pink-primary:var(--color-pink-950);--color-bg-pink-secondary:var(--color-pink-500);--color-bg-bubble-customer:var(--color-bg-secondary);--color-bg-bubble-admin:var(--color-brand-500);--color-bg-bubble-agent:var(--color-brand-700);--color-bg-bubble-bot:var(--color-slate-600);--color-bg-bubble-whisper:var(--color-bg-warning-primary);--color-bg-row-selected:var(--color-brand-900);--color-text-primary:var(--color-slate-50);--color-text-secondary:var(--color-slate-300);--color-text-tertiary:var(--color-slate-400);--color-text-disabled:var(--color-slate-600);--color-text-placeholder:var(--color-slate-400);--color-text-white:var(--color-white);--color-text-inverse:var(--color-slate-900);--color-text-brand-primary:var(--color-brand-400);--color-text-brand-secondary:var(--color-brand-300);--color-text-error-primary:var(--color-red-400);--color-text-error-secondary:var(--color-red-300);--color-text-success-primary:var(--color-green-400);--color-text-success-secondary:var(--color-green-300);--color-text-warning-primary:var(--color-amber-400);--color-text-warning-secondary:var(--color-amber-300);--color-text-info-primary:var(--color-blue-400);--color-text-info-secondary:var(--color-blue-300);--color-text-orange-primary:var(--color-orange-400);--color-text-orange-secondary:var(--color-orange-300);--color-text-purple-primary:var(--color-purple-400);--color-text-purple-secondary:var(--color-purple-300);--color-text-pink-primary:var(--color-pink-400);--color-text-pink-secondary:var(--color-pink-300);--color-text-on-brand:var(--color-slate-950);--color-text-on-error:var(--color-slate-950);--color-text-on-success:var(--color-slate-950);--color-text-on-warning:var(--color-slate-950);--color-text-on-info:var(--color-slate-950);--color-text-link:var(--color-blue-400);--color-text-link-hover:var(--color-blue-300);--color-text-link-visited:var(--color-purple-400);--color-icon-primary:var(--color-slate-50);--color-icon-secondary:var(--color-slate-300);--color-icon-tertiary:var(--color-slate-400);--color-icon-disabled:var(--color-slate-600);--color-icon-disabled-alt:var(--color-slate-700);--color-icon-placeholder:var(--color-slate-400);--color-icon-white:var(--color-white);--color-icon-inverse:var(--color-slate-900);--color-icon-brand-primary:var(--color-brand-400);--color-icon-brand-secondary:var(--color-brand-300);--color-icon-error-primary:var(--color-red-400);--color-icon-error-secondary:var(--color-red-300);--color-icon-success-primary:var(--color-green-400);--color-icon-success-secondary:var(--color-green-300);--color-icon-warning-primary:var(--color-amber-400);--color-icon-warning-secondary:var(--color-amber-300);--color-icon-info-primary:var(--color-blue-400);--color-icon-info-secondary:var(--color-blue-300);--color-icon-orange-primary:var(--color-orange-400);--color-icon-orange-secondary:var(--color-orange-300);--color-icon-purple-primary:var(--color-purple-400);--color-icon-purple-secondary:var(--color-purple-300);--color-icon-pink-primary:var(--color-pink-400);--color-icon-pink-secondary:var(--color-pink-300);--color-icon-on-brand:var(--color-slate-950);--color-icon-on-error:var(--color-slate-950);--color-icon-on-success:var(--color-slate-950);--color-icon-on-warning:var(--color-slate-950);--color-icon-on-info:var(--color-slate-950);--color-border-primary:var(--color-slate-500);--color-border-secondary:var(--color-slate-400);--color-border-tertiary:var(--color-slate-500);--color-border-input:var(--color-slate-500);--color-border-primary-solid:var(--color-slate-50);--color-border-disabled:var(--color-slate-500);--color-border-disabled-alt:var(--color-slate-400);--color-border-focus-ring:var(--color-blue-400);--color-border-brand-primary:var(--color-brand-600);--color-border-brand-secondary:var(--color-brand-500);--color-border-brand-focus:var(--color-brand-400);--color-border-error-primary:var(--color-red-500);--color-border-error-secondary:var(--color-red-500);--color-border-success-primary:var(--color-green-500);--color-border-success-secondary:var(--color-green-500);--color-border-warning-primary:var(--color-amber-500);--color-border-warning-secondary:var(--color-amber-500);--color-border-info-primary:var(--color-blue-500);--color-border-info-secondary:var(--color-blue-500);--color-border-orange-primary:var(--color-orange-500);--color-border-orange-secondary:var(--color-orange-500);--color-border-purple-primary:var(--color-purple-500);--color-border-purple-secondary:var(--color-purple-500);--color-border-pink-primary:var(--color-pink-500);--color-border-pink-secondary:var(--color-pink-500);--color-interactive-primary:var(--color-brand-500);--color-interactive-primary-hover:var(--color-brand-400);--color-interactive-primary-active:var(--color-brand-300);--color-interactive-primary-disabled:var(--color-brand-950);--color-interactive-secondary:var(--color-slate-700);--color-interactive-secondary-hover:var(--color-slate-600);--color-interactive-secondary-active:var(--color-slate-500);--color-interactive-secondary-disabled:var(--color-slate-800);--color-interactive-error:var(--color-red-500);--color-interactive-error-hover:var(--color-red-400);--color-interactive-error-active:var(--color-red-300);--color-interactive-error-disabled:var(--color-red-950);--color-interactive-warning:var(--color-amber-500);--color-interactive-warning-hover:var(--color-amber-400);--color-interactive-warning-active:var(--color-amber-300);--color-interactive-warning-disabled:var(--color-amber-950);--color-interactive-success:var(--color-green-500);--color-interactive-success-hover:var(--color-green-400);--color-interactive-success-active:var(--color-green-300);--color-interactive-success-disabled:var(--color-green-950);--color-interactive-info:var(--color-blue-500);--color-interactive-info-hover:var(--color-blue-400);--color-interactive-info-active:var(--color-blue-300);--color-interactive-info-disabled:var(--color-blue-950)}[data-theme=light]{--color-bg-primary:var(--color-white);--color-bg-secondary:var(--color-slate-50);--color-bg-tertiary:var(--color-slate-100);--color-bg-inverse:var(--color-slate-900);--color-bg-black-solid:var(--color-slate-900);--color-bg-disabled:var(--color-slate-100);--color-bg-disabled-alt:var(--color-slate-200);--color-bg-brand-primary:var(--color-brand-100);--color-bg-brand-primary-hover:var(--color-brand-200);--color-bg-brand-secondary:var(--color-brand-700);--color-bg-brand-hover:var(--color-brand-800);--color-bg-brand-active:var(--color-brand-900);--color-bg-error-primary:var(--color-red-100);--color-bg-error-secondary:var(--color-red-700);--color-bg-error-hover:var(--color-red-800);--color-bg-error-active:var(--color-red-900);--color-bg-success-primary:var(--color-green-100);--color-bg-success-secondary:var(--color-green-700);--color-bg-success-hover:var(--color-green-800);--color-bg-success-active:var(--color-green-900);--color-bg-warning-primary:var(--color-amber-100);--color-bg-warning-secondary:var(--color-amber-700);--color-bg-warning-hover:var(--color-amber-800);--color-bg-warning-active:var(--color-amber-900);--color-bg-info-primary:var(--color-blue-100);--color-bg-info-secondary:var(--color-blue-700);--color-bg-info-hover:var(--color-blue-800);--color-bg-info-active:var(--color-blue-900);--color-bg-overlay-primary:var(--color-black-alpha-500);--color-bg-overlay-secondary:var(--color-black-alpha-700);--color-bg-overlay-inverse:var(--color-white-alpha-500);--color-bg-orange-primary:var(--color-orange-100);--color-bg-orange-secondary:var(--color-orange-700);--color-bg-purple-primary:var(--color-purple-100);--color-bg-purple-secondary:var(--color-purple-700);--color-bg-pink-primary:var(--color-pink-100);--color-bg-pink-secondary:var(--color-pink-700);--color-bg-bubble-customer:var(--color-bg-secondary);--color-bg-bubble-admin:var(--color-brand-500);--color-bg-bubble-agent:var(--color-brand-700);--color-bg-bubble-bot:var(--color-slate-600);--color-bg-bubble-whisper:var(--color-bg-warning-primary);--color-bg-row-selected:var(--color-brand-100);--color-text-primary:var(--color-slate-900);--color-text-secondary:var(--color-slate-600);--color-text-tertiary:var(--color-slate-500);--color-text-disabled:var(--color-slate-400);--color-text-placeholder:var(--color-slate-500);--color-text-white:var(--color-white);--color-text-inverse:var(--color-white);--color-text-brand-primary:var(--color-brand-800);--color-text-brand-secondary:var(--color-brand-900);--color-text-error-primary:var(--color-red-600);--color-text-error-secondary:var(--color-red-800);--color-text-success-primary:var(--color-green-600);--color-text-success-secondary:var(--color-green-800);--color-text-warning-primary:var(--color-amber-700);--color-text-warning-secondary:var(--color-amber-800);--color-text-info-primary:var(--color-blue-600);--color-text-info-secondary:var(--color-blue-800);--color-text-orange-primary:var(--color-orange-600);--color-text-orange-secondary:var(--color-orange-800);--color-text-purple-primary:var(--color-purple-600);--color-text-purple-secondary:var(--color-purple-800);--color-text-pink-primary:var(--color-pink-600);--color-text-pink-secondary:var(--color-pink-800);--color-text-on-brand:var(--color-white);--color-text-on-purple:var(--color-white);--color-text-on-orange:var(--color-white);--color-text-on-pink:var(--color-white);--color-text-on-error:var(--color-white);--color-text-on-success:var(--color-white);--color-text-on-warning:var(--color-white);--color-text-on-info:var(--color-white);--color-text-link:var(--color-blue-600);--color-text-link-hover:var(--color-blue-800);--color-text-link-visited:var(--color-purple-800);--color-text-link-active:var(--color-blue-900);--color-icon-primary:var(--color-slate-900);--color-icon-secondary:var(--color-slate-600);--color-icon-tertiary:var(--color-slate-500);--color-icon-disabled:var(--color-slate-400);--color-icon-disabled-alt:var(--color-slate-300);--color-icon-placeholder:var(--color-slate-500);--color-icon-white:var(--color-white);--color-icon-inverse:var(--color-white);--color-icon-brand-primary:var(--color-brand-700);--color-icon-brand-secondary:var(--color-brand-800);--color-icon-error-primary:var(--color-red-700);--color-icon-error-secondary:var(--color-red-800);--color-icon-success-primary:var(--color-green-700);--color-icon-success-secondary:var(--color-green-800);--color-icon-warning-primary:var(--color-amber-700);--color-icon-warning-secondary:var(--color-amber-800);--color-icon-info-primary:var(--color-blue-700);--color-icon-info-secondary:var(--color-blue-800);--color-icon-orange-primary:var(--color-orange-700);--color-icon-orange-secondary:var(--color-orange-800);--color-icon-purple-primary:var(--color-purple-700);--color-icon-purple-secondary:var(--color-purple-800);--color-icon-pink-primary:var(--color-pink-700);--color-icon-pink-secondary:var(--color-pink-800);--color-icon-on-brand:var(--color-white);--color-icon-on-purple:var(--color-white);--color-icon-on-orange:var(--color-white);--color-icon-on-pink:var(--color-white);--color-icon-on-error:var(--color-white);--color-icon-on-success:var(--color-white);--color-icon-on-warning:var(--color-white);--color-icon-on-info:var(--color-white);--color-border-primary:var(--color-slate-200);--color-border-secondary:var(--color-slate-300);--color-border-tertiary:var(--color-slate-400);--color-border-input:var(--color-slate-500);--color-border-primary-solid:var(--color-slate-900);--color-border-disabled:var(--color-slate-300);--color-border-disabled-alt:var(--color-slate-200);--color-border-focus-ring:var(--color-blue-700);--color-border-brand-primary:var(--color-brand-600);--color-border-brand-secondary:var(--color-brand-700);--color-border-brand-focus:var(--color-brand-700);--color-border-error-primary:var(--color-red-500);--color-border-error-subtle:var(--color-red-300);--color-border-error-secondary:var(--color-red-700);--color-border-success-primary:var(--color-green-600);--color-border-success-secondary:var(--color-green-700);--color-border-warning-primary:var(--color-amber-600);--color-border-warning-secondary:var(--color-amber-700);--color-border-info-primary:var(--color-blue-500);--color-border-info-secondary:var(--color-blue-700);--color-border-orange-primary:var(--color-orange-600);--color-border-orange-secondary:var(--color-orange-700);--color-border-purple-primary:var(--color-purple-500);--color-border-purple-secondary:var(--color-purple-700);--color-border-pink-primary:var(--color-pink-500);--color-border-pink-secondary:var(--color-pink-700);--color-interactive-primary:var(--color-brand-700);--color-interactive-primary-hover:var(--color-brand-800);--color-interactive-primary-active:var(--color-brand-900);--color-interactive-primary-disabled:var(--color-brand-100);--color-interactive-secondary:var(--color-slate-100);--color-interactive-secondary-hover:var(--color-slate-200);--color-interactive-secondary-active:var(--color-slate-300);--color-interactive-secondary-disabled:var(--color-slate-50);--color-interactive-error:var(--color-red-700);--color-interactive-error-hover:var(--color-red-800);--color-interactive-error-active:var(--color-red-900);--color-interactive-error-disabled:var(--color-red-100);--color-interactive-warning:var(--color-amber-700);--color-interactive-warning-hover:var(--color-amber-800);--color-interactive-warning-active:var(--color-amber-900);--color-interactive-warning-disabled:var(--color-amber-100);--color-interactive-success:var(--color-green-700);--color-interactive-success-hover:var(--color-green-800);--color-interactive-success-active:var(--color-green-900);--color-interactive-success-disabled:var(--color-green-100);--color-interactive-info:var(--color-blue-700);--color-interactive-info-hover:var(--color-blue-800);--color-interactive-info-active:var(--color-blue-900);--color-interactive-info-disabled:var(--color-blue-100);--color-indicator-success:var(--color-green-600);--color-indicator-error:var(--color-red-600);--color-indicator-warning:var(--color-amber-600);--color-indicator-info:var(--color-blue-600);--color-indicator-neutral:var(--color-slate-500)}.ds-view-forward-enter-active{animation:view-forward-in var(--duration-moderate) var(--ease-emphasized) both}.ds-view-forward-leave-active{animation:view-forward-out var(--duration-fast) var(--ease-exit) both}.ds-view-back-enter-active{animation:view-back-in var(--duration-moderate) var(--ease-emphasized) both}.ds-view-back-leave-active{animation:view-back-out var(--duration-fast) var(--ease-exit) both}.ds-view-fade-enter-active{animation:view-fade-in var(--duration-base) var(--ease-standard) both}.ds-view-fade-leave-active{animation:view-fade-out var(--duration-fast) var(--ease-exit) both}@media(prefers-reduced-motion:reduce){.ds-view-forward-enter-active,.ds-view-forward-leave-active,.ds-view-back-enter-active,.ds-view-back-leave-active,.ds-view-fade-enter-active,.ds-view-fade-leave-active{animation:none}}@keyframes view-forward-in{0%{opacity:0;translate:24px}to{opacity:1;translate:0}}@keyframes view-forward-out{0%{opacity:1;translate:0}to{opacity:0;translate:-16px}}@keyframes view-back-in{0%{opacity:0;translate:-24px}to{opacity:1;translate:0}}@keyframes view-back-out{0%{opacity:1;translate:0}to{opacity:0;translate:16px}}@keyframes view-fade-in{0%{opacity:0;translate:0 6px}to{opacity:1;translate:0}}@keyframes view-fade-out{0%{opacity:1}to{opacity:0}}.ds-chat-input-reply-enter-active,.ds-chat-input-reply-leave-active{overflow:hidden}.ds-chat-input-reply-enter-active{transition:height var(--duration-slow) var(--ease-standard),opacity var(--duration-slow) var(--ease-standard)}.ds-chat-input-reply-leave-active{transition:height var(--duration-fast) var(--ease-exit),opacity var(--duration-fast) var(--ease-exit)}.ds-chat-input-reply-enter-from,.ds-chat-input-reply-leave-to{opacity:0;height:0}.ds-chat-input-reply-enter-to,.ds-chat-input-reply-leave-from{height:var(--ds-chat-input-reply-h)}@media(prefers-reduced-motion:reduce){.ds-chat-input-reply-enter-active,.ds-chat-input-reply-leave-active{transition:none}}@property --tw-border-spacing-x{syntax:"<length>";inherits:false;initial-value:0}@property --tw-border-spacing-y{syntax:"<length>";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes overlay-show{0%{opacity:0}to{opacity:1}}@keyframes overlay-hide{0%{opacity:1}to{opacity:0}}@keyframes content-show{0%{opacity:0;scale:.96}to{opacity:1;scale:1}}@keyframes content-hide{0%{opacity:1;scale:1}to{opacity:0;scale:.96}}@keyframes toast-show{0%{opacity:0;translate:100%}to{opacity:1;translate:0}}@keyframes toast-hide{0%{opacity:1}to{opacity:0}}@keyframes accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes drawer-in-right{0%{translate:100%}to{translate:0}}@keyframes drawer-out-right{0%{translate:0}to{translate:100%}}@keyframes drawer-in-left{0%{translate:-100%}to{translate:0}}@keyframes drawer-out-left{0%{translate:0}to{translate:-100%}}@keyframes drawer-in-top{0%{translate:0 -100%}to{translate:0}}@keyframes drawer-out-top{0%{translate:0}to{translate:0 -100%}}@keyframes drawer-in-bottom{0%{translate:0 100%}to{translate:0}}@keyframes drawer-out-bottom{0%{translate:0}to{translate:0 100%}}@keyframes skeleton-pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes dot-loader{0%,80%,to{opacity:.25;scale:.8}40%{opacity:1;scale:1}}.cb-carousel[data-v-c7460cc4]{scrollbar-width:none;-ms-overflow-style:none}.cb-carousel[data-v-c7460cc4]::-webkit-scrollbar{width:0;height:0;display:none}.q-msg-enter-from[data-v-b69dc8b4]{opacity:0}.q-msg-enter-from[data-motion=left][data-v-b69dc8b4]{transform:translate(-16px) scale(.7)}.q-msg-enter-from[data-motion=right][data-v-b69dc8b4]{transform:translate(16px) scale(.7)}.q-msg-enter-from[data-motion=self][data-v-b69dc8b4]{transform:translateY(10px) scale(.4)}.q-msg-enter-active[data-v-b69dc8b4]{transition:opacity .18s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1)}.q-msg-enter-active[data-motion=left][data-v-b69dc8b4]{transform-origin:bottom left}.q-msg-enter-active[data-motion=right][data-v-b69dc8b4]{transform-origin:bottom right}.q-msg-enter-active[data-motion=self][data-v-b69dc8b4]{transform-origin:bottom right;transition:opacity .14s ease-out,transform .32s cubic-bezier(.22,1.3,.32,1)}.q-msg-enter-to[data-v-b69dc8b4]{opacity:1;transform:none}.q-none-enter-from[data-v-b69dc8b4],.q-none-enter-active[data-v-b69dc8b4],.q-none-enter-to[data-v-b69dc8b4]{opacity:1;transform:none;transition:none}.q-wa-enter-from[data-v-b69dc8b4]{opacity:0;transform:translateY(8px)}.q-wa-enter-active[data-v-b69dc8b4]{transition:opacity .16s ease-out,transform .2s ease-out}.q-wa-enter-to[data-v-b69dc8b4]{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.q-msg-enter-from[data-v-b69dc8b4],.q-msg-enter-from[data-motion=left][data-v-b69dc8b4],.q-msg-enter-from[data-motion=right][data-v-b69dc8b4],.q-msg-enter-from[data-motion=self][data-v-b69dc8b4],.q-wa-enter-from[data-v-b69dc8b4]{opacity:1;transform:none}.q-msg-enter-active[data-v-b69dc8b4],.q-msg-enter-active[data-motion=self][data-v-b69dc8b4],.q-wa-enter-active[data-v-b69dc8b4]{transition:none}}.qds-timeline[data-v-4fbc05a4]{display:flex;flex-direction:column;gap:20px}.qds-timeline-group[data-v-00de07c6]{display:flex;flex-direction:column;gap:12px}.qds-timeline-group__label[data-v-00de07c6]{font:var(--fw-semibold) 12px/18px var(--font-sans);color:var(--color-text-tertiary)}.qds-timeline-group__items[data-v-00de07c6]{display:flex;flex-direction:column;gap:4px}.qds-timeline-group__items[data-v-00de07c6] .qds-timeline-item:last-child .qds-timeline-item__line{display:none}.qds-timeline-item[data-v-b26f510a]{display:flex;gap:12px}.qds-timeline-item__rail[data-v-b26f510a]{display:flex;flex-direction:column;align-items:center;flex:none}.qds-timeline-item__dot[data-v-b26f510a]{width:36px;height:36px;border-radius:var(--radius-full, 9999px);display:inline-flex;align-items:center;justify-content:center;background:var(--color-bg-tertiary);color:var(--color-text-secondary)}.qds-timeline-item__dot[data-tone=brand][data-v-b26f510a]{background:var(--color-bg-brand-secondary);color:var(--color-text-brand-primary)}.qds-timeline-item__dot[data-tone=info][data-v-b26f510a]{background:var(--color-bg-info-secondary);color:var(--color-text-info-primary)}.qds-timeline-item__dot[data-tone=success][data-v-b26f510a]{background:var(--color-bg-success-secondary);color:var(--color-text-success-primary)}.qds-timeline-item__dot[data-tone=warning][data-v-b26f510a]{background:var(--color-bg-warning-secondary);color:var(--color-text-warning-primary)}.qds-timeline-item__line[data-v-b26f510a]{flex:1;width:2px;background:var(--color-border-secondary);margin-top:4px}.qds-timeline-item__body[data-v-b26f510a]{flex:1;min-width:0;padding-bottom:12px}.qds-timeline-item__head[data-v-b26f510a]{display:flex;align-items:baseline;gap:8px;justify-content:space-between}.qds-timeline-item__content[data-v-b26f510a]{font:var(--fw-regular) 14px/20px var(--font-sans);color:var(--color-text-primary);min-width:0}.qds-timeline-item__content[data-v-b26f510a] b{font-weight:var(--fw-semibold)}.qds-timeline-item__time[data-v-b26f510a]{flex:none;font:var(--fw-regular) 12px/18px var(--font-sans);color:var(--color-text-tertiary)}
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;
    --color-red-900: #7f1d1d;
    --color-red-950: #450a0a;
    --color-orange-100: #ffedd5;
    --color-orange-300: #fdba74;
    --color-orange-400: #fb923c;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;
    --color-orange-800: #9a3412;
    --color-orange-950: #431407;
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;
    --color-amber-950: #451a03;
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-300: #86efac;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;
    --color-green-900: #14532d;
    --color-green-950: #052e16;
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;
    --color-blue-950: #172554;
    --color-purple-100: #f3e8ff;
    --color-purple-300: #d8b4fe;
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7e22ce;
    --color-purple-800: #6b21a8;
    --color-purple-950: #3b0764;
    --color-pink-100: #fce7f3;
    --color-pink-300: #f9a8d4;
    --color-pink-400: #f472b6;
    --color-pink-500: #ec4899;
    --color-pink-600: #db2777;
    --color-pink-700: #be185d;
    --color-pink-800: #9d174d;
    --color-pink-950: #500724;
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: #f5f5f5;
    --color-gray-200: #fafafa;
    --color-gray-300: #ececec;
    --color-gray-400: #dfdfdf;
    --color-gray-500: #bfbfbf;
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: #a0a0a0;
    --color-gray-900: oklch(21% .034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-normal: 0em;
    --tracking-wide: .025em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-4xl: 48px;
    --shadow-xs: 0px 1px 2px 0px #0000000d;
    --shadow-sm: 0px 1px 3px 0px #0000001a, 0px 1px 2px 0px #0000000d;
    --shadow-md: 0px 4px 6px -1px #0000001a, 0px 2px 4px -1px #0000000f;
    --shadow-lg: 0px 10px 15px -3px #0000001a, 0px 4px 6px -2px #0000000d;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand-50: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-50: color-mix(in oklab, var(--brand), white 88%);
    }
  }

  :root, :host {
    --color-brand-100: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-100: color-mix(in oklab, var(--brand), white 77%);
    }
  }

  :root, :host {
    --color-brand-200: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-200: color-mix(in oklab, var(--brand), white 55%);
    }
  }

  :root, :host {
    --color-brand-300: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-300: color-mix(in oklab, var(--brand), white 34%);
    }
  }

  :root, :host {
    --color-brand-400: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-400: color-mix(in oklab, var(--brand), white 19%);
    }
  }

  :root, :host {
    --color-brand-500: var(--brand);
    --color-brand-600: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-600: color-mix(in oklab, var(--brand), black 9%);
    }
  }

  :root, :host {
    --color-brand-700: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-700: color-mix(in oklab, var(--brand), black 21%);
    }
  }

  :root, :host {
    --color-brand-800: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-800: color-mix(in oklab, var(--brand), black 34%);
    }
  }

  :root, :host {
    --color-brand-900: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-900: color-mix(in oklab, var(--brand), black 46%);
    }
  }

  :root, :host {
    --color-brand-950: var(--brand);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --color-brand-950: color-mix(in oklab, var(--brand), black 60%);
    }
  }

  :root, :host {
    --color-black-alpha-500: #1a1a1a5c;
    --color-black-alpha-700: #1a1a1a99;
    --color-white-alpha-100: #ffffff14;
    --color-white-alpha-500: #ffffff5c;
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-slate-50);
    --color-bg-tertiary: var(--color-slate-100);
    --color-bg-inverse: var(--color-slate-900);
    --color-bg-disabled: var(--color-slate-100);
    --color-bg-brand-primary: var(--color-brand-100);
    --color-bg-brand-secondary: var(--color-brand-700);
    --color-bg-brand-hover: var(--color-brand-800);
    --color-bg-brand-active: var(--color-brand-900);
    --color-bg-error-primary: var(--color-red-100);
    --color-bg-error-secondary: var(--color-red-700);
    --color-bg-success-primary: var(--color-green-100);
    --color-bg-success-secondary: var(--color-green-700);
    --color-bg-warning-primary: var(--color-amber-100);
    --color-bg-warning-secondary: var(--color-amber-700);
    --color-bg-info-primary: var(--color-blue-100);
    --color-bg-info-secondary: var(--color-blue-700);
    --color-bg-overlay-primary: var(--color-black-alpha-500);
    --color-bg-overlay-secondary: var(--color-black-alpha-700);
    --color-text-primary: var(--color-slate-900);
    --color-text-secondary: var(--color-slate-600);
    --color-text-tertiary: var(--color-slate-500);
    --color-text-disabled: var(--color-slate-400);
    --color-text-placeholder: var(--color-slate-500);
    --color-text-white: var(--color-white);
    --color-text-inverse: var(--color-white);
    --color-text-brand-primary: var(--color-brand-800);
    --color-text-brand-secondary: var(--color-brand-900);
    --color-text-error-primary: var(--color-red-600);
    --color-text-error-secondary: var(--color-red-800);
    --color-text-success-primary: var(--color-green-600);
    --color-text-warning-primary: var(--color-amber-700);
    --color-text-warning-secondary: var(--color-amber-800);
    --color-text-info-primary: var(--color-blue-600);
    --color-text-on-brand: var(--color-white);
    --color-text-on-warning: var(--color-white);
    --color-text-link: var(--color-blue-600);
    --color-icon-primary: var(--color-slate-900);
    --color-icon-secondary: var(--color-slate-600);
    --color-icon-tertiary: var(--color-slate-500);
    --color-icon-disabled: var(--color-slate-400);
    --color-icon-white: var(--color-white);
    --color-icon-brand-primary: var(--color-brand-700);
    --color-icon-brand-secondary: var(--color-brand-800);
    --color-icon-error-primary: var(--color-red-700);
    --color-icon-success-primary: var(--color-green-700);
    --color-icon-warning-primary: var(--color-amber-700);
    --color-icon-info-primary: var(--color-blue-700);
    --color-icon-on-brand: var(--color-white);
    --color-icon-on-error: var(--color-white);
    --color-icon-on-success: var(--color-white);
    --color-border-primary: var(--color-slate-200);
    --color-border-secondary: var(--color-slate-300);
    --color-border-tertiary: var(--color-slate-400);
    --color-border-disabled: var(--color-slate-300);
    --color-border-focus-ring: var(--color-blue-700);
    --color-border-brand-primary: var(--color-brand-600);
    --color-border-brand-secondary: var(--color-brand-700);
    --color-border-brand-focus: var(--color-brand-700);
    --color-border-error-primary: var(--color-red-500);
    --color-border-success-primary: var(--color-green-600);
    --color-border-warning-primary: var(--color-amber-600);
    --color-border-info-primary: var(--color-blue-500);
    --color-interactive-primary: var(--color-brand-700);
    --color-interactive-primary-hover: var(--color-brand-800);
    --color-interactive-primary-active: var(--color-brand-900);
    --color-interactive-primary-disabled: var(--color-brand-100);
    --radius-none: 0px;
    --radius-full: 9999px;
    --color-ob-teal-200: #d1ece5;
    --color-ob-teal-500: #27b199;
    --color-ob-teal-600: #288372;
    --color-int-teal-500: #27b199;
    --color-int-teal-600: #288372;
    --color-navy-500: #01416c;
    --color-black-500: #a0a0a0;
    --color-black-700: #0a0a0a;
    --color-black-900: #0a0a0a;
    --color-white-100: #fff;
    --color-white-200: #fafafa;
    --color-positive-100: #f1f9ef;
    --color-positive-400: #288c7a;
    --color-progressive-100: #eefafe;
    --color-progressive-400: #56ccf2;
    --color-cautions-100: #fff2d1;
    --color-cautions-400: #d78e08;
    --color-negative-100: #ffd7d2;
    --color-negative-400: #eb5757;
    --color-error-400: #ef4c00;
    --color-warning: #d78e08;
    --color-warning-light: #fff2d1;
    --color-warning-400: #d78e08;
    --color-link-400: #007bff;
    --color-surface-primary-green: #27b199;
    --color-surface-primary-blue: #01416c;
    --color-surface-primary-white: #fff;
    --color-surface-secondary: #fafafa;
    --color-surface-disable: #ececec;
    --color-surface-popup: #0a0a0a;
    --color-surface-highlight: #d1ece5;
    --color-text-title: #0a0a0a;
    --color-text-subtitle: #565656;
    --color-text-disable: #8f8f8f;
    --color-soft-green: #f1f9ef;
    --color-soft-blue: #eefafe;
    --color-soft-orange: #fff2d1;
    --color-soft-red: #ffd7d2;
    --color-button-primary: #27b199;
    --color-stroke-bold: #8f8f8f;
    --color-stroke-regular: #ececec;
    --color-icon-black: #0a0a0a;
    --color-icon-green: #27b199;
    --color-notification-error: #eb5757;
    --color-notification-link: #007bff;
    --color-label-positive: #288c7a;
    --color-label-progress: #56ccf2;
    --color-primary: #27b199;
    --color-primary-hover: #288372;
    --color-secondary: #fafafa;
    --color-success: #288c7a;
    --color-success-light: #f1f9ef;
    --color-info: #56ccf2;
    --color-danger: #eb5757;
    --color-danger-light: #ffd7d2;
    --shadow-base: 0px 4px 12px 0px #0a0a0a1a;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: #bfbfbfcc transparent;
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      scrollbar-color: color-mix(in oklab, var(--color-gray-500) 80%, transparent) transparent;
    }
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: none;
  }

  ::-webkit-scrollbar-corner {
    background: none;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #bfbfbfbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    ::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
    }
  }

  ::-webkit-scrollbar-thumb {
    background-clip: content-box;
    border: 2px solid #0000;
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gray-500);
  }
}

@layer components;

@layer utilities {
  .\!pointer-events-none {
    pointer-events: none !important;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-2 {
    inset: calc(var(--spacing) * 2);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .-top-10 {
    top: calc(var(--spacing) * -10);
  }

  .-top-\[6px\] {
    top: -6px;
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-16 {
    top: calc(var(--spacing) * 16);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-\[11px\] {
    top: 11px;
  }

  .top-\[96px\] {
    top: 96px;
  }

  .top-\[calc\(100\%\+6px\)\] {
    top: calc(100% + 6px);
  }

  .top-full {
    top: 100%;
  }

  .-right-0\.5 {
    right: calc(var(--spacing) * -.5);
  }

  .-right-\[6px\] {
    right: -6px;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -.5);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }

  .bottom-\[120px\] {
    bottom: 120px;
  }

  .bottom-full {
    bottom: 100%;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-0\.5 {
    left: calc(var(--spacing) * .5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-8 {
    left: calc(var(--spacing) * 8);
  }

  .z-\(--z-modal\) {
    z-index: var(--z-modal);
  }

  .z-\(--z-modal-backdrop\) {
    z-index: var(--z-modal-backdrop);
  }

  .z-\(--z-toast\) {
    z-index: var(--z-toast);
  }

  .z-0 {
    z-index: 0;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-99999 {
    z-index: 99999;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .z-\[110\] {
    z-index: 110;
  }

  .z-\[998\] {
    z-index: 998;
  }

  .z-\[999\] {
    z-index: 999;
  }

  .z-\[1410\] {
    z-index: 1410;
  }

  .z-\[1420\] {
    z-index: 1420;
  }

  .z-\[1600\] {
    z-index: 1600;
  }

  .z-\[10001\] {
    z-index: 10001;
  }

  .z-\[10002\] {
    z-index: 10002;
  }

  .z-\[2147483000\] {
    z-index: 2147483000;
  }

  .z-\[var\(--z-dropdown\)\] {
    z-index: var(--z-dropdown);
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .\!m-0 {
    margin: calc(var(--spacing) * 0) !important;
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-4 {
    margin: calc(var(--spacing) * 4);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .-my-2\.5 {
    margin-block: calc(var(--spacing) * -2.5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-\[12px\] {
    margin-block: 12px;
  }

  .my-\[72px\] {
    margin-block: 72px;
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-\[-8px\] {
    margin-top: -8px;
  }

  .mt-\[2px\] {
    margin-top: 2px;
  }

  .mt-\[3px\] {
    margin-top: 3px;
  }

  .mt-\[4px\] {
    margin-top: 4px;
  }

  .mt-\[6px\] {
    margin-top: 6px;
  }

  .mt-\[8px\] {
    margin-top: 8px;
  }

  .mt-\[12px\] {
    margin-top: 12px;
  }

  .mt-\[14px\] {
    margin-top: 14px;
  }

  .mt-\[16px\] {
    margin-top: 16px;
  }

  .mt-\[20px\] {
    margin-top: 20px;
  }

  .mt-\[24px\] {
    margin-top: 24px;
  }

  .mt-px {
    margin-top: 1px;
  }

  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }

  .mr-\[16px\] {
    margin-right: 16px;
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }

  .mb-\[4px\] {
    margin-bottom: 4px;
  }

  .mb-\[8px\] {
    margin-bottom: 8px;
  }

  .mb-\[10px\] {
    margin-bottom: 10px;
  }

  .mb-\[12px\] {
    margin-bottom: 12px;
  }

  .mb-\[14px\] {
    margin-bottom: 14px;
  }

  .mb-\[16px\] {
    margin-bottom: 16px;
  }

  .mb-\[20px\] {
    margin-bottom: 20px;
  }

  .mb-\[22px\] {
    margin-bottom: 22px;
  }

  .mb-\[24px\] {
    margin-bottom: 24px;
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-7 {
    margin-left: calc(var(--spacing) * 7);
  }

  .ml-\[4px\] {
    margin-left: 4px;
  }

  .ml-\[44px\] {
    margin-left: 44px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .box-border {
    box-sizing: border-box;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-6\.5 {
    width: calc(var(--spacing) * 6.5);
    height: calc(var(--spacing) * 6.5);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-7\.5 {
    width: calc(var(--spacing) * 7.5);
    height: calc(var(--spacing) * 7.5);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-\[5px\] {
    width: 5px;
    height: 5px;
  }

  .size-\[11px\] {
    width: 11px;
    height: 11px;
  }

  .size-\[14px\] {
    width: 14px;
    height: 14px;
  }

  .size-\[16px\] {
    width: 16px;
    height: 16px;
  }

  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .size-\[20px\] {
    width: 20px;
    height: 20px;
  }

  .size-\[22px\] {
    width: 22px;
    height: 22px;
  }

  .size-\[24px\] {
    width: 24px;
    height: 24px;
  }

  .size-\[28px\] {
    width: 28px;
    height: 28px;
  }

  .size-\[32px\] {
    width: 32px;
    height: 32px;
  }

  .size-\[36px\] {
    width: 36px;
    height: 36px;
  }

  .size-\[40px\] {
    width: 40px;
    height: 40px;
  }

  .size-\[44px\] {
    width: 44px;
    height: 44px;
  }

  .size-\[48px\] {
    width: 48px;
    height: 48px;
  }

  .size-\[56px\] {
    width: 56px;
    height: 56px;
  }

  .size-\[64px\] {
    width: 64px;
    height: 64px;
  }

  .size-\[72px\] {
    width: 72px;
    height: 72px;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-1\/2 {
    height: 50%;
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-6\.5 {
    height: calc(var(--spacing) * 6.5);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-7\.5 {
    height: calc(var(--spacing) * 7.5);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-9\.5 {
    height: calc(var(--spacing) * 9.5);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-13 {
    height: calc(var(--spacing) * 13);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-19 {
    height: calc(var(--spacing) * 19);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-21 {
    height: calc(var(--spacing) * 21);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-\[-webkit-fill-available\] {
    height: -webkit-fill-available;
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[6px\] {
    height: 6px;
  }

  .h-\[8px\] {
    height: 8px;
  }

  .h-\[10px\] {
    height: 10px;
  }

  .h-\[14px\] {
    height: 14px;
  }

  .h-\[15px\] {
    height: 15px;
  }

  .h-\[16px\] {
    height: 16px;
  }

  .h-\[17px\] {
    height: 17px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[20px\] {
    height: 20px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[24px\] {
    height: 24px;
  }

  .h-\[28px\] {
    height: 28px;
  }

  .h-\[30px\] {
    height: 30px;
  }

  .h-\[32px\] {
    height: 32px;
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[36px\] {
    height: 36px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[44px\] {
    height: 44px;
  }

  .h-\[56px\] {
    height: 56px;
  }

  .h-\[60px\] {
    height: 60px;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[76px\] {
    height: 76px;
  }

  .h-\[80vh\] {
    height: 80vh;
  }

  .h-\[84px\] {
    height: 84px;
  }

  .h-\[95vh\] {
    height: 95vh;
  }

  .h-\[96px\] {
    height: 96px;
  }

  .h-\[110px\] {
    height: 110px;
  }

  .h-\[120px\] {
    height: 120px;
  }

  .h-\[140px\] {
    height: 140px;
  }

  .h-\[172px\] {
    height: 172px;
  }

  .h-\[196px\] {
    height: 196px;
  }

  .h-\[208px\] {
    height: 208px;
  }

  .h-\[220px\] {
    height: 220px;
  }

  .h-\[260px\] {
    height: 260px;
  }

  .h-\[280px\] {
    height: 280px;
  }

  .h-\[320px\] {
    height: 320px;
  }

  .h-\[360px\] {
    height: 360px;
  }

  .h-\[380px\] {
    height: 380px;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[420px\] {
    height: 420px;
  }

  .h-\[calc\(100\%-1px\)\] {
    height: calc(100% - 1px);
  }

  .h-\[calc\(100vh-64px\)\] {
    height: calc(100vh - 64px);
  }

  .h-\[calc\(100vh-200px\)\] {
    height: calc(100vh - 200px);
  }

  .h-auto {
    height: auto;
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-6 {
    max-height: calc(var(--spacing) * 6);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-45 {
    max-height: calc(var(--spacing) * 45);
  }

  .max-h-50 {
    max-height: calc(var(--spacing) * 50);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-75 {
    max-height: calc(var(--spacing) * 75);
  }

  .max-h-\[32px\] {
    max-height: 32px;
  }

  .max-h-\[68px\] {
    max-height: 68px;
  }

  .max-h-\[90vh\] {
    max-height: 90vh;
  }

  .max-h-\[95vh\] {
    max-height: 95vh;
  }

  .max-h-\[200px\] {
    max-height: 200px;
  }

  .max-h-\[208px\] {
    max-height: 208px;
  }

  .max-h-\[220px\] {
    max-height: 220px;
  }

  .max-h-\[350px\] {
    max-height: 350px;
  }

  .max-h-\[380px\] {
    max-height: 380px;
  }

  .max-h-\[calc\(var\(--reka-popper-available-height\,100vh\)-1\.5rem\)\] {
    max-height: calc(var(--reka-popper-available-height, 100vh) - 1.5rem);
  }

  .max-h-\[var\(--radix-select-content-available-height\)\] {
    max-height: var(--radix-select-content-available-height);
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-0\! {
    min-height: calc(var(--spacing) * 0) !important;
  }

  .min-h-4\.5 {
    min-height: calc(var(--spacing) * 4.5);
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-6 {
    min-height: calc(var(--spacing) * 6);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-62 {
    min-height: calc(var(--spacing) * 62);
  }

  .min-h-\[10px\] {
    min-height: 10px;
  }

  .min-h-\[40px\] {
    min-height: 40px;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[50vh\] {
    min-height: 50vh;
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[68px\] {
    min-height: 68px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[208px\] {
    min-height: 208px;
  }

  .min-h-\[220px\] {
    min-height: 220px;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-\[420px\] {
    min-height: 420px;
  }

  .min-h-\[650px\] {
    min-height: 650px;
  }

  .min-h-\[776px\] {
    min-height: 776px;
  }

  .min-h-auto {
    min-height: auto;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-2\/5 {
    width: 40%;
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/5 {
    width: 60%;
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-7\.5 {
    width: calc(var(--spacing) * 7.5);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-11\/12 {
    width: 91.6667%;
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-19 {
    width: calc(var(--spacing) * 19);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-21 {
    width: calc(var(--spacing) * 21);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-35 {
    width: calc(var(--spacing) * 35);
  }

  .w-37 {
    width: calc(var(--spacing) * 37);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-41 {
    width: calc(var(--spacing) * 41);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-55\! {
    width: calc(var(--spacing) * 55) !important;
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-65 {
    width: calc(var(--spacing) * 65);
  }

  .w-66\! {
    width: calc(var(--spacing) * 66) !important;
  }

  .w-70 {
    width: calc(var(--spacing) * 70);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-75 {
    width: calc(var(--spacing) * 75);
  }

  .w-84 {
    width: calc(var(--spacing) * 84);
  }

  .w-90 {
    width: calc(var(--spacing) * 90);
  }

  .w-100 {
    width: calc(var(--spacing) * 100);
  }

  .w-\[\.\.\.\] {
    width: ...;
  }

  .w-\[6px\] {
    width: 6px;
  }

  .w-\[10px\] {
    width: 10px;
  }

  .w-\[15px\] {
    width: 15px;
  }

  .w-\[16px\] {
    width: 16px;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[36px\] {
    width: 36px;
  }

  .w-\[40px\] {
    width: 40px;
  }

  .w-\[48px\] {
    width: 48px;
  }

  .w-\[56px\] {
    width: 56px;
  }

  .w-\[60px\] {
    width: 60px;
  }

  .w-\[64px\] {
    width: 64px;
  }

  .w-\[66\%\] {
    width: 66%;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[75\%\] {
    width: 75%;
  }

  .w-\[76px\] {
    width: 76px;
  }

  .w-\[80px\] {
    width: 80px;
  }

  .w-\[90px\] {
    width: 90px;
  }

  .w-\[90vw\] {
    width: 90vw;
  }

  .w-\[92px\] {
    width: 92px;
  }

  .w-\[95vw\] {
    width: 95vw;
  }

  .w-\[96px\] {
    width: 96px;
  }

  .w-\[104px\] {
    width: 104px;
  }

  .w-\[106px\] {
    width: 106px;
  }

  .w-\[112px\] {
    width: 112px;
  }

  .w-\[128px\] {
    width: 128px;
  }

  .w-\[140px\] {
    width: 140px;
  }

  .w-\[148px\] {
    width: 148px;
  }

  .w-\[168px\] {
    width: 168px;
  }

  .w-\[196px\] {
    width: 196px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[260px\] {
    width: 260px;
  }

  .w-\[302px\] {
    width: 302px;
  }

  .w-\[320px\] {
    width: 320px;
  }

  .w-\[352px\] {
    width: 352px;
  }

  .w-\[360px\] {
    width: 360px;
  }

  .w-\[380px\] {
    width: 380px;
  }

  .w-\[408px\] {
    width: 408px;
  }

  .w-\[440px\] {
    width: 440px;
  }

  .w-\[456px\] {
    width: 456px;
  }

  .w-\[500px\] {
    width: 500px;
  }

  .w-\[592px\] {
    width: 592px;
  }

  .w-\[850px\] {
    width: 850px;
  }

  .w-\[900px\] {
    width: 900px;
  }

  .w-\[value\] {
    width: value;
  }

  .w-\[var\(--reka-combobox-trigger-width\)\] {
    width: var(--reka-combobox-trigger-width);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-lg {
    width: var(--container-lg);
  }

  .w-px {
    width: 1px;
  }

  .w-screen {
    width: 100vw;
  }

  .max-w-0 {
    max-width: calc(var(--spacing) * 0);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-6 {
    max-width: calc(var(--spacing) * 6);
  }

  .max-w-56 {
    max-width: calc(var(--spacing) * 56);
  }

  .max-w-65 {
    max-width: calc(var(--spacing) * 65);
  }

  .max-w-68\.5 {
    max-width: calc(var(--spacing) * 68.5);
  }

  .max-w-71 {
    max-width: calc(var(--spacing) * 71);
  }

  .max-w-75 {
    max-width: calc(var(--spacing) * 75);
  }

  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }

  .max-w-86 {
    max-width: calc(var(--spacing) * 86);
  }

  .max-w-95 {
    max-width: calc(var(--spacing) * 95);
  }

  .max-w-115 {
    max-width: calc(var(--spacing) * 115);
  }

  .max-w-120 {
    max-width: calc(var(--spacing) * 120);
  }

  .max-w-432 {
    max-width: calc(var(--spacing) * 432);
  }

  .max-w-\[22ch\] {
    max-width: 22ch;
  }

  .max-w-\[25\%\] {
    max-width: 25%;
  }

  .max-w-\[32px\] {
    max-width: 32px;
  }

  .max-w-\[36ch\] {
    max-width: 36ch;
  }

  .max-w-\[68px\] {
    max-width: 68px;
  }

  .max-w-\[150px\] {
    max-width: 150px;
  }

  .max-w-\[228px\] {
    max-width: 228px;
  }

  .max-w-\[230px\] {
    max-width: 230px;
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[300px\] {
    max-width: 300px;
  }

  .max-w-\[320px\] {
    max-width: 320px;
  }

  .max-w-\[336px\] {
    max-width: 336px;
  }

  .max-w-\[340px\] {
    max-width: 340px;
  }

  .max-w-\[360px\] {
    max-width: 360px;
  }

  .max-w-\[362px\] {
    max-width: 362px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .max-w-\[420px\] {
    max-width: 420px;
  }

  .max-w-\[460px\] {
    max-width: 460px;
  }

  .max-w-\[472px\] {
    max-width: 472px;
  }

  .max-w-\[520px\] {
    max-width: 520px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[1180px\] {
    max-width: 1180px;
  }

  .max-w-\[1728px\] {
    max-width: 1728px;
  }

  .max-w-\[calc\(100vw-1\.5rem\)\] {
    max-width: calc(100vw - 1.5rem);
  }

  .max-w-\[min\(28rem\,calc\(100vw-2rem\)\)\] {
    max-width: min(28rem, 100vw - 2rem);
  }

  .max-w-\[min\(calc\(100vw-16px\)\,20rem\)\] {
    max-width: min(100vw - 16px, 20rem);
  }

  .max-w-\[var\(--settings-max-w\,860px\)\] {
    max-width: var(--settings-max-w, 860px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-2 {
    min-width: calc(var(--spacing) * 2);
  }

  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }

  .min-w-6 {
    min-width: calc(var(--spacing) * 6);
  }

  .min-w-27 {
    min-width: calc(var(--spacing) * 27);
  }

  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }

  .min-w-45 {
    min-width: calc(var(--spacing) * 45);
  }

  .min-w-55 {
    min-width: calc(var(--spacing) * 55);
  }

  .min-w-85 {
    min-width: calc(var(--spacing) * 85);
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[10px\] {
    min-width: 10px;
  }

  .min-w-\[15px\] {
    min-width: 15px;
  }

  .min-w-\[18px\] {
    min-width: 18px;
  }

  .min-w-\[40px\] {
    min-width: 40px;
  }

  .min-w-\[68px\] {
    min-width: 68px;
  }

  .min-w-\[130px\] {
    min-width: 130px;
  }

  .min-w-\[150px\] {
    min-width: 150px;
  }

  .min-w-\[226px\] {
    min-width: 226px;
  }

  .min-w-\[320px\] {
    min-width: 320px;
  }

  .min-w-\[340px\] {
    min-width: 340px;
  }

  .min-w-fit {
    min-width: fit-content;
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-max {
    min-width: max-content;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-\[0_1_460px\] {
    flex: 0 460px;
  }

  .flex-\[1_1_280px\] {
    flex: 280px;
  }

  .flex-\[1_1_320px\] {
    flex: 320px;
  }

  .flex-auto {
    flex: auto;
  }

  .flex-none {
    flex: none;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .grow-0 {
    flex-grow: 0;
  }

  .basis-\[76px\] {
    flex-basis: 76px;
  }

  .basis-\[104px\] {
    flex-basis: 104px;
  }

  .basis-\[260px\] {
    flex-basis: 260px;
  }

  .table-auto {
    table-layout: auto;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .border-separate {
    border-collapse: separate;
  }

  .origin-bottom {
    transform-origin: bottom;
  }

  .origin-top {
    transform-origin: top;
  }

  .translate-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * -5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-34 {
    --tw-translate-x: calc(var(--spacing) * -34);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-\[8px\] {
    --tw-translate-x: calc(8px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-\[14px\] {
    --tw-translate-x: calc(14px * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-6 {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-7 {
    --tw-translate-x: calc(var(--spacing) * 7);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[8px\] {
    --tw-translate-x: 8px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[14px\] {
    --tw-translate-x: 14px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-x-\[-1\] {
    --tw-scale-x: -1;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .rotate-0 {
    rotate: none;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-\[-135deg\] {
    rotate: -135deg;
  }

  .\!transform-none {
    transform: none !important;
  }

  .transform {
    transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .\!cursor-default {
    cursor: default !important;
  }

  .\!cursor-not-allowed {
    cursor: not-allowed !important;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }

  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .snap-center {
    scroll-snap-align: center;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-outside {
    list-style-position: outside;
  }

  .list-decimal {
    list-style-type: decimal;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-none {
    appearance: none;
  }

  .auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
  }

  .auto-cols-max {
    grid-auto-columns: max-content;
  }

  .grid-flow-col {
    grid-auto-flow: column;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\! {
    gap: calc(var(--spacing) * 0) !important;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-\[4px\] {
    gap: 4px;
  }

  .gap-\[6px\] {
    gap: 6px;
  }

  .gap-\[8px\] {
    gap: 8px;
  }

  .gap-\[10px\] {
    gap: 10px;
  }

  .gap-\[12px\] {
    gap: 12px;
  }

  .gap-\[14px\] {
    gap: 14px;
  }

  .gap-\[16px\] {
    gap: 16px;
  }

  .gap-\[18px\] {
    gap: 18px;
  }

  .gap-\[20px\] {
    gap: 20px;
  }

  .gap-\[22px\] {
    gap: 22px;
  }

  .gap-\[24px\] {
    gap: 24px;
  }

  .gap-\[32px\] {
    gap: 32px;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }

  :where(.space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }

  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-gray-100 > :not(:last-child)) {
    border-color: var(--color-gray-100);
  }

  :where(.divide-gray-300 > :not(:last-child)) {
    border-color: var(--color-gray-300);
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .scroll-smooth {
    scroll-behavior: smooth;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-4xl {
    border-radius: var(--radius-4xl);
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[16px\] {
    border-radius: 16px;
  }

  .rounded-\[16rem\] {
    border-radius: 16rem;
  }

  .rounded-\[var\(--radius-full\,999px\)\] {
    border-radius: var(--radius-full, 999px);
  }

  .rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg);
  }

  .rounded-\[var\(--radius-md\)\] {
    border-radius: var(--radius-md);
  }

  .rounded-\[var\(--radius-md\,10px\)\] {
    border-radius: var(--radius-md, 10px);
  }

  .rounded-\[var\(--radius-md\,12px\)\] {
    border-radius: var(--radius-md, 12px);
  }

  .rounded-\[var\(--radius-sm\)\] {
    border-radius: var(--radius-sm);
  }

  .rounded-\[var\(--radius-sm\,8px\)\] {
    border-radius: var(--radius-sm, 8px);
  }

  .rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl);
  }

  .rounded-full {
    border-radius: var(--radius-full);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: var(--radius-none);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-xs {
    border-radius: var(--radius-xs);
  }

  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .rounded-t-\[24px\] {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }

  .rounded-t-\[var\(--radius-lg\)\], .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }

  .rounded-l-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .rounded-b-4xl {
    border-bottom-right-radius: var(--radius-4xl);
    border-bottom-left-radius: var(--radius-4xl);
  }

  .rounded-b-\[var\(--radius-lg\)\] {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  .rounded-br-\[4px\] {
    border-bottom-right-radius: 4px;
  }

  .rounded-br-\[24px\] {
    border-bottom-right-radius: 24px;
  }

  .rounded-bl-\[4px\] {
    border-bottom-left-radius: 4px;
  }

  .rounded-bl-\[24px\] {
    border-bottom-left-radius: 24px;
  }

  .\!border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-x-0 {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 0;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .border-t-\[6px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 6px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-\[6px\] {
    border-right-style: var(--tw-border-style);
    border-right-width: 6px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-b-\[1px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-\[6px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 6px;
  }

  .\!border-none {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-black-500 {
    border-color: var(--color-black-500) !important;
  }

  .\!border-danger {
    border-color: var(--color-danger) !important;
  }

  .\!border-gray-300 {
    border-color: var(--color-gray-300) !important;
  }

  .\!border-primary {
    border-color: var(--color-primary) !important;
  }

  .\!border-red-300 {
    border-color: var(--color-red-300) !important;
  }

  .border-\[\#D5D5D5\] {
    border-color: #d5d5d5;
  }

  .border-\[\#D78E08\] {
    border-color: #d78e08;
  }

  .border-\[\#E9E9E9\] {
    border-color: #e9e9e9;
  }

  .border-\[\#ECECEC\] {
    border-color: #ececec;
  }

  .border-\[color\:var\(--color-border-error-primary\,var\(--color-border-primary\)\)\] {
    border-color: var(--color-border-error-primary, var(--color-border-primary));
  }

  .border-\[color\:var\(--color-border-success-primary\,var\(--color-border-primary\)\)\] {
    border-color: var(--color-border-success-primary, var(--color-border-primary));
  }

  .border-\[var\(--color-bg-brand-secondary\)\] {
    border-color: var(--color-bg-brand-secondary);
  }

  .border-\[var\(--color-bg-primary\)\] {
    border-color: var(--color-bg-primary);
  }

  .border-\[var\(--color-border-warning-primary\)\] {
    border-color: var(--color-border-warning-primary);
  }

  .border-\[var\(--color-text-error-primary\)\] {
    border-color: var(--color-text-error-primary);
  }

  .border-amber-300 {
    border-color: var(--color-amber-300);
  }

  .border-border-brand-focus {
    border-color: var(--color-border-brand-focus);
  }

  .border-border-brand-primary {
    border-color: var(--color-border-brand-primary);
  }

  .border-border-brand-secondary {
    border-color: var(--color-border-brand-secondary);
  }

  .border-border-primary {
    border-color: var(--color-border-primary);
  }

  .border-border-secondary {
    border-color: var(--color-border-secondary);
  }

  .border-border-warning-primary {
    border-color: var(--color-border-warning-primary);
  }

  .border-button-primary {
    border-color: var(--color-button-primary);
  }

  .border-current {
    border-color: currentColor;
  }

  .border-danger {
    border-color: var(--color-danger);
  }

  .border-error-400 {
    border-color: var(--color-error-400);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-300\/50 {
    border-color: #ececec80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-gray-300\/50 {
      border-color: color-mix(in oklab, var(--color-gray-300) 50%, transparent);
    }
  }

  .border-gray-500 {
    border-color: var(--color-gray-500);
  }

  .border-gray-800 {
    border-color: var(--color-gray-800);
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-500 {
    border-color: var(--color-green-500);
  }

  .border-int-teal-500 {
    border-color: var(--color-int-teal-500);
  }

  .border-ob-teal-500 {
    border-color: var(--color-ob-teal-500);
  }

  .border-positive-400 {
    border-color: var(--color-positive-400);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-secondary {
    border-color: var(--color-secondary);
  }

  .border-stroke-bold {
    border-color: var(--color-stroke-bold);
  }

  .border-stroke-regular {
    border-color: var(--color-stroke-regular);
  }

  .border-success {
    border-color: var(--color-success);
  }

  .border-surface-popup {
    border-color: var(--color-surface-popup);
  }

  .border-surface-primary-green {
    border-color: var(--color-surface-primary-green);
  }

  .border-text-inverse {
    border-color: var(--color-text-inverse);
  }

  .border-text-placeholder {
    border-color: var(--color-text-placeholder);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-warning {
    border-color: var(--color-warning);
  }

  .border-warning-400 {
    border-color: var(--color-warning-400);
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-t-brand-700 {
    border-top-color: var(--color-brand-700);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-r-transparent {
    border-right-color: #0000;
  }

  .border-l-transparent {
    border-left-color: #0000;
  }

  .\!bg-danger-light {
    background-color: var(--color-danger-light) !important;
  }

  .\!bg-gray-200 {
    background-color: var(--color-gray-200) !important;
  }

  .\!bg-gray-300 {
    background-color: var(--color-gray-300) !important;
  }

  .\!bg-notification-link {
    background-color: var(--color-notification-link) !important;
  }

  .\!bg-primary\/10 {
    background-color: #27b1991a !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-primary\/10 {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent) !important;
    }
  }

  .\!bg-success-light {
    background-color: var(--color-success-light) !important;
  }

  .\!bg-surface-disable {
    background-color: var(--color-surface-disable) !important;
  }

  .\!bg-warning-light {
    background-color: var(--color-warning-light) !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .\!bg-white\/20 {
    background-color: #fff3 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent) !important;
    }
  }

  .bg-\[\#0f172a\] {
    background-color: #0f172a;
  }

  .bg-\[\#E5DDD5\] {
    background-color: #e5ddd5;
  }

  .bg-\[\#FFE5B5\] {
    background-color: #ffe5b5;
  }

  .bg-\[var\(--color-bg-brand-primary\,rgba\(39\,177\,153\,0\.12\)\)\] {
    background-color: var(--color-bg-brand-primary, #27b1991f);
  }

  .bg-\[var\(--color-bg-brand-secondary\)\] {
    background-color: var(--color-bg-brand-secondary);
  }

  .bg-\[var\(--color-bg-disabled\,\#f1f5f9\)\] {
    background-color: var(--color-bg-disabled, #f1f5f9);
  }

  .bg-\[var\(--color-bg-error-secondary\)\] {
    background-color: var(--color-bg-error-secondary);
  }

  .bg-\[var\(--color-bg-info-secondary\)\] {
    background-color: var(--color-bg-info-secondary);
  }

  .bg-\[var\(--color-bg-tertiary\,\#f2f4f7\)\] {
    background-color: var(--color-bg-tertiary, #f2f4f7);
  }

  .bg-\[var\(--color-bg-warning-primary\)\] {
    background-color: var(--color-bg-warning-primary);
  }

  .bg-\[var\(--color-border-primary\)\] {
    background-color: var(--color-border-primary);
  }

  .bg-\[var\(--color-icon-success-primary\)\] {
    background-color: var(--color-icon-success-primary);
  }

  .bg-\[var\(--color-icon-tertiary\)\] {
    background-color: var(--color-icon-tertiary);
  }

  .bg-\[var\(--color-text-primary\)\] {
    background-color: var(--color-text-primary);
  }

  .bg-amber-50\/50 {
    background-color: #fffbeb80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-50\/50 {
      background-color: color-mix(in oklab, var(--color-amber-50) 50%, transparent);
    }
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-bg-brand-primary {
    background-color: var(--color-bg-brand-primary);
  }

  .bg-bg-brand-secondary {
    background-color: var(--color-bg-brand-secondary);
  }

  .bg-bg-error-primary {
    background-color: var(--color-bg-error-primary);
  }

  .bg-bg-error-secondary {
    background-color: var(--color-bg-error-secondary);
  }

  .bg-bg-info-primary {
    background-color: var(--color-bg-info-primary);
  }

  .bg-bg-inverse {
    background-color: var(--color-bg-inverse);
  }

  .bg-bg-overlay-primary {
    background-color: var(--color-bg-overlay-primary);
  }

  .bg-bg-overlay-secondary {
    background-color: var(--color-bg-overlay-secondary);
  }

  .bg-bg-primary {
    background-color: var(--color-bg-primary);
  }

  .bg-bg-secondary {
    background-color: var(--color-bg-secondary);
  }

  .bg-bg-success-primary {
    background-color: var(--color-bg-success-primary);
  }

  .bg-bg-success-secondary {
    background-color: var(--color-bg-success-secondary);
  }

  .bg-bg-tertiary {
    background-color: var(--color-bg-tertiary);
  }

  .bg-bg-warning-primary {
    background-color: var(--color-bg-warning-primary);
  }

  .bg-bg-warning-secondary {
    background-color: var(--color-bg-warning-secondary);
  }

  .bg-black-500 {
    background-color: var(--color-black-500);
  }

  .bg-black-900\/40 {
    background-color: #0a0a0a66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black-900\/40 {
      background-color: color-mix(in oklab, var(--color-black-900) 40%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-border-primary {
    background-color: var(--color-border-primary);
  }

  .bg-border-secondary {
    background-color: var(--color-border-secondary);
  }

  .bg-brand-50 {
    background-color: var(--color-brand-50);
  }

  .bg-button-primary {
    background-color: var(--color-button-primary);
  }

  .bg-cautions-100 {
    background-color: var(--color-cautions-100);
  }

  .bg-danger {
    background-color: var(--color-danger);
  }

  .bg-danger-light {
    background-color: var(--color-danger-light);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-icon-black {
    background-color: var(--color-icon-black);
  }

  .bg-navy-500 {
    background-color: var(--color-navy-500);
  }

  .bg-negative-100 {
    background-color: var(--color-negative-100);
  }

  .bg-ob-teal-200 {
    background-color: var(--color-ob-teal-200);
  }

  .bg-ob-teal-600 {
    background-color: var(--color-ob-teal-600);
  }

  .bg-positive-100 {
    background-color: var(--color-positive-100);
  }

  .bg-primary {
    background-color: var(--color-primary);
  }

  .bg-primary\/5 {
    background-color: #27b1990d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: #27b1991a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }

  .bg-progressive-100 {
    background-color: var(--color-progressive-100);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-secondary {
    background-color: var(--color-secondary);
  }

  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }

  .bg-soft-blue {
    background-color: var(--color-soft-blue);
  }

  .bg-soft-green {
    background-color: var(--color-soft-green);
  }

  .bg-soft-orange {
    background-color: var(--color-soft-orange);
  }

  .bg-soft-red {
    background-color: var(--color-soft-red);
  }

  .bg-stroke-bold {
    background-color: var(--color-stroke-bold);
  }

  .bg-stroke-regular {
    background-color: var(--color-stroke-regular);
  }

  .bg-stroke-regular\! {
    background-color: var(--color-stroke-regular) !important;
  }

  .bg-success-light {
    background-color: var(--color-success-light);
  }

  .bg-surface-disable {
    background-color: var(--color-surface-disable);
  }

  .bg-surface-highlight {
    background-color: var(--color-surface-highlight);
  }

  .bg-surface-highlight\/30 {
    background-color: #d1ece54d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-highlight\/30 {
      background-color: color-mix(in oklab, var(--color-surface-highlight) 30%, transparent);
    }
  }

  .bg-surface-popup {
    background-color: var(--color-surface-popup);
  }

  .bg-surface-primary-green {
    background-color: var(--color-surface-primary-green);
  }

  .bg-surface-primary-white {
    background-color: var(--color-surface-primary-white);
  }

  .bg-surface-primary-white\/80 {
    background-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-primary-white\/80 {
      background-color: color-mix(in oklab, var(--color-surface-primary-white) 80%, transparent);
    }
  }

  .bg-surface-secondary {
    background-color: var(--color-surface-secondary);
  }

  .bg-surface-secondary\/30 {
    background-color: #fafafa4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-secondary\/30 {
      background-color: color-mix(in oklab, var(--color-surface-secondary) 30%, transparent);
    }
  }

  .bg-surface-secondary\/50 {
    background-color: #fafafa80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-secondary\/50 {
      background-color: color-mix(in oklab, var(--color-surface-secondary) 50%, transparent);
    }
  }

  .bg-text-subtitle\/50 {
    background-color: #56565680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-text-subtitle\/50 {
      background-color: color-mix(in oklab, var(--color-text-subtitle) 50%, transparent);
    }
  }

  .bg-text-subtitle\/70 {
    background-color: #565656b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-text-subtitle\/70 {
      background-color: color-mix(in oklab, var(--color-text-subtitle) 70%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-warning-light {
    background-color: var(--color-warning-light);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white-100 {
    background-color: var(--color-white-100);
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(180deg\,var\(--color-bg-brand-primary\)_0\%\,var\(--color-bg-primary\)_92\%\)\] {
    background-image: linear-gradient(180deg,var(--color-bg-brand-primary) 0%,var(--color-bg-primary) 92%);
  }

  .bg-none\! {
    background-image: none !important;
  }

  .from-\[\#0A0A0A0A\] {
    --tw-gradient-from: #0a0a0a0a;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .\!p-3 {
    padding: calc(var(--spacing) * 3) !important;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-\[6px\] {
    padding: 6px;
  }

  .p-\[7px\] {
    padding: 7px;
  }

  .p-\[8px\] {
    padding: 8px;
  }

  .p-\[12px\] {
    padding: 12px;
  }

  .p-\[14px\] {
    padding: 14px;
  }

  .p-\[16px\] {
    padding: 16px;
  }

  .p-\[20px\] {
    padding: 20px;
  }

  .p-\[24px\] {
    padding: 24px;
  }

  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .\!px-3 {
    padding-inline: calc(var(--spacing) * 3) !important;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\! {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-5\.5 {
    padding-inline: calc(var(--spacing) * 5.5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-\[3px\] {
    padding-inline: 3px;
  }

  .px-\[4px\] {
    padding-inline: 4px;
  }

  .px-\[5px\] {
    padding-inline: 5px;
  }

  .px-\[8px\] {
    padding-inline: 8px;
  }

  .px-\[10px\] {
    padding-inline: 10px;
  }

  .px-\[12px\] {
    padding-inline: 12px;
  }

  .px-\[16px\] {
    padding-inline: 16px;
  }

  .px-\[18px\] {
    padding-inline: 18px;
  }

  .px-\[20px\] {
    padding-inline: 20px;
  }

  .px-\[22px\] {
    padding-inline: 22px;
  }

  .px-\[24px\] {
    padding-inline: 24px;
  }

  .px-\[32px\] {
    padding-inline: 32px;
  }

  .\!py-1 {
    padding-block: calc(var(--spacing) * 1) !important;
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\! {
    padding-block: calc(var(--spacing) * 1) !important;
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\! {
    padding-block: calc(var(--spacing) * 3) !important;
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-4\.5 {
    padding-block: calc(var(--spacing) * 4.5);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-22 {
    padding-block: calc(var(--spacing) * 22);
  }

  .py-\[3px\] {
    padding-block: 3px;
  }

  .py-\[4px\] {
    padding-block: 4px;
  }

  .py-\[6px\] {
    padding-block: 6px;
  }

  .py-\[7px\] {
    padding-block: 7px;
  }

  .py-\[8px\] {
    padding-block: 8px;
  }

  .py-\[9px\] {
    padding-block: 9px;
  }

  .py-\[10px\] {
    padding-block: 10px;
  }

  .py-\[12px\] {
    padding-block: 12px;
  }

  .py-\[14px\] {
    padding-block: 14px;
  }

  .py-\[16px\] {
    padding-block: 16px;
  }

  .py-\[18px\] {
    padding-block: 18px;
  }

  .py-\[20px\] {
    padding-block: 20px;
  }

  .py-\[24px\] {
    padding-block: 24px;
  }

  .py-\[28px\] {
    padding-block: 28px;
  }

  .py-\[56px\] {
    padding-block: 56px;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-\[2px\] {
    padding-top: 2px;
  }

  .pt-\[4px\] {
    padding-top: 4px;
  }

  .pt-\[8px\] {
    padding-top: 8px;
  }

  .pt-\[20px\] {
    padding-top: 20px;
  }

  .pt-\[24px\] {
    padding-top: 24px;
  }

  .pt-\[40px\] {
    padding-top: 40px;
  }

  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pr-13 {
    padding-right: calc(var(--spacing) * 13);
  }

  .pr-\[6px\] {
    padding-right: 6px;
  }

  .pr-\[8px\] {
    padding-right: 8px;
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-\[4px\] {
    padding-bottom: 4px;
  }

  .pb-\[18px\] {
    padding-bottom: 18px;
  }

  .pb-\[22px\] {
    padding-bottom: 22px;
  }

  .pb-\[24px\] {
    padding-bottom: 24px;
  }

  .pb-\[26px\] {
    padding-bottom: 26px;
  }

  .pb-\[36px\] {
    padding-bottom: 36px;
  }

  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-\[10px\] {
    padding-left: 10px;
  }

  .pl-\[12px\] {
    padding-left: 12px;
  }

  .pl-\[18px\] {
    padding-left: 18px;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-start {
    text-align: start;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-xs\! {
    font-size: var(--text-xs) !important;
    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[24px\] {
    font-size: 24px;
  }

  .leading-3\.5 {
    --tw-leading: calc(var(--spacing) * 3.5);
    line-height: calc(var(--spacing) * 3.5);
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-4\.5 {
    --tw-leading: calc(var(--spacing) * 4.5);
    line-height: calc(var(--spacing) * 4.5);
  }

  .leading-4\.5\! {
    --tw-leading: calc(var(--spacing) * 4.5) !important;
    line-height: calc(var(--spacing) * 4.5) !important;
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6\.5 {
    --tw-leading: calc(var(--spacing) * 6.5);
    line-height: calc(var(--spacing) * 6.5);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }

  .leading-\[11px\] {
    --tw-leading: 11px;
    line-height: 11px;
  }

  .leading-\[15px\] {
    --tw-leading: 15px;
    line-height: 15px;
  }

  .leading-\[16px\] {
    --tw-leading: 16px;
    line-height: 16px;
  }

  .leading-\[17px\] {
    --tw-leading: 17px;
    line-height: 17px;
  }

  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }

  .leading-\[20px\] {
    --tw-leading: 20px;
    line-height: 20px;
  }

  .leading-\[22px\] {
    --tw-leading: 22px;
    line-height: 22px;
  }

  .leading-\[24px\] {
    --tw-leading: 24px;
    line-height: 24px;
  }

  .leading-\[26px\] {
    --tw-leading: 26px;
    line-height: 26px;
  }

  .leading-\[28px\] {
    --tw-leading: 28px;
    line-height: 28px;
  }

  .leading-\[30px\] {
    --tw-leading: 30px;
    line-height: 30px;
  }

  .leading-\[34px\] {
    --tw-leading: 34px;
    line-height: 34px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-\[var\(--font-sans\,system-ui\,sans-serif\)\] {
    --tw-font-weight: var(--font-sans, system-ui,sans-serif);
    font-weight: var(--font-sans, system-ui,sans-serif);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.1px\] {
    --tw-tracking: -.1px;
    letter-spacing: -.1px;
  }

  .tracking-\[-0\.2px\] {
    --tw-tracking: -.2px;
    letter-spacing: -.2px;
  }

  .tracking-\[-0\.3px\] {
    --tw-tracking: -.3px;
    letter-spacing: -.3px;
  }

  .tracking-\[-0\.006em\] {
    --tw-tracking: -.006em;
    letter-spacing: -.006em;
  }

  .tracking-\[0\.02em\] {
    --tw-tracking: .02em;
    letter-spacing: .02em;
  }

  .tracking-\[0\.4px\] {
    --tw-tracking: .4px;
    letter-spacing: .4px;
  }

  .tracking-\[1\.1px\] {
    --tw-tracking: 1.1px;
    letter-spacing: 1.1px;
  }

  .tracking-\[1px\] {
    --tw-tracking: 1px;
    letter-spacing: 1px;
  }

  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .\[text-wrap\:pretty\] {
    text-wrap: pretty;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .wrap-anywhere {
    overflow-wrap: anywhere;
  }

  .wrap-break-word {
    overflow-wrap: break-word;
  }

  .wrap-normal {
    overflow-wrap: normal;
  }

  .break-all {
    word-break: break-all;
  }

  .text-ellipsis {
    text-overflow: ellipsis;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-black-500 {
    color: var(--color-black-500) !important;
  }

  .\!text-gray-400 {
    color: var(--color-gray-400) !important;
  }

  .\!text-gray-500 {
    color: var(--color-gray-500) !important;
  }

  .\!text-gray-800 {
    color: var(--color-gray-800) !important;
  }

  .\!text-navy-500 {
    color: var(--color-navy-500) !important;
  }

  .\!text-primary {
    color: var(--color-primary) !important;
  }

  .\!text-red-300 {
    color: var(--color-red-300) !important;
  }

  .\!text-text-disable {
    color: var(--color-text-disable) !important;
  }

  .\!text-text-title {
    color: var(--color-text-title) !important;
  }

  .\!text-white {
    color: var(--color-white) !important;
  }

  .text-\[\#0A0A0A\] {
    color: #0a0a0a;
  }

  .text-\[\#00A5F4\] {
    color: #00a5f4;
  }

  .text-\[\#9F9F9F\] {
    color: #9f9f9f;
  }

  .text-\[\#027EB5\] {
    color: #027eb5;
  }

  .text-\[\#A0A0A0\] {
    color: #a0a0a0;
  }

  .text-\[\#C6C6C6\] {
    color: #c6c6c6;
  }

  .text-\[var\(--color-c-white\,\#fff\)\] {
    color: var(--color-c-white, #fff);
  }

  .text-\[var\(--color-icon-tertiary\,var\(--color-text-tertiary\)\)\] {
    color: var(--color-icon-tertiary, var(--color-text-tertiary));
  }

  .text-\[var\(--color-text-brand-primary\,var\(--brand\,\#1a7f6e\)\)\] {
    color: var(--color-text-brand-primary, var(--brand, #1a7f6e));
  }

  .text-\[var\(--color-text-error-primary\,\#d92d20\)\] {
    color: var(--color-text-error-primary, #d92d20);
  }

  .text-\[var\(--color-text-link\)\] {
    color: var(--color-text-link);
  }

  .text-\[var\(--color-text-link\,var\(--color-primary\)\)\] {
    color: var(--color-text-link, var(--color-primary));
  }

  .text-\[var\(--color-text-link-primary\,var\(--color-text-brand-primary\)\)\] {
    color: var(--color-text-link-primary, var(--color-text-brand-primary));
  }

  .text-\[var\(--color-text-on-brand\)\] {
    color: var(--color-text-on-brand);
  }

  .text-\[var\(--color-text-placeholder\)\] {
    color: var(--color-text-placeholder);
  }

  .text-\[var\(--color-text-white\)\] {
    color: var(--color-text-white);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-black-500 {
    color: var(--color-black-500);
  }

  .text-black-700 {
    color: var(--color-black-700);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-brand-300 {
    color: var(--color-brand-300);
  }

  .text-brand-700 {
    color: var(--color-brand-700);
  }

  .text-button-primary {
    color: var(--color-button-primary);
  }

  .text-cautions-400 {
    color: var(--color-cautions-400);
  }

  .text-current {
    color: currentColor;
  }

  .text-danger {
    color: var(--color-danger);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-icon-black {
    color: var(--color-icon-black);
  }

  .text-icon-brand-primary {
    color: var(--color-icon-brand-primary);
  }

  .text-icon-error-primary {
    color: var(--color-icon-error-primary);
  }

  .text-icon-green {
    color: var(--color-icon-green);
  }

  .text-icon-info-primary {
    color: var(--color-icon-info-primary);
  }

  .text-icon-on-error {
    color: var(--color-icon-on-error);
  }

  .text-icon-on-success {
    color: var(--color-icon-on-success);
  }

  .text-icon-secondary {
    color: var(--color-icon-secondary);
  }

  .text-icon-success-primary {
    color: var(--color-icon-success-primary);
  }

  .text-icon-tertiary {
    color: var(--color-icon-tertiary);
  }

  .text-icon-warning-primary {
    color: var(--color-icon-warning-primary);
  }

  .text-icon-white {
    color: var(--color-icon-white);
  }

  .text-info {
    color: var(--color-info);
  }

  .text-inherit {
    color: inherit;
  }

  .text-int-teal-600 {
    color: var(--color-int-teal-600);
  }

  .text-label-positive {
    color: var(--color-label-positive);
  }

  .text-label-progress {
    color: var(--color-label-progress);
  }

  .text-link-400 {
    color: var(--color-link-400);
  }

  .text-navy-500 {
    color: var(--color-navy-500);
  }

  .text-negative-400 {
    color: var(--color-negative-400);
  }

  .text-notification-error {
    color: var(--color-notification-error);
  }

  .text-notification-link {
    color: var(--color-notification-link);
  }

  .text-ob-teal-600 {
    color: var(--color-ob-teal-600);
  }

  .text-positive-400 {
    color: var(--color-positive-400);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .text-progressive-400 {
    color: var(--color-progressive-400);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-secondary {
    color: var(--color-secondary);
  }

  .text-surface-primary-blue {
    color: var(--color-surface-primary-blue);
  }

  .text-surface-primary-white {
    color: var(--color-surface-primary-white);
  }

  .text-text-brand-primary {
    color: var(--color-text-brand-primary);
  }

  .text-text-brand-secondary {
    color: var(--color-text-brand-secondary);
  }

  .text-text-disable {
    color: var(--color-text-disable);
  }

  .text-text-error-primary {
    color: var(--color-text-error-primary);
  }

  .text-text-placeholder {
    color: var(--color-text-placeholder);
  }

  .text-text-primary {
    color: var(--color-text-primary);
  }

  .text-text-secondary {
    color: var(--color-text-secondary);
  }

  .text-text-subtitle {
    color: var(--color-text-subtitle);
  }

  .text-text-subtitle\! {
    color: var(--color-text-subtitle) !important;
  }

  .text-text-success-primary {
    color: var(--color-text-success-primary);
  }

  .text-text-tertiary {
    color: var(--color-text-tertiary);
  }

  .text-text-title {
    color: var(--color-text-title);
  }

  .text-text-warning-primary {
    color: var(--color-text-warning-primary);
  }

  .text-text-warning-secondary {
    color: var(--color-text-warning-secondary);
  }

  .text-transparent {
    color: #0000;
  }

  .text-warning {
    color: var(--color-warning);
  }

  .text-warning-400 {
    color: var(--color-warning-400);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .normal-case {
    text-transform: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  );
  }

  .no-underline {
    text-decoration-line: none;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .\[text-underline-offset\:2px\], .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-auto {
    text-underline-offset: auto;
  }

  .\!opacity-50 {
    opacity: .5 !important;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-85 {
    opacity: .85;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.45\] {
    opacity: .45;
  }

  .opacity-\[0\.85\] {
    opacity: .85;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0px 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_0_rgba\(86\,86\,86\,0\.06\)\] {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #5656560f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0px_-4px_8px_0px_\#00000014\] {
    --tw-shadow: 0px -4px 8px 0px var(--tw-shadow-color, #00000014);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0px_7px_17px_0px_\#33333312\] {
    --tw-shadow: 0px 7px 17px 0px var(--tw-shadow-color, #33333312);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_2px_\#27B199\] {
    --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, #27b199);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\] {
    --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, #0000), 0 1px 4px 0 var(--tw-shadow-color, #27b19980);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\] {
      --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, #0000), 0 1px 4px 0 var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 50%,transparent));
    }
  }

  .shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\] {
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--shadow-md\)\] {
    --tw-shadow: var(--shadow-md);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-card {
    --tw-shadow: 0px 4px 12px 0px var(--tw-shadow-color, #0a0a0a1a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-card-float {
    --tw-shadow: 0px 8px 32px 0px var(--tw-shadow-color, #0a0a0a1f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-large {
    --tw-shadow: 0px 8px 24px 0px var(--tw-shadow-color, #0a0a0a1a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0px 10px 15px -3px var(--tw-shadow-color, #0000001a), 0px 4px 6px -2px var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0px 4px 6px -1px var(--tw-shadow-color, #0000001a), 0px 2px 4px -1px var(--tw-shadow-color, #0000000f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-medium {
    --tw-shadow: 0px 7px 17px 0px var(--tw-shadow-color, #33333312);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, #0000001a), 0px 1px 2px 0px var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-small {
    --tw-shadow: 0px 2px 8px 0px var(--tw-shadow-color, #0a0a0a1a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0px 20px 25px -5px var(--tw-shadow-color, #0000001a), 0px 10px 10px -5px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xs {
    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\!ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .inset-ring {
    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-transparent {
    --tw-shadow-color: transparent;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-transparent {
      --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
    }
  }

  .\!ring-danger {
    --tw-ring-color: var(--color-danger) !important;
  }

  .ring-bg-primary {
    --tw-ring-color: var(--color-bg-primary);
  }

  .ring-danger {
    --tw-ring-color: var(--color-danger);
  }

  .ring-gray-200 {
    --tw-ring-color: var(--color-gray-200);
  }

  .ring-gray-300 {
    --tw-ring-color: var(--color-gray-300);
  }

  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }

  .ring-red-500 {
    --tw-ring-color: var(--color-red-500);
  }

  .ring-red-600 {
    --tw-ring-color: var(--color-red-600);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-danger {
    outline-color: var(--color-danger);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .filter {
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[border-color\,box-shadow\] {
    transition-property: border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-height\] {
    transition-property: max-height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\,flex-basis\] {
    transition-property: width, flex-basis;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-75 {
    --tw-duration: 75ms;
    transition-duration: 75ms;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-120 {
    --tw-duration: .12s;
    transition-duration: .12s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-\[120ms\] {
    --tw-duration: .12s;
    transition-duration: .12s;
  }

  .duration-\[140ms\] {
    --tw-duration: .14s;
    transition-duration: .14s;
  }

  .duration-\[160ms\] {
    --tw-duration: .16s;
    transition-duration: .16s;
  }

  .ease-\[ease\] {
    --tw-ease: ease;
    transition-timing-function: ease;
  }

  .ease-\[var\(--ease-emphasized\,ease\)\] {
    --tw-ease: var(--ease-emphasized, ease);
    transition-timing-function: var(--ease-emphasized, ease);
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-linear {
    --tw-ease: linear;
    transition-timing-function: linear;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  @media (hover: hover) {
    .group-hover\:z-10:is(:where(.group):hover *) {
      z-index: 10;
    }

    .group-hover\:cursor-pointer:is(:where(.group):hover *) {
      cursor: pointer;
    }

    .group-hover\:fill-primary:is(:where(.group):hover *) {
      fill: var(--color-primary);
    }

    .group-hover\:stroke-primary:is(:where(.group):hover *) {
      stroke: var(--color-primary);
    }

    .group-hover\:stroke-white:is(:where(.group):hover *) {
      stroke: var(--color-white);
    }

    .group-hover\:underline:is(:where(.group):hover *) {
      text-decoration-line: underline;
    }

    .group-hover\:opacity-60:is(:where(.group):hover *) {
      opacity: .6;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .group-data-\[state\=open\]\:rotate-180:is(:where(.group)[data-state="open"] *) {
    rotate: 180deg;
  }

  .group-data-\[state\=open\]\:bg-bg-brand-primary:is(:where(.group)[data-state="open"] *) {
    background-color: var(--color-bg-brand-primary);
  }

  .group-data-\[state\=open\]\:text-icon-brand-primary:is(:where(.group)[data-state="open"] *) {
    color: var(--color-icon-brand-primary);
  }

  .placeholder\:text-gray-800::placeholder {
    color: var(--color-gray-800);
  }

  .placeholder\:text-text-placeholder::placeholder {
    color: var(--color-text-placeholder);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:bottom-0:after {
    content: var(--tw-content);
    bottom: calc(var(--spacing) * 0);
  }

  .after\:bottom-1\/2:after {
    content: var(--tw-content);
    bottom: 50%;
  }

  .after\:left-0:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:z-10:after {
    content: var(--tw-content);
    z-index: 10;
  }

  .after\:ml-0\.5:after {
    content: var(--tw-content);
    margin-left: calc(var(--spacing) * .5);
  }

  .after\:block:after {
    content: var(--tw-content);
    display: block;
  }

  .after\:h-0:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 0);
  }

  .after\:h-1:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 1);
  }

  .after\:w-full:after {
    content: var(--tw-content);
    width: 100%;
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:translate-y-1\/2:after {
    content: var(--tw-content);
    --tw-translate-y: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:rounded-t-lg:after {
    content: var(--tw-content);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }

  .after\:bg-primary:after {
    content: var(--tw-content);
    background-color: var(--color-primary);
  }

  .after\:font-semibold:after {
    content: var(--tw-content);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .after\:text-current:after {
    content: var(--tw-content);
    color: currentColor;
  }

  .after\:text-danger:after {
    content: var(--tw-content);
    color: var(--color-danger);
  }

  .after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .after\:duration-100:after {
    content: var(--tw-content);
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .after\:duration-300:after {
    content: var(--tw-content);
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .after\:content-\[\"\"\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .after\:content-\[\'\*\'\]:after {
    --tw-content: "*";
    content: var(--tw-content);
  }

  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .first\:pt-0\.5:first-child {
    padding-top: calc(var(--spacing) * .5);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:pb-0\.5:last-child {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .focus-within\:ring-0:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-2:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-danger:focus-within {
    --tw-ring-color: var(--color-danger);
  }

  .focus-within\:ring-primary:focus-within {
    --tw-ring-color: var(--color-primary);
  }

  .focus-within\:ring-red-500:focus-within {
    --tw-ring-color: var(--color-red-500);
  }

  @media (hover: hover) {
    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:cursor-pointer:hover {
      cursor: pointer;
    }

    .hover\:border-border-brand-focus:hover {
      border-color: var(--color-border-brand-focus);
    }

    .hover\:border-border-brand-primary:hover {
      border-color: var(--color-border-brand-primary);
    }

    .hover\:border-border-secondary:hover {
      border-color: var(--color-border-secondary);
    }

    .hover\:border-border-warning-primary:hover {
      border-color: var(--color-border-warning-primary);
    }

    .hover\:border-danger:hover {
      border-color: var(--color-danger);
    }

    .hover\:border-gray-400:hover {
      border-color: var(--color-gray-400);
    }

    .hover\:border-int-teal-600:hover {
      border-color: var(--color-int-teal-600);
    }

    .hover\:border-primary:hover {
      border-color: var(--color-primary);
    }

    .hover\:border-primary-hover:hover {
      border-color: var(--color-primary-hover);
    }

    .hover\:\!bg-white\/30:hover {
      background-color: #ffffff4d !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-white\/30:hover {
        background-color: color-mix(in oklab, var(--color-white) 30%, transparent) !important;
      }
    }

    .hover\:\!bg-white\/90:hover {
      background-color: #ffffffe6 !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-white\/90:hover {
        background-color: color-mix(in oklab, var(--color-white) 90%, transparent) !important;
      }
    }

    .hover\:bg-bg-brand-primary:hover {
      background-color: var(--color-bg-brand-primary);
    }

    .hover\:bg-bg-secondary:hover {
      background-color: var(--color-bg-secondary);
    }

    .hover\:bg-blue-50:hover {
      background-color: var(--color-blue-50);
    }

    .hover\:bg-button-primary\/70:hover {
      background-color: #27b199b3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-button-primary\/70:hover {
        background-color: color-mix(in oklab, var(--color-button-primary) 70%, transparent);
      }
    }

    .hover\:bg-danger:hover {
      background-color: var(--color-danger);
    }

    .hover\:bg-danger-light:hover {
      background-color: var(--color-danger-light);
    }

    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-300:hover {
      background-color: var(--color-gray-300);
    }

    .hover\:bg-green-50:hover {
      background-color: var(--color-green-50);
    }

    .hover\:bg-primary:hover {
      background-color: var(--color-primary);
    }

    .hover\:bg-primary-hover:hover {
      background-color: var(--color-primary-hover);
    }

    .hover\:bg-primary-hover\/10:hover {
      background-color: #2883721a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary-hover\/10:hover {
        background-color: color-mix(in oklab, var(--color-primary-hover) 10%, transparent);
      }
    }

    .hover\:bg-primary\/5:hover {
      background-color: #27b1990d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/5:hover {
        background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
      }
    }

    .hover\:bg-primary\/80:hover {
      background-color: #27b199cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
      }
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-slate-50:hover {
      background-color: var(--color-slate-50);
    }

    .hover\:bg-slate-700:hover {
      background-color: var(--color-slate-700);
    }

    .hover\:bg-soft-green:hover {
      background-color: var(--color-soft-green);
    }

    .hover\:bg-surface-disable:hover {
      background-color: var(--color-surface-disable);
    }

    .hover\:bg-surface-primary-blue\/5:hover {
      background-color: #01416c0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-primary-blue\/5:hover {
        background-color: color-mix(in oklab, var(--color-surface-primary-blue) 5%, transparent);
      }
    }

    .hover\:bg-surface-primary-white:hover {
      background-color: var(--color-surface-primary-white);
    }

    .hover\:bg-surface-primary-white\/50:hover {
      background-color: #ffffff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-primary-white\/50:hover {
        background-color: color-mix(in oklab, var(--color-surface-primary-white) 50%, transparent);
      }
    }

    .hover\:bg-surface-secondary:hover {
      background-color: var(--color-surface-secondary);
    }

    .hover\:bg-surface-secondary\/30:hover {
      background-color: #fafafa4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-secondary\/30:hover {
        background-color: color-mix(in oklab, var(--color-surface-secondary) 30%, transparent);
      }
    }

    .hover\:bg-surface-secondary\/50:hover {
      background-color: #fafafa80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-secondary\/50:hover {
        background-color: color-mix(in oklab, var(--color-surface-secondary) 50%, transparent);
      }
    }

    .hover\:font-medium:hover {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }

    .hover\:\[color\:color-mix\(in_srgb\,var\(--color-notification-link\)_80\%\,black_20\%\)\]:hover {
      color: #0062cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\[color\:color-mix\(in_srgb\,var\(--color-notification-link\)_80\%\,black_20\%\)\]:hover {
        color: color-mix(in srgb,var(--color-notification-link) 80%,black 20%);
      }
    }

    .hover\:\[color\:color-mix\(in_srgb\,var\(--color-primary\)_80\%\,black_20\%\)\]:hover {
      color: #1f8e7a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\[color\:color-mix\(in_srgb\,var\(--color-primary\)_80\%\,black_20\%\)\]:hover {
        color: color-mix(in srgb,var(--color-primary) 80%,black 20%);
      }
    }

    .hover\:text-black-700:hover {
      color: var(--color-black-700);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-gray-700:hover {
      color: var(--color-gray-700);
    }

    .hover\:text-gray-900:hover {
      color: var(--color-gray-900);
    }

    .hover\:text-icon-primary:hover {
      color: var(--color-icon-primary);
    }

    .hover\:text-notification-link\/70:hover {
      color: #007bffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-notification-link\/70:hover {
        color: color-mix(in oklab, var(--color-notification-link) 70%, transparent);
      }
    }

    .hover\:text-primary:hover {
      color: var(--color-primary);
    }

    .hover\:text-primary\/80:hover {
      color: #27b199cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-primary\/80:hover {
        color: color-mix(in oklab, var(--color-primary) 80%, transparent);
      }
    }

    .hover\:text-red-700:hover {
      color: var(--color-red-700);
    }

    .hover\:text-text-brand-primary:hover {
      color: var(--color-text-brand-primary);
    }

    .hover\:text-text-disable:hover {
      color: var(--color-text-disable);
    }

    .hover\:text-text-error-primary:hover {
      color: var(--color-text-error-primary);
    }

    .hover\:text-text-primary:hover {
      color: var(--color-text-primary);
    }

    .hover\:text-text-title:hover {
      color: var(--color-text-title);
    }

    .hover\:text-text-warning-secondary:hover {
      color: var(--color-text-warning-secondary);
    }

    .hover\:no-underline:hover {
      text-decoration-line: none;
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-\[0_1px_4px_0_rgba\(86\,86\,86\,0\.50\)\]:hover {
      --tw-shadow: 0 1px 4px 0 var(--tw-shadow-color, #56565680);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[inset_0_0_0_1px_\#bfbfbf\]:hover {
      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #bfbfbf);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\.2\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\]:hover {
      --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, #0003), 0 1px 4px 0 var(--tw-shadow-color, #27b19980);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\.2\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\]:hover {
        --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, #0003), 0 1px 4px 0 var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 50%,transparent));
      }
    }

    .hover\:shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\.2\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\]:hover {
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0px 4px 6px -1px var(--tw-shadow-color, #0000001a), 0px 2px 4px -1px var(--tw-shadow-color, #0000000f);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-medium:hover {
      --tw-shadow: 0px 7px 17px 0px var(--tw-shadow-color, #33333312);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-gray-400:hover {
      --tw-ring-color: var(--color-gray-400);
    }

    .hover\:after\:h-1:hover:after {
      content: var(--tw-content);
      height: calc(var(--spacing) * 1);
    }

    .hover\:after\:bg-gray-300:hover:after {
      content: var(--tw-content);
      background-color: var(--color-gray-300);
    }

    .hover\:after\:bg-primary\/50:hover:after {
      content: var(--tw-content);
      background-color: #27b19980;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:after\:bg-primary\/50:hover:after {
        background-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
      }
    }
  }

  .focus\:border-border-brand-primary:focus {
    border-color: var(--color-border-brand-primary);
  }

  .focus\:border-primary:focus {
    border-color: var(--color-primary);
  }

  .focus\:bg-gray-50:focus {
    background-color: var(--color-gray-50);
  }

  .focus\:bg-surface-secondary:focus {
    background-color: var(--color-surface-secondary);
  }

  .focus\:shadow-\[0_0_0_3px_var\(--color-bg-brand-primary\)\]:focus {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-bg-brand-primary));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring:focus, .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:\!ring-danger:focus {
    --tw-ring-color: var(--color-danger) !important;
  }

  .focus\:ring-blue-500\/20:focus {
    --tw-ring-color: #3b82f633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-blue-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
    }
  }

  .focus\:ring-gray-400:focus {
    --tw-ring-color: var(--color-gray-400);
  }

  .focus\:ring-primary:focus {
    --tw-ring-color: var(--color-primary);
  }

  .focus\:ring-primary\/20:focus {
    --tw-ring-color: #27b19933;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
    }
  }

  .focus\:ring-primary\/30:focus {
    --tw-ring-color: #27b1994d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary\/30:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
    }
  }

  .focus\:ring-primary\/50:focus {
    --tw-ring-color: #27b19980;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-primary\/50:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
    }
  }

  .focus\:ring-red-500\/20:focus {
    --tw-ring-color: #ef444433;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-red-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .focus\:ring-yellow-500\/20:focus {
    --tw-ring-color: #edb20033;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-yellow-500\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
    }
  }

  .focus\:ring-offset-1:focus {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:rounded-\[2px\]:focus-visible {
    border-radius: 2px;
  }

  .focus-visible\:rounded-\[4px\]:focus-visible {
    border-radius: 4px;
  }

  .focus-visible\:bg-bg-secondary:focus-visible {
    background-color: var(--color-bg-secondary);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-blue-500:focus-visible {
    --tw-ring-color: var(--color-blue-500);
  }

  .focus-visible\:ring-border-focus-ring:focus-visible {
    --tw-ring-color: var(--color-border-focus-ring);
  }

  .focus-visible\:ring-notification-link:focus-visible {
    --tw-ring-color: var(--color-notification-link);
  }

  .focus-visible\:ring-primary:focus-visible {
    --tw-ring-color: var(--color-primary);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:\[outline-offset\:-2px\]:focus-visible {
    outline-offset: -2px;
  }

  .focus-visible\:\[outline-offset\:2px\]:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-offset-1:focus-visible {
    outline-offset: 1px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-\[color\:var\(--color-border-focus-ring\)\]:focus-visible {
    outline-color: var(--color-border-focus-ring);
  }

  .focus-visible\:outline-\[var\(--color-border-brand-primary\)\]:focus-visible {
    outline-color: var(--color-border-brand-primary);
  }

  .focus-visible\:outline-\[var\(--color-border-brand-primary\,var\(--brand\,\#27b199\)\)\]:focus-visible {
    outline-color: var(--color-border-brand-primary, var(--brand, #27b199));
  }

  .focus-visible\:outline-\[var\(--color-border-focus-ring\)\]:focus-visible {
    outline-color: var(--color-border-focus-ring);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-98:active {
    --tw-scale-x: 98%;
    --tw-scale-y: 98%;
    --tw-scale-z: 98%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:bg-\[\#F6F6F6\]:active {
    background-color: #f6f6f6;
  }

  .active\:bg-gray-200:active {
    background-color: var(--color-gray-200);
  }

  .active\:bg-primary-hover\/20:active {
    background-color: #28837233;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-primary-hover\/20:active {
      background-color: color-mix(in oklab, var(--color-primary-hover) 20%, transparent);
    }
  }

  .active\:bg-primary\/90:active {
    background-color: #27b199e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-primary\/90:active {
      background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
    }
  }

  .active\:bg-surface-secondary\/80:active {
    background-color: #fafafacc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-surface-secondary\/80:active {
      background-color: color-mix(in oklab, var(--color-surface-secondary) 80%, transparent);
    }
  }

  .active\:bg-surface-secondary\/90:active {
    background-color: #fafafae6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-surface-secondary\/90:active {
      background-color: color-mix(in oklab, var(--color-surface-secondary) 90%, transparent);
    }
  }

  .active\:\[color\:color-mix\(in_srgb\,var\(--color-notification-link\)_60\%\,black_40\%\)\]:active {
    color: #004a99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:\[color\:color-mix\(in_srgb\,var\(--color-notification-link\)_60\%\,black_40\%\)\]:active {
      color: color-mix(in srgb,var(--color-notification-link) 60%,black 40%);
    }
  }

  .active\:\[color\:color-mix\(in_srgb\,var\(--color-primary\)_60\%\,black_40\%\)\]:active {
    color: #176a5c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:\[color\:color-mix\(in_srgb\,var\(--color-primary\)_60\%\,black_40\%\)\]:active {
      color: color-mix(in srgb,var(--color-primary) 60%,black 40%);
    }
  }

  .active\:text-black-700\/60:active {
    color: #0a0a0a99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:text-black-700\/60:active {
      color: color-mix(in oklab, var(--color-black-700) 60%, transparent);
    }
  }

  .active\:text-text-error-secondary:active {
    color: var(--color-text-error-secondary);
  }

  .active\:shadow-\[0_1px_4px_0_rgba\(86\,86\,86\,0\.50\)\]:active {
    --tw-shadow: 0 1px 4px 0 var(--tw-shadow-color, #56565680);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .active\:shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\.4\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\]:active {
    --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, #0006), 0 1px 4px 0 var(--tw-shadow-color, #27b19980);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\.4\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\]:active {
      --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, #0006), 0 1px 4px 0 var(--tw-shadow-color, color-mix(in srgb,var(--color-primary) 50%,transparent));
    }
  }

  .active\:shadow-\[inset_0_0_0_1000px_rgba\(0\,0\,0\,0\.4\)\,0_1px_4px_0_color-mix\(in_srgb\,var\(--color-primary\)_50\%\,transparent\)\]:active {
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .active\:duration-100:active {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-default:disabled {
    cursor: default;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:border-surface-disable:disabled {
    border-color: var(--color-surface-disable);
  }

  .disabled\:bg-bg-disabled:disabled {
    background-color: var(--color-bg-disabled);
  }

  .disabled\:bg-surface-disable:disabled {
    background-color: var(--color-surface-disable);
  }

  .disabled\:bg-surface-secondary:disabled {
    background-color: var(--color-surface-secondary);
  }

  .disabled\:text-gray-800\!:disabled {
    color: var(--color-gray-800) !important;
  }

  .disabled\:text-text-disable:disabled {
    color: var(--color-text-disable);
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-55:disabled {
    opacity: .55;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .disabled\:shadow-none:disabled {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-highlighted\:bg-bg-secondary[data-highlighted] {
    background-color: var(--color-bg-secondary);
  }

  .data-\[active\=true\]\:border-\[color\:var\(--color-border-brand-primary\,var\(--color-border-primary\)\)\][data-active="true"] {
    border-color: var(--color-border-brand-primary, var(--color-border-primary));
  }

  .data-\[active\=true\]\:bg-bg-brand-primary[data-active="true"] {
    background-color: var(--color-bg-brand-primary);
  }

  .data-\[state\=closed\]\:border-b-0[data-state="closed"] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }

    .motion-reduce\:transition-none {
      transition-property: none;
    }
  }

  @media not all and (min-width: 640px) {
    .max-\[640px\]\:hidden {
      display: none;
    }

    .max-\[640px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .max-\[640px\]\:flex-col {
      flex-direction: column;
    }

    .max-\[640px\]\:gap-\[8px\] {
      gap: 8px;
    }
  }

  @media not all and (min-width: 560px) {
    .max-\[560px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 520px) {
    .max-\[520px\]\:hidden {
      display: none;
    }

    .max-\[520px\]\:flex-col {
      flex-direction: column;
    }

    .max-\[520px\]\:gap-\[16px\] {
      gap: 16px;
    }
  }

  @media not all and (min-width: 480px) {
    .max-\[480px\]\:w-full {
      width: 100%;
    }

    .max-\[480px\]\:min-w-full {
      min-width: 100%;
    }

    .max-\[480px\]\:flex-wrap {
      flex-wrap: wrap;
    }

    .max-\[480px\]\:p-\[14px\] {
      padding: 14px;
    }

    .max-\[480px\]\:p-\[16px\] {
      padding: 16px;
    }

    .max-\[480px\]\:text-left {
      text-align: left;
    }
  }

  @media not all and (min-width: 420px) {
    .max-\[420px\]\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .max-\[420px\]\:w-\[220px\] {
      width: 220px;
    }

    .max-\[420px\]\:basis-16 {
      flex-basis: calc(var(--spacing) * 16);
    }

    .max-\[420px\]\:basis-\[220px\] {
      flex-basis: 220px;
    }

    .max-\[420px\]\:gap-\[14px\] {
      gap: 14px;
    }

    .max-\[420px\]\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .max-\[420px\]\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .max-\[420px\]\:pt-\[14px\] {
      padding-top: 14px;
    }

    .max-\[420px\]\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .max-\[420px\]\:pb-\[14px\] {
      padding-bottom: 14px;
    }
  }

  @media not all and (min-width: 380px) {
    .max-\[380px\]\:flex-col {
      flex-direction: column;
    }

    .max-\[380px\]\:gap-\[16px\] {
      gap: 16px;
    }
  }

  @media not all and (min-width: 48rem) {
    .max-md\:flex {
      display: flex;
    }
  }

  @media (min-width: 40rem) {
    .sm\:max-w-80 {
      max-width: calc(var(--spacing) * 80);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .sm\:text-xl\/8 {
      font-size: var(--text-xl);
      line-height: calc(var(--spacing) * 8);
    }

    .sm\:leading-6 {
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 48rem) {
    .md\:hidden {
      display: none;
    }

    .md\:min-w-\[340px\] {
      min-width: 340px;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-84 {
      width: calc(var(--spacing) * 84);
    }

    .lg\:w-140 {
      width: calc(var(--spacing) * 140);
    }

    .lg\:w-\[552px\] {
      width: 552px;
    }

    .lg\:w-\[calc\(50\%-16px\)\] {
      width: calc(50% - 16px);
    }

    .lg\:w-\[calc\(50\%-20px\)\] {
      width: calc(50% - 20px);
    }

    .lg\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[360px_1fr\] {
      grid-template-columns: 360px 1fr;
    }

    .lg\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 80rem) {
    .xl\:sticky {
      position: sticky;
    }

    .xl\:top-4 {
      top: calc(var(--spacing) * 4);
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
      grid-template-columns: minmax(0, 1fr) 360px;
    }
  }

  :where(.rtl\:space-x-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
    --tw-space-x-reverse: 1;
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-700 {
      background-color: var(--color-gray-700);
    }

    .dark\:text-gray-400 {
      color: var(--color-gray-400);
    }

    .dark\:text-red-400 {
      color: var(--color-red-400);
    }

    .dark\:text-text-subtitle {
      color: var(--color-text-subtitle);
    }

    @media (hover: hover) {
      .dark\:hover\:bg-red-900\/20:hover {
        background-color: #7f1d1d33;
      }

      @supports (color: color-mix(in lab, red, red)) {
        .dark\:hover\:bg-red-900\/20:hover {
          background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
        }
      }
    }
  }

  .\[\&_p\]\:m-0 p {
    margin: calc(var(--spacing) * 0);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:size-2\.5 svg {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\]\:text-blue-600 svg {
    color: var(--color-blue-600);
  }

  .\[\&_svg\]\:text-inherit svg {
    color: inherit;
  }

  .\[\&_svg\]\:text-primary svg {
    color: var(--color-primary);
  }

  .\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-6 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-5 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .\[\&\>\*\]\:flex-1 > * {
    flex: 1;
  }

  .\[\&\>a\]\:underline > a {
    text-decoration-line: underline;
  }

  .\[\&\>a\]\:underline-offset-4 > a {
    text-underline-offset: 4px;
  }

  .\[\&\>a\:hover\]\:text-primary > a:hover {
    color: var(--color-primary);
  }

  .\[\&\>svg\]\:size-5 > svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  @media (min-width: 1181px) {
    .\[\@media\(min-width\:1181px\)\]\:grid-cols-\[minmax\(0\,1fr\)_360px\] {
      grid-template-columns: minmax(0, 1fr) 360px;
    }
  }

  .oc-scrollbar-sm {
    scrollbar-width: thin;
    scrollbar-color: #bfbfbfcc transparent;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .oc-scrollbar-sm {
      scrollbar-color: color-mix(in oklab, var(--color-gray-500) 80%, transparent) transparent;
    }
  }

  .oc-scrollbar-sm::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .oc-scrollbar-sm::-webkit-scrollbar-track {
    background: none;
  }

  .oc-scrollbar-sm::-webkit-scrollbar-thumb {
    background-color: #bfbfbfcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .oc-scrollbar-sm::-webkit-scrollbar-thumb {
      background-color: color-mix(in oklab, var(--color-gray-500) 80%, transparent);
    }
  }

  .oc-scrollbar-sm::-webkit-scrollbar-thumb {
    border-radius: 9999px;
  }

  .oc-scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }

  .oc-scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

:root {
  --brand: #27b199;
  --duration-fast: .12s;
  --duration-base: .15s;
  --duration-moderate: .18s;
  --duration-slow: .2s;
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: ease-out;
  --ease-exit: ease-in;
  --z-base: 0;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-dropdown: 1500;
  --z-popover: 1600;
  --z-tooltip: 1700;
  --z-toast: 1800;
  --shadow-inner: inset 0px 2px 4px 0px #0000000d;
  --shadow-knob: 0 1px 2px 0px #0003;
  --shadow-drawer: -8px 0 32px 0px #0000002e;
}

[data-theme="dark"] {
  --color-bg-primary: var(--color-slate-900);
  --color-bg-secondary: var(--color-slate-800);
  --color-bg-tertiary: var(--color-slate-700);
  --color-bg-inverse: var(--color-slate-50);
  --color-bg-black-solid: var(--color-slate-950);
  --color-bg-disabled: var(--color-slate-800);
  --color-bg-disabled-alt: var(--color-slate-700);
  --color-bg-brand-primary: var(--color-brand-950);
  --color-bg-brand-secondary: var(--color-brand-500);
  --color-bg-brand-hover: var(--color-brand-400);
  --color-bg-brand-active: var(--color-brand-300);
  --color-bg-error-primary: var(--color-red-950);
  --color-bg-error-secondary: var(--color-red-500);
  --color-bg-error-hover: var(--color-red-400);
  --color-bg-error-active: var(--color-red-300);
  --color-bg-success-primary: var(--color-green-950);
  --color-bg-success-secondary: var(--color-green-500);
  --color-bg-success-hover: var(--color-green-400);
  --color-bg-success-active: var(--color-green-300);
  --color-bg-warning-primary: var(--color-amber-950);
  --color-bg-warning-secondary: var(--color-amber-500);
  --color-bg-warning-hover: var(--color-amber-400);
  --color-bg-warning-active: var(--color-amber-300);
  --color-bg-info-primary: var(--color-blue-950);
  --color-bg-info-secondary: var(--color-blue-500);
  --color-bg-info-hover: var(--color-blue-400);
  --color-bg-info-active: var(--color-blue-300);
  --color-bg-overlay-primary: var(--color-black-alpha-500);
  --color-bg-overlay-secondary: var(--color-black-alpha-700);
  --color-bg-overlay-inverse: var(--color-white-alpha-100);
  --color-bg-orange-primary: var(--color-orange-950);
  --color-bg-orange-secondary: var(--color-orange-500);
  --color-bg-purple-primary: var(--color-purple-950);
  --color-bg-purple-secondary: var(--color-purple-500);
  --color-bg-pink-primary: var(--color-pink-950);
  --color-bg-pink-secondary: var(--color-pink-500);
  --color-bg-bubble-customer: var(--color-bg-secondary);
  --color-bg-bubble-admin: var(--color-brand-500);
  --color-bg-bubble-agent: var(--color-brand-700);
  --color-bg-bubble-bot: var(--color-slate-600);
  --color-bg-bubble-whisper: var(--color-bg-warning-primary);
  --color-bg-row-selected: var(--color-brand-900);
  --color-text-primary: var(--color-slate-50);
  --color-text-secondary: var(--color-slate-300);
  --color-text-tertiary: var(--color-slate-400);
  --color-text-disabled: var(--color-slate-600);
  --color-text-placeholder: var(--color-slate-400);
  --color-text-white: var(--color-white);
  --color-text-inverse: var(--color-slate-900);
  --color-text-brand-primary: var(--color-brand-400);
  --color-text-brand-secondary: var(--color-brand-300);
  --color-text-error-primary: var(--color-red-400);
  --color-text-error-secondary: var(--color-red-300);
  --color-text-success-primary: var(--color-green-400);
  --color-text-success-secondary: var(--color-green-300);
  --color-text-warning-primary: var(--color-amber-400);
  --color-text-warning-secondary: var(--color-amber-300);
  --color-text-info-primary: var(--color-blue-400);
  --color-text-info-secondary: var(--color-blue-300);
  --color-text-orange-primary: var(--color-orange-400);
  --color-text-orange-secondary: var(--color-orange-300);
  --color-text-purple-primary: var(--color-purple-400);
  --color-text-purple-secondary: var(--color-purple-300);
  --color-text-pink-primary: var(--color-pink-400);
  --color-text-pink-secondary: var(--color-pink-300);
  --color-text-on-brand: var(--color-slate-950);
  --color-text-on-error: var(--color-slate-950);
  --color-text-on-success: var(--color-slate-950);
  --color-text-on-warning: var(--color-slate-950);
  --color-text-on-info: var(--color-slate-950);
  --color-text-link: var(--color-blue-400);
  --color-text-link-hover: var(--color-blue-300);
  --color-text-link-visited: var(--color-purple-400);
  --color-icon-primary: var(--color-slate-50);
  --color-icon-secondary: var(--color-slate-300);
  --color-icon-tertiary: var(--color-slate-400);
  --color-icon-disabled: var(--color-slate-600);
  --color-icon-disabled-alt: var(--color-slate-700);
  --color-icon-placeholder: var(--color-slate-400);
  --color-icon-white: var(--color-white);
  --color-icon-inverse: var(--color-slate-900);
  --color-icon-brand-primary: var(--color-brand-400);
  --color-icon-brand-secondary: var(--color-brand-300);
  --color-icon-error-primary: var(--color-red-400);
  --color-icon-error-secondary: var(--color-red-300);
  --color-icon-success-primary: var(--color-green-400);
  --color-icon-success-secondary: var(--color-green-300);
  --color-icon-warning-primary: var(--color-amber-400);
  --color-icon-warning-secondary: var(--color-amber-300);
  --color-icon-info-primary: var(--color-blue-400);
  --color-icon-info-secondary: var(--color-blue-300);
  --color-icon-orange-primary: var(--color-orange-400);
  --color-icon-orange-secondary: var(--color-orange-300);
  --color-icon-purple-primary: var(--color-purple-400);
  --color-icon-purple-secondary: var(--color-purple-300);
  --color-icon-pink-primary: var(--color-pink-400);
  --color-icon-pink-secondary: var(--color-pink-300);
  --color-icon-on-brand: var(--color-slate-950);
  --color-icon-on-error: var(--color-slate-950);
  --color-icon-on-success: var(--color-slate-950);
  --color-icon-on-warning: var(--color-slate-950);
  --color-icon-on-info: var(--color-slate-950);
  --color-border-primary: var(--color-slate-500);
  --color-border-secondary: var(--color-slate-400);
  --color-border-tertiary: var(--color-slate-500);
  --color-border-input: var(--color-slate-500);
  --color-border-primary-solid: var(--color-slate-50);
  --color-border-disabled: var(--color-slate-500);
  --color-border-disabled-alt: var(--color-slate-400);
  --color-border-focus-ring: var(--color-blue-400);
  --color-border-brand-primary: var(--color-brand-600);
  --color-border-brand-secondary: var(--color-brand-500);
  --color-border-brand-focus: var(--color-brand-400);
  --color-border-error-primary: var(--color-red-500);
  --color-border-error-secondary: var(--color-red-500);
  --color-border-success-primary: var(--color-green-500);
  --color-border-success-secondary: var(--color-green-500);
  --color-border-warning-primary: var(--color-amber-500);
  --color-border-warning-secondary: var(--color-amber-500);
  --color-border-info-primary: var(--color-blue-500);
  --color-border-info-secondary: var(--color-blue-500);
  --color-border-orange-primary: var(--color-orange-500);
  --color-border-orange-secondary: var(--color-orange-500);
  --color-border-purple-primary: var(--color-purple-500);
  --color-border-purple-secondary: var(--color-purple-500);
  --color-border-pink-primary: var(--color-pink-500);
  --color-border-pink-secondary: var(--color-pink-500);
  --color-interactive-primary: var(--color-brand-500);
  --color-interactive-primary-hover: var(--color-brand-400);
  --color-interactive-primary-active: var(--color-brand-300);
  --color-interactive-primary-disabled: var(--color-brand-950);
  --color-interactive-secondary: var(--color-slate-700);
  --color-interactive-secondary-hover: var(--color-slate-600);
  --color-interactive-secondary-active: var(--color-slate-500);
  --color-interactive-secondary-disabled: var(--color-slate-800);
  --color-interactive-error: var(--color-red-500);
  --color-interactive-error-hover: var(--color-red-400);
  --color-interactive-error-active: var(--color-red-300);
  --color-interactive-error-disabled: var(--color-red-950);
  --color-interactive-warning: var(--color-amber-500);
  --color-interactive-warning-hover: var(--color-amber-400);
  --color-interactive-warning-active: var(--color-amber-300);
  --color-interactive-warning-disabled: var(--color-amber-950);
  --color-interactive-success: var(--color-green-500);
  --color-interactive-success-hover: var(--color-green-400);
  --color-interactive-success-active: var(--color-green-300);
  --color-interactive-success-disabled: var(--color-green-950);
  --color-interactive-info: var(--color-blue-500);
  --color-interactive-info-hover: var(--color-blue-400);
  --color-interactive-info-active: var(--color-blue-300);
  --color-interactive-info-disabled: var(--color-blue-950);
}

[data-theme="light"] {
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-slate-50);
  --color-bg-tertiary: var(--color-slate-100);
  --color-bg-inverse: var(--color-slate-900);
  --color-bg-black-solid: var(--color-slate-900);
  --color-bg-disabled: var(--color-slate-100);
  --color-bg-disabled-alt: var(--color-slate-200);
  --color-bg-brand-primary: var(--color-brand-100);
  --color-bg-brand-primary-hover: var(--color-brand-200);
  --color-bg-brand-secondary: var(--color-brand-700);
  --color-bg-brand-hover: var(--color-brand-800);
  --color-bg-brand-active: var(--color-brand-900);
  --color-bg-error-primary: var(--color-red-100);
  --color-bg-error-secondary: var(--color-red-700);
  --color-bg-error-hover: var(--color-red-800);
  --color-bg-error-active: var(--color-red-900);
  --color-bg-success-primary: var(--color-green-100);
  --color-bg-success-secondary: var(--color-green-700);
  --color-bg-success-hover: var(--color-green-800);
  --color-bg-success-active: var(--color-green-900);
  --color-bg-warning-primary: var(--color-amber-100);
  --color-bg-warning-secondary: var(--color-amber-700);
  --color-bg-warning-hover: var(--color-amber-800);
  --color-bg-warning-active: var(--color-amber-900);
  --color-bg-info-primary: var(--color-blue-100);
  --color-bg-info-secondary: var(--color-blue-700);
  --color-bg-info-hover: var(--color-blue-800);
  --color-bg-info-active: var(--color-blue-900);
  --color-bg-overlay-primary: var(--color-black-alpha-500);
  --color-bg-overlay-secondary: var(--color-black-alpha-700);
  --color-bg-overlay-inverse: var(--color-white-alpha-500);
  --color-bg-orange-primary: var(--color-orange-100);
  --color-bg-orange-secondary: var(--color-orange-700);
  --color-bg-purple-primary: var(--color-purple-100);
  --color-bg-purple-secondary: var(--color-purple-700);
  --color-bg-pink-primary: var(--color-pink-100);
  --color-bg-pink-secondary: var(--color-pink-700);
  --color-bg-bubble-customer: var(--color-bg-secondary);
  --color-bg-bubble-admin: var(--color-brand-500);
  --color-bg-bubble-agent: var(--color-brand-700);
  --color-bg-bubble-bot: var(--color-slate-600);
  --color-bg-bubble-whisper: var(--color-bg-warning-primary);
  --color-bg-row-selected: var(--color-brand-100);
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-tertiary: var(--color-slate-500);
  --color-text-disabled: var(--color-slate-400);
  --color-text-placeholder: var(--color-slate-500);
  --color-text-white: var(--color-white);
  --color-text-inverse: var(--color-white);
  --color-text-brand-primary: var(--color-brand-800);
  --color-text-brand-secondary: var(--color-brand-900);
  --color-text-error-primary: var(--color-red-600);
  --color-text-error-secondary: var(--color-red-800);
  --color-text-success-primary: var(--color-green-600);
  --color-text-success-secondary: var(--color-green-800);
  --color-text-warning-primary: var(--color-amber-700);
  --color-text-warning-secondary: var(--color-amber-800);
  --color-text-info-primary: var(--color-blue-600);
  --color-text-info-secondary: var(--color-blue-800);
  --color-text-orange-primary: var(--color-orange-600);
  --color-text-orange-secondary: var(--color-orange-800);
  --color-text-purple-primary: var(--color-purple-600);
  --color-text-purple-secondary: var(--color-purple-800);
  --color-text-pink-primary: var(--color-pink-600);
  --color-text-pink-secondary: var(--color-pink-800);
  --color-text-on-brand: var(--color-white);
  --color-text-on-purple: var(--color-white);
  --color-text-on-orange: var(--color-white);
  --color-text-on-pink: var(--color-white);
  --color-text-on-error: var(--color-white);
  --color-text-on-success: var(--color-white);
  --color-text-on-warning: var(--color-white);
  --color-text-on-info: var(--color-white);
  --color-text-link: var(--color-blue-600);
  --color-text-link-hover: var(--color-blue-800);
  --color-text-link-visited: var(--color-purple-800);
  --color-text-link-active: var(--color-blue-900);
  --color-icon-primary: var(--color-slate-900);
  --color-icon-secondary: var(--color-slate-600);
  --color-icon-tertiary: var(--color-slate-500);
  --color-icon-disabled: var(--color-slate-400);
  --color-icon-disabled-alt: var(--color-slate-300);
  --color-icon-placeholder: var(--color-slate-500);
  --color-icon-white: var(--color-white);
  --color-icon-inverse: var(--color-white);
  --color-icon-brand-primary: var(--color-brand-700);
  --color-icon-brand-secondary: var(--color-brand-800);
  --color-icon-error-primary: var(--color-red-700);
  --color-icon-error-secondary: var(--color-red-800);
  --color-icon-success-primary: var(--color-green-700);
  --color-icon-success-secondary: var(--color-green-800);
  --color-icon-warning-primary: var(--color-amber-700);
  --color-icon-warning-secondary: var(--color-amber-800);
  --color-icon-info-primary: var(--color-blue-700);
  --color-icon-info-secondary: var(--color-blue-800);
  --color-icon-orange-primary: var(--color-orange-700);
  --color-icon-orange-secondary: var(--color-orange-800);
  --color-icon-purple-primary: var(--color-purple-700);
  --color-icon-purple-secondary: var(--color-purple-800);
  --color-icon-pink-primary: var(--color-pink-700);
  --color-icon-pink-secondary: var(--color-pink-800);
  --color-icon-on-brand: var(--color-white);
  --color-icon-on-purple: var(--color-white);
  --color-icon-on-orange: var(--color-white);
  --color-icon-on-pink: var(--color-white);
  --color-icon-on-error: var(--color-white);
  --color-icon-on-success: var(--color-white);
  --color-icon-on-warning: var(--color-white);
  --color-icon-on-info: var(--color-white);
  --color-border-primary: var(--color-slate-200);
  --color-border-secondary: var(--color-slate-300);
  --color-border-tertiary: var(--color-slate-400);
  --color-border-input: var(--color-slate-500);
  --color-border-primary-solid: var(--color-slate-900);
  --color-border-disabled: var(--color-slate-300);
  --color-border-disabled-alt: var(--color-slate-200);
  --color-border-focus-ring: var(--color-blue-700);
  --color-border-brand-primary: var(--color-brand-600);
  --color-border-brand-secondary: var(--color-brand-700);
  --color-border-brand-focus: var(--color-brand-700);
  --color-border-error-primary: var(--color-red-500);
  --color-border-error-subtle: var(--color-red-300);
  --color-border-error-secondary: var(--color-red-700);
  --color-border-success-primary: var(--color-green-600);
  --color-border-success-secondary: var(--color-green-700);
  --color-border-warning-primary: var(--color-amber-600);
  --color-border-warning-secondary: var(--color-amber-700);
  --color-border-info-primary: var(--color-blue-500);
  --color-border-info-secondary: var(--color-blue-700);
  --color-border-orange-primary: var(--color-orange-600);
  --color-border-orange-secondary: var(--color-orange-700);
  --color-border-purple-primary: var(--color-purple-500);
  --color-border-purple-secondary: var(--color-purple-700);
  --color-border-pink-primary: var(--color-pink-500);
  --color-border-pink-secondary: var(--color-pink-700);
  --color-interactive-primary: var(--color-brand-700);
  --color-interactive-primary-hover: var(--color-brand-800);
  --color-interactive-primary-active: var(--color-brand-900);
  --color-interactive-primary-disabled: var(--color-brand-100);
  --color-interactive-secondary: var(--color-slate-100);
  --color-interactive-secondary-hover: var(--color-slate-200);
  --color-interactive-secondary-active: var(--color-slate-300);
  --color-interactive-secondary-disabled: var(--color-slate-50);
  --color-interactive-error: var(--color-red-700);
  --color-interactive-error-hover: var(--color-red-800);
  --color-interactive-error-active: var(--color-red-900);
  --color-interactive-error-disabled: var(--color-red-100);
  --color-interactive-warning: var(--color-amber-700);
  --color-interactive-warning-hover: var(--color-amber-800);
  --color-interactive-warning-active: var(--color-amber-900);
  --color-interactive-warning-disabled: var(--color-amber-100);
  --color-interactive-success: var(--color-green-700);
  --color-interactive-success-hover: var(--color-green-800);
  --color-interactive-success-active: var(--color-green-900);
  --color-interactive-success-disabled: var(--color-green-100);
  --color-interactive-info: var(--color-blue-700);
  --color-interactive-info-hover: var(--color-blue-800);
  --color-interactive-info-active: var(--color-blue-900);
  --color-interactive-info-disabled: var(--color-blue-100);
  --color-indicator-success: var(--color-green-600);
  --color-indicator-error: var(--color-red-600);
  --color-indicator-warning: var(--color-amber-600);
  --color-indicator-info: var(--color-blue-600);
  --color-indicator-neutral: var(--color-slate-500);
}

body {
  font-family: var(--font-sans);
}

[data-theme="light"] {
  --color-accent-200: #d1ece5;
  --color-accent-300: #a1d9cb;
  --color-accent-400: #8ec5b2;
  --color-accent-500: #27b199;
  --color-accent-600: #288372;
  --color-accent-700: #24584e;
  --color-accent-800: #1b312c;
  --color-navy-200: #c4cbd9;
  --color-navy-300: #8a9ab3;
  --color-navy-400: #506c8f;
  --color-navy-500: #01416c;
  --color-navy-600: #103352;
  --color-navy-700: #14263a;
  --color-navy-800: #121923;
  --color-black-500: #a0a0a0;
  --color-black-600: #8f8f8f;
  --color-black-700: #0a0a0a;
  --color-black-800: #565656;
  --color-black-900: #0a0a0a;
  --color-black-900-60: #0a0a0a;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #fafafa;
  --color-gray-300: #ececec;
  --color-gray-400: #dfdfdf;
  --color-gray-500: #bfbfbf;
  --color-gray-800: #a0a0a0;
  --color-white-100: #fff;
  --color-white-200: #fafafa;
  --color-white-300: #ececec;
  --color-white-400: #dfdfdf;
  --color-surface-primary-green: #27b199;
  --color-surface-primary-blue: #01416c;
  --color-surface-primary-white: #fff;
  --color-surface-secondary: #fafafa;
  --color-surface-disable: #ececec;
  --color-surface-popup: #0a0a0a;
  --color-surface-highlight: #d1ece5;
  --color-text-title: #0a0a0a;
  --color-text-subtitle: #565656;
  --color-text-disable: #8f8f8f;
  --color-button-primary: #27b199;
  --color-button-hover-primary: #288372;
  --color-stroke-bold: #8f8f8f;
  --color-stroke-regular: #ececec;
  --color-icon-black: #0a0a0a;
  --color-icon-green: #27b199;
  --color-icon-disable: #8f8f8f;
  --color-primary: #27b199;
  --color-primary-hover: #288372;
  --color-secondary: #fafafa;
  --color-success: #288c7a;
  --color-success-light: #f1f9ef;
  --color-info: #56ccf2;
  --color-info-light: #eefafe;
  --color-danger: #eb5757;
  --color-danger-light: #ffd7d2;
  --shadow-small: 0px 2px 8px 0px #0a0a0a1a;
  --shadow-base: 0px 4px 12px 0px #0a0a0a1a;
  --shadow-medium: 0px 7px 17px 0px #33333312;
  --shadow-large: 0px 8px 24px 0px #0a0a0a1a;
  --shadow-card: 0px 4px 12px 0px #0a0a0a1a;
  --shadow-card-float: 0px 8px 32px 0px #0a0a0a1f;
  --shadow-button: 0 4px 4px -1px #0a0a0a1a;
}

[data-theme="dark"] {
  --color-soft-blue: #103352;
  --color-soft-orange: #3d2f14;
  --color-soft-red: #3d1420;
  --color-positive-100: #1b312c;
  --color-positive-400: #27b199;
  --color-ob-teal-200: #24584e;
  --color-ob-teal-600: #8ec5b2;
  --color-link-400: #4a9eff;
  --shadow-small: 0px 2px 8px 0px #0000004d;
  --shadow-base: 0px 4px 12px 0px #00000040;
  --shadow-medium: 0px 7px 17px 0px #0003;
  --shadow-large: 0px 8px 24px 0px #00000059;
  --shadow-card: 0px 4px 12px 0px #00000040;
  --shadow-card-float: 0px 8px 32px 0px #0006;
  --shadow-button: 0 4px 4px -1px #0003;
}

[data-theme="dark"] body {
  background-color: var(--color-white-200);
}

[data-theme="ember"] {
  --color-accent-200: #2d2318;
  --color-accent-300: #3d2e1a;
  --color-accent-400: #4a3820;
  --color-accent-500: #e67e22;
  --color-accent-600: #ea9052;
  --color-accent-700: #c96b1f;
  --color-accent-800: #d4a574;
  --color-navy-200: #2c2c2e;
  --color-navy-300: #3a3a3c;
  --color-navy-400: #48484a;
  --color-navy-500: #636366;
  --color-navy-600: #8e8e93;
  --color-navy-700: #8e8e93;
  --color-navy-800: #c7c7cc;
  --color-black-500: #8e8e93;
  --color-black-600: #aeaeb2;
  --color-black-700: #fafafa;
  --color-black-800: #e5e5ea;
  --color-black-900: #fff;
  --color-black-900-60: #fff9;
  --color-gray-100: #2c2c2e;
  --color-gray-200: #1c1c1e;
  --color-gray-300: #3a3a3c;
  --color-gray-400: #48484a;
  --color-gray-500: #8e8e93;
  --color-gray-800: #c7c7cc;
  --color-white-100: #1c1c1e;
  --color-white-200: #2c2c2e;
  --color-white-300: #3a3a3c;
  --color-white-400: #48484a;
  --color-surface-primary-green: #e67e22;
  --color-surface-primary-blue: #01416c;
  --color-surface-primary-white: #2c2c2e;
  --color-surface-secondary: #3a3a3c;
  --color-surface-disable: #48484a;
  --color-surface-popup: #3a3a3c;
  --color-surface-highlight: #4a3820;
  --color-text-primary: #e67e22;
  --color-text-secondary: #1c1c1e;
  --color-text-title: #fafafa;
  --color-text-subtitle: #c7c7cc;
  --color-text-disable: #636366;
  --color-text-placeholder: #8e8e93;
  --color-button-primary: #e67e22;
  --color-button-hover-primary: #ea9052;
  --color-stroke-bold: #48484a;
  --color-stroke-regular: #3a3a3c;
  --color-icon-black: #fafafa;
  --color-icon-white: #1c1c1e;
  --color-icon-green: #e67e22;
  --color-icon-disable: #636366;
  --color-primary: #e67e22;
  --color-primary-hover: #ea9052;
  --color-secondary: #3a3a3c;
  --color-success: #288c7a;
  --color-success-light: #2d2318;
  --color-info: #56ccf2;
  --color-info-light: #2c2c2e;
  --color-danger: #eb5757;
  --color-danger-light: #3d1420;
  --shadow-small: 0px 2px 8px 0px #0000004d;
  --shadow-base: 0px 4px 12px 0px #00000040;
  --shadow-medium: 0px 7px 17px 0px #0003;
  --shadow-large: 0px 8px 24px 0px #00000059;
  --shadow-card: 0px 4px 12px 0px #00000040;
  --shadow-card-float: 0px 8px 32px 0px #0006;
  --shadow-button: 0 4px 4px -1px #0003;
}

[data-theme="ember"] body {
  background-color: var(--color-white-200);
}

[data-theme="discord"] {
  --color-accent-200: #1e2124;
  --color-accent-300: #2f3136;
  --color-accent-400: #36393f;
  --color-accent-500: #5865f2;
  --color-accent-600: #7289da;
  --color-accent-700: #5865f2;
  --color-accent-800: #9bb3e8;
  --color-navy-200: #202225;
  --color-navy-300: #2f3136;
  --color-navy-400: #36393f;
  --color-navy-500: #4f545c;
  --color-navy-600: #72767d;
  --color-navy-700: #7289da;
  --color-navy-800: #dcddde;
  --color-black-500: #72767d;
  --color-black-600: #b9bbbe;
  --color-black-700: #fff;
  --color-black-800: #e3e5e8;
  --color-black-900: #fff;
  --color-black-900-60: #fff9;
  --color-gray-100: #2f3136;
  --color-gray-200: #202225;
  --color-gray-300: #36393f;
  --color-gray-400: #4f545c;
  --color-gray-500: #72767d;
  --color-gray-800: #dcddde;
  --color-white-100: #202225;
  --color-white-200: #2f3136;
  --color-white-300: #36393f;
  --color-white-400: #4f545c;
  --color-surface-primary-green: #5865f2;
  --color-surface-primary-blue: #5865f2;
  --color-surface-primary-white: #36393f;
  --color-surface-secondary: #2f3136;
  --color-surface-disable: #202225;
  --color-surface-popup: #36393f;
  --color-surface-highlight: #3c3e45;
  --color-text-primary: #7289da;
  --color-text-secondary: #202225;
  --color-text-title: #fff;
  --color-text-subtitle: #dcddde;
  --color-text-disable: #72767d;
  --color-text-placeholder: #b9bbbe;
  --color-button-primary: #5865f2;
  --color-button-hover-primary: #7289da;
  --color-stroke-bold: #4f545c;
  --color-stroke-regular: #36393f;
  --color-icon-black: #fff;
  --color-icon-white: #202225;
  --color-icon-green: #7289da;
  --color-icon-disable: #72767d;
  --color-primary: #5865f2;
  --color-primary-hover: #7289da;
  --color-secondary: #2f3136;
  --color-success: #43b581;
  --color-success-light: #1e2124;
  --color-info: #7289da;
  --color-info-light: #2f3136;
  --color-danger: #f04747;
  --color-danger-light: #3d1420;
  --shadow-small: 0px 2px 8px 0px #0006;
  --shadow-base: 0px 4px 12px 0px #00000059;
  --shadow-medium: 0px 7px 17px 0px #0000004d;
  --shadow-large: 0px 8px 24px 0px #00000073;
  --shadow-card: 0px 4px 12px 0px #00000059;
  --shadow-card-float: 0px 8px 32px 0px #00000080;
  --shadow-button: 0 4px 4px -1px #0000004d;
}

[data-theme="discord"] body {
  background-color: var(--color-white-200);
}

[data-theme="midnight"] {
  --color-accent-200: #0d1117;
  --color-accent-300: #161b22;
  --color-accent-400: #21262d;
  --color-accent-500: #4a9eff;
  --color-accent-600: #58a6ff;
  --color-accent-700: #4a9eff;
  --color-accent-800: #79c0ff;
  --color-navy-200: #0d0d0d;
  --color-navy-300: #161b22;
  --color-navy-400: #21262d;
  --color-navy-500: #30363d;
  --color-navy-600: #484f58;
  --color-navy-700: #4a9eff;
  --color-navy-800: #c9d1d9;
  --color-black-500: #484f58;
  --color-black-600: #8b949e;
  --color-black-700: #f0f6fc;
  --color-black-800: #c9d1d9;
  --color-black-900: #fff;
  --color-black-900-60: #fff9;
  --color-gray-100: #161b22;
  --color-gray-200: #0d1117;
  --color-gray-300: #21262d;
  --color-gray-400: #30363d;
  --color-gray-500: #8b949e;
  --color-gray-800: #c9d1d9;
  --color-white-100: #0d0d0d;
  --color-white-200: #161b22;
  --color-white-300: #21262d;
  --color-white-400: #30363d;
  --color-surface-primary-green: #4a9eff;
  --color-surface-primary-blue: #4a9eff;
  --color-surface-primary-white: #21262d;
  --color-surface-secondary: #161b22;
  --color-surface-disable: #0d1117;
  --color-surface-popup: #21262d;
  --color-surface-highlight: #1c3a5e;
  --color-text-primary: #4a9eff;
  --color-text-secondary: #0d0d0d;
  --color-text-title: #f0f6fc;
  --color-text-subtitle: #c9d1d9;
  --color-text-disable: #484f58;
  --color-text-placeholder: #8b949e;
  --color-button-primary: #4a9eff;
  --color-button-hover-primary: #58a6ff;
  --color-stroke-bold: #30363d;
  --color-stroke-regular: #21262d;
  --color-icon-black: #f0f6fc;
  --color-icon-white: #0d0d0d;
  --color-icon-green: #4a9eff;
  --color-icon-disable: #484f58;
  --color-primary: #4a9eff;
  --color-primary-hover: #58a6ff;
  --color-secondary: #161b22;
  --color-success: #3fb950;
  --color-success-light: #0d1117;
  --color-info: #4a9eff;
  --color-info-light: #161b22;
  --color-danger: #f85149;
  --color-danger-light: #3d1420;
  --shadow-small: 0px 2px 8px 0px #00000080;
  --shadow-base: 0px 4px 12px 0px #00000073;
  --shadow-medium: 0px 7px 17px 0px #0006;
  --shadow-large: 0px 8px 24px 0px #0000008c;
  --shadow-card: 0px 4px 12px 0px #00000073;
  --shadow-card-float: 0px 8px 32px 0px #0009;
  --shadow-button: 0 4px 4px -1px #00000059;
}

[data-theme="midnight"] body {
  background-color: var(--color-white-200);
}

[data-theme="dracula"] {
  --color-accent-200: #21222c;
  --color-accent-300: #282a36;
  --color-accent-400: #44475a;
  --color-accent-500: #bd93f9;
  --color-accent-600: #6272a4;
  --color-accent-700: #bd93f9;
  --color-accent-800: #c5aef5;
  --color-navy-200: #1e1f29;
  --color-navy-300: #282a36;
  --color-navy-400: #44475a;
  --color-navy-500: #6272a4;
  --color-navy-600: #6272a4;
  --color-navy-700: #bd93f9;
  --color-navy-800: #f8f8f2;
  --color-black-500: #6272a4;
  --color-black-600: #a0a0b8;
  --color-black-700: #f8f8f2;
  --color-black-800: #e8e8e2;
  --color-black-900: #fff;
  --color-black-900-60: #fff9;
  --color-gray-100: #282a36;
  --color-gray-200: #21222c;
  --color-gray-300: #44475a;
  --color-gray-400: #6272a4;
  --color-gray-500: #a0a0b8;
  --color-gray-800: #f8f8f2;
  --color-white-100: #21222c;
  --color-white-200: #282a36;
  --color-white-300: #44475a;
  --color-white-400: #6272a4;
  --color-surface-primary-green: #bd93f9;
  --color-surface-primary-blue: #bd93f9;
  --color-surface-primary-white: #44475a;
  --color-surface-secondary: #282a36;
  --color-surface-disable: #21222c;
  --color-surface-popup: #44475a;
  --color-surface-highlight: #3d3a50;
  --color-text-primary: #bd93f9;
  --color-text-secondary: #21222c;
  --color-text-title: #f8f8f2;
  --color-text-subtitle: #f8f8f2;
  --color-text-disable: #6272a4;
  --color-text-placeholder: #a0a0b8;
  --color-button-primary: #bd93f9;
  --color-button-hover-primary: #c5aef5;
  --color-stroke-bold: #6272a4;
  --color-stroke-regular: #44475a;
  --color-icon-black: #f8f8f2;
  --color-icon-white: #21222c;
  --color-icon-green: #bd93f9;
  --color-icon-disable: #6272a4;
  --color-primary: #bd93f9;
  --color-primary-hover: #c5aef5;
  --color-secondary: #282a36;
  --color-success: #50fa7b;
  --color-success-light: #21222c;
  --color-info: #8be9fd;
  --color-info-light: #282a36;
  --color-danger: #f55;
  --color-danger-light: #3d1420;
  --shadow-small: 0px 2px 8px 0px #00000059;
  --shadow-base: 0px 4px 12px 0px #0000004d;
  --shadow-medium: 0px 7px 17px 0px #00000040;
  --shadow-large: 0px 8px 24px 0px #0006;
  --shadow-card: 0px 4px 12px 0px #0000004d;
  --shadow-card-float: 0px 8px 32px 0px #00000073;
  --shadow-button: 0 4px 4px -1px #00000040;
}

[data-theme="dracula"] body {
  background-color: var(--color-white-200);
}

[data-theme="dawn"] {
  --color-accent-200: #e8e4df;
  --color-accent-300: #dfd9d2;
  --color-accent-400: #d4cdc4;
  --color-accent-500: #2d9d78;
  --color-accent-600: #27b199;
  --color-accent-700: #248f73;
  --color-accent-800: #1a6b55;
  --color-navy-200: #f0ebe3;
  --color-navy-300: #e8e4df;
  --color-navy-400: #dfd9d2;
  --color-navy-500: #6b7280;
  --color-navy-600: #4b5563;
  --color-navy-700: #374151;
  --color-navy-800: #1f2937;
  --color-black-500: #6b7280;
  --color-black-600: #4b5563;
  --color-black-700: #1c1917;
  --color-black-800: #44403c;
  --color-black-900: #1c1917;
  --color-black-900-60: #1c191799;
  --color-gray-100: #faf8f5;
  --color-gray-200: #f5f1eb;
  --color-gray-300: #e8e4df;
  --color-gray-400: #dfd9d2;
  --color-gray-500: #a8a29e;
  --color-gray-800: #57534e;
  --color-white-100: #faf8f5;
  --color-white-200: #f5f1eb;
  --color-white-300: #e8e4df;
  --color-white-400: #dfd9d2;
  --color-surface-primary-green: #2d9d78;
  --color-surface-primary-blue: #01416c;
  --color-surface-primary-white: #faf8f5;
  --color-surface-secondary: #f5f1eb;
  --color-surface-disable: #e8e4df;
  --color-surface-popup: #faf8f5;
  --color-surface-highlight: #d1ece5;
  --color-text-primary: #2d9d78;
  --color-text-secondary: #1c1917;
  --color-text-title: #1c1917;
  --color-text-subtitle: #57534e;
  --color-text-disable: #a8a29e;
  --color-text-placeholder: #78716c;
  --color-button-primary: #2d9d78;
  --color-button-hover-primary: #248f73;
  --color-stroke-bold: #a8a29e;
  --color-stroke-regular: #e8e4df;
  --color-icon-black: #1c1917;
  --color-icon-white: #faf8f5;
  --color-icon-green: #2d9d78;
  --color-icon-disable: #a8a29e;
  --color-primary: #2d9d78;
  --color-primary-hover: #248f73;
  --color-secondary: #f5f1eb;
  --color-success: #248f73;
  --color-success-light: #e8e4df;
  --color-info: #0ea5e9;
  --color-info-light: #e0f2fe;
  --color-danger: #dc2626;
  --color-danger-light: #fef2f2;
  --shadow-small: 0px 2px 8px 0px #1c191714;
  --shadow-base: 0px 4px 12px 0px #1c19171a;
  --shadow-medium: 0px 7px 17px 0px #1c19170f;
  --shadow-large: 0px 8px 24px 0px #1c19171f;
  --shadow-card: 0px 4px 12px 0px #1c19171a;
  --shadow-card-float: 0px 8px 32px 0px #1c191726;
  --shadow-button: 0 4px 4px -1px #1c191714;
}

[data-theme="dawn"] body {
  background-color: var(--color-white-200);
}

[data-outbound] {
  --color-text-placeholder: #8f8f8f;
}

[data-integration] {
  --color-text-primary: #27b199;
  --color-text-secondary: #fff;
  --color-text-placeholder: #a0a0a0;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.status[data-v-f2a9342d] {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--color-bg-secondary, #f8fafc);
}
.status__card[data-v-f2a9342d] {
  max-width: 30rem;
  width: 100%;
  text-align: center;
  padding: 40px 32px;
  border: 1px solid var(--color-border-primary, #e2e8f0);
  border-radius: var(--radius-xl, 16px);
  background: var(--color-bg-primary, #fff);
  box-shadow: var(--shadow-base, 0 4px 12px rgba(10, 10, 10, 0.06));
}
.status__badge[data-v-f2a9342d] {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 16px;
}
.status__title[data-v-f2a9342d] {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
}
.status__msg[data-v-f2a9342d] {
  margin: 0 0 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #475569);
}
.status__hint[data-v-f2a9342d] {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #64748b);
}
.status__hint code[data-v-f2a9342d] {
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-secondary, #f1f5f9);
  word-break: break-all;
}
.status__actions[data-v-f2a9342d] {
  margin-top: 24px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.status__btn[data-v-f2a9342d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}
.status__btn--primary[data-v-f2a9342d] {
  background: var(--color-bg-brand-solid, var(--brand, #27b199));
  color: var(--color-text-on-brand, #fff);
}
.status__btn--primary[data-v-f2a9342d]:hover {
  background: var(--color-bg-brand-hover, #1f8f7c);
}
.status__btn--ghost[data-v-f2a9342d] {
  background: transparent;
  border-color: var(--color-border-primary, #e2e8f0);
  color: var(--color-text-primary, #0f172a);
}
.status__btn--ghost[data-v-f2a9342d]:hover {
  background: var(--color-bg-secondary, #f1f5f9);
}

.app-gate[data-v-73ed78fc] {
  background: var(--color-bg-secondary);
}

/* Lib-local z-index — resolves above --z-toast (1800, ui-vue3 DS token); no
   new --z-* DS token added (AC-31). */
.app-gate-overlay[data-v-b7956e31] {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast, 1800) + 10);
}

/* Staggered row entrance — replays on row-set change (rows keyed by id, so a new
   page remounts each <tr> and re-triggers it). */
@media (prefers-reduced-motion: no-preference) {
.wa-row-in[data-v-172d598a] {
    animation: wa-row-in-172d598a 260ms var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)) both;
    /* Fan rows in; index capped at 16 (see :style) so a full 20-row page stays under ~0.7s. */
    animation-delay: calc(var(--row-index, 0) * 28ms);
}
}
@keyframes wa-row-in-172d598a {
from {
    opacity: 0;
    transform: translateY(6px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* DateRangePicker's popup is a reka-ui floating-ui Popper, teleported (via
 * `:to="datePickerHost"`) into `#template-insight-date-range-host` above.
 * Its `autoUpdate` keeps re-writing the popup's inline `top`/`left`/`transform`
 * on scroll/resize through Vue's reactive `:style` binding — a plain
 * `el.style.x = y` assignment silently drops any `!important` priority set via
 * JS `setProperty(..., 'important')` on that same property, so a JS-side
 * override gets clobbered within a frame. A stylesheet rule doesn't have that
 * problem: CSS `!important` always wins over inline styles regardless of how
 * often JS rewrites them. `:global()` is required because the popup is a
 * child component's teleported content — it never carries this component's
 * scope attribute, so a normal scoped selector can't reach it. Scoped to this
 * one host id rather than a bare `[data-reka-popper-content-wrapper]` so it
 * doesn't recenter every other Popover-based component (Select, filter
 * panels, tooltips) that shares the exact same reka-ui internal attribute.
 */
#template-insight-date-range-host [data-reka-popper-content-wrapper] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Lock the underlying dashboard so it can't scroll behind the gate. Unscoped:
   targets <body> directly. Mirrors the DS `html:has(.q-mgate)` rule. */
@media (max-width: 767.98px) {
body:has(.q-mgate) {
    overflow: hidden;
}
}

.card[data-v-f3252ba5] {
  position: relative;
  overflow: hidden;
}
.card[data-v-f3252ba5]:hover {
  border-color: var(--color-primary);
}
.card[data-v-f3252ba5]::after {
  content: '';
  position: absolute;
  left: -162px;
  bottom: -54px;
  width: 260px;
  height: 260px;
  filter: blur(115px);
  opacity: 0.2;
}
.card.whatsapp[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/whatsapp_badge.svg');
  background-size: cover;
}
.card.instagram[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/instagram_badge.svg');
  background-size: cover;
}
.card.tiktok[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/tiktok_badge.svg');
  background-size: cover;
}
.card.facebook[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/messenger_badge.svg');
  background-size: cover;
}
.card.line-channel[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/line_badge.svg');
  background-size: cover;
}
.card.telegram-channel[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/telegram_badge.svg');
  background-size: cover;
}
.card.qiscus[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/qiscus_badge.svg');
  background-size: cover;
}
.card.custom-channel[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/custom.svg');
  background-size: cover;
}
.card.bot-integration[data-v-f3252ba5]::after {
  background-image: url('https://omnichannel.qiscus.com/img/bot_badge.svg');
  background-size: cover;
}

/* Transition for Backdrop Fade */
.drawer-backdrop-fade-enter-active[data-v-e3a962b5],
.drawer-backdrop-fade-leave-active[data-v-e3a962b5] {
  /* Option 1: Increase duration for a more gentle fade */
  transition: opacity 0.2s ease-in-out;
}
.drawer-backdrop-fade-enter-from[data-v-e3a962b5],
.drawer-backdrop-fade-leave-to[data-v-e3a962b5] {
  opacity: 0;
}

/* Transition for Drawer Content Slide */
.drawer-slide-enter-active[data-v-e3a962b5],
.drawer-slide-leave-active[data-v-e3a962b5] {
  transition: transform 0.2s ease-out;
}
.drawer-slide-enter-from[data-v-e3a962b5],
.drawer-slide-leave-to[data-v-e3a962b5] {
  transform: translateX(100%);
}
.drawer-slide-enter-to[data-v-e3a962b5],
.drawer-slide-leave-from[data-v-e3a962b5] {
  transform: translateX(0);
}

div[data-index][data-v-77a51a27]::before {
  color: var(--color-gray-800);
  font-weight: 500;
  position: absolute;
  content: attr(data-index);
}
div[data-index].tab-active[data-v-77a51a27]::before {
  color: var(--color-white);
  font-weight: 600;
}
span[data-text][data-v-77a51a27]::before {
  color: var(--color-gray-800);
  font-weight: 500;
  position: absolute;
  content: attr(data-text);
}
span[data-text].tab-active[data-v-77a51a27]::before {
  color: var(--color-primary);
  font-weight: 600;
}

.dynamic-two-lines[data-v-8d8de7f6] {
  display: inline-block;

  /* Forces the width to be exactly half the character length */
  width: var(--chars);

  /* Fallbacks to keep the table cell clean */
  min-width: 15ch; /* Prevents it from getting too narrow on short text */
  max-width: 45ch; /* Prevents it from getting too wide on massive text */

  white-space: normal; /* Allows natural wrapping */
  word-break: break-word;
}

tr.space-under > td[data-v-9dfbfebb] {
  padding-bottom: 12px;
}

tr.space-under > td[data-v-9c8e00b7] {
  padding-bottom: 12px;
}

li[data-tab-content][data-v-bb6503d5]::after {
  content: attr(data-tab-content);
}

.fade-enter-active[data-v-14b32213],
.fade-leave-active[data-v-14b32213] {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.fade-enter-from[data-v-14b32213],
.fade-leave-to[data-v-14b32213] {
  opacity: 0;
  transform: translateY(4px);
}

/* Backdrop fade transitions */
.drawer-backdrop-fade-enter-active[data-v-73cc08b9],
.drawer-backdrop-fade-leave-active[data-v-73cc08b9] {
  transition: opacity 0.3s ease;
}
.drawer-backdrop-fade-enter-from[data-v-73cc08b9],
.drawer-backdrop-fade-leave-to[data-v-73cc08b9] {
  opacity: 0;
}

/* Modal scale and fade transitions */
.modal-scale-fade-enter-active[data-v-73cc08b9] {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-scale-fade-leave-active[data-v-73cc08b9] {
  transition: all 0.2s ease-in;
}
.modal-scale-fade-enter-from[data-v-73cc08b9] {
  opacity: 0;
  transform: scale(0.8);
}
.modal-scale-fade-enter-to[data-v-73cc08b9] {
  opacity: 1;
  transform: scale(1);
}
.modal-scale-fade-leave-from[data-v-73cc08b9] {
  opacity: 1;
  transform: scale(1);
}
.modal-scale-fade-leave-to[data-v-73cc08b9] {
  opacity: 0;
  transform: scale(0.9);
}

/* Backdrop fade transition */
.drawer-backdrop-fade-enter-active[data-v-b6f2e9a0],
.drawer-backdrop-fade-leave-active[data-v-b6f2e9a0] {
  transition: opacity 0.25s ease;
}
.drawer-backdrop-fade-enter-from[data-v-b6f2e9a0],
.drawer-backdrop-fade-leave-to[data-v-b6f2e9a0] {
  opacity: 0;
}

/* Modal slide-fade transition */
.modal-slide-fade-enter-from[data-v-b6f2e9a0] {
  opacity: 0;
  transform: translateY(-100px);
}
.modal-slide-fade-enter-active[data-v-b6f2e9a0] {
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}
.modal-slide-fade-leave-to[data-v-b6f2e9a0] {
  opacity: 0;
  transform: translateY(-100px);
}
.modal-slide-fade-leave-active[data-v-b6f2e9a0] {
  transition:
    opacity 0.25s ease-in,
    transform 0.25s ease-in;
}
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
.modal-select-dropdown [class*="absolute"][class*="z-[999]"] {
  z-index: 10002;
  width: 400px;
  position: fixed;
}
pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
.wceb[data-v-492ad038] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--color-bg-info-primary);
  border-bottom: 1px solid var(--color-border-info-primary);
  color: var(--color-text-info-primary);
  flex: none;
  font-size: 0.75rem;
}
.wceb__icon[data-v-492ad038] {
  flex: none;
  color: var(--color-icon-info-primary);
}
.wceb__text[data-v-492ad038] {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  line-height: 1.4;
}
.wceb__action[data-v-492ad038] {
  flex: none;
}

.v3-skel[data-v-d92bbe31] {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-primary);
}

/* ── Rail ── */
.v3-skel__rail[data-v-d92bbe31] {
  width: 72px;
  flex: none;
  border-right: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 20px;
}
.v3-skel__rail-logo[data-v-d92bbe31] {
  width: 36px;
  height: 36px;
}
.v3-skel__rail-items[data-v-d92bbe31] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex: 1;
}
.v3-skel__rail-item[data-v-d92bbe31] {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.v3-skel__rail-foot[data-v-d92bbe31] {
  width: 32px;
  height: 32px;
}

/* ── List ── */
.v3-skel__list[data-v-d92bbe31] {
  width: 360px;
  min-width: 320px;
  flex: none;
  border-right: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.v3-skel__list-head[data-v-d92bbe31] {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-primary);
}
.v3-skel__search[data-v-d92bbe31] {
  width: 100%;
  height: 40px;
  border-radius: 999px;
}
.v3-skel__rows[data-v-d92bbe31] {
  flex: 1;
  overflow: hidden;
  padding: 8px 0;
}
.v3-skel__row[data-v-d92bbe31] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.v3-skel__avatar[data-v-d92bbe31] {
  width: 46px;
  height: 46px;
  flex: none;
}
.v3-skel__row-text[data-v-d92bbe31] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v3-skel__line[data-v-d92bbe31] {
  height: 12px;
  border-radius: 6px;
}
.v3-skel__line--md[data-v-d92bbe31] { width: 55%;
}
.v3-skel__line--lg[data-v-d92bbe31] { width: 80%;
}

/* ── Chat ── */
.v3-skel__center[data-v-d92bbe31] {
  flex: 1;
  min-width: 0;
  background: var(--color-bg-secondary);
}

.app-layout[data-v-236cbac0] {
  display: flex;
  flex-direction: column;
  /* Fixed viewport height (not min-height): the inbox child route needs a
     DEFINITE parent height for its own fixed 3-column panels to scroll
     internally (see InboxRouteContent's `.inbox-viewport`) rather than the
     whole page scrolling as one column. Section pages that grow taller than
     the viewport still work — `.app-layout__content` scrolls internally. */
  height: 100dvh;
  background: var(--color-bg-secondary, #f7f8fa);
}
/* The rail + content row — takes the full `.app-layout` height. The system
   banners live INSIDE `.app-layout__content` (not here), so the rail is
   never shortened by them. */
.app-layout__body[data-v-236cbac0] {
  display: flex;
  flex: 1;
  min-height: 0;
}
/* Reserve the collapsed rail width so content doesn't jump before the async
   sidebar streams in (BrandRail owns its own 72px slot once mounted). */
.app-layout__rail-fallback[data-v-236cbac0] {
  width: 72px;
  flex: none;
  border-right: 1px solid var(--color-border-secondary, #ececec);
  background: var(--color-bg-primary, #fff);
}
.app-layout__content[data-v-236cbac0] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Routed page fills whatever height the banners above leave behind — scrolls
   internally so the banners stay pinned instead of scrolling away with it. */
.app-layout__routed[data-v-236cbac0] {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.inbox-viewport[data-v-324fe476] {
  height: 100%;
  overflow: hidden;
}

html,
body {
  height: 100%;
}
body {
  margin: 0px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
}
html {
  transition: background-color 200ms var(--ease-out);
}
.login {
  display: flex;
  min-height: 100vh;
}
.login__hero {
  position: relative;
  flex: 65 1 0px;
  min-width: 0px;
  background: var(--c-slate-950);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6xl);
  overflow: hidden;
}
.login__hero::before {
  content: '';
  position: absolute;
  inset: 0px;
  background: radial-gradient(
    120% 90% at 50% 40%,
    rgba(39, 177, 153, 0.2),
    rgba(15, 23, 42, 0) 62%
  );
  pointer-events: none;
}
.hero-orbit {
  position: absolute;
  inset: 0px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-orbit__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  animation: 54s linear 0s infinite normal none running heroOrbit;
}
.hero-orbit__c {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(60px);
  opacity: 0.32;
}
.hero-orbit__c--green {
  width: 460px;
  height: 460px;
  top: -300px;
  left: 50px;
  background: radial-gradient(circle, rgb(116, 193, 98) 0%, rgba(116, 193, 98, 0) 70%);
}
.hero-orbit__c--blue {
  width: 430px;
  height: 430px;
  top: 200px;
  left: 290px;
  background: radial-gradient(circle, rgb(43, 131, 238) 0%, rgba(43, 131, 238, 0) 70%);
}
.hero-orbit__c--amber {
  width: 400px;
  height: 400px;
  top: 200px;
  left: -290px;
  background: radial-gradient(circle, rgb(251, 180, 57) 0%, rgba(251, 180, 57, 0) 70%);
}
@keyframes heroOrbit {
100% {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-orbit__spin {
    animation: auto ease 0s 1 normal none running none;
}
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl);
  z-index: 1;
}
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 736 / 372;
}
.hero-scene {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 600ms var(--ease-in-out);
}
.hero-scene svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hero-caption {
  text-align: center;
  max-width: 460px;
  transition: opacity 220ms var(--ease-out);
  /* Reserve a stable height for the tallest slide caption (title + up to 3
     desc lines) and center the text within it. The carousel swaps between two
     captions of different line counts; without a fixed reservation the hero
     column changes height on each swap, which (via the `.login` flex row with
     min-height:100vh + stretched columns) re-centers the form column and makes
     the login form bob down/up in lockstep with the slides. */
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-caption__title {
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.15px;
  color: var(--c-white);
  margin: 0 0 var(--space-2xs);
}
.hero-caption__desc {
  font-size: 15px;
  line-height: 22px;
  color: var(--c-slate-400);
  margin: 0px;
  text-wrap: pretty;
}
.hero-dots {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.hero-dot {
  appearance: none;
  border: 0px;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-slate-600);
  transition:
    width 320ms var(--ease-out),
    background 320ms var(--ease-out);
}
.hero-dot:hover {
  background: var(--c-slate-400);
}
.hero-dot.is-active {
  width: 26px;
  background: var(--c-brand-400);
}
.hero-dot:focus-visible {
  outline: var(--border-sm) solid var(--border-focus-ring);
  outline-offset: 3px;
}
.hero-logo {
  height: 30px;
  width: auto;
  display: block;
}
.login__form {
  flex: 35 1 0px;
  min-width: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--bg-primary);
  transition: background-color 200ms var(--ease-out);
}
[data-role='agent'] .login__hero {
  background: var(--c-brand-950);
}
@media (max-width: 900px) {
.login__hero {
    display: none;
}
.login__form {
    flex: 1 1 100%;
}
}

/* The full-page two-column shell (.login / .login__hero / .login__form) plus
   the html/body reset are ported (page-global) in LoginHero.vue, and the fixed
   toggle in ThemeToggle.vue. This scoped block styles ONLY the form-card content
   this island renders. Colors use canonical --color-* names → they now theme
   correctly (dark) since the island no longer scopes/shadows ui-vue3's tokens;
   they resolve from the vendored qiscus-tokens.generated.css (light + dark). */
/* M2 (design parity): the DS Button sets `disabled = disabled || loading`, so
   the primary CTA picks up `disabled:bg-bg-disabled` and greys out while a
   request is in flight. The spec wants it to STAY brand while the spinner runs.
   Button exposes `aria-busy="true"` exactly when `loading` is set, so key the
   override off that. :deep() reaches the <button> rendered inside the child DS
   component (it doesn't carry this SFC's scope attribute). Scoped to the island
   and to the busy state only.
   C1 (QA fix): use --color-bg-brand-SECONDARY (brand-700, solid) — NOT
   --color-bg-brand-primary, which is a pale mint (color-mix with 77% white) in
   light theme → the white label was ~1.1:1 contrast, effectively invisible on
   every submit. brand-secondary keeps a solid brand fill with a legible white
   label in BOTH themes. */
[data-v-550692d2] button[aria-busy='true'] {
  background: var(--color-bg-brand-secondary) !important;
  color: var(--color-text-on-brand) !important;
  cursor: wait;
}
/* max-width 384px + type scale below match docs/design/login-parity-spec.md
   §2, §6.3 (legacy login-sso.css .form-card / .form-lead / .form-title). */
/* Fixed top-right cluster holding the locale switcher + theme toggle. The
   toggle no longer self-positions (see ThemeToggle.vue) — this cluster owns the
   fixed placement so the two controls sit together, right-aligned. */
.login-topright[data-v-550692d2] {
  position: fixed;
  top: var(--space-lg, 16px);
  right: var(--space-lg, 16px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-card[data-v-550692d2] {
  width: 100%;
  max-width: 384px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.brand-logo[data-v-550692d2] {
  display: inline-flex;
  margin-bottom: 32px;
}
.screens[data-v-550692d2] {
  width: 100%;
}
.screen[data-v-550692d2] {
  display: flex;
  flex-direction: column;
}
.screen--state[data-v-550692d2] {
  align-items: center;
  text-align: center;
  gap: 4px;
  padding-top: 8px;
}
.form-lead[data-v-550692d2] {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-tertiary);
  margin: 0 0 2px;
}
.form-title[data-v-550692d2] {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.2px;
  font-weight: 700;
  margin: 2px 0 40px;
  color: var(--color-text-primary);
}
.screen-title[data-v-550692d2] {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.1px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--color-text-primary);
}
.screen-lead[data-v-550692d2] {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-tertiary);
  margin: 0 0 20px;
}
.screen-lead--warn[data-v-550692d2] {
  color: var(--color-text-warning-primary, #b45309);
}
.screen-msg[data-v-550692d2] {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-tertiary);
  margin: 0 0 20px;
  max-width: 300px;
}
.screen-help[data-v-550692d2] {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 14px 0 0;
}
.form-fields[data-v-550692d2] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.form-actions[data-v-550692d2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screen-actions[data-v-550692d2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.pw-labelrow[data-v-550692d2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.link-btn[data-v-550692d2] {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-brand-primary);
  font: 500 14px/20px var(--font-sans, sans-serif);
  text-decoration: none;
}
.link-btn[data-v-550692d2]:hover {
  text-decoration: underline;
}
.link-forgot[data-v-550692d2] {
  color: var(--color-text-brand-primary);
  font-weight: 600;
}
.or-div[data-v-550692d2] {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-tertiary);
  font-size: 12px;
  margin: 2px 0;
}
.or-div span[data-v-550692d2] {
  text-transform: uppercase;
  letter-spacing: 1.1px;
}
.or-div[data-v-550692d2]::before,
.or-div[data-v-550692d2]::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-primary);
}
.forgot-block[data-v-550692d2] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}
.forgot-copy[data-v-550692d2] {
  color: var(--color-text-tertiary);
}
.agent-help[data-v-550692d2] {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 12px 0 0;
}
.back-btn[data-v-550692d2] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-tertiary);
  font: 500 14px/20px var(--font-sans, sans-serif);
  margin-bottom: 16px;
  align-self: flex-start;
}
.back-btn[data-v-550692d2]:hover {
  color: var(--color-text-brand-primary);
}
.ic[data-v-550692d2] {
  width: 16px;
  height: 16px;
}
.ic--lg[data-v-550692d2] {
  width: 40px;
  height: 40px;
}
.bubble[data-v-550692d2] {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.bubble--warn[data-v-550692d2] {
  background: var(--color-bg-warning-primary);
  color: var(--color-text-warning-primary);
}
.bubble--error[data-v-550692d2] {
  background: var(--color-bg-error-primary);
  color: var(--color-text-error-primary);
}
.bubble--success[data-v-550692d2] {
  background: var(--color-bg-success-primary);
  color: var(--color-text-success-primary);
}
.bubble--brand[data-v-550692d2] {
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
}
.spinner[data-v-550692d2] {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid var(--color-border-primary);
  border-top-color: var(--brand, var(--color-text-brand-primary));
  margin: 0 auto 12px;
  animation: login-spin-550692d2 800ms linear infinite;
}
@keyframes login-spin-550692d2 {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.spinner[data-v-550692d2] {
    animation-duration: 2000ms;
}
}
.ws-chip[data-v-550692d2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border-primary);
  margin-bottom: 8px;
}
.ws-chip__left[data-v-550692d2] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ws-avatar[data-v-550692d2] {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  font-weight: 700;
}
.ws-code[data-v-550692d2] {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-change[data-v-550692d2] {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-brand-primary);
  font: 600 12px/1 var(--font-sans, sans-serif);
  flex: none;
}
.ds-fade-slide-enter-active[data-v-550692d2],
.ds-fade-slide-leave-active[data-v-550692d2] {
  transition:
    opacity 160ms var(--ease-out, ease),
    transform 160ms var(--ease-out, ease);
}
.ds-fade-slide-enter-from[data-v-550692d2] {
  opacity: 0;
  transform: translateY(4px);
}
.ds-fade-slide-leave-to[data-v-550692d2] {
  opacity: 0;
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
.ds-fade-slide-enter-active[data-v-550692d2],
  .ds-fade-slide-leave-active[data-v-550692d2] {
    transition: none;
}
}

/* ~360px verification target: form-card fills the column, no fixed px that
   could overflow a narrow viewport. */
@media (max-width: 400px) {
.form-card[data-v-550692d2] {
    max-width: 100%;
}
}
/**
 * Legacy-token bridge for the ported login island.
 *
 * The island authored its hero + form styles against legacy custom-property
 * names (`--c-slate-*`, `--space-*`, `--bg-primary`, …) that used to be supplied
 * by the island's `vendor-tokens.css`. That file was intentionally dropped in
 * the shell port (the shell is a clean Vue 3 app already loading @qiscus/ui-vue3
 * + tokens) — but the hero/form `<style>` blocks still reference the legacy
 * names, so without a bridge they resolve to nothing and the declarations become
 * invalid (dangling `var()`).
 *
 * This file re-declares ONLY that bridge (not the isolation/scoping machinery),
 * mapping each legacy name to its real @qiscus/ui-vue3 token — values verified
 * 1:1 against the island's original vendor-tokens.css. Delete a mapping once its
 * consumer is migrated to the real token name.
 */
:root {
  /* colors → real DS tokens */
  --c-slate-950: var(--color-slate-950);
  --c-slate-600: var(--color-slate-600);
  --c-slate-400: var(--color-slate-400);
  --c-white: var(--color-white);
  --c-brand-400: var(--color-brand-400);
  --c-brand-950: var(--color-brand-950);
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --text-primary: var(--color-text-primary);
  --border-primary: var(--color-border-primary);
  --border-focus-ring: var(--color-border-focus-ring);
  --icon-primary: var(--color-icon-primary);
  --icon-secondary: var(--color-icon-secondary);

  /* fixed-value primitives (verbatim from the island's vendor-tokens.css) */
  --border-sm: 2px;
  --fw-semibold: 600;
  --radius-full: 9999px;
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --space-2xs: 8px;
  --space-sm: 16px;
  --space-lg: 24px;
  --space-2xl: 32px;
  --space-4xl: 48px;
  --space-6xl: 64px;
}

.otp-input[data-v-3cb9b885] {
  display: flex;
  gap: 8px;
}
.otp-box[data-v-3cb9b885] {
  width: 44px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--color-border-primary, #bfbfbf);
  background: var(--color-bg-secondary, #fafafa);
  color: var(--color-text-primary, #0a0a0a);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.otp-box[data-v-3cb9b885]::placeholder {
  color: var(--color-text-placeholder, #a0a0a0);
}
.otp-box[data-v-3cb9b885]:focus {
  border-color: var(--color-border-brand, var(--color-text-brand-primary));
  box-shadow: 0 0 0 3px var(--color-bg-brand-primary, rgba(39, 177, 153, 0.2));
}
.otp-box--invalid[data-v-3cb9b885] {
  border-color: var(--color-border-error, #eb5757);
  color: var(--color-text-error-primary, #eb5757);
}
.otp-box[data-v-3cb9b885]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 400px) {
.otp-box[data-v-3cb9b885] {
    width: 100%;
}
}

/* Reuses the login island's page-global two-column shell (.login/.login__form
   from LoginHero.vue). This block styles only the 2FA form-card content, using
   canonical --color-* tokens so it themes (light/dark) like the login screens. */
.form-card[data-v-3f8d650a] {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.screens[data-v-3f8d650a] {
  width: 100%;
}
.screen[data-v-3f8d650a] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.screen--state[data-v-3f8d650a] {
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-top: 8px;
}
.screen-title[data-v-3f8d650a] {
  font-size: 24px;
  line-height: 31px;
  letter-spacing: -0.1px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}
.screen-lead[data-v-3f8d650a] {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-tertiary);
  margin: -12px 0 0;
}
.screen-msg[data-v-3f8d650a] {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-tertiary);
  margin: 0;
  max-width: 340px;
}
.methods[data-v-3f8d650a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.method-option[data-v-3f8d650a] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-border-primary);
  border-radius: 16px;
  cursor: pointer;
  background: var(--color-bg-primary, #fff);
  text-align: left;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.method-option.selected[data-v-3f8d650a] {
  border-color: var(--color-border-brand, var(--color-text-brand-primary));
  box-shadow: 0 4px 12px 0 rgba(10, 10, 10, 0.1);
}
.method-info[data-v-3f8d650a] {
  flex: 1;
  min-width: 0;
}
.method-title-row[data-v-3f8d650a] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.method-title-row strong[data-v-3f8d650a] {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.method-desc[data-v-3f8d650a] {
  display: block;
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 16px;
  margin-top: 4px;
}
.badge-recommended[data-v-3f8d650a] {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--color-bg-success-primary, #f1f9ef);
  color: var(--color-text-success-primary, #288c7a);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.method-icon[data-v-3f8d650a] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-secondary, #4b5563);
  flex-shrink: 0;
}
.method-check[data-v-3f8d650a] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border-brand, var(--color-text-brand-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.method-check.checked[data-v-3f8d650a] {
  background: var(--color-bg-brand-secondary, var(--color-text-brand-primary));
  border-color: var(--color-bg-brand-secondary, var(--color-text-brand-primary));
}
.banner-positive[data-v-3f8d650a] {
  padding: 16px;
  background: var(--color-bg-success-primary, #f1f9ef);
  border: 1px solid var(--color-border-success, #288c7a);
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  margin: -12px 0 0;
}
.setup-grid[data-v-3f8d650a] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.setup-manual[data-v-3f8d650a] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-label[data-v-3f8d650a] {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.manual-code[data-v-3f8d650a] {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-all;
}
.box-qr[data-v-3f8d650a] {
  min-width: 160px;
  width: 160px;
  height: 160px;
  border-radius: 12px;
  box-shadow: -2px 0 24px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
}
.box-qr canvas[data-v-3f8d650a] {
  width: 160px;
  height: 160px;
  display: block;
}
.verify-input[data-v-3f8d650a] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resend-row[data-v-3f8d650a] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-tertiary);
}
.error-text[data-v-3f8d650a] {
  margin-top: 12px;
  color: var(--color-text-error-primary, #eb5757);
  font-size: 14px;
  line-height: 20px;
}
.link-btn[data-v-3f8d650a] {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-brand-primary);
  font: 500 14px/20px var(--font-sans, sans-serif);
  text-decoration: none;
}
.link-btn[data-v-3f8d650a]:hover {
  text-decoration: underline;
}
.link-btn[data-v-3f8d650a]:disabled {
  color: var(--color-text-disabled, #a0a0a0);
  cursor: not-allowed;
  text-decoration: none;
}
.recovery-link[data-v-3f8d650a] {
  align-self: flex-start;
}
.screen-actions[data-v-3f8d650a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screen-actions--row[data-v-3f8d650a] {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.ds-fade-slide-enter-active[data-v-3f8d650a],
.ds-fade-slide-leave-active[data-v-3f8d650a] {
  transition:
    opacity 160ms var(--ease-out, ease),
    transform 160ms var(--ease-out, ease);
}
.ds-fade-slide-enter-from[data-v-3f8d650a] {
  opacity: 0;
  transform: translateY(4px);
}
.ds-fade-slide-leave-to[data-v-3f8d650a] {
  opacity: 0;
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
.ds-fade-slide-enter-active[data-v-3f8d650a],
  .ds-fade-slide-leave-active[data-v-3f8d650a] {
    transition: none;
}
}
@media (max-width: 400px) {
.form-card[data-v-3f8d650a] {
    max-width: 100%;
}
.setup-grid[data-v-3f8d650a] {
    flex-direction: column;
    align-items: center;
}
.screen-actions--row[data-v-3f8d650a] {
    flex-direction: column-reverse;
}
}

.direct-login[data-v-c2d1afbe] {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--color-bg-primary, #fff);
  padding: 24px;
}
.dl-state[data-v-c2d1afbe] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 420px;
}
.dl-spinner[data-v-c2d1afbe] {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 3px solid var(--color-border-primary, #e5e7eb);
  border-top-color: var(--brand, var(--color-text-brand-primary, #27b199));
  animation: dl-spin-c2d1afbe 800ms linear infinite;
}
@keyframes dl-spin-c2d1afbe {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.dl-spinner[data-v-c2d1afbe] {
    animation-duration: 2000ms;
}
}
.dl-msg[data-v-c2d1afbe] {
  font-size: 14px;
  color: var(--color-text-tertiary, #6b7280);
  margin: 0;
}
.dl-title[data-v-c2d1afbe] {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary, #111827);
  margin: 0;
}
.dl-error[data-v-c2d1afbe] {
  font-size: 14px;
  color: var(--color-text-error-primary, #eb5757);
  margin: 0;
}
.dl-link[data-v-c2d1afbe] {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-brand-primary, #27b199);
  text-decoration: none;
}
.dl-link[data-v-c2d1afbe]:hover {
  text-decoration: underline;
}
/**
 * Settings feature — @qiscus/ui-vue3 Dialog fixes + the data-appear animation.
 * Scoped to `.settings-feature` (SettingsFeature.vue's root). Imported once, from
 * SettingsFeature.vue, and SHELL-only — apps/settings (the standalone legacy island)
 * has its own palette and does NOT import this file.
 *
 * Despite the filename, this no longer shims design tokens. It used to carry scoped
 * `--radius-*` / `--shadow-*` blocks for the ported settings SFCs; both were removed
 * once @qiscus/tokens + @qiscus/ui-vue3 adopted the DS scales — radius now resolves
 * from `:root`, and the shadow usages were cut over to `shadow-*` utilities / literal
 * DS values. See docs/ui-vue3-ds-radius-migration.md for that history.
 *
 * WHAT REMAINS (all consumed in packages/features/settings/src):
 *   1. `.ds-data-in` data-appear animation + the two motion vars it reads. Rows
 *      fade-and-rise on first mount. Must be a global rule (the nth-child stagger
 *      spans ui-vue3 Table rows the component doesn't own), so it can't be scoped
 *      into a single SFC.
 *   2. Two @qiscus/ui-vue3 Dialog bugfixes (close-cleanup + tall-content scroll).
 *      Pure library workarounds, needed by any consumer until fixed upstream in
 *      packages/ui-vue3. Scoped to `.settings-feature` so they don't leak onto the
 *      rest of the shell (notably feature-inbox's dialogs).
 *
 * A sibling shim (a different token set) lives at
 * `packages/features/login/src/lib/compat-tokens.css`.
 *
 * ── REMOVAL PLAN ────────────────────────────────────────────────────────────
 * Delete this file once (a) the two Dialog bugfixes land upstream in packages/ui-vue3,
 * and (b) `.ds-data-in` moves to a shared util (or the shell grows an equivalent
 * list/page transition) — then drop the import in SettingsFeature.vue.
 */
.settings-feature {
  /* Motion aliases the `ds-data-in` utility below reads. `--motion-base` mirrors this
     repo's `--duration-slow` (200ms); `--ease-out` is re-declared so the value is
     deterministic even if Tailwind tree-shakes its default. */
  --motion-base: var(--duration-slow, 200ms);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
   DS data-appear motion util. Add `ds-data-in` to list/table rows: they fade in
   as they first mount — the "data arrives" moment (initial load, pagination,
   search). Ported from legacy-overrides.css. Must live here, not in a component's
   scoped block: rows are rendered by ui-vue3's Table, and the stagger needs
   `nth-child` across siblings the component doesn't own.

   OPACITY-ONLY (no `transform`): the settings page scrolls inside a NESTED
   overflow container (.settings-feature__content within .app-layout__content),
   which can drop onto main-thread scrolling. A per-row `transform` animation
   running WHILE the user scrolls then GPU-promotes each row and the layers trail
   a frame behind the scroll ("content tertinggal"). Opacity has no geometry to
   commit, so a fade cascade stays in lockstep. See the subscription history table
   (SubsHistoryTable.vue) for the full write-up + the outbound comparison.

   The island also suppressed this during its tab-swap fade; the shell has no
   such page transition yet, so that rule is dropped.
   ============================================================================ */
@keyframes ds-data-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.settings-feature .ds-data-in {
  animation: ds-data-in var(--motion-base, 0.2s) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
}
/* Stagger — rows cascade in one-by-one for the first ~10 visible rows, then the
   delay caps so a long list's tail doesn't wait absurdly. nth-child(1) stays 0. */
.settings-feature .ds-data-in:nth-child(2) {
  animation-delay: 40ms;
}
.settings-feature .ds-data-in:nth-child(3) {
  animation-delay: 80ms;
}
.settings-feature .ds-data-in:nth-child(4) {
  animation-delay: 120ms;
}
.settings-feature .ds-data-in:nth-child(5) {
  animation-delay: 160ms;
}
.settings-feature .ds-data-in:nth-child(6) {
  animation-delay: 200ms;
}
.settings-feature .ds-data-in:nth-child(7) {
  animation-delay: 240ms;
}
.settings-feature .ds-data-in:nth-child(8) {
  animation-delay: 280ms;
}
.settings-feature .ds-data-in:nth-child(9) {
  animation-delay: 320ms;
}
.settings-feature .ds-data-in:nth-child(10) {
  animation-delay: 360ms;
}
.settings-feature .ds-data-in:nth-child(n + 11) {
  animation-delay: 400ms;
}
@media (prefers-reduced-motion: reduce) {
  .settings-feature .ds-data-in {
    animation: none;
  }
}

/* ============================================================================
   ui-vue3 <Input> px-pin — subscription forms mark their Inputs `.sub-field` to
   pin the DS field surface (radius-md 12px, 44px height, 12px inline padding).
   These values match <Input>'s own defaults, so this is a single explicit
   settings-wide anchor rather than a per-file redefinition.

   Consolidated here from four duplicated scoped blocks (BillingEmailModal /
   MidtransCoreApiForm / TopUpMauModal / PaymentConfirmationView) whose comments
   claimed this shim still redefined `--radius-md` and would otherwise pill the
   field. That is no longer true — the shim no longer touches any `--radius-*`
   (radius resolves from `:root`), so the radius now reads the DS token directly.
   ============================================================================ */
.settings-feature .sub-field {
  border-radius: var(--radius-md);
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* ============================================================================
   ui-vue3 Dialog CLOSE FIX — still required. reka-ui's Presence does not unmount
   a closed Dialog after its exit animation, so the content + overlay linger AND
   `document.body` keeps the DismissableLayer's `pointer-events: none`, which
   BLOCKS the whole page after any modal closes. Forcing `display: none` on the
   closed state makes reka skip the exit animation and unmount immediately.
   Trade-off: Dialog/AlertDialog get no exit fade (the entrance still plays).

   Verified against the island (2026-07-18) on reka-ui 2.10.1, which is the SAME
   version this repo pins (pnpm-workspace.yaml). Re-check on the next reka bump
   and delete this block if upstream has fixed it.

   Scoped to `.settings-feature`, unlike the island's global rule: the settings
   tabs portal their dialogs into an in-component host (`modalHost`), so they land
   inside this subtree — which means feature-inbox's dialogs keep their motion.
   ============================================================================ */
.settings-feature [role='dialog'][data-state='closed'],
.settings-feature [role='alertdialog'][data-state='closed'] {
  display: none !important;
}

/* ============================================================================
   ui-vue3 Dialog TALL-CONTENT SCROLL FIX — `DialogContent` ships no max-height
   and `DialogBody` no overflow, so a form-heavy modal grows past the viewport
   with the header + footer clipped off-screen and NO scrollbar (the footer's
   Save button becomes unreachable). Cap the content at the viewport and make the
   body the single scroller while header/footer stay pinned.

   The body is the only Header/Body/Footer child that is both `p-5` and `flex-col`
   (header/footer are row layouts), so this targets it without a marker class.
   Fix belongs upstream in packages/ui-vue3 — see the migration doc.
   ============================================================================ */
.settings-feature [role='dialog'],
.settings-feature [role='alertdialog'] {
  max-height: min(85vh, calc(100dvh - 2rem));
  overflow: hidden;
}
.settings-feature [role='dialog'] > .p-5.flex-col,
.settings-feature [role='alertdialog'] > .p-5.flex-col {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.settings-feature[data-v-36e47d61] {
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  /* Single source for the content reading-column width (mirrors legacy). Tabs
     with a data table (tags, agents, …) use the wide column instead. */
  --settings-max-w: 860px;
  --settings-wide-w: 1120px;
  position: relative;
}
.settings-feature__content[data-v-36e47d61] {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 32px;
}
/* The shared column: centered, width per active tab (WIDE_TABS in nav.ts). */
.settings-feature__col[data-v-36e47d61] {
  width: 100%;
  max-width: var(--settings-max-w, 860px);
  margin: 0 auto;
}
.settings-feature__col--wide[data-v-36e47d61] {
  max-width: var(--settings-wide-w, 1120px);
}
/* Force the header AND the tab's OWN root element to fill the column, so no tab
   can drift from the shared edges via its own max-width/margin. Direct children
   only (`>`) — a tab's inner cards/tables are untouched. This is what makes
   every settings page's title + content line up, regardless of the tab's CSS.
   ESCAPE HATCH: a future tab that genuinely needs a narrower/self-managed root
   width should wrap its content in an inner element and width-constrain THAT
   (this rule only touches the direct child), rather than fighting !important. */
.settings-feature__col[data-v-36e47d61] >  * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  box-sizing: border-box;
}
.settings-feature__head[data-v-36e47d61] {
  margin: 0 0 20px;
}
.settings-feature__title[data-v-36e47d61] {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.settings-feature__sub[data-v-36e47d61] {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ~360px: nav collapses to icon rail (handled in SettingsNav), content goes
   full-width and cards stack (AC-11). */
@media (max-width: 420px) {
.settings-feature__content[data-v-36e47d61] {
    padding: 16px;
}
}

.lp-wrap[data-v-575121bd] {
  max-width: var(--settings-max-w, 860px);
  margin: 0 auto;
}
/* Surface (bg/border/radius/shadow) is owned by the ui-vue3 <Card> primitive
   (rounded-xl, border-only, no shadow). `.lp-card` now carries only the inner
   layout — the DS Card has no padding/flex of its own. */
.lp-card[data-v-575121bd] {
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.lp-badge[data-v-575121bd] {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-warning-primary);
  color: var(--color-icon-warning-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-title[data-v-575121bd] {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.lp-note[data-v-575121bd] {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
  max-width: 420px;
}
.lp-cta[data-v-575121bd] {
  margin-top: 4px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  border: 1px solid var(--color-border-brand-primary, transparent);
  transition: filter 120ms;
}
.lp-cta[data-v-575121bd]:hover {
  filter: brightness(0.96);
}
.ic-24[data-v-575121bd] {
  width: 24px;
  height: 24px;
}

.settings-tab-unavailable[data-v-b5631e8a] {
  max-width: var(--settings-max-w, 860px);
  margin: 0 auto;
}

.outbound-viewport[data-v-cdad9883] {
  height: 100%;
  min-height: 100dvh;
  /* Outbound's own right column is the scroll container (OutboundView sets
     `overflow-y-auto` on it), so this wrapper must not add a second one. */
  overflow: hidden;
}

.integration-viewport[data-v-803ce587] {
  position: relative;
  height: 100%;
  min-height: 100dvh;
  /* Scroll INTERNALLY (not `overflow: hidden`). Unlike outbound — which has its
     own inner scroll column (OutboundView) — IntegrationPage is a plain
     document-flow page with no scroll region of its own, so if this clipped,
     content taller than the 100dvh host area was cut off with no way to reach it.
     The host area (`.app-layout__content`) has a definite 100dvh height, so this
     box is exactly 100dvh and its overflow scrolls here. x stays hidden — the
     page is width-constrained (`max-w-[1728px]`) and must never scroll sideways. */
  overflow-x: hidden;
  overflow-y: auto;
}

.anav[data-v-f3774187] {
  width: 260px;
  flex: 0 0 260px;
  height: 100%;
  background: var(--color-bg-primary);
  border-right: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width 0.3s var(--ease-emphasized, ease),
    flex-basis 0.3s var(--ease-emphasized, ease);
}
.anav[data-collapsed='true'][data-v-f3774187] {
  width: 76px;
  flex-basis: 76px;
}
.anav__head[data-v-f3774187] {
  height: 76px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--color-border-primary);
}
.anav[data-collapsed='true'] .anav__head[data-v-f3774187] {
  justify-content: center;
  padding: 0;
}
.anav__brand[data-v-f3774187] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.anav__brand-badge[data-v-f3774187] {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.anav__brand-title[data-v-f3774187] {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.anav__brand-sub[data-v-f3774187] {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.anav__toggle[data-v-f3774187] {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.anav[data-collapsed='true'] .anav__toggle[data-v-f3774187] {
  margin-left: 0;
}
.anav__toggle[data-v-f3774187]:hover {
  background: var(--color-bg-secondary);
}
.anav__body[data-v-f3774187] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.anav__group[data-v-f3774187] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.anav__group-label[data-v-f3774187] {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-text-brand-primary);
  padding: 4px 12px;
  white-space: nowrap;
}
.anav__item[data-v-f3774187] {
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  flex: none;
  height: 44px;
  border-radius: 12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--color-text-secondary);
  font: 500 14px/18px var(--font-sans, sans-serif);
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.anav[data-collapsed='true'] .anav__item[data-v-f3774187] {
  justify-content: center;
  padding: 0;
  gap: 0;
}
.anav__item[data-v-f3774187]:hover {
  background: var(--color-bg-secondary);
}
.anav__item[data-active='true'][data-v-f3774187] {
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  font-weight: 600;
}
.anav__item-icon[data-v-f3774187] {
  width: 22px;
  height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.anav__item-label[data-v-f3774187] {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anav__soon[data-v-f3774187] {
  flex: none;
  font: 600 10px/1 var(--font-sans, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  border-radius: 4px;
  padding: 3px 6px;
}
.ic-22[data-v-f3774187] {
  width: 22px;
  height: 22px;
}
.ic-20[data-v-f3774187] {
  width: 20px;
  height: 20px;
}
.ic-18[data-v-f3774187] {
  width: 18px;
  height: 18px;
}

.pm[data-v-feeb5fec] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 72px 24px;
  text-align: center;
  min-height: 360px;
  flex: 1 1 auto;
}
.pm__ic[data-v-feeb5fec] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.pm__title[data-v-feeb5fec] {
  margin: 0;
  color: var(--color-text-primary);
  font: var(--font-heading-3, 600 20px/28px var(--font-sans));
}
.pm__body[data-v-feeb5fec] {
  color: var(--color-text-tertiary);
  font: var(--font-body-2, 400 14px/22px var(--font-sans));
  max-width: 420px;
  text-wrap: balance;
}
.pm__actions[data-v-feeb5fec] {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.analytics-sub-tabs[data-v-7d1f35e9] {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 16px;
}
.analytics-sub-tabs[data-v-7d1f35e9]::-webkit-scrollbar {
  display: none;
}
.analytics-sub-tabs__root[data-v-7d1f35e9] {
  min-width: max-content;
}
.analytics-sub-tabs[data-v-7d1f35e9] [role='tablist'] {
  border-bottom: 1px solid var(--color-border-disabled, #ececec);
  gap: 0;
  min-width: max-content;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger {
  padding: 14px 24px;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: 0.1px;
  font-weight: 500;
  color: var(--font-c-subtitle, #565656);
  background-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  border-bottom: none;
  box-shadow: none;
  transition:
    color 0.18s ease,
    font-weight 0.18s ease;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger:not(.is-active):hover {
  color: var(--font-c-title, #0a0a0a);
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger.is-active {
  color: var(--color-text-brand-primary, var(--c-primary-green-1, #27b199));
  font-weight: 600;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger:focus-visible {
  outline: 2px solid var(--color-border-brand-focus, #27b199);
  outline-offset: -4px;
  border-radius: 4px;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 0;
  background-color: transparent;
  border-radius: 3px 3px 0 0;
  transition:
    height 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.22s ease;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger:not(.is-active):hover::after {
  background-color: var(--c-disable, #d4d4d4);
  height: 2px;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger.is-active::after {
  background-color: var(--c-primary-green-1, #27b199);
  height: 3px;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__chevron {
  flex-shrink: 0;
  color: currentColor;
  transition: transform 0.2s ease;
}
.analytics-sub-tabs[data-v-7d1f35e9]
  .analytics-sub-tabs__trigger[data-state='open'] .analytics-sub-tabs__chevron {
  transform: rotate(180deg);
}
@media (max-width: 640px) {
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger {
    padding: 12px 16px;
    font-size: 14px;
}
.analytics-sub-tabs[data-v-7d1f35e9] .analytics-sub-tabs__trigger::after {
    left: 6px;
    right: 6px;
}
}

/* Unscoped — DropdownMenuContent is portaled to <body>. Namespaced. */
.analytics-sub-tabs__menu {
  min-width: 220px;
}

/* Selected item — LIGHT brand tint (bg-brand-primary = --color-brand-100, ~12%
   opacity) so the DARK brand text (text-brand-primary = --color-brand-800) has
   proper contrast. `bg-brand-secondary` resolves to --color-brand-700 in this
   DS (filled-button surface), NOT a tint — pairing it with dark text = fail. */
.analytics-sub-tabs__menu [role='menuitem'].is-selected {
  background-color: var(--color-bg-brand-primary, rgba(39, 177, 153, 0.12));
  color: var(--color-text-brand-primary, #1f8571);
  font-weight: 600;
}
.analytics-sub-tabs__menu [role='menuitem'].is-selected:hover,
.analytics-sub-tabs__menu [role='menuitem'].is-selected:focus {
  /* Slightly deeper tint of the same brand on hover — brand-200 (color-mix
     white 55%) sits between brand-100 (bg default) and the button-fill
     brand-700 without flipping to dark. */
  background-color: var(--color-brand-200, rgba(39, 177, 153, 0.2));
  color: var(--color-text-brand-primary, #1f8571);
}
.analytics-sub-tabs__menu-label {
  flex: 1 1 auto;
}
.analytics-sub-tabs__menu-check {
  flex-shrink: 0;
  color: var(--color-text-brand-primary, #27b199);
  margin-left: 12px;
}

/* Fill-container model: the card grows to fill .analytics-content; the
   <iframe> fills the card so no gap ever appears below the iframe. When
   iframe-resizer is loaded (external Metabase script), it sets `height:<n>px`
   inline on the iframe to match its content — we override with `!important`
   so the iframe stays 100% of the card and Metabase's own body scrolls
   inside the iframe (single scrollbar, matches the pre-port page layout). */
.iframe-analytic[data-v-f7136224] {
  width: 100%;
  flex: 1 1 auto;
  min-height: 480px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-bg-secondary, #fafafa);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}
.iframe-analytic__frame[data-v-f7136224] {
  width: 100%;
  height: 100% !important;
  min-height: 480px;
  border: 0;
  display: block;
  border-radius: 12px;
  background: transparent;
}
@media (min-width: 1024px) {
.iframe-analytic__frame[data-v-f7136224],
  .iframe-analytic[data-v-f7136224] {
    min-height: 600px;
}
}

/* Text-only block — the surrounding card (white bg + drop-shadow + padding) is
   provided by `.analytics-filters` in AnalyticsShell.vue, mirroring legacy
   `.qs-analytic__info-box` (page-analytic.css:51-87) which is the SINGLE card
   holding both the description AND the Select Channel column. */
.analytic-info[data-v-f8f2ab07] {
  flex: 1 1 auto;
  min-width: 0;
  color: #565656;
}
.analytic-info__title[data-v-f8f2ab07] {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.005em;
  color: #000000;
}
.analytic-info__subtitle[data-v-f8f2ab07] {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.005em;
  color: #565656;
}

/* Unscoped — `v-html` breaks scoped selectors (no data-v attr on injected
   markup). Mirrors legacy `.qs-analytic__info-box a` from page-analytic.css:83:
   weight 700, teal, underlined. Namespaced with `.analytic-info__link`. */
.analytic-info__link {
  color: #27b199;
  font-weight: 700;
  text-decoration: underline;
}
.analytic-info__link:hover {
  color: #1f9080;
}

.wa-channel-selector[data-v-a92eb98f] {
  min-width: 240px;
  max-width: 320px;
}

/* DS SelectTrigger default is `rounded-xl` (12px) — softened to 8px here so
   it visually belongs next to the flat legacy info-box (0 radius, drop-shadow
   only). Mirrored on the portaled SelectContent below for symmetry. */
.wa-channel-selector__trigger[data-v-a92eb98f] {
  min-width: 240px;
  border-radius: 8px;
}
@media (max-width: 640px) {
.wa-channel-selector[data-v-a92eb98f] {
    width: 100%;
    max-width: none;
}
.wa-channel-selector__trigger[data-v-a92eb98f] {
    width: 100%;
}
}

/* Unscoped — SelectContent is portaled to <body>. Namespaced with
   `.wa-channel-selector__content` to avoid global collision. */
.wa-channel-selector__content {
  min-width: var(--reka-select-trigger-width, 240px);
  max-height: min(var(--reka-select-content-available-height, 320px), 320px);
  border-radius: 8px;
  z-index: 60;
}
.wa-channel-selector__indicator {
  color: var(--color-text-brand-primary, #27b199);
  margin-left: 12px;
}

.ai-channel-selector[data-v-fe4e6d6d] {
  min-width: 240px;
  max-width: 320px;
}
.ai-channel-selector__trigger[data-v-fe4e6d6d] {
  min-width: 240px;
  border-radius: 8px;
}

.ai-channel-selector__content {
  min-width: var(--reka-select-trigger-width, 240px);
  max-height: min(var(--reka-select-content-available-height, 320px), 320px);
  border-radius: 8px;
  z-index: 60;
}
.ai-channel-selector__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.ai-channel-selector__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}
.ai-channel-selector__icon-placeholder {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ai-channel-selector__indicator {
  color: var(--color-text-brand-primary, #27b199);
  margin-left: 12px;
}

.custom-analytic-selector[data-v-7ad7ff37] {
  min-width: 240px;
  max-width: 320px;
}
.custom-analytic-selector__trigger[data-v-7ad7ff37] {
  min-width: 240px;
  border-radius: 8px;
}
@media (max-width: 640px) {
.custom-analytic-selector[data-v-7ad7ff37],
  .custom-analytic-selector__trigger[data-v-7ad7ff37] {
    max-width: none;
    width: 100%;
}
}

.custom-analytic-selector__content {
  min-width: var(--reka-select-trigger-width, 240px);
  max-height: min(var(--reka-select-content-available-height, 320px), 320px);
  border-radius: 8px;
  z-index: 60;
}
.custom-analytic-selector__indicator {
  color: var(--color-text-brand-primary, #27b199);
  margin-left: 12px;
}

/* Fill the analytics-content flex slot and center both axes — matches the
   sibling `.analytics-empty` generic placeholder's model in AnalyticsPage.vue
   so the block occupies the whole content area instead of stacking below the
   (hidden) iframe wrapper. `max-width` on the inner copy would clip the flex
   fill, so keep it column-flex and let padding do the horizontal breathing. */
.custom-analytics-empty[data-v-9562fe4f] {
  flex: 1 1 auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--color-bg-primary);
  border-radius: 12px;
}
.custom-analytics-empty[data-v-9562fe4f] > * {
  max-width: 520px;
}
.custom-analytics-empty__title[data-v-9562fe4f] {
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-text-primary, #454545);
}
.custom-analytics-empty__desc[data-v-9562fe4f] {
  color: var(--color-text-primary, #454545);
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}
.custom-analytics-empty__cta[data-v-9562fe4f] {
  margin-top: 24px;
  display: inline-block;
  padding: 10px 24px;
  border-radius: 6px;
  background: var(--color-primary, #27b199);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 120ms ease;
}
.custom-analytics-empty__cta[data-v-9562fe4f]:hover {
  background: var(--color-primary-hover, #1e9781);
}
.custom-analytics-empty__cta[data-v-9562fe4f]:focus-visible {
  outline: 2px solid var(--color-primary, #27b199);
  outline-offset: 2px;
}
.custom-analytics-empty__admin[data-v-9562fe4f] {
  margin-top: 12px;
  color: var(--color-text-primary, #454545);
  font-size: 16px;
  line-height: 24px;
}

/* Card wrapper — same visual language as `.analytics-filters` info card:
   white bg + subtle drop-shadow. Content (search + list) sits INSIDE the
   padded card. */
/* Card wrapper — flex column. Search sits fixed at the top; ONLY the list
   below scrolls. `.agent-sidebar` itself does NOT scroll and fills the
   split-row's height so it stays vertically aligned with the iframe on the
   right. */
.agent-sidebar[data-v-6d66f53d] {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xs, 0px 1px 2px 0px rgba(51, 51, 51, 0.06));
  padding: 16px;
  overflow: hidden;
  min-height: 480px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.agent-sidebar__title[data-v-6d66f53d] {
  flex: 0 0 auto;
  margin: 0 0 12px;
  color: var(--color-text-primary);
  font: 600 16px / 22px var(--font-sans, inherit);
}
.agent-sidebar__search[data-v-6d66f53d] {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.agent-sidebar__list[data-v-6d66f53d] {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.agent-sidebar__row[data-v-6d66f53d] {
  display: flex;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  align-items: center;
}
.agent-sidebar__row + .agent-sidebar__row[data-v-6d66f53d] {
  margin-top: 2px;
}
.agent-sidebar__row[data-v-6d66f53d]:hover {
  background: var(--color-bg-secondary, #f5f5f5);
}
.agent-sidebar__row--active[data-v-6d66f53d],
.agent-sidebar__row--active[data-v-6d66f53d]:hover {
  background: var(--color-brand-50);
}
.agent-sidebar__row--active .agent-sidebar__name[data-v-6d66f53d] {
  font-weight: 600;
  color: var(--color-brand-700);
}
.agent-sidebar__check[data-v-6d66f53d] {
  flex: 0 0 auto;
  color: var(--color-brand-700);
}
/* Pin the ui-vue3 Avatar as a flex child so long names don't squash the
   `size="md"` (40px) circle into an ellipse. Sizing itself is owned by Avatar. */
.agent-sidebar__avatar[data-v-6d66f53d] {
  flex: 0 0 auto;
}
/* Info column: min-width:0 lets flex compute overflow correctly (without it,
   long email strings would push the row wider and break the avatar circle). */
.agent-sidebar__info[data-v-6d66f53d] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-sidebar__name[data-v-6d66f53d] {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-sidebar__roles[data-v-6d66f53d] {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-tertiary, #8f8f8f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-sidebar__loading[data-v-6d66f53d] {
  padding: 12px 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-tertiary, #999);
}
.agent-sidebar__empty[data-v-6d66f53d] {
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.agent-sidebar__empty-badge[data-v-6d66f53d] {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.agent-sidebar__empty-title[data-v-6d66f53d] {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text-primary);
}
.agent-sidebar__empty-desc[data-v-6d66f53d] {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-tertiary);
}

.analytics-shell[data-v-24e5cdf5] {
  display: flex;
  height: 100vh;
  min-height: 0;
  width: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  --settings-max-w: 1200px;
  --settings-wide-w: 1400px;
  position: relative;
}
.analytics-shell__main[data-v-24e5cdf5] {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.analytics-shell__content[data-v-24e5cdf5] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ana-fade-enter-active[data-v-24e5cdf5],
.ana-fade-leave-active[data-v-24e5cdf5] {
  transition: opacity 130ms ease;
}
.ana-fade-enter-from[data-v-24e5cdf5],
.ana-fade-leave-to[data-v-24e5cdf5] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.ana-fade-enter-active[data-v-24e5cdf5],
  .ana-fade-leave-active[data-v-24e5cdf5] {
    transition: none;
}
}
.analytics-shell__area[data-v-24e5cdf5] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* Single card mirroring legacy `.qs-analytic__info-box` (page-analytic.css:
   51-63): surface bg + DS card shadow + 18px 24px padding. Routed through
   DS tokens so dark-mode + brand-color themes track the surface correctly. */
.analytics-filters[data-v-24e5cdf5] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: flex-start;
  padding: 18px 24px;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-xs, 0px 8px 24px 0px rgba(51, 51, 51, 0.07));
  color: var(--color-text-secondary);
  border-radius: var(--radius-lg, 12px);
}
.analytics-filters[data-v-24e5cdf5] .analytic-info {
  flex: 1 1 0;
  min-width: 0;
}
.analytics-filters[data-v-24e5cdf5] .wa-channel-selector {
  flex: 0 0 240px;
  max-width: 240px;
}
@media (max-width: 640px) {
.analytics-filters[data-v-24e5cdf5] {
    flex-direction: column;
    padding: 14px 18px;
    gap: 12px;
}
.analytics-filters[data-v-24e5cdf5] .wa-channel-selector {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
}
}
.analytics-body[data-v-24e5cdf5] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 20px);
}
/* on_each_agent split layout — sidebar left, content right. */
.analytics-body--split[data-v-24e5cdf5] {
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}
.analytics-body--split[data-v-24e5cdf5] > :first-child {
  flex: 0 0 300px;
}
@media (max-width: 640px) {
.analytics-body--split[data-v-24e5cdf5] {
    flex-direction: column;
}
.analytics-body--split[data-v-24e5cdf5] > :first-child {
    flex: 0 0 auto;
}
}
.analytics-content[data-v-24e5cdf5] {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Panel card — mock analytics.jsx:204-216. Single bordered surface that
   wraps both the header row and the panel body (state overlay or iframe).
   Body-level state overlays (PanelMessage, loader) sit INSIDE this card
   instead of rendering as their own bordered chips — matches the design
   mock's single-frame layout. */
.analytics-panel[data-v-24e5cdf5] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-xs, 0px 1px 2px 0px rgba(51, 51, 51, 0.06));
  overflow: hidden;
}
/* Panel header — border-bottom separates it from the body (title only;
   Download PDF removed per the redundant-with-Metabase-embed rationale). */
.analytics-panel-header[data-v-24e5cdf5] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border-primary);
}
.analytics-panel-header__title[data-v-24e5cdf5] {
  margin: 0;
  flex: 1 1 auto;
  color: var(--color-text-primary);
  font: 600 18px / 24px var(--font-sans, inherit);
}
.analytics-panel-body[data-v-24e5cdf5] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.analytics-loader[data-v-24e5cdf5] {
  flex: 1 1 auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  color: var(--color-text-secondary);
}
.analytics-loader p[data-v-24e5cdf5] {
  margin: 0;
  font-size: 14px;
}
.analytics-loader__dots[data-v-24e5cdf5] {
  display: flex;
  gap: 8px;
}
.analytics-loader__dot[data-v-24e5cdf5] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: analytics-loader-pulse-24e5cdf5 1s ease-in-out infinite;
}
/* Three-tone dot sequence — brand / blue / amber — matches the design mock's
   `LoadingState` in `analytics-parts.jsx:562`. Staggered delays produce the
   left-to-right bounce that reads as "fetching" in the reference DS. */
.analytics-loader__dot--brand[data-v-24e5cdf5] {
  background: var(--color-brand-500);
  animation-delay: 0ms;
}
.analytics-loader__dot--blue[data-v-24e5cdf5] {
  background: var(--color-blue-500);
  animation-delay: 150ms;
}
.analytics-loader__dot--amber[data-v-24e5cdf5] {
  background: var(--color-amber-500);
  animation-delay: 300ms;
}
@keyframes analytics-loader-pulse-24e5cdf5 {
0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
}
40% {
    transform: translateY(-8px);
    opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.analytics-loader__dot[data-v-24e5cdf5] {
    animation: none;
    opacity: 0.6;
}
}
.analytics-empty[data-v-24e5cdf5] {
  flex: 1 1 auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs, 8px);
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  border-radius: 12px;
}
.analytics-empty strong[data-v-24e5cdf5] {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.analytics-empty p[data-v-24e5cdf5] {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 360px;
}

.apps-iframe[data-v-4930c323] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: var(--color-bg-primary);
}
.apps-iframe__frame[data-v-4930c323] {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  background: var(--color-bg-primary);
}
.apps-iframe__loading[data-v-4930c323] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 16px);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.apps-iframe__loading p[data-v-4930c323] {
  margin: 0;
  font-size: 14px;
}
.apps-iframe__spinner[data-v-4930c323] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border-disabled, #e5e5e5);
  border-top-color: var(--color-brand-500, #27b199);
  animation: apps-spin-4930c323 0.9s linear infinite;
}
@keyframes apps-spin-4930c323 {
to {
    transform: rotate(360deg);
}
}

.apps-shell[data-v-6b67358e] {
  display: flex;
  height: 100vh;
  min-height: 0;
  width: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  --settings-max-w: 1200px;
  --settings-wide-w: 1400px;
  position: relative;
}
.apps-shell__main[data-v-6b67358e] {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.apps-shell__content[data-v-6b67358e] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* App Center owns its own chrome inside the iframe — no outer padding here
     so the frame fills edge-to-edge like legacy blade:508-514. */
  padding: 0;
  overflow: hidden;
}
.apps-shell__loader[data-v-6b67358e] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 16px);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.apps-shell__loader p[data-v-6b67358e] {
  margin: 0;
  font-size: 14px;
}
.apps-shell__spinner[data-v-6b67358e] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border-disabled, #e5e5e5);
  border-top-color: var(--color-brand-500, #27b199);
  animation: apps-shell-spin-6b67358e 0.9s linear infinite;
}
@keyframes apps-shell-spin-6b67358e {
to {
    transform: rotate(360deg);
}
}
.apps-shell__notice[data-v-6b67358e] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs, 8px);
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.apps-shell__notice strong[data-v-6b67358e] {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.apps-shell__notice p[data-v-6b67358e] {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 480px;
}
.apps-shell__cta[data-v-6b67358e] {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-border-brand-primary, transparent);
  transition: background 120ms;
}
.apps-shell__cta[data-v-6b67358e]:hover {
  background: var(--color-bg-brand-secondary, var(--color-bg-brand-primary));
}

.chatbot-iframe[data-v-38b45778] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: var(--color-bg-primary);
}
.chatbot-iframe__frame[data-v-38b45778] {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  background: var(--color-bg-primary);
}
.chatbot-iframe__loading[data-v-38b45778] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 16px);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.chatbot-iframe__loading p[data-v-38b45778] {
  margin: 0;
  font-size: 14px;
}
.chatbot-iframe__spinner[data-v-38b45778] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border-disabled, #e5e5e5);
  border-top-color: var(--color-brand-500, #27b199);
  animation: chatbot-spin-38b45778 0.9s linear infinite;
}
@keyframes chatbot-spin-38b45778 {
to {
    transform: rotate(360deg);
}
}

.chatbot-shell[data-v-92199a58] {
  display: flex;
  height: 100vh;
  min-height: 0;
  width: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  --settings-max-w: 1200px;
  --settings-wide-w: 1400px;
  position: relative;
}
.chatbot-shell__main[data-v-92199a58] {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chatbot-shell__content[data-v-92199a58] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.chatbot-shell__loader[data-v-92199a58] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 16px);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.chatbot-shell__loader p[data-v-92199a58] {
  margin: 0;
  font-size: 14px;
}
.chatbot-shell__spinner[data-v-92199a58] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border-disabled, #e5e5e5);
  border-top-color: var(--color-brand-500, #27b199);
  animation: chatbot-shell-spin-92199a58 0.9s linear infinite;
}
@keyframes chatbot-shell-spin-92199a58 {
to {
    transform: rotate(360deg);
}
}
.chatbot-shell__notice[data-v-92199a58] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs, 8px);
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.chatbot-shell__notice strong[data-v-92199a58] {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.chatbot-shell__notice p[data-v-92199a58] {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 480px;
}
.chatbot-shell__cta[data-v-92199a58] {
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-border-brand-primary, transparent);
  transition: background 120ms;
}
.chatbot-shell__cta[data-v-92199a58]:hover {
  background: var(--color-bg-brand-secondary, var(--color-bg-brand-primary));
}

.commerce-iframe[data-v-bbf689c7] {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: var(--color-bg-primary);
}
.commerce-iframe__frame[data-v-bbf689c7] {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  background: var(--color-bg-primary);
}
.commerce-iframe__loading[data-v-bbf689c7] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 16px);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.commerce-iframe__loading p[data-v-bbf689c7] {
  margin: 0;
  font-size: 14px;
}
.commerce-iframe__spinner[data-v-bbf689c7] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border-disabled, #e5e5e5);
  border-top-color: var(--color-brand-500, #27b199);
  animation: commerce-spin-bbf689c7 0.9s linear infinite;
}
@keyframes commerce-spin-bbf689c7 {
to {
    transform: rotate(360deg);
}
}

.commerce-shell[data-v-d945d06e] {
  display: flex;
  height: 100vh;
  min-height: 0;
  width: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  --settings-max-w: 1200px;
  --settings-wide-w: 1400px;
  position: relative;
}
.commerce-shell__main[data-v-d945d06e] {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.commerce-shell__content[data-v-d945d06e] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.commerce-shell__loader[data-v-d945d06e] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 16px);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
}
.commerce-shell__loader p[data-v-d945d06e] {
  margin: 0;
  font-size: 14px;
}
.commerce-shell__spinner[data-v-d945d06e] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-border-disabled, #e5e5e5);
  border-top-color: var(--color-brand-500, #27b199);
  animation: commerce-shell-spin-d945d06e 0.9s linear infinite;
}
@keyframes commerce-shell-spin-d945d06e {
to {
    transform: rotate(360deg);
}
}

/* Mock line 210-211: max-width 1160, centered, page bg-secondary. */
.ec[data-v-62a3285a] {
  width: 100%;
  min-height: 100%;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  overflow-y: auto;
}
.ec__container[data-v-62a3285a] {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-4xl, 40px) var(--space-2xl, 32px);
  display: flex;
  gap: var(--space-4xl, 40px);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* .side-content (mock line 214): flex 0 1 300px, min-width 260. */
.ec__side[data-v-62a3285a] {
  flex: 0 1 300px;
  min-width: 260px;
}
.ec__title[data-v-62a3285a] {
  margin: 0 0 var(--space-sm, 12px);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold, 700);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.ec__desc[data-v-62a3285a] {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.ec__doc-link[data-v-62a3285a] {
  color: var(--color-text-brand-primary);
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
}
.ec__doc-link[data-v-62a3285a]:hover {
  text-decoration: underline;
}
.ec__doc-link[data-v-62a3285a]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs, 2px);
}

/* .content (mock line 228): flex 1 1 560px. */
.ec__content[data-v-62a3285a] {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
}
.ec__banner[data-v-62a3285a] {
  width: 100%;
}

/* Card wraps Table — mock's ds-table-wrap: border + radius-lg + shadow-xs. */
.ec__card[data-v-62a3285a] {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.ec__col--num[data-v-62a3285a] {
  width: 150px;
  text-align: left;
}
.ec__col--action[data-v-62a3285a] {
  width: 300px;
  text-align: left;
}

/* Channel cell (mock line 267-270): icon + semibold name. */
.ec__cell-channel[data-v-62a3285a] {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 10px);
}
.ec__wa-glyph[data-v-62a3285a] {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ec__cell-channel-name[data-v-62a3285a] {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
}

/* Room Expired cell (mock line 273-277): tabular-nums; tertiary if 0. */
.ec__count[data-v-62a3285a] {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.ec__count--zero[data-v-62a3285a] {
  color: var(--color-text-tertiary);
}

/* Waiting row (mock line 48-54). */
.ec__waiting[data-v-62a3285a] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ec__waiting-label[data-v-62a3285a] {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium, 500);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin-right: auto;
}

/* Running row (mock line 56-73): 148px progress-bar block + Cancel button. */
.ec__running[data-v-62a3285a] {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ec__progress-block[data-v-62a3285a] {
  width: 148px;
  flex: none;
}
.ec__progress-bar[data-v-62a3285a] {
  height: 6px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}
.ec__progress-bar-fill[data-v-62a3285a] {
  height: 100%;
  background: var(--color-bg-brand-primary);
  border-radius: inherit;
  transition: width var(--motion-base, 200ms) var(--ease-out, ease-out);
}
@media (prefers-reduced-motion: reduce) {
.ec__progress-bar-fill[data-v-62a3285a] {
    transition: none;
}
}
.ec__progress-label[data-v-62a3285a] {
  margin-top: 5px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 11px;
  line-height: 16px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* State cells (empty, error). */
.ec__state[data-v-62a3285a] {
  padding: 0;
}
.ec__state-inner[data-v-62a3285a] {
  padding: var(--space-2xl, 32px) var(--space-lg, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs, 10px);
  text-align: center;
}
.ec__state-icon[data-v-62a3285a] {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2xs, 8px);
}
.ec__state-icon--success[data-v-62a3285a] {
  background: var(--color-bg-success-primary);
  color: var(--color-icon-success-primary);
}
.ec__state-icon--error[data-v-62a3285a] {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger-primary);
}
.ec__state-title[data-v-62a3285a] {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-primary);
}
.ec__state-desc[data-v-62a3285a] {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  max-width: 360px;
  margin-bottom: var(--space-xs, 10px);
}

/* Skeleton row sizing — shimmer + colors + motion-reduce come from ui-vue3
   <Skeleton>; only width/height per the mock's XcSkeletonRow live here. */
.ec__skel-row[data-v-62a3285a] {
  pointer-events: none;
}
.ec__skel--wide[data-v-62a3285a] {
  width: 200px;
  height: 12px;
}
.ec__skel--sm[data-v-62a3285a] {
  width: 40px;
  height: 12px;
}
.ec__skel--pill[data-v-62a3285a] {
  width: 96px;
  height: 28px;
}

/* Back to Inbox row (mock line 289-291): right-aligned, margin-top 20. */
.ec__footer[data-v-62a3285a] {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-lg, 20px);
}

.ecd__content[data-v-661f8a81] {
  /* DrawerContent already sets side=right, size=lg (640px) via variants;
     override to match mock's 620px if it matters visually. */
}
.ecd__header[data-v-661f8a81] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  padding: var(--space-lg, 20px) var(--space-lg, 20px) var(--space-sm, 12px);
  border-bottom: 1px solid var(--color-border-primary);
}
.ecd__title-col[data-v-661f8a81] {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs, 4px);
}
.ecd__title[data-v-661f8a81] {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.ecd__subtitle[data-v-661f8a81] {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}
.ecd__close[data-v-661f8a81] {
  flex: none;
  background: transparent;
  border: 0;
  padding: var(--space-3xs, 4px);
  color: var(--color-icon-secondary);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  line-height: 0;
}
.ecd__close[data-v-661f8a81]:hover {
  background: var(--color-bg-secondary);
  color: var(--color-icon-primary);
}
.ecd__close[data-v-661f8a81]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
.ecd__body[data-v-661f8a81] {
  padding: var(--space-lg, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
  overflow-y: auto;
}
.ecd__banner[data-v-661f8a81] {
  width: 100%;
}
.ecd__intro[data-v-661f8a81] {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.ecd__doc-link[data-v-661f8a81] {
  color: var(--color-text-brand-primary);
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
}
.ecd__doc-link[data-v-661f8a81]:hover {
  text-decoration: underline;
}
.ecd__card[data-v-661f8a81] {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* Drawer column widths (mock line 212-213): compact vs. page variant. */
.ecd__col--num[data-v-661f8a81] {
  width: 110px;
  text-align: left;
}
.ecd__col--action[data-v-661f8a81] {
  width: 230px;
  text-align: left;
}
.ecd__cell-channel[data-v-661f8a81] {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 10px);
}
.ecd__wa-glyph[data-v-661f8a81] {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ecd__cell-channel-name[data-v-661f8a81] {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
}
.ecd__count[data-v-661f8a81] {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.ecd__count--zero[data-v-661f8a81] {
  color: var(--color-text-tertiary);
}
.ecd__waiting[data-v-661f8a81] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ecd__waiting-label[data-v-661f8a81] {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium, 500);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin-right: auto;
}

/* Drawer progress-block (mock line 47): 110px width vs. page's 148px. */
.ecd__running[data-v-661f8a81] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ecd__progress-block[data-v-661f8a81] {
  width: 110px;
  flex: none;
}
.ecd__progress-bar[data-v-661f8a81] {
  height: 6px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}
.ecd__progress-bar-fill[data-v-661f8a81] {
  height: 100%;
  background: var(--color-bg-brand-primary);
  border-radius: inherit;
  transition: width var(--motion-base, 200ms) var(--ease-out, ease-out);
}
@media (prefers-reduced-motion: reduce) {
.ecd__progress-bar-fill[data-v-661f8a81] {
    transition: none;
}
}
.ecd__progress-label[data-v-661f8a81] {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 11px;
  line-height: 16px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.ecd__state[data-v-661f8a81] {
  padding: 0;
}
.ecd__state-inner[data-v-661f8a81] {
  padding: var(--space-2xl, 32px) var(--space-lg, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs, 10px);
  text-align: center;
}
.ecd__state-icon[data-v-661f8a81] {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2xs, 8px);
}
.ecd__state-icon--success[data-v-661f8a81] {
  background: var(--color-bg-success-primary);
  color: var(--color-icon-success-primary);
}
.ecd__state-icon--error[data-v-661f8a81] {
  background: var(--color-bg-danger-subtle);
  color: var(--color-icon-danger-primary);
}
.ecd__state-title[data-v-661f8a81] {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-primary);
}
.ecd__state-desc[data-v-661f8a81] {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-secondary);
  max-width: 320px;
  margin-bottom: var(--space-xs, 10px);
}

/* Drawer skeleton sizing — shimmer + colors + motion-reduce come from
   ui-vue3 <Skeleton>; only width/height per drawer mock XcdSkeleton here.
   Drawer values are tighter than the page variant (140/32/84 vs 200/40/96). */
.ecd__skel-row[data-v-661f8a81] {
  pointer-events: none;
}
.ecd__skel--wide[data-v-661f8a81] {
  width: 140px;
  height: 12px;
}
.ecd__skel--sm[data-v-661f8a81] {
  width: 32px;
  height: 12px;
}
.ecd__skel--pill[data-v-661f8a81] {
  width: 84px;
  height: 28px;
}
.ecd__note[data-v-661f8a81] {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular, 400);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-tertiary);
}

/* WHY THIS BLOCK EXISTS AT ALL (corrected 2026-08-03).
 *
 * An earlier comment here claimed this section "reuses the Properties
 * section's own card/field/condition rhythm (`CustFilterDrawer.vue`'s
 * `.cst-fd__card` / `.cst-fd__field` / etc, defined there and shared by class
 * name)". That was wrong, and it is why this section rendered as an
 * unstructured pile: Vue applies a parent's scoped styles to a child
 * component's ROOT ELEMENT ONLY, never to the child's internals. Every
 * `.cst-fd__*` rule in the drawer's `<style scoped>` stops at this component's
 * boundary, so the markup below was carrying class names that matched NOTHING
 * — no card padding, no border, no gaps between fields, no gap between rows.
 *
 * Sharing by class name across a scoped boundary cannot work. The rules are
 * therefore restated here, deliberately duplicated rather than lifted to a
 * shared stylesheet: the two sections are read side by side in one drawer and
 * must stay in step, and a `:deep()` reach-in from the parent would couple the
 * drawer to this component's internal markup. If you change spacing in one,
 * change it in the other.
 *
 * Values are the drawer's, opened up one step (14→16px card padding and gaps,
 * 12→16px between rows) — the section stacks deeper than Properties does
 * (row card > property card > field), so it needs the extra room to read. */

/* ---- section rhythm ------------------------------------------------------ */

/* Condition sits above the rows as its own line: the label reads as a heading
   for the operator, not as a prefix to the radio. */
.cst-fd__condition[data-v-1db2f4c5] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 0;
  margin-bottom: 20px;
}
.cst-fd__condlabel[data-v-1db2f4c5] {
  font: var(--fw-medium) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.cst-fd__rows[data-v-1db2f4c5] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- cards --------------------------------------------------------------- */
.cst-fd__card[data-v-1db2f4c5] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border-secondary);
  background: var(--color-bg-primary);
}
.cst-fd__cardhead[data-v-1db2f4c5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cst-fd__cardtitle[data-v-1db2f4c5] {
  font: var(--fw-medium) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.cst-fd__del[data-v-1db2f4c5] {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-text-error-primary, #d92d20);
}
.cst-fd__cardfoot[data-v-1db2f4c5] {
  padding-top: 2px;
}

/* A property card sits INSIDE a row card, so it drops the outer card's white
   surface for a tinted inset — one glance tells you which level you are on.
   Depth by fill rather than by a second border, which at this nesting reads as
   a box-in-a-box. */
.cst-fd__propcard[data-v-1db2f4c5] {
  gap: 14px;
  padding: 14px;
  box-shadow: none;
  border-color: var(--color-border-tertiary, var(--color-border-secondary));
  background: var(--color-bg-secondary, var(--color-bg-tertiary));
}

/* ---- fields -------------------------------------------------------------- */
.cst-fd__field[data-v-1db2f4c5] {
  width: 100%;
}
.cst-fd__cbx[data-v-1db2f4c5] {
  width: 100%;
  min-width: 0;
}
/* The trigger's text treatment and the pinned search row, duplicated from
   `CustFilterDrawer.vue` for the scoped-boundary reason at the top of this
   block. */
.cst-fd__cbxvalue[data-v-1db2f4c5] {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  color: var(--color-text-primary);
}
.cst-fd__cbxvalue--empty[data-v-1db2f4c5] {
  color: var(--color-text-tertiary);
}
.cst-fd__cbxchevron[data-v-1db2f4c5] {
  flex: none;
  color: var(--color-text-tertiary);
  transition: transform 150ms;
}
[data-state='open'] > .cst-fd__cbxchevron[data-v-1db2f4c5] {
  transform: rotate(180deg);
}
.cst-fd__cbxsearch[data-v-1db2f4c5] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-secondary, var(--color-border-primary));
  color: var(--color-text-tertiary);
}
.cst-fd__cbxgroup[data-v-1db2f4c5] {
  padding: 6px 8px;
  font: var(--fw-semibold) 11px/16px var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
}
.cst-fd__addpropbtn[data-v-1db2f4c5] {
  align-self: flex-start;
  padding: 0;
  height: auto;
}

/* ---- operator markers ---------------------------------------------------- */

/* The OR between two cards. Its parents already supply the gap on both sides,
   so the marker pulls itself in rather than adding a third space — otherwise
   two 16px gaps plus its own line box read as a break in the list rather than
   a join. Centred because it belongs to BOTH neighbours, not to the one above. */
.cst-fd__actpropop[data-v-1db2f4c5],
.cst-fd__actrowop[data-v-1db2f4c5] {
  margin: -6px 0;
  text-align: center;
  font: var(--fw-semibold) 11px/16px var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

/* ---- date range ---------------------------------------------------------- */

/* "When" is a different question from "what happened", so it gets a hairline
   and its own space instead of sitting as one more field in the stack. */
.cst-fd__actdates[data-v-1db2f4c5] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-secondary);
}

/* `DrawerContent`'s size tokens are 400/480/640px; the design asks for 440.
   Height is belt-and-braces against `shared/legacy-overrides.css`'s
   centred-Dialog cap, which also matches `[role="dialog"]`. */
.cst-filter-drawer[data-v-ca495ee4] {
  width: min(440px, 100%);
  height: 100%;
  max-height: none;
}
.cst-fd__head[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cst-fd__title[data-v-ca495ee4] {
  font: var(--fw-semibold) 18px/24px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-fd__close[data-v-ca495ee4] {
  width: 28px;
  height: 28px;
  padding: 0;
}

/* THE scroll fix — three lines, each load-bearing, and it took three attempts.
   Do not "simplify" any of them away.

   1. `flex: 1 1 0%` restates what DrawerBody's own `flex-1` intends. It is
      spelled out here because `shared/legacy-overrides.css`'s `.flex`
      neutralisation was cancelling it island-wide (now fixed at the source too;
      this stays as belt-and-braces). Without GROW, a short accordion leaves the
      footer floating up mid-panel instead of pinned to the bottom.
   2. `min-height: 0` — a column flex item defaults to `min-height: auto` and
      refuses to shrink below its content, so the body grew to full content
      height and `overflow-y: auto` never engaged.
   3. `flex: none` on the accordion — left shrinkable it collapses to the
      available height and clips its own overflow instead of letting the body
      scroll. Measured at 3559px of content inside a 745px box.

   Symptoms if you break one: (1) footer rides up under short content,
   (2) and (3) the drawer cannot be scrolled at all. */
.cst-fd__body[data-v-ca495ee4] {
  flex: 1 1 0%;
  min-height: 0;
}
.cst-fd__acc[data-v-ca495ee4] {
  flex: none;
}

/* NESTED ACCORDIONS CLIP. `AccordionContent` animates its height and keeps
   `overflow: hidden`, so the OUTER panel (the Channel section) holds a height
   measured while its inner groups were still collapsed. Expanding a group then
   grows the content past that height and the rest is cut off — which is why the
   drawer still lost content even once the body scrolled correctly.

   Forcing an OPEN panel to `height: auto; overflow: visible` makes it report its
   real height to the scroller. The trade is the collapse animation: opening is
   instant now. That is the right way round — an animation is not worth content
   you cannot reach. */
/* CORRECTED after measuring: the first attempt keyed off
   `.cst-fd__accpanel[data-state='open']` and NEVER MATCHED. The `class` passed
   to `AccordionContent` lands on the inner content div, while `data-state`, the
   animated height and the `overflow: hidden` all live on reka's collapsible
   WRAPPER around it — the probe reported `state=-` on the classed element,
   which is what gave it away.
   reka ids that wrapper `reka-collapsible-content-*`, so target it directly. */
.cst-fd__acc [id^='reka-collapsible-content'][data-state='open'][data-v-ca495ee4] {
  height: auto !important;
  overflow: visible !important;
  border: 0px !important;
}
.cst-fd__accpanel[data-v-ca495ee4] {
  padding-inline: 2px;
}
/* Accounts sit under their group heading with room on both sides. */
.cst-fd__chanpanel[data-v-ca495ee4] {
  padding: 2px 0 10px;
}
.cst-fd__sec[data-v-ca495ee4] {
  padding: 8px 12px;
}
.cst-fd__sec[data-v-ca495ee4]:first-of-type {
  border-top: 0;
}
/* Real hit area and breathing room — the trigger used to sit flush against
   the section above it. */
.cst-fd__sectrigger[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 2px;
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-fd__seccontent[data-v-ca495ee4] {
  padding: 2px 2px 18px;
}

/* Condition row: label + the OR/AND radios, legacy's own order. */
.cst-fd__condition[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 2px 14px;
}
.cst-fd__condlabel[data-v-ca495ee4] {
  font: var(--fw-medium) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.cst-fd__rows[data-v-ca495ee4] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* One bordered card per condition row — legacy's own shape (`.filter-
   properties__card`), with real breathing room inside rather than legacy's
   own cramped version (the user has asked for this twice). */
.cst-fd__card[data-v-ca495ee4] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border-secondary);
  background: var(--color-bg-primary);
}
.cst-fd__cardhead[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cst-fd__cardtitle[data-v-ca495ee4] {
  font: var(--fw-medium) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.cst-fd__del[data-v-ca495ee4] {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-text-error-primary, #d92d20);
}
.cst-fd__cardfoot[data-v-ca495ee4] {
  padding-top: 2px;
}
.cst-fd__field[data-v-ca495ee4] {
  width: 100%;
}
/* Field chrome comes from `ComboboxTrigger` now (the DS's own "Field ·
   Dropdown" surface — 44px, border, chevron, ring-on-open), so the hand-rolled
   border/height/focus-ring the previous anchor-is-an-input shape needed is
   gone. What is left is only what the DS does NOT own: the selected-vs-
   placeholder text treatment inside the trigger, and the pinned search row,
   which `Combobox.vue` builds in its own template rather than shipping as a
   primitive. */
.cst-fd__cbx[data-v-ca495ee4] {
  width: 100%;
  min-width: 0;
}
/* Selected value reads as real content; the placeholder as absent. The old
   shape rendered BOTH as the input's placeholder, so a picked property was
   indistinguishable from an unpicked one. */
.cst-fd__cbxvalue[data-v-ca495ee4] {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  color: var(--color-text-primary);
}
.cst-fd__cbxvalue--empty[data-v-ca495ee4] {
  color: var(--color-text-tertiary);
}
.cst-fd__cbxchevron[data-v-ca495ee4] {
  flex: none;
  color: var(--color-text-tertiary);
  transition: transform 150ms;
}
[data-state='open'] > .cst-fd__cbxchevron[data-v-ca495ee4] {
  transform: rotate(180deg);
}
/* Pinned search row above the list (DropdownItem.js:201-210 — magnifier +
   input, divider below). */
.cst-fd__cbxsearch[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-secondary, var(--color-border-primary));
  color: var(--color-text-tertiary);
}
.cst-fd__empty[data-v-ca495ee4] {
  margin: 4px 2px;
  font: var(--fw-regular) 13px/20px var(--font-sans);
  color: var(--color-text-tertiary);
}

/* The operator read-out between cards. Plain text, not a button — the
   Condition radios above are the only control. */
.cst-fd__opline[data-v-ca495ee4] {
  padding: 2px 2px;
  font: var(--fw-semibold) 11px/16px var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.cst-fd__chan[data-v-ca495ee4] {
  border-bottom: 1px solid var(--color-border-secondary);
}
.cst-fd__chan[data-v-ca495ee4]:last-child {
  border-bottom: 0;
}
.cst-fd__chanhead[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}
.cst-fd__chantrigger[data-v-ca495ee4] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  text-align: left;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
/* Indented under its group, and the last one gets space before the next
   group's border so the list does not end flush against it. */
.cst-fd__chanitem[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 6px 30px;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.cst-fd__chanitem[data-v-ca495ee4]:last-child {
  margin-bottom: 8px;
}
.cst-fd__srcrow[data-v-ca495ee4] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 2px;
  cursor: pointer;
}
.cst-fd__srcrow[data-disabled][data-v-ca495ee4] {
  opacity: 0.5;
  cursor: not-allowed;
}
.cst-fd__srctext[data-v-ca495ee4] {
  display: flex;
  flex-direction: column;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-fd__srchint[data-v-ca495ee4] {
  font: var(--fw-regular) 11px/16px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cst-fd__foot[data-v-ca495ee4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 360px fixed, per the mock's `width: 360, flex: 'none'`. */
.cdt-panel[data-v-16f1b5ed] {
  width: 360px;
  flex: none;
  /* Stretch to the column height and scroll internally (legacy: the left panel
     scrolls on its own). The parent grid sets `overflow-y: auto`; no
     `align-self: flex-start`, which would collapse it back to content height. */
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  overflow-y: auto;
}
/* In a bounded flex column, children default to flex-shrink:1 and get SQUISHED
   to fit instead of overflowing — which kills the scroll (scrollHeight stays ==
   clientHeight). Pin their natural height so the panel actually scrolls. */
.cdt-panel[data-v-16f1b5ed] > * {
  flex-shrink: 0;
}
.cdt-avatar[data-v-16f1b5ed] {
  width: 72px;
  height: 72px;
  font-size: 24px;
  line-height: 30px;
}
.cdt-id[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.cdt-id__name[data-v-16f1b5ed] {
  font: var(--fw-semibold) 18px/24px var(--font-sans);
  color: var(--color-text-primary);
}
.cdt-id__ident[data-v-16f1b5ed] {
  font: var(--fw-regular) 12px/18px var(--font-mono, monospace);
  color: var(--color-text-tertiary);
}
.cdt-id__actions[data-v-16f1b5ed] {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.cdt-core[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-secondary);
}
.cdt-row[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cdt-row__label[data-v-16f1b5ed] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cdt-row__value[data-v-16f1b5ed] {
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
  word-break: break-word;
}
/* Email / phone carry an inline pencil (legacy edits these per-field). It opens
 * the same Edit modal the header button does. */
.cdt-row__value--edit[data-v-16f1b5ed] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cdt-row__pencil[data-v-16f1b5ed] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--color-icon-secondary, var(--color-text-tertiary));
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.cdt-row__pencil[data-v-16f1b5ed]:hover {
  color: var(--color-text-brand-primary, #0d766e);
  background: var(--color-bg-tertiary, transparent);
}
.cdt-mono[data-v-16f1b5ed] {
  font-family: var(--font-mono, monospace);
}
.cdt-chan[data-v-16f1b5ed] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cdt-chan__badge[data-v-16f1b5ed] {
  width: 20px;
  height: 20px;
}
.cdt-grid2[data-v-16f1b5ed] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cdt-sec[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-secondary);
}
.cdt-sec__head[data-v-16f1b5ed] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}
.cdt-sec__title[data-v-16f1b5ed] {
  font: var(--fw-semibold) 11px/16px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-brand-primary);
}
.cdt-empty[data-v-16f1b5ed] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
  font-style: italic;
}
.cdt-empty--error[data-v-16f1b5ed] {
  color: var(--color-text-error-primary, #d92d20);
  font-style: normal;
}
.cdt-chips[data-v-16f1b5ed] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cdt-groupchip[data-v-16f1b5ed] {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-full, 9999px);
}
.cdt-groupchip[data-v-16f1b5ed]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring, var(--color-border-brand-primary));
  outline-offset: 2px;
}
.cdt-props[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Legacy stacks a label over an editable value field (fill-in-place). */
.cdt-prop[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdt-prop__k[data-v-16f1b5ed] {
  font: var(--fw-medium, var(--fw-regular)) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.cdt-prop__input[data-v-16f1b5ed] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-stroke-secondary, var(--color-border-subtle, #e2e8f0));
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font: var(--fw-regular) 14px/20px var(--font-sans);
}
.cdt-prop__input[data-v-16f1b5ed]::placeholder {
  color: var(--color-text-placeholder, var(--color-text-tertiary));
}
.cdt-prop__input[data-v-16f1b5ed]:focus {
  outline: none;
  border-color: var(--color-stroke-brand, var(--color-text-brand-primary, #0d766e));
}
.cdt-linked[data-v-16f1b5ed] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cdt-linked__banner[data-v-16f1b5ed] {
  margin: 0 0 4px;
  font: var(--fw-medium) 12px/18px var(--font-sans);
  color: var(--color-text-brand-primary);
}
.cdt-linked__row[data-v-16f1b5ed] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cdt-linked__text[data-v-16f1b5ed] {
  min-width: 0;
  flex: 1;
}
.cdt-linked__name[data-v-16f1b5ed] {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdt-linked__ident[data-v-16f1b5ed] {
  font: var(--fw-regular) 12px/18px var(--font-mono, monospace);
  color: var(--color-text-tertiary);
}
.cdt-linked__actions[data-v-16f1b5ed] {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.cdt-unmerge-error[data-v-16f1b5ed] {
  margin: 0;
  color: var(--color-text-error-primary, #d92d20);
  font: var(--fw-regular) 13px/18px var(--font-sans);
}

.cdc[data-v-ad245fe6] {
  flex: 1;
  min-width: 0;
  /* Fill the column height and pin the tabs; only the tab body scrolls (legacy:
     the conversation/activity area scrolls, the tab strip stays). No
     `align-self: flex-start` — that would collapse it back to content height. */
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* reka TabsRoot renders a plain div; make it the flex column that lets the tab
   body take the remaining height. */
.cdc__tabsroot[data-v-ad245fe6] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cdc__body[data-v-ad245fe6] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cdc__tabs[data-v-ad245fe6] {
  padding: 4px 16px 0;
  border-bottom: 1px solid var(--color-border-primary);
}
.cdc__body[data-v-ad245fe6] {
  padding: 20px;
}
.cdc__subtabs[data-v-ad245fe6] {
  margin-bottom: 16px;
}

/* Conversation tab: sub-tabs + action icons pinned at the top; only the message
   area (`.cdc__conv-scroll`) scrolls — legacy behaviour. Overrides the shared
   `.cdc__body` padding/overflow. */
.cdc__body--conv[data-v-ad245fe6] {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cdc__conv-back[data-v-ad245fe6] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--fw-medium) 13px/18px var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.cdc__conv-back[data-v-ad245fe6]:hover {
  color: var(--color-text-primary);
}
.cdc__conv-head[data-v-ad245fe6] {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px 0;
  border-bottom: 1px solid var(--color-border-primary);
}
.cdc__conv-head .cdc__subtabs[data-v-ad245fe6] {
  margin-bottom: 0;
}
.cdc__conv-actions[data-v-ad245fe6] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 6px;
}
.cdc__conv-icon[data-v-ad245fe6] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-icon-secondary, var(--color-text-tertiary));
  cursor: pointer;
}
.cdc__conv-icon[data-v-ad245fe6]:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.cdc__conv-icon.is-active[data-v-ad245fe6] {
  background: var(--color-bg-brand-secondary);
  color: var(--color-text-brand-primary, #0d766e);
}
.cdc__conv-icon[data-v-ad245fe6]:disabled {
  opacity: 0.4;
  cursor: default;
}
.cdc__conv-scroll[data-v-ad245fe6] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}
/* Activity tab: Filter funnel pinned top-right, timeline scrolls below. */
.cdc__body--activity[data-v-ad245fe6] {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cdc__activity-head[data-v-ad245fe6] {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-primary);
}
.cdc__activity-filter[data-v-ad245fe6] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--fw-medium, var(--fw-regular)) 13px/18px var(--font-sans);
  cursor: pointer;
}
.cdc__activity-filter[data-v-ad245fe6]:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.cdc__activity-filter.is-active[data-v-ad245fe6] {
  border-color: var(--color-stroke-brand, var(--color-text-brand-primary, #0d766e));
  color: var(--color-text-brand-primary, #0d766e);
}
.cdc__activity-scroll[data-v-ad245fe6] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}
.cdc__body--conv > .cdc__panel[data-v-ad245fe6] {
  margin: 12px 20px 0;
}
.cdc__empty[data-v-ad245fe6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 56px 24px;
}
.cdc__empty-icon[data-v-ad245fe6] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cdc__empty-text[data-v-ad245fe6] {
  max-width: 320px;
  margin: 0;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cdc__note[data-v-ad245fe6] {
  margin: 0;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cdc__note--error[data-v-ad245fe6] {
  color: var(--color-text-error-primary, #d92d20);
}

/* Room list (gap #1, docs/customer-legacy-parity-audit.md) — legacy's
   `.qs-resolved-list` rhythm (`CustomerConversationRoomList.js`), one row per
   conversation with a leading glyph, title/time, and up to three badge chips. */
.cdc__rooms[data-v-ad245fe6] {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cdc__roomitem[data-v-ad245fe6] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-secondary, var(--color-border-primary));
  cursor: pointer;
}
.cdc__roomitem[data-v-ad245fe6]:hover {
  background: var(--color-bg-tertiary);
}
.cdc__roomitem-icon[data-v-ad245fe6] {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cdc__roomitem-main[data-v-ad245fe6] {
  min-width: 0;
  flex: 1;
}
.cdc__roomitem-title[data-v-ad245fe6] {
  font: var(--fw-medium) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cdc__roomitem-time[data-v-ad245fe6] {
  font: var(--fw-regular) 12px/16px var(--font-sans);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.cdc__roomitem-badges[data-v-ad245fe6] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.cdc__badge[data-v-ad245fe6] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  font: var(--fw-medium) 11px/16px var(--font-sans);
}
.cdc__badge--tag[data-v-ad245fe6] {
  background: var(--color-bg-success-secondary, var(--color-bg-tertiary));
  color: var(--color-text-success-primary, var(--color-text-tertiary));
}
.cdc__badge--info[data-v-ad245fe6] {
  background: var(--color-bg-info-secondary, var(--color-bg-tertiary));
  color: var(--color-text-info-primary, var(--color-text-tertiary));
}
.cdc__badge--note[data-v-ad245fe6] {
  background: var(--color-bg-brand-secondary, var(--color-bg-tertiary));
  color: var(--color-text-brand-primary, var(--color-text-tertiary));
}

/* The rail (dot/tone/line/spacing) now comes from the DS Timeline; this file
   keeps only the entry CONTENT styling it owns (the activity sentence + its
   optional property lines). */
.cdc__cat[data-v-ad245fe6] {
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.cdc__title[data-v-ad245fe6] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
}
.cdc__title b[data-v-ad245fe6] {
  font-weight: var(--fw-semibold);
}
.cdc__timeline-more[data-v-ad245fe6] {
  margin-top: 12px;
}
.cdc__props[data-v-ad245fe6] {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cdc__prop[data-v-ad245fe6] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.cdc__prop b[data-v-ad245fe6] {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

/* Activity timeline — nudge the promoted DS Timeline toward legacy's look: a
   full-width bordered day-header chip and a carded entry body sitting next to
   the DS rail (dot + connector). Consumer-side theming only; the DS owns the
   rail + spacing. */
[data-v-ad245fe6] .qds-timeline-group__label {
  display: block;
  padding: 8px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-primary);
  font: var(--fw-semibold) 13px/18px var(--font-sans);
  color: var(--color-text-primary);
}
[data-v-ad245fe6] .qds-timeline-item__body {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-secondary, #f7f8fa);
  padding: 10px 14px;
}
/* The DS colours the dot background AND the slotted icon the SAME tone value, so
   the headset was invisible (amber-on-amber). Give the dot a PALE fill with a
   readable icon — legacy's exact treatment (Business Service = cream circle +
   amber headset). A white fallback keeps other tones' icons visible. */
[data-v-ad245fe6] .qds-timeline-item__dot {
  color: #fff;
}
[data-v-ad245fe6] .qds-timeline-item__dot[data-tone='warning'] {
  background: #fef3c7;
  /* Legacy's headset glyph is dark grey/near-black on the cream circle. */
  color: #3f3f46;
}
/* The rail connector is a DASHED line between the dots (legacy uses
   `border-left: 2px dashed #bfbfbf`), not the DS's solid fill. Convert the 2px
   fill span into a 2px dashed border. */
[data-v-ad245fe6] .qds-timeline-item__line {
  /* Legacy's rail is CONTINUOUS across day groups — the dashed line runs below
     every node toward the next one, including the last item of a day (it heads
     down to the next day chip). The DS hides the line on a group's last child;
     force it back so the timeline reads as one thread. */
  display: block !important;
  width: 0;
  min-height: 20px;
  background: transparent;
  background-image: none;
  border-left: 2px dashed var(--color-border-secondary, #bfbfbf);
}
/* …except the very last node overall: a timeline ends at its last item, so it
   has no connector below it ("semua di bawah icon ada garis kecuali paling akhir"). */
[data-v-ad245fe6] .qds-timeline-group:last-child .qds-timeline-item:last-child .qds-timeline-item__line {
  display: none !important;
}

/* ---- Conversations: room list ---- */
.cdc__rooms[data-v-ad245fe6] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cdc__room[data-v-ad245fe6] {
  display: flex;
  text-align: left;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-primary);
  cursor: pointer;
  font: inherit;
  transition: background 0.12s ease;
}
.cdc__room[data-v-ad245fe6]:hover {
  background: var(--color-bg-secondary);
}
.cdc__room-main[data-v-ad245fe6] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdc__room-top[data-v-ad245fe6] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cdc__room-name[data-v-ad245fe6] {
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
.cdc__room-time[data-v-ad245fe6] {
  flex: none;
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cdc__room-last[data-v-ad245fe6] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}

/* ---- Conversations: thread ---- */
.cdc__thread[data-v-ad245fe6] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cdc__thread-head[data-v-ad245fe6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cdc__back[data-v-ad245fe6] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font: var(--fw-semibold) 13px/18px var(--font-sans);
  color: var(--color-text-brand-primary);
}
.cdc__panel[data-v-ad245fe6] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-secondary);
}
.cdc__panel-head[data-v-ad245fe6] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cdc__panel-title[data-v-ad245fe6] {
  font: var(--fw-semibold) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cdc__panel-meta[data-v-ad245fe6] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cdc__panel-body[data-v-ad245fe6] {
  margin: 0;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
  white-space: pre-wrap;
}
.cdc__kv[data-v-ad245fe6] {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdc__kv-row[data-v-ad245fe6] {
  display: flex;
  gap: 8px;
  font: var(--fw-regular) 13px/18px var(--font-sans);
}
.cdc__kv-row dt[data-v-ad245fe6] {
  flex: none;
  min-width: 120px;
  color: var(--color-text-tertiary);
}
.cdc__kv-row dd[data-v-ad245fe6] {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--fw-medium, 500);
}
.cdc__messages[data-v-ad245fe6] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Legacy renders a uniform list: avatar + sender name + time, message box
 * below — sender identity distinguishes speakers (no left/right alignment). */
.cdc__msg[data-v-ad245fe6] {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cdc__msg-avatar[data-v-ad245fe6] {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-brand-secondary);
  color: var(--color-text-brand-primary);
  font: var(--fw-semibold) 12px/1 var(--font-sans);
}
.cdc__msg-avatar-img[data-v-ad245fe6] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cdc__msg-main[data-v-ad245fe6] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cdc__msg-head[data-v-ad245fe6] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.cdc__msg-name[data-v-ad245fe6] {
  font: var(--fw-semibold) 13px/18px var(--font-sans);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdc__bubble[data-v-ad245fe6] {
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-stroke-secondary, var(--color-border-subtle, #e2e8f0));
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font: var(--fw-regular) 14px/20px var(--font-sans);
  word-break: break-word;
}
.cdc__bubble--link[data-v-ad245fe6] {
  display: block;
  color: var(--color-text-brand-primary, #0d766e);
  text-decoration: none;
}
.cdc__bubble--link[data-v-ad245fe6]:hover {
  text-decoration: underline;
}
.cdc__msg-time[data-v-ad245fe6] {
  flex: 0 0 auto;
  font: var(--fw-regular) 11px/16px var(--font-sans);
  color: var(--color-text-tertiary);
}

/* Fixed width, mirrors `CustDetailPanel.vue`'s own `.cdt-panel` sizing
   convention — a bounded side column that scrolls on its own. */
.cao-panel[data-v-a8ee6ead] {
  width: 320px;
  flex: none;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
}
/* Same strip rhythm as `CustDetailContent.vue`'s `.cdc__activity-head` /
   `.cdc__conv-head` (padding 10/16, bottom border) — this column sits right
   next to those, so its own header reads as one more strip on the same page. */
.cao-head[data-v-a8ee6ead] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border-primary);
}
/* Verbatim `.cdc__panel-title` recipe (Note / Additional Information's own
   label, `CustDetailContent.vue`) — the closest existing "titled sub-section"
   on this page, reused rather than inventing a second label style. */
.cao-head__title[data-v-a8ee6ead] {
  font: var(--fw-semibold) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.cao-list[data-v-a8ee6ead] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 20px;
}
/* Legacy's own `.qs-addon_card` recipe (`customer-info.css:331-336`) — a
   floating card carried by shadow alone, no border, 16px corners. Ported
   verbatim rather than reusing the bordered-box convention the rest of this
   panel uses, since that's the exact thing the request asked to match. */
.cao-card[data-v-a8ee6ead] {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-large, 0px 8px 24px 0px rgba(10, 10, 10, 0.1));
  overflow: hidden;
}
/* `.qs-addon_card-header` — tinted strip, no border (the card's own shadow
   is what separates it from the page, same as legacy). */
.cao-card__head[data-v-a8ee6ead] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-bg-tertiary, #ececec);
}
/* `.qs-addon_card-header_icon-container` — circular badge holding the
   add-on glyph. */
.cao-card__icon[data-v-a8ee6ead] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border-secondary, #bfbfbf);
  background: var(--color-bg-brand-primary, #eefafe);
  color: var(--color-text-primary);
}
/* Legacy's header is 16px/600 — bumped from the DS's own row-title recipe to
   match instead, since header weight is the whole ask here. */
.cao-card__title[data-v-a8ee6ead] {
  font: var(--fw-semibold) 16px/22px var(--font-sans);
  color: var(--color-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Fixed height regardless of state (iframe loading/loaded, or errored) — a
   card that collapses to a one-line error next to a loaded neighbour is what
   actually read as broken/unfinished in the live render; every card now
   occupies the same footprint. 334px matches legacy's own
   `#add-on-section-{id}` min-height. */
.cao-card__body[data-v-a8ee6ead] {
  position: relative;
  min-height: 334px;
}
.cao-card__frame[data-v-a8ee6ead] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Fades in on `load` (`cao-card__frame--loading` below) so the swap from
     spinner to embedded content isn't an abrupt pop. */
  opacity: 1;
  transition: opacity 0.15s ease-out;
}
.cao-card__frame--loading[data-v-a8ee6ead] {
  opacity: 0;
}
.cao-card__spinner[data-v-a8ee6ead] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
}
.cao-card__spinner-ring[data-v-a8ee6ead] {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border-secondary, var(--color-border-primary));
  border-top-color: var(--color-text-brand-primary, #0d766e);
  animation: cao-spin-a8ee6ead 0.7s linear infinite;
}
@keyframes cao-spin-a8ee6ead {
to {
    transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.cao-card__spinner-ring[data-v-a8ee6ead] {
    animation: none;
}
.cao-card__frame[data-v-a8ee6ead] {
    transition: none;
}
}
.cao-card__body--note[data-v-a8ee6ead] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.cao-card__note[data-v-a8ee6ead] {
  margin: 0;
  text-align: center;
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cao-card__note--error[data-v-a8ee6ead] {
  color: var(--color-text-error-primary, #d92d20);
}
/* `.qs-addon_card-footer` — centered, generously padded, top border. */
.cao-card__footer[data-v-a8ee6ead] {
  display: flex;
  justify-content: center;
  padding: 18px;
  border-top: 1px solid var(--color-border-secondary, var(--color-border-primary));
}
/* `.cdc__bubble--link`'s own treatment for an outbound link inside a card. */
.cao-card__link[data-v-a8ee6ead] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--fw-medium) 14px/20px var(--font-sans);
  color: var(--color-text-brand-primary, #0d766e);
  text-decoration: none;
}
.cao-card__link[data-v-a8ee6ead]:hover {
  text-decoration: underline;
}

/* ---- sort mode --------------------------------------------------------- */
.cao-sort[data-v-a8ee6ead] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.cao-sort__row[data-v-a8ee6ead] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-primary);
  cursor: grab;
}
.cao-sort__row[data-v-a8ee6ead]:active {
  cursor: grabbing;
  background: var(--color-bg-secondary);
}
/* A plain 2x3 dot grid — the conventional drag-handle glyph. No registry icon
   fits "drag handle" (verified — the closest, `nav-ticketing`, is a support-
   ticket icon; using it here would be the same wrong-semantics mistake this
   panel's header icon was dropped for), so this is drawn rather than borrowed. */
.cao-sort__handle[data-v-a8ee6ead] {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(3, 3px);
  gap: 2px;
}
.cao-sort__dot[data-v-a8ee6ead] {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
}
.cao-sort__title[data-v-a8ee6ead] {
  font: var(--fw-medium) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cao-sort__error[data-v-a8ee6ead] {
  margin: 4px 0 0;
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-error-primary, #d92d20);
}
.cao-sort__footer[data-v-a8ee6ead] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.cst-groups[data-v-67acab15] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Full-height parity with the customer list (`.cst-table-wrap`): this fills
     the bounded `.cst-group-tabpane` from CustomersApp.vue, and the grid below
     becomes the one scrolling child so the toolbar/search/create stay put. */
  flex: 1;
  min-height: 0;
}
.cst-groups__toolbar[data-v-67acab15] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cst-groups__spacer[data-v-67acab15] {
  flex: 1;
}
.cst-groups__search-field[data-v-67acab15] {
  flex: 1 1 320px;
  max-width: 400px;
}
.cst-groups__empty[data-v-67acab15] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  text-align: center;
  color: var(--color-text-tertiary);
}
.cst-groups__empty-title[data-v-67acab15] {
  font: var(--fw-semibold) 16px/22px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-groups__empty-body[data-v-67acab15] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  max-width: 420px;
}
.cst-groups__grid[data-v-67acab15] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.cst-groups__card[data-v-67acab15] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-bg-primary);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}
.cst-groups__card[data-v-67acab15]:hover {
  background: var(--color-bg-secondary, var(--color-bg-tertiary));
  border-color: var(--color-border-brand-primary, var(--color-border-primary));
}
.cst-groups__card[data-v-67acab15]:focus-visible {
  outline: 2px solid var(--color-border-brand-primary, var(--color-text-primary));
  outline-offset: 2px;
}
.cst-groups__card-head[data-v-67acab15] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cst-groups__card-icon[data-v-67acab15] {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 12px);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Light-teal container + dark-teal glyph (design d_group). The old pairing
     was bg-brand-secondary (brand-500, the SOLID primary-button teal) under a
     brand-800 icon — teal-on-teal, which read as "nyaru" (blended). The
     brand-primary surface is the light brand-100 tint, giving the glyph real
     contrast; both stay brand tokens so `--brand` still re-skins them. */
  background: var(--color-bg-brand-primary, var(--color-bg-tertiary));
  color: var(--color-text-brand-primary, var(--color-text-primary));
}
.cst-groups__more[data-v-67acab15] {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full, 9999px);
  color: var(--color-text-tertiary);
}
.cst-groups__more[data-v-67acab15]:hover {
  background: var(--color-bg-secondary, var(--color-bg-tertiary));
}
.cst-groups__card-name[data-v-67acab15] {
  font: var(--fw-semibold) 15px/22px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-groups__card-desc[data-v-67acab15] {
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cst-groups__card-foot[data-v-67acab15] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-secondary);
  color: var(--color-text-tertiary);
}
.cst-groups__count[data-v-67acab15] {
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-groups__count-label[data-v-67acab15] {
  font: var(--fw-regular) 13px/18px var(--font-sans);
}
.cst-groups__open-hint[data-v-67acab15] {
  margin-left: auto;
  font: var(--fw-medium) 12px/16px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cst-groups__delete-error[data-v-67acab15] {
  margin: 0;
  color: var(--color-text-error-primary, #d92d20);
  font: var(--fw-regular) 13px/18px var(--font-sans);
}

.cust-col-check[data-v-b577015a] {
  width: 44px;
}

/* Long channel names (e.g. a custom channel's display name) must ellipsize
   instead of stretching the column / forcing horizontal scroll — cap the
   column width here; TableChannelCell.vue's `min-w-0 truncate` does the rest. */
.cust-col-channel[data-v-b577015a] {
  max-width: 220px;
}
.cust-name-cell[data-v-b577015a] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cust-avatar-wrap[data-v-b577015a] {
  position: relative;
  display: inline-flex;
  flex: none;
}
.cust-main-star[data-v-b577015a] {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--color-bg-primary);
  color: #fbb439;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--color-border-primary);
}
.cust-linked-icon[data-v-b577015a] {
  flex: none;
  display: inline-flex;
  color: var(--color-icon-secondary, var(--color-text-tertiary));
}

/* Full-height scroll wrapper (the `<Table wrapper-class>` div, ui-vue3
   Table.vue's own scroll region) — see CustomersApp.vue's own
   `.cst-table-wrap` for the mechanism this mirrors. Sticky header + a
   container-query so the responsive columns key off the CARD's own
   available width, not the viewport. */
.cust-table-wrap[data-v-b577015a] {
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
[data-v-b577015a] .cust-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-primary);
}
@container (max-width: 720px) {
.cust-table-wrap .cust-col-lo[data-v-b577015a] {
    display: none !important;
}
}
@container (max-width: 520px) {
.cust-table-wrap .cust-col-mid[data-v-b577015a] {
    display: none !important;
}
}

.cga-tab[data-v-be2058a8] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
}
.cgm-table-card[data-v-be2058a8] {
  flex: 1;
  min-height: 0;
}
.cga-tab__toolbar[data-v-be2058a8] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cga-tab__search[data-v-be2058a8] {
  flex: 1 1 260px;
  max-width: 360px;
}
.cga-tab__actions[data-v-be2058a8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-secondary, var(--color-bg-tertiary));
}
.cga-tab__selcount[data-v-be2058a8] {
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cga-tab__actions-buttons[data-v-be2058a8] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cga-tab__footer[data-v-be2058a8] {
  /* DataTable wraps #footer in a `flex justify-between` container; as a lone
     shrink-to-content child our own space-between collapsed and the pager
     clustered next to the count on the left. Fill the width so the count sits
     left and the cursor pager is pushed to the right — mirrors CustomersApp.vue's
     `.cst-footer`. */
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cga-tab__count[data-v-be2058a8] {
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
@media (max-width: 400px) {
.cga-tab__actions[data-v-be2058a8] {
    flex-direction: column-reverse;
    align-items: stretch;
}
.cga-tab__actions-buttons[data-v-be2058a8] {
    flex-direction: column-reverse;
    margin-left: 0;
}
.cga-tab__actions-buttons[data-v-be2058a8] button {
    width: 100%;
}
}

.cgm[data-v-0456b56e] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 16px;
}
.cgm__back[data-v-0456b56e] {
  align-self: flex-start;
  flex: none;
}
.cgm__head[data-v-0456b56e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex: none;
}
.cgm__ident[data-v-0456b56e] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cgm__ident-text[data-v-0456b56e] {
  min-width: 0;
}
.cgm__ident-icon[data-v-0456b56e] {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-brand-primary, var(--color-bg-tertiary));
  color: var(--color-text-brand-primary, var(--color-text-primary));
}
.cgm__name[data-v-0456b56e] {
  font: var(--fw-semibold) 18px/24px var(--font-sans);
  color: var(--color-text-primary);
}
.cgm__count[data-v-0456b56e] {
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cgm__actions[data-v-0456b56e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cgm__tabs-root[data-v-0456b56e] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cgm__tabs[data-v-0456b56e] {
  flex: none;
  flex-wrap: wrap;
}
.cgm__count-chip[data-v-0456b56e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--color-bg-tertiary, #f2f4f7);
  color: var(--color-text-secondary, var(--color-text-tertiary));
  font: var(--fw-medium) 12px/16px var(--font-sans);
}
.cgm__tabpane[data-v-0456b56e] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cgm-table-card[data-v-0456b56e] {
  flex: 1;
  min-height: 0;
}
.cgm__toolbar[data-v-0456b56e] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cgm__search[data-v-0456b56e] {
  flex: 1 1 260px;
  max-width: 360px;
}
.cgm__bulk-actions[data-v-0456b56e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cgm__hero[data-v-0456b56e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 16px;
  text-align: center;
}
.cgm__hero-icon[data-v-0456b56e] {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg, 16px);
  background: var(--color-bg-brand-primary, var(--color-bg-tertiary));
  color: var(--color-text-brand-primary, var(--color-text-primary));
}
.cgm__hero-title[data-v-0456b56e] {
  margin: 0;
  font: var(--fw-semibold) 16px/22px var(--font-sans);
  color: var(--color-text-primary);
}
.cgm__hero-body[data-v-0456b56e] {
  margin: 0;
  max-width: 360px;
  font: var(--fw-regular) 13px/20px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cgm__footer[data-v-0456b56e] {
  /* DataTable wraps #footer in a `flex justify-between` container; as a lone
     shrink-to-content child our own space-between collapsed and the pager
     clustered next to the count on the left. Fill the width so the count sits
     left and the cursor pager is pushed to the right — mirrors CustomersApp.vue's
     `.cst-footer`. */
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cgm__footer-count[data-v-0456b56e] {
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
@media (max-width: 480px) {
.cgm__actions[data-v-0456b56e] {
    width: 100%;
}
.cgm__actions[data-v-0456b56e] button {
    flex: 1;
}
.cgm__search[data-v-0456b56e] {
    max-width: none;
}
}

.cmm-dialoghead[data-v-7e371607] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.cmm-dialoghead__sub[data-v-7e371607] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
}
.cmm-body[data-v-7e371607] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cmm-list[data-v-7e371607] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}
.cmm-empty[data-v-7e371607] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-tertiary);
  font: var(--fw-regular) 13px/18px var(--font-sans);
}
.cmm-row[data-v-7e371607] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border-radius: var(--radius-md, 12px);
  border-bottom: 1px solid var(--color-border-secondary);
}
.cmm-row[data-v-7e371607]:hover {
  background: var(--color-bg-secondary, var(--color-bg-tertiary));
}
.cmm-row[data-selected][data-v-7e371607] {
  background: var(--color-bg-brand-secondary, var(--color-bg-tertiary));
}
.cmm-row__badges[data-v-7e371607] {
  display: inline-flex;
  gap: 4px;
  flex: none;
  color: var(--color-text-tertiary);
}
.cmm-row__text[data-v-7e371607] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  text-align: left;
}
.cmm-row__name[data-v-7e371607] {
  font: var(--fw-medium) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
.cmm-row__meta[data-v-7e371607] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cmm-row__check[data-v-7e371607] {
  flex: none;
  color: var(--color-text-brand-primary, var(--color-text-primary));
}
.cmm-preview[data-v-7e371607] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 16px);
}

.caf__head[data-v-00cbbeaf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.caf__title[data-v-00cbbeaf] {
  font: var(--fw-semibold) 16px/24px var(--font-sans);
  color: var(--color-text-primary);
}
.caf__close[data-v-00cbbeaf] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--color-icon-secondary, var(--color-text-tertiary));
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.caf__body[data-v-00cbbeaf] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.caf__condition[data-v-00cbbeaf] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-primary);
}
.caf__label[data-v-00cbbeaf] {
  font: var(--fw-medium, var(--fw-regular)) 13px/18px var(--font-sans);
  color: var(--color-text-secondary);
}
.caf__footer[data-v-00cbbeaf] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Root text defaults — mirrors tags-app/tg-shell's box-sizing + font-family
   bridge (islands/src/tags/TagsApp.vue). */
/* The engine's outer wrapper must carry the definite height down from
   AppLayout's 100dvh `.app-layout__content` so `.cst-shell`'s `height: 100%`
   resolves. Without this the block wrapper is content-height and the whole
   page scrolls instead of the columns. */
.cdp-root[data-v-d57f154b] {
  height: 100%;
}
.cst-shell[data-v-d57f154b] {
  box-sizing: border-box;
  /* DEFINITE height (not min-height): AppLayout gives us a 100dvh parent, so a
     bounded shell lets `.cst-main` scroll INTERNALLY (topbar stays put) and lets
     the detail's two columns each own their own scroll — legacy behaviour. With
     min-height the whole page grew and scrolled as one block. */
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  font-family: var(--font-sans, system-ui, sans-serif);
}

/* Topbar — spec §1: 64px, sticky, bg-primary, 1px bottom border, identity only. */
.cst-topbar[data-v-d57f154b] {
  height: 64px;
  flex: none;
  padding: 0 32px;
  background: var(--color-bg-primary);
  border-bottom: var(--border-xs) solid var(--color-border-primary);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.cst-topbar__icon[data-v-d57f154b] {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary, var(--c-brand-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cst-topbar__text[data-v-d57f154b] {
  min-width: 0;
}
/* Typography ported from settings-ds.css's `.t-body-1-semibold`/`.t-body-3`
   utility classes (:791-794 / :804-807) rather than applied via those class
   names directly: settings-ds.css is scoped to `.sso-settings` AND is only
   linked by settings.blade.php (SSO/tags/etc.) — customers/v2/index.blade.php
   links qiscus-tokens.generated.css + qiscus-ds-bridge.css only (:55-56), so
   those utility classes are not reachable here. The underlying --t-body-*
   custom properties ARE defined in the linked qiscus-ds-bridge.css (:161-175),
   so the values below resolve correctly — only the class rule itself needed
   porting. See also the `.cst-page-enter` port below for the same category of
   gap (settings-ds.css-only rule, ported rather than left inert). */
.cst-topbar__title[data-v-d57f154b] {
  font-family: var(--font-sans);
  font-weight: var(--t-body-1-semibold-weight);
  font-size: var(--t-body-1-size);
  line-height: var(--t-body-1-lh);
  color: var(--color-text-primary);
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.cst-topbar__sub[data-v-d57f154b] {
  font-family: var(--font-sans);
  font-weight: var(--t-body-3-weight);
  font-size: var(--t-body-3-size);
  line-height: var(--t-body-3-lh);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Content area — spec §1: flex:1, scrolls, padding 32 (comfortable density;
   compact isn't wired in this slice — no `density` prop yet). */
.cst-main[data-v-d57f154b] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
  /* Flex column so the detail view can claim the full remaining height
     (`.cst-detail { flex: 1 }`) and hand its own scroll to the two columns. The
     list view stacks normally and scrolls this container as before. */
  display: flex;
  flex-direction: column;
}
/* Detail view fills the content area; its columns scroll internally so the
   Back header stays put — the outer `.cst-main` no longer scrolls in detail. */
.cst-main[data-v-d57f154b]:has(.cst-detail) {
  overflow: hidden;
}
.cst-tabs[data-v-d57f154b] {
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cst-soon[data-v-d57f154b] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Tab-switch enter animation — faithful port of settings-ds.css:316-320's
   `.ds-page-enter` (also `.sso-settings`-scoped there and only linked by
   settings.blade.php, so unreachable here — same gap as the topbar typography
   above). Renamed `cst-page-enter` rather than reusing the `ds-` prefix: that
   prefix implies the DS itself ships the rule, which — on THIS page — it
   doesn't; `--ease-out` still resolves from the linked qiscus-ds-bridge.css. */
@keyframes cstPageIn-d57f154b {
from {
    opacity: 0;
    transform: translateY(6px);
}
to {
    opacity: 1;
    transform: none;
}
}
.cst-page-enter[data-v-d57f154b] {
  animation: cstPageIn-d57f154b 260ms var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
.cst-page-enter[data-v-d57f154b] {
    animation: none;
}
}

/* ============================================================================
   Customer List table (Task 3). The mock's `.oc-card`/`.oc-toolbar`/
   `.oc-footer`/`.sel-bar`/`.cust-tbl--compact .ds-tbl`/`.ds-table-wrap` CSS
   that Task 2 forward-ported is DELETED here: `@qiscus/ui-vue3`'s `DataTable`
   (card chrome + toolbar/footer regions + the selected-count bulk-action
   swap) and `Table` family (the grid itself) emit their own Tailwind class
   names — confirmed `grep -c "ds-tbl" ui-vue3/dist/index.js` -> 0, so every
   `.ds-tbl*`/`.oc-*`/`.sel-bar` selector matched nothing. See task-3-report.md
   for the full before/after list.
   ============================================================================ */

/* Checkbox column (Task 5) — fixed width so the checkbox doesn't reflow the
   other columns. */
/* Long channel names must ellipsize instead of stretching the column /
   forcing horizontal scroll — cap the column width here; TableChannelCell's
   `min-w-0 truncate` (ui-vue3) does the rest. Mirrors CustomerTable.vue's own
   `.cust-col-channel` (this list is a deliberately-unshared copy). */
.cust-col-channel[data-v-d57f154b] {
  max-width: 220px;
}
.cst-col-check[data-v-d57f154b] {
  width: 44px;
}

/* Responsive column hiding via a container query — re-targeted at the REAL
   wrapper `<Table wrapper-class="cst-table-wrap">` renders (its own scroll
   div, ui-vue3 Table.vue), not the mock's fake `.ds-table-wrap`. `cust-col-mid`
   / `cust-col-lo` are this subsystem's own column-priority markers (spec §2),
   kept under their original `cust-` prefix rather than renamed to `cst-`. */
/* Page-scoped count line above the table (PM ruling 2026-08-03). */
.cst-showing[data-v-d57f154b] {
  flex: none;
  margin: 0 0 12px;
  font: var(--fw-regular) 13px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}

/* Full-height Customer List — parity with the detail view (user, 2026-08-03):
   the list fills the remaining screen height and the TABLE BODY scrolls, so the
   "Showing N" line, toolbar, tabs and pager stay put instead of the whole
   `.cst-main` scrolling as one block. Mirrors `.cst-main:has(.cst-detail)`. */
.cst-main[data-v-d57f154b]:has(.cst-list-tabpane, .cst-group-tabpane) {
  overflow: hidden;
}
.cst-main:has(.cst-list-tabpane, .cst-group-tabpane) .cst-tabs-root[data-v-d57f154b] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cst-list-tabpane[data-v-d57f154b] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Group tab + its "manage members" replacement view — same full-height
   treatment as the list, so the toolbar/header stays put and only the group
   grid / member table scrolls. See CustGroupsTab.vue's `.cst-groups__grid`
   and CustGroupMembers.vue's `.cgm-table-card`. */
.cst-group-tabpane[data-v-d57f154b] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* The DataTable card (its own `flex flex-col gap-4`) fills the pane; the table
   scroll wrapper below becomes the one growing, scrolling child so the card's
   toolbar (top) and footer/pager (bottom) stay pinned. */
.cst-list-card[data-v-d57f154b] {
  flex: 1;
  min-height: 0;
}
.cst-table-wrap[data-v-d57f154b] {
  container-type: inline-size;
  /* In the full-height list this is the scroll region; elsewhere these are
     inert (no bounded parent → nothing to scroll). */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Keep the header row visible while the body scrolls. The DS TableHead has its
   own surface; pin it and give it an opaque background so rows don't bleed
   through. */
.cst-list-card .cst-table-wrap[data-v-d57f154b] thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-primary);
}
@container (max-width: 720px) {
.cst-table-wrap .cust-col-lo[data-v-d57f154b] {
    display: none !important;
}
}
@container (max-width: 520px) {
.cst-table-wrap .cust-col-mid[data-v-d57f154b] {
    display: none !important;
}
}
.cst-row[data-v-d57f154b] {
  cursor: pointer;
}

/* linked_id / is_main row decorations (design spec §4a gap #253). */
.cst-name-cell[data-v-d57f154b] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cst-avatar-wrap[data-v-d57f154b] {
  position: relative;
  display: inline-flex;
  flex: none;
}
.cst-main-star[data-v-d57f154b] {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--color-bg-primary);
  color: #fbb439;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--color-border-primary);
}
.cst-linked-icon[data-v-d57f154b] {
  flex: none;
  display: inline-flex;
  color: var(--color-icon-secondary, var(--color-text-tertiary));
}
.cst-addgroup-list[data-v-d57f154b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cst-addgroup-item[data-v-d57f154b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.cst-addgroup-count[data-v-d57f154b] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.cst-detail[data-v-d57f154b] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Fill the content area so the columns below can scroll internally. */
  flex: 1;
  min-height: 0;
}
.cst-detail__back[data-v-d57f154b] {
  align-self: flex-start;
  margin-left: -8px;
  flex: none;
}
.cst-detail__cols[data-v-d57f154b] {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex-wrap: nowrap;
  /* Take the remaining height under the Back button; each column scrolls on
     its own (legacy: left panel and right content scroll independently). */
  flex: 1;
  min-height: 0;
}
/* Each column owns its own height; the page chrome (topbar + Back) stays put.
   The panel scrolls as a whole (overflow set in CustDetailPanel); the content
   pins its tabs and scrolls only the tab body (overflow set in
   CustDetailContent). */
.cst-detail__cols[data-v-d57f154b] > * {
  min-height: 0;
  max-height: 100%;
}
.cst-created[data-v-d57f154b] {
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.cst-ic-16[data-v-d57f154b] {
  width: 16px;
  height: 16px;
}
.cst-ic-24[data-v-d57f154b] {
  width: 24px;
  height: 24px;
}
/* DELIBERATE STAND-IN (see the Import button's template comment): mirrors the
   `upload` glyph vertically because the DS ships no "download" glyph at all.
   Not a leftover/typo — do not remove without re-verifying the DS export. */
.cst-ic-flip[data-v-d57f154b] {
  transform: scaleY(-1);
}

/* ============================================================================
   Toolbar (search + Export/Import/Filter) + footer (count + pager) — Task 4.
   NEW-2 correction: the toolbar now renders at the TOP of `<DataTable>`'s
   DEFAULT slot (a direct sibling of `<Table>` inside the card), not via its
   `#toolbar` slot, and not as a block outside `<DataTable>` either (see the
   template comment) — no `margin-bottom` here: the card's own `gap-4` (16px,
   DataTable's compiled root class, dist/index.js:12766) already provides the
   gap the design spec's "four sibling blocks" layout wants between blocks
   (docs/design-ref/specs/customers-list.md §2), so a hand-rolled margin would
   have doubled it. Footer still uses DataTable's own `#footer` slot.
   ============================================================================ */
.cst-toolbar[data-v-d57f154b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cst-search-field[data-v-d57f154b] {
  flex: 0 1 320px;
  min-width: 0;
}
.cst-toolbar__actions[data-v-d57f154b] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cst-footer[data-v-d57f154b] {
  /* DataTable wraps #footer in a `flex justify-between` container; as a lone
     shrink-to-content child our own space-between collapsed and the pager
     clustered next to the count on the left. Fill the width so the count sits
     left and the cursor pager is pushed to the right (design: d_list/d_filter). */
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cst-footer__count[data-v-d57f154b] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
}

/* Dialog header: stacked title + subtitle column (design d_creategroup). */
.cst-dialoghead[data-v-d57f154b] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.cst-dialoghead__sub[data-v-d57f154b] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
}
.cst-dialoghead__close[data-v-d57f154b] {
  flex: none;
  margin: -4px -4px 0 0;
}

/* ============================================================================
   Selection bar contents (Task 5) — rendered inside DataTable's own
   #bulkActions region (mock: `.sel-bar__actions`, docs/design-ref/mocks/
   customers-module.jsx:88-92). DataTable owns the bar's own chrome/padding/
   count text; only the actions row's internal layout is ours.
   ============================================================================ */
.cst-bulk-actions[data-v-d57f154b] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 28px icon-only hit area (mock's `<IconButton size={28}>`) — no 28px size
   token on `Button` (`sm` iconOnly is `size-8`/32px). `class` on `<Button>`
   lands directly on the real `<button>` element (same precedent as
   properties/PropertiesApp.vue:413's `.pp-icon-btn { min-width/height: 40px }`
   override — no `:deep()` needed there either). */
.cst-clear-btn[data-v-d57f154b] {
  width: 28px;
  height: 28px;
  padding: 0;
}

/* ============================================================================
   Import modal (Task 3) — body copy, radios and inline validation text. The
   dropzone/file-row chrome itself is `@qiscus/ui-vue3`'s own FileUpload*
   family (no hand-rolled `.ds-dropzone` markup, same discipline as the
   table/dialog swaps above); only this subsystem's own inline layout needs
   local rules.
   ============================================================================ */
.cst-import-help[data-v-d57f154b] {
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
  margin: 0;
}
.cst-import-error[data-v-d57f154b] {
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-error-primary, #d92d20);
  margin: 0;
}
.cst-import-radios[data-v-d57f154b] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cst-import-radio[data-v-d57f154b] {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-primary);
}
.cst-import-file-remove[data-v-d57f154b] {
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-icon-secondary, currentColor);
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-sm, 6px);
}
.cst-group-meta[data-v-d57f154b] {
  margin: 0 0 4px;
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}

.don[data-v-84dd0c65] {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg-secondary);
  box-sizing: border-box;
}
.don__card[data-v-84dd0c65] {
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.don__logo[data-v-84dd0c65] {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-brand-secondary);
  color: var(--color-text-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.don__title[data-v-84dd0c65] {
  margin: 4px 0 0;
  font: var(--fw-bold) 20px/28px var(--font-sans);
  color: var(--color-text-primary);
}
.don__body[data-v-84dd0c65] {
  margin: 0;
  font: var(--fw-regular) 14px/20px var(--font-sans);
  color: var(--color-text-secondary);
}
.don__stores[data-v-84dd0c65] {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.don__store[data-v-84dd0c65] {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-inverse, #0f172a);
  color: var(--color-text-on-inverse, #fff);
  font: var(--fw-semibold) 14px/20px var(--font-sans);
  text-decoration: none;
}
.don__hint[data-v-84dd0c65] {
  margin: 4px 0 0;
  font: var(--fw-regular) 12px/18px var(--font-sans);
  color: var(--color-text-tertiary);
}

/* =========================================================================
   TOKENS — this SFC uses ONLY ui-vue3 `--color-*` / `--radius-*` / `--ease-*`
   / `--font-sans` tokens (dark-mode safe out of the box). Layout dimensions
   (72px rail, 280px expanded, 24px icon, gaps) are literal px because those
   are geometry, not design tokens. No legacy `--bg-*`/`--text-*`/`--space-*`/
   `--size-*` names, no vendored tokens.css, no hardcoded color hex.
   DS-gaps flagged inline (shadow, gradient-brand mark svg fill).
   ========================================================================= */

/* Rail scaffolding — outer slot reserves the 72px column so the shell flex
   layout is stable; inner nav is absolutely positioned so hover-expand
   overlays the conversation list. Mock sidebar.jsx:37-52. */
.brand-rail-slot[data-v-228dcae8] {
  flex: none;
  width: 72px;
  position: relative;
  z-index: 60;
  align-self: stretch;
}
.brand-rail[data-v-228dcae8] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-right: 1px solid var(--color-border-primary);
  overflow: hidden;
  /* Asymmetric motion (mock lines 29-31): base rule = LEAVE/collapse curve,
     a soft glide-shut (420ms + 60ms delay so the label fades out first).
     DS-gap: ui-vue3 ships no shadow token, so the box-shadow uses a neutral
     rgba (no color token expresses an elevation shadow). */
  transition:
    width 420ms cubic-bezier(0.55, 0, 0.15, 1) 60ms,
    box-shadow 320ms var(--ease-out) 60ms;
}
.brand-rail[data-v-228dcae8]:hover {
  width: 280px;
  /* DS-gap: no elevation/shadow token in ui-vue3 — neutral rgba shadow. */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  /* Expand = brisk emphasized decel (mock line 30). */
  transition:
    width 260ms var(--ease-emphasized),
    box-shadow 260ms var(--ease-out);
}

/* Brand header — constant layout so the mark tile never shifts across the
   expand animation. Mock lines 54-78. */
.brand-rail__logo[data-v-228dcae8] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 72px;
  padding: 0 16px;
  gap: 12px;
  flex: none;
  text-decoration: none;
  white-space: nowrap;
}
.brand-rail__logo-mark[data-v-228dcae8] {
  width: 40px;
  height: 40px;
  /* DS 2026 radius-scale guide (designer, 2026-08-05): the brand-mark stays
     at `md` per the mock, but the guide REDEFINES the scale — `md` is now
     12px (was 6px under the older `@qiscus/ui-vue3` `--radius-md` token, i.e.
     the guide's `xs`). Hardcoded 12px until the shared radius tokens catch
     up; keep the value co-located with the guide reference so a
     `--radius-md` shift downstream cannot silently rewind this. */
  border-radius: 12px;
  /* Mock line 64: `var(--c-brand-700)`. In ui-vue3 the dark solid brand
     surface is `--color-bg-brand-secondary` (=brand-700), NOT
     `--color-bg-brand-primary` (which is the pale brand-100 tint). */
  background: var(--color-bg-brand-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand-rail__logo-mark-img[data-v-228dcae8] {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
.brand-rail__logo-mark svg[data-v-228dcae8] { flex: none;
}
.brand-rail__company-name[data-v-228dcae8] {
  /* Mock line 70: `700 16px/20px var(--font-sans)` + -0.1px tracking. */
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.1px;
  color: var(--color-text-primary);
  white-space: normal;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  opacity: 0;
  /* Asymmetric fade — quick out on collapse (130ms); slow delayed in on
     expand (below). Mock lines 32-34. */
  transition: opacity 130ms var(--ease-out);
}
.brand-rail:hover .brand-rail__company-name[data-v-228dcae8] {
  opacity: 1;
  transition: opacity 220ms var(--ease-out) 140ms;
}

/* Top scroll region + bottom cluster. Padding: 4px vertical, 12px horizontal
   (mock lines 81 + 88). Scrollbar hidden (mock line 81: scrollbarWidth:none).
   No scroll-cue gradient — the mock is silent on it and the legacy AppSidebar
   variant used hardcoded slate/white rgbas that break dark mode. */
.brand-rail__top[data-v-228dcae8] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.brand-rail__top[data-v-228dcae8]::-webkit-scrollbar { width: 0; height: 0;
}
.brand-rail__bottom[data-v-228dcae8] {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  gap: 2px;
  overflow-x: hidden;
  flex: none;
}

/* Nav item chrome (mock lines 117-157). Constant layout across the expand
   animation — only bg/color/label-opacity animate. Padding is asymmetric
   per mock line 133 (12px left centres the icon slot in the 72px collapsed
   width, 16px right = label breathing room). `text-align: left` overrides
   the <button> default so labels don't visually centre. */
.brand-rail__item[data-v-228dcae8] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 12px;
  border: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  background: transparent;
  /* Mock line 129: default color = --text-tertiary. */
  color: var(--color-text-tertiary);
  /* DS 2026 radius-scale guide (designer, 2026-08-05): guide `md` (12px) per
     the "Button = xs/sm/md per ukuran" rule (sidebar item is a button-like
     row). Hardcoded until the shared radius tokens ship the new scale — see
     the brand-mark note above for the same reason. */
  border-radius: 12px;
  flex: none;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  overflow: hidden;
  /* Mock line 136: bg + color transition 160ms ease-out. */
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.brand-rail__item[data-v-228dcae8]:hover {
  /* Mock line 128: hover bg = --bg-secondary; text unchanged (mock 129). */
  background: var(--color-bg-secondary);
}

/* Logout in flight: no pointer, no hover affordance, slightly dimmed. */
.brand-rail__item--busy[data-v-228dcae8],
.brand-rail__item[data-v-228dcae8]:disabled {
  cursor: default;
  opacity: 0.65;
}
.brand-rail__item--busy[data-v-228dcae8]:hover,
.brand-rail__item[data-v-228dcae8]:disabled:hover {
  background: transparent;
}

/* Mouse click must NOT draw a ring; keyboard Tab must (:focus-visible only). */
.brand-rail__item[data-v-228dcae8]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
}
.brand-rail__item--active[data-v-228dcae8],
.brand-rail__item--active[data-v-228dcae8]:hover {
  /* Mock line 128: active bg = light teal wash (--c-brand-50). Closest
     ui-vue3 token is --color-bg-brand-primary (brand-100 pale tint;
     brand-950 in dark mode → dark tint, correct for a dark surface). */
  background: var(--color-bg-brand-primary);
  /* Designer callout (2026-08-05): the whole active row — icon AND label —
     reads at `--color-brand-700` (the same tone the mock's `--c-brand-700`
     called for, honoured verbatim now that the primitive is white-label-
     aware via `color-mix` in `packages/tokens`). The DS has no
     `--color-text-brand-primary` variant pinned to brand-700 (that
     semantic ships as brand-800 for stronger contrast on plain surfaces),
     so we bypass it here and hit the brand-700 primitive directly. `svg`
     descendants inherit via the `currentColor` rule above — no
     icon-specific override needed. */
  color: var(--color-brand-700);
  /* Mock line 137: active weight = 600. */
  font-weight: 600;
}

/* Icon-slot — stable 24×24 frame around the 20×20 SVG so the icon has a
   fixed anchor during the expand/collapse (mock lines 143-148). */
.brand-rail__icon-slot[data-v-228dcae8] {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icons are now ui-vue3 components: sizing comes from the `size` prop and
   stroke weight from the `strokeWidth` prop (mock line 147: 2 active /
   1.75 default). This rule just guarantees the rendered svg inherits the
   item's `currentColor` so active/hover recolouring works — the active
   row's brand-700 propagates here automatically. */
.brand-rail__item svg[data-v-228dcae8] {
  flex: none;
  color: currentColor;
}

/* Label — constant layout (flex:1, min-width:0, ellipsis). Container's
   overflow:hidden clips the label as the rail width animates; only opacity
   animates. Same asymmetric fade as the company name. Mock lines 149-155. */
.brand-rail__label[data-v-228dcae8] {
  font: inherit;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  flex: 1;
  min-width: 0;
  opacity: 0;
  transition: opacity 130ms var(--ease-out);
}
.brand-rail:hover .brand-rail__label[data-v-228dcae8] {
  opacity: 1;
  transition: opacity 220ms var(--ease-out) 140ms;
}

/* Powered-by footer (mock lines 94-111). Always in the flex column; only
   opacity toggles on hover. Fixed padding keeps the cluster from shifting. */
.brand-rail__powered[data-v-228dcae8] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mock sidebar.jsx:97 `gap: 8` (px) — spacing between the "Powered by"
     label and the wordmark. Was 0 before the 2026-08-05 mock sync. */
  gap: 8px;
  padding: 12px 20px;
  opacity: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
  transition: opacity 130ms var(--ease-out);
}
.brand-rail:hover .brand-rail__powered[data-v-228dcae8] {
  /* Mock line 98: opacity 0.95 on hover. */
  opacity: 0.95;
  transition: opacity 220ms var(--ease-out) 140ms;
}
.brand-rail__powered-label[data-v-228dcae8] { line-height: 1;
}
.brand-rail__powered-logo[data-v-228dcae8] {
  /* Mock sidebar.jsx:109 `height: var(--size-sm)` — 16px per the legacy
     `--size-*` token scale (`--size-sm: 16px` in the DS bridge). Fallback
     keeps 16px until `@qiscus/ui-vue3` ports the token. The wordmark's SVG
     intrinsic aspect ratio (210:60 ≈ 3.5:1) gives ~56px width at 16px
     height — the actual reserved space in the strip. */
  height: var(--size-sm, 16px);
  width: auto;
  flex-shrink: 0;
  display: block;
}
/* Theme-aware "Powered by" wordmark — the color variant reads on light
   backgrounds, the white variant reads on dark. Hide the "wrong" one per
   the active `[data-theme]` on `<html>`. Default document theme is light
   (`v3/lib/theme.ts` `DEFAULT_THEME_MODE`), so the dark variant hides by
   default; the light rule flips them under `[data-theme='dark']`. */
.brand-rail__powered-logo--dark[data-v-228dcae8] { display: none;
}
[data-theme='dark'] .brand-rail__powered-logo--light[data-v-228dcae8] { display: none;
}
[data-theme='dark'] .brand-rail__powered-logo--dark[data-v-228dcae8] { display: block;
}

/* =========================================================================
   Mobile-access modal. Ships via ui-vue3 Dialog (size=sm ≈ 420px) so
   focus-scope, Esc-close, portal-to-body come from reka-ui. Vue scoped CSS
   still reaches the portaled nodes because the data-v hash travels on the
   class attribute with the moved node. Only visual overrides live here.
   ========================================================================= */

/* Overlay wash — ui-vue3's DialogOverlay ships no background; use the DS
   overlay token (dark-mode safe) rather than the mock's raw slate rgba. */
.brand-rail__modal-overlay[data-v-228dcae8] {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-bg-overlay-primary);
  animation: brand-rail-modal-fade-in-228dcae8 200ms var(--ease-out);
}
@keyframes brand-rail-modal-fade-in-228dcae8 {
from { opacity: 0;
}
to   { opacity: 1;
}
}
.brand-rail__modal-header[data-v-228dcae8] {
  padding: 20px;
  align-items: flex-start;
}
.brand-rail__modal-body[data-v-228dcae8] {
  /* top gap so the QR panel doesn't butt against the header's divider */
  padding: 16px 20px 20px;
}

/* Scan-to-login QR panel */
.brand-rail__qr-panel[data-v-228dcae8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.brand-rail__qr-box[data-v-228dcae8] {
  position: relative;
  width: 256px;
  height: 256px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border-secondary, #ececec);
  background: #fff;
  overflow: hidden;
}
.brand-rail__qr-canvas[data-v-228dcae8] {
  /* Displayed at 240px inside the 256px box. NOTE: `qrcode` writes an inline
     style.width/height = the bitmap size, which beats this rule (inline > class);
     useMobileLoginQr re-asserts 240px inline after rendering so the code isn't
     clipped. These values are the pre-render fallback — keep them in sync with
     QR_DISPLAY_PX there. */
  width: 240px;
  height: 240px;
  display: block;
}
.brand-rail__qr-overlay[data-v-228dcae8] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-bg-primary, #fff);
}
.brand-rail__qr-hint[data-v-228dcae8] {
  margin: 0;
  max-width: 280px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
}
.brand-rail__qr-countdown[data-v-228dcae8] {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.brand-rail__store-divider[data-v-228dcae8] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  color: var(--color-text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brand-rail__store-divider[data-v-228dcae8]::before,
.brand-rail__store-divider[data-v-228dcae8]::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-secondary, #ececec);
}
.brand-rail__modal-title-col[data-v-228dcae8] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.brand-rail__modal-close[data-v-228dcae8] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex: none;
  transition: background 160ms var(--ease-out),
              color 160ms var(--ease-out);
}
.brand-rail__modal-close[data-v-228dcae8]:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
.brand-rail__modal-close[data-v-228dcae8]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
.brand-rail__modal-title[data-v-228dcae8] {
  font: 600 20px / 26px var(--font-sans);
  color: var(--color-text-primary);
}
.brand-rail__modal-subtitle[data-v-228dcae8] {
  font: 400 12px / 18px var(--font-sans);
  color: var(--color-text-tertiary);
}
.brand-rail__store-row[data-v-228dcae8] {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}
.brand-rail__store-badge[data-v-228dcae8] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: background 160ms var(--ease-out),
              border-color 160ms var(--ease-out);
}
.brand-rail__store-badge[data-v-228dcae8]:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-secondary);
}
.brand-rail__store-badge[data-v-228dcae8]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
.brand-rail__store-text[data-v-228dcae8] {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.brand-rail__store-top[data-v-228dcae8] {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 13px;
  font-weight: 400;
  color: var(--color-text-tertiary);
}
.brand-rail__store-name[data-v-228dcae8] {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ── Confirm ── */
.ltm__confirm[data-v-3f93ad2e],
.ltm__error[data-v-3f93ad2e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 14px;
}
.ltm__confirm-icon[data-v-3f93ad2e],
.ltm__error-icon[data-v-3f93ad2e] {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ltm__confirm-icon[data-v-3f93ad2e] {
  background: var(--color-bg-brand-primary);
  color: var(--color-icon-brand-primary);
}
.ltm__error-icon[data-v-3f93ad2e] {
  background: var(--color-bg-error-primary, #fde8e8);
  color: var(--color-icon-error-primary, #ee5757);
}
.ltm__confirm-copy[data-v-3f93ad2e],
.ltm__error-copy[data-v-3f93ad2e] {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.ltm__error-stats[data-v-3f93ad2e] {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

/* ── Agent list (mirrors AgentPickerModal apm__*) ── */
.ltm__list[data-v-3f93ad2e] {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ltm__status[data-v-3f93ad2e] {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.ltm__row[data-v-3f93ad2e] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-primary);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.ltm__row[data-v-3f93ad2e]:hover {
  background: var(--color-bg-secondary);
}
.ltm__row[data-v-3f93ad2e]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
.ltm__row--selected[data-v-3f93ad2e],
.ltm__row--selected[data-v-3f93ad2e]:hover {
  background: var(--color-bg-brand-primary);
  border-color: var(--color-border-brand-primary);
}
.ltm__text[data-v-3f93ad2e] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ltm__name[data-v-3f93ad2e] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ltm__meta[data-v-3f93ad2e] {
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ltm__trailing[data-v-3f93ad2e] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.ltm__count[data-v-3f93ad2e] {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.ltm__empty[data-v-3f93ad2e] {
  padding: 32px 0 28px;
  text-align: center;
}
.ltm__empty-icon[data-v-3f93ad2e] {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 9999px;
  background: var(--color-bg-secondary);
  color: var(--color-icon-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ltm__empty-title[data-v-3f93ad2e] {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.ltm__empty-sub[data-v-3f93ad2e] {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}
.ltm__more[data-v-3f93ad2e] {
  margin: 6px auto 2px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-brand-primary);
}
.ltm__more[data-v-3f93ad2e]:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Progress ── */
.ltm__progress[data-v-3f93ad2e] {
  padding: 12px 0 4px;
}
.ltm__progress-copy[data-v-3f93ad2e] {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-align: center;
}
.ltm__bar[data-v-3f93ad2e] {
  height: 8px;
  border-radius: 9999px;
  background: var(--color-bg-secondary);
  overflow: hidden;
}
.ltm__bar-fill[data-v-3f93ad2e] {
  height: 100%;
  background: var(--color-bg-brand-solid, #27b199);
  border-radius: 9999px;
  transition: width 0.25s ease;
}
.ltm__progress-stats[data-v-3f93ad2e] {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.ltm__failed[data-v-3f93ad2e] {
  color: var(--color-text-error-primary, #ee5757);
}

/* Only tint the backdrop — DS `DialogOverlay` already sets `position: fixed`,
 * `inset: 0`, and `z-index: var(--z-modal-backdrop)` (=1300). Scoped-CSS
 * specificity (0-2-0) beats the utility `.z-[var(...)]` (0-1-0), so a hardcoded
 * `z-index: 100` here silently loses the stack against surfaces like
 * `AppCenterWidget` (z 540/550) — dim renders behind them while the dialog
 * (`--z-modal` = 1400) floats on top.
 */
.alert-host__overlay[data-v-9e3e9c40] {
  background: var(--color-bg-overlay-primary, rgba(6, 12, 18, 0.45));
}
.alert-host[data-v-9e3e9c40] {
  max-width: 420px;
}

/* Icon-above-title vertical stack — DS DialogHeader defaults to a horizontal
 * row layout, so the flex-column + center-align overrides are load-bearing for
 * the alert visual. Padding stays with the DS atom default (`p-5`). */
.alert-host__header[data-v-9e3e9c40] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.alert-host__icon[data-v-9e3e9c40] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.alert-host__title[data-v-9e3e9c40] {
  font: 600 18px / 24px var(--font-sans);
  color: var(--color-text-primary);
}
.alert-host__body[data-v-9e3e9c40] {
  text-align: center;
}
.alert-host__message[data-v-9e3e9c40] {
  font: 400 14px / 20px var(--font-sans);
  color: var(--color-text-secondary);
  white-space: pre-line;
}
.alert-host__footer[data-v-9e3e9c40] {
  display: flex;
  justify-content: center;
}

/* Flex so BrandRail's `.brand-rail-slot` (which sizes its height via
   `align-self: stretch`) fills the full column height. It used to be a flex
   item inside InboxShell's flex row; now that the rail is wrapped here, this
   wrapper must be the flex context or the slot collapses to 0 height (the
   `.brand-rail` inside is absolutely positioned, so it contributes none). */
.brand-rail-host[data-v-6b820cf8] {
  display: flex;
}
/* Desktop/tablet: inert wrapper, BrandRail lays out itself (72px slot,
   hover-expand). Mobile: the wrapper becomes the slide-in drawer surface —
   `:deep()` reaches BrandRail's own `.brand-rail-slot` root so it can be
   repositioned without editing that component's CSS. */
.brand-rail-host.is-mobile[data-v-6b820cf8] .brand-rail-slot {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 81;
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-rail-host.is-mobile.is-open[data-v-6b820cf8] .brand-rail-slot {
  transform: translateX(0);
  box-shadow: 12px 0 32px -18px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
.brand-rail-host.is-mobile[data-v-6b820cf8] .brand-rail-slot {
    transition: none;
}
}
.brand-rail-host__scrim[data-v-6b820cf8] {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--color-bg-overlay-primary, rgba(6, 12, 18, 0.45));
}
.brand-rail-host-fade-enter-active[data-v-6b820cf8],
.brand-rail-host-fade-leave-active[data-v-6b820cf8] {
  transition: opacity 260ms ease;
}
.brand-rail-host-fade-enter-from[data-v-6b820cf8],
.brand-rail-host-fade-leave-to[data-v-6b820cf8] {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.brand-rail-host-fade-enter-active[data-v-6b820cf8],
  .brand-rail-host-fade-leave-active[data-v-6b820cf8] {
    transition: none;
}
}

.csg[data-v-a9e91a5d] { display: flex; flex-direction: column; gap: 4px;
}
.csg__head[data-v-a9e91a5d] { display: flex; align-items: center; justify-content: space-between;
}
.csg__lbl[data-v-a9e91a5d] { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary);
}
.csg__dot[data-v-a9e91a5d] { width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.csg__cur[data-v-a9e91a5d] { font-size: 0.75rem; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.csg__svg[data-v-a9e91a5d] { width: 100%; height: 88px; display: block; background: color-mix(in srgb, var(--color-bg-primary) 60%, transparent); border-radius: 8px;
}
.csg__z[data-v-a9e91a5d] { opacity: 0.16;
}
.csg__z--good[data-v-a9e91a5d] { fill: #22c55e;
}
.csg__z--warn[data-v-a9e91a5d] { fill: #f0b040;
}
.csg__z--bad[data-v-a9e91a5d] { fill: #ef4444;
}

.fc-sound[data-v-98f6761d] { display: block; flex: none;
}

audio[data-v-bee0e339] { display: none;
}

/* ── Full window (640px centered modal, §9) ── */
.fc-backdrop[data-v-bee0e339] {
  position: fixed; inset: 0; z-index: var(--z-popover, 1600);
  background: var(--color-bg-overlay-primary, rgba(15, 23, 42, 0.35));
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fc-win[data-v-bee0e339] {
  --fc-focus: var(--color-border-brand-primary, #27b199);
  width: 640px; max-width: 96vw; max-height: 92vh; overflow: hidden; position: relative;
  /* §9 surface = the brand-primary green call surface. */
  background: var(--color-bg-brand-primary);
  border-radius: var(--radius-2xl, 16px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; transform-origin: bottom right;
}
/* Title bar (clean app header) */
.fc-title[data-v-bee0e339] {
  flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px;
  background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary);
}
.fc-title__wa[data-v-bee0e339] { width: 20px; height: 20px; flex: none; display: block;
}
.fc-title__t[data-v-bee0e339] {
  flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-title__min[data-v-bee0e339] {
  flex: none; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent;
  color: var(--color-icon-secondary); display: grid; place-items: center; cursor: pointer;
}
.fc-title__min[data-v-bee0e339]:hover { background: var(--color-bg-tertiary); color: var(--color-icon-primary);
}
.fc-title__min[data-v-bee0e339]:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px;
}
.fc-body[data-v-bee0e339] { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}

/* ── Status row ── */
.fc-status[data-v-bee0e339] { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px;
}
.fc-status.is-center[data-v-bee0e339] { justify-content: center;
}
.fc-pill[data-v-bee0e339] {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; min-width: 0; flex: none;
  border-radius: var(--radius-lg, 12px); background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
}
.fc-pill__wa[data-v-bee0e339] { width: 16px; height: 16px; flex: none; display: block;
}
.fc-pill__type[data-v-bee0e339] { font-size: 0.875rem; font-weight: 600; color: var(--color-text-brand-primary);
}
.fc-pill__sep[data-v-bee0e339] { width: 1px; height: 16px; background: var(--color-border-primary); margin: 0 2px;
}
.fc-pill__clock[data-v-bee0e339] { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.fc-pill__info[data-v-bee0e339] { color: var(--color-icon-tertiary, var(--color-icon-secondary)); cursor: help; display: inline-flex;
}
.fc-banner[data-v-bee0e339] {
  display: inline-flex; align-items: center; height: 34px; padding: 6px 14px; border-radius: var(--radius-lg, 12px);
  font-size: 0.875rem; font-weight: 600; color: var(--color-text-on-warning, #fff);
  /* `--color-bg-warning-solid` doesn't exist in the DS — was always falling
     through to the literal fallback hex. `-secondary` is the real solid-fill
     tier (design-fidelity review, 2026-08-01). */
  background: var(--color-bg-warning-secondary); animation: fc-bpulse-bee0e339 1.4s ease-in-out infinite;
}
@keyframes fc-bpulse-bee0e339 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.55;
}
}
.fc-status__right[data-v-bee0e339] { display: flex; align-items: center; gap: 10px;
}
.fc-rec[data-v-bee0e339] {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 6px 12px; border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
}
.fc-rec__dot[data-v-bee0e339] { width: 10px; height: 10px; border-radius: 50%; background: var(--color-bg-error-secondary); animation: fc-rec-bee0e339 1.2s ease-in-out infinite;
}
.fc-rec__t[data-v-bee0e339] { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-error-primary);
}
@keyframes fc-rec-bee0e339 {
0%, 100% { opacity: 1; transform: scale(1);
}
50% { opacity: 0.4; transform: scale(0.85);
}
}
.fc-netwrap[data-v-bee0e339] { position: relative; display: inline-flex;
}
.fc-netbtn[data-v-bee0e339] {
  width: 40px; height: 34px; border-radius: var(--radius-md, 8px); border: 0; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
}
.fc-netbtn[data-v-bee0e339]:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px;
}
.fc-bars[data-v-bee0e339] { display: block; color: var(--color-icon-brand-primary);
}
.fc-netpop[data-v-bee0e339] {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: 240px; padding: 10px 12px; border-radius: var(--radius-md, 8px);
  /* §9 uses bg-inverse (dark in the mock's DS). ui-vue3's --color-bg-inverse
     flips light in dark theme, so pin the dark navy the mock intends. */
  background: #0f172a; color: #fff; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}
.fc-netpop__h[data-v-bee0e339] { font-size: 0.8125rem; font-weight: 600; margin-bottom: 6px;
}
.fc-netpop__r[data-v-bee0e339] { display: flex; justify-content: space-between; font-size: 0.75rem; line-height: 20px;
}
.fc-netpop__k[data-v-bee0e339] { color: rgba(255, 255, 255, 0.75);
}
.fc-netpop__ok[data-v-bee0e339] { font-weight: 600;
}
.fc-netpop__ok.is-good[data-v-bee0e339] { color: #4ade80;
}
.fc-netpop__ok.is-fair[data-v-bee0e339] { color: #f0b040;
}
.fc-netpop__ok.is-poor[data-v-bee0e339] { color: #ff7a7d;
}
.fc-netpop__ok.is-unknown[data-v-bee0e339] { color: rgba(255, 255, 255, 0.7);
}
.fc-netpop__debug[data-v-bee0e339] { margin-top: 8px; width: 100%; border: 0; background: transparent; color: #7cc4ff; font-size: 0.75rem; font-weight: 600; text-align: left; cursor: pointer; padding: 4px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fc-netpop__debug[data-v-bee0e339]:hover { text-decoration: underline;
}

/* duration tooltip link (inside the DS Tooltip content) */
.fc-tt__link[data-v-bee0e339] { color: var(--color-text-link, #7cc4ff); font-weight: 700; text-decoration: underline;
}

/* network debug graph overlay (legacy ConnectionStatsGraph) */
.fc-graph[data-v-bee0e339] { position: absolute; inset: 0; z-index: 8; background: var(--color-bg-brand-primary); display: flex; flex-direction: column;
}
.fc-graph__head[data-v-bee0e339] { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
}
.fc-graph__body[data-v-bee0e339] { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px;
}

/* ── Participants ── */
.fc-parts[data-v-bee0e339] { background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent); border-radius: var(--radius-lg, 12px); padding: 4px 12px;
}
.fc-prow[data-v-bee0e339] { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 0;
}
.fc-prow + .fc-prow[data-v-bee0e339] { border-top: 1px solid var(--color-border-primary);
}
.fc-prow__nm[data-v-bee0e339] { flex: 1; font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* AudioLevel — a canvas SoundBar driven by the real per-speaker stream
   (idle = 5 dots, speaking = 5 voice-reactive bars). See SoundBar.vue. */
.fc-lvl[data-v-bee0e339] { align-self: center; height: 16px; flex: none;
}

/* ── Controls (§9 InCallCtrl: active=brand-secondary, danger=red, neutral) ── */
.fc-ctrls[data-v-bee0e339] { display: flex; align-items: center; justify-content: center; gap: 12px;
}
.fc-cbtn[data-v-bee0e339] {
  height: 48px; width: 48px; border-radius: var(--radius-full, 9999px); border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary); color: var(--color-text-primary); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, color 0.15s; box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.08));
}
.fc-cbtn[data-v-bee0e339]:hover:not(:disabled) { filter: brightness(1.06);
}
.fc-cbtn[data-v-bee0e339]:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px;
}
.fc-cbtn.is-wide[data-v-bee0e339] { width: 72px;
}
.fc-cbtn.is-active[data-v-bee0e339] { background: var(--color-bg-brand-secondary); border-color: transparent; color: var(--color-text-on-brand, #fff);
}
.fc-cbtn.is-danger[data-v-bee0e339] { background: var(--color-bg-error-secondary); border-color: transparent; color: #fff;
}
.fc-cbtn.is-end[data-v-bee0e339] { background: var(--color-bg-error-secondary); border-color: transparent; color: #fff;
}
.fc-cbtn[data-v-bee0e339]:disabled { background: var(--color-bg-disabled, var(--color-bg-tertiary)); color: var(--color-text-disabled); cursor: not-allowed; box-shadow: none; filter: none;
}

/* ── More → device pickers (collapsible §9) ── */
.fc-more[data-v-bee0e339] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease;
}
.fc-more.is-open[data-v-bee0e339] { grid-template-rows: 1fr;
}
.fc-more__inner[data-v-bee0e339] { overflow: hidden; min-height: 0;
}
.fc-morecard[data-v-bee0e339] { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg, 12px); overflow: hidden;
}
.fc-morehead[data-v-bee0e339] { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary);
}
.fc-x[data-v-bee0e339] { border: 0; background: transparent; cursor: pointer; line-height: 0; color: var(--color-icon-secondary); border-radius: 6px; padding: 4px;
}
.fc-x[data-v-bee0e339]:hover { color: var(--color-icon-primary); background: var(--color-bg-tertiary);
}
.fc-x[data-v-bee0e339]:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: 2px;
}
/* Collapse hand-rolled (parity §9 DevicePicker — the mock hand-rolls this too;
   the DS Accordion's FAQ chrome is too heavy for the compact picker). */
.fc-dp[data-v-bee0e339] { border-top: 0;
}
.fc-dp__t[data-v-bee0e339] { width: 100%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary);
}
.fc-dp__t[data-v-bee0e339]:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: -2px;
}
.fc-dp__chev[data-v-bee0e339] { color: var(--color-icon-secondary); transition: transform 0.2s;
}
.fc-dp.is-open .fc-dp__chev[data-v-bee0e339] { transform: rotate(180deg);
}
.fc-dp__list[data-v-bee0e339] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease;
}
.fc-dp.is-open .fc-dp__list[data-v-bee0e339] { grid-template-rows: 1fr;
}
/* Option box border/margin only when OPEN — else a collapsed section's 0-height
   bordered box renders as a stray hairline under the header. */
.fc-dp__list > .fc-dp__inner[data-v-bee0e339] { overflow: hidden; min-height: 0;
}
.fc-dp.is-open .fc-dp__list > .fc-dp__inner[data-v-bee0e339] { margin: 0 8px 8px; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px);
}
.fc-dp__opt[data-v-bee0e339] { width: 100%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; font-size: 0.8125rem; color: var(--color-text-primary); text-align: left;
}
.fc-dp__opt + .fc-dp__opt[data-v-bee0e339] { border-top: 1px solid var(--color-border-primary);
}
.fc-dp__opt[data-v-bee0e339]:hover { background: var(--color-bg-tertiary);
}
.fc-dp__opt[data-v-bee0e339]:focus-visible { outline: 2px solid var(--fc-focus); outline-offset: -2px;
}
.fc-dp__opt.is-on[data-v-bee0e339] { background: var(--color-bg-secondary); font-weight: 600;
}
.fc-dp__ck[data-v-bee0e339] { color: var(--color-icon-brand-primary); flex: none;
}
.fc-dp__empty[data-v-bee0e339] { margin: 0; padding: 8px 12px; font-size: 0.75rem; color: var(--color-text-tertiary);
}

/* ── End confirm (§9 ds-modal--confirm) ── */
.fc-confirm[data-v-bee0e339] { position: absolute; inset: 0; z-index: 9; background: var(--color-bg-overlay-primary, rgba(15, 23, 42, 0.55)); display: grid; place-items: center; padding: 24px;
}
.fc-cmodal[data-v-bee0e339] { width: 380px; max-width: 100%; background: var(--color-bg-primary); border-radius: var(--radius-2xl, 16px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5); padding: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* Solid-red disc + white glyph — the light error-tint (bg-error-secondary +
   text-error-primary) read as low-contrast on the light modal. Matches the
   red End button (.fc-cbtn.is-end). */
.fc-cmodal__ic[data-v-bee0e339] { width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg-error-secondary); color: #fff; display: grid; place-items: center; margin-bottom: 6px;
}
.fc-cmodal h3[data-v-bee0e339] { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary);
}
.fc-cmodal p[data-v-bee0e339] { margin: 0 0 12px; font-size: 0.8125rem; color: var(--color-text-secondary);
}
.fc-cmodal__row[data-v-bee0e339] { display: flex; gap: 10px; width: 100%;
}
.fc-cmodal__row[data-v-bee0e339] > * { flex: 1;
}

/* ── Minimized bar (our addition) ── */
.fc-bar[data-v-bee0e339] {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-popover, 1600); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 6px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-full, 9999px); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.4);
}
.fc-bar__grip[data-v-bee0e339] { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; cursor: grab; touch-action: none;
}
.fc-bar__grip i[data-v-bee0e339] { width: 3px; height: 3px; border-radius: 50%; background: var(--color-icon-tertiary, var(--color-icon-secondary));
}
.fc-bar__meta[data-v-bee0e339] { display: flex; flex-direction: column; line-height: 1.15; margin-right: 2px;
}
.fc-bar__lvl[data-v-bee0e339] { flex: none; align-self: center; margin: 0 2px;
}
.fc-bar__nm[data-v-bee0e339] { font-size: 0.78rem; font-weight: 600; color: var(--color-text-primary); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-bar__tm[data-v-bee0e339] { font-size: 0.6875rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.fc-bar .fc-cbtn[data-v-bee0e339] { width: 40px; height: 40px; box-shadow: none;
}
.fc-bar .fc-cbtn.is-ghost[data-v-bee0e339] { border: 0; background: transparent; color: var(--color-icon-secondary);
}
.fc-bar .fc-cbtn.is-ghost[data-v-bee0e339]:hover { background: var(--color-bg-tertiary); color: var(--color-icon-primary);
}

/* ── Transitions ──
   Minimize/maximize reads as ONE object: the window collapses toward the
   bottom-right (its transform-origin) — where the pill sits — and the pill
   grows out of that same corner, so the two cross-fade into each other
   instead of one fading dead-center while the other pops elsewhere. Enter uses
   an expo ease-out (overshoot-free spring feel); leave a quick ease-in. */
.fc-modal-enter-active[data-v-bee0e339] { transition: opacity 0.26s ease;
}
.fc-modal-leave-active[data-v-bee0e339] { transition: opacity 0.2s ease;
}
.fc-modal-enter-from[data-v-bee0e339], .fc-modal-leave-to[data-v-bee0e339] { opacity: 0;
}
.fc-modal-enter-active .fc-win[data-v-bee0e339] { animation: fc-winIn-bee0e339 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fc-modal-leave-active .fc-win[data-v-bee0e339] { animation: fc-winOut-bee0e339 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes fc-winIn-bee0e339 {
from { opacity: 0; transform: translate(28px, 28px) scale(0.72);
}
to { opacity: 1; transform: translate(0, 0) scale(1);
}
}
@keyframes fc-winOut-bee0e339 {
from { opacity: 1; transform: translate(0, 0) scale(1);
}
to { opacity: 0; transform: translate(28px, 28px) scale(0.72);
}
}
/* Pill: pops from / drops into the same corner. */
.fc-bar-enter-active[data-v-bee0e339] { animation: fc-barIn-bee0e339 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fc-bar-leave-active[data-v-bee0e339] { animation: fc-barOut-bee0e339 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes fc-barIn-bee0e339 {
from { opacity: 0; transform: translateY(18px) scale(0.82);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
@keyframes fc-barOut-bee0e339 {
from { opacity: 1; transform: translateY(0) scale(1);
}
to { opacity: 0; transform: translateY(18px) scale(0.82);
}
}
.fc-fade-enter-active[data-v-bee0e339], .fc-fade-leave-active[data-v-bee0e339] { transition: opacity 0.18s ease;
}
.fc-fade-enter-from[data-v-bee0e339], .fc-fade-leave-to[data-v-bee0e339] { opacity: 0;
}
/* ── Responsive (mobile / narrow) ── */
@media (max-width: 640px) {
.fc-backdrop[data-v-bee0e339] { padding: 10px;
}
.fc-win[data-v-bee0e339] { width: 100%; max-width: 100%; max-height: 94vh;
}
.fc-title[data-v-bee0e339] { height: 44px; padding: 0 8px 0 14px;
}
.fc-title__t[data-v-bee0e339] { font-size: 0.8125rem;
}
.fc-body[data-v-bee0e339] { padding: 12px; gap: 12px;
}
.fc-status[data-v-bee0e339] { flex-wrap: wrap; row-gap: 8px;
}
.fc-pill[data-v-bee0e339] { flex-wrap: wrap;
}
.fc-netpop[data-v-bee0e339] { width: min(240px, 78vw);
}
.fc-bar[data-v-bee0e339] { right: 12px; bottom: 12px; max-width: calc(100vw - 24px);
}
.fc-bar__nm[data-v-bee0e339] { max-width: 84px;
}
}
@media (max-width: 380px) {
.fc-ctrls[data-v-bee0e339] { gap: 10px;
}
.fc-cbtn[data-v-bee0e339] { width: 44px; height: 44px;
}
.fc-cbtn.is-wide[data-v-bee0e339] { width: 64px;
}
}
@media (prefers-reduced-motion: reduce) {
.fc-rec__dot[data-v-bee0e339], .fc-banner[data-v-bee0e339],
  .fc-modal-enter-active .fc-win[data-v-bee0e339], .fc-modal-leave-active .fc-win[data-v-bee0e339], .fc-bar-enter-active[data-v-bee0e339], .fc-bar-leave-active[data-v-bee0e339],
  .fc-modal-enter-active[data-v-bee0e339], .fc-modal-leave-active[data-v-bee0e339], .fc-fade-enter-active[data-v-bee0e339], .fc-fade-leave-active[data-v-bee0e339] { animation: none !important; transition: none !important;
}
}

.v3-ic[data-v-77dbdea2] {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-tooltip, 1700);
  width: 360px;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-2xl, 16px);
  /* Theme-aware DS surface (matches the FloatingCall window) — light card in
     light theme, dark in dark theme. Border + shadow keep it legible over any
     page. (Was a hardcoded dark navy; now follows @qiscus/ui-vue3 tokens.) */
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 20px 48px -18px rgba(0, 0, 0, 0.4);
}
.v3-ic__av[data-v-77dbdea2] { flex: none;
}
.v3-ic__meta[data-v-77dbdea2] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.v3-ic__name[data-v-77dbdea2] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-ic__sub[data-v-77dbdea2] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.v3-ic__dot[data-v-77dbdea2] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
  animation: v3ic-pulse-77dbdea2 1.4s ease-in-out infinite;
}
@keyframes v3ic-pulse-77dbdea2 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.4;
}
}
.v3-ic__actions[data-v-77dbdea2] { display: flex; gap: 8px; margin-left: auto; flex: none;
}
.v3-ic__btn[data-v-77dbdea2] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  transition: filter 0.15s;
}
.v3-ic__btn[data-v-77dbdea2]:hover { filter: brightness(1.08);
}
.v3-ic__btn--decline[data-v-77dbdea2] { background: var(--color-bg-error-secondary);
}
.v3-ic__btn--accept[data-v-77dbdea2] { background: #25d366;
}
.v3-ic__hangup[data-v-77dbdea2] { transform: rotate(135deg);
}

/* slide-in from the bottom corner (was "from the top" §8 wacToastIn — flipped
   2026-08-01 to match the bottom-right anchor). */
.v3-ic-enter-active[data-v-77dbdea2] { animation: v3ic-in-77dbdea2 0.3s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}
.v3-ic-leave-active[data-v-77dbdea2] { transition: opacity 0.18s ease, transform 0.18s ease;
}
.v3-ic-leave-to[data-v-77dbdea2] { opacity: 0; transform: translateY(10px) scale(0.98);
}
@keyframes v3ic-in-77dbdea2 {
from { opacity: 0; transform: translateY(12px) scale(0.97);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.v3-ic-enter-active[data-v-77dbdea2], .v3-ic__dot[data-v-77dbdea2] { animation: none;
}
}

/* Row chassis — DS tokens only. `--conv-row-surface` tracks the painted row bg
   so ring-tucked corner badges + knockout glyphs stay legible on hover/active. */
.conv-row[data-v-d1104853] {
  --conv-row-surface: var(--color-bg-primary);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--conv-row-surface);
  transition: background 120ms ease-out, border-left-color 120ms ease-out;
  outline: none;
}
.conv-row[data-v-d1104853]:hover {
  --conv-row-surface: var(--color-bg-secondary);
  background: var(--conv-row-surface);
}
.conv-row[data-v-d1104853]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
}
/* pinned before active so an active+pinned row shows the active (brand-700) border */
.conv-row--pinned[data-v-d1104853] { border-left-color: var(--color-border-brand-primary);
}
.conv-row--active[data-v-d1104853],
.conv-row--active[data-v-d1104853]:hover {
  /* Fix A: selected row = pale brand-50 wash (Claude Design). brand-50 gap:
     ui-vue3's palest brand primitive is brand-100 (too saturated vs the mock).
     Mix the brand into the THEMED surface (not literal white) so it stays a pale
     wash in light mode AND becomes a dark brand-tint in dark mode — keeps the
     themed row text (--color-text-primary/tertiary) readable in both themes. */
  --conv-row-surface: color-mix(in oklab, var(--brand) 12%, var(--color-bg-primary));
  background: var(--conv-row-surface);
  border-left-color: var(--color-border-brand-secondary);
}

/* Keyboard cursor (Ctrl+Alt+E room picker). Focus lives on the listbox
   CONTAINER — screen readers follow aria-activedescendant — so the cursor row
   gets no :focus-visible of its own and has to draw its own ring.

   An inset ring rather than a background wash, deliberately: the cursor and the
   active row are frequently DIFFERENT rows while arrowing, and a second wash
   would read as "two rows are selected". A ring says "pending", the wash says
   "open". Inset so the 76px row height and the virtual-scroll offsets stay
   exact — an outset outline would overlap the neighbouring row.

   Token: `border-brand-primary`, NOT the semantically-tempting
   `border-brand-focus` — only the former is remapped for dark theme
   (applyBrand.ts DARK_SEMANTIC), so `-focus` would stay brand-700 on a dark
   surface and all but vanish. */
.conv-row--cursor[data-v-d1104853] {
  outline: 2px solid var(--color-border-brand-primary);
  outline-offset: -2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.conv-row--cursor[data-v-d1104853] {
    transition: outline-color 80ms ease-out;
}
}

/* ─ Avatar block (46×46) ─ */
.conv-row__avatar-block[data-v-d1104853] {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.conv-row__corner[data-v-d1104853] {
  position: absolute;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Ring punches the badge out of the row surface — track --conv-row-surface so
     it blends on hover/active (not a fixed bg-primary halo). */
  box-shadow: 0 0 0 2px var(--conv-row-surface);
  pointer-events: none;
}
/* Fix 4 / Fix B: real channel badge IMAGE, BOTTOM-LEFT, filling a 16px ring
   circle. The prior approach CSS-shrank the DS ChannelBadge's 24-viewBox glyph
   to 10px → sub-pixel strokes ("pecah") + a generic (not brand) mark. The per-
   channel /img badge SVG fills the whole 16px circle and stays crisp; the DS
   ChannelBadge only shows as a fallback when no badge resolves (its 24px span →
   16px, inner glyph → 10px, keeping the DS 14/24 ratio). */
.conv-row__corner--channel[data-v-d1104853] {
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--color-bg-primary);
}
.conv-row__channel-img[data-v-d1104853] {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
/* Fallback DS ChannelBadge sizing (only rendered when no image resolves). */
.conv-row__corner--channel[data-v-d1104853] > span {
  width: 16px;
  height: 16px;
}
.conv-row__corner--channel[data-v-d1104853] svg {
  width: 10px;
  height: 10px;
}
/* Fix 5: SLA clock, BOTTOM-RIGHT, optically dead-center in the circle. */
.conv-row__corner--sla[data-v-d1104853] {
  bottom: 0;
  right: 0;
  color: var(--color-text-white);
  line-height: 0;
}
.conv-row__corner--sla[data-v-d1104853] svg { display: block;
}
.conv-row__corner--sla-expired[data-v-d1104853] { background: var(--color-bg-error-secondary);
}
/* Same warning pill background + icon color as the chat/customer-info
   "Expiring soon" StatusChip (`status-chip.variants.ts`'s `warning` color) —
   the pale bg needs a dark icon instead of the shared white, or it disappears. */
.conv-row__corner--sla-expiring[data-v-d1104853] {
  background: var(--color-bg-warning-primary);
  color: var(--color-text-warning-primary);
}
.conv-row__corner--sla-wag[data-v-d1104853] { background: var(--color-bg-brand-secondary);
}

/* ─ Content ─ */
.conv-row__content[data-v-d1104853] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.conv-row__head[data-v-d1104853] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.conv-row__flags[data-v-d1104853] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  color: var(--color-icon-tertiary);
  line-height: 0;
}
.conv-row__flag[data-v-d1104853] { flex: none;
}
.conv-row__flag--success[data-v-d1104853] { color: var(--color-icon-success-primary);
}
.conv-row__name[data-v-d1104853] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.conv-row--unread .conv-row__name[data-v-d1104853] { font-weight: 700;
}
.conv-row__time[data-v-d1104853] {
  flex: none;
  margin-left: 10px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.conv-row__preview-line[data-v-d1104853] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.conv-row__reply[data-v-d1104853] { flex: none; color: var(--color-icon-tertiary);
}
.conv-row__preview[data-v-d1104853] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-text-tertiary);
}
.conv-row--unread .conv-row__preview[data-v-d1104853] {
  font-weight: 600;
  color: var(--color-text-secondary);
}
/* On-call treatment — active WA call. Success tone signals a live call,
   matching the header call-status "connected" color; text stays weight 600
   so it reads as a live status, not a muted preview. */
.conv-row__oncall-icon[data-v-d1104853] { flex: none; color: var(--color-icon-success-primary);
}
.conv-row__oncall[data-v-d1104853] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-text-success-primary, var(--color-text-secondary));
}
.conv-row__unread[data-v-d1104853] { flex: none; margin-left: 10px;
}
/* Fix 3: non-unserved unread = brand-secondary (dark) + white text. */
.conv-row__unread--brand[data-v-d1104853] {
  background: var(--color-bg-brand-secondary);
  color: var(--color-text-white);
}
/* Fix 2: serve status as plain colored text (no chip box). */
.conv-row__serve[data-v-d1104853] {
  flex: none;
  margin-left: 10px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.conv-row__serve--unserved[data-v-d1104853] { color: var(--color-text-error-primary);
}
.conv-row__serve--served[data-v-d1104853] { color: var(--color-text-success-primary);
}

/* Search-highlight mark — DS warning wash. */
[data-v-d1104853] .conv-row__mark {
  background: var(--color-bg-warning-primary);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

.fp__title-col[data-v-dbc90d49] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp__title[data-v-dbc90d49] {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text-primary);
}
.fp__subtitle[data-v-dbc90d49] {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
}

/* Body owns the vertical rhythm; the master-detail grid grows to fill. */
.fp__body[data-v-dbc90d49] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.fp__section[data-v-dbc90d49] { display: flex; flex-direction: column; gap: 6px;
}
.fp__section-label[data-v-dbc90d49] {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.fp__chips[data-v-dbc90d49] { display: flex; flex-wrap: wrap; gap: 6px;
}

/* ── Master–detail two-pane ───────────────────────────────── */
.fp__master[data-v-dbc90d49] {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.fp__rail[data-v-dbc90d49] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding-right: 4px;
  border-right: 1px solid var(--color-border-primary);
}
.fp__rail-btn[data-v-dbc90d49] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-lg, 10px);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--easing-ease-out, ease-out), color 120ms var(--easing-ease-out, ease-out);
}
.fp__rail-btn[data-v-dbc90d49]:hover { background: var(--color-bg-secondary);
}
.fp__rail-btn[data-v-dbc90d49]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
}
.fp__rail-btn[data-active][data-v-dbc90d49] {
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  font-weight: 600;
}
.fp__rail-icon[data-v-dbc90d49] { flex: none;
}
.fp__rail-label[data-v-dbc90d49] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp__pane[data-v-dbc90d49] {
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fp__pane[data-v-dbc90d49]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-md, 8px);
}
.fp__pane-search[data-v-dbc90d49] { margin-bottom: 4px;
}

/* ── Rows ─────────────────────────────────────────────────── */
.fp__row-list[data-v-dbc90d49] { display: flex; flex-direction: column; gap: 2px;
}
.fp__row[data-v-dbc90d49] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md, 8px);
}
.fp__row[data-v-dbc90d49]:hover { background: var(--color-bg-secondary);
}
.fp__row[data-disabled][data-v-dbc90d49] { opacity: 0.5; pointer-events: none;
}
.fp__row-label[data-v-dbc90d49] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
}
.fp__row-label--strong[data-v-dbc90d49] { font-weight: 600;
}
.fp__row-count[data-v-dbc90d49] { font-size: 12px; color: var(--color-text-tertiary);
}
.fp__row-icon[data-v-dbc90d49] { color: var(--color-icon-secondary); flex: none;
}
.fp__chan-group[data-v-dbc90d49] { display: flex; flex-direction: column;
}
.fp__chan-children[data-v-dbc90d49] { padding-left: 22px; display: flex; flex-direction: column; gap: 2px;
}
.fp__caret[data-v-dbc90d49] {
  border: none;
  background: transparent;
  color: var(--color-icon-tertiary);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  border-radius: var(--radius-sm, 6px);
  transition: transform 160ms var(--easing-ease-out, ease-out);
}
.fp__caret[data-v-dbc90d49]:hover { background: var(--color-bg-secondary);
}
.fp__caret[data-v-dbc90d49]:focus-visible { outline: 2px solid var(--color-border-focus-ring); outline-offset: 1px;
}
.fp__caret[data-open][data-v-dbc90d49] { transform: rotate(180deg);
}

/* SLA colored dots — fill comes from SLA_OPTIONS[].color (DS var). */
.fp__sla-dot[data-v-dbc90d49] {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full, 9999px);
  flex: none;
}
.fp__radio-group[data-v-dbc90d49] { display: flex; flex-direction: column; gap: 4px;
}
.fp__radio-copy[data-v-dbc90d49] { display: flex; flex-direction: column; gap: 2px;
}
.fp__radio-desc[data-v-dbc90d49] { font-size: 12px; color: var(--color-text-tertiary);
}
.fp__hint[data-v-dbc90d49] {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-tertiary);
}
.fp__empty[data-v-dbc90d49] {
  padding: 16px 8px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-align: center;
}
.fp__empty--sm[data-v-dbc90d49] { padding: 8px; font-size: 12px;
}
.fp__footer[data-v-dbc90d49] { justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
.fp__rail-btn[data-v-dbc90d49], .fp__caret[data-v-dbc90d49] { transition: none;
}
}

.virtual-scroll[data-v-d7d9edc7] {
  overflow-y: auto;
  height: 100%;
}

/* 32×32 box to line up with the refresh/filter icon buttons; parent gap
   handles spacing. Status only — cursor default. */
.v3-callstatus[data-v-cfc2f5ee] {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  outline: none;
  color: var(--color-icon-secondary);
}

/* Badge dot + overlays inherit the state color via currentColor on the
   badge/ping elements; the phone stays neutral (its own currentColor is
   the container's icon-secondary, overridden per-state below only for the
   badge — so we scope the state color to the badge element). */
.v3-callstatus__phone[data-v-cfc2f5ee] { color: var(--color-icon-secondary);
}
.is-connected-online  .v3-callstatus__badge[data-v-cfc2f5ee] { color: var(--color-icon-success-primary);
}
.is-connected-offline .v3-callstatus__badge[data-v-cfc2f5ee] { color: var(--color-icon-tertiary);
}
.is-connecting        .v3-callstatus__badge[data-v-cfc2f5ee],
.is-connecting        .v3-callstatus__ping[data-v-cfc2f5ee],
.is-degraded          .v3-callstatus__badge[data-v-cfc2f5ee] { color: var(--color-icon-warning-primary);
}
.is-errored           .v3-callstatus__badge[data-v-cfc2f5ee] { color: var(--color-icon-error-primary);
}

/* Ping ring — expands + fades. Motion-gated: reduced-motion users get a
   steady amber badge (no ring pulse). */
.v3-callstatus__ping[data-v-cfc2f5ee] { opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.is-connecting .v3-callstatus__ping[data-v-cfc2f5ee] {
    animation: v3-callstatus-ping-cfc2f5ee 1.2s ease-out infinite;
}
}
@keyframes v3-callstatus-ping-cfc2f5ee {
0%   { r: 2.5px; opacity: 1;
}
100% { r: 6.5px; opacity: 0;
}
}

.sc-hint[data-v-29e8f4d8] {
  position: absolute;
  z-index: 2;
  display: inline-block;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 4px;
  /* Brand-solid rather than a neutral chip: while the agent is mid-chord these
     need to pop out of a dense list at a glance, not blend into it.
     The fallback chain is NOT belt-and-braces — `--color-bg-brand-solid` is
     declared only under the `#login-root, #sso-root` scope (features/login
     applyBrand.ts), so inside the inbox it resolves to nothing and the badge
     renders transparent with white text on it, i.e. invisible. Every other
     use of this token in the repo carries the same fallback for that reason
     (StatusPage.vue, LogoutTransferModal.vue). */
  background: var(--color-bg-brand-solid, var(--brand, #27b199));
  color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}
.sc-hint--bottom[data-v-29e8f4d8] {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}
.sc-hint--top[data-v-29e8f4d8] {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}
.sc-hint--right[data-v-29e8f4d8] {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.sc-hint-enter-active[data-v-29e8f4d8],
.sc-hint-leave-active[data-v-29e8f4d8] {
  transition: opacity 90ms ease-out;
}
.sc-hint-enter-from[data-v-29e8f4d8],
.sc-hint-leave-to[data-v-29e8f4d8] {
  opacity: 0;
}

/* The badges appear on a modifier press — for a motion-sensitive user that is
   a lot of unsolicited movement, so snap them in instead. */
@media (prefers-reduced-motion: reduce) {
.sc-hint-enter-active[data-v-29e8f4d8],
  .sc-hint-leave-active[data-v-29e8f4d8] {
    transition: none;
}
}

.sc-area[data-v-8784fe97] {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Both washes are mixed from the themed text colour rather than a literal grey,
   so they darken the light theme and LIGHTEN the dark one. A fixed
   rgba(0,0,0,…) would be invisible on a dark surface. */
.sc-area--fill[data-v-8784fe97] {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-text-primary) 16%, transparent),
    color-mix(in oklab, var(--color-text-primary) 4%, transparent)
  );
}
.sc-area--to-left[data-v-8784fe97] {
  justify-content: flex-end;
  padding-right: 28px;
  /* Densest against the right edge — where the panel will actually appear —
     then thinning out to nothing so it reads as a peek rather than a curtain. */
  background: linear-gradient(
    to left,
    color-mix(in oklab, var(--color-text-primary) 24%, transparent),
    color-mix(in oklab, var(--color-text-primary) 8%, transparent) 45%,
    transparent
  );
}
.sc-area__key[data-v-8784fe97] {
  display: inline-block;
  min-width: 34px;
  padding: 4px 10px;
  border-radius: 8px;
  /* Same fallback chain as <ShortcutHint>: --color-bg-brand-solid is declared
     only under the `#login-root, #sso-root` scope, so without it the key would
     render transparent-on-wash and vanish. */
  background: var(--color-bg-brand-solid, var(--brand, #27b199));
  color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}
.sc-area-enter-active[data-v-8784fe97],
.sc-area-leave-active[data-v-8784fe97] {
  transition: opacity 90ms ease-out;
}
.sc-area-enter-from[data-v-8784fe97],
.sc-area-leave-to[data-v-8784fe97] {
  opacity: 0;
}

/* The wash appears on a modifier press — for a motion-sensitive user that is a
   lot of unsolicited movement over a large area, so snap it in instead. */
@media (prefers-reduced-motion: reduce) {
.sc-area-enter-active[data-v-8784fe97],
  .sc-area-leave-active[data-v-8784fe97] {
    transition: none;
}
}

/* ════════════════════════════════════════════════════════════
   TOKEN CONVERSION: every color/motion below uses ui-vue3-native
   `--color-*` / `--ease-*` tokens (inbox-v3 loads ONLY @qiscus/ui-vue3
   tokens — NOT src/styles/tokens.css). Legacy→native map documented in
   the implementation note. size and space are not tokens → literal px.
   ════════════════════════════════════════════════════════════ */

/* Shell — column fills its 360px slot. */
.cl[data-v-c6bb8a87] {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

/* ─── Header ─── */
.cl__header[data-v-c6bb8a87] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--color-border-primary);
}

/* ☰ nav toggle — mobile only (the BrandRail column is a drawer below 768px). */
.cl__nav-btn[data-v-c6bb8a87] { display: none; flex: none;
}
@media (max-width: 767px) {
.cl__nav-btn[data-v-c6bb8a87] { display: inline-flex;
}
.cl__header[data-v-c6bb8a87] { padding-left: 8px;
}
}

/* ─── DS field (search input) ─── */
.cl-field[data-v-c6bb8a87] {
  /* Positioned ancestor for the `F` <ShortcutHint>. */
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  gap: 8px;
  /* DS field (app.css .ds-field__input): outlined white field — bg-primary +
     visible border-secondary + radius-md (12). Was a filled gray field
     (bg-secondary / transparent border / radius-sm), which read off vs the mock. */
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  transition: border-color 160ms var(--ease-out);
}
.cl-field[data-v-c6bb8a87]:focus-within {
  border-color: var(--color-border-brand-secondary);
}
/* Shared by the decorative <span> and the search-mode <button>, so the button
   resets are here — both must occupy the same 20px box. */
.cl-field__leading[data-v-c6bb8a87] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-tertiary);
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}
.cl-field__leading--back[data-v-c6bb8a87] {
  cursor: pointer;
  color: var(--color-text-brand-primary);
}
.cl-field__leading--back[data-v-c6bb8a87]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
  border-radius: 9999px;
}
.cl-field__input[data-v-c6bb8a87] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
.cl-field__input[data-v-c6bb8a87]::placeholder { color: var(--color-text-placeholder);
}
.cl-field__trailing[data-v-c6bb8a87] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-icon-tertiary);
  cursor: pointer;
  border-radius: 9999px;
}
.cl-field__trailing[data-v-c6bb8a87]:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary);
}

/* ─── Action cluster (collapses on searchMode) ─── */
.cl__actions[data-v-c6bb8a87] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  overflow: visible;
  max-width: 180px;
  opacity: 1;
  margin-left: 0;
  transition:
    max-width 260ms var(--ease-out),
    opacity 180ms var(--ease-out),
    margin 260ms var(--ease-out);
}
.cl__actions--collapsed[data-v-c6bb8a87] {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: -8px;
  pointer-events: none;
}
.cl__icon-btn[data-v-c6bb8a87] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-icon-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms var(--ease-out),
              color 120ms var(--ease-out);
}
.cl__icon-btn[data-v-c6bb8a87]:hover { background: var(--color-bg-secondary); color: var(--color-text-primary);
}
.cl__icon-btn[data-v-c6bb8a87]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
}
.cl__icon-btn[data-v-c6bb8a87]:disabled { opacity: 0.5; cursor: default;
}
.cl__icon-btn--on[data-v-c6bb8a87] {
  /* Active filter/more → PALE brand tint + brand text (mock brand-primary). */
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
}
.cl__icon-btn--on[data-v-c6bb8a87]:hover { background: var(--color-bg-brand-primary); color: var(--color-text-brand-primary);
}

/* ─── Availability strip ─── */
.cl__avail[data-v-c6bb8a87] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-primary);
}
.cl__avail-label[data-v-c6bb8a87] {
  flex: 1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.cl__avail-pill[data-v-c6bb8a87] {
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  border-radius: 9999px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: background 160ms var(--ease-out);
}
.cl__avail-pill[data-v-c6bb8a87]:hover { background: var(--color-bg-secondary);
}
.cl__avail-pill[data-v-c6bb8a87]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 1px;
}
.cl__avail-caret[data-v-c6bb8a87] {
  color: var(--color-icon-tertiary);
  transition: transform 160ms var(--ease-out);
}
.cl__avail-caret--open[data-v-c6bb8a87] { transform: rotate(180deg);
}
.cl__avail-dot[data-v-c6bb8a87] {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-icon-disabled);
  flex: none;
}
/* State dot tint: available = success, away = warning, offline = muted. */
.cl__avail-dot--available[data-v-c6bb8a87] { background: var(--color-text-success-primary);
}
.cl__avail-dot--away[data-v-c6bb8a87] { background: var(--color-bg-warning-secondary);
}
.cl__avail-dot--offline[data-v-c6bb8a87] { background: var(--color-icon-disabled);
}

/* Menu surface (panel/radius/shadow/item hover + roving focus) comes from the
   DS DropdownMenuContent/RadioItem. We own only the per-row dot + label layout,
   which lands inside the slotted radio items (scoped id crosses the DS slot). */
.cl__avail-content[data-v-c6bb8a87] [role="menuitemradio"] { gap: 8px;
}
.cl__avail-item-label[data-v-c6bb8a87] { flex: 1; min-width: 0;
}
.cl__avail-current[data-v-c6bb8a87] { display: flex; align-items: center; gap: 8px;
}

/* Unstable-connection banner surface is the DS <Banner variant="warning"> —
   no local styling; it flows as a flex-none child of the column. */

/* ─── Tabs ─── */
.cl__tabs[data-v-c6bb8a87] {
  flex: none;
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--color-border-primary);
}
.cl__tab[data-v-c6bb8a87] {
  /* Positioned ancestor for <ShortcutHint>, which pins itself to the edges. */
  position: relative;
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 2px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  letter-spacing: 0.1px;
  transition: color 160ms var(--ease-out), font-weight 160ms var(--ease-out);
}
.cl__tab[data-v-c6bb8a87]:not(.cl__tab--active):hover { color: var(--color-text-secondary);
}
.cl__tab[data-v-c6bb8a87]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
}
.cl__tab--active[data-v-c6bb8a87] {
  color: var(--color-text-brand-primary);
  font-weight: 600;
}
.cl__tab-icon-slot[data-v-c6bb8a87] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cl__tab-icon[data-v-c6bb8a87] {
  color: currentColor;
}
.cl__tab-counter[data-v-c6bb8a87] {
  top: -5px;
  right: -10px;
  pointer-events: none;
  min-width: 20px;
  padding-left: 6px;
  padding-right: 6px;
}
.cl__tab-label[data-v-c6bb8a87] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cl__tab-indicator[data-v-c6bb8a87] {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--color-text-brand-primary);
  border-radius: 2px 2px 0 0;
  transition: left 280ms var(--ease-out), width 280ms var(--ease-out);
}

/* ─── Search sub-tabs ─── */
.cl__search-tabs[data-v-c6bb8a87] {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--color-border-primary);
}
.cl__search-tab[data-v-c6bb8a87] {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-tertiary);
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.cl__search-tab[data-v-c6bb8a87]:hover:not(:disabled) { color: var(--color-text-secondary);
}
.cl__search-tab--active[data-v-c6bb8a87] {
  color: var(--color-text-brand-primary);
  border-bottom-color: var(--color-text-brand-primary);
  font-weight: 600;
}
.cl__search-tab[data-v-c6bb8a87]:disabled { color: var(--color-text-disabled); cursor: not-allowed;
}
.cl__search-tab-count[data-v-c6bb8a87] {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin-left: 6px;
}

/* ─── List area ─── */
.cl__list[data-v-c6bb8a87] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* VirtualScroll ships its own `overflow-y:auto; height:100%`, but as a shared
   slop component its scoped CSS lands in a chunk the v3 page doesn't reliably
   apply → the list couldn't scroll (content clipped by .cl__list overflow:hidden).
   Re-assert the scroll container here: the child's root carries THIS component's
   scope id, and this rule ships in the v3 CSS chunk. flex fill + internal scroll. */
.cl__list[data-v-c6bb8a87] .virtual-scroll {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
}

/* Skeleton (loading) — shimmer + fill come from the DS <Skeleton> primitive;
   scoped CSS owns only the row layout + each placeholder's footprint. */
.cl__skeleton[data-v-c6bb8a87] { padding: 4px 16px;
}
.cl__skel-row[data-v-c6bb8a87] {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-primary);
}
.cl__skel-avatar[data-v-c6bb8a87] { flex: none; width: 40px; height: 40px;
}
.cl__skel-lines[data-v-c6bb8a87] { flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.cl__skel-line[data-v-c6bb8a87] { height: 10px;
}
.cl__skel-line--sm[data-v-c6bb8a87] { width: 45%;
}
.cl__skel-line--md[data-v-c6bb8a87] { width: 75%;
}

/* Empty state */
.cl__empty[data-v-c6bb8a87] {
  padding: 48px 16px;
  text-align: center;
  color: var(--color-text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cl__empty svg[data-v-c6bb8a87] { color: var(--color-icon-disabled);
}
.cl__empty-title[data-v-c6bb8a87] {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.cl__empty-text[data-v-c6bb8a87] { font-size: 12px; line-height: 18px;
}
/* Clear-filters is the DS <Button variant="secondary">; we own only the
   spacing from the empty-state copy above it. */
.cl__empty-action[data-v-c6bb8a87] { margin-top: 8px;
}

/* Status + load-more */
.cl__status[data-v-c6bb8a87] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--color-text-tertiary);
  font-size: 13px;
}
.cl__load-more[data-v-c6bb8a87] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* Message search hit list */
.cl__msg-results[data-v-c6bb8a87] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}
.cl__msg-loading[data-v-c6bb8a87] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.cl__msg-hit[data-v-c6bb8a87] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-border-primary);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.cl__msg-hit[data-v-c6bb8a87]:hover { background: var(--color-bg-secondary);
}
.cl__msg-hit-room[data-v-c6bb8a87] {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.cl__msg-hit-preview[data-v-c6bb8a87] {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
[data-v-c6bb8a87] .cl-msg-hit__match {
  background: var(--color-bg-warning-primary);
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}
[data-v-c6bb8a87] .cl-msg-hit__sender {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-right: 4px;
}
[data-v-c6bb8a87] .cl-msg-hit__file-icon {
  vertical-align: middle;
  margin-right: 4px;
  color: var(--color-icon-tertiary);
}

/* ─── Take-over strip ─── */
.cl__takeover[data-v-c6bb8a87] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-primary);
  background: var(--color-bg-brand-primary);
}
.cl__takeover-text[data-v-c6bb8a87] {
  flex: 1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}
/* Take-over button is the DS <Button variant="primary"> — it owns its own
   surface/hover/disabled/loading; the strip only reserves it as a flex-none
   child (Button is inline-flex so it won't stretch). */
.cl__takeover-btn[data-v-c6bb8a87] { flex: none;
}

/* Anchor for the `R` badge above the empty-state "Clear filters" button.
   The button is a DS <Button>, so we can't make IT the positioned ancestor
   without reaching into its internals. */
.cl__empty-hint[data-v-c6bb8a87] {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
}

.room-skel[data-v-acbaf04f] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--color-bg-primary);
}

/* ── Header ── */
.room-skel__header[data-v-acbaf04f] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-primary);
  flex: none;
}
.room-skel__avatar[data-v-acbaf04f] {
  width: 40px;
  height: 40px;
  flex: none;
}
.room-skel__id[data-v-acbaf04f] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.room-skel__name[data-v-acbaf04f] {
  width: 160px;
  height: 14px;
}
.room-skel__sub[data-v-acbaf04f] {
  width: 96px;
  height: 10px;
}

/* ── Thread ── */
.room-skel__thread[data-v-acbaf04f] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
  background: var(--color-bg-secondary);
}
.room-skel__bubble-row[data-v-acbaf04f] {
  display: flex;
}
.room-skel__bubble-row--left[data-v-acbaf04f] {
  justify-content: flex-start;
}
.room-skel__bubble-row--right[data-v-acbaf04f] {
  justify-content: flex-end;
}
.room-skel__bubble[data-v-acbaf04f] {
  height: 48px;
  max-width: 72%;
}

/* ── Composer ── */
.room-skel__composer[data-v-acbaf04f] {
  flex: none;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border-primary);
  background: var(--color-bg-primary);
}
.room-skel__composer-field[data-v-acbaf04f] {
  width: 100%;
  height: 44px;
  border-radius: 999px;
}

.atm__state[data-v-a632b681] { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 40px 12px; min-height: 150px;
}
.atm__state-icon[data-v-a632b681] { width: 48px; height: 48px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary); color: var(--color-icon-tertiary);
}
.atm__state-icon--err[data-v-a632b681] { background: var(--color-bg-error-primary); color: var(--color-icon-error-primary);
}
.atm__state-title[data-v-a632b681] { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);
}
.atm__state-desc[data-v-a632b681] { font-size: 0.75rem; color: var(--color-text-secondary); max-width: 300px;
}
.atm__list[data-v-a632b681] { display: flex; flex-direction: column; gap: 8px;
}
.atm__item[data-v-a632b681] { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg, 12px); cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease;
}
.atm__item[data-v-a632b681]:hover { background: var(--color-bg-secondary);
}
.atm__item[data-state="checked"][data-v-a632b681] { background: var(--color-bg-brand-primary); border-color: var(--color-border-brand-secondary, var(--color-border-brand-primary));
}
.atm__radio[data-v-a632b681] { flex: none;
}
.atm__thumb[data-v-a632b681] { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-bg-tertiary); display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.atm__thumb img[data-v-a632b681] { width: 100%; height: 100%; object-fit: cover;
}
.atm__col[data-v-a632b681] { display: flex; flex-direction: column; min-width: 0; gap: 2px;
}
.atm__name[data-v-a632b681] { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atm__meta[data-v-a632b681] { font-size: 0.6875rem; color: var(--color-text-tertiary);
}
.atm__summary[data-v-a632b681] { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg, 12px); overflow: hidden;
}
.atm__summary > div[data-v-a632b681] { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px;
}
.atm__summary > div + div[data-v-a632b681] { border-top: 1px solid var(--color-border-primary);
}
.atm__summary dt[data-v-a632b681] { margin: 0; font-size: 0.8125rem; color: var(--color-text-tertiary);
}
.atm__summary dd[data-v-a632b681] { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); text-align: right;
}

/* Sizing + clip only. When nested in a DS `PopoverContent` the container
   already supplies bg/border/radius/shadow; the inline (composer) mount has no
   such wrapper, so the surface tokens live here and the popover wrapper zeroes
   its own padding. */
.ep-panel[data-v-d4b3e292] {
  width: 20rem;
  max-width: calc(100vw - 1.5rem);
  overflow: hidden;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  font-family: var(--font-sans);
}
.ep-search[data-v-d4b3e292] {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
}
.ep-tabs[data-v-d4b3e292] {
  display: flex;
  gap: 0;
  padding: 0.25rem;
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
}
.ep-tab[data-v-d4b3e292] {
  flex: 1;
  font-size: var(--text-base);
  opacity: 0.6;
}
.ep-tab[data-v-d4b3e292]:hover {
  opacity: 1;
}
.ep-tab--active[data-v-d4b3e292] {
  opacity: 1;
  background: var(--color-bg-brand-primary);
  color: var(--color-text-brand-primary);
}
.ep-grid[data-v-d4b3e292] {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.125rem;
  padding: 0.5rem;
  max-height: 16.25rem;
  overflow-y: auto;
}
.ep-cell[data-v-d4b3e292] {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-xl, 1.25rem);
  line-height: 1;
  padding: 0;
  border-radius: var(--radius-sm);
  transition: background 80ms;
}
.ep-cell[data-v-d4b3e292]:hover {
  background: var(--color-bg-secondary);
}
.ep-cell[data-v-d4b3e292]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: -2px;
}
.ep-empty[data-v-d4b3e292] {
  padding: 1.5rem 0.625rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}
.ep-hint[data-v-d4b3e292] {
  padding: 0.375rem 0.625rem;
  border-top: 1px solid var(--color-border-primary);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
}
.ep-hint code[data-v-d4b3e292] {
  background: var(--color-bg-primary);
  padding: 0.0625rem 0.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, Menlo, Monaco, Consolas, monospace);
  color: var(--color-text-secondary);
}

/* The design hardcodes `--c-slate-300` / `--c-slate-700` / `--c-brand-300` for a
   permanently dark bubble. Ours can't: `bg-inverse` is slate-900 in the light
   theme but slate-50 in dark, so every ink here is derived from `text-inverse`
   (which flips with it) and the link swaps shade per theme. */
.tip-muted[data-v-d98a354b] {
  color: color-mix(in oklab, var(--color-text-inverse) 70%, transparent);
}
.tip-rule[data-v-d98a354b] {
  border-color: color-mix(in oklab, var(--color-text-inverse) 15%, transparent);
}
.tip-link[data-v-d98a354b] {
  color: var(--color-brand-300);
}
[data-theme='dark'] .tip-link[data-v-d98a354b] {
  color: var(--color-brand-800);
}

/* Upstream descriptions ship their own <strong>/<i>/<a>; scoped styles can't
   reach them through v-html without :deep. */
.act-desc[data-v-b7f8e3ee] strong {
  font-weight: 600;
  color: var(--color-text-primary);
}
.act-desc[data-v-b7f8e3ee] a {
  color: var(--color-brand-700);
  font-weight: 500;
  text-decoration: none;
  word-break: break-all;
}
.act-desc[data-v-b7f8e3ee] a:hover {
  text-decoration: underline;
}

/* `v-html` children carry no scope attribute, hence `:deep`. Sizes are relative
   to the 12px note body so a heading stays a note heading, not a page heading. */
.note-md[data-v-163f8c6b] > *:first-child {
  margin-top: 0;
}
.note-md[data-v-163f8c6b] > *:last-child {
  margin-bottom: 0;
}
.note-md[data-v-163f8c6b] p {
  margin: 0 0 8px;
}
.note-md[data-v-163f8c6b] h1,
.note-md[data-v-163f8c6b] h2,
.note-md[data-v-163f8c6b] h3,
.note-md[data-v-163f8c6b] h4,
.note-md[data-v-163f8c6b] h5,
.note-md[data-v-163f8c6b] h6 {
  margin: 10px 0 6px;
  font-weight: 600;
  line-height: 1.35;
}
.note-md[data-v-163f8c6b] h1 {
  font-size: 1.25em;
}
.note-md[data-v-163f8c6b] h2 {
  font-size: 1.15em;
}
.note-md[data-v-163f8c6b] h3 {
  font-size: 1.05em;
}
.note-md[data-v-163f8c6b] h4,
.note-md[data-v-163f8c6b] h5,
.note-md[data-v-163f8c6b] h6 {
  font-size: 1em;
}
.note-md[data-v-163f8c6b] ul,
.note-md[data-v-163f8c6b] ol {
  margin: 0 0 8px;
  padding-left: 18px;
}
.note-md[data-v-163f8c6b] ul {
  list-style: disc;
}
.note-md[data-v-163f8c6b] ol {
  list-style: decimal;
}
.note-md[data-v-163f8c6b] li {
  margin: 2px 0;
}
.note-md[data-v-163f8c6b] blockquote {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--color-border-primary);
  color: var(--color-text-secondary);
}
.note-md[data-v-163f8c6b] code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--color-bg-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}
.note-md[data-v-163f8c6b] a {
  color: var(--color-text-link, var(--color-brand-700));
  text-decoration: underline;
}
.note-md[data-v-163f8c6b] hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid var(--color-border-primary);
}
.note-md[data-v-163f8c6b] strong {
  font-weight: 600;
}

.rm-head[data-v-4fade33e] { display: flex; align-items: center; gap: 12px;
}
.rm-title[data-v-4fade33e] { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--color-text-primary);
}
.rm-desc[data-v-4fade33e] { margin: 0 0 14px; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-secondary);
}
.rm-opts[data-v-4fade33e] { margin-top: 14px; display: flex; flex-direction: column; gap: 8px;
}

.up-queue[data-v-7b753100] {
  margin-left: 6px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.up-body[data-v-7b753100] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.up-stage[data-v-7b753100] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-media[data-v-7b753100] {
  width: 100%;
  height: 240px;
  max-height: 40vh;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-subtle, var(--color-bg-secondary));
}
.up-audio[data-v-7b753100] {
  width: 100%;
}
.up-file[data-v-7b753100] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  width: 100%;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-subtle, var(--color-bg-secondary));
  color: var(--color-text-secondary);
}
.up-meta[data-v-7b753100] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.up-meta__name[data-v-7b753100] {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-meta__size[data-v-7b753100] {
  flex: none;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
/* Thumbnail strip */
.up-strip[data-v-7b753100] {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 2px;
}
.up-thumb[data-v-7b753100] {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm, 6px);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.up-thumb--active[data-v-7b753100] {
  border-color: var(--color-border-brand, var(--color-border-focus));
}
.up-thumb__img[data-v-7b753100] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.up-thumb__remove[data-v-7b753100] {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

/* ── Dialog surface sizing (match Claude Design ds-modal) ─────
   All WAG surfaces compose the DS section atoms (DialogHeader/Body/Footer,
   each p-5) so DialogContent is set `:padded="false"` in the template to
   drop its own p-6+gap-5 — that double padding was pushing the section
   borders inward and squeezing the content column (the "cramped" look).
   Width: the Claude Design channel-select + create ds-modal card is ~440px;
   ui-vue3 size="sm" maps to 420px, so nudge to the mock's 440px here
   (scoped class beats the cva `max-w-[420px]` utility). */
.wag-dialog[data-v-ad6fad0e] {
  max-width: 440px;
}
/* Edit Group Information card — the mock sizes it at 460px. */
.wag-edit-dialog[data-v-ad6fad0e] {
  max-width: 460px;
}
/* Header: title-col top-aligned with the close button; DS DialogHeader
   already supplies p-5 (20) + border-bottom. */
.wag-header[data-v-ad6fad0e] {
  align-items: flex-start;
}
/* Body: DS DialogBody is p-5 (20 all sides). The mock tightens the top to
   ~12 so the body sits closer under the header (ds-modal__body paddingTop 12). */
.wag-body[data-v-ad6fad0e] {
  padding-top: 12px;
}

/* Group Information is the tall one: the WHOLE body scrolls as one column
   (design 39-wag.jsx `maxHeight: calc(100vh - 48px)` + body `overflowY:auto`),
   so header and footer stay pinned and no sub-list gets its own scrollbar. */
.wag-info-dialog[data-v-ad6fad0e] {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}
.wag-body--info[data-v-ad6fad0e] {
  flex: 1;
  min-height: 0;
  padding-top: 14px;
  overflow-y: auto;
}

/* ── Shared header bits ─────────────────────────────────────── */
.wag-titlecol[data-v-ad6fad0e] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wag-subtitle[data-v-ad6fad0e] {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-tertiary);
}
.wag-header-lead[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ── Channel picker: empty state ────────────────────────────── */
.wag-picker-empty[data-v-ad6fad0e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0 8px;
  text-align: center;
}
.wag-picker-empty__icon[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}
.wag-picker-empty__title[data-v-ad6fad0e] {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.wag-picker-empty__hint[data-v-ad6fad0e] {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* ── Channel picker: list ───────────────────────────────────── */
.wag-channel-list[data-v-ad6fad0e] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.wag-channel-row[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 120ms var(--ease-standard, ease),
    border-color 120ms var(--ease-standard, ease);
}
.wag-channel-row[data-v-ad6fad0e]:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-tertiary);
}
.wag-channel-row[data-v-ad6fad0e]:focus-visible {
  outline: 2px solid var(--color-text-brand-primary);
  outline-offset: 2px;
}
.wag-channel-row__badge[data-v-ad6fad0e] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.wag-channel-row__text[data-v-ad6fad0e] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wag-channel-row__name[data-v-ad6fad0e] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wag-channel-row__type[data-v-ad6fad0e] {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--color-text-tertiary);
}
.wag-channel-row__chevron[data-v-ad6fad0e] {
  flex: none;
  color: var(--color-text-tertiary);
}

/* ── Create form ────────────────────────────────────────────── */
.wag-form[data-v-ad6fad0e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Group information ──────────────────────────────────────── */
.wag-info[data-v-ad6fad0e] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wag-hero[data-v-ad6fad0e] {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
/* Class+attr scoped specificity beats the DS preset's single-class size. */
.wag-hero__avatar[data-v-ad6fad0e] {
  width: 64px;
  height: 64px;
  min-width: 64px;
  flex: none;
}
.wag-hero__body[data-v-ad6fad0e] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.wag-hero__name[data-v-ad6fad0e] {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wag-hero__meta[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-tertiary);
}
.wag-hero__desc[data-v-ad6fad0e] {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.wag-hero__namerow[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.wag-hero__edit[data-v-ad6fad0e] {
  flex: none;
  color: var(--color-text-brand-primary);
}

/* ── Group photo (label wraps the avatar + hidden file input) ─ */
.wag-photo[data-v-ad6fad0e] {
  position: relative;
  flex: none;
  cursor: pointer;
  line-height: 0;
}
.wag-photo__badge[data-v-ad6fad0e] {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-brand-secondary);
  color: var(--color-text-on-brand);
  border: 2px solid var(--color-bg-primary);
}
.wag-photo__input[data-v-ad6fad0e] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* The label is the trigger, so mirror the input's focus ring onto the avatar. */
.wag-photo:focus-within .wag-hero__avatar[data-v-ad6fad0e] {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-full, 9999px);
}
.wag-photo__error[data-v-ad6fad0e] {
  margin: -10px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-error-primary);
}

/* ── Invite link row ────────────────────────────────────────── */
.wag-invite[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wag-invite__input[data-v-ad6fad0e] {
  flex: 1;
  min-width: 0;
}
.wag-invite__copy[data-v-ad6fad0e] {
  flex: none;
}
.wag-section[data-v-ad6fad0e] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wag-section__title[data-v-ad6fad0e] {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* No inner scroll — the dialog body owns it (see .wag-body--info). */
.wag-participants[data-v-ad6fad0e] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wag-participant[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.wag-participant__avatar[data-v-ad6fad0e] {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: none;
}
.wag-participant__body[data-v-ad6fad0e] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wag-participant__namerow[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wag-participant__name[data-v-ad6fad0e] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
/* `@handle · phone` — the handle is the only part allowed to truncate. */
.wag-participant__sub[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 1px;
  font-size: 11px;
  line-height: 15px;
}
.wag-participant__handle[data-v-ad6fad0e] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.wag-participant__muted[data-v-ad6fad0e] {
  flex: none;
  color: var(--color-text-tertiary);
}
/* Per-row actions: agent toggle + remove (design §5). */
.wag-participant__actions[data-v-ad6fad0e] {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wag-participant__agent[data-v-ad6fad0e] {
  color: var(--color-text-brand-secondary);
}
.wag-participant__agent.is-on[data-v-ad6fad0e] {
  color: var(--color-text-error-primary);
}
.wag-participant__remove[data-v-ad6fad0e] {
  color: var(--color-text-error-primary);
}

/* Muted helper text — shared by the standalone Add / Remove Customer surfaces
   (invite-link-pending hint · empty removable list). */
.wag-add__cap[data-v-ad6fad0e] {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}
.wag-contacts__empty[data-v-ad6fad0e] {
  padding: 14px 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

/* ── Standalone "Remove Customer" pick-list ─────────────────── */
.wag-remove-list[data-v-ad6fad0e] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
}
.wag-remove-row[data-v-ad6fad0e] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-primary);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 120ms var(--ease-standard, ease),
    border-color 120ms var(--ease-standard, ease);
}
.wag-remove-row[data-v-ad6fad0e]:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-tertiary);
}
.wag-remove-row[data-v-ad6fad0e]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
.wag-remove-row__icon[data-v-ad6fad0e] {
  flex: none;
  color: var(--color-text-error-primary);
}

/* ── Info footer: Delete (left) · Close (right) ─────────────── */
.wag-info-footer[data-v-ad6fad0e] {
  justify-content: space-between;
}

.bc-preview[data-v-c241c058] {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.bc-preview__head[data-v-c241c058] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-primary);
}
.bc-preview__title[data-v-c241c058] {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* WhatsApp wallpaper — WA product colour, not a DS token (mock BC_WA_WALLPAPER). */
.bc-preview__stage[data-v-c241c058] {
  background: #e7ded5;
  padding: 20px;
  display: flex;
  justify-content: center;
}
.bc-preview__stage--empty[data-v-c241c058] {
  min-height: 260px;
}
.bc-preview__placeholder[data-v-c241c058] {
  margin: auto;
  max-width: 200px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

/* WhatsApp-replica bubble palette — INTENTIONALLY raw hex, not DS tokens.
   This preview mirrors the real WhatsApp client bubble, which is always a
   fixed-light card regardless of app theme; DS text/border tokens would invert
   under `data-theme="dark"` over a light bubble and break the replica. Kept as
   WA product colours (bubble #ffffff, text #0f172a, timestamp #667085, dividers
   #e5e7eb) alongside the wallpaper #e7ded5 and link #027eb5 above. */
.bc-bubble[data-v-c241c058] {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  align-self: flex-start;
  color: #0f172a;
}
.bc-bubble__media[data-v-c241c058] {
  padding: 6px;
}
.bc-bubble__media-img[data-v-c241c058] {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.bc-bubble__media-doc[data-v-c241c058] {
  width: 100%;
  height: 150px;
  border: none;
  border-radius: 8px;
  display: block;
}
.bc-bubble__media-fallback[data-v-c241c058] {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  color: var(--color-icon-tertiary, var(--color-text-tertiary));
}
.bc-bubble__content[data-v-c241c058] {
  padding: 10px 12px 8px;
}
.bc-bubble__content--media[data-v-c241c058] {
  padding: 4px 12px 8px;
}
.bc-bubble__header-text[data-v-c241c058] {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bc-bubble__body[data-v-c241c058] {
  margin: 0;
  font-size: 0.875rem;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bc-bubble__body--after-header[data-v-c241c058] {
  margin-top: 8px;
}
.bc-bubble__timerow[data-v-c241c058] {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.bc-bubble__time[data-v-c241c058] {
  font-size: 0.6875rem;
  color: #667085;
  font-variant-numeric: tabular-nums;
}
.bc-bubble__buttons[data-v-c241c058] {
  border-top: 1px solid #e5e7eb;
}
.bc-bubble__btn-divider[data-v-c241c058] {
  height: 1px;
  background: #e5e7eb;
}
/* WhatsApp link blue — WA product colour, not a DS token (mock BC_WA_LINK). */
.bc-bubble__btn[data-v-c241c058] {
  all: unset;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: #027eb5;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 18px;
}

/* Carousel row (surface c) — sibling below the bubble, full stage width so
   the DS carousel's own horizontal scroll-snap can work at ~360px (AC-11). */
.bc-carousel-wrap[data-v-c241c058] {
  width: 100%;
  max-width: 300px;
  margin-top: 12px;
}

/* Two-panel width — mock is 840px; DS size="xl" is 800px, nudge up (scoped
   class beats the cva max-w utility). Cap the height so the left column scrolls. */
.bc-dialog[data-v-e380560b] {
  max-width: 840px;
  width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.bc-header[data-v-e380560b] {
  align-items: flex-start;
}
.bc-split[data-v-e380560b] {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.bc-form[data-v-e380560b] {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--spacing-lg, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bc-preview-col[data-v-e380560b] {
  width: 320px;
  flex: none;
  border-left: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
  overflow-y: auto;
  padding: var(--spacing-lg, 24px);
}
.bc-banner[data-v-e380560b] {
  width: 100%;
  /* Sibling of scrollable flex-col form column — without this, flex compression
     shrinks the Banner below its content height and the description overflows
     onto the form background. */
  flex-shrink: 0;
}
.bc-learn-more[data-v-e380560b] {
  color: var(--color-text-brand-primary);
  font-weight: 600;
  text-decoration: none;
}
.bc-learn-more[data-v-e380560b]:hover {
  text-decoration: underline;
}

/* Select trigger holds value (left) + chevron (right). */
.bc-select-trigger[data-v-e380560b] {
  justify-content: space-between;
}
.bc-loading[data-v-e380560b] {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* Searchable template row: name + muted WABA suffix. */
.bc-tpl-row[data-v-e380560b] {
  display: flex;
  gap: 4px;
  min-width: 0;
  align-items: baseline;
}
.bc-tpl-row__name[data-v-e380560b] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
}
.bc-tpl-row__waba[data-v-e380560b] {
  flex: none;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}
.bc-tabs[data-v-e380560b] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bc-tabpanel[data-v-e380560b] {
  padding-top: 4px;
}
.bc-var-list[data-v-e380560b] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bc-tab-empty[data-v-e380560b] {
  margin: 0;
  padding: 20px 8px;
  text-align: center;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

/* Carousel per-card variable groups (surface c) — single-column, stacked;
   no fixed widths so the group stays usable at ~360px (AC-11). */
.bc-card-list[data-v-e380560b] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bc-card-group[data-v-e380560b] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 8px);
}
.bc-card-group__title[data-v-e380560b] {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Preview column stacks under the form on narrow widths (spec responsive note). */
@media (max-width: 640px) {
.bc-split[data-v-e380560b] {
    flex-direction: column;
}
.bc-preview-col[data-v-e380560b] {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--color-border-primary);
}
}

.tfo[data-v-5c18f757] {
  /* NOTE: no `position: relative` here — DialogContent already carries the DS
     `fixed left-1/2 top-1/2 -translate-*` centering utilities, and a scoped
     `.tfo` rule (higher specificity than the layered `.fixed` utility) would
     override them and drop the dialog into normal flow (renders at the bottom
     of <body>). `fixed` is itself a containing block for the absolutely
     positioned `.tfo__close`, so relative positioning is unnecessary. */
  width: 520px;
  max-width: 92vw;
  /* Clip the full-bleed header illustration to the dialog's rounded corners. */
  overflow: hidden;
}
.tfo__close[data-v-5c18f757] {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius-md, 8px);
  color: var(--color-icon-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
}
.tfo__close[data-v-5c18f757]:hover {
  background: var(--color-bg-secondary);
  color: var(--color-icon-primary);
}
.tfo__body[data-v-5c18f757] {
  padding: 24px 28px 28px;
  text-align: center;
}
.tfo__illus[data-v-5c18f757] {
  /* Full-bleed header banner (matches the production
     ProductTwoFactorOnboarding: `<img style="width:100%;height:100%">`),
     not a small centered thumbnail — this is what gives the dialog its size. */
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.tfo__title[data-v-5c18f757] {
  margin: 0 0 10px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.tfo__desc[data-v-5c18f757] {
  margin: 0 0 24px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.tfo__actions[data-v-5c18f757] {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.exm__desc[data-v-0724aa84] {
  margin: 0 0 16px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.exm__label[data-v-0724aa84] {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.exm__field-icon[data-v-0724aa84] {
  color: var(--color-icon-tertiary, var(--color-icon-secondary));
  flex: none;
}
.exm__err[data-v-0724aa84] {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-danger-primary, var(--color-text-error));
}

.cmm__desc[data-v-51a47680] {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.cmm__warn[data-v-51a47680] {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-danger-primary, var(--color-text-error));
}
.cmm__label[data-v-51a47680] {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.cmm__field-icon[data-v-51a47680] {
  color: var(--color-icon-tertiary, var(--color-icon-secondary));
  flex: none;
}
.cmm__results[data-v-51a47680] {
  margin-top: 12px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cmm__status[data-v-51a47680] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}
.cmm__status--error[data-v-51a47680] {
  color: var(--color-text-danger-primary, var(--color-text-error));
}
.cmm__item[data-v-51a47680] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-stroke-primary, var(--color-border-primary));
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface-primary, var(--color-bg-primary));
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.cmm__item[data-v-51a47680]:hover {
  background: var(--color-surface-secondary, var(--color-bg-secondary));
  border-color: var(--color-stroke-brand-primary, var(--color-border-brand));
}
.cmm__item[data-v-51a47680]:focus-visible {
  outline: 2px solid var(--color-stroke-brand-primary, var(--color-border-brand));
  outline-offset: 2px;
}
.cmm__item--selected[data-v-51a47680],
.cmm__item--selected[data-v-51a47680]:hover {
  background: var(--color-surface-brand-subtle, var(--color-bg-brand-subtle));
  border-color: var(--color-stroke-brand-primary, var(--color-border-brand));
}
.cmm__item-avatar[data-v-51a47680] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-surface-secondary, var(--color-bg-secondary));
  color: var(--color-icon-secondary);
}
.cmm__item-text[data-v-51a47680] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cmm__item-name[data-v-51a47680] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmm__item-meta[data-v-51a47680] {
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmm__item-dot[data-v-51a47680] {
  margin: 0 4px;
}

.apm__list[data-v-0985be33] {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.apm__status[data-v-0985be33] {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.apm__row[data-v-0985be33] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-primary);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.apm__row[data-v-0985be33]:hover:not(:disabled) {
  background: var(--color-bg-secondary);
}
.apm__row[data-v-0985be33]:disabled {
  opacity: 0.4;
  cursor: default;
}
.apm__row[data-v-0985be33]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
/* Design `08c-agent-flow.jsx:44` — selected = brand tint + brand border. */
.apm__row--selected[data-v-0985be33],
.apm__row--selected[data-v-0985be33]:hover:not(:disabled) {
  background: var(--color-bg-brand-primary);
  border-color: var(--color-border-brand-primary);
}
.apm__text[data-v-0985be33] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.apm__name[data-v-0985be33] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apm__meta[data-v-0985be33] {
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apm__trailing[data-v-0985be33] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.apm__count[data-v-0985be33] {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.apm__empty[data-v-0985be33] {
  padding: 32px 0 28px;
  text-align: center;
}
.apm__empty-icon[data-v-0985be33] {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 9999px;
  background: var(--color-bg-secondary);
  color: var(--color-icon-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apm__empty-title[data-v-0985be33] {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.apm__empty-sub[data-v-0985be33] {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}
/* Loading row for scroll-based auto-load (replaces the old explicit More
 * button). Non-interactive; sized to keep the list height stable during a
 * paged fetch. */
.apm__more-loading[data-v-0985be33] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto 2px;
  padding: 6px 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.apm__replace[data-v-0985be33] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.pdc[data-v-ba10dbf4] {
  /* NOTE: do NOT set `position` here — the DS `DialogContent` positions itself
     `fixed` + centered; a scoped `.pdc[data-v] { position: relative }` outranks
     the DS `.fixed` utility (specificity) and dropped the panel into the normal
     flow, rendering it far below the viewport (invisible modal). Layout-only. */
  width: 560px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdc__header[data-v-ba10dbf4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--color-border-secondary, var(--color-border-default));
}
.pdc__title[data-v-ba10dbf4] {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.pdc__close[data-v-ba10dbf4] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius-md, 8px);
  color: var(--color-icon-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
}
.pdc__close[data-v-ba10dbf4]:hover {
  background: var(--color-bg-secondary);
  color: var(--color-icon-primary);
}
.pdc__search[data-v-ba10dbf4] {
  padding: 16px 24px 8px;
}
.pdc__list[data-v-ba10dbf4] {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 20px;
  min-height: 200px;
}
.pdc__state[data-v-ba10dbf4] {
  margin: 0;
  text-align: center;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  padding: 40px 0;
  font-size: 0.875rem;
}
.pdc__state--error[data-v-ba10dbf4] {
  color: var(--color-text-danger, var(--color-text-error));
}
.pdc-card[data-v-ba10dbf4] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border-secondary, var(--color-border-default));
  border-radius: var(--radius-md, 8px);
  margin-bottom: 8px;
}
.pdc-card__thumb[data-v-ba10dbf4] {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.pdc-card__thumb img[data-v-ba10dbf4] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdc-card__detail[data-v-ba10dbf4] {
  flex: 1;
  min-width: 0;
}
.pdc-card__detail p[data-v-ba10dbf4] {
  margin: 0 0 4px;
  line-height: 1.4;
}
.pdc-card__title[data-v-ba10dbf4] {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
}
.pdc-card__subtitle[data-v-ba10dbf4] {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.pdc-card__desc[data-v-ba10dbf4] {
  font-size: 0.75rem;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdc-card__action[data-v-ba10dbf4] {
  flex-shrink: 0;
}

/* Neither DialogContent nor DialogBody constrains height, and the dialog is
   fixed + translate(-50%,-50%) — so an unbounded list runs off the top and
   bottom of a short viewport (laptop at 125% zoom) with no way to reach the
   rows. Scroll the body instead, keeping the header + footer pinned. */
.sc__body[data-v-2b98d13d] {
  max-height: min(60vh, 520px);
  overflow-y: auto;
}
.sc__intro[data-v-2b98d13d] {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.sc__section + .sc__section[data-v-2b98d13d] {
  margin-top: 20px;
}
.sc__section-title[data-v-2b98d13d] {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.sc__rows[data-v-2b98d13d] {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sc__row[data-v-2b98d13d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-primary);
}
.sc__row[data-v-2b98d13d]:last-child {
  border-bottom: none;
}
.sc__label[data-v-2b98d13d] {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.sc__keys[data-v-2b98d13d] {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.sc__combo[data-v-2b98d13d] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sc__plus[data-v-2b98d13d],
.sc__sep[data-v-2b98d13d] {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* Slightly more air around the "either/or" separator than around `+`, so the
   two levels of grouping stay visually distinct at a glance. */
.sc__sep[data-v-2b98d13d] {
  margin: 0 2px;
}

/* Key cap. Monospace + a bottom "edge" so it reads as a physical key rather
   than an inline code span. */
.sc__kbd[data-v-2b98d13d] {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--color-border-primary);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.ic-body[data-v-864d2d81] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ic-field[data-v-864d2d81] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ic-label[data-v-864d2d81] {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.ic-radios[data-v-864d2d81] {
  display: flex;
  gap: 32px;
  margin-top: 4px;
}
.ic-radio[data-v-864d2d81] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ic-radio label[data-v-864d2d81] {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  cursor: pointer;
}
.ic-counter[data-v-864d2d81] {
  align-self: flex-end;
  font-size: 0.75rem;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

.v3-root[data-v-0c8d842f] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.v3-shell[data-v-0c8d842f] {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg-primary);
  /* Anchor for the absolute drawers/scrims (info + rail) below desktop. */
  position: relative;
}
.v3-shell__list[data-v-0c8d842f] {
  width: 360px;
  min-width: 320px;
  flex: none;
  border-right: 1px solid var(--color-border-primary);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.v3-shell__center[data-v-0c8d842f] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Clipping column. Design writes `width var(--duration-base, 200ms) var(--ease-in-out, ease-in-out)`,
   and the two halves of that resolve in OPPOSITE directions:
     --duration-base  is NOT a DS token (the DS uses --motion-*), so the design
                      renders its 200ms fallback. ui-vue3 does define it, at 150ms,
                      so copying the literal would have quietly sped this up by a
                      third — `--duration-slow` is the ui-vue3 token worth 200ms.
     --ease-in-out    IS a DS token, cubic-bezier(0.65, 0, 0.35, 1), so the design
                      never renders the `ease-in-out` keyword (cubic-bezier(.42,0,.58,1)).
                      ui-vue3 has no equivalent → literal. */
.v3-shell__info-slide[data-v-0c8d842f] {
  width: 340px;
  flex: none;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  min-height: 0;
}
.v3-info-slide-enter-active[data-v-0c8d842f],
.v3-info-slide-leave-active[data-v-0c8d842f] {
  transition: width var(--duration-slow, 200ms) cubic-bezier(0.65, 0, 0.35, 1);
}
.v3-info-slide-enter-from[data-v-0c8d842f],
.v3-info-slide-leave-to[data-v-0c8d842f] {
  width: 0;
}
@media (prefers-reduced-motion: reduce) {
.v3-info-slide-enter-active[data-v-0c8d842f],
  .v3-info-slide-leave-active[data-v-0c8d842f] {
    transition: none;
}
}

/* Footprint of the closed info panel, used only to host the Ctrl+Alt+A
   preview wash. Inert: no background of its own and pointer-events are off, so
   it never intercepts a click on the chat underneath. */
.v3-shell__info-preview[data-v-0c8d842f] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  pointer-events: none;
  z-index: 2;
}
.v3-shell__info[data-v-0c8d842f] {
  width: 340px;
  min-width: 300px;
  flex: none;
  border-left: 1px solid var(--color-border-primary);
  /* Must not scroll: CustomerInfoPanel scrolls itself, so adding overflow-y here
     produces two scrollbars. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.v3-shell__empty[data-v-0c8d842f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: var(--color-bg-secondary);
}
.v3-shell__empty-icon[data-v-0c8d842f] {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-bg-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-brand-primary);
}
.v3-shell__empty-title[data-v-0c8d842f] {
  margin: 0;
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 600;
  color: var(--color-text-primary);
}
.v3-shell__empty-sub[data-v-0c8d842f] {
  margin: 0;
  max-width: 300px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* ── Drawers + scrims (shared by tablet/mobile) ─────────────────────── */
.v3-scrim[data-v-0c8d842f] {
  position: absolute;
  inset: 0;
  background: var(--color-bg-overlay-primary, rgba(6, 12, 18, 0.45));
  z-index: 70;
}

/* Info panel as a right slide-in drawer (only the .is-drawer variant is
   absolutely positioned + elevated; the desktop inline column is untouched). */
.v3-shell__info.is-drawer[data-v-0c8d842f] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 86%;
  z-index: 71;
  box-shadow: -12px 0 32px -18px rgba(0, 0, 0, 0.55);
}

/* Drawer slide transition — applies ONLY to the .is-drawer element, so the
   desktop inline column mounts without a transform. */
.v3-drawer-r-enter-active.is-drawer[data-v-0c8d842f],
.v3-drawer-r-leave-active.is-drawer[data-v-0c8d842f] {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.v3-drawer-r-enter-from.is-drawer[data-v-0c8d842f],
.v3-drawer-r-leave-to.is-drawer[data-v-0c8d842f] {
  transform: translateX(100%);
}
.v3-fade-enter-active[data-v-0c8d842f],
.v3-fade-leave-active[data-v-0c8d842f] { transition: opacity 260ms ease;
}
.v3-fade-enter-from[data-v-0c8d842f],
.v3-fade-leave-to[data-v-0c8d842f] { opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.v3-drawer-r-enter-active.is-drawer[data-v-0c8d842f],
  .v3-drawer-r-leave-active.is-drawer[data-v-0c8d842f],
  .v3-fade-enter-active[data-v-0c8d842f],
  .v3-fade-leave-active[data-v-0c8d842f] { transition: none;
}
}

/* ── Tablet (768–1023px): list + chat inline; info is a drawer (via
      .is-drawer above), so the 3rd column never squeezes the chat. ─────── */
.v3-shell.is-tablet .v3-shell__list[data-v-0c8d842f] {
  width: 300px;
  min-width: 280px;
}

/* ── Mobile (<768px): one pane at a time + rail/info as overlays ───────── */
.v3-shell.is-mobile .v3-shell__list[data-v-0c8d842f] {
  width: 100%;
  min-width: 0;
  border-right: none;
}
.v3-shell.is-mobile.pane-chat .v3-shell__list[data-v-0c8d842f] { display: none;
}
.v3-shell.is-mobile.pane-list .v3-shell__center[data-v-0c8d842f] { display: none;
}
.v3-shell.is-mobile .v3-shell__info.is-drawer[data-v-0c8d842f] { width: 86%;
}

/* BrandRail is no longer rendered inside this shell (see AppLayout /
   BrandRailHost), so its mobile slide-in drawer treatment now lives there
   too — nothing left to style here. */

/* Colors resolve from the @qiscus/ui-vue3 design-system tokens so the widget
   follows the inbox light/dark theme (html[data-theme]); the hex values are
   light-mode fallbacks for when the token layer isn't loaded. */
.acw-trigger[data-v-a1d1bb34] {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg-brand-secondary, #27b199);
  color: var(--color-icon-on-brand, #fff);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.08),
    0 6px 16px -4px rgba(39, 177, 153, 0.45);
  z-index: 550;
  transition: background 160ms, transform 160ms, box-shadow 160ms;
}
.acw-trigger[data-v-a1d1bb34]:hover {
  background: var(--color-bg-brand-hover, #229584);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.1),
    0 10px 22px -4px rgba(39, 177, 153, 0.5);
}
.acw-trigger[data-v-a1d1bb34]:active { transform: translateY(1px); cursor: grabbing;
}
/* Signal draggability once the user has moved the trigger off the
   default anchor — helps agents discover the drag behavior. */
.acw-trigger--custom-pos[data-v-a1d1bb34] { cursor: grab;
}
.acw-trigger--custom-pos[data-v-a1d1bb34]:active { cursor: grabbing;
}

/* `.acw-panel__close` is still used by the separate app window's (surface
   C, `.acw-separate`) own close button below — that surface isn't part of
   this drawer conversion, so its markup/styling is untouched. */
.acw-panel__close[data-v-a1d1bb34] {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-icon-secondary, #565656);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
  transition: background 120ms, color 120ms;
}
.acw-panel__close[data-v-a1d1bb34]:hover { background: var(--color-bg-secondary, #f1f3f5); color: var(--color-icon-primary, #1c2028);
}

/* Apps-list drawer (surface B, design spec §5.2/§9) — DrawerRoot/DrawerContent
   from @qiscus/ui-vue3 own the slide/overlay/close mechanics, header layout,
   and title/description typography; these classes only shape the bits that
   aren't already covered by a DS component (the back chevron, the app list,
   the empty state). */
.acw-drawer__back[data-v-a1d1bb34] {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-icon-secondary, #565656);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}
.acw-drawer__back[data-v-a1d1bb34]:hover { background: var(--color-bg-secondary, #f1f3f5); color: var(--color-icon-primary, #1c2028);
}
.acw-drawer__body[data-v-a1d1bb34] {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  padding: 0;
}
.acw-drawer__iframe[data-v-a1d1bb34] {
  flex: 1;
  border: 0;
  width: 100%;
  height: 100%;
}

/* Flat apps list (design spec §5.2/§11.4 — v1 default, no category
   grouping). */
.acw-drawer__list[data-v-a1d1bb34] {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.acw-drawer__row[data-v-a1d1bb34] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border-primary, #f1f3f5);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
}
.acw-drawer__row[data-v-a1d1bb34]:last-child { border-bottom: 0;
}
.acw-drawer__row[data-v-a1d1bb34]:hover { background: var(--color-bg-secondary, #fafafa);
}
.acw-drawer__tile[data-v-a1d1bb34] {
  /* Normalize every addon icon into a uniform square tile (spec §5.2:
     "ikon dinormalkan ke kotak seragam") — marketplace icons arrive as
     small mixed-shape rasters and looked inconsistent laid bare. */
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-bg-secondary, #f5f6f7);
  border: 1px solid var(--color-border-primary, #f1f3f5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.acw-drawer__tile-img[data-v-a1d1bb34] {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.acw-drawer__row-name[data-v-a1d1bb34] {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary, #1c2028);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acw-drawer__row-chevron[data-v-a1d1bb34] {
  flex: none;
  color: var(--color-icon-tertiary, #a3a9ae);
}

/* No apps installed (design spec §5.2/§10 — the widget stays visible and
   this fills the drawer instead of a silently-empty panel). */
.acw-drawer__empty[data-v-a1d1bb34] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px 28px;
}
.acw-drawer__empty-icon[data-v-a1d1bb34] {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--color-bg-info-primary, #e6f3ff);
  color: var(--color-icon-info, #2b7fd6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.acw-drawer__empty-title[data-v-a1d1bb34] {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #1c2028);
}
.acw-drawer__empty-text[data-v-a1d1bb34] {
  margin: 0 0 4px;
  max-width: 240px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary, #565656);
}
/* Separate-panel addon — floating frame, used by addons that declare
   `is_seperate: true` (e.g. MiiTel's dial pad). Legacy's wrapper
   (`.ACW__widget-iframe`) has NO fixed width or height at all — it's
   sized purely by its `<iframe>` child (a default 400x600 CSS rule, or
   whatever size the addon requests via `iframe-set-size`). Mirror that
   exactly: no fixed size on the wrapper, only a default fallback on the
   iframe, so the box hugs whatever size the iframe ends up at on both
   axes — zero dead space, whether the addon asks for 400x600 or a
   compact 200x480 (MiiTel's own login-screen footprint). Anchored
   ABOVE the trigger (`.acw-trigger`: right 20px, bottom 20px, 48px
   tall), not on top of it — picking a separate-panel addon hides the
   drawer but NOT the trigger (`addons.selectAddon` only closes the
   drawer, see the store), so this window and the trigger are visible
   at the same time and must not overlap. */
.acw-separate[data-v-a1d1bb34] {
  position: fixed;
  right: 20px;
  bottom: 84px;
  max-width: 92vw;
  max-height: 90vh;
  background: var(--color-bg-primary, #fff);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.06),
    0 12px 40px -8px rgba(16, 24, 40, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 545;
  overflow: hidden;
}
.acw-separate__header[data-v-a1d1bb34] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-primary, #f1f3f5);
  /* Matches the drawer title's scale (design spec §9.2: 14px/20px semibold
     for the app-window title) so the hand-off from drawer → app window
     doesn't jump between two unrelated type sizes. */
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text-primary, #1c2028);
}
.acw-separate__iframe[data-v-a1d1bb34] {
  border: 0;
  width: 400px;
  height: 600px;
}

/* ui-vue3 field px-pin — the ONLY rule that must stay in CSS. It overrides the
   DS Input/PasswordInput's rem-based radius/height/padding with the settings
   14px-root pixel scale, and it has to out-order the ui-vue3 dist stylesheet on
   the same element; a plain utility class could lose that cascade. Everything
   else in this tab is now co-located Tailwind. */
.settings-feature .ai-field[data-v-320f34fe] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Field box px-pin — the settings host <html> is 14px, so ui-vue3's rem field
   metrics render smaller AND the `.settings-feature` compat radius scale hijacks
   `rounded-xl` (→20) into a pill. Re-assert the DS-canonical box in literal px
   (all four properties, per the SSO/properties reference). radius 12 = DS
   radius-md; without it the field renders pill-shaped. */
.settings-feature .tg-field[data-v-c0e0b9d3] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Manage icon button (DS IconButton size 32, danger). `all:unset` reset has no
   Tailwind equivalent, so it stays in CSS. */
.tg-iconbtn[data-v-c0e0b9d3] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-secondary, #4b5563);
}
.tg-iconbtn[data-v-c0e0b9d3]:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
}
.tg-iconbtn[data-v-c0e0b9d3]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tg-iconbtn--danger[data-v-c0e0b9d3] {
  color: var(--color-text-error-primary, #dc2626);
}
.tg-iconbtn--danger[data-v-c0e0b9d3]:hover:not(:disabled) {
  background: var(--color-bg-error-primary);
  color: var(--color-text-error-primary);
}

/* Add-tag Dialog close button (`all:unset` reset). */
.tg-modal-close[data-v-c0e0b9d3] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.tg-modal-close[data-v-c0e0b9d3]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

/* PaginationCursor buttons — ui-vue3's `paginationItemBase` uses `rounded-lg`,
   which the `.settings-feature` compat scale hijacks to 16px → near-circular at
   36px. Pin back to the DS squircle (radius-sm 8). Unlayered scoped :deep beats
   the layered Tailwind utility. (Same fix as templates round-3.) */
.settings-feature .tg-pager[data-v-c0e0b9d3] button {
  border-radius: var(--radius-sm, 8px);
}

/* ui-vue3 field px-pin — the settings host <html> is 14px, so ui-vue3's rem
   field metrics render smaller; re-assert the DS-canonical box in literal px
   (radius-md 12 + 44px + 12px side padding). Prefixed `.settings-feature`
   (0,2,0) so it beats ui-vue3's utilities without !important. Omitting the
   border-radius is the pill-field bug (compat --radius-xl hijacks rounded-xl). */
.settings-feature .pd-field[data-v-7330f83c] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Field box px-pin — the settings host <html> is 14px, so ui-vue3's rem field
   metrics render smaller; re-assert the DS-canonical box in literal px. All four
   properties are required: `settings-token-shim` hijacks the radius scale so a
   `rounded-xl` field renders at 20px (pill) unless border-radius is re-pinned. */
.settings-feature .cb-field[data-v-45eee5e5] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Manage (gear) icon button — `all: unset` has no utility equivalent, so the
   reset stays in CSS. Colours are the DS-neutral IconButton (icon-secondary,
   hover icon-primary on bg-secondary). */
.cb-iconbtn[data-v-45eee5e5] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-secondary, #4b5563);
}
.cb-iconbtn[data-v-45eee5e5]:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}
.cb-iconbtn[data-v-45eee5e5]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Only genuinely-hard rules remain — everything else is Tailwind-first utilities
   (see the template). Kept here: the ui-vue3 field px-pin (needs the
   `.settings-feature` prefix to beat ui-vue3's rem utilities) and the two
   `all:unset` native icon-buttons (no utility equivalent). */

/* Field box px-pin — the settings host <html> is 14px, so ui-vue3's rem field
   metrics render smaller; re-assert the DS-canonical box in literal px. The
   border-radius MUST be pinned too: settings-token-shim.css hijacks `--radius-xl`→20
   so the ui-vue3 field (rounded-xl = radius-md in ui-vue3's scale) would render
   as a 20px pill without this. DS field = radius-md 12 / 44 tall / 12 side pad. */
.settings-feature .pp-field[data-v-8491e388] {
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 12px;
}

/* Manage icon buttons (size 32) — DS ghost IconButton. Edit = neutral (DS ghost
   default), Delete = danger. `all:unset` has no utility equivalent, so this stays
   in CSS. */
.pp-iconbtn[data-v-8491e388] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-secondary, #4b5563);
}
.pp-iconbtn[data-v-8491e388]:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}
.pp-iconbtn[data-v-8491e388]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.pp-iconbtn--danger[data-v-8491e388] {
  color: var(--color-text-error-primary, #dc2626);
}
.pp-iconbtn--danger[data-v-8491e388]:hover:not(:disabled) {
  background: var(--color-bg-error-primary);
  color: var(--color-text-error-primary);
}

/* Dialog close (all:unset — no utility equivalent). DS: icon-secondary, radius-sm. */
.pp-modal-close[data-v-8491e388] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-secondary, #4b5563);
}
.pp-modal-close[data-v-8491e388]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

/* Field box px-pin — the ONLY rule that must stay in CSS. The settings host
   <html> is 14px, so ui-vue3's rem field metrics render smaller and the
   settings-token-shim `--radius-xl` hijack rounds the box to a pill; re-assert the
   DS-canonical box in literal px (radius-md 12 + h44 + 12px inline pad), same as
   the SSO/app-info/predefined islands. `.settings-feature` prefix (0,2,0) beats
   ui-vue3's own utilities without `!important`. */
.settings-feature .al-field[data-v-7e147a34] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Field/textarea box px-pin — the settings host <html> is 14px, so ui-vue3's
   rem field metrics render smaller AND compat --radius-xl (20) hijacks the
   field's rounded-xl into a pill; re-assert the DS-canonical box in literal px
   (all FOUR properties — omitting border-radius is the pill-field bug). */
.settings-feature .tp-field[data-v-c6159f7f] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}
.settings-feature .tp-textarea[data-v-c6159f7f] {
  border-radius: 12px;
  min-height: 96px;
}

/* PaginationCursor nav buttons use ui-vue3 `rounded-lg` (DS = 8px), but the
   settings compat scope redefines --radius-lg to 16px, hijacking the 36px
   buttons into near-circles. Pin them back to the DS 8px squircle. */
.settings-feature .tp-pager[data-v-c6159f7f] button {
  border-radius: var(--radius-sm, 8px);
}

/* Manage icon buttons (size 32; `all:unset` has no utility). The Quick Replies
   design mock shows the edit action in the brand tint; delete → error. */
.tp-iconbtn[data-v-c6159f7f] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-brand-primary, #1a7f6f);
}
.tp-iconbtn[data-v-c6159f7f]:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-brand-primary, #1a7f6f);
}
.tp-iconbtn[data-v-c6159f7f]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tp-iconbtn--danger[data-v-c6159f7f] {
  color: var(--color-text-error-primary, #dc2626);
}
.tp-iconbtn--danger[data-v-c6159f7f]:hover:not(:disabled) {
  background: var(--color-bg-error-primary);
  color: var(--color-text-error-primary);
}

/* Dialog close (all:unset — no utility equivalent). DS: icon-secondary, radius-sm. */
.tp-modal-close[data-v-c6159f7f] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-secondary, #4b5563);
}
.tp-modal-close[data-v-c6159f7f]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

/* The ONLY rule left in CSS. Everything else in this tab is co-located Tailwind.
   Icon-only row action — mirrors the settled tg-iconbtn/pp-iconbtn danger button
   used by every other settings-v2 table. `all: unset` strips the legacy embedded
   <button> base styles that leak under `.settings-feature`; there is no utility
   for that reset, so this rule stays. `nt-*`-prefixed to avoid collisions. */
.nt-iconbtn[data-v-59e9b425] {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  color: var(--color-icon-secondary, #4b5563);
}
.nt-iconbtn[data-v-59e9b425]:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
}
.nt-iconbtn[data-v-59e9b425]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.nt-iconbtn--danger[data-v-59e9b425] {
  color: var(--color-text-error-primary, #dc2626);
}
.nt-iconbtn--danger[data-v-59e9b425]:hover:not(:disabled) {
  background: var(--color-bg-error-primary);
  color: var(--color-text-error-primary);
}

/* Tailwind-first: every visual rule now lives as co-located utilities in the
   template. Only genuinely-hard rules remain here — the two ui-vue3 field/link
   px-pins (cascade-sensitive) and the Preflight disc-list override. See memory
   project_settings_tailwind_first_conversion. */

/* ui-vue3 field box px-pin. The settings host <html> is 14px, so ui-vue3's rem
   field metrics render smaller than the DS spec, AND `settings-token-shim` hijacks
   `--radius-xl` (->20px) so the Input's `rounded-xl` would near-pill a 44px
   field. Re-assert the DS-canonical field box in literal px (rem- and hijack-
   immune). `class="sso-field"` merges onto the Input CONTAINER and Vue rides this
   SFC's scope-id onto that child root, so `.settings-feature .sso-field[data-v]`
   (0,3,0) out-specifies the `rounded-xl`/`px-3` utilities (0,2,0) — no !important.
   Input TEXT (14px/20px) is pinned in legacy-overrides.css. Applies to every
   readonly/editable <Input> in this tab. */
.settings-feature .sso-field[data-v-c11c3c0f] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* "Change" text link is the @qiscus/ui-vue3 <Button variant="link">. Fit it back
   to an inline text affordance inside the 12px hint sentence: the DS link button
   ships h-7 / px-1 / text-xs (rem-shrinks at the 14px root and adds box height
   that misaligns the paragraph baseline). `.settings-feature .sso-link-btn` (0,2,0)
   out-specifies those utilities (0,1,0) — no !important. Brand color + hover-
   underline come from the DS variant. */
.settings-feature .sso-link-btn[data-v-c11c3c0f] {
  height: auto;
  min-height: 0;
  padding: 0;
  font-size: 12px;
  line-height: 18px;
}

/* Workspace-rules disc list (Change workspace). Scoped Tailwind Preflight
   (`.settings-feature ul`, 0,1,1) resets list-style to none, so a `list-disc`
   utility (0,1,0) can't win — the disc markers stay a scoped rule. Our scoped
   `.sso-rules[data-v]` (0,2,0) out-specifies Preflight. DS: text-secondary,
   14px/20px regular. */
.sso-rules[data-v-c11c3c0f] {
  margin: 0;
  padding-left: 18px;
  list-style: disc outside;
  color: var(--color-text-secondary);
  font: 400 14px/20px var(--font-sans, sans-serif);
}

.dcp[data-v-f1e681d3] {
  position: relative;
  display: flex;
}
/* px-pinned box (embedded 14px-root shrinks rem metrics; this control is
   hand-rolled, not a ui-vue3 Input, so it uses literal px directly — matches the
   .ac-field 44/12 the sibling fields px-pin). */
.dcp__control[data-v-f1e681d3] {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  background: var(--color-bg-primary);
  cursor: pointer;
}
.dcp__control[data-v-f1e681d3]:focus-visible {
  outline: 2px solid var(--color-border-brand-primary, var(--brand, #27b199));
  outline-offset: 1px;
}
.dcp__control--disabled[data-v-f1e681d3] {
  cursor: not-allowed;
  background: var(--color-bg-disabled, #f1f5f9);
  opacity: 0.7;
}
.dcp__val[data-v-f1e681d3] {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: var(--color-text-primary);
}
.dcp__caret[data-v-f1e681d3] {
  color: var(--color-icon-secondary);
  transition: transform 160ms ease;
  display: inline-flex;
  flex: none;
}
.dcp__caret--open[data-v-f1e681d3] {
  transform: rotate(180deg);
}
.dcp__menu[data-v-f1e681d3] {
  z-index: 60;
  min-width: 200px;
  width: max-content;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 12px);
  box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 6px;
}
.dcp__search[data-v-f1e681d3] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-secondary);
  color: var(--color-icon-tertiary);
  margin-bottom: 4px;
}
.dcp__list[data-v-f1e681d3] {
  max-height: 240px;
  overflow-y: auto;
}
/* The DS ComboboxItem already carries selected/highlight bg; keep the row layout
   (space-between) + trailing check (mirrors DivisionPicker). */
.dcp__item.dcp__item[data-v-f1e681d3] {
  justify-content: space-between;
}
.dcp__item-name[data-v-f1e681d3] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dcp__item-check[data-v-f1e681d3] {
  margin-left: auto;
  color: var(--color-text-brand-primary, var(--brand, #1a7f6e));
  flex: none;
}
.dcp__empty[data-v-f1e681d3] {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* FileUpload's trigger is a full-width bar by default; pin its inner button to
   shrink-to-content. `:deep` pierces the ui-vue3 FileUpload — cannot be a utility. */
.ac-avatar__upload[data-v-7e0c2ac5] button {
  width: auto;
}

/* Field px-pin — the settings host <html> is 14px, so ui-vue3's rem field metrics
   render smaller; re-assert the DS-canonical box in literal px (same as the SSO /
   properties islands). Must out-order the ui-vue3 dist stylesheet on the same
   element, so it stays CSS — a utility class could lose the cascade. Applies to
   Input / Select trigger / Textarea / PasswordInput. */
.settings-feature .ac-field[data-v-7e0c2ac5] {
  min-height: 44px;
  /* Radius/padding must be pinned too: the settings host <html> is 14px AND
     `settings-token-shim` sets `--radius-xl: 20px`, so ui-vue3 Input's `rounded-xl`
     resolves to 20px here — a near-pill on a 44px field. Re-assert the DS field
     box (radius-md 12px, 12px inline padding), same as the SSO/properties pins. */
  border-radius: 12px;
  padding-left: 12px;
  padding-right: 12px;
}
.settings-feature .ac-textarea[data-v-7e0c2ac5] {
  min-height: 96px;
}

/* Width + centering are owned by SettingsFeature's shared column, which
   force-fills this root — so no max-width/margin here (would be dead). */
.appearance-app[data-v-735dbb17] {
  width: 100%;
}
.appearance-app__intro[data-v-735dbb17] {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 0 0 20px;
}
.appearance-app__card[data-v-735dbb17] {
  padding: 4px 20px;
}
.appearance-app__row[data-v-735dbb17] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.appearance-app__row--divided[data-v-735dbb17] {
  border-top: 1px solid var(--color-border-primary);
}
.appearance-app__meta[data-v-735dbb17] {
  min-width: 0;
}
.appearance-app__title[data-v-735dbb17] {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}
.appearance-app__desc[data-v-735dbb17] {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
}
/* Segmented control — styled entirely from DS semantic tokens (no raw hex), so
   it re-tokenises correctly under every [data-theme]. Selected = brand fill,
   mirroring the dev toolbar's selected locale button. */
.appearance-app__seg[data-v-735dbb17] {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  flex-shrink: 0;
}
.appearance-app__opt[data-v-735dbb17] {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.appearance-app__opt[data-v-735dbb17]:hover:not(.appearance-app__opt--on) {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}
/* Same pair the DS Button `primary` variant uses (bg-brand-secondary +
   text-on-brand) → readable in both themes + consistent with the dev toolbar. */
.appearance-app__opt--on[data-v-735dbb17] {
  background: var(--color-bg-brand-secondary);
  color: var(--color-text-on-brand);
}
.appearance-app__opt--on[data-v-735dbb17]:hover {
  background: var(--color-bg-brand-hover);
}
.appearance-app__opt[data-v-735dbb17]:focus-visible {
  outline: 2px solid var(--color-border-focus-ring);
  outline-offset: 2px;
}
@media (max-width: 560px) {
.appearance-app__row[data-v-735dbb17] {
    align-items: flex-start;
    gap: 12px;
}
.appearance-app__seg[data-v-735dbb17] {
    width: 100%;
    justify-content: space-between;
}
.appearance-app__opt[data-v-735dbb17] {
    flex: 1;
    text-align: center;
}
}

/* Field px-pin — the settings host <html> is 14px AND `settings-token-shim` sets
   `--radius-xl: 20px`, so ui-vue3's rem field metrics render smaller and its
   `rounded-xl` field container resolves to a near-pill 20px here. Re-assert the
   DS field box (radius-md 12px, 12px inline padding, 44px min-height) in literal
   px; it must out-order the ui-vue3 dist stylesheet on the same element, so it
   stays CSS — a utility class could lose the cascade. Applies to the Select
   trigger + the auto-responder Textareas. */
.settings-feature .gx-field[data-v-4d0cd72d] {
  min-height: 44px;
  border-radius: 12px;
  padding-left: 12px;
  padding-right: 12px;
}
.settings-feature .gx-textarea[data-v-4d0cd72d] {
  min-height: 96px;
}

/* The readonly link text uses the DS link token (blue), falling back to brand for
   white-label. Plain <input> so there's no ui-vue3 container to neutralize. */
.ll-input[data-v-cc17e1ec] {
  color: var(--color-text-link, var(--color-text-brand-primary));
  text-overflow: ellipsis;
  cursor: text;
}

/* min-width so the table horizontally SCROLLS at ~360px instead of compressing
   cells (mock member table minWidth:560). Reaches the ui-vue3 <Table>'s own
   rendered <table>, so it stays here. */
.mt-scroll table[data-v-a4539c10] {
  min-width: 560px;
}
/* Channel overflow "+N" <Chip> matches the 22px logo height (mock ChannelCluster
   +N): round, no side padding, centered — so it aligns with the adjacent brand
   logos. This shape override (and its guard against the neutral division "+N")
   is bespoke and specificity-sensitive against the <Chip> internals, so it stays. */
.mt-cluster:not(.mt-cluster--division) .mt-more[data-v-a4539c10] {
  height: 22px;
  min-width: 22px;
  padding: 0;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Brand-tinted removable chip layered on the DS <Chip> (chip/field is neutral;
   the picker wants a brand pill). Doubled class beats the base chip bg. */
.dp__chip.dp__chip[data-v-b50548d3] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-bg-brand-primary, rgba(39, 177, 153, 0.12));
  color: var(--color-text-brand-primary, var(--brand, #1a7f6e));
  font-size: 12px;
  line-height: 18px;
  border: 0;
}
/* The DS ComboboxItem already carries selected/highlight bg; keep the row layout
   (space-between) + trailing check the mock shows. Doubled class beats the base. */
.dp__item.dp__item[data-v-b50548d3] {
  justify-content: space-between;
}

.cap[data-v-8fac26ee] {
  display: flex;
  flex-direction: column;
}
.cap__head[data-v-8fac26ee] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}
.cap__label[data-v-8fac26ee] {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.cap__all[data-v-8fac26ee] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
/* TabsRoot base is `flex flex-col gap-2`; own the top strip↔body spacing (14px). */
.cap__toproot[data-v-8fac26ee] {
  gap: 14px;
}
/* Override the DS underline TabsList track (border-b) — the logo strip is a flat
   wrap of square tiles, not an underline tab bar. */
.cap__tabs[data-v-8fac26ee] {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 0;
}
/* "Assign to all" mode: the strip is not individually editable (selection is
   owned by the master checkbox), so fade the logos and disable interaction — but
   keep the assigned dot crisp so it reads exactly like an individual check. No
   single tab is "the active one" here, so neutralize the active brand highlight
   too, letting every tile read the same (all assigned). */
.cap__tabs--dim[data-v-8fac26ee] {
  pointer-events: none;
}
.cap__tabs--dim .cap__logo[data-v-8fac26ee] {
  opacity: 0.45;
}
.cap__tabs--dim .cap__tab[data-state='active'][data-v-8fac26ee] {
  background: var(--color-bg-primary);
  border-color: var(--color-border-primary);
}
/* Square logo tile (overrides the DS TabsTrigger px/border/radius via the scoped
   attribute-selector specificity). */
.cap__tab[data-v-8fac26ee] {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  transition:
    background 120ms ease,
    border-color 120ms ease;
}
.cap__tab[data-state='active'][data-v-8fac26ee] {
  background: var(--color-bg-brand-primary, rgba(39, 177, 153, 0.12));
  border-color: var(--color-border-brand-primary, var(--brand, #27b199));
}
.cap__logo[data-v-8fac26ee] {
  border-radius: 6px;
  object-fit: cover;
}
.cap__dot[data-v-8fac26ee] {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand, #27b199);
  border: 2px solid var(--color-bg-primary);
}
.cap__body[data-v-8fac26ee] {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md, 12px);
  padding: 14px;
}
/* Loading skeleton (mirrors MemberDetail's channel skeleton). */
.cap__loading[data-v-8fac26ee] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cap__skel[data-v-8fac26ee] {
  height: 16px;
  border-radius: var(--radius-xs, 6px);
  background: var(--color-bg-secondary, #f1f5f9);
  animation: cap-pulse-8fac26ee 1.2s ease-in-out infinite;
}
.cap__skel--master[data-v-8fac26ee] {
  width: 60%;
}
@keyframes cap-pulse-8fac26ee {
0%,
  100% {
    opacity: 1;
}
50% {
    opacity: 0.5;
}
}
.cap__subroot[data-v-8fac26ee] {
  gap: 10px;
}
/* DS underline TabsList already draws the track; keep the original tight margins. */
.cap__subtabs[data-v-8fac26ee] {
  gap: 6px;
  margin: -2px 0 4px;
}
.cap__subtab[data-v-8fac26ee] {
  position: relative;
  padding: 6px 10px 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.cap__subtab[data-state='active'][data-v-8fac26ee] {
  color: var(--color-text-brand-primary, var(--brand, #27b199));
}
.cap__subdot[data-v-8fac26ee] {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand, #27b199);
  margin-left: 4px;
  vertical-align: middle;
}
.cap__panel[data-v-8fac26ee] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cap__grid[data-v-8fac26ee] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
@media (max-width: 520px) {
.cap__grid[data-v-8fac26ee] {
    grid-template-columns: 1fr;
}
}
.cap__row[data-v-8fac26ee] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 0;
}
.cap__row--master[data-v-8fac26ee] {
  font-weight: 600;
}
.cap__acc[data-v-8fac26ee] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reset button (`all: unset`) — stays in CSS: `all: unset` plus its hover/
   disabled states can't be faithfully expressed as utilities, and the scoped
   [data-v] selector has to out-order the reset on the same element. Matches the
   other settings modal close buttons (BillingEmailModal's .bem__close). */
.mfm__close[data-v-a6e9b5ea] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.mfm__close[data-v-a6e9b5ea]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}
.mfm__close[data-v-a6e9b5ea]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* ui-vue3 field px-pin — must stay in CSS to override the DS Input/PasswordInput/
   Select trigger's rem-based radius/height/padding with the settings 14px-root
   pixel scale, out-ordering the ui-vue3 dist stylesheet on the same element. The
   portal target (modalHost) lives INSIDE .settings-feature, so the prefixed
   selector matches. */
.settings-feature .mf-field[data-v-a6e9b5ea] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* min-width so the table scrolls at ~360px instead of compressing (mock division
   table minWidth:520). Descendant combinator into the ui-vue3 <Table> child root
   (the rendered native <table>) — not expressible as a co-located utility. */
.dt-scroll table[data-v-c4693f4a] {
  min-width: 520px;
}

/* ui-vue3 field px-pin — the settings compat radius hijack rounds the Input
   container to 20px (pill); pin it back to the DS field box (radius-md 12 +
   44px + 12px inline pad). Prefixed `.settings-feature` to beat ui-vue3's own
   utilities without !important. */
.settings-feature .df-field[data-v-03cdd065] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* ui-vue3 field px-pin (settings marker) — kept scoped so the DS Select trigger
   keeps its 44px/12px settings geometry. */
.settings-feature .rs-field[data-v-34fd9e72] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Settings field pin — the toolbar search <Input> owns its DS chrome; this only
   re-pins the DS geometry (radius/height/side padding) to the settings spec.
   Kept scoped because it targets the ui-vue3 Input root under `.settings-feature`. */
.settings-feature .ax-field[data-v-06e2e52b] {
  border-radius: 12px;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

/* :deep() into the slotted action button — genuinely hard to hoist to a
   utility (targets a child the slot owner renders). On mobile the action
   button goes full-width + centered to match the full-width action row. */
@media (max-width: 480px) {
.sc__action[data-v-9910f584] button {
    width: 100%;
    justify-content: center;
}
}

/* Mock/DS icon-only hit-area: 32×32 square (ui-vue3 has no 32px size token). */
.er__actions[data-v-b8200773] button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

/* Native icon-button reset for the Dialog close affordance (all:unset). */
.bem__close[data-v-5609bc12] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.bem__close[data-v-5609bc12]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

/* Staggered row entrance — fade only, no `transform`.
   NOTE: settings scrolls inside a NESTED overflow container
   (.settings-feature__content within .app-layout__content), which can drop onto
   main-thread scrolling; a `transform` animation running WHILE the user scrolls
   trails a frame (the documented "trailing rows on scroll" bug). We deliberately
   animate opacity ONLY here — matching the opacity-only pattern used for the
   other settings tables — so nothing can trail. Capped at 16 rows (~0.7s) via
   --row-index so it settles fast; `both` lets it finish even when the table
   mounts below-the-fold. Reduced motion → no animation. */
@media (prefers-reduced-motion: no-preference) {
.sub-row-in[data-v-28c6e1f6] {
    animation: sub-row-in-28c6e1f6 260ms var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)) both;
    animation-delay: calc(var(--row-index, 0) * 28ms);
}
}
@keyframes sub-row-in-28c6e1f6 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* Table head → DS SubHeadCell spec (semibold 12/18, text-secondary, bg-secondary).
   :deep into the ui-vue3 <Table> child — genuinely hard, kept as scoped CSS. This
   also reaches the descendant <SubsHistoryTable> table (a child of .shc-card). */
.shc-card[data-v-458b4469] thead th {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.mid-3ds-content[data-state='closed'],
.mid-3ds-overlay[data-state='closed'] {
  display: none !important;
}

/* Close button reset — `all: unset` strips the native <button>/DialogClose
   chrome (genuinely hard: not expressible as utilities). Layout/size/hover hoisted. */
.tum__close[data-v-546f5c0a] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.tum__close[data-v-546f5c0a]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

/* Keep the icon from shrinking inside the flex note row (:deep into the Icon
   child — genuinely hard, can't reach the teleported svg via utilities). */
.tum__note[data-v-546f5c0a] svg {
  flex: none;
}

.tum-content[data-state='closed'],
.tum-overlay[data-state='closed'] {
  display: none !important;
}

/* Close button reset — mirrors TopUpMauModal.tum__close. */
.tuc__close[data-v-82d9f184] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.tuc__close[data-v-82d9f184]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

.tuc-content[data-state='closed'],
.tuc-overlay[data-state='closed'] {
  display: none !important;
}

/* Centering + rotate must stay together: Tailwind's animate-spin sets its own
   transform and would clobber the translate(-50%, -50%) centering. */
.sub-image__spinner[data-v-eee2c80b] {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  color: var(--color-text-brand-primary, #27b199);
  animation: sub-image-spin-eee2c80b 1s linear infinite;
}
@keyframes sub-image-spin-eee2c80b {
to {
    transform: translate(-50%, -50%) rotate(360deg);
}
}

/* Native icon-button reset (all:unset) — kept in scoped CSS per convention. */
.spm__close[data-v-8f5382dc] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.spm__close[data-v-8f5382dc]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

.spm-content[data-state='closed'],
.spm-overlay[data-state='closed'] {
  display: none !important;
}

/* Native icon-button reset (all:unset) + hover — kept in CSS: not cleanly
   expressible as utilities. */
.pdv__close[data-v-c332bb18] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.pdv__close[data-v-c332bb18]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

.pdv-content[data-state='closed'],
.pdv-overlay[data-state='closed'] {
  display: none !important;
}

/* Native icon-button reset (all:unset) + hover — kept in CSS: not cleanly
   expressible as utilities. */
.pmv__close[data-v-8a8f036d] {
  all: unset;
  cursor: pointer;
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs, 6px);
  color: var(--color-icon-secondary, #4b5563);
}
.pmv__close[data-v-8a8f036d]:hover {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-icon-primary, #1f2937);
}

.pmv-content[data-state='closed'],
.pmv-overlay[data-state='closed'] {
  display: none !important;
}

.sub-alert-overlay {
  z-index: var(--z-popover, 1500) !important;
}
.sub-alert-content {
  z-index: var(--z-tooltip, 1600) !important;
}