*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}img,svg,video{max-width:100%;display:block}button,input,select,textarea{font:inherit}

:root,[data-theme="light"]{--uif-color-primary:#2563eb;--uif-accent:var(--uif-color-primary);--uif-color-secondary:#64748b;--uif-color-success:#16a34a;--uif-color-warning:#d97706;--uif-color-danger:#dc2626;--uif-color-info:#0284c7;--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:#7c3aed;--uif-chart-7:#0f766e;--uif-chart-8:#9333ea;--uif-chart-grid:#e2e8f0;--uif-chart-axis:#64748b;--uif-chart-label:var(--uif-text-muted);--uif-chart-tooltip-bg:var(--uif-surface-elevated);--uif-bg:#fff;--uif-surface:#f8fafc;--uif-surface-elevated:#fff;--uif-text:#0f172a;--uif-text-muted:#475569;--uif-border:#cbd5e1;--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-text-sm:.875rem;--uif-text-md:1rem;--uif-text-lg:1.125rem;--uif-text-xl:1.375rem;--uif-radius-sm:.25rem;--uif-radius-md:.5rem;--uif-radius-lg:1rem;--uif-shadow-sm:0 1px 2px rgba(0,0,0,.08);--uif-shadow-md:0 6px 12px rgba(0,0,0,.12);--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:72rem}
[data-theme="dark"]{--uif-bg:#0f172a;--uif-surface:#1e293b;--uif-text:#e2e8f0;--uif-border:#334155}
@media (prefers-reduced-motion: reduce){:root{--uif-motion-fast:0ms;--uif-motion-base:0ms;--uif-motion-slow:0ms}}

.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-font-normal{font-weight:400}.uif-font-medium{font-weight:500}.uif-font-bold{font-weight:700}.uif-text-left{text-align:left}.uif-text-center{text-align:center}.uif-text-right{text-align:right}.uif-text-muted{color:var(--uif-text-muted)}.uif-text-primary{color:var(--uif-color-primary)}.uif-bg-surface{background:var(--uif-surface)}.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-shadow-sm{box-shadow:var(--uif-shadow-sm)}.uif-shadow-md{box-shadow:var(--uif-shadow-md)}
.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-mx-auto{margin-inline:auto}.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-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-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-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-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-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-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{from{opacity:0}to{opacity:1}}@keyframes uif-fade-out{from{opacity:1}to{opacity:0}}@keyframes uif-slide-up{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes uif-slide-down{from{opacity:0;transform:translateY(-.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes uif-slide-left{from{opacity:0;transform:translateX(.75rem)}to{opacity:1;transform:translateX(0)}}@keyframes uif-slide-right{from{opacity:0;transform:translateX(-.75rem)}to{opacity:1;transform:translateX(0)}}@keyframes uif-slide-out-up{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.75rem)}}@keyframes uif-slide-out-down{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.75rem)}}@keyframes uif-scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes uif-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes uif-pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes uif-pulse{0%,100%{box-shadow:0 0 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%,100%{transform:translateX(0)}25%{transform:translateX(-.35rem)}75%{transform:translateX(.35rem)}}@keyframes uif-highlight{from{background:color-mix(in srgb,var(--uif-color-warning),transparent 70%)}to{background:transparent}}@keyframes uif-flash{0%,100%{opacity:1}50%{opacity:.35}}@keyframes uif-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-.45rem)}70%{transform:translateY(.15rem)}}@keyframes uif-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes uif-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}@keyframes uif-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.55}}@keyframes uif-crossfade{from{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-right: 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;
  left: 1rem;
}
.uif-toast-stack-top-center {
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.uif-toast-stack-top-end {
  top: 1rem;
  right: 1rem;
}
.uif-toast-stack-bottom-start {
  bottom: 1rem;
  left: 1rem;
}
.uif-toast-stack-bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.uif-toast-stack-bottom-end {
  right: 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: 700;
  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: 700;
  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;
  left: 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: 650;
}
.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-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-left: 1.25rem;
}
.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-right: 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: 700;
  }
  .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;
  left: 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-right: 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: 800;
  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-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: 800;
  font-size: 0.75rem;
}
.uif-stat-value {
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 700;
}
.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-left: 0.25rem solid var(--uif-color-warning);
}
.uif-risk-band-low {
  border-left-color: var(--uif-color-success);
}
.uif-risk-band-high {
  border-left-color: var(--uif-color-danger);
}
.uif-timeline {
  position: relative;
  padding-left: var(--uif-space-4);
}
.uif-timeline::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  bottom: 0.25rem;
  border-left: 1px solid var(--uif-border);
}
.uif-timeline-item {
  position: relative;
}
.uif-timeline-item::before {
  content: '';
  position: absolute;
  left: 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: 750;
  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-right: 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: 800;
}
.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: 800;
  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: 800;
}
.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: 800;
  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: 650;
}
.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: 700;
  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: 650;
}
.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-3 {
  grid-column: span 3;
}
.uif-col-4 {
  grid-column: span 4;
}
.uif-col-6 {
  grid-column: span 6;
}
.uif-col-8 {
  grid-column: span 8;
}
.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: 750;
}
.uif-input-group > * + * {
  margin-left: -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: 800;
  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;
  left: 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);
}
.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: 750;
}
.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: 750;
  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: 650;
}
.uif-metric-value {
  font-weight: 800;
}
.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: 800;
}
.uif-hero-kicker {
  color: var(--uif-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  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: 800;
  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: 800;
  text-transform: uppercase;
}
.uif-kv-value {
  margin-top: 0.2rem;
  font-weight: 800;
}
.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: 800;
}
.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: 800;
}
.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: 800;
}
.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: 800;
}
.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: 650;
}
.uif-stat-card-value {
  margin-top: 0.25rem;
  font-size: 1.75rem;
  font-weight: 800;
  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: 700;
}
.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: 800;
}
.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-right: 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: 700;
  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-left: 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: 750;
}
.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: 800;
  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: 800;
}
@media (max-width: 48rem) {
  .uif-form-grid-12,
  .uif-picker-grid {
    grid-template-columns: 1fr;
  }
  .uif-col-3,
  .uif-col-4,
  .uif-col-6,
  .uif-col-8,
  .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-right: 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-right: 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: 750;
}
.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 {
  right: 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-left: 0;
}
.uif-task-list input {
  margin-right: 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-right: auto;
  color: var(--uif-color-warning);
  font-weight: 700;
}
.uif-editor[data-uif-autosave-state='saved'] .uif-editor-status::before {
  content: 'Saved';
  margin-right: auto;
  color: var(--uif-color-success);
  font-weight: 700;
}
.uif-editor[data-uif-autosave-state='error'] .uif-editor-status::before {
  content: 'Save failed';
  margin-right: auto;
  color: var(--uif-color-danger);
  font-weight: 700;
}
.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;
  left: 1.35rem;
  width: 0.8rem;
  height: 0.8rem;
  border-left: 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: 700;
}
.uif-editor-dialog-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--uif-text);
  font-size: var(--uif-text-sm);
  font-weight: 700;
}
.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;
}
.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-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;
  border-radius: var(--uif-radius-lg);
  overflow: hidden;
  background: var(--uif-surface);
}
.uif-carousel-slide {
  min-height: 16rem;
}
.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-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;
  }
}