*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}html{font-family:var(--uif-font-sans);font-size:100%;line-height:var(--uif-leading-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{color:var(--uif-text);background:var(--uif-bg);font-family:inherit;font-size:var(--uif-type-body-size);line-height:inherit}h1,h2,h3,h4,h5,h6,p{margin-block-start:0}h1,h2,h3,h4,h5,h6{color:var(--uif-text-strong);line-height:var(--uif-leading-title);text-wrap:balance}h1,h2{font-weight:var(--uif-weight-page-title)}h3,h4,h5,h6{font-weight:var(--uif-weight-component-title)}p{margin-block-end:var(--uif-space-4)}img,svg,video{max-width:100%;display:block}button,input,select,textarea{font:inherit}

:root,[data-theme="light"]{--uif-color-primary:#0e68b0;--uif-accent:var(--uif-color-primary);--uif-color-secondary:#64748b;--uif-color-success:#16835f;--uif-color-warning:#b66a09;--uif-color-danger:#c9363e;--uif-color-info:#087f9c;--uif-chart-1:var(--uif-color-primary);--uif-chart-2:var(--uif-color-success);--uif-chart-3:var(--uif-color-warning);--uif-chart-4:var(--uif-color-danger);--uif-chart-5:var(--uif-color-info);--uif-chart-6:#7257b8;--uif-chart-7:#0f766e;--uif-chart-8:#9333ea;--uif-chart-grid:#e3eaf2;--uif-chart-axis:#65758a;--uif-chart-label:var(--uif-text-muted);--uif-chart-tooltip-bg:var(--uif-surface-elevated);--uif-bg:#f6f9fc;--uif-surface:#f8fbfe;--uif-surface-muted:#eef4f9;--uif-surface-elevated:#fff;--uif-surface-interactive:#fff;--uif-text:#1c2a3a;--uif-text-strong:#122234;--uif-text-muted:#607186;--uif-text-subtle:#748397;--uif-border:#dbe4ee;--uif-border-strong:#c7d3df;--uif-font-sans:Inter,proxima-nova,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--uif-font-family:var(--uif-font-sans);--uif-font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--uif-weight-regular:400;--uif-weight-medium:500;--uif-weight-semibold:600;--uif-weight-bold:700;--uif-weight-body:var(--uif-weight-regular);--uif-weight-emphasis:var(--uif-weight-medium);--uif-weight-control:var(--uif-weight-medium);--uif-weight-control-active:var(--uif-weight-semibold);--uif-weight-component-title:var(--uif-weight-medium);--uif-weight-section-title:var(--uif-weight-semibold);--uif-weight-page-title:var(--uif-weight-semibold);--uif-weight-label:var(--uif-weight-semibold);--uif-weight-metric:var(--uif-weight-semibold);--uif-weight-display:var(--uif-weight-bold);--uif-leading-tight:1.1;--uif-leading-title:1.18;--uif-leading-body:1.58;--uif-leading-relaxed:1.7;--uif-tracking-tight:-.018em;--uif-tracking-normal:0;--uif-tracking-wide:.075em;--uif-measure-copy:68ch;--uif-measure-wide:82ch;--uif-space-1:.25rem;--uif-space-2:.5rem;--uif-space-3:.75rem;--uif-space-4:1rem;--uif-space-5:1.5rem;--uif-space-6:2rem;--uif-space-7:3rem;--uif-space-8:4rem;--uif-text-xs:.75rem;--uif-text-sm:.875rem;--uif-text-md:1rem;--uif-text-lg:1.125rem;--uif-text-xl:1.375rem;--uif-text-2xl:1.75rem;--uif-text-3xl:2.25rem;--uif-text-4xl:3rem;--uif-type-display-size:clamp(2.5rem,4vw,3.5rem);--uif-type-page-title-size:clamp(1.85rem,2.7vw,2.4rem);--uif-type-section-title-size:clamp(1.35rem,1.7vw,1.7rem);--uif-type-component-title-size:1.125rem;--uif-type-body-size:1rem;--uif-type-supporting-size:.9375rem;--uif-type-label-size:.75rem;--uif-type-caption-size:.8125rem;--uif-radius-sm:.25rem;--uif-radius-md:.375rem;--uif-radius-lg:.5rem;--uif-radius-xl:.625rem;--uif-shadow-sm:0 2px 8px rgba(16,42,67,.055);--uif-shadow-md:0 12px 30px rgba(16,42,67,.08);--uif-shadow-lg:0 22px 54px rgba(16,42,67,.13);--uif-z-dropdown:1000;--uif-z-popover:1050;--uif-z-modal:1100;--uif-z-toast:1200;--uif-motion-fast:120ms;--uif-motion-base:220ms;--uif-motion-slow:380ms;--uif-ease-standard:cubic-bezier(.2,0,0,1);--uif-ease-emphasized:cubic-bezier(.2,0,0,1.2);--uif-breakpoint-sm:36rem;--uif-breakpoint-md:48rem;--uif-breakpoint-lg:72rem;--uif-container:76rem}
[data-theme="dark"]{--uif-bg:#0f172a;--uif-surface:#172337;--uif-surface-muted:#1c2a40;--uif-surface-elevated:#1e293b;--uif-surface-interactive:#1e293b;--uif-text:#e2e8f0;--uif-text-strong:#f8fafc;--uif-text-muted:#b5c1d1;--uif-text-subtle:#93a4b8;--uif-border:#334155;--uif-border-strong:#475569}
[data-theme="high-contrast"]{--uif-bg:#fff;--uif-surface:#fff;--uif-surface-muted:#f2f2f2;--uif-surface-elevated:#fff;--uif-surface-interactive:#fff;--uif-text:#000;--uif-text-strong:#000;--uif-text-muted:#222;--uif-text-subtle:#333;--uif-border:#000;--uif-border-strong:#000;--uif-color-primary:#004f91;--uif-focus-color:#000;--uif-focus-width:3px}
[data-uif-density="compact"]{--uif-density-factor:.8;--uif-control-min-block-size:2rem;--uif-control-padding-block:.375rem;--uif-control-padding-inline:.625rem}
:root{--uif-density-factor:1;--uif-control-min-block-size:2.5rem;--uif-control-padding-block:.5rem;--uif-control-padding-inline:.75rem;--uif-focus-color:var(--uif-color-primary);--uif-focus-width:2px}
@media (prefers-reduced-motion: reduce){:root{--uif-motion-fast:0ms;--uif-motion-base:0ms;--uif-motion-slow:0ms}}
@media (forced-colors: active){:root{--uif-bg:Canvas;--uif-surface:Canvas;--uif-surface-muted:Canvas;--uif-surface-elevated:Canvas;--uif-surface-interactive:Canvas;--uif-text:CanvasText;--uif-text-strong:CanvasText;--uif-text-muted:CanvasText;--uif-text-subtle:CanvasText;--uif-border:CanvasText;--uif-border-strong:CanvasText;--uif-color-primary:LinkText;--uif-focus-color:Highlight}}
:root{--uif-icon-blue:#176fbb;--uif-icon-blue-bg:#dcecff;--uif-icon-green:#16835f;--uif-icon-green-bg:#dcefe7;--uif-icon-teal:#0b8f84;--uif-icon-teal-bg:#dff3f0;--uif-icon-cyan:#0584a8;--uif-icon-cyan-bg:#dcf3f8;--uif-icon-violet:#7157b7;--uif-icon-violet-bg:#ece7f8;--uif-icon-amber:#a65f00;--uif-icon-amber-bg:#fff0d2;--uif-icon-red:#b33a3a;--uif-icon-red-bg:#fbe5e5;--uif-icon-neutral:#526172;--uif-icon-neutral-bg:#e9eef3}

.uif-container{width:min(100% - 2rem,72rem);margin-inline:auto;container-type:inline-size}.uif-grid{display:grid;gap:var(--uif-space-4)}.uif-flex{display:flex;gap:var(--uif-space-3)}.uif-stack{display:flex;flex-direction:column;gap:var(--uif-space-3)}.uif-cluster{display:flex;flex-wrap:wrap;gap:var(--uif-space-2);align-items:center}.uif-hidden{display:none!important}.uif-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.uif-block{display:block}.uif-inline{display:inline}.uif-inline-block{display:inline-block}.uif-contents{display:contents}.uif-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--uif-space-4)}.uif-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--uif-space-4)}.uif-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--uif-space-4)}.uif-flex-col{display:flex;flex-direction:column}.uif-flex-wrap{flex-wrap:wrap}.uif-items-start{align-items:flex-start}.uif-items-center{align-items:center}.uif-items-end{align-items:flex-end}.uif-justify-between{justify-content:space-between}.uif-justify-center{justify-content:center}.uif-gap-1{gap:var(--uif-space-1)}.uif-gap-2{gap:var(--uif-space-2)}.uif-gap-3{gap:var(--uif-space-3)}.uif-gap-4{gap:var(--uif-space-4)}.uif-gap-5{gap:var(--uif-space-5)}.uif-gap-6{gap:var(--uif-space-6)}.uif-text-sm{font-size:var(--uif-text-sm)}.uif-text-md{font-size:var(--uif-text-md)}.uif-text-lg{font-size:var(--uif-text-lg)}.uif-text-xl{font-size:var(--uif-text-xl)}.uif-text-2xl{font-size:var(--uif-text-2xl)}.uif-text-3xl{font-size:var(--uif-text-3xl)}.uif-text-4xl{font-size:var(--uif-text-4xl)}.uif-font-normal{font-weight:var(--uif-weight-regular)}.uif-font-medium{font-weight:var(--uif-weight-medium)}.uif-font-semibold{font-weight:var(--uif-weight-semibold)}.uif-font-bold{font-weight:var(--uif-weight-bold)}.uif-leading-tight{line-height:var(--uif-leading-tight)}.uif-leading-title{line-height:var(--uif-leading-title)}.uif-leading-body{line-height:var(--uif-leading-body)}.uif-leading-relaxed{line-height:var(--uif-leading-relaxed)}.uif-text-left{text-align:left}.uif-text-center{text-align:center}.uif-text-right{text-align:right}.uif-text-start{text-align:start}.uif-text-end{text-align:end}.uif-text-muted{color:var(--uif-text-muted)}.uif-text-subtle{color:var(--uif-text-subtle)}.uif-text-primary{color:var(--uif-color-primary)}.uif-bg-surface{background:var(--uif-surface)}.uif-bg-muted{background:var(--uif-surface-muted)}.uif-bg-elevated{background:var(--uif-surface-elevated)}.uif-border{border:1px solid var(--uif-border)}.uif-rounded-sm{border-radius:var(--uif-radius-sm)}.uif-rounded{border-radius:var(--uif-radius-md)}.uif-rounded-lg{border-radius:var(--uif-radius-lg)}.uif-rounded-xl{border-radius:var(--uif-radius-xl)}.uif-shadow-sm{box-shadow:var(--uif-shadow-sm)}.uif-shadow-md{box-shadow:var(--uif-shadow-md)}.uif-shadow-lg{box-shadow:var(--uif-shadow-lg)}.uif-page-title{margin:0;color:var(--uif-text-strong);font-size:var(--uif-type-page-title-size);font-weight:var(--uif-weight-page-title);line-height:var(--uif-leading-title);letter-spacing:var(--uif-tracking-tight);text-wrap:balance}.uif-page-description{max-width:var(--uif-measure-copy);margin:var(--uif-space-2) 0 0;color:var(--uif-text-muted);font-size:var(--uif-type-supporting-size);line-height:var(--uif-leading-body)}.uif-section-title{margin:0;color:var(--uif-text-strong);font-size:var(--uif-type-section-title-size);font-weight:var(--uif-weight-section-title);line-height:var(--uif-leading-title);letter-spacing:var(--uif-tracking-tight);text-wrap:balance}.uif-section-description{max-width:var(--uif-measure-wide);margin:var(--uif-space-1) 0 0;color:var(--uif-text-muted);font-size:var(--uif-type-supporting-size);line-height:var(--uif-leading-body)}.uif-component-title{margin:0;color:var(--uif-text-strong);font-size:var(--uif-type-component-title-size);font-weight:var(--uif-weight-component-title);line-height:1.3}.uif-label{color:var(--uif-text-muted);font-size:var(--uif-type-label-size);font-weight:var(--uif-weight-label);line-height:1.35;letter-spacing:var(--uif-tracking-wide);text-transform:uppercase}.uif-caption{color:var(--uif-text-subtle);font-size:var(--uif-type-caption-size);line-height:1.45}.uif-prose{max-width:var(--uif-measure-copy);color:var(--uif-text);font-size:var(--uif-type-body-size);line-height:var(--uif-leading-relaxed)}.uif-prose>:last-child{margin-bottom:0}.uif-m-0{margin:0}.uif-m-1{margin:var(--uif-space-1)}.uif-m-2{margin:var(--uif-space-2)}.uif-m-3{margin:var(--uif-space-3)}.uif-m-4{margin:var(--uif-space-4)}.uif-m-5{margin:var(--uif-space-5)}.uif-mt-0{margin-top:0}.uif-mt-1{margin-top:var(--uif-space-1)}.uif-mt-2{margin-top:var(--uif-space-2)}.uif-mt-3{margin-top:var(--uif-space-3)}.uif-mt-4{margin-top:var(--uif-space-4)}.uif-mt-5{margin-top:var(--uif-space-5)}.uif-mb-0{margin-bottom:0}.uif-mb-1{margin-bottom:var(--uif-space-1)}.uif-mb-2{margin-bottom:var(--uif-space-2)}.uif-mb-3{margin-bottom:var(--uif-space-3)}.uif-mb-4{margin-bottom:var(--uif-space-4)}.uif-mb-5{margin-bottom:var(--uif-space-5)}.uif-ms-0{margin-inline-start:0}.uif-ms-1{margin-inline-start:var(--uif-space-1)}.uif-ms-2{margin-inline-start:var(--uif-space-2)}.uif-ms-3{margin-inline-start:var(--uif-space-3)}.uif-ms-4{margin-inline-start:var(--uif-space-4)}.uif-ms-5{margin-inline-start:var(--uif-space-5)}.uif-me-0{margin-inline-end:0}.uif-me-1{margin-inline-end:var(--uif-space-1)}.uif-me-2{margin-inline-end:var(--uif-space-2)}.uif-me-3{margin-inline-end:var(--uif-space-3)}.uif-me-4{margin-inline-end:var(--uif-space-4)}.uif-me-5{margin-inline-end:var(--uif-space-5)}.uif-mx-0{margin-inline:0}.uif-mx-1{margin-inline:var(--uif-space-1)}.uif-mx-2{margin-inline:var(--uif-space-2)}.uif-mx-3{margin-inline:var(--uif-space-3)}.uif-mx-4{margin-inline:var(--uif-space-4)}.uif-mx-5{margin-inline:var(--uif-space-5)}.uif-mx-auto{margin-inline:auto}.uif-my-0{margin-block:0}.uif-my-1{margin-block:var(--uif-space-1)}.uif-my-2{margin-block:var(--uif-space-2)}.uif-my-3{margin-block:var(--uif-space-3)}.uif-my-4{margin-block:var(--uif-space-4)}.uif-my-5{margin-block:var(--uif-space-5)}.uif-p-0{padding:0}.uif-p-1{padding:var(--uif-space-1)}.uif-p-2{padding:var(--uif-space-2)}.uif-p-3{padding:var(--uif-space-3)}.uif-p-4{padding:var(--uif-space-4)}.uif-p-5{padding:var(--uif-space-5)}.uif-p-6{padding:var(--uif-space-6)}.uif-pt-0{padding-top:0}.uif-pt-1{padding-top:var(--uif-space-1)}.uif-pt-2{padding-top:var(--uif-space-2)}.uif-pt-3{padding-top:var(--uif-space-3)}.uif-pt-4{padding-top:var(--uif-space-4)}.uif-pt-5{padding-top:var(--uif-space-5)}.uif-pb-0{padding-bottom:0}.uif-pb-1{padding-bottom:var(--uif-space-1)}.uif-pb-2{padding-bottom:var(--uif-space-2)}.uif-pb-3{padding-bottom:var(--uif-space-3)}.uif-pb-4{padding-bottom:var(--uif-space-4)}.uif-pb-5{padding-bottom:var(--uif-space-5)}.uif-ps-0{padding-inline-start:0}.uif-ps-1{padding-inline-start:var(--uif-space-1)}.uif-ps-2{padding-inline-start:var(--uif-space-2)}.uif-ps-3{padding-inline-start:var(--uif-space-3)}.uif-ps-4{padding-inline-start:var(--uif-space-4)}.uif-ps-5{padding-inline-start:var(--uif-space-5)}.uif-pe-0{padding-inline-end:0}.uif-pe-1{padding-inline-end:var(--uif-space-1)}.uif-pe-2{padding-inline-end:var(--uif-space-2)}.uif-pe-3{padding-inline-end:var(--uif-space-3)}.uif-pe-4{padding-inline-end:var(--uif-space-4)}.uif-pe-5{padding-inline-end:var(--uif-space-5)}.uif-px-0{padding-inline:0}.uif-px-1{padding-inline:var(--uif-space-1)}.uif-px-2{padding-inline:var(--uif-space-2)}.uif-px-3{padding-inline:var(--uif-space-3)}.uif-px-4{padding-inline:var(--uif-space-4)}.uif-px-5{padding-inline:var(--uif-space-5)}.uif-py-0{padding-block:0}.uif-py-1{padding-block:var(--uif-space-1)}.uif-py-2{padding-block:var(--uif-space-2)}.uif-py-3{padding-block:var(--uif-space-3)}.uif-py-4{padding-block:var(--uif-space-4)}.uif-py-5{padding-block:var(--uif-space-5)}.uif-w-full{width:100%}.uif-h-full{height:100%}.uif-min-h-screen{min-height:100dvh}.uif-overflow-auto{overflow:auto}.uif-overflow-hidden{overflow:hidden}.uif-scroll-region-xs{max-height:12rem;overflow:auto}.uif-scroll-region-sm{max-height:20rem;overflow:auto}.uif-preview-frame{min-height:26.25rem}.uif-media-sm{max-width:13.75rem}.uif-table-select-col{width:2.5rem}.uif-selection-control{align-items:center;display:flex;gap:.45rem;margin-top:.2rem}.uif-selection-control input{height:1rem;width:1rem}.uif-selection-active{border-color:#2563eb;box-shadow:0 0 0 .12rem #2563eb1f}.uif-drop-target{min-height:10.625rem}.uif-code-preview{min-height:13.75rem;white-space:pre-wrap}.uif-whitespace-pre-wrap{white-space:pre-wrap}.uif-relative{position:relative}.uif-absolute{position:absolute}.uif-sticky{position:sticky}.uif-top-0{top:0}.uif-bottom-0{bottom:0}.uif-z-dropdown{z-index:var(--uif-z-dropdown)}.uif-z-modal{z-index:var(--uif-z-modal)}.uif-cursor-pointer{cursor:pointer}.uif-select-none{user-select:none}.uif-pointer-events-none{pointer-events:none}.uif-safe-top{padding-top:env(safe-area-inset-top)}.uif-safe-bottom{padding-bottom:env(safe-area-inset-bottom)}.uif-touch-target{min-height:44px;min-width:44px}.uif-focus-ring:focus-visible{outline:2px solid var(--uif-color-primary);outline-offset:2px}.uif-skip-link{position:absolute;left:var(--uif-space-2);top:var(--uif-space-2);z-index:var(--uif-z-toast);transform:translateY(-150%)}.uif-skip-link:focus{transform:translateY(0)}@container (max-width: 40rem){.uif-grid,.uif-grid-2,.uif-grid-3,.uif-grid-4{grid-template-columns:1fr}.uif-sm-stack{display:flex;flex-direction:column}}.uif-is-animating{animation-duration:var(--uif-motion-base);animation-timing-function:var(--uif-ease-standard);animation-fill-mode:both}.uif-animate-fade-in{animation-name:uif-fade-in}.uif-animate-fade-out{animation-name:uif-fade-out}.uif-animate-slide-up{animation-name:uif-slide-up}.uif-animate-slide-down{animation-name:uif-slide-down}.uif-animate-slide-left{animation-name:uif-slide-left}.uif-animate-slide-right{animation-name:uif-slide-right}.uif-animate-slide-out-up{animation-name:uif-slide-out-up}.uif-animate-slide-out-down{animation-name:uif-slide-out-down}.uif-animate-scale-in{animation-name:uif-scale-in}.uif-animate-scale-out{animation-name:uif-scale-out}.uif-animate-pop{animation-name:uif-pop;animation-timing-function:var(--uif-ease-emphasized)}.uif-animate-pulse{animation-name:uif-pulse}.uif-animate-shake{animation-name:uif-shake}.uif-animate-highlight{animation-name:uif-highlight}.uif-animate-flash{animation-name:uif-flash}.uif-animate-bounce{animation-name:uif-bounce}.uif-animate-wiggle{animation-name:uif-wiggle}.uif-animate-shimmer{animation-name:uif-shimmer}.uif-animate-spin{animation-name:uif-spin}.uif-animate-skeleton-pulse{animation-name:uif-skeleton-pulse}.uif-animate-crossfade{animation-name:uif-crossfade}@keyframes uif-fade-in{0%{opacity:0}to{opacity:1}}@keyframes uif-fade-out{0%{opacity:1}to{opacity:0}}@keyframes uif-slide-up{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes uif-slide-down{0%{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes uif-slide-left{0%{opacity:0;transform:translate(.75rem)}to{opacity:1;transform:translate(0)}}@keyframes uif-slide-right{0%{opacity:0;transform:translate(-.75rem)}to{opacity:1;transform:translate(0)}}@keyframes uif-slide-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.75rem)}}@keyframes uif-slide-out-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.75rem)}}@keyframes uif-scale-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes uif-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes uif-pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes uif-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--uif-accent),transparent 60%)}50%{box-shadow:0 0 0 .35rem color-mix(in srgb,var(--uif-accent),transparent 86%)}}@keyframes uif-shake{0%,to{transform:translate(0)}25%{transform:translate(-.35rem)}75%{transform:translate(.35rem)}}@keyframes uif-highlight{0%{background:color-mix(in srgb,var(--uif-color-warning),transparent 70%)}to{background:transparent}}@keyframes uif-flash{0%,to{opacity:1}50%{opacity:.35}}@keyframes uif-bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-.45rem)}70%{transform:translateY(.15rem)}}@keyframes uif-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes uif-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes uif-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes uif-crossfade{0%{opacity:.35}to{opacity:1}}@media(prefers-reduced-motion:reduce){.uif-is-animating{animation:none!important;transition:none!important}}

.uif-card {
  background: var(--uif-surface);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  padding: var(--uif-space-4);
  box-shadow: var(--uif-shadow-sm);
}
.uif-btn {
  background: var(--uif-color-primary);
  color: #fff;
  border: none;
  border-radius: var(--uif-radius-sm);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
}
.uif-btn-secondary {
  background: var(--uif-surface);
  color: var(--uif-text);
  border: 1px solid var(--uif-border);
}
.uif-btn-danger {
  background: var(--uif-color-danger);
  color: #fff;
}
.uif-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uif-space-2);
  align-items: center;
  justify-content: space-between;
}
.uif-app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 16rem 1fr;
  background: var(--uif-bg);
  color: var(--uif-text);
}
.uif-sidebar {
  padding: var(--uif-space-4);
  border-inline-end: 1px solid var(--uif-border);
  background: var(--uif-surface);
}
.uif-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-3) var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-main {
  min-width: 0;
  padding: var(--uif-space-4);
}
.uif-field {
  display: grid;
  gap: var(--uif-space-1);
}
.uif-input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-bg);
  color: var(--uif-text);
}
.uif-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  background: var(--uif-surface);
  border: 1px solid var(--uif-border);
  font-size: var(--uif-text-sm);
}
.uif-alert {
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface);
}
.uif-table {
  width: 100%;
  border-collapse: collapse;
}
.uif-table th,
.uif-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--uif-border);
  text-align: left;
}
.uif-table th[data-uif-sort] {
  cursor: pointer;
}
.uif-empty {
  padding: var(--uif-space-6);
  text-align: center;
  color: var(--uif-text-muted);
}
.uif-skeleton {
  border-radius: var(--uif-radius-sm);
  background: linear-gradient(90deg, var(--uif-surface), var(--uif-border), var(--uif-surface));
  background-size: 200% 100%;
  animation: uif-skeleton 1.2s infinite;
}
@keyframes uif-skeleton {
  to {
    background-position: -200% 0;
  }
}
.uif-toast-stack {
  position: fixed;
  z-index: var(--uif-z-toast);
  display: grid;
  gap: var(--uif-space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.uif-toast-stack-top-start {
  top: 1rem;
  inset-inline-start: 1rem;
}
.uif-toast-stack-top-center {
  top: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
.uif-toast-stack-top-end {
  top: 1rem;
  inset-inline-end: 1rem;
}
.uif-toast-stack-bottom-start {
  bottom: 1rem;
  inset-inline-start: 1rem;
}
.uif-toast-stack-bottom-center {
  bottom: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
.uif-toast-stack-bottom-end {
  inset-inline-end: 1rem;
  bottom: 1rem;
}
.uif-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: 0.75rem 1rem;
  background: var(--uif-surface-elevated);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  box-shadow: var(--uif-shadow-md);
  pointer-events: auto;
}
.uif-toast-success {
  border-color: color-mix(in srgb, var(--uif-color-success), transparent 65%);
}
.uif-toast-warning {
  border-color: color-mix(in srgb, var(--uif-color-warning), transparent 65%);
}
.uif-toast-danger {
  border-color: color-mix(in srgb, var(--uif-color-danger), transparent 65%);
}
.uif-toast-info {
  border-color: color-mix(in srgb, var(--uif-color-info), transparent 65%);
}
.uif-toast-message {
  min-width: 0;
}
.uif-toast-close {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--uif-radius-sm);
  background: transparent;
  color: var(--uif-text-muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.uif-toast-close:hover,
.uif-toast-close:focus-visible {
  background: var(--uif-surface);
  color: var(--uif-text);
  outline: 2px solid color-mix(in srgb, var(--uif-accent), transparent 55%);
  outline-offset: 1px;
}
.uif-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.uif-chart-svg rect,
.uif-chart-svg .uif-chart-mark {
  fill: var(--uif-chart-1);
  stroke: none;
}
.uif-chart-svg .uif-chart-line {
  stroke: var(--uif-chart-1);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.uif-chart-svg .uif-chart-area,
.uif-chart-radar-area {
  fill: color-mix(in srgb, var(--uif-chart-1), transparent 72%);
  stroke: var(--uif-chart-1);
  stroke-width: 2;
  stroke-linejoin: round;
}
.uif-chart-grid {
  stroke: var(--uif-chart-grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.uif-chart-grid-polygon {
  fill: none;
  stroke: var(--uif-chart-grid);
  stroke-width: 1;
}
.uif-chart-axis-label {
  fill: var(--uif-chart-axis);
  font-size: 11px;
  font-weight: 600;
}
.uif-chart-value {
  fill: none;
  stroke: var(--uif-chart-1);
  stroke-width: 12;
  transform: rotate(-90deg);
  transform-origin: center;
}
.uif-chart-ring-bg {
  fill: none;
  stroke: var(--uif-border);
  stroke-width: 12;
}
.uif-chart-range {
  fill: var(--uif-surface);
}
.uif-chart-value-bar {
  fill: var(--uif-chart-1);
}
.uif-chart-target {
  stroke: var(--uif-color-danger);
  stroke-width: 2;
}
.uif-chart-svg text {
  fill: var(--uif-chart-label);
  font-size: 12px;
  font-weight: 600;
}
.uif-chart-metric {
  display: grid;
  gap: var(--uif-space-1);
}
.uif-chart-metric strong {
  font-size: 2rem;
}
.uif-mobile-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--uif-bg);
  color: var(--uif-text);
}
.uif-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: calc(var(--uif-space-3) + env(safe-area-inset-top)) var(--uif-space-4) var(--uif-space-3);
  background: var(--uif-surface-elevated);
  border-bottom: 1px solid var(--uif-border);
}
.uif-mobile-content {
  padding: var(--uif-space-4);
  overflow: auto;
}
.uif-mobile-bottom-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  padding: var(--uif-space-2) var(--uif-space-3)
    calc(var(--uif-space-2) + env(safe-area-inset-bottom));
  background: var(--uif-surface-elevated);
  border-top: 1px solid var(--uif-border);
}
.uif-sheet-modal {
  position: fixed;
  inset: auto 0 0;
  max-height: 80dvh;
  padding: var(--uif-space-4);
  border-radius: var(--uif-radius-lg) var(--uif-radius-lg) 0 0;
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-swipe-action,
.uif-pull-to-refresh {
  touch-action: pan-y;
}
.uif-offline-banner {
  padding: var(--uif-space-2) var(--uif-space-4);
  background: var(--uif-color-warning);
  color: #111827;
}
.uif-tool-approval,
.uif-ai-card {
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  padding: var(--uif-space-4);
  background: var(--uif-surface-elevated);
}
.uif-tooltip,
.uif-popover,
[data-uif='popover'] [data-uif-role='panel'] {
  position: absolute;
  z-index: var(--uif-z-popover);
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-progress,
[data-uif='progress'] {
  position: relative;
  overflow: hidden;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--uif-border);
}
.uif-progress::before,
[data-uif='progress']::before {
  content: '';
  display: block;
  width: var(--uif-progress, 0%);
  height: 100%;
  background: var(--uif-color-primary);
}
.uif-pagination {
  display: flex;
  gap: var(--uif-space-1);
  align-items: center;
}
.uif-pagination [aria-current='page'] {
  font-weight: 600;
  border-color: var(--uif-color-primary);
}
.uif-command-menu {
  display: grid;
  gap: var(--uif-space-2);
  padding: var(--uif-space-2);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface);
}
.uif-command-menu [data-uif-state='active'] {
  outline: 2px solid var(--uif-color-primary);
}
.uif-stepper {
  display: flex;
  gap: var(--uif-space-2);
  align-items: center;
}
.uif-stepper [data-uif-state='active'] {
  font-weight: 600;
  color: var(--uif-color-primary);
}
.uif-file-upload {
  display: grid;
  gap: var(--uif-space-2);
  padding: var(--uif-space-3);
  border: 1px dashed var(--uif-border);
  border-radius: var(--uif-radius-md);
}
.uif-combobox {
  position: relative;
  display: grid;
  gap: var(--uif-space-1);
}
.uif-combobox [data-uif-role='option'] {
  padding: 0.375rem 0.5rem;
  cursor: pointer;
}
.uif-combobox [data-uif-role='option']:hover {
  background: var(--uif-surface-elevated);
}
.uif-table-state {
  text-align: center;
  color: var(--uif-text-muted);
  padding: var(--uif-space-5);
}
.uif-table-wrap,
.uif-table-scroll {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.uif-table-sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--uif-surface-elevated);
}
.uif-table-sticky-col th:first-child,
.uif-table-sticky-col td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--uif-surface-elevated);
}
.uif-table-numeric,
.uif-table [data-uif-align='end'] {
  text-align: right;
}
.uif-table-actions {
  white-space: nowrap;
  text-align: right;
}
.uif-table-caption,
.uif-table-summary,
.uif-table-status {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-table th[data-uif-sort][data-uif-sort-active='true'] {
  color: var(--uif-accent);
}
.uif-table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.uif-table-sort-icon {
  width: 0.7rem;
  height: 0.7rem;
  display: inline-block;
}
.uif-table-filter-row {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-table-card-list {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-table-card {
  display: grid;
  gap: var(--uif-space-2);
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-error-summary {
  border: 1px solid var(--uif-color-danger);
  border-radius: var(--uif-radius-md);
  padding: var(--uif-space-3);
  background: color-mix(in srgb, var(--uif-color-danger), transparent 90%);
}
.uif-chart-state {
  padding: var(--uif-space-4);
  text-align: center;
  color: var(--uif-text-muted);
}
.uif-chart-legend {
  display: flex;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
  font-size: var(--uif-text-sm);
  color: var(--uif-text-muted);
}
.uif-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.65rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--uif-border), transparent 18%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--uif-surface-elevated), transparent 7%);
  font-weight: 500;
}
.uif-chart-legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  display: inline-block;
}
.uif-chart-regression,
.uif-chart-reference {
  stroke: var(--uif-color-danger);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.uif-chart-mean {
  stroke: var(--uif-chart-axis);
  stroke-dasharray: 2 3;
}
.uif-chart-box {
  fill: color-mix(in srgb, var(--uif-chart-1), transparent 55%);
  stroke: var(--uif-chart-1);
  stroke-width: 2;
}
.uif-chart-mark:focus-visible {
  outline: 2px solid var(--uif-color-primary);
  outline-offset: 2px;
}
.uif-chart-data-table {
  width: 100%;
  margin-top: var(--uif-space-3);
  border-collapse: collapse;
  font-size: var(--uif-text-sm);
}
.uif-chart-data-table caption {
  text-align: left;
  color: var(--uif-text-muted);
  padding-bottom: var(--uif-space-1);
}
.uif-chart-data-table th,
.uif-chart-data-table td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--uif-border);
  text-align: left;
}
.uif-ai-prompt,
.uif-ai-result {
  display: grid;
  gap: var(--uif-space-2);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  padding: var(--uif-space-3);
  background: var(--uif-surface);
}
.uif-editor {
  display: grid;
  gap: var(--uif-space-2);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  overflow: hidden;
}
.uif-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: var(--uif-space-2);
  border-bottom: 1px solid var(--uif-border);
  background: var(--uif-surface);
}
.uif-editor-button {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-surface-elevated);
  color: var(--uif-text);
  font: inherit;
  cursor: pointer;
}
.uif-editor-button-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.uif-editor-button:hover,
.uif-editor-button:focus-visible {
  border-color: var(--uif-accent);
  color: var(--uif-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uif-accent), transparent 82%);
}
.uif-editor-button.is-active,
.uif-editor-button[aria-pressed='true'] {
  border-color: var(--uif-accent);
  background: color-mix(in srgb, var(--uif-accent), var(--uif-surface-elevated) 88%);
  color: var(--uif-accent);
}
.uif-editor[data-uif-upload-state='uploading'] .uif-editor-surface {
  cursor: progress;
}
.uif-editor[data-uif-editor-diagnostics]:not([data-uif-editor-diagnostics='0']) .uif-editor-status {
  color: var(--uif-warning-text, var(--uif-text));
}
.uif-editor-surface,
.uif-editor-source,
.uif-editor-preview {
  width: 100%;
  min-width: 0;
  padding: var(--uif-space-3);
  background: var(--uif-bg);
  color: var(--uif-text);
  line-height: 1.55;
}
.uif-editor-surface {
  overflow: auto;
  outline: none;
}
.uif-editor-surface:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--uif-accent), transparent 72%);
}
.uif-editor-source {
  border: 0;
  resize: vertical;
  font: inherit;
}
.uif-editor-preview {
  border-top: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-editor-preview h1,
.uif-editor-preview h2,
.uif-editor-preview h3 {
  margin: 0.5rem 0;
}
.uif-editor-preview p,
.uif-editor-preview ul,
.uif-editor-preview ol,
.uif-editor-preview blockquote,
.uif-editor-preview pre {
  margin: 0.5rem 0;
}
.uif-editor-preview pre {
  overflow: auto;
  padding: var(--uif-space-3);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-surface);
}
.uif-ai-history {
  display: flex;
  gap: var(--uif-space-1);
  flex-wrap: wrap;
}
.uif-risk-badge {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--uif-color-warning);
  color: #111827;
}
.uif-tool-timeline,
.uif-tool-audit {
  display: grid;
  gap: var(--uif-space-2);
  padding-inline-start: 1.25rem;
}
.uif-agent-thread,
.uif-tool-plan,
.uif-tool-permissions,
.uif-tool-receipt {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-agent-message,
.uif-agent-composer,
.uif-agent-artifact,
.uif-tool-plan,
.uif-tool-permissions,
.uif-tool-receipt {
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  padding: var(--uif-space-3);
  background: var(--uif-surface-elevated);
}
.uif-agent-message > header,
.uif-agent-composer,
.uif-agent-templates,
.uif-agent-usage {
  display: flex;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-agent-message > header {
  align-items: center;
  justify-content: space-between;
}
.uif-agent-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uif-space-2);
  margin-block-start: var(--uif-space-3);
}
.uif-agent-compatibility-notice {
  border-color: var(--uif-color-warning);
}
.uif-agent-status,
.uif-agent-source-state {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-agent-sources,
.uif-tool-plan ol,
.uif-tool-permissions ul {
  display: grid;
  gap: var(--uif-space-2);
  padding-inline-start: 1.25rem;
}
.uif-agent-data,
.uif-tool-result {
  max-width: 100%;
  overflow: auto;
  padding: var(--uif-space-3);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.uif-agent-composer label {
  display: grid;
  flex: 1 1 100%;
  gap: var(--uif-space-1);
}
.uif-agent-composer textarea {
  min-height: 6rem;
  resize: vertical;
}
.uif-agent-usage dt {
  color: var(--uif-text-muted);
}
.uif-agent-usage dd {
  margin: 0;
}
.uif-agent-error,
.uif-tool-permissions [data-uif-state='denied'],
.uif-tool-permissions [data-uif-state='missing'] {
  color: var(--uif-color-danger);
}
.uif-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--uif-space-3);
}
.uif-diff pre {
  overflow: auto;
  padding: var(--uif-space-3);
  background: var(--uif-surface);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
}
@media (max-width: 640px) {
  .uif-app-shell {
    grid-template-columns: 1fr;
  }
  .uif-sidebar {
    border-inline-end: 0;
    border-bottom: 1px solid var(--uif-border);
  }
  .uif-hide-sm {
    display: none !important;
  }
  .uif-diff {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .uif-hide-md {
    display: none !important;
  }
}
@media (max-width: 48rem) {
  .uif-table[data-uif-responsive='stack'],
  .uif-table[data-uif-responsive='stack'] thead,
  .uif-table[data-uif-responsive='stack'] tbody,
  .uif-table[data-uif-responsive='stack'] tr,
  .uif-table[data-uif-responsive='stack'] th,
  .uif-table[data-uif-responsive='stack'] td {
    display: block;
  }
  .uif-table[data-uif-responsive='stack'] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .uif-table[data-uif-responsive='stack'] tr {
    padding: var(--uif-space-3);
    border-bottom: 1px solid var(--uif-border);
  }
  .uif-table[data-uif-responsive='stack'] td {
    display: grid;
    grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr);
    gap: var(--uif-space-2);
    padding: 0.35rem 0;
    border-bottom: 0;
  }
  .uif-table[data-uif-responsive='stack'] td::before {
    content: attr(data-uif-label);
    color: var(--uif-text-muted);
    font-size: var(--uif-text-sm);
    font-weight: 600;
  }
  .uif-priority-4,
  .uif-priority-5 {
    display: none !important;
  }
}
@media (max-width: 36rem) {
  .uif-priority-3 {
    display: none !important;
  }
  .uif-table-bulkbar {
    align-items: flex-start;
    flex-direction: column;
  }
}
.uif-app-shell-fixed {
  height: 100dvh;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  overflow: hidden;
  background: var(--uif-bg);
  color: var(--uif-text);
}
.uif-skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: calc(var(--uif-z-modal) + 1);
  transform: translateY(-150%);
  padding: 0.5rem 0.75rem;
  border-radius: var(--uif-radius-sm);
  background: var(--uif-color-primary);
  color: #fff;
  text-decoration: none;
}
.uif-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.uif-app-shell-fixed.uif-shell-sidebar-collapsed {
  grid-template-columns: 4.75rem minmax(0, 1fr);
}
.uif-app-shell-fixed.uif-shell-sidebar-collapsed .uif-sidebar-brand strong,
.uif-app-shell-fixed.uif-shell-sidebar-collapsed
  .uif-sidebar-brand
  span:not(.uif-sidebar-brand-mark),
.uif-app-shell-fixed.uif-shell-sidebar-collapsed .uif-sidebar-section,
.uif-app-shell-fixed.uif-shell-sidebar-collapsed .uif-sidebar-footer {
  display: none;
}
.uif-app-shell-fixed .uif-sidebar,
.uif-sidebar-fixed {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  border-inline-end: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-shell-content {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100dvh;
}
.uif-sidebar-nav {
  display: grid;
  gap: var(--uif-space-1);
  padding: var(--uif-space-3);
}
.uif-sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.375rem;
  padding: 0 var(--uif-space-3);
  border: 1px solid transparent;
  border-radius: var(--uif-radius-md);
  color: var(--uif-text-muted);
  text-decoration: none;
  font-size: var(--uif-text-sm);
  font-weight: 500;
}
.uif-sidebar-nav a[data-uif-nav-item] {
  justify-content: flex-start;
  gap: var(--uif-space-2);
}
.uif-sidebar-nav a[data-uif-nav-item] [data-uif-icon] {
  flex: 0 0 auto;
}
.uif-sidebar-nav a[aria-current='page'],
.uif-sidebar-nav a.is-active {
  color: var(--uif-text);
  background: color-mix(in srgb, var(--uif-accent), transparent 92%);
  border-color: color-mix(in srgb, var(--uif-accent), transparent 76%);
}
.uif-responsive-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  background: var(--uif-bg);
  color: var(--uif-text);
}
.uif-responsive-shell.uif-shell-sidebar-collapsed {
  grid-template-columns: 4.75rem minmax(0, 1fr);
}
.uif-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  min-height: 3.75rem;
  padding: var(--uif-space-3) var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  color: var(--uif-text);
  font-weight: 600;
  text-decoration: none;
}
.uif-navbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-navbar-toggle {
  display: none;
}
.uif-sidebar-desktop {
  display: block;
}
.uif-sidebar-mobile-toggle {
  display: none;
}
.uif-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--uif-space-1);
  color: var(--uif-text-muted);
  font-size: 0.75rem;
}
.uif-breadcrumbs a {
  text-decoration: none;
  color: inherit;
}
.uif-breadcrumbs [aria-current='page'] {
  color: var(--uif-text);
  font-weight: var(--uif-weight-semibold);
}
.uif-button-group {
  display: inline-flex;
  align-items: stretch;
}
.uif-button-group > .uif-btn {
  border-radius: 0;
}
.uif-button-group > .uif-btn + .uif-btn {
  margin-inline-start: -1px;
}
.uif-button-group > .uif-btn:first-child {
  border-start-start-radius: var(--uif-radius-md);
  border-end-start-radius: var(--uif-radius-md);
}
.uif-button-group > .uif-btn:last-child {
  border-start-end-radius: var(--uif-radius-md);
  border-end-end-radius: var(--uif-radius-md);
}
.uif-list-group {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  list-style: none;
}
.uif-list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  min-width: 0;
  padding: var(--uif-space-3) var(--uif-space-4);
  color: var(--uif-text);
  text-decoration: none;
}
.uif-list-group-item + .uif-list-group-item {
  border-top: 1px solid var(--uif-border);
}
.uif-list-group-item:is(a, button):hover,
.uif-list-group-item:is(a, button):focus-visible {
  background: var(--uif-surface-muted);
}
.uif-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--uif-space-5);
  padding: var(--uif-space-5) var(--uif-space-5) 0;
}
.uif-page-title {
  display: grid;
  gap: var(--uif-space-1);
}
.uif-page-title h1,
.uif-page-title h2 {
  margin: 0;
  font-size: var(--uif-text-xl);
  line-height: 1.2;
}
.uif-page-title p {
  margin: 0;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uif-space-2);
  align-items: center;
  justify-content: flex-end;
}
.uif-scroll-region {
  min-height: 0;
  overflow: auto;
  padding: var(--uif-space-4) var(--uif-space-5) var(--uif-space-6);
}
.uif-stat {
  display: grid;
  gap: var(--uif-space-3);
  min-height: 9rem;
  overflow: hidden;
}
.uif-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
}
.uif-stat-icon {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--uif-radius-md);
  color: var(--uif-accent);
  background: color-mix(in srgb, var(--uif-accent), transparent 90%);
  font-weight: 600;
  font-size: 0.75rem;
}
.uif-stat-value {
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 600;
}
.uif-stat-meta {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-sparkline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  height: 1.75rem;
  align-items: end;
}
.uif-sparkline span {
  display: block;
  min-height: 0.375rem;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--uif-accent), transparent 58%);
}
.uif-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--uif-space-4);
}
.uif-kanban-column {
  display: grid;
  gap: var(--uif-space-3);
  align-content: start;
  min-height: 23rem;
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface);
}
.uif-kanban-card {
  display: grid;
  gap: var(--uif-space-2);
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  transition:
    border-color var(--uif-motion-fast),
    box-shadow var(--uif-motion-fast),
    transform var(--uif-motion-fast);
}
.uif-kanban-card:hover {
  border-color: color-mix(in srgb, var(--uif-accent), transparent 70%);
  box-shadow: var(--uif-shadow-md);
  transform: translateY(-1px);
}
.uif-queue,
.uif-activity-feed,
.uif-timeline {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface);
}
.uif-queue-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.uif-queue-main strong,
.uif-queue-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-risk-band {
  border-inline-start: 0.25rem solid var(--uif-color-warning);
}
.uif-risk-band-low {
  border-inline-start-color: var(--uif-color-success);
}
.uif-risk-band-high {
  border-inline-start-color: var(--uif-color-danger);
}
.uif-timeline {
  position: relative;
  padding-inline-start: var(--uif-space-4);
}
.uif-timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.25rem;
  top: 0.25rem;
  bottom: 0.25rem;
  border-inline-start: 1px solid var(--uif-border);
}
.uif-timeline-item {
  position: relative;
}
.uif-timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(-1 * var(--uif-space-4));
  top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--uif-accent);
}
.uif-badge-success {
  border-color: color-mix(in srgb, var(--uif-color-success), transparent 58%);
  color: var(--uif-color-success);
}
.uif-badge-warning {
  border-color: color-mix(in srgb, var(--uif-color-warning), transparent 58%);
  color: var(--uif-color-warning);
}
.uif-badge-danger {
  border-color: color-mix(in srgb, var(--uif-color-danger), transparent 58%);
  color: var(--uif-color-danger);
}
.uif-badge-info {
  border-color: color-mix(in srgb, var(--uif-color-info), transparent 58%);
  color: var(--uif-color-info);
}
.uif-badge-dot::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}
.uif-field-hint {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-field-error {
  color: var(--uif-color-danger);
  font-size: var(--uif-text-sm);
}
.uif-field-success {
  color: var(--uif-color-success);
  font-size: var(--uif-text-sm);
}
.uif-input:focus {
  border-color: var(--uif-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uif-accent), transparent 76%);
  outline: none;
}
.uif-input[aria-invalid='true'] {
  border-color: var(--uif-color-danger);
}
.uif-input[data-uif-state='success'] {
  border-color: var(--uif-color-success);
}
select.uif-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - 0.7rem) 50%;
  background-size:
    0.35rem 0.35rem,
    0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.uif-tabs {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-tabs [data-uif-role='tab'] {
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-surface-elevated);
  color: var(--uif-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.uif-tabs [data-uif-role='tab'][aria-selected='true'] {
  border-color: color-mix(in srgb, var(--uif-accent), transparent 35%);
  background: color-mix(in srgb, var(--uif-accent), transparent 92%);
  color: var(--uif-accent);
}
.uif-tabs [data-uif-role='tab']:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--uif-accent), transparent 35%);
  outline-offset: 2px;
}
.uif-tabs [data-uif-role='tabpanel'] {
  min-width: 0;
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-tabs-vertical {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
}
.uif-tabs-vertical [data-uif-role='tab'] {
  grid-column: 1;
  text-align: left;
}
.uif-tabs-vertical [data-uif-role='tabpanel'] {
  grid-column: 2;
  grid-row: 1 / span 50;
}
.uif-modal {
  position: fixed;
  inset: 0;
  z-index: var(--uif-z-modal);
  overflow-y: auto;
  padding: 1rem;
  background: rgb(15 23 42 / 0.48);
}
.uif-modal[hidden] {
  display: none;
}
.uif-modal-dialog {
  display: grid;
  gap: var(--uif-space-3);
  width: min(32rem, calc(100vw - 2rem));
  margin: 10dvh auto 1rem;
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-lg);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-modal-sm {
  width: min(24rem, calc(100vw - 2rem));
}
.uif-modal-lg {
  width: min(48rem, calc(100vw - 2rem));
}
.uif-modal-xl {
  width: min(72rem, calc(100vw - 2rem));
}
.uif-modal-fullscreen {
  width: calc(100vw - 2rem);
  min-height: calc(100dvh - 2rem);
  margin: 0 auto;
  border-radius: 0;
}
.uif-modal-scrollable .uif-modal-dialog,
.uif-modal-dialog.uif-modal-scrollable {
  max-height: calc(100dvh - 2rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.uif-modal-body,
[data-uif-role='modal-body'] {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.uif-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--uif-z-modal) - 1);
  background: rgb(15 23 42 / 0.48);
}
.uif-drawer,
.uif-offcanvas {
  position: fixed;
  z-index: var(--uif-z-modal);
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-drawer[hidden],
.uif-offcanvas[hidden] {
  display: none;
}
.uif-drawer-body,
.uif-offcanvas-body,
[data-uif-role='body'] {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.uif-drawer-right,
.uif-offcanvas-right {
  inset: 0 0 0 auto;
  width: min(28rem, 100vw);
  border-left: 1px solid var(--uif-border);
}
.uif-drawer-left,
.uif-offcanvas-left {
  inset: 0 auto 0 0;
  width: min(28rem, 100vw);
  border-right: 1px solid var(--uif-border);
}
.uif-drawer-top,
.uif-offcanvas-top {
  inset: 0 0 auto;
  height: auto;
  max-height: min(24rem, 100dvh);
  border-bottom: 1px solid var(--uif-border);
}
.uif-drawer-bottom,
.uif-offcanvas-bottom {
  inset: auto 0 0;
  height: auto;
  max-height: min(24rem, 100dvh);
  border-top: 1px solid var(--uif-border);
}
.uif-bottom-sheet {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: var(--uif-z-modal);
  max-width: 30rem;
  margin-inline: auto;
}
[data-uif-density='compact'] .uif-card,
[data-density='compact'] .uif-card {
  padding: 0.875rem;
}
[data-uif-density='compact'] .uif-table th,
[data-uif-density='compact'] .uif-table td,
[data-density='compact'] .uif-table th,
[data-density='compact'] .uif-table td {
  padding-block: 0.45rem;
}
[data-uif-density='roomy'] .uif-card,
[data-density='roomy'] .uif-card {
  padding: 1.5rem;
}
[data-uif-density='roomy'] .uif-table th,
[data-uif-density='roomy'] .uif-table td,
[data-density='roomy'] .uif-table th,
[data-density='roomy'] .uif-table td {
  padding-block: 0.875rem;
}
@media (max-width: 48rem) {
  .uif-app-shell-fixed {
    display: block;
    height: auto;
    overflow: visible;
  }
  .uif-app-shell-fixed .uif-sidebar,
  .uif-sidebar-fixed {
    position: static;
    height: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--uif-border);
  }
  .uif-responsive-shell {
    display: block;
  }
  .uif-responsive-shell .uif-sidebar-desktop {
    display: none;
  }
  .uif-navbar-toggle,
  .uif-sidebar-mobile-toggle {
    display: inline-flex;
  }
  .uif-navbar-actions {
    justify-content: flex-start;
  }
  .uif-shell-content {
    display: block;
    height: auto;
  }
  .uif-page-head {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--uif-space-4) var(--uif-space-4) 0;
  }
  .uif-scroll-region {
    overflow: visible;
    padding: var(--uif-space-4);
  }
  .uif-queue-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
.uif-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--uif-space-3);
  min-height: 4.5rem;
  padding: 0 var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-sidebar-brand img,
.uif-sidebar-brand-mark {
  width: 1.875rem;
  height: 1.875rem;
  object-fit: contain;
}
.uif-sidebar-brand strong,
.uif-sidebar-brand span {
  display: block;
  line-height: 1.2;
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-brand {
  justify-content: center;
  gap: 0;
  padding-inline: var(--uif-space-2);
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-brand strong,
.uif-responsive-shell.uif-shell-sidebar-collapsed
  .uif-sidebar-brand
  span:not(.uif-sidebar-brand-mark) {
  display: none;
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav {
  padding-inline: var(--uif-space-2);
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav a [data-uif-nav-label] {
  display: none;
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav a .uif-icon,
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav a [data-uif-icon] .uif-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav a[data-uif-nav-item] {
  justify-content: center;
  min-height: 2.35rem;
  padding-inline: 0;
  border-radius: 999px;
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav a[data-uif-short-label] {
  justify-content: center;
  min-height: 2.35rem;
  padding-inline: 0;
  border-radius: 999px;
  font-size: 0;
}
.uif-responsive-shell.uif-shell-sidebar-collapsed .uif-sidebar-nav a[data-uif-short-label]::before {
  content: attr(data-uif-short-label);
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-sidebar-section {
  margin: var(--uif-space-4) 0 var(--uif-space-2);
  padding: 0 var(--uif-space-3);
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.uif-sidebar-footer {
  margin-top: auto;
  padding: var(--uif-space-3);
  border-top: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-search {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  min-height: 2.25rem;
  padding: 0 var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-sm);
}
.uif-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--uif-text);
  font: inherit;
  font-size: var(--uif-text-sm);
  outline: none;
}
.uif-search kbd {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  color: var(--uif-text-muted);
  background: var(--uif-surface);
  font-size: 0.72rem;
}
.uif-icon {
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}
.uif-icon-sm {
  font-size: 0.875rem;
}
.uif-icon-md {
  font-size: 1rem;
}
.uif-icon-lg {
  font-size: 1.25rem;
}
.uif-icon-btn {
  width: 2.25rem;
  min-width: 2.25rem;
  padding-inline: 0;
}
.uif-avatar {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--uif-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.uif-avatar-sm {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.62rem;
}
.uif-card-flush {
  padding: 0;
  overflow: hidden;
}
.uif-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-4);
  padding: var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-card-head h2,
.uif-card-head p {
  margin: 0;
}
.uif-card-head p {
  margin-top: 0.15rem;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  line-height: 1.35;
}
.uif-card-body {
  padding: var(--uif-space-4);
}
.uif-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-3) var(--uif-space-4);
  border-top: 1px solid var(--uif-border);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-data-grid {
  table-layout: fixed;
}
.uif-data-grid th {
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.uif-data-grid tbody tr:hover {
  background: color-mix(in srgb, var(--uif-accent), transparent 96%);
}
.uif-cell-stack {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.uif-cell-stack strong,
.uif-cell-stack span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uif-segmented {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface);
}
.uif-segmented button {
  min-height: 1.8rem;
  padding: 0 0.65rem;
  border: 0;
  border-radius: calc(var(--uif-radius-md) - 0.15rem);
  background: transparent;
  color: var(--uif-text-muted);
  font: inherit;
  font-size: var(--uif-text-sm);
  cursor: pointer;
}
.uif-segmented button[aria-pressed='true'] {
  background: var(--uif-surface-elevated);
  color: var(--uif-text);
  box-shadow: var(--uif-shadow-sm);
}
.uif-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--uif-space-3);
}
.uif-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-2);
  font-size: 0.78rem;
  font-weight: 500;
}
.uif-note {
  display: flex;
  align-items: flex-start;
  gap: var(--uif-space-2);
  padding: var(--uif-space-3);
  border: 1px solid color-mix(in srgb, var(--uif-color-info), transparent 68%);
  border-radius: var(--uif-radius-md);
  background: color-mix(in srgb, var(--uif-color-info), transparent 92%);
  color: var(--uif-color-info);
}
.uif-stat-footer {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
@media (max-width: 48rem) {
  .uif-card-head,
  .uif-panel-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .uif-form-grid {
    grid-template-columns: 1fr;
  }
}

.uif-btn-success {
  background: var(--uif-color-success);
  color: #fff;
}
.uif-btn-warning {
  background: var(--uif-color-warning);
  color: #111827;
}
.uif-btn-info {
  background: var(--uif-color-info);
  color: #fff;
}
.uif-btn-neutral {
  background: var(--uif-color-secondary);
  color: #fff;
}
.uif-btn-outline-primary,
.uif-btn-outline-success,
.uif-btn-outline-warning,
.uif-btn-outline-danger,
.uif-btn-outline-info,
.uif-btn-outline-neutral {
  background: var(--uif-surface-elevated);
  border: 1px solid currentColor;
}
.uif-btn-outline-primary {
  color: var(--uif-color-primary);
}
.uif-btn-outline-success {
  color: var(--uif-color-success);
}
.uif-btn-outline-warning {
  color: var(--uif-color-warning);
}
.uif-btn-outline-danger {
  color: var(--uif-color-danger);
}
.uif-btn-outline-info {
  color: var(--uif-color-info);
}
.uif-btn-outline-neutral {
  color: var(--uif-text-muted);
}
.uif-btn-sm {
  min-height: 1.875rem;
  padding: 0.25rem 0.625rem;
  font-size: var(--uif-text-sm);
}
.uif-btn-lg {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  font-size: var(--uif-text-lg);
}
.uif-btn-icon-only {
  width: 2.25rem;
  min-width: 2.25rem;
  padding-inline: 0;
  display: inline-grid;
  place-items: center;
}
.uif-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-surface-elevated);
  color: var(--uif-text);
  font-size: var(--uif-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.uif-page-btn-primary {
  border-color: var(--uif-color-primary);
  background: var(--uif-color-primary);
  color: #fff;
}
.uif-page-btn-success {
  border-color: var(--uif-color-success);
  background: var(--uif-color-success);
  color: #fff;
}
.uif-page-btn-warning {
  border-color: var(--uif-color-warning);
  background: var(--uif-color-warning);
  color: #111827;
}
.uif-page-btn-danger {
  border-color: var(--uif-color-danger);
  background: var(--uif-color-danger);
  color: #fff;
}
.uif-page-btn-info {
  border-color: var(--uif-color-info);
  background: var(--uif-color-info);
  color: #fff;
}
.uif-page-btn-sm {
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
}
.uif-page-btn-lg {
  min-height: 2.45rem;
  padding: 0.5rem 0.85rem;
}
.uif-toolbar-shell {
  display: grid;
  gap: var(--uif-space-2);
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-toolbar-start,
.uif-toolbar-end,
.uif-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-toolbar-end {
  justify-content: flex-end;
}
.uif-filter-chip,
.uif-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--uif-border);
  border-radius: 999px;
  background: var(--uif-surface);
  color: var(--uif-text);
  font-size: var(--uif-text-sm);
  font-weight: 500;
}
.uif-chip-success {
  border-color: color-mix(in srgb, var(--uif-color-success), transparent 58%);
  color: var(--uif-color-success);
}
.uif-chip-warning {
  border-color: color-mix(in srgb, var(--uif-color-warning), transparent 58%);
  color: var(--uif-color-warning);
}
.uif-chip-danger {
  border-color: color-mix(in srgb, var(--uif-color-danger), transparent 58%);
  color: var(--uif-color-danger);
}
.uif-chip-info {
  border-color: color-mix(in srgb, var(--uif-color-info), transparent 58%);
  color: var(--uif-color-info);
}
.uif-chip-outline {
  background: transparent;
}
.uif-form-section {
  display: grid;
  gap: var(--uif-space-4);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-form-section-head {
  display: grid;
  gap: 0.2rem;
}
.uif-form-section-title {
  margin: 0;
  font-size: var(--uif-text-lg);
}
.uif-form-section-copy {
  margin: 0;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-form-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--uif-space-3);
}
.uif-col-1 {
  grid-column: span 1;
}
.uif-col-2 {
  grid-column: span 2;
}
.uif-col-3 {
  grid-column: span 3;
}
.uif-col-4 {
  grid-column: span 4;
}
.uif-col-5 {
  grid-column: span 5;
}
.uif-col-6 {
  grid-column: span 6;
}
.uif-col-7 {
  grid-column: span 7;
}
.uif-col-8 {
  grid-column: span 8;
}
.uif-col-9 {
  grid-column: span 9;
}
.uif-col-10 {
  grid-column: span 10;
}
.uif-col-11 {
  grid-column: span 11;
}
.uif-col-12 {
  grid-column: span 12;
}
.uif-input-shell {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  min-height: 2.375rem;
  padding: 0 var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-bg);
}
.uif-input-shell input,
.uif-input-shell select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--uif-text);
  font: inherit;
  outline: 0;
}
.uif-input-shell-icon {
  color: var(--uif-text-muted);
}
.uif-input-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.uif-input-group .uif-input,
.uif-input-group .uif-input-shell {
  border-radius: 0;
}
.uif-input-group .uif-input:first-child,
.uif-input-group .uif-input-shell:first-child,
.uif-input-group-addon:first-child {
  border-radius: var(--uif-radius-sm) 0 0 var(--uif-radius-sm);
}
.uif-input-group .uif-input:last-child,
.uif-input-group .uif-input-shell:last-child,
.uif-input-group-addon:last-child {
  border-radius: 0 var(--uif-radius-sm) var(--uif-radius-sm) 0;
}
.uif-input-group-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  padding: 0 var(--uif-space-3);
  border: 1px solid var(--uif-border);
  background: var(--uif-surface);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-input-group > * + * {
  margin-inline-start: -1px;
}
.uif-range {
  width: 100%;
  accent-color: var(--uif-accent);
}
.uif-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--uif-space-3);
}
.uif-range-value {
  min-width: 3rem;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 600;
  text-align: right;
}
.uif-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--uif-space-2);
  cursor: pointer;
}
.uif-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.uif-switch-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border: 1px solid var(--uif-border);
  border-radius: 999px;
  background: var(--uif-border);
  transition: background var(--uif-motion-fast) var(--uif-ease-standard);
}
.uif-switch-track::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  inset-inline-start: 0.125rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-sm);
  transition: transform var(--uif-motion-fast) var(--uif-ease-standard);
}
.uif-switch input:checked + .uif-switch-track {
  border-color: var(--uif-accent);
  background: var(--uif-accent);
}
.uif-switch input:checked + .uif-switch-track::after {
  transform: translateX(1.25rem);
}
[dir='rtl'] .uif-switch input:checked + .uif-switch-track::after {
  transform: translateX(-1.25rem);
}
.uif-switch input:focus-visible + .uif-switch-track {
  outline: 2px solid color-mix(in srgb, var(--uif-accent), transparent 45%);
  outline-offset: 2px;
}
.uif-switch-label {
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.uif-segmented label {
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.65rem;
  border-radius: calc(var(--uif-radius-md) - 0.15rem);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.uif-segmented input:checked + span,
.uif-segmented input:checked + label,
.uif-segmented label:has(input:checked) {
  background: var(--uif-surface-elevated);
  color: var(--uif-text);
  box-shadow: var(--uif-shadow-sm);
}
.uif-skeleton-card {
  display: grid;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
}
.uif-skeleton-line {
  height: 0.75rem;
  width: 100%;
}
.uif-skeleton-line-sm {
  height: 0.65rem;
  width: 40%;
}
.uif-skeleton-line-lg {
  height: 1rem;
  width: 60%;
}
.uif-skeleton-block {
  height: 5rem;
  width: 100%;
}
.uif-skeleton-stack {
  display: grid;
  gap: var(--uif-space-2);
}
.uif-metric-list {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-metric-row {
  display: grid;
  gap: var(--uif-space-2);
}
.uif-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
}
.uif-metric-label {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 500;
}
.uif-metric-value {
  font-weight: 600;
}
.uif-progress-bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--uif-border);
}
.uif-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--uif-color-primary);
}
.uif-progress-bar-success span {
  background: var(--uif-color-success);
}
.uif-progress-bar-warning span {
  background: var(--uif-color-warning);
}
.uif-progress-bar-danger span {
  background: var(--uif-color-danger);
}
.uif-progress-bar-info span {
  background: var(--uif-color-info);
}
.uif-hero-banner {
  display: grid;
  gap: var(--uif-space-4);
  padding: var(--uif-space-5);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-lg);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--uif-accent), transparent 86%),
    var(--uif-surface-elevated)
  );
}
.uif-hero-banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-4);
  flex-wrap: wrap;
}
.uif-hero-main {
  display: flex;
  align-items: center;
  gap: var(--uif-space-3);
}
.uif-hero-avatar {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--uif-accent);
  color: #fff;
  font-weight: 600;
}
.uif-hero-kicker {
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.uif-hero-title {
  margin: 0;
  font-size: var(--uif-text-xl);
}
.uif-hero-copy {
  margin: 0.25rem 0 0;
  color: var(--uif-text-muted);
}
.uif-hero-meta {
  display: flex;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-section-shell {
  display: grid;
  gap: var(--uif-space-4);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-4);
  flex-wrap: wrap;
}
.uif-section-kicker {
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.uif-section-title,
.uif-card-title {
  margin: 0;
}
.uif-section-copy,
.uif-card-copy {
  margin: 0.25rem 0 0;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-card-stack {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-card-shell {
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-bg);
}
.uif-summary-block {
  display: grid;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--uif-space-3);
}
.uif-kv-item {
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-bg);
}
.uif-kv-term {
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}
.uif-kv-value {
  margin-top: 0.2rem;
  font-weight: 600;
}
.uif-kv-note {
  margin-top: 0.15rem;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-chart-card,
.uif-inspector {
  display: grid;
  gap: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  overflow: hidden;
}
.uif-chart-card-head,
.uif-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-chart-card-body,
.uif-inspector-section {
  padding: var(--uif-space-4);
}
.uif-chart-placeholder {
  display: grid;
  place-items: center;
  min-height: 9rem;
  border-radius: var(--uif-radius-md);
  background: color-mix(in srgb, var(--uif-accent), transparent 92%);
  color: var(--uif-text-muted);
  font-weight: 600;
}
.uif-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.uif-chart-legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  background: var(--uif-color-primary);
}
.uif-inspector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--uif-space-2);
}
.uif-inspector-stat {
  padding: var(--uif-space-2);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-bg);
}
.uif-inspector-stat-value {
  font-weight: 600;
}
.uif-inspector-stat-label {
  color: var(--uif-text-muted);
  font-size: 0.72rem;
}
.uif-workflow-stepper {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-stepper-row {
  display: grid;
  gap: var(--uif-space-3);
}
.uif-stepper-item {
  display: flex;
  gap: var(--uif-space-3);
  align-items: flex-start;
}
.uif-stepper-badge {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--uif-surface);
  border: 1px solid var(--uif-border);
  font-weight: 600;
}
.uif-stepper-item.is-complete .uif-stepper-badge {
  background: var(--uif-color-success);
  border-color: var(--uif-color-success);
  color: #fff;
}
.uif-stepper-item.is-current .uif-stepper-badge {
  background: var(--uif-color-primary);
  border-color: var(--uif-color-primary);
  color: #fff;
}
.uif-stepper-item.is-warning .uif-stepper-badge {
  background: var(--uif-color-warning);
  border-color: var(--uif-color-warning);
  color: #111827;
}
.uif-stepper-title {
  font-weight: 600;
}
.uif-stepper-meta {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--uif-space-3);
}
.uif-stat-card {
  display: grid;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-stat-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-3);
}
.uif-stat-card-label {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 500;
}
.uif-stat-card-value {
  margin-top: 0.25rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}
.uif-stat-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--uif-radius-md);
  background: color-mix(in srgb, var(--uif-accent), transparent 90%);
  color: var(--uif-accent);
}
.uif-stat-card-meta {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-stat-card-trend {
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-stat-card-trend.is-positive {
  color: var(--uif-color-success);
}
.uif-stat-card-trend.is-negative {
  color: var(--uif-color-danger);
}
.uif-dashboard {
  display: grid;
  gap: var(--uif-space-4);
}
.uif-dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--uif-space-4);
}
.uif-dashboard-head h2,
.uif-dashboard-head p {
  margin: 0;
}
.uif-dashboard-head p {
  margin-top: 0.2rem;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(var(--uif-dashboard-columns, 3), minmax(0, 1fr));
  gap: var(--uif-space-4);
}
.uif-dashboard[data-uif-dashboard-columns='1'] {
  --uif-dashboard-columns: 1;
}
.uif-dashboard[data-uif-dashboard-columns='2'] {
  --uif-dashboard-columns: 2;
}
.uif-dashboard[data-uif-dashboard-columns='3'] {
  --uif-dashboard-columns: 3;
}
.uif-dashboard[data-uif-dashboard-columns='4'] {
  --uif-dashboard-columns: 4;
}
.uif-dashboard-widget[data-uif-dashboard-span='2'] {
  grid-column: span 2;
}
.uif-dashboard-widget[data-uif-dashboard-span='3'] {
  grid-column: span 3;
}
.uif-dashboard-widget[data-uif-dashboard-span='4'],
.uif-dashboard-widget[data-uif-dashboard-span='full'] {
  grid-column: 1/-1;
}
.uif-dashboard-metric {
  display: block;
  margin-bottom: var(--uif-space-2);
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
}
.uif-desktop-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  background: var(--uif-bg);
  color: var(--uif-text);
}
.uif-desktop-sidebar {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-inline-end: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-desktop-brand {
  display: grid;
  gap: 0.15rem;
  min-height: 4.5rem;
  padding: var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-desktop-brand strong {
  font-size: var(--uif-text-lg);
  line-height: 1.1;
}
.uif-desktop-brand span {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-desktop-nav {
  display: grid;
  align-content: start;
  gap: var(--uif-space-1);
  padding: var(--uif-space-3);
}
.uif-desktop-nav-item {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  min-height: 2.25rem;
  padding: 0 var(--uif-space-3);
  border: 1px solid transparent;
  border-radius: var(--uif-radius-md);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.uif-desktop-nav-item:hover {
  background: color-mix(in srgb, var(--uif-accent), transparent 94%);
  color: var(--uif-text);
}
.uif-desktop-nav-item[aria-current='page'] {
  border-color: color-mix(in srgb, var(--uif-accent), transparent 78%);
  background: color-mix(in srgb, var(--uif-accent), transparent 90%);
  color: var(--uif-accent);
}
.uif-desktop-nav-item em {
  margin-inline-start: auto;
  min-width: 1.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--uif-surface);
  color: var(--uif-text-muted);
  font-style: normal;
  text-align: center;
}
.uif-desktop-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100dvh;
}
.uif-desktop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-4);
  min-height: 4.5rem;
  padding: var(--uif-space-3) var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
}
.uif-desktop-topbar h1,
.uif-desktop-topbar p {
  margin: 0;
}
.uif-desktop-topbar h1 {
  font-size: var(--uif-text-xl);
  line-height: 1.15;
}
.uif-desktop-topbar p {
  margin-top: 0.2rem;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-desktop-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-desktop-actions .uif-desktop-nav-item {
  border-color: var(--uif-border);
  background: var(--uif-surface);
  color: var(--uif-text);
}
.uif-desktop-content {
  min-width: 0;
  overflow: auto;
  padding: var(--uif-space-4);
}
.uif-desktop-statusbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--uif-space-3);
  min-height: 2.25rem;
  padding: var(--uif-space-2) var(--uif-space-4);
  border-top: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-desktop-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.6rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--uif-border);
  border-radius: 999px;
  background: var(--uif-surface);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-desktop-status-pill span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}
.uif-desktop-status-pill[data-uif-sync-status='synced'],
.uif-desktop-status-pill[data-uif-sync-status='idle'] {
  color: var(--uif-color-success);
}
.uif-desktop-status-pill[data-uif-sync-status='queued'],
.uif-desktop-status-pill[data-uif-sync-status='syncing'] {
  color: var(--uif-color-warning);
}
.uif-desktop-status-pill[data-uif-sync-status='offline'],
.uif-desktop-status-pill[data-uif-sync-status='failed'] {
  color: var(--uif-color-danger);
}
.uif-desktop-identity {
  display: grid;
  gap: 0.15rem;
}
.uif-desktop-identity strong {
  line-height: 1.15;
}
.uif-desktop-identity span {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-desktop-window,
.uif-desktop-panel {
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-sm);
  overflow: hidden;
}
.uif-desktop-window-head,
.uif-desktop-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-3) var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-desktop-window-body,
.uif-desktop-panel-body {
  padding: var(--uif-space-4);
}
[data-uif-offline] .uif-desktop-topbar {
  box-shadow: inset 0 3px 0 var(--uif-color-danger);
}
.uif-empty-state {
  display: grid;
  place-items: center;
  gap: var(--uif-space-3);
  padding: var(--uif-space-6);
  border: 1px dashed var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface);
  text-align: center;
}
.uif-empty-state-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--uif-accent), transparent 90%);
  color: var(--uif-accent);
}
.uif-empty-state-title {
  margin: 0;
}
.uif-empty-state-copy {
  max-width: 32rem;
  margin: 0;
  color: var(--uif-text-muted);
}
.uif-filterbar {
  display: grid;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-filterbar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uif-space-3);
  flex-wrap: wrap;
}
.uif-filterbar-chiprow {
  display: flex;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-filter-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.uif-notification-panel {
  width: min(30rem, calc(100vw - 2rem));
  margin: 6dvh auto 0;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-lg);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
  overflow: hidden;
}
.uif-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-notification-list {
  display: grid;
  max-height: 60dvh;
  overflow: auto;
}
.uif-notification-item {
  display: grid;
  gap: 0.25rem;
  padding: var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-notification-item.is-unread {
  background: color-mix(in srgb, var(--uif-accent), transparent 94%);
}
.uif-notification-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-menu-surface {
  display: grid;
  gap: 0.2rem;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--uif-radius-sm);
  background: transparent;
  color: var(--uif-text);
  text-align: left;
  cursor: pointer;
}
.uif-menu-item:hover {
  background: color-mix(in srgb, var(--uif-accent), transparent 92%);
}
.uif-menu-item-danger {
  color: var(--uif-color-danger);
}
.uif-menu-label {
  padding: 0.4rem 0.6rem;
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
}
.uif-menu-separator {
  height: 1px;
  margin: 0.35rem 0.25rem;
  background: var(--uif-border);
}
.uif-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--uif-space-3);
}
.uif-color-picker {
  display: flex;
  align-items: center;
  gap: var(--uif-space-3);
  padding: var(--uif-space-2);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-bg);
}
.uif-color-picker input {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
}
.uif-color-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
@media (max-width: 48rem) {
  .uif-form-grid-12,
  .uif-picker-grid {
    grid-template-columns: 1fr;
  }
  .uif-col-1,
  .uif-col-2,
  .uif-col-3,
  .uif-col-4,
  .uif-col-5,
  .uif-col-6,
  .uif-col-7,
  .uif-col-8,
  .uif-col-9,
  .uif-col-10,
  .uif-col-11,
  .uif-col-12 {
    grid-column: auto;
  }
  .uif-inspector-grid {
    grid-template-columns: 1fr;
  }
  .uif-toolbar-end {
    justify-content: flex-start;
  }
  .uif-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .uif-dashboard-widget[data-uif-dashboard-span] {
    grid-column: auto;
  }
  .uif-desktop-shell {
    display: block;
  }
  .uif-desktop-sidebar {
    display: block;
    border-inline-end: 0;
    border-bottom: 1px solid var(--uif-border);
  }
  .uif-desktop-main {
    display: block;
    min-height: auto;
  }
  .uif-desktop-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .uif-desktop-content {
    overflow: visible;
  }
  .uif-desktop-statusbar {
    justify-content: flex-start;
  }
}
.uif-text-success {
  color: var(--uif-color-success);
}
.uif-text-warning {
  color: var(--uif-color-warning);
}
.uif-text-danger {
  color: var(--uif-color-danger);
}
.uif-text-info {
  color: var(--uif-color-info);
}
.uif-text-white {
  color: #fff;
}
.uif-spinner {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  border: 0.16rem solid color-mix(in srgb, currentColor, transparent 72%);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: uif-spin 0.75s linear infinite;
}
.uif-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.13rem;
}
.uif-spinner-lg {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 0.2rem;
}
.uif-spinner-inline {
  vertical-align: -0.2em;
  margin-inline-end: 0.35rem;
}
@keyframes uif-spin {
  to {
    transform: rotate(360deg);
  }
}
.uif-alert-success {
  border-color: color-mix(in srgb, var(--uif-color-success), transparent 65%);
  background: color-mix(in srgb, var(--uif-color-success), transparent 92%);
  color: var(--uif-color-success);
}
.uif-alert-warning {
  border-color: color-mix(in srgb, var(--uif-color-warning), transparent 65%);
  background: color-mix(in srgb, var(--uif-color-warning), transparent 92%);
  color: var(--uif-color-warning);
}
.uif-alert-danger {
  border-color: color-mix(in srgb, var(--uif-color-danger), transparent 65%);
  background: color-mix(in srgb, var(--uif-color-danger), transparent 92%);
  color: var(--uif-color-danger);
}
.uif-alert-info {
  border-color: color-mix(in srgb, var(--uif-color-info), transparent 65%);
  background: color-mix(in srgb, var(--uif-color-info), transparent 92%);
  color: var(--uif-color-info);
}
.uif-table-toolbar {
  display: grid;
  gap: var(--uif-space-2);
  margin-bottom: var(--uif-space-3);
}
.uif-table-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-2) var(--uif-space-3);
  border: 1px solid color-mix(in srgb, var(--uif-accent), transparent 76%);
  border-radius: var(--uif-radius-md);
  background: color-mix(in srgb, var(--uif-accent), transparent 92%);
}
.uif-uploader-list {
  display: grid;
  gap: var(--uif-space-2);
  margin-top: var(--uif-space-3);
}
.uif-uploader-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-2) var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-bg);
  font-size: var(--uif-text-sm);
}
.uif-loading-target {
  position: relative;
  min-width: 13rem;
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-loading-target[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--uif-surface-elevated), transparent 22%);
}
.uif-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uif-space-2);
}
.uif-class-list code {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--uif-surface);
  color: var(--uif-color-primary);
  font-size: 0.78rem;
  font-weight: 600;
}
.uif-text-swatch {
  display: grid;
  gap: 0.25rem;
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
}
.uif-dropdown-menu {
  position: relative;
  display: inline-block;
}
.uif-dropdown-menu .uif-menu-surface {
  position: absolute;
  z-index: var(--uif-z-dropdown);
  margin-top: 0.4rem;
}
.uif-dropdown-menu-end .uif-menu-surface {
  inset-inline-end: 0;
}
.uif-chart-card-title,
.uif-inspector-title {
  margin: 0;
}
.uif-chart-card-copy,
.uif-inspector-copy {
  margin: 0.2rem 0 0;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-editor-body {
  display: grid;
  min-width: 0;
}
.uif-editor-body-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.uif-editor-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 2rem;
  padding: 0.35rem var(--uif-space-3);
  border-top: 1px solid var(--uif-border);
  background: var(--uif-surface);
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-editor-preview table {
  width: 100%;
  border-collapse: collapse;
}
.uif-editor-preview th,
.uif-editor-preview td {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--uif-border);
  text-align: left;
}
.uif-editor-preview img {
  max-width: 100%;
  height: auto;
  border-radius: var(--uif-radius-sm);
}
.uif-task-list {
  list-style: none;
  padding-inline-start: 0;
}
.uif-task-list input {
  margin-inline-end: 0.45rem;
}
@media (max-width: 48rem) {
  .uif-editor-body-split {
    grid-template-columns: 1fr;
  }
}
.uif-editor[data-uif-validation='invalid'] {
  border-color: var(--uif-color-danger);
}
.uif-editor[data-uif-autosave-state='saving'] .uif-editor-status::before {
  content: 'Saving...';
  margin-inline-end: auto;
  color: var(--uif-color-warning);
  font-weight: 600;
}
.uif-editor[data-uif-autosave-state='saved'] .uif-editor-status::before {
  content: 'Saved';
  margin-inline-end: auto;
  color: var(--uif-color-success);
  font-weight: 600;
}
.uif-editor[data-uif-autosave-state='error'] .uif-editor-status::before {
  content: 'Save failed';
  margin-inline-end: auto;
  color: var(--uif-color-danger);
  font-weight: 600;
}
.uif-editor-dialog {
  position: fixed;
  z-index: var(--uif-z-popover);
  display: grid;
  gap: var(--uif-space-3);
  width: min(28rem, calc(100vw - 1rem));
  max-height: min(34rem, calc(100dvh - 1rem));
  overflow: auto;
  padding: var(--uif-space-3);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-md);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-editor-dialog[data-uif-editor-dialog-placement='popover']::before {
  content: '';
  position: absolute;
  top: -0.45rem;
  inset-inline-start: 1.35rem;
  width: 0.8rem;
  height: 0.8rem;
  border-inline-start: 1px solid var(--uif-border);
  border-top: 1px solid var(--uif-border);
  background: inherit;
  transform: rotate(45deg);
}
.uif-editor-dialog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--uif-space-3);
}
.uif-editor-dialog-field {
  display: grid;
  gap: 0.35rem;
}
.uif-editor-dialog-field span {
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-editor-dialog-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--uif-text);
  font-size: var(--uif-text-sm);
  font-weight: 600;
}
.uif-editor-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
}
.uif-editor-table-tools {
  display: flex;
  align-items: center;
  gap: var(--uif-space-2);
  flex-wrap: wrap;
  padding: var(--uif-space-2);
  border-top: 1px solid var(--uif-border);
  background: var(--uif-surface);
}
.uif-editor-tool-chip {
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--uif-border);
  border-radius: 999px;
  background: var(--uif-bg);
  color: var(--uif-text);
  font: inherit;
  font-size: var(--uif-text-sm);
  cursor: pointer;
}
.uif-editor-tool-chip:hover,
.uif-editor-tool-chip:focus-visible {
  border-color: var(--uif-accent);
  color: var(--uif-accent);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .uif-editor,
  .uif-editor *,
  .uif-editor-dialog,
  .uif-editor-preview-modal,
  .uif-editor-preview-drawer,
  .uif-editor-preview-backdrop {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.uif-editor[data-uif-editor-layout='preview'] .uif-editor-source {
  display: none;
}
.uif-editor[data-uif-editor-layout='source'] .uif-editor-preview,
.uif-editor[data-uif-editor-layout='modal'] .uif-editor-preview,
.uif-editor[data-uif-editor-layout='drawer'] .uif-editor-preview {
  display: none;
}
.uif-editor[data-uif-mode='markdown'] .uif-editor-source:not([hidden]),
.uif-editor[data-uif-mode='markdown'] .uif-editor-preview:not([hidden]) {
  display: block;
}
.uif-editor[data-uif-mode='markdown'] .uif-editor-preview:not([hidden]) {
  border-top: 0;
}
.uif-editor-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--uif-z-modal) - 1);
  background: rgb(15 23 42 / 0.48);
}
.uif-editor-preview-modal,
.uif-editor-preview-drawer {
  position: fixed;
  z-index: var(--uif-z-modal);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--uif-border);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-editor-preview-modal {
  inset: 6dvh max(1rem, calc((100vw - 56rem) / 2));
  max-height: 88dvh;
  border-radius: var(--uif-radius-lg);
}
.uif-editor-preview-drawer {
  inset: 0 0 0 auto;
  width: min(34rem, 100vw);
  border-radius: 0;
}
.uif-editor-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uif-space-3);
  padding: var(--uif-space-3) var(--uif-space-4);
  border-bottom: 1px solid var(--uif-border);
}
.uif-editor-preview-close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-sm);
  background: var(--uif-bg);
  color: var(--uif-text);
  font: inherit;
  cursor: pointer;
}
.uif-editor-preview-content {
  min-width: 0;
  overflow: auto;
  padding: var(--uif-space-4);
}
.uif-editor-surface table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
}
.uif-editor-surface th,
.uif-editor-surface td {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--uif-border);
  text-align: left;
}
.uif-editor-surface img {
  max-width: 100%;
  height: auto;
  border-radius: var(--uif-radius-sm);
}
.uif-editor-surface figure {
  margin: 0.75rem 0;
}
.uif-editor-surface figcaption {
  margin-top: 0.25rem;
  color: var(--uif-text-muted);
  font-size: var(--uif-text-sm);
}
.uif-carousel {
  display: grid;
  gap: var(--uif-space-3);
  overflow: hidden;
}
.uif-carousel-viewport {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--uif-carousel-items, 1), minmax(0, 1fr));
  gap: var(--uif-space-3);
  border-radius: var(--uif-radius-lg);
  overflow: hidden;
  background: var(--uif-surface);
}
.uif-carousel-slide {
  position: relative;
  min-height: 16rem;
}
.uif-carousel[data-uif-items-per-slide]:not([data-uif-items-per-slide='1']) .uif-carousel-slide {
  min-height: 10rem;
}
.uif-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uif-carousel-caption {
  position: absolute;
  inset: auto var(--uif-space-4) var(--uif-space-4);
  padding: var(--uif-space-3);
  border-radius: var(--uif-radius-md);
  background: rgb(15 23 42 / 0.72);
  color: #fff;
}
.uif-carousel-controls,
.uif-carousel-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--uif-space-2);
}
.uif-carousel-indicators button {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--uif-border);
  cursor: pointer;
}
.uif-carousel-indicators [data-uif-state='active'] {
  background: var(--uif-color-primary);
}
.uif-typed-text {
  color: var(--uif-color-primary);
}
.uif-typed-text::after {
  content: '';
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-inline-start: 0.12em;
  background: currentColor;
  vertical-align: -0.08em;
  animation: uif-typed-text-caret 0.8s steps(1, end) infinite;
}
@keyframes uif-typed-text-caret {
  50% {
    opacity: 0;
  }
}
.uif-testimonial-slide {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: var(--uif-space-5);
  min-height: 18rem;
  margin: 0;
  padding: var(--uif-space-6);
  background: var(--uif-surface);
}
.uif-testimonial-slide[hidden] {
  display: none;
}
.uif-testimonial-avatar {
  width: 7rem !important;
  height: 7rem !important;
  border-radius: 50%;
}
.uif-testimonial-slide figcaption {
  display: grid;
  gap: var(--uif-space-2);
}
.uif-testimonial-slide blockquote {
  margin: 0 0 var(--uif-space-2);
  color: var(--uif-text);
  font-size: var(--uif-text-lg);
  line-height: 1.6;
}
.uif-testimonial-slide figcaption span {
  color: var(--uif-text-muted);
}
@media (max-width: 36rem) {
  .uif-testimonial-slide {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uif-typed-text::after {
    animation: none;
  }
}
.uif-lightbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--uif-space-3);
}
.uif-lightbox-grid a {
  display: block;
  border-radius: var(--uif-radius-md);
  overflow: hidden;
}
.uif-lightbox-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.uif-lightbox-dialog {
  position: fixed;
  inset: 4dvh max(1rem, calc((100vw - 64rem) / 2));
  z-index: var(--uif-z-modal);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--uif-space-3);
  padding: var(--uif-space-4);
  border: 1px solid var(--uif-border);
  border-radius: var(--uif-radius-lg);
  background: var(--uif-surface-elevated);
  box-shadow: var(--uif-shadow-md);
}
.uif-lightbox-dialog[hidden] {
  display: none;
}
.uif-lightbox-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--uif-space-3);
}
.uif-lightbox-image {
  max-width: 100%;
  max-height: 70dvh;
  margin: auto;
  object-fit: contain;
  border-radius: var(--uif-radius-md);
}
.uif-lightbox-caption {
  color: var(--uif-text-muted);
  text-align: center;
}
.uif-masonry {
  column-count: 3;
  column-gap: var(--uif-space-4);
}
.uif-masonry-2 {
  column-count: 2;
}
.uif-masonry-4 {
  column-count: 4;
}
.uif-masonry-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--uif-space-4);
  break-inside: avoid;
}
.uif-masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--uif-radius-md);
}
@media (max-width: 64rem) {
  .uif-masonry,
  .uif-masonry-4 {
    column-count: 2;
  }
}
@media (max-width: 40rem) {
  .uif-masonry,
  .uif-masonry-2,
  .uif-masonry-4 {
    column-count: 1;
  }
}
.uif-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--uif-space-5);padding-block:var(--uif-space-5);border-bottom:1px solid color-mix(in srgb,var(--uif-border),transparent 25%)}
.uif-page-header-main{min-width:0;max-width:var(--uif-measure-wide)}
.uif-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--uif-space-4);margin-bottom:var(--uif-space-4)}
.uif-action-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--uif-space-2)}
.uif-metric-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--uif-space-3)}
.uif-panel{border:1px solid var(--uif-border);border-radius:var(--uif-radius-lg);background:var(--uif-surface-elevated);box-shadow:var(--uif-shadow-sm)}
.uif-panel-muted{border:1px solid color-mix(in srgb,var(--uif-border),transparent 25%);border-radius:var(--uif-radius-lg);background:var(--uif-surface-muted)}
.uif-list-row{display:flex;align-items:flex-start;gap:var(--uif-space-3);padding-block:var(--uif-space-3);border-top:1px solid color-mix(in srgb,var(--uif-border),transparent 35%)}
.uif-list-row:first-child{border-top:0}
@media(max-width:48rem){.uif-page-header,.uif-section-header{align-items:flex-start;flex-direction:column}.uif-page-header{padding-block:var(--uif-space-4)}}
.uif-icon-tile{--uif-icon-tile-fg:var(--uif-icon-blue);--uif-icon-tile-bg:var(--uif-icon-blue-bg);display:inline-grid;place-items:center;flex:0 0 auto;width:3rem;height:3rem;border-radius:var(--uif-radius-md);background:var(--uif-icon-tile-bg);color:var(--uif-icon-tile-fg);font-size:1.25rem;line-height:1}
.uif-icon-tile[data-uif-tone="green"]{--uif-icon-tile-fg:var(--uif-icon-green);--uif-icon-tile-bg:var(--uif-icon-green-bg)}
.uif-icon-tile[data-uif-tone="teal"]{--uif-icon-tile-fg:var(--uif-icon-teal);--uif-icon-tile-bg:var(--uif-icon-teal-bg)}
.uif-icon-tile[data-uif-tone="cyan"]{--uif-icon-tile-fg:var(--uif-icon-cyan);--uif-icon-tile-bg:var(--uif-icon-cyan-bg)}
.uif-icon-tile[data-uif-tone="violet"]{--uif-icon-tile-fg:var(--uif-icon-violet);--uif-icon-tile-bg:var(--uif-icon-violet-bg)}
.uif-icon-tile[data-uif-tone="amber"]{--uif-icon-tile-fg:var(--uif-icon-amber);--uif-icon-tile-bg:var(--uif-icon-amber-bg)}
.uif-icon-tile[data-uif-tone="red"]{--uif-icon-tile-fg:var(--uif-icon-red);--uif-icon-tile-bg:var(--uif-icon-red-bg)}
.uif-icon-tile[data-uif-tone="neutral"]{--uif-icon-tile-fg:var(--uif-icon-neutral);--uif-icon-tile-bg:var(--uif-icon-neutral-bg)}
.uif-metric-card{--uif-metric-accent:var(--uif-icon-blue);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--uif-space-3);min-height:5.5rem;padding:var(--uif-space-4);border:1px solid var(--uif-border);border-radius:var(--uif-radius-lg);background:var(--uif-surface-elevated);box-shadow:var(--uif-shadow-sm);color:var(--uif-text);text-decoration:none;transition:border-color var(--uif-motion-fast) var(--uif-ease-standard),box-shadow var(--uif-motion-fast) var(--uif-ease-standard),transform var(--uif-motion-fast) var(--uif-ease-standard)}
.uif-metric-card:is(a):hover{border-color:color-mix(in srgb,var(--uif-metric-accent),transparent 70%);box-shadow:var(--uif-shadow-md);transform:translateY(-1px)}
.uif-metric-card-label{color:var(--uif-text-strong);font-size:var(--uif-text-sm);font-weight:var(--uif-weight-component-title);line-height:var(--uif-leading-tight)}
.uif-metric-card-value{color:var(--uif-text-strong);font-size:var(--uif-text-2xl);font-weight:var(--uif-weight-metric);line-height:1;font-variant-numeric:tabular-nums}
@media(max-width:30rem){.uif-metric-card{grid-template-columns:auto minmax(0,1fr)}.uif-metric-card-value{grid-column:2}}

