/* Supagent's shared components: FlyonUI 2.4.1 (MIT, themeselection.com) in Supagent's look, only those
   supagent-hq/platform's pages use. Components: alert, badge, button, input, pinInput, skeleton. Generated by hq/tools/ds-build.py from the products'
   code: load it after /ds/supagent.css; every value comes from its names. A component not listed here: ask
   Central Command. The markup to copy for each component: Central Command's template preview (/ds/gallery.html). */
@layer theme, base, components, utilities;
/*! tailwindcss v4.3.3 | 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-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}}}@layer theme{:root,:host{--spacing:.25rem;--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);--font-weight-normal:400;--font-weight-medium:500;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.input-floating-label{pointer-events:none;width:fit-content;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-overflow:ellipsis;color:var(--color-base-content);background-color:#0000;margin-inline-start:.75rem;position:absolute;inset-inline-start:0;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.input-floating-label{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.input-floating-label{top:calc(var(--size-field,.25rem) * 9.5 / 2);transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;translate:0 -50%}@supports (color:color-mix(in lab, red, red)){.input:has(>.input-floating) input:focus::placeholder{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.input-floating{width:100%;display:block;position:relative}.input-floating .input::placeholder{color:#0000}.input-floating .input:focus::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input-floating .input:focus::placeholder{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.input-floating .input:has(>input[disabled]),.input-floating .input:is(:disabled,[disabled]){border-style:var(--tw-border-style);opacity:.5;background-color:#0000;border-width:1px}:is(.input-floating .input:has(>input[disabled]),.input-floating .input:is(:disabled,[disabled]))~.input-floating-label{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.input-floating .input:has(>input[disabled]),.input-floating .input:is(:disabled,[disabled]))~.input-floating-label{color:color-mix(in oklab, var(--color-base-content) 30%, transparent)}}:is(.input-floating:focus-within,.input-floating:not(:has(input:placeholder-shown)),.input-floating:has(.input:focus)) .input-floating-label{pointer-events:auto;background-color:var(--color-base-100);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content);padding-inline:.25rem;top:0}@supports (color:color-mix(in lab, red, red)){:is(.input-floating:focus-within,.input-floating:not(:has(input:placeholder-shown)),.input-floating:has(.input:focus)) .input-floating-label{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}:is(.input-floating:focus-within,.input-floating:not(:has(input:placeholder-shown)),.input-floating:has(.input:focus)) .input-floating-label{translate:-12.5% calc(-50% - .125em);scale:.75}:is(.input-floating:focus-within,.input-floating:has(.input:focus)) .input-floating-label{--input-color:var(--color-primary);color:var(--input-color)}.input-floating:has(.input-xs) .input-floating-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));top:calc(var(--size-field,.25rem) * 6 / 2);margin-inline-start:.625rem}.input-floating:has(.input-sm) .input-floating-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));top:calc(var(--size-field,.25rem) * 7.5 / 2);margin-inline-start:.625rem}.input-floating:has(.input-md) .input-floating-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));top:calc(var(--size-field,.25rem) * 9.5 / 2);margin-inline-start:.75rem}.input-floating:has(.input-lg) .input-floating-label{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));top:calc(var(--size-field,.25rem) * 11.5 / 2);margin-inline-start:1rem}.input-floating:has(.input-xl) .input-floating-label{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));top:calc(var(--size-field,.25rem) * 14 / 2);margin-inline-start:1.125rem}.btn{cursor:pointer;text-align:center;vertical-align:middle;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;text-decoration-line:none;display:inline-flex}@media (prefers-reduced-motion:reduce){.btn{transition-property:none}}.btn{padding-inline:var(--btn-p);color:var(--btn-fg);height:var(--size);outline-color:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn{outline-color:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, var(--color-base-100))}}.btn{background-color:var(--btn-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--btn-noise);border:var(--border) solid var(--btn-border);box-shadow:0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow);--size:calc(var(--size-field,.25rem) * 9.5);--btn-bg:var(--btn-color,var(--color-neutral));--btn-fg:var(--color-neutral-content);--btn-p:1rem;--btn-border:var(--btn-bg);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));transition-property:color,background-color,border-color,box-shadow;transition-duration:.25s;transition-timing-function:cubic-bezier(0,0,.96,1.03)}@supports (color:color-mix(in lab, red, red)){.btn{--btn-border:color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%))}}.btn{--btn-shadow:0px 1px 3px 0px var(--color-base-300), 0px 1px 2px -1px var(--color-base-300)}@supports (color:color-mix(in lab, red, red)){.btn{--btn-shadow:0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000)}}.btn{--btn-noise:var(--fx-noise)}@media (hover:hover){.btn:hover{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 90%, #000)}}}.btn:active:hover:not(.btn-active),.btn:active:focus:not(.btn-active){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-timing-function:ease-out;transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;transition-duration:.3s}.btn:focus-visible{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn:focus-visible{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)), #000 10%)}}.btn:focus-visible{outline-width:2px;outline-style:solid}.btn:is(:disabled,[disabled],.btn-disabled){pointer-events:none;opacity:.5;--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)}.btn:is(input[type=checkbox],input[type=radio]){appearance:none}.btn:is(input[type=checkbox],input[type=radio]):after{content:attr(aria-label)}.btn:is(input[type=checkbox],input[type=radio]):checked{background:var(--color-primary);color:var(--color-primary-content);outline-color:var(--color-primary);--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);isolation:isolate}.pin-input{border-radius:var(--radius-field);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.pin-input{border-color:color-mix(in oklab, var(--color-base-content) 25%, transparent)}}.pin-input{background-color:var(--color-base-100);text-align:center;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.pin-input::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.pin-input::placeholder{color:color-mix(in oklab, var(--color-base-content) 80%, transparent)}}.pin-input{height:var(--size);width:var(--size);--size:calc(var(--size-field,.25rem) * 9.5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pin-input:hover:not(:focus,:focus-within){border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.pin-input:hover:not(:focus,:focus-within){border-color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.pin-input:focus,.pin-input:focus-within{border-color:var(--color-primary);--tw-shadow:0 1px 2px 0 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);--tw-shadow-color:#006bcf4d}@supports (color:color-mix(in lab, red, red)){.pin-input:focus,.pin-input:focus-within{--tw-shadow-color:color-mix(in oklab, var(--color-primary) 30%, #0000)}}.pin-input:focus,.pin-input:focus-within{outline:1px solid var(--color-primary);isolation:isolate}.pin-input.disabled,.pin-input:disabled,.pin-input[disabled]{pointer-events:none;border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.pin-input.disabled,.pin-input:disabled,.pin-input[disabled]{border-color:color-mix(in oklab, var(--color-base-content) 25%, transparent)}}.pin-input.disabled,.pin-input:disabled,.pin-input[disabled]{background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.pin-input.disabled,.pin-input:disabled,.pin-input[disabled]{background-color:color-mix(in oklab, var(--color-base-content) 5%, transparent)}}.pin-input.disabled,.pin-input:disabled,.pin-input[disabled]{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.pin-input.disabled,.pin-input:disabled,.pin-input[disabled]{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}:is(.pin-input.disabled,.pin-input:disabled,.pin-input[disabled])::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.pin-input.disabled,.pin-input:disabled,.pin-input[disabled])::placeholder{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}.alert{border-radius:var(--radius-box);width:100%;color:var(--color-neutral-content);text-align:start;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--alert-bg);border:var(--border) solid var(--alert-border);box-shadow:0 .1875rem 0 -.125rem oklch(100% 0 0 / calc(var(--depth) * .08)) inset;--alert-bg:var(--alert-color,var(--color-neutral));--alert-border:var(--alert-color,var(--color-neutral));padding:1rem;position:relative}.alert.alert-outline{color:var(--alert-color,var(--color-neutral));--alert-bg:transparent;box-shadow:none;background-image:none}.alert.alert-soft{color:var(--alert-color,var(--color-neutral));--alert-bg:var(--alert-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.alert.alert-soft{--alert-bg:color-mix(in oklab, var(--alert-color,var(--color-neutral)) 10%, var(--color-base-100))}}.alert.alert-soft{box-shadow:none;background-image:none}.input{cursor:text;appearance:none;background-color:var(--color-base-100);width:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:var(--color-base-content);flex-shrink:1;padding-inline:.75rem;display:inline-flex}.input::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input::placeholder{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.input:focus-visible{--tw-outline-style:none;outline-style:none}.input{border:var(--border) solid #0000;height:var(--size);touch-action:manipulation;border-color:var(--input-color);--input-color:var(--color-base-content);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field))}@supports (color:color-mix(in lab, red, red)){.input{--input-color:color-mix(in oklab, var(--color-base-content) 40%, #0000)}}.input{--size:calc(var(--size-field,.25rem) * 9.5)}.input:hover:not(:focus,:focus-within),.input:has(:hover):not(:focus,:focus-within){border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input:hover:not(:focus,:focus-within),.input:has(:hover):not(:focus,:focus-within){border-color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.input:where(input){display:inline-block}.input :where(input:not([type=checkbox]):not([type=radio])){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-block}.input :where(input:not([type=checkbox]):not([type=radio])):focus,.input :where(input:not([type=checkbox]):not([type=radio])):focus-within,.input :where(input:not([type=checkbox]):not([type=radio])):focus-visible{--tw-outline-style:none;outline-style:none}.input:focus,.input:focus-within{--tw-shadow:0 1px 2px 0 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);--input-color:var(--color-primary);--tw-shadow-color:var(--input-color)}@supports (color:color-mix(in lab, red, red)){.input:focus,.input:focus-within{--tw-shadow-color:color-mix(in oklab, var(--input-color) 30%, #0000)}}.input:focus,.input:focus-within{outline:1px solid var(--input-color);isolation:isolate}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){cursor:not-allowed;border-style:var(--tw-border-style);background-color:var(--color-neutral);border-width:0}@supports (color:color-mix(in lab, red, red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]){background-color:color-mix(in oklab, var(--color-neutral) 10%, transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]){box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input:has(>.input-floating) input::placeholder{color:#0000}.input:has(>.input-floating) input:focus::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input:has(>.input-floating) input:focus::placeholder{color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.btn-active{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 90%, #000)}}.btn-active{isolation:isolate}@supports (color:color-mix(in lab, red, red)){.btn-soft.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 20%, var(--color-base-100))}}@supports (color:color-mix(in lab, red, red)){.btn-outline.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}@supports (color:color-mix(in lab, red, red)){.btn-text.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}@supports (color:color-mix(in lab, red, red)){.btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000)}}.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem) * 11.5);padding-inline:1rem}.input-lg[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem) * 9.5);padding-inline:.75rem}.input-md[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem) * 7.5);padding-inline:.625rem}.input-sm[type=number]::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem) * 14);padding-inline:1.125rem}.input-xl[type=number]::-webkit-inner-spin-button{margin-block:-1rem;margin-inline-end:-.75rem}.input-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-field,.25rem) * 6);padding-inline:.625rem}.input-xs[type=number]::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}.badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border) solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex}.badge.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}.badge.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.badge.badge-soft{--badge-bg:color-mix(in oklab, var(--badge-color,var(--color-neutral)) 10%, var(--color-base-100))}}.badge.badge-soft{background-image:none}.btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.btn-square{width:var(--size);height:var(--size);padding-inline:0}.btn-wide{width:100%;max-width:16rem}.btn-block{width:100%}@media (prefers-reduced-motion:reduce){.skeleton-animated{transition-duration:15s}}.skeleton-animated{animation:1.8s ease-in-out infinite skeleton}.pin-input-underline{border-style:var(--tw-border-style);border-width:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-base-content);border-radius:0}@supports (color:color-mix(in lab, red, red)){.pin-input-underline{border-color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}.pin-input-underline{background-color:#0000}.pin-input-underline:focus,.pin-input-underline:focus-within{border-bottom-style:var(--tw-border-style);border-bottom-width:2px;border-color:var(--color-primary);--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);--tw-outline-style:none;outline-style:none}.skeleton{border-radius:var(--radius-box);background-color:var(--color-base-200);will-change:background-position;background-image:linear-gradient(105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100%);background-position-x:-50%;background-repeat:no-repeat;background-size:200%}.btn-gradient{--btn-shadow:0px 1px 3px 0px var(--btn-color,var(--color-neutral)), 0px 1px 2px -1px var(--btn-color,var(--color-neutral));background-color:#0000;border-width:2px;transition-property:background-position,box-shadow;transition-duration:.4s;transition-timing-function:ease-in-out}@supports (color:color-mix(in lab, red, red)){.btn-gradient{--btn-shadow:0px 1px 3px 0px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000), 0px 1px 2px -1px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000)}}.btn-gradient{--btn-border:var(--btn-color,var(--color-neutral));--dark-shade:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-gradient{--dark-shade:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 80%, black)}}.btn-gradient{background-size:200%;background-image:linear-gradient(102deg, var(--btn-color,var(--color-neutral)) 0%, var(--dark-shade) 51%, var(--btn-color,var(--color-neutral)) 100%)}@media (hover:hover){.btn-gradient:hover{--btn-shadow:0px 4px 6px -1px var(--btn-color,var(--color-neutral)), 0px 2px 4px -2px var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-gradient:hover{--btn-shadow:0px 4px 6px -1px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000)}}.btn-gradient:hover{background-position:99%}}.btn-gradient:focus-visible{--btn-shadow:0px 4px 6px -1px var(--btn-color,var(--color-neutral)), 0px 2px 4px -2px var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-gradient:focus-visible{--btn-shadow:0px 4px 6px -1px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000)}}.btn-gradient:focus-visible{background-position:99%}.btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px var(--btn-color,var(--color-neutral)), 0px 2px 4px -2px var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-gradient.btn-active{--btn-shadow:0px 4px 6px -1px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000), 0px 2px 4px -2px color-mix(in oklab, var(--btn-color,var(--color-neutral)) 30%, #0000)}}.btn-gradient.btn-active{background-position:99%}.btn-text{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:"";--btn-border:"";--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral));border-width:0}@media (hover:hover){.btn-text:hover{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-text:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}}.btn-text:focus-visible{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-text:focus-visible{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}.btn-text.btn-active{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-text.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}.btn-soft{--btn-shadow:"";color:var(--btn-color,var(--color-neutral));--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-soft{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, var(--color-base-100))}}.btn-soft{--btn-noise:none;border-width:0}.btn-soft:focus-visible{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-soft:focus-visible{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 20%, var(--color-base-100))}}@media (hover:hover){.btn-soft:hover{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-soft:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 20%, var(--color-base-100))}}}.btn-soft.btn-active{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-soft.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 20%, var(--color-base-100))}}.no-focus:focus,.no-focus:focus-within{--tw-border-style: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);--tw-outline-style:none;border-style:none;outline-style:none}.skeleton-striped{background-image:repeating-linear-gradient(45deg, var(--color-base-200), var(--color-base-200) 2px, var(--color-base-100) 3px, var(--color-base-100) 6px)}.badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem) * 7);padding-inline:.875rem}.badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem) * 6);padding-inline:.75rem}.badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem) * 5);padding-inline:.5rem}.badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem) * 8);padding-inline:1rem}.badge-xs{--size:calc(var(--size-selector,.25rem) * 4);padding-inline:.375rem;font-size:.625rem}.btn-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.25rem;--size:calc(var(--size-field,.25rem) * 11.5)}.btn-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--btn-p:1rem;--size:calc(var(--size-field,.25rem) * 9.5)}.btn-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--btn-p:.75rem;--size:calc(var(--size-field,.25rem) * 7.5)}.btn-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--btn-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}.btn-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--btn-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}.pin-input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-field,.25rem) * 11.5)}.pin-input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-field,.25rem) * 9.5)}.pin-input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-field,.25rem) * 7.5)}.pin-input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--size:calc(var(--size-field,.25rem) * 14)}.pin-input-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-field,.25rem) * 6)}.btn-outline{--btn-shadow:"";--btn-bg:"";color:var(--btn-color,var(--color-neutral));--btn-border:var(--btn-color,var(--color-neutral));--btn-noise:none;outline-color:var(--btn-color,var(--color-neutral))}@media (hover:hover){.btn-outline:hover{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-outline:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}}.btn-outline:focus-visible{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-outline:focus-visible{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}.btn-outline:focus-visible{outline-width:1px}.btn-outline.btn-active{--btn-bg:var(--btn-color,var(--color-neutral))}@supports (color:color-mix(in lab, red, red)){.btn-outline.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-neutral)) 10%, #0000)}}.alert-error{color:var(--color-error-content);--alert-color:var(--color-error)}.alert-info{color:var(--color-info-content);--alert-color:var(--color-info)}.alert-primary{color:var(--color-primary-content);--alert-color:var(--color-primary)}.alert-success{color:var(--color-success-content);--alert-color:var(--color-success)}.alert-warning{color:var(--color-warning-content);--alert-color:var(--color-warning)}.badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}@keyframes notyf-fadeinup{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translateY(0)}}@keyframes notyf-fadeinleft{0%{opacity:0;transform:translate(25%)}to{opacity:1;transform:translate(0)}}@keyframes notyf-fadeoutright{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(25%)}}@keyframes notyf-fadeoutdown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(25%)}}@keyframes ripple{0%{transform:scale(0)translateY(-45%)translate(13%)}to{transform:scale(1)translateY(-45%)translate(13%)}}.notyf{color:#fff;z-index:9999;pointer-events:none;box-sizing:border-box;flex-direction:column;justify-content:flex-end;align-items:flex-end;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}.notyf__icon--error,.notyf__icon--success{background:#fff;border-radius:50%;width:21px;height:21px;margin:0 auto;display:block;position:relative}.notyf__icon--error:after,.notyf__icon--error:before{content:"";background:currentColor;border-radius:3px;width:3px;height:12px;display:block;position:absolute;top:5px;left:9px}.notyf__icon--error:after{transform:rotate(-45deg)}.notyf__icon--error:before{transform:rotate(45deg)}.notyf__icon--success:after,.notyf__icon--success:before{content:"";background:currentColor;border-radius:3px;width:3px;display:block;position:absolute}.notyf__icon--success:after{height:6px;top:9px;left:6px;transform:rotate(-45deg)}.notyf__icon--success:before{height:11px;top:5px;left:10px;transform:rotate(45deg)}.notyf__toast{pointer-events:auto;box-sizing:border-box;border-radius:2px;flex-shrink:0;max-width:300px;padding:0 15px;animation:.3s ease-in forwards notyf-fadeinup;display:block;position:relative;overflow:hidden;transform:translateY(25%);box-shadow:0 3px 7px #00000040}.notyf__toast--disappear{animation:.3s .25s forwards notyf-fadeoutdown;transform:translateY(0)}.notyf__toast--disappear .notyf__icon,.notyf__toast--disappear .notyf__message{opacity:1;animation:.3s forwards notyf-fadeoutdown;transform:translateY(0)}.notyf__toast--disappear .notyf__dismiss{opacity:1;animation:.3s forwards notyf-fadeoutright;transform:translate(0)}.notyf__toast--disappear .notyf__message{animation-delay:50ms}.notyf__toast--upper{margin-bottom:20px}.notyf__toast--lower{margin-top:20px}.notyf__toast--dismissible .notyf__wrapper{padding-right:30px}.notyf__ripple{transform-origin:100% 100%;z-index:5;border-radius:50%;width:400px;height:400px;animation:.4s ease-out forwards ripple;position:absolute;top:0;right:0;transform:scale(0)translateY(-51%)translate(13%)}.notyf__wrapper{z-index:10;border-radius:3px;align-items:center;padding-top:17px;padding-bottom:17px;padding-right:15px;display:flex;position:relative}.notyf__icon{text-align:center;opacity:0;width:22px;margin-right:13px;font-size:1.3em;animation:.3s .3s forwards notyf-fadeinup}.notyf__dismiss{opacity:0;width:26px;height:100%;margin-right:-15px;animation:.3s .35s forwards notyf-fadeinleft;position:absolute;top:0;right:0}.notyf__dismiss-btn{cursor:pointer;opacity:.35;background-color:#00000040;border:none;outline:none;width:100%;height:100%;transition:opacity .2s,background-color .2s}.notyf__dismiss-btn:after,.notyf__dismiss-btn:before{content:"";background:#fff;border-radius:3px;width:2px;height:12px;position:absolute;top:calc(50% - 5px);left:calc(50% - 1px)}.notyf__dismiss-btn:after{transform:rotate(-45deg)}.notyf__dismiss-btn:before{transform:rotate(45deg)}.notyf__dismiss-btn:hover{opacity:.7;background-color:#00000026}.notyf__dismiss-btn:active{opacity:.8}.notyf__message{vertical-align:middle;opacity:0;line-height:1.5em;animation:.3s .25s forwards notyf-fadeinup;position:relative}@media only screen and (max-width:480px){.notyf{padding:0}.notyf__ripple{width:600px;height:600px;animation-duration:.5s}.notyf__toast{border-radius:0;width:100%;max-width:none;box-shadow:0 -2px 7px #00000021}.notyf__dismiss{width:56px}}@keyframes notyf-fadeinright{0%{opacity:0;transform:translate(-25%)}to{opacity:1;transform:translate(0%)}}@keyframes notyf-fadeoutleft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-25%)}}.notyf__toast{border-radius:var(--radius-field);--tw-shadow:var(--shadow-md,0 1px 2px #1414170f, 0 8px 24px #14141714);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-shadow-color:var(--color-base-300);padding:0!important}@supports (color:color-mix(in lab, red, red)){.notyf__toast{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent)}}@media not all and (min-width:40rem){.notyf__toast{margin:calc(var(--spacing) * 2);width:91.6667%}}.notyf__toast .notyf__wrapper{padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2.5)}.notyf__toast .notyf__wrapper .notyf__dismiss{margin-right:0!important}.notyf__toast .notyf__wrapper .notyf__dismiss:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:0!important;right:auto!important}.notyf__toast .notyf__wrapper .notyf__dismiss .notyf__dismiss-btn{width:100%;opacity:.5!important}@media (hover:hover){.notyf__toast .notyf__wrapper .notyf__dismiss .notyf__dismiss-btn:hover{opacity:1!important}}.notyf__toast .notyf__wrapper .notyf__dismiss .notyf__dismiss-btn:active{opacity:1!important}.notyf__toast .notyf__wrapper:has(>.notyf__dismiss){padding-inline-end:calc(var(--spacing) * 12)!important}.notyf__toast--error .notyf__ripple{background-color:var(--color-error,#b42318)!important}.notyf__toast--error .notyf__icon i{color:var(--color-error,#b42318)!important}.notyf__toast--success .notyf__ripple{background-color:var(--color-success)!important}.notyf__toast--success .notyf__icon i{color:var(--color-success)!important}.notyf__icon{background-color:var(--color-base-100);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);width:26px;height:26px;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--color-base-100);border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;display:flex;margin-inline-end:calc(var(--spacing) * 3)!important}@supports (color:color-mix(in lab, red, red)){.notyf__icon{--tw-ring-color:color-mix(in oklab, var(--color-base-100) 40%, transparent)}}.notyf__icon:where(:dir(rtl),[dir=rtl],[dir=rtl] *){margin-right:0!important}.notyf__icon i{width:1.125rem;height:1.125rem}.notyf__icon .notyf__icon--success:before,.notyf__icon .notyf__icon--success:after,.notyf__icon .notyf__icon--error:before,.notyf__icon .notyf__icon--error:after{content:none}.notyf__icon .notyf__icon--error,.notyf__icon .notyf__icon--success{width:1.125rem;height:1.125rem;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.notyf__icon .notyf__icon--error{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m2.7-6.3l12.6 12.6'/%3E%3C/svg%3E")}.notyf__icon .notyf__icon--success{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E")}.notyf__message{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}[dir=rtl] .notyf__dismiss{animation:.3s .35s forwards notyf-fadeinright!important}[dir=rtl] .notyf__toast--disappear .notyf__dismiss{animation:.3s forwards notyf-fadeoutleft!important}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@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-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-leading:initial;--tw-scale-x:1;--tw-scale-y:1}}}
/* Supagent's layer on FlyonUI (DECISIONS: The template): FlyonUI's components in Supagent's look. Every value comes
   from the shared names of supagent.css (Central Command's Design system); this file only says which name each part of
   a component takes. It follows FlyonUI's compiled components in supagent-components.css (ds-build.py). */

/* FlyonUI's variables from the shared names, on every element that can change them: light or dark, a theme. */
:root, [data-theme], [data-palette] {
  --color-base-100: var(--color-surface); --color-base-200: var(--color-raised); --color-base-300: var(--color-line);
  --color-base-content: var(--color-text);
  --color-secondary: var(--color-muted); --color-secondary-content: var(--color-surface);
  --color-neutral: var(--color-text); --color-neutral-content: var(--color-surface);
  --color-info: var(--color-accent); --color-info-content: var(--color-accent-content);
  --color-success: var(--color-pays); --color-success-content: var(--color-surface);
  --color-warning-content: var(--color-surface); --color-error-content: var(--color-surface);
  --radius-selector: var(--radius-xs); --radius-field: var(--radius-md); --radius-box: var(--radius-xl);
  --size-selector: .25rem; --size-field: .25rem; --border: 1px; --noise: 0;
}

/* Dark mode: FlyonUI's neutral is a mid grey there (as a fill it is no light patch, as a text it stays readable), not
   the light text colour. */
[data-theme="dark"] { --color-neutral: color-mix(in oklab, var(--color-text) 62%, var(--color-surface)); --color-neutral-content: var(--color-surface); }
/* Info reads as the accent (blue text); filled, it takes the primary like every filled thing (they differ in dark mode). */
[data-theme="dark"] :is(.alert-info:not(.alert-soft, .alert-outline, .alert-dashed), .badge-info:not(.badge-soft, .badge-outline, .badge-dashed), .btn-info:not(.btn-soft, .btn-outline, .btn-text, .btn-dashed)) {
  --color-info: var(--color-primary); --color-info-content: var(--color-primary-content); }

/* Outside Tailwind (Agent Hub, plain pages) there is no reset: the part of one the components need, and only for
   them. In the base layer, so FlyonUI's own rules (utilities) always win over it and nothing else on a page moves. */
@layer base {
  :where(.btn, .input, .select, .textarea, .badge, .tab, .tabs, .menu, .dropdown-menu, .dropdown-item, .card, .alert,
    .modal-content, .drawer, .tooltip-body, .advance-select-toggle, .advance-select-menu, .pin-input, .kbd, .avatar,
    .accordion-toggle, .checkbox, .radio, .switch, .input input, .textarea textarea, .mockup-browser, .mockup-code,
    .mockup-window, .mockup-phone, .navbar, .footer, .stats, .steps, .timeline, .join, .diff, .accordion-item, .accordion-content) { box-sizing: border-box; }
  :where(.btn, .tabs, .menu, .dropdown, .dropdown-menu, .card, .alert, .modal, .drawer, .accordion, .tooltip, .stats,
    .table, .breadcrumbs, .indicator, .avatar, .advance-select-menu, .mockup-browser, .mockup-window,
    .navbar, .footer, .stats, .steps, .timeline, .join, .diff, [role="tree"]) :where(*, ::before, ::after) { box-sizing: border-box; }
  :where(.btn, .tab, .dropdown-item, .dropdown-toggle, .tooltip-toggle, .accordion-toggle, .advance-select-toggle,
    .input, .textarea, .pin-input, .input input, .textarea textarea, .checkbox, .radio, .switch, .menu a, .menu button) {
    font: inherit; color: inherit; letter-spacing: inherit; margin: 0; border: 0 solid; background-color: transparent;
  }
  :where(.btn, .tab, .dropdown-item, .accordion-toggle, .menu a, .tooltip-toggle, .dropdown-toggle) { cursor: pointer; }

}

/* The four heights (Sizes), and each height its corner class (Corners). */
.btn, .btn-md, .input, .input-md { --size: var(--h-medium); }
.btn-xs, .input-xs { --size: var(--h-inline); border-radius: var(--radius-xs); }
.btn-sm, .input-sm { --size: var(--h-small); border-radius: var(--radius-sm); }
.btn-lg, .btn-xl, .input-lg, .input-xl, .pin-input { --size: var(--h-large); border-radius: var(--radius-lg); }

.badge, .badge-md, .badge-lg { --size: var(--h-small); border-radius: var(--radius-sm); }
.badge-xs, .badge-sm { --size: var(--h-inline); border-radius: var(--radius-xs); }

.btn-circle, .badge.rounded-full { border-radius: 999px; }

/* Text: the validated sizes and weights (Buttons and inputs). */
.btn { font-size: var(--text-small); font-weight: 600; }
.btn-xs, .badge { font-size: 12px; font-weight: 600; }

/* Buttons fade on Central Command's motion, as the navbar's do (the template's .25s and its own easing made two speeds
   on one page, Oct 20 scan). In the utilities layer, where FlyonUI puts its button timing. */
@layer utilities { .btn { transition-duration: var(--motion-fade); transition-timing-function: var(--motion-ease); } }
/* Grey soft buttons take the raised grey in light (Amine, Oct 20, on the BenQ: FlyonUI's 10% mix on white was a flat
   grey beside the blue page); in dark FlyonUI's mix stays, a step above the cards. */
.btn-soft.btn-secondary:not([data-theme="dark"] *) { --btn-bg: var(--color-raised); }
.btn-soft.btn-secondary:not([data-theme="dark"] *):hover { --btn-bg: color-mix(in oklab, var(--btn-color) 12%, var(--color-raised)); }
/* A text button with no colour takes the text colour in dark too, as in light (Amine, Oct 28, from the Reel Studio:
   FlyonUI's mid grey neutral, 5.8:1 on a panel, made them look switched off, dimmer than the grey secondary ones at
   9.6:1). Its hover follows; a coloured one keeps its colour, and a page's own text colour on a button still wins. */
[data-theme="dark"] .btn-text:not(.btn-primary, .btn-secondary, .btn-accent, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-neutral) {
  --btn-color: var(--color-base-content); }
.input { font-size: var(--text-body); }
/* A field's edge and its hint read on the page and on a card (Oct 20 scan: the 40% border was 2.6:1 on white and
   2.3:1 on a card, under the 3:1 a field's edge needs; the 50% hint 3.5:1). No colour variant (input-error...) is used. */
.input { --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000); }
.input::placeholder, .input input::placeholder { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }

.input { align-items: center; }  /* an icon in a field sits in its middle */
.input::file-selector-button { text-transform: none; font-size: var(--text-small); font-weight: 600; }

.accordion-toggle.btn { padding-block: 0; }  /* a button that opens a row (the tree view's arrow) keeps its button size */
.accordion-toggle:is(.btn-circle, .btn-square) { width: var(--size); padding-inline: 0; }

.menu-note small { display: block; font-size: 12px; line-height: 16px; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }


/* Behind a dialog or a drawer, the page dims with the scrim, unless an example picks its own backdrop colour. */
.overlay-backdrop.bg-base-300\/60:not([class*="overlay-backdrop-open:bg-"]) { background-color: var(--color-scrim); }

/* In dark mode the main colour is a deep blue for fills, white text on it; as a text colour (links, outline, soft and
   text buttons, soft and outline badges and alerts) the accent's lighter blue reads instead. In a theme both are its
   main colour, so nothing changes there. */
[data-theme="dark"] .btn-primary:is(.btn-outline, .btn-soft, .btn-text) { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content); }
[data-theme="dark"] .badge-primary:is(.badge-soft, .badge-outline) { --badge-color: var(--color-accent); }
[data-theme="dark"] .alert-primary:is(.alert-soft, .alert-outline, .alert-dashed) { --alert-color: var(--color-accent); }

[data-theme="dark"] .text-primary { color: var(--color-accent); }
/* The same wherever else FlyonUI writes the main colour as text: soft fills, the active item of a menu, dropdown, tab or
   scrollspy, the date picker's today and range, the calendar's buttons. */
[data-theme="dark"] { --fc-button-text-color: var(--color-accent); }

/* Important utilities: only from inside their layer, as an important rule outside every layer loses to one inside. */
@layer utilities { [data-theme="dark"] :is(.\!text-primary, .\!text-bg-soft-primary) { color: var(--color-accent) !important; } }

/* Inside another surface, the class below (Corners, rule 3): a card, a notice, a table or figures in a card or a dialog. */
:is(.card, .modal-content, .drawer, .alert) :is(.card, .alert, .stats, .table) { --radius-box: var(--radius-lg); border-radius: var(--radius-lg); }


/* Focus: a primary border and an accent ring, as in the validated inputs. */
.input:focus-within, .pin-input:focus {
  --input-color: var(--color-primary); border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 45%, transparent);
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The code's boxes: a digit fills its box from the middle out, a circle growing to the corners, the colours turned
   over (the text colour behind it, the page's for the digit), so the digit shows as the fill grows. The page marks a
   filled box data-filled. */
@property --pin-fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.pin-input {
  background-image: radial-gradient(circle at center, var(--color-text) var(--pin-fill), transparent calc(var(--pin-fill) * 1.01));
  transition: --pin-fill var(--motion-fill) var(--motion-ease), border-color var(--motion-fade), box-shadow var(--motion-fade);
}
.pin-input[data-filled] { --pin-fill: 100%; border-color: var(--color-text); color: var(--color-page); }
/* The code accepted: one band opens over the boxes from the middle, then the Yes icon rises in. The page puts
   <span class="pin-done"> with the icon after the last box, in a group that is position: relative. */
.pin-input ~ .pin-done {
  position: absolute; inset: -1px; display: grid; place-items: center; border-radius: var(--radius-lg); pointer-events: none;
  background: var(--color-text); color: var(--color-page); animation: pin-done-open var(--motion-fill) var(--motion-ease) both;
}
.pin-input ~ .pin-done svg { width: 28px; height: 28px; animation: pin-done-tick var(--motion-fill) var(--motion-ease) calc(var(--motion-fill) / 2) both; }
@keyframes pin-done-open { from { clip-path: inset(0 50% round var(--radius-lg)); } to { clip-path: inset(0 0 round var(--radius-lg)); } }
@keyframes pin-done-tick { from { opacity: 0; transform: translateY(8px) scale(.85); } }
/* A code that did not pass: the boxes shake under one band in the error colour with the No icon, then empty for a new
   try. The page sets data-error on the group and puts <span class="pin-error"> with the icon as for pin-done. */
.pin-input ~ .pin-error {
  position: absolute; inset: -1px; display: grid; place-items: center; border-radius: var(--radius-lg); pointer-events: none;
  background: var(--color-error); color: var(--color-page); animation: pin-done-open var(--motion-fill) var(--motion-ease) both;
}
.pin-input ~ .pin-error svg { width: 28px; height: 28px; }
[data-error]:has(> .pin-input) { animation: pin-shake var(--motion-shake) var(--motion-ease); }
@keyframes pin-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* The code being checked (aria-busy on the group): the boxes breathe until the answer. */
[aria-busy="true"]:has(> .pin-input) > .pin-input { animation: pin-wait calc(var(--motion-fill) * 3) ease-in-out infinite alternate; }
@keyframes pin-wait { to { opacity: .55; } }

/* FlyonUI's examples size things between the four heights: each to its height (Sizes). */
.size-9\.5 { width: var(--h-medium); height: var(--h-medium); }  /* a button-high square or circle: 38 -> 36 */
.size-7\.5 { width: var(--h-small); height: var(--h-small); }    /* a step's number, a small avatar: 30 -> 28 */
.btn.size-5\.5 { width: var(--h-inline); height: var(--h-inline); min-height: 0; border-radius: var(--radius-xs); }  /* 22 -> 20 */
.badge.size-6 { border-radius: var(--radius-xs); }

/* A mockup's address bar is a small field. */
.mockup-browser-toolbar .input { border-radius: var(--radius-sm); }

/* A theme whose main colour is too light for text on a light page: its accent text darkens. Supagent's blue reads as is. */
:root[data-palette]:not([data-theme="dark"]) :is(.text-accent, .link-accent, .badge-accent:is(.badge-soft, .badge-outline), .btn-accent:is(.btn-soft, .btn-outline, .btn-text), .alert-accent:is(.alert-soft, .alert-outline, .alert-dashed)) {
  color: color-mix(in oklab, var(--color-accent) 45%, var(--color-text)); }


/* Loading placeholders (Design system, Loading): while a page waits for its data, its own layout in grey shapes with a
   light sweeping across them (Motion: Sweep), never a spinner. A shape is the template's skeleton, always sweeping, a
   bar's corner (xs) unless it takes its control's own (h-(--h-medium) rounded-md); .skeleton-lines holds lines of
   text: a row of the text's own line height (1lh) each, a bar of .7em in its middle. Still with reduced motion. */
.skeleton { --radius-box: var(--radius-xs); animation: skeleton var(--motion-sweep, 1.8s) ease-in-out infinite; }
/* Its corner class wins, whichever file a product loads last (the skeleton draws its corner from --radius-box). */
.skeleton.rounded-none { --radius-box: 0px; }
.skeleton.rounded-mark { --radius-box: var(--radius-mark); }
.skeleton.rounded-xs { --radius-box: var(--radius-xs); }
.skeleton.rounded-sm { --radius-box: var(--radius-sm); }
.skeleton.rounded-md { --radius-box: var(--radius-md); }
.skeleton.rounded-lg { --radius-box: var(--radius-lg); }
.skeleton.rounded-xl { --radius-box: var(--radius-xl); }
.skeleton:is(.rounded-round, .rounded-full) { --radius-box: var(--radius-round); }
.skeleton-lines { display: grid; grid-auto-rows: 1lh; align-items: center; }
.skeleton-lines > .skeleton { height: .7em; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Notifications (the template's toasts, Notyf, shown by Supagent.toast): a card centred at the top of the window, dark
   in both modes as the tooltips (its box takes the dark theme's names: Supagent.toast marks it), its words in the body
   size, the success's circled check in the Pays green and the error's mark in its red, both as they read on dark.
   Inside the utilities layer: FlyonUI's own toast rules are important ones there. */
@layer utilities {
  .notyf { padding: 16px !important; background: transparent !important; }
  .notyf__toast { max-width: min(560px, calc(100vw - 32px)) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important;
    background-color: color-mix(in oklab, var(--color-surface) 88%, var(--color-text)) !important; }
  .notyf__toast .notyf__ripple { display: none !important; }  /* the card is its colour already: no circle sweeping into it */
  .notyf__toast .notyf__wrapper { padding: 16px 20px !important; align-items: flex-start !important; }
  .notyf__toast .notyf__icon { background: transparent !important; box-shadow: none !important; margin-top: 1px; }
  .notyf__toast .notyf__icon i { width: 22px !important; height: 22px !important; }
  .notyf__toast .notyf__message { color: var(--color-text) !important; font-size: var(--text-body) !important; line-height: 1.5 !important; }
  .notyf__toast .notyf__title { display: block; font-weight: 600; }
  .notyf__toast .notyf__text { display: block; color: var(--color-muted); }
}
@media (prefers-reduced-motion: reduce) { .notyf__toast, .notyf__toast .notyf__ripple { animation: none !important; } }