/* packages/hv-ui/src/components/HvPanel.css */
.hvUiPanel {
  --hv-panel-accent: var(--border, #334155);
  --hv-panel-bw: 1px;
  --hv-panel-radius: 10px;
  --hv-panel-corner-pad: 6px;
  --hv-panel-corner-inset: var(--hv-panel-radius);
  --hv-panel-pad-top: 12px;
  --hv-panel-pad-x: 14px;
  --hv-panel-fill: var( --hv-panel-bg, color-mix(in oklab, var(--panel2, #1e293b) 90%, var(--bg, #0b0f17)) );
  position: relative;
  margin: 0;
  padding: var(--hv-panel-pad-top) var(--hv-panel-pad-x) 12px;
  border: var(--hv-panel-bw) solid color-mix(in oklab, var(--hv-panel-accent) 75%, transparent);
  border-radius: var(--hv-panel-radius);
  box-sizing: border-box;
  min-width: 0;
  background: var(--hv-panel-fill);
}
.hvUiPanel--tone-base,
.hvUiPanel--tone-link {
  --hv-panel-accent: var(--accent, #2563eb);
}
.hvUiPanel--tone-accept {
  --hv-panel-accent: var(--good, #22c55e);
}
.hvUiPanel--tone-warning {
  --hv-panel-accent: var(--warn, #ca8a04);
}
.hvUiPanel--tone-reject {
  --hv-panel-accent: var(--bad, #dc2626);
}
.hvUiPanel.hvUiPanel--noBorder {
  border-color: transparent;
  box-shadow: none;
}
.hvUiPanel.hvUiPanel--noBorder .hvUiPanel__corner {
  display: none !important;
}
.hvUiPanel--noBorder.hvUiPanel--hasCaption .hvUiPanel__legendShell {
  margin-top: 0;
}
.hvUiPanel.hvUiPanel--noPadding {
  --hv-panel-pad-top: 0px;
  --hv-panel-pad-x: 0px;
  padding: 0;
}
.hvUiPanel.hvUiPanel--noBackground {
  --hv-panel-fill: transparent;
  background: transparent;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--noBorder) {
  border-color: transparent;
}
.hvUiPanel__frame {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.hvUiPanel--frame-corners > .hvUiPanel__frame {
  padding: var(--hv-panel-corner-pad);
  box-sizing: border-box;
}
.hvUiPanel--align > .hvUiPanel__frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner {
  position: absolute;
  z-index: 1;
  width: var(--hv-panel-radius);
  height: var(--hv-panel-radius);
  border-style: solid;
  border-color: color-mix(in oklab, var(--hv-panel-accent) 75%, transparent);
  border-width: 2px 0 0 2px;
  pointer-events: none;
  box-sizing: border-box;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--corners-square):not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner {
  border-top-left-radius: calc(var(--hv-panel-radius) - 2px);
}
.hvUiPanel.hvUiPanel--frame-corners.hvUiPanel--corners-square:not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner {
  border-radius: 0;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner--tl {
  top: 0;
  left: 0;
  transform: none;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
  transform-origin: top right;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner--bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
  transform-origin: bottom left;
}
.hvUiPanel.hvUiPanel--frame-corners:not(.hvUiPanel--noBorder) .hvUiPanel__frame > .hvUiPanel__corner--br {
  bottom: 0;
  right: 0;
  transform: scale(-1, -1);
  transform-origin: bottom right;
}
.hvUiPanel--corners-square {
  border-radius: 0;
}
.hvUiPanel--noCaption {
  padding-top: var(--hv-panel-pad-top);
}
.hvUiPanel__legendShell {
  padding: 0;
  margin: 0 auto 10px;
  box-sizing: border-box;
  border: none;
  display: block;
  width: max-content;
  max-width: min(100%, 72vw);
  min-width: 0;
  justify-self: center;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25;
}
.hvUiPanel--hasCaption .hvUiPanel__legendShell {
  position: relative;
  z-index: 2;
  margin-top: calc(0.5px - 1px - var(--hv-panel-pad-top) - 0.625em);
}
@supports (height: 1lh) {
  .hvUiPanel--hasCaption .hvUiPanel__legendShell {
    margin-top: calc(0.5px - 0.5lh - 1px - var(--hv-panel-pad-top));
  }
}
.hvUiPanel__caption {
  display: block;
  margin: 0;
  padding: 0 10px;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-align: center;
  max-width: 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--hv-panel-fill);
}
.hvUiPanel__header {
  margin: 0 0 8px;
  min-width: 0;
}
.hvUiPanel__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.hvUiPanel--frame-corners .hvUiPanel__body,
.hvUiPanel--frame-corners .hvUiPanel__alignFill {
  border: none;
  outline: none;
  box-shadow: none;
}
.hvUiPanel--align > .hvUiPanel__legendShell {
  flex-shrink: 0;
}
.hvUiPanel--align > .hvUiPanel__footer {
  flex-shrink: 0;
}
.hvUiPanel__alignFill {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.hvUiPanel__footer {
  position: relative;
  z-index: 1;
  display: block;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--hv-panel-accent) 35%, transparent);
  text-align: start;
  max-width: none;
  line-height: 1.45;
}
.hvUiPanel__footer--slot {
  margin-top: 10px;
  padding-top: 8px;
}
.hvUiPanel__footer--slot + .hvUiPanel__footer--description {
  margin-top: 8px;
}
.hvUiPanel__footer--description {
  font-size: var(--font-size-caption, 12px);
  color: color-mix(in oklab, var(--text, #e2e8f0) 72%, transparent);
}

/* packages/hv-ui/src/components/HvAccordion.css */
.hvUiAccordion {
  --hv-accordion-accent: var(--border, #334155);
  --hv-accordion-transition-ms: 240ms;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid color-mix(in oklab, var(--hv-accordion-accent) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in oklab, var(--panel2, #1e293b) 55%, var(--panel, #0f172a));
  overflow: hidden;
}
.hvUiAccordion--tone-base,
.hvUiAccordion--tone-link {
  --hv-accordion-accent: var(--accent, #2563eb);
}
.hvUiAccordion--tone-accept {
  --hv-accordion-accent: var(--good, #22c55e);
}
.hvUiAccordion--tone-warning {
  --hv-accordion-accent: var(--warn, #ca8a04);
}
.hvUiAccordion--tone-reject {
  --hv-accordion-accent: var(--bad, #dc2626);
}
.hvUiAccordion--hasCustomTone {
}
.hvUiAccordion__head {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}
.hvUiAccordion__head:hover {
  background: color-mix(in oklab, var(--hv-accordion-accent) 12%, transparent);
}
.hvUiAccordion__toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text, #e5e7eb);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  touch-action: manipulation;
}
.hvUiAccordion__toggle:focus {
  outline: none;
}
.hvUiAccordion__toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hv-accordion-accent) 55%, transparent);
}
.hvUiAccordion--static .hvUiAccordion__head:hover {
  background: transparent;
}
.hvUiAccordion__toggle--static {
  cursor: default;
}
.hvUiAccordion__before {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}
.hvUiAccordion__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.hvUiAccordion__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.hvUiAccordion__lead {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: color-mix(in oklab, var(--text, #e5e7eb) 72%, var(--muted, #94a3b8));
}
.hvUiAccordion__lead.muted {
  color: var(--muted, #64748b);
}
.hvUiAccordion__spacer {
  flex: 1 1 auto;
  min-width: 4px;
}
.hvUiAccordion__caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 5px solid color-mix(in oklab, var(--muted, #94a3b8) 75%, transparent);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(0deg);
  transition: transform var(--hv-accordion-transition-ms, 240ms) ease;
}
.hvUiAccordion.hvUiAccordion--open > .hvUiAccordion__head .hvUiAccordion__caret {
  transform: rotate(90deg);
}
.hvUiAccordion__after {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 6px;
  padding: 10px 12px 10px 0;
  box-sizing: border-box;
}
.hvUiAccordion__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hv-accordion-transition-ms, 240ms) ease;
}
.hvUiAccordion__collapse--open {
  grid-template-rows: 1fr;
}
.hvUiAccordion__collapseInner {
  overflow: hidden;
  min-height: 0;
}
.hvUiAccordion:not(.hvUiAccordion--open) > .hvUiAccordion__collapse .hvUiAccordion__collapseInner {
  visibility: hidden;
  pointer-events: none;
}
.hvUiAccordion__body {
  padding: 0 12px 12px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--text, #e5e7eb) 92%, var(--muted, #94a3b8));
}
@media (prefers-reduced-motion: reduce) {
  .hvUiAccordion__collapse {
    transition: none;
  }
  .hvUiAccordion__caret {
    transition: none;
  }
}

/* packages/hv-ui/src/icons/HvIcon.css */
.hvUiIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}
.hvUiIcon__svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.hvUiIcon__svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hvUiIcon--fill {
  box-sizing: border-box;
  min-height: 1em;
  min-width: 1em;
}
@keyframes hvUiBallSegmentChase {
  0% {
    fill: var(--hv-ball-chase-highlight);
  }
  5.555555555555556%, 100% {
    fill: currentColor;
  }
}
.hvUiIcon--ballLoading {
  --hv-ball-chase-segments: 18;
  --hv-ball-chase-duration: 7.2s;
  --hv-ball-chase-highlight: #0f172a;
}
html[data-theme=light] .hvUiIcon--ballLoading {
  --hv-ball-chase-highlight: color-mix(in oklab, var(--muted, #64748b) 88%, var(--accent, #2563eb));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path {
  animation: hvUiBallSegmentChase var(--hv-ball-chase-duration) linear infinite;
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(1) {
  animation-delay: 0s;
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(2) {
  animation-delay: calc(-1 * 1 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(3) {
  animation-delay: calc(-1 * 2 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(4) {
  animation-delay: calc(-1 * 3 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(5) {
  animation-delay: calc(-1 * 4 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(6) {
  animation-delay: calc(-1 * 5 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(7) {
  animation-delay: calc(-1 * 6 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(8) {
  animation-delay: calc(-1 * 7 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(9) {
  animation-delay: calc(-1 * 8 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(10) {
  animation-delay: calc(-1 * 9 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(11) {
  animation-delay: calc(-1 * 10 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(12) {
  animation-delay: calc(-1 * 11 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(13) {
  animation-delay: calc(-1 * 12 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(14) {
  animation-delay: calc(-1 * 13 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(15) {
  animation-delay: calc(-1 * 14 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(16) {
  animation-delay: calc(-1 * 15 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(17) {
  animation-delay: calc(-1 * 16 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
.hvUiIcon--ballLoading svg.hvUiBallGlyph path:nth-child(18) {
  animation-delay: calc(-1 * 17 * var(--hv-ball-chase-duration) / var(--hv-ball-chase-segments));
}
@media (prefers-reduced-motion: reduce) {
  .hvUiIcon--ballLoading svg.hvUiBallGlyph path {
    animation: none;
    fill: currentColor;
  }
}
.hvUiIcon {
  --handball-card-yellow: #eab308;
  --handball-card-blue: #3b82f6;
  --handball-card-red: #ef4444;
  --handball-live: #ef4444;
  --handball-accent: var(--accent, #2563eb);
  --handball-goal-scored: #14532d;
  --handball-goal-save: #991b1b;
  --handball-goal-post-hit: #ef4444;
  --handball-goal-zone-idle: var(--handball-accent, #2563eb);
  --handball-goal-zone-idle-opacity: 0.35;
  --handball-youtube-red: #e62117;
}
.hvUiIcon--handballKit .hvHandballGlyph {
  overflow: visible;
}
html[data-theme=light] .hvHandballGlyph {
  --handball-icon-knockout: #ffffff;
}
html:not([data-theme=light]) .hvHandballGlyph {
  --handball-icon-knockout: var(--bg, #0f172a);
}
.hvUiIcon .hvHandballGlyph {
  --handball-icon-knockout: var(--surface, var(--bg, #0f172a));
}
html[data-theme=light] .hvUiIcon .hvHandballGlyph {
  --handball-icon-knockout: var(--surface, #ffffff);
}

/* packages/hv-ui/src/components/HvButton.css */
.hvUiButton {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--line-height-caption, 1.25);
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  border-radius: 5px;
  padding: 6px 12px;
  height: var(--hv-control-height, 30px);
  border: 1px solid transparent;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hvUiButton[hidden] {
  display: none !important;
}
.hvUiButton__before,
.hvUiButton__after {
  align-self: stretch;
}
.hvUiButton__before,
.hvUiButton__after,
.hvUiButton__in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.hvUiButton__in {
  flex: 1 1 auto;
  text-align: start;
}
.hvUiButton--iconOnly {
  gap: 4px;
  padding: 6px;
  width: var(--hv-control-height, 30px);
}
.hvUiButton--stretched {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.hvUiButton--stretched.hvUiButton--iconOnly {
  width: 100%;
}
.hvUiButton--noRoundedBorder {
  border-radius: 0;
}
.hvUiButton--compact {
  gap: var(--hv-control-compact-gap, 6px);
  padding: var(--hv-control-compact-py, 4px) var(--hv-control-compact-px, 8px);
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
  border-radius: var(--hv-control-compact-radius, 5px);
  height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
}
.hvUiButton--compact.hvUiButton--noRoundedBorder {
  border-radius: 0;
}
.hvUiButton--compact.hvUiButton--iconOnly {
  width: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  padding: 4px;
}
.hvUiButton:focus-visible {
  outline: 2px solid var(--accent, #1d4ed8);
  outline-offset: 2px;
}
.hvUiButton.hvUiButton--hasCustomTone:focus-visible {
  outline-color: var(--hv-button-accent);
}
.hvUiButton--disabled,
.hvUiButton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.hvUiButton--mode-primary.hvUiButton--theme {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 82%, var(--panel, #ffffff));
  border-color: var(--line, #e2e8f0);
  color: var(--text, #111827);
}
.hvUiButton--mode-primary.hvUiButton--theme .hvUiButton__before,
.hvUiButton--mode-primary.hvUiButton--theme .hvUiButton__after {
  color: currentColor;
}
.hvUiButton--mode-primary.hvUiButton--theme:hover:not(:disabled) {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 68%, var(--line, #e2e8f0));
  border-color: color-mix(in oklab, var(--line, #e2e8f0) 85%, var(--border, #cbd5e1));
}
.hvUiButton--mode-secondary.hvUiButton--theme {
  color: var(--text, #111827);
  border-color: color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--panel, #ffffff));
}
.hvUiButton--mode-secondary.hvUiButton--theme:hover:not(:disabled) {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 72%, var(--panel, #ffffff));
  border-color: var(--line, #e2e8f0);
}
.hvUiButton--mode-tertiary.hvUiButton--theme .hvUiButton__in {
  color: var(--text, #111827);
}
.hvUiButton--mode-tertiary.hvUiButton--theme .hvUiButton__before,
.hvUiButton--mode-tertiary.hvUiButton--theme .hvUiButton__after {
  color: unset;
}
.hvUiButton--mode-tertiary.hvUiButton--theme:hover:not(:disabled) {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 92%, transparent);
}
.hvUiButton--mode-outline.hvUiButton--theme {
  color: var(--text, #111827);
  border-color: var(--line, #e2e8f0);
}
.hvUiButton--mode-outline.hvUiButton--theme:hover:not(:disabled) {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 82%, transparent);
}
.hvUiButton--mode-primary.hvUiButton--tone-base,
.hvUiButton--mode-primary.hvUiButton--tone-link {
  background: var(--accent, #1d4ed8);
  border-color: var(--accent, #1d4ed8);
}
.hvUiButton--mode-primary.hvUiButton--tone-accept {
  background: var(--good, #008000);
  border-color: color-mix(in oklab, var(--good, #008000) 74%, black);
}
.hvUiButton--mode-primary.hvUiButton--tone-warning {
  background: var(--warn, #ff8c00);
  border-color: color-mix(in oklab, var(--warn, #ff8c00) 78%, black);
}
.hvUiButton--mode-primary.hvUiButton--tone-reject {
  background: var(--bad, #b91c1c);
  border-color: var(--bad, #b91c1c);
}
.hvUiButton--mode-primary {
  color: var(--text, #111827);
}
.hvUiButton--mode-primary .hvUiButton__before,
.hvUiButton--mode-primary .hvUiButton__after {
  color: currentColor;
}
.hvUiButton--mode-primary.hvUiButton--tone-base:hover:not(:disabled),
.hvUiButton--mode-primary.hvUiButton--tone-link:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent, #1d4ed8) 82%, black);
  border-color: color-mix(in oklab, var(--accent, #1d4ed8) 82%, black);
}
.hvUiButton--mode-primary.hvUiButton--tone-accept:hover:not(:disabled) {
  background: color-mix(in oklab, var(--good, #008000) 82%, black);
  border-color: color-mix(in oklab, var(--good, #008000) 68%, black);
}
.hvUiButton--mode-primary.hvUiButton--tone-warning:hover:not(:disabled) {
  background: color-mix(in oklab, var(--warn, #ff8c00) 82%, black);
  border-color: color-mix(in oklab, var(--warn, #ff8c00) 72%, black);
}
.hvUiButton--mode-primary.hvUiButton--tone-reject:hover:not(:disabled) {
  background: color-mix(in oklab, var(--bad, #b91c1c) 82%, black);
  border-color: color-mix(in oklab, var(--bad, #b91c1c) 82%, black);
}
.hvUiButton--mode-secondary.hvUiButton--tone-base {
  color: var(--text, #111827);
  border-color: color-mix(in oklab, var(--accent, #1d4ed8) 45%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--accent, #1d4ed8) 12%, var(--panel2, #f1f5f9));
}
.hvUiButton--mode-secondary.hvUiButton--tone-base .hvUiButton__before,
.hvUiButton--mode-secondary.hvUiButton--tone-base .hvUiButton__after {
  color: var(--accent, #1d4ed8);
}
.hvUiButton--mode-secondary.hvUiButton--tone-accept {
  border-color: color-mix(in oklab, var(--good, #008000) 52%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--good, #008000) 14%, var(--panel2, #f1f5f9));
  color: var(--text, #111827);
}
.hvUiButton--mode-secondary.hvUiButton--tone-accept .hvUiButton__before,
.hvUiButton--mode-secondary.hvUiButton--tone-accept .hvUiButton__after {
  color: var(--good, #008000);
}
.hvUiButton--mode-secondary.hvUiButton--tone-warning {
  border-color: color-mix(in oklab, var(--warn, #ff8c00) 46%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--warn, #ff8c00) 18%, var(--panel2, #f1f5f9));
  color: color-mix(in oklab, var(--warn, #a16207) 55%, var(--text, #111827));
}
.hvUiButton--mode-secondary.hvUiButton--tone-reject {
  border-color: color-mix(in oklab, var(--bad, #b91c1c) 48%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--bad, #b91c1c) 12%, var(--panel2, #f1f5f9));
  color: color-mix(in oklab, var(--bad, #b91c1c) 88%, var(--text, #111827));
}
.hvUiButton--mode-secondary.hvUiButton--tone-base:hover:not(:disabled),
.hvUiButton--mode-secondary.hvUiButton--tone-link:hover:not(:disabled) {
  background: color-mix(in oklab, var(--accent, #1d4ed8) 24%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--accent, #1d4ed8) 58%, var(--line, #e2e8f0));
}
.hvUiButton--mode-secondary.hvUiButton--tone-accept:hover:not(:disabled) {
  background: color-mix(in oklab, var(--good, #008000) 26%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--good, #008000) 58%, var(--line, #e2e8f0));
}
.hvUiButton--mode-secondary.hvUiButton--tone-warning:hover:not(:disabled) {
  background: color-mix(in oklab, var(--warn, #ff8c00) 28%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--warn, #ff8c00) 52%, var(--line, #e2e8f0));
}
.hvUiButton--mode-secondary.hvUiButton--tone-reject:hover:not(:disabled) {
  background: color-mix(in oklab, var(--bad, #b91c1c) 22%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--bad, #b91c1c) 58%, var(--line, #e2e8f0));
}
.hvUiButton--mode-tertiary {
  background: transparent;
  border-color: transparent;
  padding-left: 8px;
  padding-right: 8px;
}
.hvUiButton--mode-tertiary.hvUiButton--tone-base,
.hvUiButton--mode-tertiary.hvUiButton--tone-link {
  color: var(--accent, #1d4ed8);
}
.hvUiButton--mode-tertiary.hvUiButton--tone-accept {
  color: var(--good, #008000);
}
.hvUiButton--mode-tertiary.hvUiButton--tone-warning {
  color: var(--warn, #cc7000);
}
.hvUiButton--mode-tertiary.hvUiButton--tone-reject {
  color: var(--bad, #b91c1c);
}
.hvUiButton--mode-tertiary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 92%, transparent);
}
.hvUiButton--mode-outline {
  background: transparent;
}
.hvUiButton--mode-outline.hvUiButton--tone-base,
.hvUiButton--mode-outline.hvUiButton--tone-link {
  color: var(--accent, #1d4ed8);
  border-color: var(--accent, #1d4ed8);
}
.hvUiButton--mode-outline.hvUiButton--tone-accept {
  color: var(--good, #008000);
  border-color: color-mix(in oklab, var(--good, #008000) 72%, black);
}
.hvUiButton--mode-outline.hvUiButton--tone-warning {
  color: var(--warn, #cc7000);
  border-color: color-mix(in oklab, var(--warn, #ff8c00) 76%, black);
}
.hvUiButton--mode-outline.hvUiButton--tone-reject {
  color: var(--bad, #b91c1c);
  border-color: var(--bad, #b91c1c);
}
.hvUiButton--mode-outline:hover:not(:disabled) {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 82%, transparent);
}
.hvUiButton--mode-primary.hvUiButton--hasCustomTone {
  background: var(--hv-button-accent);
  border-color: color-mix(in oklab, var(--hv-button-accent) 74%, black);
}
.hvUiButton--mode-primary.hvUiButton--hasCustomTone:hover:not(:disabled) {
  background: color-mix(in oklab, var(--hv-button-accent) 82%, black);
  border-color: color-mix(in oklab, var(--hv-button-accent) 68%, black);
}
.hvUiButton--mode-secondary.hvUiButton--hasCustomTone {
  color: var(--text, #111827);
  border-color: color-mix(in oklab, var(--hv-button-accent) 45%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--hv-button-accent) 12%, var(--panel2, #f1f5f9));
}
.hvUiButton--mode-secondary.hvUiButton--hasCustomTone .hvUiButton__before,
.hvUiButton--mode-secondary.hvUiButton--hasCustomTone .hvUiButton__after {
  color: var(--hv-button-accent);
}
.hvUiButton--mode-secondary.hvUiButton--hasCustomTone:hover:not(:disabled) {
  background: color-mix(in oklab, var(--hv-button-accent) 24%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--hv-button-accent) 58%, var(--line, #e2e8f0));
}
.hvUiButton--mode-tertiary.hvUiButton--hasCustomTone {
  color: var(--hv-button-accent);
}
.hvUiButton--mode-tertiary.hvUiButton--hasCustomTone .hvUiButton__before,
.hvUiButton--mode-tertiary.hvUiButton--hasCustomTone .hvUiButton__after {
  color: var(--hv-button-accent);
}
.hvUiButton--mode-outline.hvUiButton--hasCustomTone {
  color: var(--hv-button-accent);
  border-color: color-mix(in oklab, var(--hv-button-accent) 72%, black);
}
.hvUiButton--noBorder {
  border: none !important;
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--theme {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 46%, var(--line, #e2e8f0));
  border-color: color-mix(in oklab, var(--line, #e2e8f0) 55%, var(--accent, #1d4ed8));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--theme {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 62%, var(--line, #e2e8f0));
  border-color: color-mix(in oklab, var(--accent, #1d4ed8) 32%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-base,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-link {
  background: color-mix(in oklab, var(--accent, #1d4ed8) 38%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--accent, #1d4ed8) 62%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-base .hvUiButton__before,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-base .hvUiButton__after,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-link .hvUiButton__before,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-link .hvUiButton__after {
  color: var(--accent, #1d4ed8);
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-accept {
  background: color-mix(in oklab, var(--good, #008000) 36%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--good, #008000) 58%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-warning {
  background: color-mix(in oklab, var(--warn, #ff8c00) 34%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--warn, #ff8c00) 55%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--tone-reject {
  background: color-mix(in oklab, var(--bad, #b91c1c) 34%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--bad, #b91c1c) 58%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-secondary.hvUiButton--hasCustomTone {
  background: color-mix(in oklab, var(--hv-button-accent) 38%, var(--panel2, #f1f5f9));
  border-color: color-mix(in oklab, var(--hv-button-accent) 62%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--tone-base,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--tone-link {
  box-shadow: inset 0 2px 5px color-mix(in oklab, black 22%, transparent);
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--tone-accept,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--tone-warning,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--tone-reject,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-primary.hvUiButton--hasCustomTone {
  box-shadow: inset 0 2px 5px color-mix(in oklab, black 22%, transparent);
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--theme,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--tone-base,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--tone-link,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--tone-accept,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--tone-warning,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--tone-reject,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-tertiary.hvUiButton--hasCustomTone {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--line, #e2e8f0));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--theme {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 78%, transparent);
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--tone-base,
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--tone-link {
  background: color-mix(in oklab, var(--accent, #1d4ed8) 14%, var(--panel2, #f1f5f9));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--tone-accept {
  background: color-mix(in oklab, var(--good, #008000) 14%, var(--panel2, #f1f5f9));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--tone-warning {
  background: color-mix(in oklab, var(--warn, #ff8c00) 16%, var(--panel2, #f1f5f9));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--tone-reject {
  background: color-mix(in oklab, var(--bad, #b91c1c) 14%, var(--panel2, #f1f5f9));
}
.hvUiButton--checkable[aria-pressed=true].hvUiButton--mode-outline.hvUiButton--hasCustomTone {
  background: color-mix(in oklab, var(--hv-button-accent) 14%, var(--panel2, #f1f5f9));
}

/* packages/hv-ui/src/components/HvChip.css */
.hvUiChip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text, #111827);
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 5px;
  padding: 6px 12px;
  background: var(--panel2, #f1f5f9);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
  --hv-ui-chip-accent: var(--accent, #2563eb);
}
a.hvUiChip:any-link {
  text-decoration: none;
}
a.hvUiChip:any-link:hover,
a.hvUiChip:any-link:active,
a.hvUiChip:any-link:focus,
a.hvUiChip:any-link:focus-visible {
  text-decoration: none;
}
span.hvUiChip {
  cursor: default;
}
.hvUiChip__before,
.hvUiChip__after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
}
.hvUiChip__caption {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}
.hvUiChip--compact .hvUiChip__caption {
  max-width: 14rem;
}
.hvUiChip--inlineFit {
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
}
.hvUiChip--compact {
  gap: 4px;
  padding: 3px 9px;
  font-size: 0.65rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
}
.hvUiChip--noBorder {
  border-color: transparent !important;
  border-width: 0 !important;
}
.hvUiChip--noBackground {
  background: transparent !important;
}
.hvUiChip--tone-base,
.hvUiChip--tone-link {
  border-color: color-mix(in oklab, var(--hv-ui-chip-accent) 45%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--hv-ui-chip-accent) 12%, var(--panel2, #f1f5f9));
  color: color-mix(in oklab, var(--hv-ui-chip-accent) 92%, var(--text, #111827));
}
.hvUiChip--tone-base:hover,
.hvUiChip--tone-link:hover {
  border-color: var(--hv-ui-chip-accent);
  background: color-mix(in oklab, var(--hv-ui-chip-accent) 20%, var(--panel2, #f1f5f9));
}
.hvUiChip--tone-base:focus-visible,
.hvUiChip--tone-link:focus-visible {
  outline: 2px solid var(--hv-ui-chip-accent);
  outline-offset: 2px;
}
.hvUiChip--tone-accept {
  border-color: color-mix(in oklab, var(--good, #16a34a) 50%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--good, #16a34a) 14%, var(--panel2, #f1f5f9));
  color: color-mix(in oklab, var(--good, #16a34a) 88%, var(--text, #111827));
}
.hvUiChip--tone-accept:hover {
  border-color: var(--good, #16a34a);
  background: color-mix(in oklab, var(--good, #16a34a) 22%, var(--panel2, #f1f5f9));
}
.hvUiChip--tone-accept:focus-visible {
  outline: 2px solid var(--good, #16a34a);
  outline-offset: 2px;
}
.hvUiChip--tone-warning {
  border-color: color-mix(in oklab, var(--warn, #ca8a04) 42%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--warn, #eab308) 18%, var(--panel2, #f1f5f9));
  color: color-mix(in oklab, var(--warn, #a16207) 55%, var(--text, #111827));
}
.hvUiChip--tone-warning:hover {
  border-color: var(--warn, #ca8a04);
  background: color-mix(in oklab, var(--warn, #eab308) 26%, var(--panel2, #f1f5f9));
}
.hvUiChip--tone-warning:focus-visible {
  outline: 2px solid var(--warn, #ca8a04);
  outline-offset: 2px;
}
.hvUiChip--tone-reject {
  border-color: color-mix(in oklab, var(--bad, #dc2626) 48%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--bad, #dc2626) 12%, var(--panel2, #f1f5f9));
  color: color-mix(in oklab, var(--bad, #dc2626) 88%, var(--text, #111827));
}
.hvUiChip--tone-reject:hover {
  border-color: var(--bad, #dc2626);
  background: color-mix(in oklab, var(--bad, #dc2626) 18%, var(--panel2, #f1f5f9));
}
.hvUiChip--tone-reject:focus-visible {
  outline: 2px solid var(--bad, #dc2626);
  outline-offset: 2px;
}
.hvUiChip--hasCustomAccent.hvUiChip--tone-base,
.hvUiChip--hasCustomAccent.hvUiChip--tone-link,
.hvUiChip--hasCustomAccent.hvUiChip--tone-accept,
.hvUiChip--hasCustomAccent.hvUiChip--tone-warning,
.hvUiChip--hasCustomAccent.hvUiChip--tone-reject {
  border-color: color-mix(in oklab, var(--hv-ui-chip-accent) 50%, var(--line, #e2e8f0));
  background: color-mix(in oklab, var(--hv-ui-chip-accent) 14%, var(--panel2, #f1f5f9));
  color: var(--hv-ui-chip-accent);
}
.hvUiChip--hasCustomAccent.hvUiChip--tone-base:hover,
.hvUiChip--hasCustomAccent.hvUiChip--tone-link:hover,
.hvUiChip--hasCustomAccent.hvUiChip--tone-accept:hover,
.hvUiChip--hasCustomAccent.hvUiChip--tone-warning:hover,
.hvUiChip--hasCustomAccent.hvUiChip--tone-reject:hover {
  border-color: var(--hv-ui-chip-accent);
  background: color-mix(in oklab, var(--hv-ui-chip-accent) 24%, var(--panel2, #f1f5f9));
}
.hvUiChip--noBorder.hvUiChip--noBackground.hvUiChip--tone-link,
.hvUiChip--noBorder.hvUiChip--noBackground.hvUiChip--tone-base {
  color: color-mix(in oklab, var(--hv-ui-chip-accent) 88%, var(--text, #111827));
}
.hvUiChip--noBorder.hvUiChip--noBackground.hvUiChip--tone-link:hover,
.hvUiChip--noBorder.hvUiChip--noBackground.hvUiChip--tone-base:hover {
  color: var(--hv-ui-chip-accent);
  text-decoration: none;
}

/* packages/hv-ui/src/components/HvAccordionDemo.css */
.hvUiAccordionDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}
.hvUiAccordionDemo__hint {
  margin: 0;
}
.hvUiAccordionDemo__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hvUiAccordionDemo__p {
  margin: 0;
}
.hvUiAccordionDemo .mono {
  font-size: 12px;
}

/* packages/hv-ui/src/components/DemoStub.css */
.hvUiDemoStub {
  display: inline-flex;
  align-items: center;
}

/* packages/hv-ui/src/components/HvDeviceDemo.css */
.hvUiDeviceDemo {
  margin: 0;
}
.hvUiDeviceDemo__pre {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  max-width: 100%;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--adminDevDocsCodeFg, #1a1a1a);
  background: var(--adminDevDocsCodeBg, #f4f4f5);
  border: 1px solid var(--adminDevDocsCodeBorder, #e4e4e7);
  border-radius: 6px;
}

/* packages/hv-ui/src/components/HvButtonDemo.css */
.hvUiButtonDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hvUiButtonDemo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hvUiButtonDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}
.hvUiButtonDemo__stretchShell {
  width: min(100%, 280px);
  padding: 8px;
  box-sizing: border-box;
  border: 1px dashed color-mix(in oklab, var(--text, #e2e8f0) 35%, transparent);
  border-radius: 6px;
}

/* packages/hv-ui/src/components/HvInput.css */
.hvUiInput {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--line-height-caption, 1.25);
  height: var(--hv-control-height, 30px);
  min-width: 0;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  border-radius: 5px;
  background-color: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--panel, #ffffff));
  color: var(--text, #111827);
  cursor: text;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
}
.hvUiInput::placeholder {
  color: color-mix(in oklab, var(--muted, #64748b) 82%, var(--text, #111827));
  font-weight: var(--font-weight-caption, 600);
}
.hvUiInput--mode-compact {
  height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  padding: 0 8px;
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
}
.hvUiInput--stretched {
  display: block;
  width: 100%;
  max-width: 100%;
}
.hvUiInput--tone-base {
  --hv-input-accent: var(--accent, #2563eb);
}
.hvUiInput--tone-accept {
  --hv-input-accent: var(--success, #16a34a);
}
.hvUiInput--tone-warning {
  --hv-input-accent: var(--warning, #d97706);
}
.hvUiInput--tone-reject {
  --hv-input-accent: var(--danger, #dc2626);
}
.hvUiInput--tone-base,
.hvUiInput--tone-accept,
.hvUiInput--tone-warning,
.hvUiInput--tone-reject,
.hvUiInput--hasCustomTone {
  border-color: color-mix(in oklab, var(--hv-input-accent) 72%, transparent);
}
.hvUiInput:focus {
  outline: none;
}
.hvUiInput:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-input-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiInput:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hvUiInput:read-only:not(:disabled) {
  cursor: default;
}
.hvUiInputField {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}
.hvUiInputField--mode-compact {
  gap: 2px;
}
.hvUiInputField--stretched {
  display: flex;
  width: 100%;
}
.hvUiInput__caption {
  font-family: var(--font-family-sans, inherit);
  font-size: 13px;
  font-weight: var(--font-weight-caption, 600);
  line-height: 1.25;
  color: var(--text, #111827);
  cursor: default;
  user-select: none;
}
.hvUiInputField--mode-compact .hvUiInput__caption {
  font-size: var(--font-size-tiny, 11px);
  line-height: var(--line-height-tiny, 1.25);
}
.hvUiInputField--labelRow {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hvUiInputField--labelRow.hvUiInputField--mode-compact {
  gap: 6px;
}
.hvUiInputField--labelRow .hvUiInput__caption {
  flex-shrink: 0;
}
.hvUiInputField--labelRow.hvUiInputField--withHint {
  align-items: flex-start;
}
.hvUiInputField--labelRow.hvUiInputField--withHint .hvUiInput__caption {
  padding-top: 7px;
}
.hvUiInputField--labelRow > .hvUiInput {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiInputField--labelRow > .hvUiInputField__controlStack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.hvUiInputField--labelRow > .hvUiInputField__controlStack > .hvUiInput {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}
.hvUiInputField:not(.hvUiInputField--labelRow) > .hvUiInputField__controlStack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.hvUiInputField__hint {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-tiny, 11px);
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in oklab, var(--muted, #64748b) 88%, var(--text, #111827) 12%);
}
.hvUiInputField--mode-compact .hvUiInputField__hint {
  font-size: 10px;
  line-height: 1.3;
}
.hvUiInputField--labelRow > .hvUiSpinBoxShell {
  flex: 0 0 auto;
  min-width: auto;
}
.hvUiInputField--labelRow > .hvUiSpinBoxShell.hvUiSpinBoxShell--stretched {
  flex: 1 1 auto;
}

/* packages/hv-ui/src/components/HvSpinBox.css */
.hvUiSpinBoxShell {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  vertical-align: middle;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--hv-control-height, 30px);
  min-width: 0;
  border: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  border-radius: 5px;
  background-color: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--panel, #ffffff));
  color: var(--text, #111827);
  overflow: hidden;
  touch-action: manipulation;
}
.hvUiSpinBoxShell:not(.hvUiSpinBoxShell--stretched) {
  width: max-content;
  max-width: 100%;
}
.hvUiSpinBoxShell--compact {
  height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  border-radius: 5px;
}
.hvUiSpinBoxShell--stretched {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.hvUiSpinBoxShell.hvUiInput--tone-base {
  --hv-input-accent: var(--accent, #2563eb);
}
.hvUiSpinBoxShell.hvUiInput--tone-accept {
  --hv-input-accent: var(--success, #16a34a);
}
.hvUiSpinBoxShell.hvUiInput--tone-warning {
  --hv-input-accent: var(--warning, #d97706);
}
.hvUiSpinBoxShell.hvUiInput--tone-reject {
  --hv-input-accent: var(--danger, #dc2626);
}
.hvUiSpinBoxShell.hvUiInput--tone-base,
.hvUiSpinBoxShell.hvUiInput--tone-accept,
.hvUiSpinBoxShell.hvUiInput--tone-warning,
.hvUiSpinBoxShell.hvUiInput--tone-reject,
.hvUiSpinBoxShell.hvUiInput--hasCustomTone {
  border-color: color-mix(in oklab, var(--hv-input-accent) 72%, transparent);
}
.hvUiSpinBoxShell:focus-within {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-input-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiSpinBoxShell .hvUiInput.hvUiSpinBox__input {
  flex: 1 1 auto;
  min-width: 2.75ch;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 10px 0 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: calc(var(--hv-control-height, 30px) - 2px);
  text-align: center;
  color: inherit;
  cursor: text;
}
.hvUiSpinBoxShell--compact .hvUiInput.hvUiSpinBox__input {
  padding: 0 6px 0 8px;
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: calc(var(--hv-control-height-compact, var(--hv-control-compact-h, 30px)) - 2px);
}
.hvUiSpinBoxShell .hvUiSpinBox__input::-webkit-outer-spin-button,
.hvUiSpinBoxShell .hvUiSpinBox__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hvUiSpinBoxShell .hvUiSpinBox__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hvUiSpinBoxShell .hvUiSpinBox__input:read-only:not(:disabled) {
  cursor: default;
}
.hvUiSpinBoxShell__steppers {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 28px;
  align-self: stretch;
  border-left: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 88%, var(--border, #cbd5e1));
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 94%, var(--panel, #ffffff));
  justify-content: stretch;
  padding: 2px;
  gap: 2px;
  box-sizing: border-box;
}
.hvUiSpinBoxShell--compact .hvUiSpinBoxShell__steppers {
  width: 24px;
  padding: 1px;
  gap: 1px;
}
.hvUiSpinBox__stepBtn.hvUiButton--iconOnly {
  flex: 1 1 50%;
  min-height: 0;
  height: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 4px;
}
.hvUiInputField--spinBoxAlignStart {
  align-items: flex-start;
}

/* packages/hv-ui/src/components/HvButtonSpinBox.css */
.hvUiButtonSpinBox {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
}
.hvUiButtonSpinBox--stretched {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.hvUiButtonSpinBox--stretched .hvUiButtonSpinBox__button {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiButtonSpinBox--stretched .hvUiButtonSpinBox__spin {
  flex: 0 0 auto;
}
.hvUiButtonSpinBox__button.hvUiButton {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  position: relative;
  z-index: 1;
}
.hvUiButtonSpinBox__spin.hvUiSpinBoxShell {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px;
  position: relative;
  z-index: 0;
}
.hvUiButtonSpinBox--disabled {
  opacity: 0.72;
}
.hvUiButtonSpinBox--pressed .hvUiButtonSpinBox__spin.hvUiSpinBoxShell {
  border-color: color-mix(in oklab, var(--hv-input-accent, var(--accent, #1d4ed8)) 42%, var(--line, #e2e8f0));
  z-index: 2;
}

/* packages/hv-ui/src/components/HvFileUpload.css */
.hvUiFileUpload {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
}
.hvUiFileUpload__input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* packages/hv-ui/src/components/HvImage.css */
.hvUiImage {
  --hv-image-accent: var(--accent, #2563eb);
  --hv-image-pad: 5px;
  display: block;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.hvUiImage__figure {
  margin: 0;
  display: block;
  position: relative;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiImage__root {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.hvUiImage--frame-corners .hvUiImage__root,
.hvUiImage--frame-full .hvUiImage__root {
  padding: var(--hv-image-pad);
  overflow: visible;
}
.hvUiImage--noPad .hvUiImage__root {
  padding: 0;
}
.hvUiImage--frame-none .hvUiImage__root {
  padding: 0;
}
.hvUiImage--frame-none .hvUiImage__img,
.hvUiImage--frame-none .hvUiImage__mediaSlot > .hvUiImage__img {
  border: none;
}
.hvUiImage--frame-full .hvUiImage__root {
  border: 2px solid color-mix(in oklab, var(--hv-image-accent) 58%, transparent);
  box-sizing: border-box;
}
.hvUiImage--frame-full.hvUiImage--corner-rounded .hvUiImage__root,
.hvUiImage--frame-corners.hvUiImage--corner-rounded .hvUiImage__root {
  border-radius: 5px;
  overflow: hidden;
}
.hvUiImage--frame-full.hvUiImage--corner-squared .hvUiImage__root,
.hvUiImage--frame-full.hvUiImage--corner-none .hvUiImage__root,
.hvUiImage--frame-corners.hvUiImage--corner-squared .hvUiImage__root,
.hvUiImage--frame-corners.hvUiImage--corner-none .hvUiImage__root {
  border-radius: 0;
}
.hvUiImage--frame-full .hvUiImage__corners {
  display: none;
}
.hvUiImage__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hvUiImage--corner-none .hvUiImage__corners {
  display: none;
}
.hvUiImage__corner {
  position: absolute;
  box-sizing: border-box;
  width: clamp(10px, 14px, 18%);
  height: clamp(10px, 14px, 18%);
  min-width: 10px;
  min-height: 10px;
  border-color: var(--hv-image-accent);
  border-style: solid;
}
.hvUiImage--corner-rounded .hvUiImage__corner {
  border-radius: 2px;
}
.hvUiImage__corner--tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.hvUiImage__corner--tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}
.hvUiImage__corner--bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}
.hvUiImage__corner--br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}
.hvUiImage__mediaCol {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hvUiImage__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 0;
  z-index: 1;
}
.hvUiImage__mediaSlot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 0;
}
.hvUiImage--cardLayout .hvUiImage__mediaSlot,
.hvUiImage--ratioShell .hvUiImage__mediaSlot {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}
.hvUiImage--cardLayout .hvUiImage__mediaSlot > .hvUiImage__img,
.hvUiImage--ratioShell .hvUiImage__mediaSlot > .hvUiImage__img {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
.hvUiImage--cardLayout .hvUiImage__frame > .hvUiImage__mediaSlot,
.hvUiImage--ratioShell .hvUiImage__frame > .hvUiImage__mediaSlot {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}
.hvUiImage--cardLayout .hvUiImage__frame > .hvUiImage__img,
.hvUiImage--ratioShell .hvUiImage__frame > .hvUiImage__img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}
.hvUiImage--ratioShell.hvUiImage--fit-contain .hvUiImage__frame > .hvUiImage__img,
.hvUiImage--ratioShell.hvUiImage--fit-contain .hvUiImage__mediaSlot > .hvUiImage__img,
.hvUiImage--cardLayout.hvUiImage--fit-contain .hvUiImage__frame > .hvUiImage__img,
.hvUiImage--cardLayout.hvUiImage--fit-contain .hvUiImage__mediaSlot > .hvUiImage__img {
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
}
.hvUiImage--ratioShell.hvUiImage--fit-fill .hvUiImage__frame > .hvUiImage__img,
.hvUiImage--ratioShell.hvUiImage--fit-fill .hvUiImage__mediaSlot > .hvUiImage__img,
.hvUiImage--cardLayout.hvUiImage--fit-fill .hvUiImage__frame > .hvUiImage__img,
.hvUiImage--cardLayout.hvUiImage--fit-fill .hvUiImage__mediaSlot > .hvUiImage__img {
  object-fit: fill;
}
.hvUiImage__chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hvUiImage__chrome .hvUiImage__action > * {
  pointer-events: auto;
}
.hvUiImage--frame-corners .hvUiImage__img,
.hvUiImage--frame-full .hvUiImage__img,
.hvUiImage--frame-corners .hvUiImage__mediaSlot > .hvUiImage__img,
.hvUiImage--frame-full .hvUiImage__mediaSlot > .hvUiImage__img {
  box-sizing: border-box;
  border: 2px solid color-mix(in oklab, var(--panel, #ffffff) 88%, var(--line, #e2e8f0));
  vertical-align: top;
}
.hvUiImage--rounded .hvUiImage__img,
.hvUiImage--rounded .hvUiImage__mediaSlot > .hvUiImage__img {
  border-radius: 5px;
}
.hvUiImage--rounded .hvUiImage__frame {
  border-radius: 5px;
}
.hvUiImage--noRounded .hvUiImage__img,
.hvUiImage--noRounded .hvUiImage__frame,
.hvUiImage--noRounded .hvUiImage__mediaSlot > .hvUiImage__img {
  border-radius: 0;
}
.hvUiImage__img {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  vertical-align: middle;
}
.hvUiImage:not(.hvUiImage--cardLayout):not(.hvUiImage--ratioShell) .hvUiImage__img,
.hvUiImage:not(.hvUiImage--cardLayout):not(.hvUiImage--ratioShell) .hvUiImage__mediaSlot > .hvUiImage__img {
  height: auto;
}
.hvUiImage--cardLayout .hvUiImage__img,
.hvUiImage--cardLayout .hvUiImage__mediaSlot > .hvUiImage__img,
.hvUiImage--ratioShell .hvUiImage__img,
.hvUiImage--ratioShell .hvUiImage__mediaSlot > .hvUiImage__img {
  height: 100%;
}
.hvUiImage--fit-contain .hvUiImage__img,
.hvUiImage--fit-contain .hvUiImage__mediaSlot > .hvUiImage__img {
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.hvUiImage--fit-fill .hvUiImage__img,
.hvUiImage--fit-fill .hvUiImage__mediaSlot > .hvUiImage__img {
  object-fit: fill;
}
.hvUiImage__img--interactive {
  cursor: pointer;
}
.hvUiImage__img--interactive:focus-visible {
  outline: 2px solid var(--hv-image-accent);
  outline-offset: 2px;
}
.hvUiImage__action {
  position: absolute;
  z-index: 6;
  top: clamp(5px, 3%, 15px);
  right: clamp(5px, 3%, 15px);
  pointer-events: none;
}
.hvUiImage__action > * {
  pointer-events: auto;
}
.hvUiImage__badge {
  position: absolute;
  z-index: 5;
  bottom: clamp(4px, 2.5%, 12px);
  right: clamp(4px, 2.5%, 12px);
  box-sizing: border-box;
  max-width: min(96%, 280px);
  padding: clamp(2px, 0.6vw, 2px) clamp(4px, 1.2vw, 5px);
  font-family: var(--font-family-sans, inherit);
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  font-weight: 650;
  line-height: 1.2;
  border-radius: 7px;
  border: 1px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hvUiImage__badge--tone-base {
  color: var(--text, #e2e8f0);
  border-color: color-mix(in oklab, var(--line, #64748b) 55%, transparent);
  background: color-mix(in oklab, var(--panel2, #1e293b) 88%, transparent);
}
.hvUiImage__badge--tone-accept {
  color: color-mix(in oklab, var(--good, #22c55e) 92%, var(--text, #fff));
  border-color: color-mix(in oklab, var(--good, #22c55e) 42%, transparent);
  background: color-mix(in oklab, var(--good, #22c55e) 14%, var(--panel2, #1e293b));
}
.hvUiImage__badge--tone-warning {
  color: color-mix(in oklab, var(--warn, #ca8a04) 90%, var(--text, #fff));
  border-color: color-mix(in oklab, var(--warn, #ca8a04) 45%, transparent);
  background: color-mix(in oklab, var(--warn, #ca8a04) 14%, var(--panel2, #1e293b));
}
.hvUiImage__badge--tone-reject {
  color: color-mix(in oklab, var(--bad, #f87171) 95%, var(--text, #fff));
  border-color: color-mix(in oklab, var(--bad, #dc2626) 45%, transparent);
  background: color-mix(in oklab, var(--bad, #dc2626) 14%, var(--panel2, #1e293b));
}
.hvUiImage__badge--tone-link {
  color: var(--accent, #60a5fa);
  border-color: color-mix(in oklab, var(--accent, #2563eb) 45%, transparent);
  background: color-mix(in oklab, var(--accent, #2563eb) 12%, var(--panel2, #1e293b));
}
.hvUiImage__descOverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 8px 10px;
  text-align: center;
  font-family: var(--font-family-sans, var(--sans, system-ui, sans-serif));
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.65rem, 0.65vw, 0.9rem);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: skewX(-5deg);
  color: #fde047;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
html[data-theme=light] .hvUiImage__descOverlay {
  color: #ca8a04;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.55),
    0 2px 8px rgba(15, 23, 42, 0.35);
}
.hvUiImage__descBelowFrame {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 8px 0;
  text-align: center;
  font-family: var(--font-family-sans, var(--sans, system-ui, sans-serif));
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.65rem, 0.65vw, 0.9rem);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: skewX(-5deg);
  color: #fde047;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
html[data-theme=light] .hvUiImage__descBelowFrame {
  color: #ca8a04;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.55),
    0 2px 8px rgba(15, 23, 42, 0.35);
}
.hvUiImage__caption {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  text-align: center;
  max-width: 100%;
  line-height: 1.4;
  font-size: var(--font-size-caption, 12px);
  color: color-mix(in oklab, var(--text, #e2e8f0) 88%, transparent);
}
.hvUiImage--tone-base {
  --hv-image-accent: var(--accent, #2563eb);
}
.hvUiImage--tone-accept {
  --hv-image-accent: var(--good, #22c55e);
}
.hvUiImage--tone-warning {
  --hv-image-accent: var(--warn, #ca8a04);
}
.hvUiImage--tone-reject {
  --hv-image-accent: var(--bad, #dc2626);
}
.hvUiImage--tone-link {
  --hv-image-accent: var(--accent, #2563eb);
}
.hvUiImage--theme {
  --hv-image-accent: var(--accent, #2563eb);
}
.hvUiImage--cardLayout:not(.hvUiImage--descBelowFrame),
.hvUiImage--ratioShell:not(.hvUiImage--descBelowFrame) {
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--hv-image-ratio, 16 / 9);
  min-height: 0;
  position: relative;
  isolation: isolate;
}
.hvUiImage--descBelowFrame.hvUiImage--cardLayout,
.hvUiImage--descBelowFrame.hvUiImage--ratioShell {
  width: 100%;
  max-width: 100%;
  aspect-ratio: unset;
  height: auto;
  position: relative;
  isolation: isolate;
}
.hvUiImage--cardLayout > .hvUiImage__figure,
.hvUiImage--ratioShell > .hvUiImage__figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.hvUiImage--descBelowFrame.hvUiImage--cardLayout > .hvUiImage__figure,
.hvUiImage--descBelowFrame.hvUiImage--ratioShell > .hvUiImage__figure {
  height: auto;
}
.hvUiImage--cardLayout > .hvUiImage__figure > .hvUiImage__root,
.hvUiImage--ratioShell > .hvUiImage__figure > .hvUiImage__root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.hvUiImage--descBelowFrame.hvUiImage--cardLayout > .hvUiImage__figure > .hvUiImage__root,
.hvUiImage--descBelowFrame.hvUiImage--ratioShell > .hvUiImage__figure > .hvUiImage__root {
  height: auto;
  flex: none;
  min-height: 0;
}
.hvUiImage--descBelowFrame:not(.hvUiImage--cardLayout):not(.hvUiImage--ratioShell) .hvUiImage__root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.hvUiImage--cardLayout .hvUiImage__mediaCol,
.hvUiImage--ratioShell .hvUiImage__mediaCol {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.hvUiImage--descBelowFrame.hvUiImage--cardLayout .hvUiImage__mediaCol,
.hvUiImage--descBelowFrame.hvUiImage--ratioShell .hvUiImage__mediaCol {
  flex: 0 0 auto;
  aspect-ratio: var(--hv-image-ratio, 16 / 9);
  width: 100%;
  min-height: 0;
}
.hvUiImage--descBelowFrame:not(.hvUiImage--cardLayout):not(.hvUiImage--ratioShell) .hvUiImage__mediaCol {
  flex: 0 0 auto;
  width: 100%;
}
.hvUiImage--cardLayout .hvUiImage__frame,
.hvUiImage--ratioShell .hvUiImage__frame {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* packages/hv-ui/src/components/HvCardNews.css */
.hvUiCardNews .hvNewsCard__shell,
.hvUiCardNews .hvNewsBlock__shell {
  display: block;
  min-width: 0;
}
.hvUiCardNews .hvNewsBlock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hvUiCardNews .hvNewsBlock--compact {
  gap: 6px;
}
.hvUiCardNews .hvNewsBlock__imageLink {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.hvUiCardNews .hvNewsBlock__imageLink .hvNewsBlock__imagePreview {
  width: 100%;
  max-width: 100%;
  min-height: 0;
}
.hvUiCardNews .hvNewsBlock__title {
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-hyphens: none;
  hyphens: none;
  font-size: clamp(0.75rem, 1.45vw, 0.9rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.hvUiCardNews .hvNewsBlock__title a {
  color: color-mix(in oklab, var(--text, #e5e7eb) 96%, transparent);
  text-decoration: none;
}
.hvUiCardNews .hvNewsBlock__title a:hover {
  color: color-mix(in oklab, var(--accent, #60a5fa) 78%, var(--text, #e5e7eb));
}
.hvUiCardNews .hvNewsBlock__subtitle {
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: clamp(0.65rem, 1.15vw, 0.75rem);
  line-height: 1.35;
  font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.hvUiCardNews .hvNewsBlock__subtitle.muted {
  color: color-mix(in oklab, var(--muted, #94a3b8) 92%, var(--text, #e5e7eb));
}
.hvUiCardNews .hvNewsBlock--compact .hvNewsBlock__title {
  font-size: clamp(0.68rem, 1.25vw, 0.82rem);
}
.hvUiCardNews .hvNewsBlock--compact .hvNewsBlock__subtitle {
  font-size: clamp(0.6rem, 1.05vw, 0.7rem);
}
html[data-theme=light] .hvUiCardNews .hvNewsBlock__title a {
  color: var(--text, #0f172a);
}
html[data-theme=light] .hvUiCardNews .hvNewsBlock__title a:hover {
  color: var(--accent, #2563eb);
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem:hover {
  box-shadow: none;
  border-color: transparent;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem .newsCardTitle {
  -webkit-hyphens: none;
  hyphens: none;
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem .newsCardExcerpt {
  margin: 0;
  -webkit-hyphens: none;
  hyphens: none;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: justify;
  color: color-mix(in oklab, var(--muted, #94a3b8) 92%, var(--text, #e5e7eb));
}
.hvUiCardNews .hvNewsCard__shell .newsCard:is(.hvNewsCard--row, .hvNewsCard--stack) .newsCardExcerpt {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__body {
  width: 100%;
  min-width: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__textRow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateCol {
  flex: 0 0 auto;
  width: 3.25rem;
  min-width: 3rem;
  max-width: 4.5rem;
  padding-right: 10px;
  border-right: 1px solid color-mix(in oklab, var(--hv-accent-line, var(--line, #334155)) 55%, transparent);
  text-align: center;
  box-sizing: border-box;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__channelTag {
  margin: 0 0 6px;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--muted, #94a3b8) 88%, var(--text, #e5e7eb));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateDay {
  display: block;
  font-size: clamp(1.35rem, 2.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--text, #e5e7eb) 96%, transparent);
  font-variant-numeric: tabular-nums;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateSub {
  display: block;
  font-size: clamp(0.6875rem, 1.45vw, 0.8125rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: color-mix(in oklab, var(--muted, #94a3b8) 95%, var(--text, #e5e7eb));
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateMonth {
  font-weight: 600;
  letter-spacing: 0.06em;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateTime {
  display: block;
  margin-top: 2px;
  font-size: clamp(0.625rem, 1.25vw, 0.6875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--muted, #94a3b8) 92%, var(--text, #e5e7eb));
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__dateBlock--plain {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: color-mix(in oklab, var(--muted, #94a3b8) 92%, var(--text, #e5e7eb));
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__copyCol {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__copyCol .newsCardTitle {
  margin-top: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem .homeFeedItem__imagePreview.hvUiImage {
  --home-feed-vf-inset: 8px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem .homeFeedItem__imagePreview.hvUiImage .hvUiImage__frame {
  padding: var(--home-feed-vf-inset);
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .newsCardImage.homeFeedItem__image {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__image {
  display: block;
  width: 100%;
  min-width: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy .newsCardImage.homeFeedItem__image {
  flex: 0 0 200px;
  max-width: 200px;
  width: 200px;
  height: auto;
  min-height: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy .homeFeedItem__image {
  display: block;
  width: 200px;
  flex: 0 0 200px;
  height: auto;
  min-width: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy .homeFeedItem__body {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy .newsCardMeta,
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack .homeFeedItem__copyCol .newsCardMeta {
  font-size: 11px;
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--muted, #94a3b8);
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy.homeFeedItem--compact {
  padding: 8px 0;
  gap: 10px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy.homeFeedItem--compact .newsCardImage.homeFeedItem__image {
  flex: 0 0 160px;
  max-width: 160px;
  width: 160px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--legacy.homeFeedItem--compact .homeFeedItem__image {
  width: 160px;
  flex: 0 0 160px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack.homeFeedItem--compact {
  padding: 8px 0;
  gap: 6px;
}
.hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem.homeFeedItem--stack.homeFeedItem--compact .newsCardTitle {
  font-size: clamp(0.75rem, 1.4vw, 0.875rem);
}
.hvUiCardNews .homeFeedItem__imagePreview .hvUiImage__frame,
.hvUiCardNews .homeFeedItem__imagePreview .hvUiImage__img {
  border-radius: 0;
}
.hvUiCardNews__tagsSlot {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 9px;
}
.hvUiCardNews__imageSlot {
  min-width: 0;
  width: 100%;
}
.hvUiCardNews .homeFeedItem__dateBlock--slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.hvUiCardNews .newsCard.homeFeedItem--legacy.hvNewsCard--noImage {
  flex-direction: column;
  align-items: stretch;
}
.hvUiCardNews .newsCard.homeFeedItem--stack.hvNewsCard--noImage .homeFeedItem__textRow {
  width: 100%;
}
.hvUiCardNews .hvNewsBlock--noImage {
  gap: 8px;
}
.hvUiCardNews .hvNewsCard__shell .newsCardTitle {
  margin: 0 0 6px;
}
.hvUiCardNews .hvNewsCard__shell .newsCardTitle a {
  color: color-mix(in oklab, var(--text, #e5e7eb) 96%, transparent);
  text-decoration: none;
}
.hvUiCardNews .hvNewsCard__shell .newsCardTitle a:hover {
  color: color-mix(in oklab, var(--accent, #60a5fa) 78%, var(--text, #e5e7eb));
}
html[data-theme=light] .hvUiCardNews .hvNewsCard__shell .newsCardTitle a {
  color: var(--text, #0f172a);
}
html[data-theme=light] .hvUiCardNews .hvNewsCard__shell .newsCardTitle a:hover {
  color: var(--accent, #2563eb);
}
.hvUiCardNews .hvNewsCard__shell:has(> .newsCard.hvNewsCard--row) {
  container-type: inline-size;
}
@container (max-width: 399.98px) {
  .hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem--legacy.hvNewsCard--row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem--legacy.hvNewsCard--row .newsCardImage.homeFeedItem__image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .hvUiCardNews .hvNewsCard__shell .newsCard.homeFeedItem--legacy.hvNewsCard--row .homeFeedItem__image {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* packages/hv-ui/src/components/HvCardNewsDemo.css */
.hvUiCardNewsDemo {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
}
.hvUiCardNewsDemo__label {
  margin: 0 0 8px;
  font-size: var(--font-size-caption, 12px);
  color: color-mix(in oklab, var(--text, #e2e8f0) 72%, transparent);
}

/* packages/hv-ui/src/components/HvGallery.css */
.hvUiGallery {
  box-sizing: border-box;
  min-width: 0;
  --hv-gallery-gap: 12px;
  --hv-gallery-item-width: min(240px, 82vw);
}
.hvUiGallery__rowShell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
}
.hvUiGallery__navSlot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
}
.hvUiGallery__navSlot--prev {
  padding-right: 4px;
}
.hvUiGallery__navSlot--next {
  padding-left: 4px;
}
.hvUiGallery__navSlot--empty {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
.hvUiGallery__navBtn {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in oklab, var(--line, #243041) 70%, transparent);
  border-radius: 6px;
  background: color-mix(in oklab, var(--panel2, #0f172a) 88%, transparent);
  color: color-mix(in oklab, var(--text, #e5e7eb) 92%, transparent);
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.hvUiGallery__navBtn:hover {
  background: color-mix(in oklab, var(--accent, #60a5fa) 18%, var(--panel2, #0f172a));
  border-color: color-mix(in oklab, var(--accent, #60a5fa) 45%, var(--line, #243041));
  color: var(--text, #e5e7eb);
}
.hvUiGallery__navBtn:focus-visible {
  outline: 2px solid var(--accent, #60a5fa);
  outline-offset: 2px;
}
.hvUiGallery__navBtn--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M10 3L5 8l5 5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.hvUiGallery__navBtn--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
html[data-theme=light] .hvUiGallery__navBtn {
  background-color: color-mix(in oklab, var(--panel2, #f1f5f9) 95%, white);
  border-color: color-mix(in oklab, var(--line, #e2e8f0) 90%, transparent);
  color: var(--text, #0f172a);
}
.hvUiGallery__scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hvUiGallery__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.hvUiGallery__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--hv-gallery-gap);
  align-items: stretch;
  width: max-content;
  min-height: 100%;
}
.hvUiGallery--row .hvUiGallery__item {
  flex: 0 0 var(--hv-gallery-item-width);
  min-width: var(--hv-gallery-item-width);
  max-width: var(--hv-gallery-item-width);
}
.hvUiGallery__item {
  min-width: 0;
}
.hvUiGallery__item .hvUiCardNews {
  height: 100%;
}
.hvUiGallery__gridViewport {
  min-width: 0;
}
.hvUiGallery--grid .hvUiGallery__inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hv-gallery-item-width)), 1fr));
  gap: var(--hv-gallery-gap);
  width: 100%;
}
.hvUiGallery--grid .hvUiGallery__item {
  min-width: 0;
  max-width: none;
}
.hvUiGallery .hvNewsBlock__imageLink--galleryPlain {
  cursor: default;
  text-decoration: none;
  color: inherit;
}
.hvUiGallery .hvNewsBlock__titlePlain {
  display: block;
  color: color-mix(in oklab, var(--text, #e5e7eb) 96%, transparent);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-family: inherit;
}
html[data-theme=light] .hvUiGallery .hvNewsBlock__titlePlain {
  color: var(--text, #0f172a);
}

/* packages/hv-ui/src/components/HvGalleryDemo.css */
.hvUiGalleryDemo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.hvUiGalleryDemo__block {
  min-width: 0;
}
.hvUiGalleryDemo__h {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--text, #e5e7eb) 88%, transparent);
}
.hvUiGalleryDemo__narrow {
  max-width: 420px;
  border: 1px dashed color-mix(in oklab, var(--line, #243041) 55%, transparent);
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}
html[data-theme=light] .hvUiGalleryDemo__h {
  color: var(--text, #0f172a);
}
html[data-theme=light] .hvUiGalleryDemo__narrow {
  border-color: color-mix(in oklab, var(--line, #e2e8f0) 80%, transparent);
}

/* packages/hv-ui/src/components/HvSelect.css */
.hvUiSelect {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--line-height-caption, 1.25);
  height: var(--hv-control-height, 30px);
  padding: 0 30px 0 12px;
  border: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  border-radius: 5px;
  background-color: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--panel, #ffffff));
  color: var(--text, #111827);
  cursor: pointer;
  touch-action: manipulation;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}
.hvUiSelect--mode-compact {
  height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  padding: 0 26px 0 8px;
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
  border-radius: var(--hv-control-compact-radius, 5px);
  background-position: right 8px center;
  background-size: 12px 12px;
}
.hvUiSelect--stretched {
  display: block;
  width: 100%;
  max-width: 100%;
}
.hvUiSelect--tone-base {
  --hv-select-accent: var(--accent, #2563eb);
}
.hvUiSelect--tone-accept {
  --hv-select-accent: var(--success, #16a34a);
}
.hvUiSelect--tone-warning {
  --hv-select-accent: var(--warning, #d97706);
}
.hvUiSelect--tone-reject {
  --hv-select-accent: var(--danger, #dc2626);
}
.hvUiSelect--tone-base,
.hvUiSelect--tone-accept,
.hvUiSelect--tone-warning,
.hvUiSelect--tone-reject,
.hvUiSelect--hasCustomTone {
  border-color: color-mix(in oklab, var(--hv-select-accent) 72%, transparent);
}
.hvUiSelect:focus {
  outline: none;
}
.hvUiSelect:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiSelect:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* packages/hv-ui/src/components/HvTable.css */
.hvUiTableWrap {
  --hv-table-accent: var(--accent, #2563eb);
  --hv-table-line: var(--line, #e2e8f0);
  --hv-table-head-bg: color-mix(in oklab, var(--panel2, #f8fafc) 92%, var(--bg, #fff));
  --hv-table-row-bg: var(--bg, #fff);
  --hv-table-row-bg-alt: color-mix(in oklab, var(--panel2, #f1f5f9) 48%, var(--bg, #fff));
  --hv-table-row-hover-bg: color-mix(in oklab, var(--hv-table-accent) 9%, var(--hv-table-row-bg-alt));
  box-sizing: border-box;
  max-width: 100%;
}
.hvUiTableWrap--compact {
  font-size: 13px;
}
.hvUiTableWrap__toolbar {
  margin-bottom: 8px;
}
.hvUiTableWrap__scroll {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--hv-table-accent) 18%, var(--hv-table-line));
  background: var(--bg, #fff);
}
.hvUiTableWrap--hasPager .hvUiTableWrap__scroll {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}
.hvUiTable {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
  line-height: 1.35;
}
.hvUiTable tbody {
  font-size: 1em;
}
.hvUiTable--layout-fixed {
  table-layout: fixed;
}
.hvUiTable__caption {
  caption-side: top;
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.875rem;
}
.hvUiTable__th,
.hvUiTable__td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hv-table-line);
  vertical-align: middle;
}
.hvUiTableWrap--compact .hvUiTable__th,
.hvUiTableWrap--compact .hvUiTable__td {
  padding: 6px 8px;
}
.hvUiTable thead .hvUiTable__th {
  background: var(--hv-table-head-bg);
  font-weight: 600;
  white-space: nowrap;
  font-size: calc(1em / 1.5);
}
.hvUiTable__th--align-right,
.hvUiTable__td--align-right {
  text-align: right;
}
.hvUiTable__th--align-center,
.hvUiTable__td--align-center {
  text-align: center;
}
.hvUiTable__thLabel {
  display: inline-block;
  padding: 2px 0;
}
.hvUiTable__sortHeader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 4px 2px 0;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  max-width: 100%;
}
.hvUiTable__sortHeader:hover,
.hvUiTable__sortHeader:focus-visible {
  background: color-mix(in oklab, var(--hv-table-accent) 12%, transparent);
  outline: none;
}
.hvUiTable__sortHeaderLabel {
  text-align: left;
}
.hvUiTable--layout-fixed .hvUiTable__td.hvUiTable__cell--ellipsis {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hvUiTable__th.hvUiTable__cell--ellipsis {
  overflow: hidden;
  max-width: 0;
}
.hvUiTable__th.hvUiTable__cell--ellipsis .hvUiTable__sortHeader {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.hvUiTable__th.hvUiTable__cell--ellipsis .hvUiTable__sortHeaderLabel,
.hvUiTable__th.hvUiTable__cell--ellipsis .hvUiTable__thLabel {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hvUiTable thead .hvUiTable__th.hvUiTable__cell--wrap {
  white-space: normal;
}
.hvUiTable__th.hvUiTable__cell--wrap .hvUiTable__sortHeader {
  white-space: normal;
  height: auto;
  align-items: flex-start;
}
.hvUiTable__th.hvUiTable__cell--wrap .hvUiTable__sortHeaderLabel,
.hvUiTable__th.hvUiTable__cell--wrap .hvUiTable__thLabel {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hvUiTable__td.hvUiTable__cell--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: middle;
}
.hvUiTable__th.hvUiTable__cell--wrap {
  vertical-align: top;
}
.hvUiTable__th--sortable:not([data-sort-dir]) .hvUiTable__sortHeader::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid color-mix(in oklab, var(--muted, #64748b) 55%, transparent);
  opacity: 0.65;
  transform: translateY(1px);
}
.hvUiTable__th[data-sort-dir=asc] .hvUiTable__sortHeader::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--hv-table-accent);
}
.hvUiTable__th[data-sort-dir=desc] .hvUiTable__sortHeader::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--hv-table-accent);
}
.hvUiTable__tr--clickable {
  cursor: pointer;
}
.hvUiTable--striped tbody .hvUiTable__tr:nth-child(odd) .hvUiTable__td {
  background: var(--hv-table-row-bg);
}
.hvUiTable--striped tbody .hvUiTable__tr:nth-child(even) .hvUiTable__td {
  background: var(--hv-table-row-bg-alt);
}
.hvUiTable tbody .hvUiTable__tr--hoverable:hover .hvUiTable__td {
  background: var(--hv-table-row-hover-bg);
}
.hvUiTable--striped tbody .hvUiTable__tr--hoverable:nth-child(odd):hover .hvUiTable__td {
  background: color-mix(in oklab, var(--hv-table-accent) 9%, var(--hv-table-row-bg));
}
.hvUiTable--striped tbody .hvUiTable__tr--hoverable:nth-child(even):hover .hvUiTable__td {
  background: color-mix(in oklab, var(--hv-table-accent) 9%, var(--hv-table-row-bg-alt));
}
.hvUiTable--striped .hvUiTable__tr--clickable:hover .hvUiTable__td {
  background: var(--hv-table-row-hover-bg);
}
.hvUiTable__th.hvUiTable__cell--borderMajor,
.hvUiTable__td.hvUiTable__cell--borderMajor {
  border-left: 2px solid color-mix(in oklab, var(--hv-table-accent) 38%, var(--hv-table-line));
}
.hvUiTable__th.hvUiTable__cell--borderMinor,
.hvUiTable__td.hvUiTable__cell--borderMinor {
  border-left: 1px solid color-mix(in oklab, var(--muted, #64748b) 42%, var(--hv-table-line));
}
.hvUiTable--crosshair.hvUiTable--striped tbody .hvUiTable__tr:nth-child(odd) .hvUiTable__td--crosshairRow {
  background: color-mix(in oklab, var(--hv-table-accent) 9%, var(--hv-table-row-bg));
}
.hvUiTable--crosshair.hvUiTable--striped tbody .hvUiTable__tr:nth-child(even) .hvUiTable__td--crosshairRow {
  background: color-mix(in oklab, var(--hv-table-accent) 9%, var(--hv-table-row-bg-alt));
}
.hvUiTable--crosshair.hvUiTable--striped tbody .hvUiTable__tr:nth-child(odd) .hvUiTable__td--crosshairCol {
  background: color-mix(in oklab, var(--hv-table-accent) 13%, var(--hv-table-row-bg));
}
.hvUiTable--crosshair.hvUiTable--striped tbody .hvUiTable__tr:nth-child(even) .hvUiTable__td--crosshairCol {
  background: color-mix(in oklab, var(--hv-table-accent) 13%, var(--hv-table-row-bg-alt));
}
.hvUiTable--crosshair.hvUiTable--striped tbody .hvUiTable__tr:nth-child(odd) .hvUiTable__td--crosshairFocus,
.hvUiTable--crosshair.hvUiTable--striped tbody .hvUiTable__tr:nth-child(even) .hvUiTable__td--crosshairFocus {
  background: color-mix(in oklab, var(--hv-table-accent) 22%, var(--hv-table-row-hover-bg));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hv-table-accent) 45%, transparent);
}
.hvUiTable--crosshair thead .hvUiTable__th--crosshairCol {
  background: color-mix(in oklab, var(--hv-table-accent) 16%, var(--hv-table-head-bg));
}
.hvUiTable__tr:last-child .hvUiTable__td {
  border-bottom: none;
}
.hvUiTableWrap__pagerBar {
  border: 1px solid color-mix(in oklab, var(--hv-table-accent) 18%, var(--hv-table-line));
  border-top: 1px solid var(--hv-table-line);
  border-radius: 0 0 8px 8px;
  background: color-mix(in oklab, var(--hv-table-head-bg) 88%, var(--bg, #fff));
  box-sizing: border-box;
}
.hvUiTablePagerBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 12px;
}
.hvUiTableWrap--compact .hvUiTablePagerBar {
  padding: 6px 8px;
}
.hvUiTablePagerBar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}
.hvUiTablePagerBar__meta {
  font-size: 13px;
  line-height: 1.35;
  color: color-mix(in oklab, var(--muted, #64748b) 92%, var(--fg, #0f172a));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hvUiTablePagerBar__limit.hvUiSelect {
  width: auto;
  min-width: 4.25rem;
  flex: 0 0 auto;
}
.hvUiTablePagerBar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.hvUiTable--tone-base {
  --hv-table-accent: var(--accent, #2563eb);
}
.hvUiTable--tone-accept {
  --hv-table-accent: var(--success, #16a34a);
}
.hvUiTable--tone-warning {
  --hv-table-accent: var(--warning, #d97706);
}
.hvUiTable--tone-reject {
  --hv-table-accent: var(--danger, #dc2626);
}

/* packages/hv-ui/src/components/HvTableDemo.css */
.hvUiTableDemo {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
}
.hvUiTableDemo__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hvUiTableDemo__label {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #64748b);
}
.hvUiTableDemo__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hvUiTableDemo__sortHint {
  font-size: 13px;
}

/* packages/hv-ui/src/components/HvTabs.css */
.hvUiTabs--stretch {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiTabsRoot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiTabs__panels {
  margin-top: 12px;
  padding: 0 2px;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiTabs__panel {
  min-width: 0;
  padding: 10px 0 4px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--fg, #e2e8f0);
  box-sizing: border-box;
}
.hvUiTabs__panel[hidden] {
  display: none !important;
}
.hvUiTabsWrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 0;
  margin-top: 4px;
  padding: 0 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--border, #334155) 80%, transparent);
  box-sizing: border-box;
}
.hvUiTabsWrap .hvUiTabs__nav.hvUiButton,
.hvUiTabs__nav.hvUiButton,
.hvUiTabs__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 36px;
  height: auto;
  min-height: 42px;
  margin: 0 0 -1px 0;
  padding: 0;
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease;
  flex-shrink: 0;
}
.hvUiTabs__nav.hvUiButton:hover:not(:disabled),
.hvUiTabs__nav:hover:not(:disabled) {
  color: var(--fg, #e2e8f0);
  background: color-mix(in oklab, var(--panel2, #1e293b) 40%, transparent);
}
.hvUiTabs__nav.hvUiButton:disabled,
.hvUiTabs__nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.hvUiTabs__nav.hvUiButton:focus-visible,
.hvUiTabs__nav:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
.hvUiTabs__navIcon {
  display: inline-flex;
  line-height: 0;
}
.hvUiTabs__nav--right .hvUiTabs__navIcon {
  transform: rotate(180deg);
}
.hvUiTabs__scroller {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.hvUiTabs__scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 16px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  height: auto;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted, #94a3b8);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab:hover {
  color: var(--fg, #e2e8f0);
  background: color-mix(in oklab, var(--panel2, #1e293b) 40%, transparent);
}
.hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab.is-active,
.hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab[aria-selected=true] {
  color: var(--fg, #e2e8f0);
  font-weight: 600;
  background: color-mix(in oklab, var(--panel2, #1e293b) 55%, transparent);
  border-bottom-color: var(--hv-tabs-active-indicator, var(--accent, #3b82f6));
}
.hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab:focus-visible {
  outline: 2px solid var(--hv-tabs-active-indicator, var(--accent, #3b82f6));
  outline-offset: 2px;
}
.hvUiTabs__scroller .hvUiButton.hvUiTabs__tab.hvUiButton--compact,
.hvUiTabs__scroller .hvUiButton.hvUiTabs__tab {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 16px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  height: auto;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted, #94a3b8);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.hvUiTabs__scroller .hvUiButton.hvUiTabs__tab:hover {
  color: var(--fg, #e2e8f0);
  background: color-mix(in oklab, var(--panel2, #1e293b) 40%, transparent);
}
.hvUiTabs__scroller .hvUiButton.hvUiTabs__tab.is-active,
.hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=true] {
  color: var(--fg, #e2e8f0);
  font-weight: 600;
  background: color-mix(in oklab, var(--panel2, #1e293b) 55%, transparent);
  border-bottom-color: var(--hv-tabs-active-indicator, var(--accent, #3b82f6));
}
.hvUiTabs__scroller .hvUiButton.hvUiTabs__tab:focus-visible {
  outline: 2px solid var(--hv-tabs-active-indicator, var(--accent, #3b82f6));
  outline-offset: 2px;
}
.hvUiTabs__scroller .hvUiTabs__tab .hvUiTabs__iconSlot {
  display: inline-flex;
  line-height: 0;
  color: var(--muted, #94a3b8);
  opacity: 0.95;
}
.hvUiTabs__scroller .hvUiTabs__tab.is-active .hvUiTabs__iconSlot,
.hvUiTabs__scroller .hvUiTabs__tab[aria-selected=true] .hvUiTabs__iconSlot {
  color: var(--fg, #e2e8f0);
}
@media (max-width: 980px) {
  .hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab[aria-selected=false] .hvIconTextBtn__label {
    display: none;
  }
  .hvUiTabs__scroller .hvIconTextBtn.hvUiTabs__tab[aria-selected=false] {
    padding: 10px 12px;
    gap: 0;
  }
  .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=false] .hvUiButton__in {
    display: none;
  }
  .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=false] {
    padding: 10px 12px;
    gap: 0;
  }
  .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=true] {
    justify-content: flex-start;
    gap: 6px;
  }
  .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=true] .hvUiButton__before,
  .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=true] .hvUiTabs__iconSlot {
    flex-shrink: 0;
  }
  .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=true] .hvUiButton__in {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.hvUiTabsWrap--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  border-bottom: none;
  border-right: 1px solid color-mix(in oklab, var(--border, #334155) 80%, transparent);
  margin-top: 0;
  min-height: 0;
}
.hvUiTabsWrap--vertical .hvUiTabs__nav.hvUiButton,
.hvUiTabsWrap--vertical .hvUiTabs__nav {
  width: 100%;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border-radius: 8px 0 0 8px;
}
.hvUiTabsWrap--vertical .hvUiTabs__nav--left .hvUiTabs__navIcon {
  transform: rotate(-90deg);
}
.hvUiTabsWrap--vertical .hvUiTabs__nav--right .hvUiTabs__navIcon {
  transform: rotate(90deg);
}
.hvUiTabsWrap--vertical .hvUiTabs__scroller {
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}
.hvUiTabsWrap--vertical .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  border-bottom: none;
  border-left: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -1px;
  border-radius: 0 8px 8px 0;
}
.hvUiTabsWrap--vertical .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab.is-active,
.hvUiTabsWrap--vertical .hvUiTabs__scroller .hvUiButton.hvUiTabs__tab[aria-selected=true] {
  border-bottom-color: transparent;
  border-left-color: var(--hv-tabs-active-indicator, var(--accent, #3b82f6));
}

/* packages/hv-ui/src/components/HvTabsDemo.css */
.hvTabsDemo {
  max-width: 560px;
  padding: 12px 0;
  box-sizing: border-box;
}
.hvTabsDemo__section {
  min-width: 0;
}
.hvTabsDemo__section--spaced {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in oklab, var(--border, #334155) 70%, transparent);
}
.hvTabsDemo__h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg, #e2e8f0);
}
.hvTabsDemo__lead {
  margin: 0 0 10px;
}
.hvTabsDemo__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.hvTabsDemo__panelText {
  max-width: 52ch;
}

/* packages/hv-ui/src/components/HvImageDemo.css */
.hvImageDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 960px;
}
.hvImageDemo__hint {
  margin: 0;
}
.hvImageDemo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}
.hvImageDemo__cell {
  min-width: 0;
}
.hvImageDemo__label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in oklab, var(--text, #e2e8f0) 75%, transparent);
}
.hvImageDemo .hvUiImage--cardLayout {
  max-width: 100%;
}

/* packages/hv-ui/src/components/HvInfoRow.css */
.hvUiInfoRow {
  --hv-ui-info-row-accent: var(--accent, #2563eb);
  --hv-ui-info-row-pad: 7px;
  --hv-ui-info-row-radius: 5px;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
  border-radius: var(--hv-ui-info-row-radius, 5px);
  overflow: hidden;
}
.hvUiInfoRow--mode-width {
  width: 100%;
  max-width: 100%;
}
.hvUiInfoRow--mode-wrap {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: top;
}
.hvUiInfoRow--bordered {
  border: 1px solid color-mix(in oklab, var(--hv-ui-info-row-accent) 58%, transparent);
}
.hvModal .hvUiInfoRow {
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.hvModal .hvUiInfoRow:hover {
  background: color-mix(in oklab, var(--hv-ui-info-row-accent) 14%, var(--panel2, #1e293b));
  border-color: color-mix(in oklab, var(--hv-ui-info-row-accent) 72%, transparent);
}
.hvModal .hvUiInfoRow:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--hv-ui-info-row-accent) 65%, transparent);
  outline-offset: 2px;
}
.hvUiInfoRow__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--hv-ui-info-row-pad) * 0.5) var(--hv-ui-info-row-pad);
  min-width: 0;
}
.hvUiInfoRow__figure {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in oklab, var(--text, #111) 6%, transparent);
}
.hvUiInfoRow__figure--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}
.hvUiInfoRow__figure--icon.hvUiInfoRow__figure--noBackground {
  background: transparent;
}
.hvUiInfoRow__iconSlot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--text, #111);
}
.hvUiInfoRow__iconSlot .adminToolbarIcon,
.hvUiInfoRow__iconSlot svg {
  width: 22px;
  height: 22px;
}
.hvUiInfoRow__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hvUiInfoRow__img--fit-cover {
  object-fit: cover;
}
.hvUiInfoRow__img--fit-fill {
  object-fit: fill;
}
.hvUiInfoRow__img--fit-none {
  object-fit: none;
}
.hvUiInfoRow__img--fit-scale-down {
  object-fit: scale-down;
}
.hvUiInfoRow__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 3px;
}
.hvUiInfoRow__caption {
  font-size: 0.82em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--text, #111) 72%, transparent);
}
.hvUiInfoRow__text {
  font-size: 1em;
  line-height: 1;
  text-align: justify;
}
.hvUiInfoRow__text--hasClamp {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.hvUiInfoRow__textClamp {
  font-size: 1em;
  line-height: 1.4;
  text-align: justify;
  min-width: 0;
  word-break: break-word;
}
.hvUiInfoRow__textClamp--collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hv-ui-info-row-clamp-lines, 3);
  overflow: hidden;
}
.hvUiInfoRow__expandCtl {
  align-self: flex-start;
  margin-top: 4px;
}
.hvUiInfoRow__subtitle {
  font-size: 0.88em;
  line-height: 1.35;
  text-align: left;
  color: var(--muted, color-mix(in oklab, var(--text, #111) 55%, transparent));
}
.hvUiInfoRow__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.hvUiInfoRow__badge {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  max-width: min(44%, 14rem);
  padding: clamp(2px, 0.6vw, 2px) clamp(4px, 1.2vw, 5px);
  font-family: var(--font-family-sans, inherit);
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  font-weight: 650;
  line-height: 1.2;
  border-radius: 7px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in oklab, var(--text, #111) 85%, transparent);
  border-color: color-mix(in oklab, var(--line, #64748b) 45%, transparent);
  background: color-mix(in oklab, var(--panel2, #1e293b) 72%, transparent);
}
.hvUiInfoRow__badge--tone-base {
  color: var(--text, #e2e8f0);
  border-color: color-mix(in oklab, var(--line, #64748b) 55%, transparent);
  background: color-mix(in oklab, var(--panel2, #1e293b) 88%, transparent);
}
.hvUiInfoRow__badge--tone-accept {
  color: color-mix(in oklab, var(--good, #22c55e) 92%, var(--text, #fff));
  border-color: color-mix(in oklab, var(--good, #22c55e) 42%, transparent);
  background: color-mix(in oklab, var(--good, #22c55e) 14%, var(--panel2, #1e293b));
}
.hvUiInfoRow__badge--tone-warning {
  color: color-mix(in oklab, var(--warn, #ca8a04) 90%, var(--text, #fff));
  border-color: color-mix(in oklab, var(--warn, #ca8a04) 45%, transparent);
  background: color-mix(in oklab, var(--warn, #ca8a04) 14%, var(--panel2, #1e293b));
}
.hvUiInfoRow__badge--tone-reject {
  color: color-mix(in oklab, var(--bad, #f87171) 95%, var(--text, #fff));
  border-color: color-mix(in oklab, var(--bad, #dc2626) 45%, transparent);
  background: color-mix(in oklab, var(--bad, #dc2626) 14%, var(--panel2, #1e293b));
}
.hvUiInfoRow__badge--tone-link {
  color: var(--accent, #60a5fa);
  border-color: color-mix(in oklab, var(--accent, #2563eb) 45%, transparent);
  background: color-mix(in oklab, var(--accent, #2563eb) 12%, var(--panel2, #1e293b));
}
.hvUiInfoRow--tone-base {
  --hv-ui-info-row-accent: var(--accent, #2563eb);
}
.hvUiInfoRow--tone-link {
  --hv-ui-info-row-accent: var(--accent, #2563eb);
}
.hvUiInfoRow--tone-accept {
  --hv-ui-info-row-accent: var(--good, #22c55e);
}
.hvUiInfoRow--tone-warning {
  --hv-ui-info-row-accent: var(--warn, #ca8a04);
}
.hvUiInfoRow--tone-reject {
  --hv-ui-info-row-accent: var(--bad, #dc2626);
}
.hvUiInfoRow--compact {
  --hv-ui-info-row-pad: 3px;
}
.hvUiInfoRow--compact .hvUiInfoRow__inner {
  gap: 8px;
}
.hvUiInfoRow--compact .hvUiInfoRow__figure {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.hvUiInfoRow--compact .hvUiInfoRow__figure--icon {
  padding: 4px;
}
.hvUiInfoRow--compact .hvUiInfoRow__iconSlot .adminToolbarIcon,
.hvUiInfoRow--compact .hvUiInfoRow__iconSlot svg {
  width: 18px;
  height: 18px;
}
.hvUiInfoRow--compact .hvUiInfoRow__main {
  gap: 2px;
}
.hvUiInfoRow--compact .hvUiInfoRow__caption {
  font-size: 0.78em;
}
.hvUiInfoRow--compact .hvUiInfoRow__text,
.hvUiInfoRow--compact .hvUiInfoRow__textClamp {
  font-size: 0.9375rem;
  line-height: 1.35;
}
.hvUiInfoRow--compact .hvUiInfoRow__subtitle {
  font-size: 0.8125rem;
  line-height: 1.3;
}

/* packages/hv-ui/src/components/HvInfoRowDemo.css */
.hvInfoRowDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.hvInfoRowDemo__label {
  margin: 0 0 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}
.hvInfoRowDemo__cell {
  min-width: 0;
}

/* packages/hv-ui/src/components/HvMessage.css */
.hvMgmtMsg {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 5px 12px;
  border-radius: 0;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
  color: var(--text, #0f172a);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.38s ease, opacity 0.38s ease;
  will-change: clip-path, opacity;
}
.hvMgmtMsg.hvMgmtMsg--noBorder {
  border: none;
}
.hvMgmtMsg.hvMgmtMsg--leave {
  clip-path: inset(50% 0 50% 0);
  opacity: 0;
  pointer-events: none;
}
.hvMgmtMsg.hvMgmtMsg--compact {
  gap: 6px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.35;
}
.hvMgmtMsg.hvMgmtMsg--compact .hvMgmtMsg__svg,
.hvMgmtMsg.hvMgmtMsg--compact .hvMgmtMsg__spinnerSvg {
  width: 14px;
  height: 14px;
}
.hvMgmtMsg.hvMgmtMsg--compact .hvMgmtMsg__dismiss {
  width: 22px;
  height: 22px;
  margin: 0 -4px 0 0;
  font-size: 14px;
  border-radius: 0;
}
.hvMgmtMsg.hvMgmtMsg--compact .hvMgmtMsg__loadingIndicator {
  width: 22px;
  height: 22px;
  margin: 0 -4px 0 0;
}
.hvMgmtMsg__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--muted, #64748b);
}
.hvMgmtMsg__svg {
  display: block;
}
.hvMgmtMsg__text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.hvMgmtMsg__dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 -6px 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.72;
  font-family: inherit;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.hvMgmtMsg__dismiss:hover {
  opacity: 1;
  background: color-mix(in oklab, currentColor 10%, transparent);
}
.hvMgmtMsg__dismiss:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.hvMgmtMsg--info {
  background: color-mix(in oklab, var(--accent, #3b82f6) 16%, var(--panel2, #f8fafc));
  border-color: color-mix(in oklab, var(--accent, #3b82f6) 32%, var(--line, #e2e8f0));
}
.hvMgmtMsg--info .hvMgmtMsg__icon {
  color: var(--accent, #2563eb);
}
.hvMgmtMsg--success {
  background: color-mix(in oklab, var(--good, #22c55e) 14%, var(--panel2, #f8fafc));
  border-color: color-mix(in oklab, var(--good, #22c55e) 36%, var(--line, #e2e8f0));
}
.hvMgmtMsg--success .hvMgmtMsg__icon {
  color: var(--good, #16a34a);
}
.hvMgmtMsg--error {
  background: color-mix(in oklab, var(--bad, #ef4444) 14%, var(--panel2, #f8fafc));
  border-color: color-mix(in oklab, var(--bad, #ef4444) 38%, var(--line, #e2e8f0));
}
.hvMgmtMsg--error .hvMgmtMsg__icon {
  color: var(--bad, #dc2626);
}
.hvMgmtMsg--warning {
  background: color-mix(in oklab, var(--warn, #eab308) 20%, var(--panel2, #f8fafc));
  border-color: color-mix(in oklab, var(--warn, #ca8a04) 40%, var(--line, #e2e8f0));
}
.hvMgmtMsg--warning .hvMgmtMsg__icon {
  color: var(--warn, #a16207);
}
.hvMgmtMsg--loading {
  background: color-mix(in oklab, var(--accent, #3b82f6) 14%, var(--panel2, #f8fafc));
  border-color: color-mix(in oklab, var(--accent, #3b82f6) 28%, var(--line, #e2e8f0));
}
.hvMgmtMsg--loading .hvMgmtMsg__icon {
  color: var(--accent, #2563eb);
}
.hvMgmtMsg__loadingIndicator {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 -6px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #2563eb);
  pointer-events: none;
}
.hvMgmtMsg__spinnerSpin {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  animation: hvMgmtMsgSpinnerRotate 0.75s linear infinite;
}
.hvMgmtMsg__spinnerSvg {
  display: block;
}
@keyframes hvMgmtMsgSpinnerRotate {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hvMgmtMsg__spinnerSpin {
    animation: none;
  }
  .hvMgmtMsg {
    transition: none;
    will-change: auto;
  }
}

/* packages/hv-ui/src/components/HvToggle.css */
.hvUiToggle {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  border: 1px solid var(--line, #334155);
  background: color-mix(in oklab, var(--panel2, #0f172a) 100%, transparent);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family-sans, inherit);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hvUiToggle--mode-full {
  gap: 8px;
  padding: 6px 12px;
  min-height: var(--hv-control-height, 30px);
  height: var(--hv-control-height, 30px);
  border-radius: 5px;
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--line-height-caption, 1.25);
}
.hvUiToggle--mode-compact {
  gap: var(--hv-control-compact-gap, 6px);
  padding: var(--hv-control-compact-py, 4px) var(--hv-control-compact-px, 8px);
  min-height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  border-radius: var(--hv-control-compact-radius, 5px);
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
}
.hvUiToggle--noLabel.hvUiToggle--mode-full {
  gap: 0;
  padding: 6px 8px;
}
.hvUiToggle--noLabel.hvUiToggle--mode-compact {
  gap: 0;
  padding: var(--hv-control-compact-py, 4px) 6px;
}
.hvUiToggle--stretched.hvUiToggle--noLabel .hvUiToggle__track {
  margin-left: auto;
}
.hvUiToggle:hover {
  border-color: color-mix(in oklab, var(--accent, #60a5fa) 40%, var(--line, #334155));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hvUiToggle--noBackground {
  background: transparent;
}
.hvUiToggle--noBackground:hover {
  box-shadow: none;
}
.hvUiToggle--noBorder {
  border: none;
  box-shadow: none;
}
.hvUiToggle--noBorder:hover {
  border: none;
  box-shadow: none;
}
.hvUiToggle--stretched {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.hvUiToggle--stretched .hvUiToggle__caption {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiToggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.hvUiToggle__track {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklab, var(--muted, #64748b) 55%, var(--panel2, #0f172a));
  border: 1px solid var(--line, #334155);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hvUiToggle--mode-full .hvUiToggle__track {
  width: 32px;
  height: 16px;
}
.hvUiToggle--mode-compact .hvUiToggle__track {
  width: 28px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2px;
  box-sizing: border-box;
}
.hvUiToggle__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease;
}
.hvUiToggle--mode-full .hvUiToggle__thumb {
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}
.hvUiToggle--mode-compact .hvUiToggle__thumb {
  position: relative;
  top: auto;
  left: auto;
  width: 8px;
  height: 8px;
  margin: 0;
  transform: none;
  flex-shrink: 0;
}
.hvUiToggle--mode-compact .hvUiToggle__input:checked ~ .hvUiToggle__track {
  justify-content: flex-end;
}
.hvUiToggle__input:focus-visible ~ .hvUiToggle__track {
  outline: 2px solid var(--hv-toggle-accent, var(--accent, #2563eb));
  outline-offset: 2px;
}
.hvUiToggle--accentMixed .hvUiToggle__input:checked ~ .hvUiToggle__track {
  background: color-mix(in oklab, var(--accent, #2563eb) 65%, var(--good, #16a34a));
  border-color: var(--accent, #2563eb);
}
.hvUiToggle--mode-full.hvUiToggle--accentMixed .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb {
  transform: translate(16px, -50%);
}
.hvUiToggle__caption {
  display: inline-grid;
  grid-template-columns: max-content;
  align-items: center;
  line-height: 1.2;
  flex: 0 0 auto;
  min-width: min-content;
}
.hvUiToggle__textOn {
  grid-area: 1 / 1;
  font-weight: 600;
  font-size: inherit;
  color: color-mix(in oklab, var(--good, #22c55e) 92%, var(--text, #e5e7eb));
  white-space: nowrap;
}
.hvUiToggle__textOff {
  grid-area: 1 / 1;
  font-weight: inherit;
  font-size: inherit;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
}
.hvUiToggle__input:not(:checked) + .hvUiToggle__caption .hvUiToggle__textOn {
  visibility: hidden;
}
.hvUiToggle__input:checked + .hvUiToggle__caption .hvUiToggle__textOff {
  visibility: hidden;
}
.hvUiToggle--mode-compact .hvUiToggle__textOff,
.hvUiToggle--mode-compact .hvUiToggle__textOn {
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
  font-weight: 600;
}
.hvUiToggle--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}
.hvUiToggle--tone-base {
  --hv-toggle-accent: var(--accent, #2563eb);
}
.hvUiToggle--tone-accept {
  --hv-toggle-accent: var(--success, #16a34a);
}
.hvUiToggle--tone-warning {
  --hv-toggle-accent: var(--warning, #d97706);
}
.hvUiToggle--tone-reject {
  --hv-toggle-accent: var(--danger, #dc2626);
}
.hvUiToggle--tone-base,
.hvUiToggle--tone-accept,
.hvUiToggle--tone-warning,
.hvUiToggle--tone-reject,
.hvUiToggle--hasCustomTone {
  border-color: color-mix(in oklab, var(--hv-toggle-accent) 72%, transparent);
}
.hvUiToggle--tone-base:hover,
.hvUiToggle--tone-accept:hover,
.hvUiToggle--tone-warning:hover,
.hvUiToggle--tone-reject:hover,
.hvUiToggle--hasCustomTone:hover {
  border-color: color-mix(in oklab, var(--hv-toggle-accent) 78%, var(--line, #334155));
}
.hvUiToggle--tone-base .hvUiToggle__input:checked ~ .hvUiToggle__track,
.hvUiToggle--tone-accept .hvUiToggle__input:checked ~ .hvUiToggle__track,
.hvUiToggle--tone-warning .hvUiToggle__input:checked ~ .hvUiToggle__track,
.hvUiToggle--tone-reject .hvUiToggle__input:checked ~ .hvUiToggle__track,
.hvUiToggle--hasCustomTone .hvUiToggle__input:checked ~ .hvUiToggle__track {
  background: color-mix(in oklab, var(--hv-toggle-accent) 46%, var(--panel2, #0f172a));
  border-color: color-mix(in oklab, var(--hv-toggle-accent) 58%, var(--line, #334155));
}
.hvUiToggle--mode-full.hvUiToggle--tone-base .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-full.hvUiToggle--tone-accept .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-full.hvUiToggle--tone-warning .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-full.hvUiToggle--tone-reject .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-full.hvUiToggle--hasCustomTone .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb {
  transform: translate(16px, -50%);
}
.hvUiToggle--mode-compact.hvUiToggle--tone-base .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-compact.hvUiToggle--tone-accept .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-compact.hvUiToggle--tone-warning .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-compact.hvUiToggle--tone-reject .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-compact.hvUiToggle--hasCustomTone .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb,
.hvUiToggle--mode-compact.hvUiToggle--accentMixed .hvUiToggle__input:checked ~ .hvUiToggle__track .hvUiToggle__thumb {
  transform: none;
}
.hvUiToggle--tone-base .hvUiToggle__input:checked + .hvUiToggle__caption .hvUiToggle__textOn,
.hvUiToggle--tone-accept .hvUiToggle__input:checked + .hvUiToggle__caption .hvUiToggle__textOn,
.hvUiToggle--tone-warning .hvUiToggle__input:checked + .hvUiToggle__caption .hvUiToggle__textOn,
.hvUiToggle--tone-reject .hvUiToggle__input:checked + .hvUiToggle__caption .hvUiToggle__textOn,
.hvUiToggle--hasCustomTone .hvUiToggle__input:checked + .hvUiToggle__caption .hvUiToggle__textOn {
  color: color-mix(in oklab, var(--hv-toggle-accent) 88%, var(--text, #e5e7eb));
}
.hvUiToggle--noBorder.hvUiToggle--tone-base,
.hvUiToggle--noBorder.hvUiToggle--tone-accept,
.hvUiToggle--noBorder.hvUiToggle--tone-warning,
.hvUiToggle--noBorder.hvUiToggle--tone-reject,
.hvUiToggle--noBorder.hvUiToggle--hasCustomTone {
  border: none;
}
.hvUiToggle--noBorder.hvUiToggle--tone-base:hover,
.hvUiToggle--noBorder.hvUiToggle--tone-accept:hover,
.hvUiToggle--noBorder.hvUiToggle--tone-warning:hover,
.hvUiToggle--noBorder.hvUiToggle--tone-reject:hover,
.hvUiToggle--noBorder.hvUiToggle--hasCustomTone:hover {
  border: none;
  box-shadow: none;
}

/* packages/hv-ui/src/components/HvMessageDemo.css */
.hvUiMessageDemo {
  --panel2: #f8fafc;
  --line: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #3b82f6;
  --good: #22c55e;
  --bad: #ef4444;
  --warn: #eab308;
  color: var(--text);
}
.hvUiMessageDemo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-bottom: 12px;
}
.hvUiMessageDemo__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hvUiMessageDemo__select {
  min-width: 8rem;
}
.hvUiMessageDemo__toggle {
  margin: 0;
}
.hvUiMessageDemo__panel {
  max-width: 520px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  box-sizing: border-box;
}
.hvUiMessageDemo__hint {
  margin: 0 0 10px;
}

/* packages/hv-ui/src/components/HvNavVertical.css */
.hvVerticalIconMenu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.hvVerticalIconMenu.hvVerticalIconMenu--stretch {
  width: 100%;
  align-self: stretch;
}
.hvVerticalIconMenu--compact {
  width: var(--hv-nav-vertical-rail-width, var(--hv-admin-nav-rail-width, 48px));
  min-width: var(--hv-nav-vertical-rail-width, var(--hv-admin-nav-rail-width, 48px));
  max-width: 100%;
}
.hvVerticalIconMenu:not(.hvVerticalIconMenu--compact) {
}
.hvVerticalIconMenu__headRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 28px;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
}
.hvVerticalIconMenu__headRow--withLead .hvVerticalIconMenu__compactToggle {
  flex-shrink: 0;
}
.hvVerticalIconMenu__toggleLead {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  color: var(--muted, #94a3b8);
  font-size: 12px;
}
.hvVerticalIconMenu__toggleLead a {
  color: var(--accent, #60a5fa);
}
.hvVerticalIconMenu--compact .hvVerticalIconMenu__toggleLead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hvVerticalIconMenu--compact .hvVerticalIconMenu__headRow {
  justify-content: center;
}
.hvVerticalIconMenu__headRow--withLead {
  position: relative;
}
.hvVerticalIconMenu__compactToggle {
  flex-shrink: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hvVerticalIconMenu__compactToggle:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent, #60a5fa) 65%, transparent);
  outline-offset: 2px;
}
.hvVerticalIconMenu__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.adminNav--after {
  margin-top: 0;
}
.adminSideNav__pluginSlot {
  min-width: 0;
  max-width: 100%;
}
.adminSideNav__pluginMount {
  min-width: 0;
  max-width: 100%;
}
.hvVerticalIconMenu--compact .hvVerticalIconMenu__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hvVerticalIconMenu--compact .adminNavAccordion__label {
  flex: 0 0 auto;
  min-width: 0;
}
.hvVerticalIconMenu--compact .adminNavLink {
  justify-content: center;
  gap: 0;
  padding: 4px 2px;
}
.hvVerticalIconMenu--compact .adminNavAccordion > summary {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 4px 12px 4px 2px;
}
.hvVerticalIconMenu--compact .adminNavAccordion__caret {
  position: absolute;
  right: 1px;
  top: 50%;
  margin-left: 0;
  border-left-width: 3px;
  border-right-width: 3px;
  border-top-width: 4px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: 50% 33%;
}
.hvVerticalIconMenu--compact .adminNavAccordion[open] > summary .adminNavAccordion__caret {
  transform: translateY(-50%) rotate(0deg);
}
.hvVerticalIconMenu--compact .adminNavIcon,
.hvVerticalIconMenu--compact .adminNavIcon svg.adminToolbarIcon {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex-shrink: 0;
  box-sizing: border-box;
}
.hvVerticalIconMenu--compact .adminNavSubIcon svg.adminToolbarIcon {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  max-height: 16px;
}
.hvVerticalIconMenu--compact .adminNavSubWrap.adminNavSubWrap--floating {
  width: max-content;
  min-width: 200px;
  max-height: min(70vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  border: 1px solid var(--ac-line, rgba(148,163,184,0.35));
  background: color-mix(in oklab, var(--panel, #0f172a) 96%, #000);
  z-index: 200;
}
.hvVerticalIconMenu--compact .adminNavSubLink {
  white-space: nowrap;
}
.adminNav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adminNavLink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 5px;
  border-radius: 0;
  color: var(--text, #e5e7eb);
  text-decoration: none;
  border: none;
  background: transparent;
  box-sizing: border-box;
}
.adminNavLink:hover {
  background: color-mix(in oklab, var(--accent, #60a5fa) 10%, transparent);
}
.adminNavLink.is-active {
  background: color-mix(in oklab, var(--accent, #60a5fa) 16%, transparent);
}
.adminNavLink--noHref {
  opacity: .65;
  cursor: default;
}
.adminNavIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--muted, #94a3b8);
}
.adminNavLink.is-active .adminNavIcon {
  color: var(--text, #e5e7eb);
}
.adminNavAccordion {
  border-radius: 0;
  border: none;
}
.adminNavAccordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 5px;
  border-radius: 0;
  color: var(--text, #e5e7eb);
  box-sizing: border-box;
}
.adminNavAccordion > summary::marker,
.adminNavAccordion > summary::-webkit-details-marker {
  display: none;
  content: "";
}
.adminNavAccordion__label {
  flex: 1 1 auto;
  min-width: 0;
}
.adminNavAccordion__caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  transform: rotate(-90deg);
  transform-origin: 50% 33%;
  transition: transform 0.18s ease, opacity 0.15s ease;
}
.adminNavAccordion[open] > summary .adminNavAccordion__caret {
  transform: rotate(0deg);
  opacity: 0.88;
}
.adminNavAccordion:hover > summary .adminNavAccordion__caret,
.adminNavAccordion.is-active > summary .adminNavAccordion__caret {
  opacity: 0.95;
}
.adminNavAccordion:hover > summary {
  background: color-mix(in oklab, var(--accent, #60a5fa) 10%, transparent);
}
.adminNavAccordion.is-active > summary {
  background: color-mix(in oklab, var(--accent, #60a5fa) 14%, transparent);
}
.adminNavSubWrap {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.adminNavSubClip {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.adminNavSub {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}
.hvVerticalIconMenu:not(.hvVerticalIconMenu--compact) .adminNavSub {
  margin-left: 10px;
}
.adminNavSubLink {
  display: block;
  width: 100%;
  padding: 2px 5px 5px 15px;
  border-radius: 0;
  color: var(--muted, #94a3b8);
  text-decoration: none;
  box-sizing: border-box;
  background: color-mix(in oklab, black 22%, color-mix(in oklab, #143155 12%, var(--panel, #0f172a)));
}
.adminNavSubLink--withIcon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
}
.adminNavSubIcon {
  flex-shrink: 0;
  display: inline-flex;
  opacity: 0.92;
}
.adminNavSubIcon .adminToolbarIcon,
.adminNavSubIcon svg {
  width: 16px;
  height: 16px;
}
.adminNavSubLabel {
  min-width: 0;
}
.adminNavSubLink:hover {
  background: color-mix(in oklab, black 14%, color-mix(in oklab, #143155 18%, var(--panel, #0f172a)));
  color: var(--text, #e5e7eb);
}
.adminNavSubLink.is-active {
  background: color-mix(in oklab, black 10%, color-mix(in oklab, #143155 24%, var(--panel, #0f172a)));
  color: var(--text, #e5e7eb);
}
.adminNav--footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--ac-line);
}

/* packages/hv-ui/src/components/HvNavVerticalDemo.css */
.hvUiNavVerticalDemoShell {
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #60a5fa;
  --ac-line: rgba(148, 163, 184, 0.35);
  --panel2: #1e293b;
  --line: rgba(148, 163, 184, 0.35);
  --border: rgba(148, 163, 184, 0.25);
  background: var(--panel);
  color: var(--text);
  width: fit-content;
  max-width: 100%;
  min-height: 440px;
  max-height: 520px;
  border: 1px solid var(--ac-line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.hvUiNavVerticalDemoShell .hvVerticalIconMenu {
  flex: 1 1 auto;
  min-height: 0;
}
.hvUiNavVerticalDemoHint {
  margin: 0 0 8px;
}
.hvUiNavVerticalDemoPathBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* packages/hv-ui/src/components/HvPanelDemo.css */
.hvUiPanelDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}
.hvUiPanelDemo__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.hvUiPanelDemo__label {
  margin: 0 0 6px;
  font-size: var(--font-size-caption, 12px);
  color: color-mix(in oklab, var(--text, #e2e8f0) 75%, transparent);
}

/* packages/hv-ui/src/components/HvPanelBlockDemo.css */
.hvUiPanelBlockDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}
.hvUiPanelBlockDemo__label {
  margin: 0 0 6px;
  font-size: var(--font-size-caption, 12px);
  color: color-mix(in oklab, var(--text, #e2e8f0) 75%, transparent);
}

/* packages/hv-ui/src/components/HvPanelMedia.css */
.hvUiPanelMedia.hvCard.hvCard--mediaHead {
  position: relative;
  background: var(--card-bg, var(--panel, #fff));
  border: 1px solid var(--line, #ddd);
  border-radius: var(--hv-panel-media-radius, 5px);
  overflow: hidden;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead::before,
.hvUiPanelMedia.hvCard.hvCard--mediaHead::after,
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .cardInner::before,
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .cardInner::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--accent, #60a5fa);
  opacity: 0.35;
  pointer-events: none;
  z-index: 10;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead::before {
  top: 6px;
  left: 6px;
  border-right: 0;
  border-bottom: 0;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead::after {
  top: 6px;
  right: 6px;
  border-left: 0;
  border-bottom: 0;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .cardInner::before {
  bottom: 6px;
  left: 6px;
  border-right: 0;
  border-top: 0;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .cardInner::after {
  bottom: 6px;
  right: 6px;
  border-left: 0;
  border-top: 0;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noBorder {
  border: none;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noBorder::before,
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noBorder::after,
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noBorder > .cardInner::before,
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noBorder > .cardInner::after {
  display: none;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noPadding > .hvCard__body {
  padding: 0;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead.hvUiPanelMedia--noBackground {
  background: transparent;
}
.hvCard--mediaHead {
  max-width: 100%;
}
.hvCard--mediaHeadNoActions .hvCard__head {
  grid-template-columns: auto 1fr;
}
.hvCard--mediaHead.hvCard--mediaHeadNoMedia .hvCard__head {
  grid-template-columns: 1fr auto;
  padding-left: 10px;
}
.hvCard--mediaHead.hvCard--mediaHeadNoMedia.hvCard--mediaHeadNoActions .hvCard__head {
  grid-template-columns: 1fr;
}
.hvCard--mediaHead .hvCard__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 4px;
  align-items: center;
  padding: 6px 10px 6px 5px;
  border-bottom: 1px solid var(--line, #ddd);
}
.hvCard__media {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
  border: none;
  padding: 0 5px;
}
.hvCard__mediaIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #2563eb);
  width: 100%;
  height: 100%;
}
.hvCard__media .hvCard__mediaIcon .adminToolbarIcon,
.hvCard__media .hvCard__mediaIcon svg {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}
.hvCard__headMain {
  min-width: 0;
}
.hvCard__title {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.hvCard__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #64748b);
}
.hvUiPanelMedia__msgTop,
.hvUiPanelMedia__msgBottom {
  box-sizing: border-box;
  padding: 0;
}
.hvCard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.hvCardActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--panel2, #f1f5f9);
  color: var(--link, var(--accent, #2563eb));
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  touch-action: manipulation;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
button.hvCardActionBtn {
  -webkit-appearance: none;
  appearance: none;
}
.hvCardActionBtn:hover {
  border-color: var(--accent, #2563eb);
  background: color-mix(in oklab, var(--accent, #2563eb) 14%, var(--panel2, #f1f5f9));
}
.hvCardActionBtn:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.hvCardActionBtn--primary {
  border-color: var(--accent, #2563eb);
  background: color-mix(in oklab, var(--accent, #2563eb) 18%, var(--panel2, #f1f5f9));
  color: var(--text, #111);
}
.hvCardActionBtn--primary:hover {
  background: color-mix(in oklab, var(--accent, #2563eb) 26%, var(--panel2, #f1f5f9));
}
.hvCardActionBtn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #2563eb);
}
.hvCardActionBtn__icon .adminToolbarIcon,
.hvCardActionBtn__icon svg {
  width: 18px;
  height: 18px;
}
.hvCardActionBtn--primary .hvCardActionBtn__icon {
  color: var(--accent, #2563eb);
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .hvCard__body {
  padding: 5px 7px;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .hvUiPanelMedia__footer {
  margin: 0;
  padding: 5px 7px;
  border-top: 1px solid var(--line, #ddd);
  box-sizing: border-box;
}
.hvUiPanelMedia.hvCard.hvCard--mediaHead > .hvCard__body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .hvCard--mediaHead .hvCard__head {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 8px 8px 8px;
  }
  .hvCard__media {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    padding: 0 5px;
  }
  .hvCard__media .hvCard__mediaIcon .adminToolbarIcon,
  .hvCard__media .hvCard__mediaIcon svg {
    width: 70px;
    height: 70px;
  }
  .hvCard__actions {
    justify-content: center;
  }
}

/* packages/hv-ui/src/components/HvPanelMediaDemo.css */
.hvUiPanelMediaDemo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
}
.hvUiPanelMediaDemo__label {
  margin: 0 0 6px;
  font-size: var(--font-size-caption, 12px);
  color: color-mix(in oklab, var(--text, #e2e8f0) 75%, transparent);
}

/* packages/hv-ui/src/reorder/HvReorderGrid.css */
.hvUiReorderGrid {
  --hv-reorder-edge-slot: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiReorderGrid__stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.hvUiReorderGrid__newRowGap {
  position: relative;
  flex: 0 0 auto;
  height: 12px;
  margin: 1px 0;
  box-sizing: border-box;
  background: transparent;
  z-index: 1;
}
.hvUiReorderGrid__newRowGap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--line, #334155) 42%, transparent);
  pointer-events: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.hvUiReorderGrid__newRowGap--solo {
  height: auto;
  min-height: 40px;
  margin: 6px 0;
  padding: 0;
}
.hvUiReorderGrid__newRowGap--solo::before {
  top: 50%;
}
.hvUiReorderGrid__newRowGap[data-drop-active=true]::before {
  background: var(--accent, #38bdf8);
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent, #38bdf8) 45%, transparent);
}
.hvUiReorderGrid[data-active-drag=true] .hvUiReorderGrid__newRowGap {
  z-index: 2;
}
.hvUiReorderGrid__rowWrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  border-radius: 10px;
  padding: 0;
  transition: box-shadow 120ms ease, background 120ms ease;
}
.hvUiReorderGrid__rowWrap--dropHover {
  background: color-mix(in oklab, var(--accent, #38bdf8) 8%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #38bdf8) 45%, transparent);
}
.hvUiReorderGrid__rowControls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.hvUiReorderGrid__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 1px;
  border-radius: 8px;
  border: 1px dashed color-mix(in oklab, var(--line, #334155) 70%, transparent);
  background: color-mix(in oklab, var(--panel, #0f172a) 92%, transparent);
  box-sizing: border-box;
}
.hvUiReorderGrid__cell {
  position: relative;
  flex: 0 1 auto;
  min-width: 48px;
  min-height: 36px;
  border-radius: 5px;
  border: 1px solid var(--line, #334155);
  background: var(--panel2, #1e293b);
  box-sizing: border-box;
}
.hvUiReorderGrid__cell[data-insert-before=true]::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent, #38bdf8);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent, #38bdf8) 55%, transparent);
  pointer-events: none;
  z-index: 1;
}
.hvUiReorderGrid--oneColumn .hvUiReorderGrid__cell[data-insert-before=true]::before {
  display: none;
}
.hvUiReorderGrid--oneColumn .hvUiReorderGrid__cell {
  min-width: 0;
}
.hvUiReorderGrid__rowTail {
  flex: 0 0 var(--hv-reorder-edge-slot);
  align-self: stretch;
  min-width: var(--hv-reorder-edge-slot);
  max-width: var(--hv-reorder-edge-slot);
  width: var(--hv-reorder-edge-slot);
  min-height: 36px;
  border-radius: 5px;
  box-sizing: border-box;
}
.hvUiReorderGrid__rowTail[data-drop-active=true] {
  background: color-mix(in oklab, var(--accent, #38bdf8) 22%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent, #38bdf8);
}
.hvUiReorderGrid__cellInner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 6px 8px;
  min-height: 100%;
  box-sizing: border-box;
}
.hvUiReorderGrid__cell[data-dragging=true] {
  opacity: 0.65;
}
.hvUiReorderGrid__dragHandle {
  flex: 0 0 var(--hv-reorder-edge-slot);
  min-width: var(--hv-reorder-edge-slot);
  max-width: var(--hv-reorder-edge-slot);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
  padding: 2px 0;
  margin: -2px 0 0 -2px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted, #94a3b8);
  user-select: none;
}
.hvUiReorderGrid__cell[data-one-column=true] .hvUiReorderGrid__cellInner {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiReorderGrid__cell[data-one-column=true] .hvUiReorderGrid__cellInner > * {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiReorderGrid__dragHandle:active {
  cursor: grabbing;
}
.hvUiReorderGrid__overlay {
  cursor: grabbing;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--accent, #38bdf8);
  background: var(--panel2, #1e293b);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: min(90vw, 320px);
}

/* packages/hv-ui/src/components/HvReorderGridDemo.css */
.hvUiReorderGridDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.hvUiReorderGridDemo__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}
.hvUiReorderGridDemo__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  background: color-mix(in oklab, var(--link, #38bdf8) 18%, transparent);
  color: var(--text, #e5e7eb);
}
.hvUiReorderGridDemo__json {
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--line, #334155);
  background: var(--panel2, #1e293b);
  color: var(--text, #e5e7eb);
  overflow: auto;
  max-height: 220px;
}

/* packages/hv-ui/src/reorder/HvReorderTree.css */
.hvUiReorderTree {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiReorderTree__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hvUiReorderTree__item {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.hvUiReorderTree__line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiReorderTree__before,
.hvUiReorderTree__after {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}
.hvUiReorderTree__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed color-mix(in oklab, var(--line, #334155) 65%, transparent);
  background: color-mix(in oklab, var(--panel, #0f172a) 92%, transparent);
  box-sizing: border-box;
}
.hvUiReorderTree__line[data-dragging=true] {
  opacity: 0.65;
}
.hvUiReorderTree__dragHandle {
  flex-shrink: 0;
  touch-action: none;
  cursor: grab;
  padding: 4px 2px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted, #94a3b8);
  user-select: none;
}
.hvUiReorderTree__dragHandle:active {
  cursor: grabbing;
}
.hvUiReorderTree__body {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiReorderTree__nested {
  padding: 0 0 0 16px;
  border-left: 1px dashed color-mix(in oklab, var(--accent, #2563eb) 75%, transparent);
}
.hvUiReorderTree__emptyChildSlot {
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}
.hvUiReorderTree__emptyChildSlot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--line, #334155) 35%, transparent);
  pointer-events: none;
}
.hvUiReorderTree__emptyChildSlot[data-drop-active=true]::before {
  background: var(--accent, #38bdf8);
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent, #38bdf8) 45%, transparent);
}
.hvUiReorderTree__gapBeforeFirst {
  min-height: 12px;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}
.hvUiReorderTree__gapBeforeFirst::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--line, #334155) 35%, transparent);
  pointer-events: none;
}
.hvUiReorderTree__gapBeforeFirst[data-drop-active=true]::before {
  background: var(--accent, #38bdf8);
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent, #38bdf8) 45%, transparent);
}
.hvUiReorderTree__overlay {
  cursor: grabbing;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent, #38bdf8);
  background: var(--panel2, #1e293b);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: min(90vw, 360px);
}

/* packages/hv-ui/src/components/HvReorderTreeDemo.css */
.hvUiReorderTreeDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.hvUiReorderTreeDemo__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}
.hvUiReorderTreeDemo__lead .mono {
  font-size: 12px;
}
.hvUiReorderTreeDemo__pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: var(--text, #e5e7eb);
}
.hvUiReorderTreeDemo__json {
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--line, #334155);
  background: var(--panel2, #1e293b);
  color: var(--text, #e5e7eb);
  overflow: auto;
  max-height: 280px;
}

/* packages/hv-ui/src/upload/HvUploadDropzone.css */
.hvUiUploadDropzone {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  outline: none;
}
.hvUiUploadDropzone[data-disabled=true] {
  opacity: 0.65;
  pointer-events: none;
}
.hvUiUploadDropzone:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
.hvUiUploadDropzone--dragging {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #2563eb) 55%, transparent);
}
.hvUiUploadDropzone--promo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 20px 24px;
  min-height: 160px;
  background: color-mix(in oklab, var(--panel2, #0f172a) 96%, var(--panel, #1e293b));
  border: 1px dashed color-mix(in oklab, var(--text, #e5e7eb) 28%, transparent);
}
.hvUiUploadDropzone__promoInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  text-align: center;
  padding: 8px 28px 0;
  min-width: 0;
}
.hvUiUploadDropzone__title {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text, #e5e7eb);
}
.hvUiUploadDropzone__or {
  margin: 0;
  line-height: 1.3;
}
.hvUiUploadDropzone__subtitle {
  margin: 4px 0 0;
  max-width: 36em;
  line-height: 1.45;
}
.hvUiUploadDropzone__pickBtn {
  margin-top: 2px;
}
.hvUiUploadDropzone__pickBtn--afterBody {
  margin-top: 12px;
}
.hvUiUploadDropzone__body {
  min-width: 0;
}
.hvUiUploadDropzone__topRight {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hvUiUploadDropzone__closeBtn {
  flex-shrink: 0;
}
.hvUiUploadDropzone__inputSr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* packages/hv-ui/src/components/HvUploadDropzoneDemo.css */
.hvUiUploadDropzoneDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.hvUiUploadDropzoneDemo__lead {
  margin: 0;
  max-width: 52rem;
  line-height: 1.45;
}
.hvUiUploadDropzoneDemo__row {
  min-width: 0;
}
.hvUiUploadDropzoneDemo__wide {
  width: 100%;
  max-width: 520px;
}
.hvUiUploadDropzoneDemo__muted {
  margin: 0;
  color: var(--muted, #94a3b8);
}
.hvUiUploadDropzoneDemo__imgWrap {
  display: inline-block;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.hvUiUploadDropzoneDemo__out {
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.35;
  border-radius: 6px;
  background: color-mix(in oklab, var(--panel2, #1e293b) 92%, transparent);
  overflow: auto;
  max-height: 120px;
}
.hvUiUploadDropzoneDemo__err {
  margin: 0;
  color: var(--bad, #f87171);
}

/* packages/hv-ui/src/components/HvButtonSet.css */
.hvUiButtonSet {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  gap: 0;
  border: 1px solid var(--line, #e2e8f0);
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 55%, var(--panel, #ffffff));
}
.hvUiButtonSet--horizontal {
  flex-direction: row;
}
.hvUiButtonSet--vertical {
  flex-direction: column;
}
.hvUiButtonSet--rounded {
  border-radius: 5px;
  overflow: hidden;
}
.hvUiButtonSet--notRounded {
  border-radius: 0;
}
.hvUiButtonSet__track {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
.hvUiButtonSet__track--horizontal {
  flex-direction: row;
  max-width: 100%;
  overflow-x: auto;
}
.hvUiButtonSet__track--vertical {
  flex-direction: column;
}
.hvUiButtonSet .hvUiButtonSet__btn {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}
.hvUiButtonSet--hasSlider .hvUiButtonSet__btn {
  flex: 0 1 auto;
  min-width: min-content;
}
.hvUiButtonSet--hasSlider .hvUiButtonSet__track--vertical .hvUiButtonSet__btn {
  min-height: min-content;
}
.hvUiButtonSet--hasSlider .hvUiButtonSet__btn .hvUiButton__in {
  white-space: nowrap;
}
.hvUiButtonSet__slider {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.hvUiButtonSet__slider--anim {
  transition:
    left 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hvUiButtonSet__slider--anim {
    transition: none;
  }
  .hvUiButtonSet--multiToggle .hvUiButtonSet__btn {
    transition: none !important;
  }
}
.hvUiButtonSet__slider--tone-base,
.hvUiButtonSet__slider--tone-link {
  background: color-mix(in oklab, var(--accent, #1d4ed8) 52%, var(--panel2, #f1f5f9));
}
.hvUiButtonSet__slider--tone-accept {
  background: color-mix(in oklab, var(--good, #008000) 48%, var(--panel2, #f1f5f9));
}
.hvUiButtonSet__slider--tone-warning {
  background: color-mix(in oklab, var(--warn, #ff8c00) 45%, var(--panel2, #f1f5f9));
}
.hvUiButtonSet__slider--tone-reject {
  background: color-mix(in oklab, var(--bad, #b91c1c) 48%, var(--panel2, #f1f5f9));
}
.hvUiButtonSet__slider--tone-theme {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 58%, var(--line, #e2e8f0));
}
.hvUiButtonSet--multiToggle .hvUiButtonSet__btn {
  transition:
    background 0.3s ease-in-out,
    color 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}
.hvUiButtonSet .hvUiButtonSet__btn:not(.hvUiButtonSet__btn--selected) {
  background: transparent !important;
  color: color-mix(in oklab, var(--text, #111827) 58%, transparent) !important;
}
.hvUiButtonSet .hvUiButtonSet__btn:not(.hvUiButtonSet__btn--selected) .hvUiButton__before,
.hvUiButtonSet .hvUiButtonSet__btn:not(.hvUiButtonSet__btn--selected) .hvUiButton__after {
  opacity: 0.85;
}
.hvUiButtonSet--hasSlider .hvUiButtonSet__btn--selected {
  background: transparent !important;
  color: var(--text, #111827) !important;
}
.hvUiButtonSet--hasSlider .hvUiButtonSet__btn--selected .hvUiButton__before,
.hvUiButtonSet--hasSlider .hvUiButtonSet__btn--selected .hvUiButton__after {
  color: inherit !important;
  opacity: 1;
}
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected.hvUiButton--theme {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 52%, var(--line, #e2e8f0)) !important;
  color: var(--text, #111827) !important;
}
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected.hvUiButton--tone-base,
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected.hvUiButton--tone-link {
  background: color-mix(in oklab, var(--accent, #1d4ed8) 52%, var(--panel2, #f1f5f9)) !important;
  color: var(--text, #111827) !important;
}
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected.hvUiButton--tone-accept {
  background: color-mix(in oklab, var(--good, #008000) 48%, var(--panel2, #f1f5f9)) !important;
  color: var(--text, #111827) !important;
}
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected.hvUiButton--tone-warning {
  background: color-mix(in oklab, var(--warn, #ff8c00) 45%, var(--panel2, #f1f5f9)) !important;
  color: color-mix(in oklab, var(--warn, #a16207) 55%, var(--text, #111827)) !important;
}
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected.hvUiButton--tone-reject {
  background: color-mix(in oklab, var(--bad, #b91c1c) 48%, var(--panel2, #f1f5f9)) !important;
  color: color-mix(in oklab, var(--bad, #b91c1c) 88%, var(--text, #111827)) !important;
}
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected .hvUiButton__before,
.hvUiButtonSet:not(.hvUiButtonSet--hasSlider) .hvUiButtonSet__btn--selected .hvUiButton__after {
  color: inherit !important;
  opacity: 1;
}
.hvUiButtonSet__slotImg {
  display: block;
  max-height: 1.25em;
  width: auto;
  object-fit: contain;
}
.hvUiButtonSetField {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}
.hvUiButtonSetField--mode-compact {
  gap: 2px;
}
.hvUiButtonSetField--stretched {
  display: flex;
  width: 100%;
}
.hvUiButtonSet__caption {
  font-family: var(--font-family-sans, inherit);
  font-size: 13px;
  font-weight: var(--font-weight-caption, 600);
  line-height: 1.25;
  color: var(--text, #111827);
  cursor: default;
  user-select: none;
}
.hvUiButtonSetField--mode-compact .hvUiButtonSet__caption {
  font-size: var(--font-size-tiny, 11px);
  line-height: var(--line-height-tiny, 1.25);
}
.hvUiButtonSetField--labelRow {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hvUiButtonSetField--labelRow.hvUiButtonSetField--mode-compact {
  gap: 6px;
}
.hvUiButtonSetField--labelRow .hvUiButtonSet__caption {
  flex-shrink: 0;
}
.hvUiButtonSetField--labelRow > .hvUiButtonSet {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: fit-content;
  min-width: min-content;
  max-width: none;
}
.hvUiButtonSetField--stretched:not(.hvUiButtonSetField--labelRow) > .hvUiButtonSet {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}
.hvUiButtonSetField--stretched:not(.hvUiButtonSetField--labelRow) > .hvUiButtonSet.hvUiButtonSet--horizontal .hvUiButtonSet__track--horizontal {
  overflow-x: hidden;
  overflow-y: hidden;
}
.hvUiButtonSetField--stretched:not(.hvUiButtonSetField--labelRow) > .hvUiButtonSet.hvUiButtonSet--horizontal .hvUiButtonSet__btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
.hvUiButtonSetField--stretched:not(.hvUiButtonSetField--labelRow) > .hvUiButtonSet.hvUiButtonSet--horizontal .hvUiButtonSet__btn .hvUiButton__in {
  justify-content: center;
  text-align: center;
}

/* packages/hv-ui/src/components/HvButtonSetDemo.css */
.hvUiButtonSetDemo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 520px;
}
.hvUiButtonSetDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}

/* packages/hv-ui/src/components/HvAspectRatio.css */
.hvUiAspectRatio {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.hvUiAspectRatio::before {
  content: "";
  display: block;
  padding-top: var(--hv-ui-aspect-ratio-pct, 56.25%);
}
.hvUiAspectRatio__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hvUiAspectRatio__inner > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* packages/hv-ui/src/components/HvChipDemo.css */
.hvUiChipDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hvUiChipDemo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hvUiChipDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}

/* packages/hv-ui/src/components/HvInputDemo.css */
.hvUiInputDemo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1320px;
}
.hvUiInputDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}
.hvUiInputDemo__hint:not(:first-child) {
  margin-top: 6px;
}

/* packages/hv-ui/src/components/HvTextArea.css */
.hvUiTextArea {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--line-height-caption, 1.25);
  min-width: 0;
  min-height: calc(var(--hv-control-height, 30px) * 2 + 6px);
  padding: 8px 12px;
  border: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  border-radius: 5px;
  background-color: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--panel, #ffffff));
  color: var(--text, #111827);
  cursor: text;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
  resize: vertical;
}
.hvUiTextArea::placeholder {
  color: color-mix(in oklab, var(--muted, #64748b) 82%, var(--text, #111827));
  font-weight: var(--font-weight-caption, 600);
}
.hvUiTextArea--mode-compact {
  min-height: calc(var(--hv-control-height-compact, var(--hv-control-compact-h, 30px)) * 1.75 + 4px);
  padding: 6px 8px;
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
}
.hvUiTextArea--stretched {
  display: block;
  width: 100%;
  max-width: 100%;
}
.hvUiTextArea--tone-base {
  --hv-textarea-accent: var(--accent, #2563eb);
}
.hvUiTextArea--tone-accept {
  --hv-textarea-accent: var(--success, #16a34a);
}
.hvUiTextArea--tone-warning {
  --hv-textarea-accent: var(--warning, #d97706);
}
.hvUiTextArea--tone-reject {
  --hv-textarea-accent: var(--danger, #dc2626);
}
.hvUiTextArea--tone-base,
.hvUiTextArea--tone-accept,
.hvUiTextArea--tone-warning,
.hvUiTextArea--tone-reject,
.hvUiTextArea--hasCustomTone {
  border-color: color-mix(in oklab, var(--hv-textarea-accent) 72%, transparent);
}
.hvUiTextArea:focus {
  outline: none;
}
.hvUiTextArea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-textarea-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiTextArea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hvUiTextArea:read-only:not(:disabled) {
  cursor: default;
}
.hvUiTextAreaField {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}
.hvUiTextAreaField--mode-compact {
  gap: 2px;
}
.hvUiTextAreaField--stretched {
  display: flex;
  width: 100%;
}
.hvUiTextArea__caption {
  font-family: var(--font-family-sans, inherit);
  font-size: 13px;
  font-weight: var(--font-weight-caption, 600);
  line-height: 1.25;
  color: var(--text, #111827);
  cursor: default;
  user-select: none;
}
.hvUiTextAreaField--mode-compact .hvUiTextArea__caption {
  font-size: var(--font-size-tiny, 11px);
  line-height: var(--line-height-tiny, 1.25);
}
.hvUiTextAreaField--labelRow {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}
.hvUiTextAreaField--labelRow.hvUiTextAreaField--mode-compact {
  gap: 6px;
}
.hvUiTextAreaField--labelRow .hvUiTextArea__caption {
  flex-shrink: 0;
  padding-top: 7px;
}
.hvUiTextAreaField--labelRow.hvUiTextAreaField--withHint .hvUiTextArea__caption {
  padding-top: 7px;
}
.hvUiTextAreaField--labelRow > .hvUiTextArea {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiTextAreaField--labelRow > .hvUiTextAreaField__controlStack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.hvUiTextAreaField--labelRow > .hvUiTextAreaField__controlStack > .hvUiTextArea {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}
.hvUiTextAreaField:not(.hvUiTextAreaField--labelRow) > .hvUiTextAreaField__controlStack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.hvUiTextAreaField__hint {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-tiny, 11px);
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in oklab, var(--muted, #64748b) 88%, var(--text, #111827) 12%);
}
.hvUiTextAreaField--mode-compact .hvUiTextAreaField__hint {
  font-size: 10px;
  line-height: 1.3;
}

/* packages/hv-ui/src/components/HvTextAreaDemo.css */
.hvUiTextAreaDemo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1320px;
}
.hvUiTextAreaDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}
.hvUiTextAreaDemo__hint:not(:first-child) {
  margin-top: 6px;
}

/* packages/hv-ui/src/components/HvSpinBoxDemo.css */
.hvUiSpinBoxDemo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 400px;
}
.hvUiSpinBoxDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}

/* packages/hv-ui/src/components/HvButtonSpinBoxDemo.css */
.hvUiButtonSpinBoxDemo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 420px;
}
.hvUiButtonSpinBoxDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}
.hvUiButtonSpinBoxDemo__hint.mono {
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* packages/hv-ui/src/components/HvSelectDemo.css */
.hvUiSelectDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hvUiSelectDemo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hvUiSelectDemo__stretchShell {
  width: min(100%, 260px);
  padding: 8px;
  box-sizing: border-box;
  border: 1px dashed color-mix(in oklab, var(--text, #e2e8f0) 35%, transparent);
  border-radius: 6px;
}
.hvUiSelectDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}

/* packages/hv-ui/src/components/HvCustomSelect.css */
.hvUiCustomSelect {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
  min-width: min(100%, 10rem);
}
.hvUiCustomSelect--stretched {
  display: block;
  width: 100%;
}
.hvUiCustomSelect--fitContent {
  display: inline-block;
  vertical-align: bottom;
  width: auto;
  min-width: 0;
}
.hvUiCustomSelect--fitContent .hvUiCustomSelect__trigger {
  width: auto;
  max-width: 100%;
}
.hvUiCustomSelect--fitContent .hvUiCustomSelect__triggerText {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.hvUiCustomSelect--fitContent .hvUiCustomSelect__dropdown {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(100vw - 24px, 48rem);
}
.hvUiCustomSelect--fitContent .hvUiCustomSelect__optLabel {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 1 auto;
  min-width: min-content;
}
.hvUiCustomSelect--noIcons .hvUiCustomSelect__triggerIcon,
.hvUiCustomSelect--noIcons .hvUiCustomSelect__optIcon {
  display: none !important;
}
.hvUiCustomSelect--noIcons .hvUiCustomSelect__trigger {
  gap: 6px;
}
.hvUiCustomSelect--noIcons .hvUiCustomSelect__opt {
  justify-content: flex-start;
}
.hvUiCustomSelect--disabled .hvUiCustomSelect__trigger {
  opacity: 0.55;
  cursor: not-allowed;
}
.hvUiCustomSelect__defaults {
  display: none;
}
.hvUiCustomSelect__trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font-family: var(--font-family-sans, inherit);
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  line-height: var(--line-height-caption, 1.25);
  height: var(--hv-control-height, 30px);
  padding: 0 10px 0 12px;
  border-radius: 5px;
  border: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  background-color: color-mix(in oklab, var(--panel2, #f1f5f9) 88%, var(--panel, #ffffff));
  color: var(--text, #111827);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.hvUiCustomSelect--mode-compact .hvUiCustomSelect__trigger {
  height: var(--hv-control-height-compact, var(--hv-control-compact-h, 30px));
  padding: 0 8px 0 8px;
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
  border-radius: var(--hv-control-compact-radius, 5px);
  gap: var(--hv-control-compact-gap, 6px);
}
.hvUiCustomSelect__trigger:hover {
  border-color: color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 38%, var(--border, #cbd5e1));
}
.hvUiCustomSelect.is-open .hvUiCustomSelect__trigger {
  border-color: color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiCustomSelect__trigger:focus {
  outline: none;
}
.hvUiCustomSelect__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiCustomSelect.is-open .hvUiCustomSelect__trigger:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 42%, transparent);
}
.hvUiCustomSelect__triggerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted, #94a3b8);
}
.hvUiCustomSelect--mode-compact .hvUiCustomSelect__triggerIcon {
  width: var(--hv-control-compact-icon, 16px);
  height: var(--hv-control-compact-icon, 16px);
}
.hvUiCustomSelect__triggerIcon .hvUiIcon,
.hvUiCustomSelect__triggerIcon .hvUiIcon__svg,
.hvUiCustomSelect__optIcon .hvUiIcon,
.hvUiCustomSelect__optIcon .hvUiIcon__svg {
  display: block;
}
.hvUiCustomSelect__triggerText {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hvUiCustomSelect__chev {
  flex-shrink: 0;
  opacity: 0.65;
  color: var(--muted, #94a3b8);
  transition: transform 0.15s ease;
}
.hvUiCustomSelect--mode-compact .hvUiCustomSelect__chev {
  width: 10px;
  height: 10px;
}
.hvUiCustomSelect.is-open .hvUiCustomSelect__chev {
  transform: rotate(180deg);
}
.hvUiCustomSelect__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 80;
  max-height: min(320px, 55vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  border-radius: 5px;
  border: 1px solid color-mix(in oklab, var(--line, #e2e8f0) 92%, var(--border, #cbd5e1));
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 92%, var(--panel, #ffffff));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.hvUiCustomSelect--mode-compact .hvUiCustomSelect__dropdown {
  padding: 3px;
  top: calc(100% + 2px);
}
.hvUiCustomSelect__dropdown::-webkit-scrollbar {
  width: 8px;
}
.hvUiCustomSelect__dropdown::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted, #94a3b8) 55%, transparent);
  border-radius: 6px;
}
.hvUiCustomSelect__dropdown::-webkit-scrollbar-track {
  background: color-mix(in oklab, var(--panel2, #f1f5f9) 80%, transparent);
}
.hvUiCustomSelect.is-open {
  position: relative;
  z-index: 3;
}
.hvUiCustomSelect__portal {
  position: static;
  pointer-events: none;
}
.hvUiCustomSelect__portal .hvUiCustomSelect__dropdown--portal {
  pointer-events: auto;
}
.hvUiCustomSelect__dropdown--portal {
  position: fixed !important;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0 !important;
  z-index: 120;
}
.hvUiCustomSelect__dropdown--portal.hvUiCustomSelect__dropdown--portalCompact {
  padding: 3px;
}
.hvUiCustomSelect__opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--font-size-caption, 12px);
  font-weight: var(--font-weight-caption, 600);
  text-align: left;
  cursor: pointer;
  line-height: var(--line-height-caption, 1.25);
  box-sizing: border-box;
}
.hvUiCustomSelect--mode-compact .hvUiCustomSelect__opt {
  padding: calc(var(--hv-control-compact-py, 4px) + 1px) var(--hv-control-compact-px, 8px);
  font-size: var(--hv-control-compact-fs, var(--font-size-tiny, 11px));
  line-height: var(--hv-control-compact-lh, var(--line-height-tiny, 1.25));
  gap: var(--hv-control-compact-gap, 6px);
}
.hvUiCustomSelect__opt:hover,
.hvUiCustomSelect__opt:focus-visible {
  background: color-mix(in oklab, var(--hv-select-accent, var(--accent, #2563eb)) 12%, transparent);
  outline: none;
}
.hvUiCustomSelect__optIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted, #94a3b8);
}
.hvUiCustomSelect--mode-compact .hvUiCustomSelect__optIcon {
  width: var(--hv-control-compact-icon, 16px);
  height: var(--hv-control-compact-icon, 16px);
}
.hvUiCustomSelect__optLabel {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiCustomSelect--tone-base {
  --hv-select-accent: var(--accent, #2563eb);
}
.hvUiCustomSelect--tone-accept {
  --hv-select-accent: var(--success, #16a34a);
}
.hvUiCustomSelect--tone-warning {
  --hv-select-accent: var(--warning, #d97706);
}
.hvUiCustomSelect--tone-reject {
  --hv-select-accent: var(--danger, #dc2626);
}
.hvUiCustomSelect--tone-base .hvUiCustomSelect__trigger,
.hvUiCustomSelect--tone-accept .hvUiCustomSelect__trigger,
.hvUiCustomSelect--tone-warning .hvUiCustomSelect__trigger,
.hvUiCustomSelect--tone-reject .hvUiCustomSelect__trigger,
.hvUiCustomSelect--hasCustomTone .hvUiCustomSelect__trigger {
  border-color: color-mix(in oklab, var(--hv-select-accent) 72%, transparent);
}

/* packages/hv-ui/src/components/HvCustomSelectDemo.css */
.hvUiCustomSelectDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hvUiCustomSelectDemo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hvUiCustomSelectDemo__stretchShell {
  width: min(100%, 260px);
  padding: 8px;
  box-sizing: border-box;
  border: 1px dashed color-mix(in oklab, var(--text, #e2e8f0) 35%, transparent);
  border-radius: 6px;
}
.hvUiCustomSelectDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}

/* packages/hv-ui/src/components/HvSlider.css */
.hvUiSlider.hvNewsSlider {
  --hv-accent-line: color-mix(in oklab, var(--accent, #60a5fa) 42%, var(--line, #334155));
  --hv-accent-line-strong: var(--accent, #60a5fa);
  --hvNewsSliderGap: clamp(8px, 1.4vw, 14px);
  --hvNewsSliderMediaBasis: min(52%, 420px);
  --hvNewsSliderLeadClamp: 9;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--hv-accent-line) 55%, var(--line, #243041));
  background: color-mix(in oklab, var(--panel2, #0f172a) 78%, transparent);
  box-sizing: border-box;
  transition: opacity 0.2s ease, filter 0.2s ease;
  overflow: hidden;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
  container-type: inline-size;
}
.hvUiSlider .hvNewsSlider__chrome {
  min-width: 0;
}
.hvUiSlider .hvNewsSlider__layout {
  display: grid;
  grid-template-columns: var(--hvNewsSliderMediaBasis) 1fr;
  gap: var(--hvNewsSliderGap);
  align-items: stretch;
  min-width: 0;
  min-height: 260px;
  box-sizing: border-box;
}
.hvUiSlider .hvNewsSlider__mediaCol {
  min-width: 0;
  min-height: 0;
  display: flex;
}
.hvUiSlider .hvNewsSlider__mediaViewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.hvUiSlider .hvNewsSlider__mediaItem {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.hvUiSlider .hvNewsSlider__mediaItem.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hvUiSlider .hvNewsSlider__rightCol {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-right: 12px;
}
.hvUiSlider .hvNewsSlider__panelItem {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.hvUiSlider .hvNewsSlider__panelItem.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hvUiSlider .hvNewsSlider__controls {
  margin-top: auto;
}
.hvUiSlider.hvNewsSlider.hvNewsSlider--reduceMotion .hvNewsSlider__mediaItem,
.hvUiSlider.hvNewsSlider.hvNewsSlider--reduceMotion .hvNewsSlider__panelItem {
  transition: none;
}
.hvUiSlider.hvNewsSlider--busy {
  pointer-events: none;
  opacity: 0.55;
  filter: grayscale(0.15);
}
.hvUiSlider .hvNewsSlider__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.hvUiSlider .hvNewsSlider__panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 2px 0 4px;
}
.hvUiSlider .hvNewsSlider__title {
  margin: 0;
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: none;
  hyphens: none;
}
@supports (font-size: 1cqw) {
  .hvUiSlider .hvNewsSlider__title {
    font-size: clamp(0.95rem, 2.25cqw, 1.05rem);
  }
}
.hvUiSlider .hvNewsSlider__title a {
  color: inherit;
  text-decoration: none;
}
.hvUiSlider .hvNewsSlider__title a:hover {
  color: color-mix(in oklab, var(--accent, #60a5fa) 75%, var(--text, #e5e7eb));
}
.hvUiSlider .hvNewsSlider__lead {
  margin: 0;
  font-size: clamp(0.8rem, 1.25vw, 0.9rem);
  line-height: 1.55;
  color: var(--muted, #94a3b8);
  text-align: justify;
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: none;
  hyphens: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--hvNewsSliderLeadClamp);
  line-clamp: var(--hvNewsSliderLeadClamp);
  overflow: hidden;
  text-overflow: ellipsis;
}
@supports (font-size: 1cqw) {
  .hvUiSlider .hvNewsSlider__lead {
    font-size: clamp(0.8rem, 1.85cqw, 0.9rem);
  }
}
.hvUiSlider .hvNewsSlider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 2px clamp(14px, 3.4vw, 24px) 2px;
  box-sizing: border-box;
  min-width: 0;
}
.hvUiSlider .hvNewsSlider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--panel, #0f172a) 70%, transparent);
  color: var(--text, #e5e7eb);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hvUiSlider .hvNewsSlider__arrow:hover,
.hvUiSlider .hvNewsSlider__arrow:focus-visible {
  border-color: var(--hv-accent-line-strong);
  background: color-mix(in oklab, var(--panel2, #0f172a) 88%, transparent);
}
.hvUiSlider .hvNewsSlider__arrowIcon {
  display: block;
  margin-top: -2px;
}
.hvUiSlider .hvNewsSlider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hvUiSlider .hvNewsSlider__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--hv-accent-line) 70%, transparent);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.hvUiSlider .hvNewsSlider__dot.is-active {
  background: color-mix(in oklab, var(--accent, #60a5fa) 85%, transparent);
  border-color: color-mix(in oklab, var(--accent, #60a5fa) 70%, transparent);
  transform: scale(1.15);
}
.hvUiSlider.hvNewsSlider--sharp {
  border-radius: 0;
}
.hvUiSlider .hvNewsSlider__mediaItem .hvNewsSlider__imagePreview.hvUiImage {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--hv-accent-line) 50%, transparent);
}
.hvUiSlider.hvNewsSlider--sharp .hvNewsSlider__mediaItem .hvNewsSlider__imagePreview.hvUiImage {
  border-radius: 0;
}
@media (max-width: 640px) {
  .hvUiSlider .hvNewsSlider__layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hvUiSlider .hvNewsSlider__mediaViewport {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .hvUiSlider .hvNewsSlider__rightCol {
    display: none;
  }
  .hvUiSlider .hvNewsSlider__mediaItem .hvNewsSlider__imagePreview.hvUiImage {
    height: 100%;
  }
  .hvUiSlider .hvNewsSlider__controls {
    width: 100%;
  }
}
@container (max-width: 520px) {
  .hvUiSlider .hvNewsSlider__layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hvUiSlider .hvNewsSlider__rightCol {
    display: none;
  }
  .hvUiSlider .hvNewsSlider__mediaViewport {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .hvUiSlider .hvNewsSlider__mediaItem .hvNewsSlider__imagePreview.hvUiImage {
    height: 100%;
  }
}

/* packages/hv-ui/src/components/HvSliderDemo.css */
.hvUiSliderDemo {
  color: inherit;
}
.hvUiSliderDemo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-bottom: 8px;
}
.hvUiSliderDemo__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hvUiSliderDemo__select {
  min-width: 10rem;
}
.hvUiSliderDemo__toggle {
  margin: 0;
}
.hvUiSliderDemo__hint {
  margin: 0 0 12px;
}
.hvUiSliderDemo__panel {
  max-width: 720px;
  box-sizing: border-box;
}

/* packages/hv-ui/src/components/HvDateTime.css */
.hvUiDateTime.formGrid.pubDateTimeGrid {
  display: grid;
  gap: 6px;
  justify-content: start;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
.hvUiDateTime.pubDateTimeGrid label.pubDateTimeLabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}
.hvUiDateTime.pubDateTimeGrid label.pubDateTimeLabel.pubDateTimeLabel--row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.hvUiDateTime.dateTimeMoment--compact.pubDateTimeGrid label.pubDateTimeLabel.pubDateTimeLabel--row {
  gap: 6px;
}
.hvUiDateTime .pubDateTimeLabel .label {
  font-size: 13px;
}
.hvUiDateTime .pubDateTimeLabel--noLabel {
  gap: 0;
}
.hvUiDateTime .pubDateTimeInput {
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  margin: 0;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--line, #ddd);
  background-color: var(--panel2, #f9fafb);
  color: var(--text, #111);
  font-size: 15px;
  text-align: center;
  outline: none;
  accent-color: var(--accent, #2563eb);
  font-family: inherit;
  line-height: 1.2;
}
.hvUiDateTime .pubDateTimeInput:focus,
.hvUiDateTime .pubDateTimeInput:focus-visible {
  outline: none;
  border-color: var(--accent, #2563eb);
}
.hvUiDateTime .pubDateTimeInput::-webkit-datetime-edit {
  margin: 0 auto;
}
.hvUiDateTime .pubDateTimeInput::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 2px;
}
.hvUiDateTime .pubDateTimeInput::-webkit-calendar-picker-indicator {
  margin-left: 2px;
  cursor: pointer;
  opacity: 0.85;
}
.hvUiDateTime.dateTimeMoment--compact.pubDateTimeGrid label.pubDateTimeLabel {
  gap: 2px;
}
.hvUiDateTime.dateTimeMoment--compact .pubDateTimeLabel .label {
  font-size: 11px;
  line-height: 1.25;
}
.hvUiDateTime.dateTimeMoment--compact .pubDateTimeInput {
  height: var(--hv-control-compact-h, 26px);
  min-height: var(--hv-control-compact-h, 26px);
  max-height: var(--hv-control-compact-h, 26px);
  padding: 0 var(--hv-control-compact-px, 6px);
  font-size: var(--hv-control-compact-fs, 12px);
  line-height: var(--hv-control-compact-lh, 1.2);
  border-radius: var(--hv-control-compact-radius, 4px);
  box-sizing: border-box;
}
.hvUiDateTime.dateTimeMoment--compact .pubDateTimeInput::-webkit-datetime-edit-fields-wrapper {
  padding: 0 1px;
}
.hvUiDateTime--separate.formGrid.pubDateTimeGrid {
  gap: 5px;
}
.hvUiDateTime .pubDateTimeLabel--column {
  flex-direction: column;
}
.hvUiDateTime__joined {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line, #ddd);
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--panel2, #f9fafb);
}
.hvUiDateTime__joined .pubDateTimeInput {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--line, #ddd);
  background-color: transparent;
}
.hvUiDateTime__joined .pubDateTimeInput:last-child {
  border-right: none;
}
.hvUiDateTime__joined .pubDateTimeInput:focus,
.hvUiDateTime__joined .pubDateTimeInput:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent, #2563eb);
  position: relative;
  z-index: 1;
}
.hvUiDateTime.dateTimeMoment--compact .hvUiDateTime__joined {
  border-radius: var(--hv-control-compact-radius, 4px);
}
.hvUiDateTime.dateTimeMoment--compact .hvUiDateTime__joined .pubDateTimeInput {
  border-right-color: var(--line, #ddd);
}
.hvUiDateTime__joinedLabels {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hvUiDateTime__joinedLabels--aboveGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}
.hvUiDateTime__joinedLabels--aboveGrid.hvUiDateTime__joinedLabels--single {
  grid-template-columns: max-content;
}
.hvUiDateTime__joinedLabelCell {
  display: block;
  min-width: 0;
}
.hvUiDateTime__joinedRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.hvUiDateTime.dateTimeMoment--compact .hvUiDateTime__joinedRow {
  gap: 6px;
}
.hvUiDateTime__joinedSideLabel {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
.hvUiDateTime__joinedLabelCell .label {
  font-size: 13px;
}
.hvUiDateTime.dateTimeMoment--compact .hvUiDateTime__joinedLabelCell .label {
  font-size: 11px;
  line-height: 1.25;
}
.hvUiDateTime__joinedSideLabel .label {
  font-size: 13px;
}
.hvUiDateTime.dateTimeMoment--compact .hvUiDateTime__joinedSideLabel .label {
  font-size: 11px;
  line-height: 1.25;
}
.hvUiDateTime.hvUiDateTime--tone-base {
  --accent: var(--accent, #2563eb);
}
.hvUiDateTime.hvUiDateTime--tone-accept {
  --accent: var(--success, #16a34a);
}
.hvUiDateTime.hvUiDateTime--tone-warning {
  --accent: var(--warning, #d97706);
}
.hvUiDateTime.hvUiDateTime--tone-reject {
  --accent: var(--danger, #dc2626);
}

/* packages/hv-ui/src/components/HvDateTimeDemo.css */
.hvUiDateTimeDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
}
.hvUiDateTimeDemo__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.hvUiDateTimeDemo__hint {
  margin: 0;
}

/* packages/hv-ui/src/components/HvDateTimePeriod.css */
.hvUiDateTimePeriod {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2px;
  box-sizing: border-box;
}
.hvUiDateTimePeriod--layoutRow {
  flex-direction: row;
  gap: 18px;
}
.hvUiDateTimePeriod--layoutColumn {
  flex-direction: column;
}
.hvUiDateTimePeriod__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.hvUiDateTimePeriod__row > .hvUiToggle {
  --hv-datetime-period-toggle-w: 3rem;
  flex: 0 0 var(--hv-datetime-period-toggle-w, 3rem);
  width: var(--hv-datetime-period-toggle-w, 3rem);
  min-width: var(--hv-datetime-period-toggle-w, 3rem);
  max-width: var(--hv-datetime-period-toggle-w, 3rem);
  justify-content: flex-start;
  gap: 4px;
  box-sizing: border-box;
}
.hvUiDateTimePeriod__row > .hvUiToggle .hvUiToggle__caption {
  flex: 0 0 1.25em;
  min-width: 1.25em;
  width: 1.25em;
}
.hvUiDateTimePeriod__row > .hvUiToggle .hvUiToggle__track {
  flex-shrink: 0;
  margin-left: auto;
}
.hvUiDateTimePeriod__row > .hvUiDateTime {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 3px;
}
.hvUiDateTimePeriod__row--inactive {
  opacity: 0.72;
}
.hvUiDateTimePeriod .hvUiDateTimePeriod__dateTime--inactive {
  pointer-events: none;
}

/* packages/hv-ui/src/components/HvDateTimePeriodDemo.css */
.hvUiDateTimePeriodDemo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hvUiDateTimePeriodDemo__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.hvUiDateTimePeriodDemo__hint {
  margin: 0;
  max-width: 52rem;
}
.hvUiDateTimePeriodDemo__json {
  margin: 0;
  padding: 0.5rem 0.65rem;
  max-width: 100%;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--panel2, #f9fafb);
  font-size: 11px;
  line-height: 1.35;
  box-sizing: border-box;
}

/* packages/hv-ui/src/components/HvToggleDemo.css */
.hvUiToggleDemo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hvUiToggleDemo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hvUiToggleDemo__stretchShell {
  width: min(100%, 260px);
  padding: 8px;
  box-sizing: border-box;
  border: 1px dashed color-mix(in oklab, var(--text, #e2e8f0) 35%, transparent);
  border-radius: 6px;
}
.hvUiToggleDemo__hint {
  margin: 0;
  font-size: 0.75rem;
}

/* packages/hv-ui/src/components/HvToggleRow.css */
.hvUiToggleRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid color-mix(in oklab, var(--border, #334155) 75%, transparent);
  background: color-mix(in oklab, var(--panel2, #1e293b) 40%, transparent);
  position: relative;
}
.hvUiToggleRow--stretched {
  width: 100%;
}
.hvUiToggleRow--mode-full {
  gap: 10px 16px;
  padding: 10px 14px;
}
.hvUiToggleRow--mode-compact {
  gap: 6px 12px;
  padding: 6px 10px;
}
.hvUiToggleRow--rounded {
  border-radius: 12px;
}
.hvUiToggleRow--frameNone {
  border: none;
  background: transparent;
}
.hvUiToggleRow--noBg {
  background: transparent;
}
.hvUiToggleRow--noBorder {
  border: none;
}
.hvUiToggleRow--noPadding.hvUiToggleRow--mode-full {
  padding: 0;
}
.hvUiToggleRow--noPadding.hvUiToggleRow--mode-compact {
  padding: 0;
}
.hvUiToggleRow--corners {
  border-color: transparent;
  background: transparent;
  overflow: visible;
}
.hvUiToggleRow--corners .hvUiToggleRow__corner {
  position: absolute;
  box-sizing: border-box;
  width: clamp(10px, 14px, 18%);
  height: clamp(10px, 14px, 18%);
  min-width: 10px;
  min-height: 10px;
  pointer-events: none;
  z-index: 2;
  border-color: var(--hv-toggle-row-accent, var(--accent, #2563eb));
  border-style: solid;
}
.hvUiToggleRow--corners .hvUiToggleRow__corner--tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.hvUiToggleRow--corners .hvUiToggleRow__corner--tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}
.hvUiToggleRow--corners .hvUiToggleRow__corner--bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}
.hvUiToggleRow--corners .hvUiToggleRow__corner--br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}
.hvUiToggleRow--noBorder.hvUiToggleRow--corners .hvUiToggleRow__corner {
  display: none;
}
.hvUiToggleRow__text {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
}
.hvUiToggleRow--mode-compact .hvUiToggleRow__text {
  column-gap: 8px;
  row-gap: 4px;
}
.hvUiToggleRow__beforeTitle {
  margin-bottom: 0;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
}
.hvUiToggleRow__text:has(> .hvUiToggleRow__beforeTitle) > .hvUiToggleRow__title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
  align-self: center;
  min-width: 0;
}
.hvUiToggleRow__text:not(:has(> .hvUiToggleRow__beforeTitle)) > .hvUiToggleRow__title {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 0;
}
.hvUiToggleRow__title {
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text, #e5e7eb);
}
.hvUiToggleRow--mode-full .hvUiToggleRow__title {
  font-size: 0.9375rem;
  line-height: 1.3;
}
.hvUiToggleRow--mode-compact .hvUiToggleRow__title {
  font-size: 0.8125rem;
  line-height: 1.25;
  margin-bottom: 2px;
}
.hvUiToggleRow__text:not(:has(> .hvUiToggleRow__beforeTitle)) > .hvUiToggleRow__title:last-child {
  margin-bottom: 0;
}
.hvUiToggleRow__lead {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: none;
  color: var(--muted, #94a3b8);
}
.hvUiToggleRow--mode-full .hvUiToggleRow__lead {
  font-size: 0.8125rem;
  line-height: 1.45;
}
.hvUiToggleRow--mode-compact .hvUiToggleRow__lead {
  font-size: 12px;
  line-height: 1.4;
}
.hvUiToggleRow__toggle {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
.hvUiToggleRow--hasBody {
  align-items: start;
}
.hvUiToggleRow--hasBody .hvUiToggleRow__toggle {
  align-self: center;
}
.hvUiToggleRow__body {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding-top: 2px;
}
.hvUiToggleRow--tone-base {
  --hv-toggle-row-accent: var(--accent, #2563eb);
}
.hvUiToggleRow--tone-link {
  --hv-toggle-row-accent: var(--accent, #2563eb);
}
.hvUiToggleRow--tone-accept {
  --hv-toggle-row-accent: var(--success, #16a34a);
}
.hvUiToggleRow--tone-warning {
  --hv-toggle-row-accent: var(--warning, #d97706);
}
.hvUiToggleRow--tone-reject {
  --hv-toggle-row-accent: var(--danger, #dc2626);
}
.hvUiToggleRow:not(.hvUiToggleRow--corners).hvUiToggleRow--tone-base,
.hvUiToggleRow:not(.hvUiToggleRow--corners).hvUiToggleRow--tone-link,
.hvUiToggleRow:not(.hvUiToggleRow--corners).hvUiToggleRow--tone-accept,
.hvUiToggleRow:not(.hvUiToggleRow--corners).hvUiToggleRow--tone-warning,
.hvUiToggleRow:not(.hvUiToggleRow--corners).hvUiToggleRow--tone-reject,
.hvUiToggleRow:not(.hvUiToggleRow--corners).hvUiToggleRow--hasCustomTone {
  border-color: color-mix(in oklab, var(--hv-toggle-row-accent) 58%, transparent);
}
@media (max-width: 520px) {
  .hvUiToggleRow {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .hvUiToggleRow__text {
    grid-column: 1;
    grid-row: 1;
  }
  .hvUiToggleRow__toggle {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    justify-content: flex-start;
  }
  .hvUiToggleRow__body {
    grid-column: 1;
    grid-row: 3;
  }
  .hvUiToggleRow__text:has(> .hvUiToggleRow__beforeTitle) {
    grid-template-columns: 1fr;
  }
  .hvUiToggleRow__text:has(> .hvUiToggleRow__beforeTitle) > .hvUiToggleRow__beforeTitle {
    grid-column: 1;
    grid-row: 1;
  }
  .hvUiToggleRow__text:has(> .hvUiToggleRow__beforeTitle) > .hvUiToggleRow__title {
    grid-column: 1;
    grid-row: 2;
  }
  .hvUiToggleRow__text:has(> .hvUiToggleRow__beforeTitle) > .hvUiToggleRow__lead {
    grid-row: 3;
  }
}
.hvUiToggleRow--noBorder.hvUiToggleRow--tone-base,
.hvUiToggleRow--noBorder.hvUiToggleRow--tone-link,
.hvUiToggleRow--noBorder.hvUiToggleRow--tone-accept,
.hvUiToggleRow--noBorder.hvUiToggleRow--tone-warning,
.hvUiToggleRow--noBorder.hvUiToggleRow--tone-reject,
.hvUiToggleRow--noBorder.hvUiToggleRow--hasCustomTone {
  border: none;
}

/* packages/hv-ui/src/components/HvToggleRowDemo.css */
.hvUiToggleRowDemo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}
.hvUiToggleRowDemo__hint {
  margin: 0 0 4px;
  font-size: 0.75rem;
}
.hvUiToggleRowDemo__nested {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px dashed color-mix(in oklab, var(--text, #e2e8f0) 35%, transparent);
  font-size: 0.8125rem;
}

/* packages/hv-ui/src/components/HvIconsDemo.css */
.hvUiIconsDemo {
  max-width: 640px;
}
.hvUiIconsDemo__lead {
  margin: 0 0 8px;
  font-size: 0.75rem;
}
.hvUiIconsDemo__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hvUiIconsDemo__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 7rem;
}
.hvUiIconsDemo__name {
  font-size: 0.65rem;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* packages/hv-ui/src/toast/hvToast.css */
.hvUiToastHost {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 66px;
  gap: 12px;
  pointer-events: none;
  box-sizing: border-box;
}
.hvUiToastHost__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  max-width: min(420px, calc(100vw - 132px));
  pointer-events: auto;
}
.hvUiToastHost__col--right {
  align-items: flex-end;
}
.hvUiToastHost__col--right .hvUiToastHost__item {
  align-self: stretch;
  width: 100%;
}
.hvUiToastHost__spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.hvUiToastHost__item {
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
  animation: hvUiToastHostItemIn 0.22s ease-out;
}
@keyframes hvUiToastHostItemIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hvUiToastHost__item {
    animation: none;
  }
}

/* packages/hv-ui/src/modal/hvModal.css */
.hvUiModal {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  overflow: visible;
}
.hvUiModal::backdrop {
  background: transparent;
  backdrop-filter: none;
}
.hvUiModal--muted::backdrop {
  background: rgba(15, 23, 42, 0.76);
  backdrop-filter: blur(3px);
}
.hvUiModal__shell {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.hvUiModal__dismiss {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  z-index: 0;
}
.hvUiModal__globalClose {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text, #e5e7eb);
  cursor: pointer;
  border-radius: 999px;
}
.hvUiModal__globalClose:hover {
  opacity: 0.92;
}
.hvUiModal__globalClose:focus-visible {
  outline: 2px solid var(--accent, #38bdf8);
  outline-offset: 2px;
}
.hvUiModal__panel {
  --hv-modal-panel-accent: var(--line, #334155);
  --hv-modal-panel-fit-max: min(92vw, 440px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: min(96vw, 1120px);
  max-height: calc(100vh - 32px);
  padding: 0;
  box-sizing: border-box;
  border-radius: 15px;
  background: var(--panel, #0f172a);
  border: 1px solid color-mix(in oklab, var(--hv-modal-panel-accent) 75%, transparent);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.hvUiModal__panel--tone-base {
  --hv-modal-panel-accent: var(--accent, #2563eb);
}
.hvUiModal__panel--tone-accept {
  --hv-modal-panel-accent: var(--good, #22c55e);
}
.hvUiModal__panel--tone-warning {
  --hv-modal-panel-accent: var(--warn, #ca8a04);
}
.hvUiModal__panel--tone-reject {
  --hv-modal-panel-accent: var(--bad, #dc2626);
}
.hvUiModal__panel--fit {
  width: fit-content;
  max-width: var(--hv-modal-panel-fit-max);
  min-width: 0;
}
.hvUiModal__inner {
  min-height: 0;
  overflow: auto;
  flex: 1 1 auto;
}

/* packages/hv-ui/src/modal/hvAlert.css */
.hvUiAlert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  text-align: center;
}
.hvUiAlert__text {
  margin: 0;
  max-width: min(42ch, 100%);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text, #e5e7eb);
}
.hvUiAlert__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* packages/hv-ui/src/components/HvToastDemo.css */
.hvUiToastDemo {
  --panel2: #f8fafc;
  --line: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #3b82f6;
  --good: #22c55e;
  --bad: #ef4444;
  --warn: #eab308;
  color: var(--text);
}
.hvUiToastDemo__panel {
  max-width: 520px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  box-sizing: border-box;
}
.hvUiToastDemo__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.hvUiToastDemo__hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

/* packages/hv-ui/src/components/HvModalDemo.css */
.hvUiModalDemo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52rem;
}
.hvUiModalDemo__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}
.hvUiModalDemo__hint .mono {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.92em;
}
.hvUiModalDemo__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hvUiModalDemo__sample {
  color: var(--text, #e5e7eb);
}
.hvUiModalDemo__sampleTitle {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.hvUiModalDemo__sampleText {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
}

/* packages/hv-ui/src/components/HvAlertDemo.css */
.hvUiAlertDemo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52rem;
}
.hvUiAlertDemo__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}
.hvUiAlertDemo__hint .mono {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.92em;
}
.hvUiAlertDemo__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hvUiAlertDemo__result {
  margin: 0;
  font-size: 14px;
  color: var(--text, #e5e7eb);
}
.hvUiAlertDemo__result .mono {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.95em;
}