:root {
  --jv-space-xs: 4px;
  --jv-space-sm: 8px;
  --jv-space-md: 16px;
  --jv-space-lg: 24px;
  --jv-space-xl: 32px;
  --jv-radius-xs: 4px;
  --jv-radius-sm: 6px;
  --jv-radius-md: 8px;
  --jv-radius-lg: 12px;
  --jv-elevation-1: 0 1px 3px rgba(15, 23, 42, 0.12);
  --jv-elevation-2: 0 6px 18px rgba(15, 23, 42, 0.14);
  --jv-elevation-3: 0 12px 28px rgba(15, 23, 42, 0.16);
  --jv-motion-quick: 120ms ease-out;
  --jv-motion-standard: 180ms ease-in-out;
}

.body--dark, [data-theme="dark"], .theme-dark { color-scheme: dark; }
.body--light { color-scheme: light; }
.desktop { --jv-platform-density: 1; }
.mobile, .touch { --jv-platform-density: 1.08; }
.platform-ios, .platform-android { -webkit-tap-highlight-color: transparent; }

.j-app, .j-layout, .j-page, .j-page-container { min-width: 0; }
.j-app { min-height: 100vh; background: var(--jv-color-surface); color: var(--jv-color-on-surface); }
.j-splitter { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.j-splitter--vertical { flex-direction: row; }
.j-splitter--horizontal { flex-direction: column; }
.j-splitter__before, .j-splitter__after, .j-splitter > [slot="before"], .j-splitter > [slot="after"] { min-width: 0; min-height: 0; overflow: auto; }
.j-splitter__separator { position: relative; flex: none; border: 0; background: transparent; touch-action: none; user-select: none; outline: none; }
.j-splitter__separator::after { content: ""; position: absolute; border-radius: 999px; background: var(--jv-color-outline); transition: background var(--jv-motion-quick), box-shadow var(--jv-motion-quick); }
.j-splitter__separator.gutter-horizontal { cursor: col-resize; }
.j-splitter__separator.gutter-horizontal::after { inset-block: 8px; left: 50%; width: 2px; transform: translateX(-50%); }
.j-splitter__separator.gutter-vertical { cursor: row-resize; }
.j-splitter__separator.gutter-vertical::after { inset-inline: 8px; top: 50%; height: 2px; transform: translateY(-50%); }
.j-splitter__separator:hover::after, .j-splitter__separator:focus-visible::after, .j-splitter--dragging .j-splitter__separator::after { background: var(--jv-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jv-color-primary) 16%, transparent); }
.j-splitter--disabled .j-splitter__separator { cursor: default; pointer-events: none; opacity: .48; }
.j-layout { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.j-layout--row { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; }
.j-layout--column { grid-template-columns: 1fr; }
.j-layout--full-height { min-height: 100vh; }
.j-layout > .j-header, .j-layout > .j-footer { grid-column: 1 / -1; }
.j-layout > .j-drawer--left { grid-column: 1; grid-row: 2; }
.j-layout > .j-drawer--right { grid-column: -2; grid-row: 2; }
.j-layout > .j-page-container { grid-column: 1 / -1; grid-row: 2; }
.j-layout--row > .j-drawer--left ~ .j-page-container { grid-column: 2; }
.j-page-container { width: 100%; min-height: 0; }
.j-page { width: 100%; }
.j-header, .j-footer, .j-toolbar { display: flex; align-items: center; gap: var(--jv-space-md); }
.j-toolbar { min-height: 56px; }
.j-toolbar-title { flex: 1 1 auto; margin: 0; font-size: var(--jv-type-title-medium-size); line-height: var(--jv-type-title-medium-line-height); font-weight: 600; }
.j-drawer { width: 280px; max-width: 86vw; }
.j-drawer--above, .j-drawer--overlay { position: fixed; top: 0; bottom: 0; z-index: 1200; max-width: 86vw; opacity: 0; pointer-events: none; transition: transform var(--jv-motion-standard), opacity var(--jv-motion-quick), box-shadow var(--jv-motion-standard); box-shadow: 18px 0 40px rgba(15, 23, 42, 0.2); }
.j-drawer--above.j-drawer--left, .j-drawer--overlay.j-drawer--left { left: 0; transform: translateX(-100%); }
.j-drawer--above.j-drawer--right, .j-drawer--overlay.j-drawer--right { right: 0; transform: translateX(100%); box-shadow: -18px 0 40px rgba(15, 23, 42, 0.2); }
.j-drawer--above.j-drawer--open, .j-drawer--overlay.j-drawer--open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.j-layout--drawer-above { grid-template-columns: 1fr; }
.j-layout--drawer-above > .j-drawer { grid-column: 1; grid-row: 1 / -1; }
.j-layout--drawer-above > .j-page-container, .j-layout--drawer-above > .j-header, .j-layout--drawer-above > .j-footer { grid-column: 1 / -1; }
.j-layout--drawer-push-all { grid-template-columns: auto 1fr; }
.j-layout--drawer-push-all > .j-drawer--left { grid-column: 1; grid-row: 1 / -1; }
.j-layout--drawer-push-all > .j-drawer--right { grid-column: 2; grid-row: 1 / -1; }
.j-layout--drawer-push-all > .j-header, .j-layout--drawer-push-all > .j-page-container, .j-layout--drawer-push-all > .j-footer { grid-column: 2; }
.j-layout--drawer-push-all > .j-drawer--right ~ .j-header, .j-layout--drawer-push-all > .j-drawer--right ~ .j-page-container, .j-layout--drawer-push-all > .j-drawer--right ~ .j-footer { grid-column: 1; }
.j-card { border: 1px solid transparent; border-radius: var(--jv-shape-radius); background: var(--jv-color-surface); color: var(--jv-color-on-surface); padding: var(--jv-space-md); box-shadow: var(--jv-elevation-1); }
.j-card--flat { box-shadow: none; }
.j-card--bordered { border-color: var(--jv-color-outline); }
.j-card--square { border-radius: 0; }
.j-card--dark { background: var(--jv-color-on-surface); color: var(--jv-color-surface); }
.j-bar { min-height: 32px; display: flex; align-items: center; gap: var(--jv-space-sm); padding: 0 var(--jv-space-sm); }
.j-button { min-height: 40px; border: 0; border-radius: var(--jv-shape-radius); display: inline-flex; align-items: center; justify-content: center; gap: var(--jv-space-sm); padding: 0 var(--jv-space-md); font: inherit; line-height: 1; color: var(--jv-color-primary); background: transparent; cursor: pointer; text-decoration: none; user-select: none; transition: background var(--jv-motion-standard), border-color var(--jv-motion-standard), box-shadow var(--jv-motion-quick), transform var(--jv-motion-quick); }
.j-button:hover { background: color-mix(in srgb, var(--jv-color-primary) 10%, transparent); }
.j-button:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-button:active { transform: translateY(1px); }
.j-button--filled { background: var(--jv-color-primary); color: var(--jv-color-on-primary); box-shadow: var(--jv-elevation-1); }
.j-button--filled:hover, .j-button--filled.j-button--hover, .j-button--filled.j-button--hovered { background: var(--jv-color-primary); box-shadow: var(--jv-elevation-2); }
.j-button--unelevated { background: var(--jv-color-primary); color: var(--jv-color-on-primary); box-shadow: none; }
.j-button--outlined, .j-button--outline { border: 1px solid currentColor; background: transparent; color: var(--jv-color-primary); }
.j-button--flat, .j-button--text { background: transparent; color: var(--jv-color-primary); box-shadow: none; }
.j-button--push { background: var(--jv-color-primary); color: var(--jv-color-on-primary); box-shadow: 0 3px 0 color-mix(in srgb, var(--jv-color-primary) 70%, #000); }
.j-button--unelevated:hover, .j-button--push:hover, .j-button--unelevated.j-button--hover, .j-button--push.j-button--hover, .j-button--unelevated.j-button--hovered, .j-button--push.j-button--hovered { filter: brightness(0.96); }
.j-button--outlined:hover, .j-button--outline:hover, .j-button--flat:hover, .j-button--text:hover, .j-button--outlined.j-button--hover, .j-button--outline.j-button--hover, .j-button--flat.j-button--hover, .j-button--text.j-button--hover, .j-button--outlined.j-button--hovered, .j-button--outline.j-button--hovered, .j-button--flat.j-button--hovered, .j-button--text.j-button--hovered { background: color-mix(in srgb, currentColor 10%, transparent); }
.j-button--secondary.j-button--filled, .j-button--secondary.j-button--unelevated, .j-button--secondary.j-button--push { background: var(--jv-color-secondary); color: var(--jv-color-on-secondary, #fff); }
.j-button--secondary.j-button--text, .j-button--secondary.j-button--flat, .j-button--secondary.j-button--outlined, .j-button--secondary.j-button--outline { color: var(--jv-color-secondary); }
.j-button--tertiary.j-button--filled, .j-button--tertiary.j-button--unelevated, .j-button--tertiary.j-button--push { background: var(--jv-color-tertiary); color: var(--jv-color-on-tertiary, #fff); }
.j-button--tertiary.j-button--text, .j-button--tertiary.j-button--flat, .j-button--tertiary.j-button--outlined, .j-button--tertiary.j-button--outline { color: var(--jv-color-tertiary); }
.j-button--positive.j-button--filled, .j-button--positive.j-button--unelevated, .j-button--positive.j-button--push { background: var(--jv-color-positive, #16a34a); color: var(--jv-color-on-positive, #fff); }
.j-button--positive.j-button--text, .j-button--positive.j-button--flat, .j-button--positive.j-button--outlined, .j-button--positive.j-button--outline { color: var(--jv-color-positive, #16a34a); }
.j-button--negative.j-button--filled, .j-button--negative.j-button--unelevated, .j-button--negative.j-button--push, .j-button--error.j-button--filled, .j-button--error.j-button--unelevated, .j-button--error.j-button--push { background: var(--jv-color-error, #b3261e); color: var(--jv-color-on-error, #fff); }
.j-button--negative.j-button--text, .j-button--negative.j-button--flat, .j-button--negative.j-button--outlined, .j-button--negative.j-button--outline, .j-button--error.j-button--text, .j-button--error.j-button--flat, .j-button--error.j-button--outlined, .j-button--error.j-button--outline { color: var(--jv-color-error, #b3261e); }
.j-button--dense { min-height: 32px; padding-left: var(--jv-space-sm); padding-right: var(--jv-space-sm); font-size: 0.875rem; }
.j-button--round { width: 40px; padding: 0; border-radius: 50%; aspect-ratio: 1; }
.j-button--dense.j-button--round { width: 32px; }
.j-button--rounded { border-radius: 999px; }
.j-button--square { border-radius: 0; }
.j-button--block { display: flex; width: 100%; }
.j-button--stack { flex-direction: column; min-height: 56px; gap: 2px; }
.j-button--no-caps { text-transform: none; }
.j-button--loading, .j-button--disabled, .j-button:disabled, .j-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.56; pointer-events: none; }
.j-button--size-xs { min-height: 24px; padding-left: var(--jv-space-xs); padding-right: var(--jv-space-xs); font-size: 0.75rem; }
.j-button--size-sm { min-height: 32px; padding-left: var(--jv-space-sm); padding-right: var(--jv-space-sm); font-size: 0.875rem; }
.j-button--size-lg { min-height: 48px; padding-left: var(--jv-space-lg); padding-right: var(--jv-space-lg); font-size: 1rem; }
.j-button--size-xl { min-height: 56px; padding-left: var(--jv-space-xl); padding-right: var(--jv-space-xl); font-size: 1.125rem; }
.j-button--padding-xs { padding-left: var(--jv-space-xs); padding-right: var(--jv-space-xs); }
.j-button--padding-sm { padding-left: var(--jv-space-sm); padding-right: var(--jv-space-sm); }
.j-button--padding-lg { padding-left: var(--jv-space-lg); padding-right: var(--jv-space-lg); }
.j-button--padding-xl { padding-left: var(--jv-space-xl); padding-right: var(--jv-space-xl); }
.j-button__icon { display: inline-flex; align-items: center; justify-content: center; }
.j-button__spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: jv-spin 700ms linear infinite; }
.j-button--text-primary { color: var(--jv-color-primary); }
.j-button--text-secondary { color: var(--jv-color-secondary); }
.j-button--text-tertiary { color: var(--jv-color-tertiary); }
.j-button--text-error, .j-button--text-negative { color: var(--jv-color-error, #b3261e); }
.j-button--text-white { color: #fff; }
.j-button--text-black { color: #000; }
@keyframes jv-spin { to { transform: rotate(360deg); } }
.j-button-group { display: inline-flex; align-items: center; border-radius: var(--jv-shape-radius); overflow: hidden; }
.j-button-group .j-button { border-radius: 0; }
/* JVM-rendered checkboxes must not depend on custom-element style injection. */
label.j-checkbox { display: inline-flex; align-items: center; gap: var(--jv-space-sm); min-width: 0; cursor: pointer; color: inherit; }
.j-checkbox__input { appearance: none; box-sizing: border-box; display: inline-grid; place-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid var(--jv-color-outline); border-radius: 4px; background: var(--jv-color-surface); color: var(--jv-color-on-primary); cursor: pointer; }
.j-checkbox__input:checked { border-color: var(--jv-color-primary); background: var(--jv-color-primary); }
.j-checkbox__input:checked::after { content: ""; width: 8px; height: 4px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.j-checkbox__input:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-checkbox__input:disabled { opacity: .5; cursor: not-allowed; }
.j-checkbox__label:empty { display: none; }
j-toggle.j-toggle { position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: var(--jv-space-sm); cursor: pointer; user-select: none; color: var(--jv-color-on-surface); }
j-toggle.j-toggle::before { content: ""; width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; border: 0px solid var(--jv-color-outline); transition: background var(--jv-motion-standard), border-color var(--jv-motion-standard); }
j-toggle.j-toggle::after { content: ""; position: absolute; left: 2px; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--jv-color-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.32); transform: translateY(-50%); transition: transform var(--jv-motion-standard), background var(--jv-motion-standard); }
j-toggle.j-toggle[aria-checked="true"]::before, j-toggle.j-toggle.j-toggle--checked::before { background: var(--jv-color-primary); border-color: var(--jv-color-primary); }
j-toggle.j-toggle[aria-checked="true"]::after, j-toggle.j-toggle.j-toggle--checked::after { transform: translate(16px, -50%); background: var(--jv-color-on-primary); }
j-toggle.j-toggle:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; border-radius: 999px; }
label.j-toggle { position: relative; min-height: 40px; display: inline-flex; align-items: center; gap: var(--jv-space-sm); cursor: pointer; user-select: none; color: var(--jv-color-on-surface); }
label.j-toggle .j-toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.j-toggle .j-toggle__track { width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; border: 0px solid var(--jv-color-outline); display: inline-flex; align-items: center; padding: 1px; transition: background var(--jv-motion-standard), border-color var(--jv-motion-standard); }
label.j-toggle .j-toggle__thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--jv-color-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.32); transition: transform var(--jv-motion-standard), background var(--jv-motion-standard); }
label.j-toggle .j-toggle__input:checked + .j-toggle__track { background: var(--jv-color-primary); border-color: var(--jv-color-primary); }
label.j-toggle .j-toggle__input:checked + .j-toggle__track .j-toggle__thumb { transform: translateX(16px); background: var(--jv-color-on-primary); }
label.j-toggle .j-toggle__input:focus-visible + .j-toggle__track { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
label.j-toggle .j-toggle__label { color: var(--jv-color-on-surface); }
.j-dropdown { position: relative; display: inline-block; }
.j-dropdown__menu, .j-menu { min-width: 160px; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-shape-radius); background: var(--jv-color-surface); box-shadow: var(--jv-elevation-2); padding: var(--jv-space-xs); }
.j-dropdown__item { width: 100%; min-height: 36px; border: 0; background: transparent; color: inherit; text-align: start; padding: 0 var(--jv-space-sm); border-radius: var(--jv-radius-xs); }
.j-icon-button:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-icon-button:disabled, .j-icon-button[disabled], .j-icon-button[aria-disabled="true"] { opacity: .56; cursor: not-allowed; }
.j-icon-button.j-icon-button--primary { color: var(--jv-color-primary); }
.j-icon-button.j-icon-button--secondary { color: var(--jv-color-secondary); }
.j-icon-button.j-icon-button--tertiary { color: var(--jv-color-tertiary); }
.j-icon-button.j-icon-button--error, .j-icon-button.j-icon-button--negative { color: var(--jv-color-error); }
.j-icon-button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; background: transparent; color: inherit; }
.j-icon { display: inline-block; flex-shrink: 0; font-size: calc(var(--jv-icon-size, 24) * 1px); line-height: 1; vertical-align: middle; }
.j-icon--primary { color: var(--jv-color-primary); }
.j-icon--secondary { color: var(--jv-color-secondary); }
.j-icon--tertiary { color: var(--jv-color-tertiary); }
.j-icon--error, .j-icon--negative { color: var(--jv-color-error); }
.j-field { display: grid; gap: var(--jv-space-xs); }
.j-field__label { color: var(--jv-color-on-surface-muted); font-size: var(--jv-type-label-large-size); line-height: var(--jv-type-label-large-line-height); }
.j-field__hint { color: var(--jv-color-on-surface-muted); font-size: 0.75rem; }
.j-field__error, .j-field__required { color: var(--jv-color-error, #b3261e); }
.j-input, .j-textarea, .j-select__native, select.j-select { width: 100%; min-height: 40px; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-shape-radius); padding: 0 var(--jv-space-sm); font: inherit; color: inherit; background: var(--jv-color-surface); }
.j-input:focus, .j-textarea:focus, .j-select__native:focus, select.j-select:focus, .j-input:focus-visible, .j-textarea:focus-visible, .j-select__native:focus-visible, select.j-select:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-field--dense .j-input, .j-field--dense .j-select__native { min-height: 32px; }
.j-field--dense .j-textarea { min-height: 72px; }
.j-field--filled .j-input, .j-field--filled .j-textarea, .j-field--filled .j-select__native { background: color-mix(in srgb, var(--jv-color-on-surface) 5%, var(--jv-color-surface)); border-color: transparent; }
.j-field--outlined .j-input, .j-field--outline .j-input, .j-field--outlined .j-textarea, .j-field--outline .j-textarea, .j-field--outlined .j-select__native, .j-field--outline .j-select__native { border: 1px solid var(--jv-color-outline); background: var(--jv-color-surface); }
.j-field--outlined :is(.j-input, .j-textarea, .j-select__native):focus,
.j-field--outline :is(.j-input, .j-textarea, .j-select__native):focus { outline: none; border-color: var(--jv-color-primary); box-shadow: inset 0 0 0 1px var(--jv-color-primary); }
.j-field--error:is(.j-field--outlined, .j-field--outline) :is(.j-input, .j-textarea, .j-select__native):focus { border-color: var(--jv-color-error); box-shadow: inset 0 0 0 1px var(--jv-color-error); }

.j-field--standout .j-input, .j-field--standout .j-textarea, .j-field--standout .j-select__native { background: var(--jv-color-surface); border-color: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--jv-color-primary) 24%, transparent); }
.j-field--borderless .j-input, .j-field--borderless .j-textarea, .j-field--borderless .j-select__native { border-color: transparent; background: transparent; }
.j-field--underline .j-input, .j-field--underline .j-textarea, .j-field--underline .j-select__native { border: 0; border-bottom: 1px solid var(--jv-color-outline); border-radius: 0; padding-inline: 0; background: transparent; }
.j-field--underline .j-input:focus, .j-field--underline .j-textarea:focus, .j-field--underline .j-select__native:focus { border-bottom-color: var(--jv-color-primary); outline: none; box-shadow: 0 1px 0 var(--jv-color-primary); }
.j-field--rounded .j-input, .j-field--rounded .j-textarea, .j-field--rounded .j-select__native { border-radius: 999px; }
.j-field--square .j-input, .j-field--square .j-textarea, .j-field--square .j-select__native { border-radius: 0; }
.j-field--disabled { opacity: 0.56; cursor: not-allowed; }
.j-textarea { min-height: 96px; padding-top: var(--jv-space-sm); resize: vertical; }
.j-table { width: 100%; border-collapse: collapse; }
.j-calendar { display: grid; gap: var(--jv-space-sm); border-radius: var(--jv-shape-radius); background: var(--jv-color-surface); color: var(--jv-color-on-surface); }
.j-calendar--bordered { border: 1px solid var(--jv-color-outline); padding: var(--jv-space-sm); }
.j-calendar__header { display: flex; align-items: center; gap: var(--jv-space-sm); min-width: 0; }
.j-calendar__title { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.j-calendar__nav { width: 36px; height: 36px; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); display: inline-grid; place-items: center; background: var(--jv-color-surface); color: inherit; cursor: pointer; }
.j-calendar__weekdays, .j-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.j-calendar__weekday { padding: var(--jv-space-xs); color: var(--jv-color-on-surface-muted); font-size: 0.75rem; font-weight: 700; text-align: center; }
.j-calendar__day { min-height: 96px; border: 1px solid color-mix(in srgb, var(--jv-color-outline) 70%, transparent); padding: var(--jv-space-xs); display: grid; align-content: start; gap: 4px; }
.j-calendar--dense .j-calendar__day { min-height: 64px; }
.j-calendar__day--outside { color: var(--jv-color-on-surface-muted); background: color-mix(in srgb, var(--jv-color-on-surface) 3%, transparent); }
.j-calendar__day--today { box-shadow: inset 0 0 0 2px var(--jv-color-primary); }
.j-calendar__day--selected { background: color-mix(in srgb, var(--jv-color-primary) 10%, var(--jv-color-surface)); }
.j-calendar__day--disabled { opacity: 0.45; }
.j-calendar__day-button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.j-calendar__day--selected .j-calendar__day-button { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-calendar__events { display: grid; gap: 3px; min-width: 0; }
.j-calendar-event { min-width: 0; display: flex; align-items: center; gap: 4px; border-radius: var(--jv-radius-xs); padding: 2px 6px; background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); font-size: 0.75rem; line-height: 1.4; text-decoration: none; }
.j-calendar-event__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-calendar-event__time { font-weight: 700; }
.j-calendar__more, .j-calendar__empty, .j-calendar__agenda-date { color: var(--jv-color-on-surface-muted); font-size: 0.75rem; }
.j-calendar__title-wrap { flex: 1 1 auto; min-width: 0; }
.j-calendar__modes { display: inline-flex; gap: 2px; border: 0px solid var(--jv-color-outline); border-radius: 999px; padding: 2px; }
.j-calendar__mode { padding: 4px 10px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.75rem; font-weight: 600; border-radius: 999px; cursor: pointer; }
.j-calendar__mode.is-active { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-calendar__agenda { display: grid; gap: 6px; }
.j-calendar__agenda-date { padding-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.j-calendar__agenda-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); background: var(--jv-color-surface); color: inherit; cursor: pointer; text-align: left; }
.j-calendar__agenda-item:hover { background: color-mix(in srgb, var(--jv-color-primary) 8%, var(--jv-color-surface)); }
.j-calendar__agenda { display: grid; gap: var(--jv-space-xs); }
.j-calendar__agenda-date { margin-top: var(--jv-space-sm); font-weight: 700; }
.j-flow { position: relative; min-height: 320px; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-shape-radius); background: var(--jv-color-surface); overflow: hidden; }
.j-flow__viewport { position: relative; width: 100%; height: 100%; min-height: inherit; overflow: hidden; }
.j-flow-background { position: absolute; inset: 0; pointer-events: none; --j-flow-background-color: color-mix(in srgb, var(--jv-color-outline) 65%, transparent); }
.j-flow-background--lines { background-image: linear-gradient(var(--j-flow-background-color) var(--j-flow-background-size), transparent var(--j-flow-background-size)), linear-gradient(90deg, var(--j-flow-background-color) var(--j-flow-background-size), transparent var(--j-flow-background-size)); background-size: var(--j-flow-background-gap) var(--j-flow-background-gap); }
.j-flow-background--dots { background-image: radial-gradient(var(--j-flow-background-color) var(--j-flow-background-size), transparent var(--j-flow-background-size)); background-size: var(--j-flow-background-gap) var(--j-flow-background-gap); }
.j-flow__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.j-flow-edge__path { stroke: var(--jv-color-outline); stroke-width: 2; }
.j-flow-edge__marker { fill: var(--jv-color-outline); }
.j-flow-edge--animated .j-flow-edge__path { stroke-dasharray: 6 4; animation: jv-flow-dash 900ms linear infinite; }
.j-flow-edge__label { font-size: 12px; fill: var(--jv-color-on-surface-muted); paint-order: stroke; stroke: var(--jv-color-surface); stroke-width: 4px; }
@keyframes jv-flow-dash { to { stroke-dashoffset: -10; } }
.j-flow__nodes { position: absolute; inset: 0; }
.j-flow-node { position: absolute; min-width: 80px; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); display: grid; place-items: center; padding: var(--jv-space-sm); background: var(--jv-color-surface); color: var(--jv-color-on-surface); box-shadow: var(--jv-elevation-1); cursor: grab; }
.j-flow-node--selected { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-flow-node__content { min-width: 0; text-align: center; }
.j-flow-node__handle { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid var(--jv-color-primary); border-radius: 50%; background: var(--jv-color-surface); transform: translateY(-50%); }
.j-flow-node__handle--target { left: -6px; }
.j-flow-node__handle--source { right: -6px; }
.j-flow-controls, .j-flow-panel, .j-flow-minimap { position: absolute; z-index: 2; }
.j-flow-controls { left: var(--jv-space-sm); bottom: var(--jv-space-sm); display: inline-flex; overflow: hidden; border: 0px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); background: var(--jv-color-surface); box-shadow: var(--jv-elevation-1); }
.j-flow-controls__button { width: 36px; height: 36px; border: 0; border-right: 1px solid var(--jv-color-outline); display: inline-grid; place-items: center; background: transparent; color: inherit; cursor: pointer; }
.j-flow-controls__button:last-child { border-right: 0; }
.j-flow-panel { top: var(--jv-space-sm); left: var(--jv-space-sm); border: 0px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); background: color-mix(in srgb, var(--jv-color-surface) 92%, transparent); padding: var(--jv-space-xs) var(--jv-space-sm); box-shadow: var(--jv-elevation-1); }
.j-flow-panel--top-right { right: var(--jv-space-sm); left: auto; }
.j-flow-panel--bottom-left { top: auto; bottom: var(--jv-space-sm); }
.j-flow-panel--bottom-right { top: auto; right: var(--jv-space-sm); bottom: var(--jv-space-sm); left: auto; }
.j-flow-minimap { right: var(--jv-space-sm); bottom: var(--jv-space-sm); border: 0px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); background: color-mix(in srgb, var(--jv-color-surface) 92%, transparent); box-shadow: var(--jv-elevation-1); overflow: hidden; }
.j-flow-minimap__svg { width: 100%; height: 100%; display: block; }
.j-flow-minimap__node { fill: color-mix(in srgb, var(--jv-color-primary) 55%, var(--jv-color-surface)); }
.j-flow { touch-action: none; user-select: none; }
.j-flow--panning { cursor: grabbing; }
.j-flow--dragging .j-flow-node { transition: none !important; }
.j-flow--locked .j-flow-node { cursor: not-allowed !important; }
.j-flow--locked .j-flow__viewport { pointer-events: none; }
.j-flow-node:active { cursor: grabbing; }
.j-flow-node--selected { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; box-shadow: 0 6px 22px color-mix(in srgb, var(--jv-color-primary) 35%, transparent); }
.j-flow-edge--preview { stroke: var(--jv-color-primary); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.85; }
.j-flow-node__handle { cursor: crosshair; transition: transform 0.18s ease, background 0.18s ease; }
.j-flow-node__handle:hover { transform: translateY(-50%) scale(1.4); background: var(--jv-color-primary); }
.j-flow-controls__button[aria-pressed="true"] { background: color-mix(in srgb, var(--jv-color-primary) 18%, transparent); color: var(--jv-color-primary); }
.j-flow-minimap { width: 168px; height: 110px; padding: 6px; }
.j-flow-minimap__svg { width: 100%; height: 100%; display: block; cursor: pointer; }
.j-flow-minimap__viewport { color: color-mix(in srgb, var(--jv-color-primary) 80%, transparent); pointer-events: none; }
.j-flow__viewport { transform-origin: 0 0; will-change: transform; position: absolute; inset: 0; }
.j-flow-node { transition: box-shadow 0.18s ease, transform 0.18s ease; }
.j-flow-node--input { border-left: 3px solid color-mix(in srgb, #22c55e 60%, transparent); }
.j-flow-node--output { border-right: 3px solid color-mix(in srgb, #ef4444 60%, transparent); }
.j-chip, .j-badge { min-height: 28px; display: inline-flex; align-items: center; gap: var(--jv-space-xs); border-radius: 999px; padding: 2px 10px; background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }
.j-chip--primary { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-chip--secondary { background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }
.j-chip--positive { background: var(--jv-color-positive, #16a34a); color: var(--jv-color-on-positive, #fff); }
.j-chip--negative, .j-chip--error { background: var(--jv-color-error, #b3261e); color: var(--jv-color-on-error, #fff); }
.j-chip--outlined, .j-chip--outline { border: 1px solid currentColor; background: transparent; color: var(--jv-color-primary); }
.j-chip--text-primary { color: var(--jv-color-primary); }
.j-chip--text-secondary { color: var(--jv-color-secondary); }
.j-chip--text-error, .j-chip--text-negative { color: var(--jv-color-error, #b3261e); }
.j-chip--text-white { color: #fff; }
.j-chip--text-black { color: #000; }
.j-chip--dense { min-height: 22px; padding: 0 8px; font-size: 0.8125rem; }
.j-chip--square { border-radius: var(--jv-radius-xs); }
.j-chip--clickable { cursor: pointer; user-select: none; }
.j-chip--selected { box-shadow: inset 0 0 0 1px currentColor; }
.j-chip--disabled { opacity: 0.56; pointer-events: none; }
.j-chip__icon { display: inline-flex; align-items: center; justify-content: center; }
.j-chip__remove { width: 20px; height: 20px; border: 0; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.j-dialog { position: fixed; inset: 0; z-index: var(--jv-z-dialog, 1200); display: grid; place-items: center; padding: var(--jv-space-md); background: rgba(15, 23, 42, 0.38); }
.j-dialog[hidden] { display: none !important; }
.j-dialog-panel { width: min(100%, 500px); border: 0; border-radius: var(--jv-shape-radius); background: var(--jv-color-surface); color: var(--jv-color-on-surface); box-shadow: var(--jv-elevation-3); padding: var(--jv-space-lg); }
.j-dialog__header { display: flex; align-items: center; gap: var(--jv-space-sm); margin-bottom: var(--jv-space-sm); }
.j-dialog__icon { color: var(--jv-color-primary); font-size: 28px; }
.j-dialog--success .j-dialog__icon { color: var(--jv-color-positive, #16a34a); }
.j-dialog--warning .j-dialog__icon { color: var(--jv-color-warning, #b45309); }
.j-dialog--error .j-dialog__icon { color: var(--jv-color-error, #b3261e); }
.j-dialog-title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.j-dialog-content { color: var(--jv-color-on-surface-variant, #475569); line-height: 1.55; }
.j-dialog-actions { display: flex; justify-content: flex-end; gap: var(--jv-space-sm); margin-top: var(--jv-space-lg); }
.j-alert, .j-banner, .j-snackbar { border-radius: var(--jv-shape-radius); padding: var(--jv-space-md); }
.j-snackbar { display: flex; align-items: center; gap: var(--jv-space-md); background: var(--jv-color-on-surface); color: var(--jv-color-surface); box-shadow: var(--jv-elevation-3); }
.j-breadcrumbs, .j-tabs, .j-tab-panels, .j-stepper { display: flex; gap: var(--jv-space-sm); }
.j-tab-panel { width: 100%; }
.j-tree, .j-list { list-style: none; margin: 0; padding: 0; }
.j-separator { border: 0; border-top: 1px solid var(--jv-color-outline); width: 100%; }
.j-responsive { width: 100%; overflow: hidden; }
.j-responsive > * { width: 100%; height: 100%; }
.j-popup-proxy, .j-no-ssr, .j-intersection, .j-pull-to-refresh { min-width: 0; }
.j-slide-transition { overflow: hidden; transition: max-height var(--jv-slide-duration, 180ms) ease-in-out; }
.j-space { flex: 1 1 auto; }
.j-linear-progress { min-height: 4px; }

.pa-none, .jv-pa-none { padding: 0; } .pa-xs, .jv-pa-xs { padding: var(--jv-space-xs); } .pa-sm, .jv-pa-sm { padding: var(--jv-space-sm); } .pa-md, .jv-pa-md { padding: var(--jv-space-md); } .pa-lg, .jv-pa-lg { padding: var(--jv-space-lg); } .pa-xl, .jv-pa-xl { padding: var(--jv-space-xl); }
.px-none, .jv-px-none { padding-left: 0; padding-right: 0; } .px-xs, .jv-px-xs { padding-left: var(--jv-space-xs); padding-right: var(--jv-space-xs); } .px-sm, .jv-px-sm { padding-left: var(--jv-space-sm); padding-right: var(--jv-space-sm); } .px-md, .jv-px-md { padding-left: var(--jv-space-md); padding-right: var(--jv-space-md); } .px-lg, .jv-px-lg { padding-left: var(--jv-space-lg); padding-right: var(--jv-space-lg); } .px-xl, .jv-px-xl { padding-left: var(--jv-space-xl); padding-right: var(--jv-space-xl); }
.py-none, .jv-py-none { padding-top: 0; padding-bottom: 0; } .py-xs, .jv-py-xs { padding-top: var(--jv-space-xs); padding-bottom: var(--jv-space-xs); } .py-sm, .jv-py-sm { padding-top: var(--jv-space-sm); padding-bottom: var(--jv-space-sm); } .py-md, .jv-py-md { padding-top: var(--jv-space-md); padding-bottom: var(--jv-space-md); } .py-lg, .jv-py-lg { padding-top: var(--jv-space-lg); padding-bottom: var(--jv-space-lg); } .py-xl, .jv-py-xl { padding-top: var(--jv-space-xl); padding-bottom: var(--jv-space-xl); }
.pt-md, .jv-pt-md { padding-top: var(--jv-space-md); } .pr-md, .jv-pr-md { padding-right: var(--jv-space-md); } .pb-md, .jv-pb-md { padding-bottom: var(--jv-space-md); } .pl-md, .jv-pl-md { padding-left: var(--jv-space-md); }
.ma-none, .jv-ma-none { margin: 0; } .ma-xs, .jv-ma-xs { margin: var(--jv-space-xs); } .ma-sm, .jv-ma-sm { margin: var(--jv-space-sm); } .ma-md, .jv-ma-md { margin: var(--jv-space-md); } .ma-lg, .jv-ma-lg { margin: var(--jv-space-lg); } .ma-xl, .jv-ma-xl { margin: var(--jv-space-xl); }
.mx-auto, .jv-mx-auto { margin-left: auto; margin-right: auto; } .mx-md, .jv-mx-md { margin-left: var(--jv-space-md); margin-right: var(--jv-space-md); } .my-md, .jv-my-md { margin-top: var(--jv-space-md); margin-bottom: var(--jv-space-md); }
.mt-md, .jv-mt-md { margin-top: var(--jv-space-md); } .mb-md, .jv-mb-md { margin-bottom: var(--jv-space-md); } .mt-lg, .jv-mt-lg { margin-top: var(--jv-space-lg); }
.row { display: flex; flex-direction: row; flex-wrap: wrap; } .row.inline { display: inline-flex; } .column { display: flex; flex-direction: column; } .grid { display: grid; } .stack { display: grid; gap: var(--jv-space-md); }
.wrap { flex-wrap: wrap; } .no-wrap { flex-wrap: nowrap; } .reverse-wrap { flex-wrap: wrap-reverse; }
.col { flex: 1 1 0; min-width: 0; } .col-auto { flex: 0 0 auto; } .col-grow { flex: 1 0 auto; } .col-shrink { flex: 0 1 auto; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-stretch { align-items: stretch; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-around { justify-content: space-around; }
.content-center { align-content: center; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-between { align-content: space-between; }
.self-center { align-self: center; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; }
.gap-xs { gap: var(--jv-space-xs); } .gap-sm { gap: var(--jv-space-sm); } .gap-md { gap: var(--jv-space-md); } .gap-lg { gap: var(--jv-space-lg); } .gap-xl { gap: var(--jv-space-xl); }
.text-display-lg { font-size: var(--jv-type-display-large-size); line-height: var(--jv-type-display-large-line-height); }
.text-headline-md { font-size: var(--jv-type-headline-large-size); line-height: var(--jv-type-headline-large-line-height); }
.text-title-sm { font-size: var(--jv-type-title-medium-size); line-height: var(--jv-type-title-medium-line-height); }
.text-body-md { font-size: var(--jv-type-body-medium-size); line-height: var(--jv-type-body-medium-line-height); }
.text-label-lg { font-size: var(--jv-type-label-large-size); line-height: var(--jv-type-label-large-line-height); }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; }
.text-weight-light { font-weight: 300; } .text-weight-regular { font-weight: 400; } .text-weight-medium { font-weight: 500; } .text-weight-bold { font-weight: 700; }
.text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; }
.text-primary { color: var(--jv-color-primary); } .text-secondary { color: var(--jv-color-secondary); } .text-error { color: var(--jv-color-error); }
.bg-surface { background: var(--jv-color-surface); } .bg-primary { background: var(--jv-color-primary); } .text-on-primary { color: var(--jv-color-on-primary); }
.fit { width: 100%; height: 100%; } .full-width { width: 100%; } .full-height { height: 100%; } .window-width { width: 100vw; } .window-height { min-height: 100vh; }
.block { display: block; } .inline-block { display: inline-block; } .hidden { display: none !important; } .invisible { visibility: hidden !important; }
.relative-position { position: relative; } .absolute { position: absolute; } .absolute-full { position: absolute; inset: 0; } .fixed { position: fixed; } .fixed-full { position: fixed; inset: 0; }
.fixed-top { position: fixed; top: 0; right: 0; left: 0; } .fixed-right { position: fixed; top: 0; right: 0; bottom: 0; } .fixed-bottom { position: fixed; right: 0; bottom: 0; left: 0; } .fixed-left { position: fixed; top: 0; bottom: 0; left: 0; }
.float-left { float: left; } .float-right { float: right; } .clear { clear: both; }
.z-top { z-index: 9000; } .z-max { z-index: 9998; }
.scroll { overflow: auto; } .no-scroll { overflow: hidden; } .overflow-hidden { overflow: hidden; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ellipsis-2-lines { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .cursor-wait { cursor: wait; } .cursor-move { cursor: move; }
.disabled, [disabled] { opacity: 0.55; pointer-events: none; } .loading { cursor: wait; }
/* .active and .selected are among the most common state class names in any
   application, so an unconditional outline here rings whatever the app marks
   active - tab panels, list rows, form sections. Draw it only for keyboard
   focus, where an outline is what a user actually needs. */
.jv-active, .jv-selected, .active:focus-visible, .selected:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.elevation-0 { box-shadow: none; } .elevation-1 { box-shadow: var(--jv-elevation-1); } .elevation-2 { box-shadow: var(--jv-elevation-2); } .elevation-3, .elevation-4, .elevation-5 { box-shadow: var(--jv-elevation-3); }
.radius-md { border-radius: var(--jv-radius-md); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.only-mobile { display: none; }
.show-xs, .show-sm, .show-md, .show-lg, .show-xl { display: none; }
@media (max-width: 599px) { .hide-xs, .only-desktop { display: none !important; } .only-mobile, .show-xs { display: initial; } }
@media (min-width: 600px) and (max-width: 1023px) { .hide-sm { display: none !important; } .show-sm { display: initial; } }
@media (min-width: 1024px) and (max-width: 1439px) { .hide-md { display: none !important; } .show-md { display: initial; } }
@media (min-width: 1440px) and (max-width: 1919px) { .hide-lg { display: none !important; } .show-lg { display: initial; } }
@media (min-width: 1920px) { .hide-xl { display: none !important; } .show-xl { display: initial; } }

/* ==========================================================================
   Javelle component styles — Material 3 completion layer
   --------------------------------------------------------------------------
   Every class below is emitted by a component in javelle-ui-components but had
   no rule in any shipped stylesheet. Selectors mirror the exact class strings
   produced by the Java renderers; see javelle-ui-components/COMPONENTS.md for
   the full per-component class contract.

   Everything here is expressed in the --jv-* Material 3 token set defined in
   javelle-theme.css so a retheme flows through without touching this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   M3 tokens the component layer relies on.
   Declared with fallbacks so an app that ships its own javelle-theme.css
   without these keys still renders correctly.
   -------------------------------------------------------------------------- */
:root {
  --jv-color-on-secondary: var(--jv-color-on-secondary-fixed, #ffffff);
  --jv-color-on-tertiary: #ffffff;
  --jv-color-on-error: #ffffff;
  --jv-color-positive: #146c2e;
  --jv-color-on-positive: #ffffff;
  --jv-color-warning: #7a5900;
  --jv-color-on-warning: #ffffff;
  --jv-color-info: #00639b;
  --jv-color-on-info: #ffffff;

  /* M3 surface container tiers — tonal elevation without a shadow. */
  --jv-color-surface-container-lowest: #ffffff;
  --jv-color-surface-container-low: #f7f6fb;
  --jv-color-surface-container: #f2f0f7;
  --jv-color-surface-container-high: #ecebf2;
  --jv-color-surface-container-highest: #e6e4ed;
  --jv-color-surface-variant: #e7e0ec;
  --jv-color-on-surface-variant: #49454f;

  --jv-color-primary-container: #eaddff;
  --jv-color-on-primary-container: #21005d;
  --jv-color-error-container: #f9dedc;
  --jv-color-on-error-container: #410e0b;

  /* M3 state-layer opacities. */
  --jv-state-hover: 0.08;
  --jv-state-focus: 0.12;
  --jv-state-pressed: 0.12;
  --jv-state-dragged: 0.16;
  --jv-state-disabled-content: 0.38;
  --jv-state-disabled-container: 0.12;

  --jv-motion-emphasized: 300ms cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"], .theme-dark, .body--dark {
  --jv-color-surface-container-lowest: #0b0f19;
  --jv-color-surface-container-low: #161b26;
  --jv-color-surface-container: #1b2130;
  --jv-color-surface-container-high: #232a3a;
  --jv-color-surface-container-highest: #2c3344;
  --jv-color-surface-variant: #2a2f3d;
  --jv-color-on-surface-variant: #cbd5e1;
  --jv-color-primary-container: #4f378b;
  --jv-color-on-primary-container: #eaddff;
  --jv-color-error-container: #8c1d18;
  --jv-color-on-error-container: #f9dedc;
  --jv-color-positive: #6dd58c;
  --jv-color-on-positive: #003912;
  --jv-color-warning: #f5bd41;
  --jv-color-on-warning: #3d2e00;
  --jv-color-info: #8ecdff;
  --jv-color-on-info: #003354;
}

/* --------------------------------------------------------------------------
   Grid — JRow / JCol
   -------------------------------------------------------------------------- */
.j-row { display: flex; flex-wrap: wrap; min-width: 0; }
.j-row--nowrap { flex-wrap: nowrap; }
.j-row--justify-start { justify-content: flex-start; }
.j-row--justify-end { justify-content: flex-end; }
.j-row--justify-center { justify-content: center; }
.j-row--justify-between { justify-content: space-between; }
.j-row--justify-around { justify-content: space-around; }
.j-row--justify-evenly { justify-content: space-evenly; }
.j-row--align-start { align-items: flex-start; }
.j-row--align-center { align-items: center; }
.j-row--align-end { align-items: flex-end; }
.j-row--align-stretch { align-items: stretch; }
.j-row--align-baseline { align-items: baseline; }
.j-row--gutter-none { gap: 0; }
.j-row--gutter-xs { gap: var(--jv-space-xs); }
.j-row--gutter-sm { gap: var(--jv-space-sm); }
.j-row--gutter-md { gap: var(--jv-space-md); }
.j-row--gutter-lg { gap: var(--jv-space-lg); }
.j-row--gutter-xl { gap: var(--jv-space-xl); }

.j-col { flex: 1 1 0%; min-width: 0; }
.j-col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.j-col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.j-col-3 { flex: 0 0 25%; max-width: 25%; }
.j-col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.j-col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.j-col-6 { flex: 0 0 50%; max-width: 50%; }
.j-col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.j-col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.j-col-9 { flex: 0 0 75%; max-width: 75%; }
.j-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.j-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.j-col-12 { flex: 0 0 100%; max-width: 100%; }
.j-col-offset-1 { margin-inline-start: 8.3333%; }
.j-col-offset-2 { margin-inline-start: 16.6667%; }
.j-col-offset-3 { margin-inline-start: 25%; }
.j-col-offset-4 { margin-inline-start: 33.3333%; }
.j-col-offset-5 { margin-inline-start: 41.6667%; }
.j-col-offset-6 { margin-inline-start: 50%; }
.j-col-offset-7 { margin-inline-start: 58.3333%; }
.j-col-offset-8 { margin-inline-start: 66.6667%; }
.j-col-offset-9 { margin-inline-start: 75%; }
.j-col-offset-10 { margin-inline-start: 83.3333%; }
.j-col-offset-11 { margin-inline-start: 91.6667%; }
.j-col-offset-12 { margin-inline-start: 100%; }

@media (min-width: 600px) {
  .j-col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .j-col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .j-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .j-col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .j-col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .j-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .j-col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .j-col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .j-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .j-col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .j-col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .j-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1024px) {
  .j-col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .j-col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .j-col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .j-col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .j-col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .j-col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .j-col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .j-col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .j-col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .j-col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .j-col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .j-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1440px) {
  .j-col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .j-col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .j-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .j-col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .j-col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .j-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .j-col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .j-col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .j-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .j-col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .j-col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .j-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1920px) {
  .j-col-xl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .j-col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .j-col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .j-col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .j-col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .j-col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .j-col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .j-col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .j-col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .j-col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .j-col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .j-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   Layout extras — JLayout / JSection / JPage / JPageSticky / JPageScroller
   -------------------------------------------------------------------------- */
.j-layout-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.j-layout--containerized { height: 100%; min-height: 0; }
.j-layout--standard { min-height: 100vh; }
/* view classes are derived from the "hhh lpr fff" string, so they are markers
   the runtime reads rather than a fixed enumeration. */
[class*="j-layout--view-"] { --jv-layout-view: 1; }

.j-section { display: block; width: 100%; min-width: 0; }
.j-section--padded { padding: var(--jv-space-lg) var(--jv-space-md); }
.j-section--full-width { max-width: none; width: 100%; }
.j-page--padding { padding: var(--jv-space-md); }

.j-page-sticky { position: absolute; z-index: 1000; display: flex; }
.j-page-sticky--fixed-top { position: fixed; top: 0; left: 50%; transform: translateX(-50%); }
.j-page-sticky--fixed-bottom { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); }
.j-page-sticky--fixed-left { position: fixed; left: 0; top: 50%; transform: translateY(-50%); }
.j-page-sticky--fixed-right { position: fixed; right: 0; top: 50%; transform: translateY(-50%); }
.j-page-sticky--fixed-top-left { position: fixed; top: 0; left: 0; }
.j-page-sticky--fixed-top-right { position: fixed; top: 0; right: 0; }
.j-page-sticky--fixed-bottom-left { position: fixed; bottom: 0; left: 0; }
.j-page-sticky--fixed-bottom-right { position: fixed; bottom: 0; right: 0; }
.j-page-sticky__content { display: flex; align-items: center; }
.j-page-sticky__shrink { display: inline-flex; align-items: center; }

.j-page-scroller, j-page-scroller { position: fixed; right: var(--jv-space-md); bottom: var(--jv-space-md); z-index: 1100; display: inline-flex; }

/* --------------------------------------------------------------------------
   JAvatar
   -------------------------------------------------------------------------- */
.j-avatar, j-avatar.j-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--jv-color-surface-variant); color: var(--jv-color-on-surface-variant);
  font-size: var(--jv-type-label-large-size); line-height: 1; font-weight: 500;
  user-select: none;
}
.j-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-avatar__icon { font-size: 24px; line-height: 1; }
.j-avatar__text { text-transform: uppercase; letter-spacing: 0.02em; }
.j-avatar--primary { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-avatar--secondary { background: var(--jv-color-secondary); color: var(--jv-color-on-secondary); }
.j-avatar--tertiary { background: var(--jv-color-tertiary); color: var(--jv-color-on-tertiary); }
.j-avatar--positive { background: var(--jv-color-positive); color: var(--jv-color-on-positive); }
.j-avatar--negative, .j-avatar--error { background: var(--jv-color-error); color: var(--jv-color-on-error); }
.j-avatar--warning { background: var(--jv-color-warning); color: var(--jv-color-on-warning); }
.j-avatar--info { background: var(--jv-color-info); color: var(--jv-color-on-info); }
.j-avatar--surface { background: var(--jv-color-surface-container-high); color: var(--jv-color-on-surface); }

/* --------------------------------------------------------------------------
   JBadge (dot variant)
   -------------------------------------------------------------------------- */
.j-badge--dot { width: 6px; height: 6px; min-width: 6px; min-height: 6px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   JAlert
   -------------------------------------------------------------------------- */
.j-alert__icon { flex: 0 0 auto; font-size: 20px; line-height: 1; margin-top: 1px; }
.j-alert__message { flex: 1 1 auto; min-width: 0; }
.j-alert__close {
  flex: 0 0 auto; appearance: none; border: 0; background: transparent; color: inherit;
  cursor: pointer; border-radius: 50%; width: 28px; height: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--jv-motion-quick);
}
.j-alert__close:hover { background: color-mix(in srgb, currentColor calc(var(--jv-state-hover) * 100%), transparent); }
.j-alert__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.j-alert--info { background: color-mix(in srgb, var(--jv-color-info) 14%, var(--jv-color-surface)); color: var(--jv-color-on-surface); border-left: 4px solid var(--jv-color-info); }
.j-alert--success { background: color-mix(in srgb, var(--jv-color-positive) 14%, var(--jv-color-surface)); color: var(--jv-color-on-surface); border-left: 4px solid var(--jv-color-positive); }
.j-alert--warning { background: color-mix(in srgb, var(--jv-color-warning) 16%, var(--jv-color-surface)); color: var(--jv-color-on-surface); border-left: 4px solid var(--jv-color-warning); }
.j-alert--error { background: var(--jv-color-error-container); color: var(--jv-color-on-error-container); border-left: 4px solid var(--jv-color-error); }

/* --------------------------------------------------------------------------
   JBanner
   -------------------------------------------------------------------------- */
.j-banner__content { display: flex; align-items: flex-start; gap: var(--jv-space-md); flex: 1 1 auto; min-width: 0; }
.j-banner__icon { flex: 0 0 auto; font-size: 24px; line-height: 1; color: var(--jv-color-primary); }
.j-banner__message { flex: 1 1 auto; min-width: 0; font-size: var(--jv-type-body-medium-size); line-height: var(--jv-type-body-medium-line-height); }
.j-banner__actions { display: flex; align-items: center; gap: var(--jv-space-sm); flex: 0 0 auto; }
.j-banner--inline { display: flex; align-items: center; }
.j-banner--inline .j-banner__actions { margin-inline-start: auto; }
.j-banner--rounded { border-radius: var(--jv-radius-lg); }

/* --------------------------------------------------------------------------
   JBar
   -------------------------------------------------------------------------- */
.j-bar__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--jv-type-title-medium-size); font-weight: 500; }
.j-bar__actions { display: flex; align-items: center; gap: var(--jv-space-xs); flex: 0 0 auto; }
.j-bar--dark { background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface); }

/* --------------------------------------------------------------------------
   JBreadcrumbs / JBreadcrumb
   -------------------------------------------------------------------------- */
.j-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jv-space-xs); margin: 0; padding: 0; list-style: none; }
.j-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--jv-space-xs); font-size: var(--jv-type-body-medium-size); color: var(--jv-color-on-surface-muted); min-width: 0; }
.j-breadcrumbs__item--active { color: var(--jv-color-on-surface); font-weight: 500; }
.j-breadcrumbs__separator { color: var(--jv-color-on-surface-muted); user-select: none; opacity: 0.7; }
.j-breadcrumb { display: inline-flex; align-items: center; gap: var(--jv-space-xs); color: inherit; text-decoration: none; border-radius: var(--jv-radius-xs); min-width: 0; }
.j-breadcrumb:hover { text-decoration: underline; }
.j-breadcrumb:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-breadcrumb__icon { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.j-breadcrumb__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   JButton internals + missing colour/group variants
   -------------------------------------------------------------------------- */
.j-button__label { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.j-button__icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.j-button__icon--left { margin-inline-end: 0; }
.j-button__icon--right { margin-inline-start: 0; }
.j-button--primary.j-button--filled, .j-button--primary.j-button--unelevated, .j-button--primary.j-button--push { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-button--primary.j-button--text, .j-button--primary.j-button--flat, .j-button--primary.j-button--outlined, .j-button--primary.j-button--outline { color: var(--jv-color-primary); }
.j-button-group--spread { display: flex; width: 100%; }
.j-button-group--spread > * { flex: 1 1 0%; }

/* --------------------------------------------------------------------------
   JButtonDropdown / JButtonToggle
   -------------------------------------------------------------------------- */
.j-button-dropdown, j-button-dropdown.j-button-dropdown { position: relative; display: inline-flex; align-items: stretch; }
.j-button-dropdown__panel {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 1200;
  min-width: 180px; padding: var(--jv-space-xs);
  background: var(--jv-color-surface-container-low); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md);
  box-shadow: var(--jv-elevation-2);
}
.j-button-dropdown__panel[hidden] { display: none; }
.j-button-toggle, j-button-toggle.j-button-toggle { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; border: 1px solid var(--jv-color-outline); }
.j-button-toggle > .j-button { border-radius: 0; box-shadow: none; }
.j-button-toggle > .j-button + .j-button { border-inline-start: 1px solid var(--jv-color-outline); }
.j-button-toggle__btn--active { background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }

/* --------------------------------------------------------------------------
   JCard sections / actions
   -------------------------------------------------------------------------- */
.j-card__section { display: block; padding: var(--jv-space-md); min-width: 0; }
.j-card__section--horiz { display: flex; align-items: center; gap: var(--jv-space-md); }
.j-card__section--vert { display: flex; flex-direction: column; gap: var(--jv-space-sm); }
.j-card__actions { display: flex; align-items: center; gap: var(--jv-space-sm); padding: var(--jv-space-sm) var(--jv-space-md); }
.j-card__actions--horiz { flex-direction: row; }
.j-card__actions--vert { flex-direction: column; align-items: stretch; }

/* --------------------------------------------------------------------------
   JCarousel / JCarouselSlide
   -------------------------------------------------------------------------- */
.j-carousel, j-carousel.j-carousel { position: relative; display: block; overflow: hidden; border-radius: var(--jv-radius-md); background: var(--jv-color-surface-container); }
.j-carousel__track { display: flex; transition: transform var(--jv-motion-emphasized); will-change: transform; }
.j-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  appearance: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--jv-color-surface) 78%, transparent);
  color: var(--jv-color-on-surface); box-shadow: var(--jv-elevation-1);
  transition: background var(--jv-motion-quick), box-shadow var(--jv-motion-quick);
}
.j-carousel__arrow:hover { background: var(--jv-color-surface); box-shadow: var(--jv-elevation-2); }
.j-carousel__arrow:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-carousel__arrow--prev { inset-inline-start: var(--jv-space-sm); }
.j-carousel__arrow--next { inset-inline-end: var(--jv-space-sm); }
.j-carousel__dots { position: absolute; left: 0; right: 0; bottom: var(--jv-space-sm); z-index: 2; display: flex; justify-content: center; gap: var(--jv-space-xs); }
.j-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--jv-color-on-surface) 32%, transparent); cursor: pointer; transition: background var(--jv-motion-quick), width var(--jv-motion-quick); }
.j-carousel__dot--active { background: var(--jv-color-primary); width: 20px; border-radius: 999px; }
.j-carousel__control { position: absolute; z-index: 3; display: inline-flex; }
.j-carousel-slide, j-carousel-slide.j-carousel-slide { flex: 0 0 100%; min-width: 0; position: relative; display: block; }
.j-carousel-slide__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.j-carousel-slide__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--jv-space-md);
  background: linear-gradient(to top, color-mix(in srgb, #000 62%, transparent), transparent);
  color: #fff; font-size: var(--jv-type-body-medium-size);
}
.j-carousel-slide--primary { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-carousel-slide--secondary { background: var(--jv-color-secondary); color: var(--jv-color-on-secondary); }
.j-carousel-slide--tertiary { background: var(--jv-color-tertiary); color: var(--jv-color-on-tertiary); }
.j-carousel-slide--surface { background: var(--jv-color-surface-container-high); color: var(--jv-color-on-surface); }

/* --------------------------------------------------------------------------
   JChatMessage
   -------------------------------------------------------------------------- */
.j-chat-message, j-chat-message.j-chat-message { display: flex; gap: var(--jv-space-sm); align-items: flex-end; margin-bottom: var(--jv-space-sm); min-width: 0; }
.j-chat-message__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.j-chat-message__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 76%; }
.j-chat-message__name { font-size: 0.75rem; font-weight: 500; color: var(--jv-color-on-surface-muted); }
.j-chat-message__bubble {
  padding: var(--jv-space-sm) var(--jv-space-md);
  border-radius: var(--jv-radius-lg);
  background: var(--jv-color-surface-container-high); color: var(--jv-color-on-surface);
  font-size: var(--jv-type-body-medium-size); line-height: var(--jv-type-body-medium-line-height);
  overflow-wrap: anywhere;
}
.j-chat-message__stamp { font-size: 0.6875rem; color: var(--jv-color-on-surface-muted); }
.j-chat-message--sent { flex-direction: row-reverse; }
.j-chat-message--sent .j-chat-message__content { align-items: flex-end; }
.j-chat-message--sent .j-chat-message__bubble { background: var(--jv-color-primary); color: var(--jv-color-on-primary); border-bottom-right-radius: var(--jv-radius-xs); }
.j-chat-message--received .j-chat-message__bubble { border-bottom-left-radius: var(--jv-radius-xs); }

/* --------------------------------------------------------------------------
   JChip internals
   -------------------------------------------------------------------------- */
.j-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-chip__icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.j-chip__icon--left { margin-inline-start: -2px; }
.j-chip__icon--right { margin-inline-end: -2px; }
.j-chip--size-xs { min-height: 20px; padding: 0 var(--jv-space-xs); font-size: 0.6875rem; }
.j-chip--size-sm { min-height: 24px; padding: 0 var(--jv-space-sm); font-size: 0.75rem; }
.j-chip--size-md { min-height: 32px; padding: 0 var(--jv-space-md); font-size: 0.875rem; }
.j-chip--size-lg { min-height: 40px; padding: 0 var(--jv-space-md); font-size: 1rem; }
.j-chip--size-xl { min-height: 48px; padding: 0 var(--jv-space-lg); font-size: 1.125rem; }
.j-chip--text-tertiary { color: var(--jv-color-tertiary); }
.j-chip--text-positive { color: var(--jv-color-positive); }
.j-chip--text-warning { color: var(--jv-color-warning); }
.j-chip--text-info { color: var(--jv-color-info); }

/* --------------------------------------------------------------------------
   JChart
   -------------------------------------------------------------------------- */
.j-chart, j-chart.j-chart { display: block; margin: 0; min-width: 0; color: var(--jv-color-on-surface); }
.j-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.j-chart__caption { margin-top: var(--jv-space-sm); font-size: 0.75rem; color: var(--jv-color-on-surface-muted); text-align: center; }
.j-chart__axis { stroke: var(--jv-color-outline); stroke-width: 1; }
.j-chart__bar { fill: var(--jv-color-primary); transition: fill var(--jv-motion-quick); }
.j-chart__bar:hover { fill: color-mix(in srgb, var(--jv-color-primary) 82%, #000); }
.j-chart__line { fill: none; stroke: var(--jv-color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.j-chart__area { fill: color-mix(in srgb, var(--jv-color-primary) 22%, transparent); stroke: none; }
.j-chart__slice { stroke: var(--jv-color-surface); stroke-width: 1; transition: opacity var(--jv-motion-quick); }
.j-chart__slice:hover { opacity: 0.86; }
.j-chart__slice:nth-of-type(1) { fill: var(--jv-color-primary); }
.j-chart__slice:nth-of-type(2) { fill: var(--jv-color-secondary); }
.j-chart__slice:nth-of-type(3) { fill: var(--jv-color-tertiary); }
.j-chart__slice:nth-of-type(4) { fill: var(--jv-color-positive); }
.j-chart__slice:nth-of-type(5) { fill: var(--jv-color-warning); }
.j-chart__slice:nth-of-type(6) { fill: var(--jv-color-info); }
.j-chart--sparkline .j-chart__svg { height: 40px; }
.j-chart--sparkline .j-chart__axis { display: none; }
.j-chart--bar, .j-chart--line, .j-chart--area, .j-chart--pie { display: block; }

/* --------------------------------------------------------------------------
   JCircularProgress / JKnob
   -------------------------------------------------------------------------- */
.j-circular-progress, j-circular-progress.j-circular-progress { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--jv-color-primary); }
.j-circular-progress svg { display: block; transform: rotate(-90deg); }
.j-circular-progress__track { fill: none; stroke: color-mix(in srgb, currentColor 20%, transparent); }
.j-circular-progress__arc { fill: none; stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset var(--jv-motion-standard); }
.j-circular-progress__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 500; color: var(--jv-color-on-surface); }
.j-circular-progress--indeterminate svg { animation: jv-spin 1.4s linear infinite; }
.j-circular-progress--indeterminate .j-circular-progress__arc { animation: jv-dash 1.4s ease-in-out infinite; }

.j-knob, j-knob.j-knob { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--jv-color-primary); }
.j-knob svg { display: block; transform: rotate(-90deg); }
.j-knob__track { fill: none; stroke: color-mix(in srgb, currentColor 20%, transparent); }
.j-knob__arc { fill: none; stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset var(--jv-motion-standard); }
.j-knob__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--jv-type-title-medium-size); font-weight: 500; color: var(--jv-color-on-surface); }
.j-knob__label { position: absolute; left: 0; right: 0; bottom: -1.4em; text-align: center; font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }

@keyframes jv-spin { to { transform: rotate(270deg); } }
@keyframes jv-dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 200; stroke-dashoffset: -125; }
}

/* --------------------------------------------------------------------------
   JCommandBar
   -------------------------------------------------------------------------- */
.j-command-bar, j-command-bar.j-command-bar {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--jv-color-surface-container-low); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-lg);
  box-shadow: var(--jv-elevation-3); overflow: hidden;
}
.j-command-bar__field { display: flex; align-items: center; gap: var(--jv-space-sm); padding: var(--jv-space-sm) var(--jv-space-md); border-bottom: 1px solid var(--jv-color-outline); }
.j-command-bar__icon { flex: 0 0 auto; color: var(--jv-color-on-surface-muted); font-size: 18px; }
.j-command-bar__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: none; padding: var(--jv-space-xs) 0; }
.j-command-bar__hint { flex: 0 0 auto; padding: 2px 6px; border-radius: var(--jv-radius-xs); background: var(--jv-color-surface-container-high); color: var(--jv-color-on-surface-muted); font-size: 0.6875rem; font-family: var(--jv-font-mono, monospace); }
.j-command-bar__list { margin: 0; padding: var(--jv-space-xs); list-style: none; max-height: 320px; overflow-y: auto; }
.j-command-bar__empty { padding: var(--jv-space-md); text-align: center; color: var(--jv-color-on-surface-muted); font-size: var(--jv-type-body-medium-size); }
.j-command-bar__item {
  display: flex; align-items: center; gap: var(--jv-space-sm);
  padding: var(--jv-space-sm) var(--jv-space-md); border-radius: var(--jv-radius-sm);
  cursor: pointer; min-width: 0;
  transition: background var(--jv-motion-quick);
}
.j-command-bar__item:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-command-bar__item--active { background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }
.j-command-bar__item-icon { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--jv-color-on-surface-variant); }
.j-command-bar__item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-command-bar__item-group { flex: 0 0 auto; font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-command-bar__item-shortcut { flex: 0 0 auto; padding: 2px 6px; border-radius: var(--jv-radius-xs); background: var(--jv-color-surface-container-high); color: var(--jv-color-on-surface-muted); font-size: 0.6875rem; font-family: var(--jv-font-mono, monospace); }

/* --------------------------------------------------------------------------
   JContextMenu
   -------------------------------------------------------------------------- */
.j-context-menu, j-context-menu.j-context-menu {
  position: fixed; z-index: 1300; min-width: 180px; padding: var(--jv-space-xs);
  background: var(--jv-color-surface-container-low); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md);
  box-shadow: var(--jv-elevation-3);
}
.j-context-menu[hidden] { display: none; }

/* --------------------------------------------------------------------------
   JDataGrid
   -------------------------------------------------------------------------- */
.j-datagrid, .j-data-grid, j-data-grid.j-data-grid {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--jv-color-surface); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md); overflow: hidden;
}
.j-datagrid__toolbar { display: flex; align-items: center; gap: var(--jv-space-sm); padding: var(--jv-space-sm) var(--jv-space-md); border-bottom: 1px solid var(--jv-color-outline); background: var(--jv-color-surface-container-low); }
.j-datagrid__filter { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 var(--jv-space-sm); font: inherit; color: inherit; background: var(--jv-color-surface); border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); }
.j-datagrid__filter:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: -1px; }
.j-datagrid__selection-count { flex: 0 0 auto; font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-datagrid__loading { padding: var(--jv-space-sm) var(--jv-space-md); font-size: 0.75rem; color: var(--jv-color-on-surface-muted); background: var(--jv-color-surface-container-low); }
.j-datagrid__table { width: 100%; border-collapse: collapse; font-size: var(--jv-type-body-medium-size); }
.j-datagrid__table th, .j-datagrid__table td { padding: var(--jv-space-sm) var(--jv-space-md); text-align: start; border-bottom: 1px solid var(--jv-color-outline); }
.j-datagrid__table th { font-weight: 500; color: var(--jv-color-on-surface-variant); background: var(--jv-color-surface-container-low); white-space: nowrap; }
.j-datagrid__table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--jv-color-on-surface) 4%, transparent); }
.j-datagrid__table tbody tr:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-datagrid__th--sortable { cursor: pointer; user-select: none; }
.j-datagrid__sort { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--jv-space-xs); padding: 0; }
.j-datagrid__sort:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-datagrid__sort-icon { font-size: 16px; line-height: 1; color: var(--jv-color-primary); }
.j-datagrid__select-col { width: 44px; text-align: center; }
.j-datagrid__checkbox { width: 16px; height: 16px; accent-color: var(--jv-color-primary); cursor: pointer; }
.j-datagrid__row--selected { background: var(--jv-color-secondary-container) !important; color: var(--jv-color-on-secondary-container); }
.j-datagrid__empty { padding: var(--jv-space-xl) var(--jv-space-md); text-align: center; color: var(--jv-color-on-surface-muted); }
.j-datagrid__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--jv-space-md); padding: var(--jv-space-sm) var(--jv-space-md); border-top: 1px solid var(--jv-color-outline); background: var(--jv-color-surface-container-low); }
.j-datagrid__range { font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-datagrid__pager { display: flex; align-items: center; gap: var(--jv-space-xs); }
.j-datagrid__page-indicator { font-size: 0.75rem; color: var(--jv-color-on-surface-muted); min-width: 6ch; text-align: center; }
.j-datagrid__page-btn {
  appearance: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jv-color-outline); background: var(--jv-color-surface); color: inherit;
  transition: background var(--jv-motion-quick);
}
.j-datagrid__page-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-datagrid__page-btn:disabled { opacity: var(--jv-state-disabled-content); cursor: not-allowed; }
.j-datagrid__page-btn:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   JDatePicker / JTimePicker / JColorPicker / JFile — labelled field wrappers
   -------------------------------------------------------------------------- */
.j-date-picker, .j-time-picker, .j-color-picker, .j-file,
j-date-picker.j-date-picker, j-time-picker.j-time-picker, j-color-picker.j-color-picker, j-file.j-file {
  display: inline-flex; flex-direction: column; gap: var(--jv-space-xs); min-width: 0;
}
.j-date-picker__label, .j-time-picker__label, .j-color-picker__label, .j-file__label {
  font-size: var(--jv-type-label-large-size); line-height: var(--jv-type-label-large-line-height);
  color: var(--jv-color-on-surface-variant);
}
.j-date-picker__input, .j-time-picker__input {
  min-height: 40px; padding: 0 var(--jv-space-sm); font: inherit; color: inherit;
  background: var(--jv-color-surface); border: 1px solid var(--jv-color-outline);
  border-radius: var(--jv-shape-radius);
  transition: border-color var(--jv-motion-quick), box-shadow var(--jv-motion-quick);
}
.j-date-picker__input:focus-visible, .j-time-picker__input:focus-visible {
  outline: none; border-color: var(--jv-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--jv-color-primary) 24%, transparent);
}
.j-color-picker { flex-direction: row; align-items: center; gap: var(--jv-space-sm); }
.j-color-picker__input { width: 40px; height: 40px; padding: 0; border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm); background: none; cursor: pointer; }
.j-color-picker__swatch { display: inline-block; width: 20px; height: 20px; border-radius: var(--jv-radius-xs); border: 1px solid var(--jv-color-outline); }
.j-file__input { font: inherit; color: inherit; }
.j-file__input::file-selector-button {
  margin-inline-end: var(--jv-space-sm); padding: var(--jv-space-xs) var(--jv-space-md);
  border: 0; border-radius: 999px; cursor: pointer; font: inherit;
  background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container);
}
.j-file__preview { display: flex; flex-wrap: wrap; gap: var(--jv-space-xs); font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }

/* --------------------------------------------------------------------------
   JDrawer modifiers
   -------------------------------------------------------------------------- */
.j-drawer__content { height: 100%; overflow-y: auto; min-width: 0; }
.j-drawer--bordered { border-inline-end: 1px solid var(--jv-color-outline); }
.j-drawer--right.j-drawer--bordered { border-inline-end: 0; border-inline-start: 1px solid var(--jv-color-outline); }
.j-drawer--elevated { box-shadow: var(--jv-elevation-2); }
.j-drawer--dark { background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface); }
.j-drawer--mini { width: 56px; min-width: 56px; overflow-x: hidden; }
.j-drawer--mini-overlay { position: absolute; z-index: 1250; }
.j-drawer--no-mini-animate { transition: none !important; }
.j-drawer--on-top { z-index: 1300; }

/* --------------------------------------------------------------------------
   JDropdown trigger
   -------------------------------------------------------------------------- */
.j-dropdown__trigger { display: inline-flex; align-items: center; gap: var(--jv-space-xs); cursor: pointer; }

/* --------------------------------------------------------------------------
   JEditor / JCodeEditor
   -------------------------------------------------------------------------- */
.j-editor, j-editor.j-editor {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md);
  background: var(--jv-color-surface); overflow: hidden;
}
.j-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jv-space-xs); padding: var(--jv-space-xs) var(--jv-space-sm); border-bottom: 1px solid var(--jv-color-outline); background: var(--jv-color-surface-container-low); }
.j-editor__content { min-height: 160px; padding: var(--jv-space-md); border: 0; outline: none; resize: vertical; font: inherit; color: inherit; background: transparent; }
.j-editor--dense .j-editor__content { min-height: 96px; padding: var(--jv-space-sm); }
.j-code-editor, j-code-editor.j-code-editor {
  display: block; min-width: 0;
  font-family: var(--jv-font-mono, ui-monospace, monospace); font-size: 0.875rem; line-height: 1.6;
  background: var(--jv-color-surface-container-lowest); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md); overflow: auto;
}

/* --------------------------------------------------------------------------
   JExpansionItem / JExpansionPanel
   -------------------------------------------------------------------------- */
.j-expansion-item, j-expansion-item.j-expansion-item { display: block; border-bottom: 1px solid var(--jv-color-outline); min-width: 0; }
.j-expansion-item__header {
  display: flex; align-items: center; gap: var(--jv-space-md); cursor: pointer; list-style: none;
  padding: var(--jv-space-md); min-height: 48px; user-select: none;
  transition: background var(--jv-motion-quick);
}
.j-expansion-item__header::-webkit-details-marker { display: none; }
.j-expansion-item__header:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-expansion-item__header:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: -2px; }
.j-expansion-item__icon { flex: 0 0 auto; font-size: 24px; line-height: 1; color: var(--jv-color-on-surface-variant); }
.j-expansion-item__label-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.j-expansion-item__label { font-size: var(--jv-type-body-medium-size); overflow: hidden; text-overflow: ellipsis; }
.j-expansion-item__caption { font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-expansion-item__arrow { flex: 0 0 auto; font-size: 24px; line-height: 1; color: var(--jv-color-on-surface-variant); transition: transform var(--jv-motion-standard); }
.j-expansion-item[open] > .j-expansion-item__header .j-expansion-item__arrow { transform: rotate(180deg); }
.j-expansion-item__content { padding: 0 var(--jv-space-md) var(--jv-space-md); }
.j-expansion-item--dense .j-expansion-item__header { min-height: 40px; padding: var(--jv-space-sm) var(--jv-space-md); }
.j-expansion-item--dense .j-expansion-item__content { padding: 0 var(--jv-space-md) var(--jv-space-sm); }

.j-expansion-panel, j-expansion-panel.j-expansion-panel { display: block; border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md); background: var(--jv-color-surface); overflow: hidden; }
.j-expansion-panel__title { display: flex; align-items: center; gap: var(--jv-space-sm); padding: var(--jv-space-md); font-weight: 500; cursor: pointer; }
.j-expansion-panel__body { padding: 0 var(--jv-space-md) var(--jv-space-md); }

/* --------------------------------------------------------------------------
   JFAB / JFabAction
   -------------------------------------------------------------------------- */
.j-fab, j-fab.j-fab { position: relative; display: inline-flex; align-items: center; z-index: 1000; }
.j-fab--fixed { position: fixed; z-index: 1100; }
.j-fab--align-left { justify-content: flex-start; }
.j-fab--align-center { justify-content: center; }
.j-fab--align-right { justify-content: flex-end; }
.j-fab__trigger {
  width: 56px; height: 56px; min-height: 56px; padding: 0; border: 0; border-radius: var(--jv-radius-lg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--jv-color-primary-container); color: var(--jv-color-on-primary-container);
  box-shadow: var(--jv-elevation-2);
  transition: box-shadow var(--jv-motion-standard), background var(--jv-motion-quick);
}
.j-fab__trigger:hover { box-shadow: var(--jv-elevation-3); }
.j-fab__trigger:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-fab--mini .j-fab__trigger, .j-fab__trigger.j-fab--mini { width: 40px; height: 40px; min-height: 40px; border-radius: var(--jv-radius-md); }
.j-fab--primary { background: var(--jv-color-primary-container); color: var(--jv-color-on-primary-container); }
.j-fab--secondary { background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }
.j-fab--tertiary { background: var(--jv-color-tertiary); color: var(--jv-color-on-tertiary); }
.j-fab--surface { background: var(--jv-color-surface-container-high); color: var(--jv-color-primary); }
.j-fab__icon-holder { position: relative; width: 24px; height: 24px; flex: 0 0 auto; }
.j-fab__icon, .j-fab__active-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; transition: opacity var(--jv-motion-quick), transform var(--jv-motion-quick); }
.j-fab__active-icon { opacity: 0; transform: rotate(-45deg); }
.j-fab[data-open="true"] .j-fab__icon { opacity: 0; transform: rotate(45deg); }
.j-fab[data-open="true"] .j-fab__active-icon { opacity: 1; transform: rotate(0deg); }
.j-fab__label { margin-inline-start: var(--jv-space-sm); font-size: var(--jv-type-label-large-size); font-weight: 500; }
.j-fab__trigger:has(.j-fab__label) { width: auto; padding: 0 var(--jv-space-md); }
.j-fab__actions { position: absolute; display: flex; gap: var(--jv-space-sm); align-items: center; transition: opacity var(--jv-motion-standard), transform var(--jv-motion-standard); }
.j-fab__actions--up { flex-direction: column-reverse; bottom: calc(100% + var(--jv-space-sm)); left: 50%; transform: translateX(-50%); }
.j-fab__actions--down { flex-direction: column; top: calc(100% + var(--jv-space-sm)); left: 50%; transform: translateX(-50%); }
.j-fab__actions--left { flex-direction: row-reverse; right: calc(100% + var(--jv-space-sm)); top: 50%; transform: translateY(-50%); }
.j-fab__actions--right { flex-direction: row; left: calc(100% + var(--jv-space-sm)); top: 50%; transform: translateY(-50%); }
.j-fab__actions--closed { opacity: 0; pointer-events: none; }
.j-fab-action, j-fab-action.j-fab-action {
  width: 40px; height: 40px; border: 0; border-radius: var(--jv-radius-md); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jv-color-surface-container-high); color: var(--jv-color-on-surface);
  box-shadow: var(--jv-elevation-1); transition: box-shadow var(--jv-motion-quick);
}
.j-fab-action:hover { box-shadow: var(--jv-elevation-2); }
.j-fab-action__label { margin-inline-start: var(--jv-space-sm); font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   JField internals (JInput / JTextarea / JSelect wrappers)
   -------------------------------------------------------------------------- */
.j-field__control { display: flex; align-items: center; gap: var(--jv-space-sm); min-width: 0; width: 100%; }
.j-field__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--jv-space-sm); min-height: 20px; font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-field--error { color: var(--jv-color-error); }
.j-field--error :is(.j-input, .j-textarea, .j-select__native):focus { outline-color: var(--jv-color-error); }
.j-field--error.j-field--underline :is(.j-input, .j-textarea, .j-select__native):focus { border-bottom-color: var(--jv-color-error); box-shadow: 0 1px 0 var(--jv-color-error); }
.j-field--error .j-input, .j-field--error .j-textarea, .j-field--error .j-select__native { border-color: var(--jv-color-error); }
/* Required indicators are rendered once by the component/runtime as .j-field__required. */
.j-field--readonly .j-input, .j-field--readonly .j-textarea { background: var(--jv-color-surface-container); cursor: default; }

/* Material text fields use one frame for the label, native control and state
   border. CSS follows native focus/value/autofill, including programmatic model
   updates, so a second JavaScript value state cannot drift from the input. */
.j-field.j-field--floating { --jv-field-height: 56px; --jv-field-border: 1px; --jv-field-inset: 0px; --jv-field-accent: var(--jv-color-primary); display: grid; align-items: stretch; gap: 4px; min-width: 0; color: var(--jv-color-on-surface); }
.j-field--floating > .j-field__control { box-sizing: border-box; position: relative; display: block; min-height: var(--jv-field-height); margin: 0; border: 0; border-bottom: 1px solid var(--jv-color-outline); border-radius: 0; background: transparent; color: inherit; cursor: text; transition: border-color 150ms, background-color 150ms, box-shadow 150ms; }
.j-field--floating > .j-field__control::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; border-bottom: 2px solid var(--jv-field-accent); transform: scaleX(0); transition: transform 150ms; pointer-events: none; }
.j-field--floating:not(.j-field--disabled):not(.j-field--error):not(:has(:disabled)) > .j-field__control:hover:not(:focus-within) { border-color: var(--jv-color-on-surface); }
.j-field--floating > .j-field__control:focus-within::after { transform: scaleX(1); }
.j-field.j-field--floating .j-field__control > :is(.j-input, .j-textarea) { box-sizing: border-box; display: block; width: 100%; min-width: 0; height: calc(var(--jv-field-height) - var(--jv-field-border)); min-height: 0; margin: 0; padding: 12px var(--jv-field-inset); border: 0; border-radius: inherit; outline: none; box-shadow: none; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 24px; }
.j-field.j-field--floating.j-field--labelled .j-field__control > :is(.j-input, .j-textarea) { padding-top: 20px; padding-bottom: 8px; }
.j-field--floating .j-field__control > .j-field__label { position: absolute; inset-inline: var(--jv-field-inset); top: 18px; max-width: calc(100% - 2 * var(--jv-field-inset)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 20px; color: var(--jv-color-on-surface-muted); pointer-events: none; transition: top 150ms, font-size 150ms, line-height 150ms, color 150ms; }
.j-field--floating .j-field__control:focus-within > .j-field__label,
.j-field--floating .j-field__control > :is(.j-input, .j-textarea):not(:placeholder-shown) ~ .j-field__label,
.j-field--floating.j-field--stack-label .j-field__label,
.j-field--floating .j-field__control > input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], [type="color"], [type="file"]) ~ .j-field__label { top: 6px; font-size: 12px; line-height: 16px; }
.j-field--floating .j-field__control:focus-within > .j-field__label { color: var(--jv-field-accent); }
.j-field--floating.j-field--labelled:not(.j-field--stack-label) .j-field__control:not(:focus-within) > :is(.j-input, .j-textarea):placeholder-shown::placeholder { color: transparent; }
.j-field--floating .j-field__control > :is(.j-input, .j-textarea)::placeholder { color: var(--jv-color-on-surface-muted); opacity: 1; }
.j-field--floating > :is(.j-field__hint, .j-field__error) { padding-inline: var(--jv-field-inset); font-size: 12px; line-height: 20px; }
.j-field.j-field--floating.j-field--dense { --jv-field-height: 40px; }
.j-field.j-field--floating.j-field--dense .j-field__control > :is(.j-input, .j-textarea) { padding-block: 6px; }
.j-field.j-field--floating.j-field--dense.j-field--labelled .j-field__control > :is(.j-input, .j-textarea) { padding-top: 14px; padding-bottom: 0; }
.j-field--floating.j-field--dense .j-field__label { top: 10px; }
.j-field--floating.j-field--dense .j-field__control:focus-within > .j-field__label,
.j-field--floating.j-field--dense .j-field__control > :is(.j-input, .j-textarea):not(:placeholder-shown) ~ .j-field__label,
.j-field--floating.j-field--dense.j-field--stack-label .j-field__label,
.j-field--floating.j-field--dense .j-field__control > input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], [type="color"], [type="file"]) ~ .j-field__label { top: 2px; }
.j-field.j-field--floating:is(.j-field--filled, .j-field--outlined, .j-field--outline, .j-field--standout) { --jv-field-inset: 12px; }
.j-field--floating:is(.j-field--filled, .j-field--standout) > .j-field__control { border-color: transparent; border-radius: var(--jv-radius-xs, 4px) var(--jv-radius-xs, 4px) 0 0; background: color-mix(in srgb, var(--jv-color-on-surface) 6%, transparent); }
.j-field--floating:is(.j-field--filled, .j-field--standout):not(.j-field--disabled):not(:has(:disabled)) > .j-field__control:hover:not(:focus-within) { background: color-mix(in srgb, var(--jv-color-on-surface) 10%, transparent); }
.j-field--floating:is(.j-field--outlined, .j-field--outline) > .j-field__control { --jv-field-border: 2px; border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-xs, 4px); }
.j-field--floating:is(.j-field--outlined, .j-field--outline) > .j-field__control:focus-within { border-color: var(--jv-field-accent); box-shadow: inset 0 0 0 1px var(--jv-field-accent); }
.j-field--floating:is(.j-field--outlined, .j-field--outline, .j-field--standout, .j-field--borderless) > .j-field__control::after { display: none; }
.j-field--floating.j-field--standout > .j-field__control { --jv-field-border: 0px; border: 0; border-radius: var(--jv-radius-xs, 4px); }
.j-field.j-field--floating.j-field--standout > .j-field__control:focus-within { background: var(--jv-field-standout-background, var(--jv-color-on-surface)); color: var(--jv-field-standout-color, var(--jv-color-surface)); box-shadow: var(--jv-elevation-2); }
.j-field--floating.j-field--standout .j-field__control:focus-within > .j-field__label,
.j-field--floating.j-field--standout .j-field__control:focus-within > :is(.j-input, .j-textarea)::placeholder { color: inherit; }
.j-field--floating.j-field--borderless > .j-field__control { --jv-field-border: 0px; border: 0; background: transparent; }
.j-field--floating.j-field--rounded:is(.j-field--filled, .j-field--outlined, .j-field--outline, .j-field--standout) > .j-field__control { border-radius: 28px; }
.j-field--floating.j-field--rounded.j-field--filled > .j-field__control { border-end-start-radius: 0; border-end-end-radius: 0; }
.j-field--floating.j-field--square > .j-field__control { border-radius: 0; }
.j-field--floating.j-field--readonly:not(.j-field--borderless):not(.j-field--standout) > .j-field__control { border-style: dashed; }
.j-field.j-field--floating.j-field--error { --jv-field-accent: var(--jv-color-error); }
.j-field.j-field--floating.j-field--error > .j-field__control { border-color: var(--jv-color-error); }
.j-field--floating.j-field--error .j-field__label { color: var(--jv-color-error); }
.j-field--floating.j-field--disabled .j-field__control,
.j-field.j-field--floating .j-field__control > :disabled { cursor: not-allowed; }
.j-field.j-field--floating .j-field__control > .j-textarea { height: auto; min-height: 96px; resize: vertical; }
.j-field.j-field--floating.j-field--dense .j-field__control > .j-textarea { min-height: 72px; }
@media (prefers-reduced-motion: reduce) {
  .j-field--floating > .j-field__control, .j-field--floating > .j-field__control::after, .j-field--floating .j-field__label { transition: none; }
}

/* --------------------------------------------------------------------------
   JForm / JJsonForm
   -------------------------------------------------------------------------- */
.j-form, j-form.j-form { display: flex; flex-direction: column; gap: var(--jv-space-md); min-width: 0; }
.j-json-form, j-json-form.j-json-form { display: flex; flex-direction: column; gap: var(--jv-space-md); min-width: 0; }

/* --------------------------------------------------------------------------
   JHeader / JFooter modifiers
   -------------------------------------------------------------------------- */
.j-header--elevated { box-shadow: var(--jv-elevation-2); }
.j-footer--elevated { box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.14); }
.j-header--bordered { border-bottom: 1px solid var(--jv-color-outline); }
.j-footer--bordered { border-top: 1px solid var(--jv-color-outline); }
.j-header--reveal, .j-footer--reveal { transition: transform var(--jv-motion-standard); will-change: transform; }
.j-header--hidden { transform: translateY(-100%); }
.j-footer--hidden { transform: translateY(100%); }

/* --------------------------------------------------------------------------
   JImg / JVideo / JParallax / JLazy
   -------------------------------------------------------------------------- */
.j-img-wrap { position: relative; display: block; overflow: hidden; background: var(--jv-color-surface-container); }
.j-img, j-img.j-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.j-video, j-video.j-video { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--jv-radius-md); background: #000; }
.j-video__inner { display: block; width: 100%; height: 100%; }
.j-parallax, j-parallax.j-parallax { position: relative; display: block; overflow: hidden; min-height: 240px; }
.j-parallax__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; z-index: 0; }
.j-parallax__content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.j-lazy, j-lazy.j-lazy { display: block; min-width: 0; }
.j-lazy__placeholder { display: block; background: var(--jv-color-surface-container); border-radius: var(--jv-radius-sm); min-height: 24px; }
.j-lazy__content { display: contents; }

/* --------------------------------------------------------------------------
   JInfiniteScroll / JVirtualScroll / JScrollArea / JResizeObserver
   -------------------------------------------------------------------------- */
.j-infinite-scroll, j-infinite-scroll.j-infinite-scroll { display: block; overflow-y: auto; min-height: 0; }
.j-infinite-scroll--horizontal { overflow-x: auto; overflow-y: hidden; display: flex; }
.j-infinite-scroll__sentinel { flex: 0 0 auto; width: 100%; height: 1px; }
.j-virtual-scroll, j-virtual-scroll.j-virtual-scroll { display: block; overflow-y: auto; min-height: 0; position: relative; }
.j-virtual-scroll--horizontal { overflow-x: auto; overflow-y: hidden; }
.j-virtual-scroll__item { min-width: 0; }

.j-scroll-area, j-scroll-area.j-scroll-area { position: relative; overflow: hidden; display: block; min-height: 0; }
.j-scroll-area__content { overflow: auto; height: 100%; width: 100%; scrollbar-width: none; }
.j-scroll-area__content::-webkit-scrollbar { display: none; }
.j-scroll-area--horizontal .j-scroll-area__content { overflow-x: auto; overflow-y: hidden; }
.j-scroll-area__bar { position: absolute; background: transparent; opacity: 0; transition: opacity var(--jv-motion-quick); }
.j-scroll-area:hover .j-scroll-area__bar { opacity: 1; }
.j-scroll-area__bar--v { top: 0; bottom: 0; inset-inline-end: 0; width: 8px; }
.j-scroll-area__bar--h { left: 0; right: 0; bottom: 0; height: 8px; }
.j-scroll-area__thumb { position: absolute; border-radius: 999px; background: color-mix(in srgb, var(--jv-color-on-surface) 32%, transparent); }
.j-scroll-area__thumb--v { inset-inline: 1px; top: 0; min-height: 24px; }
.j-scroll-area__thumb--h { inset-block: 1px; left: 0; min-width: 24px; }
.j-scroll-area--dark { background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface); }
.j-scroll-area--dark .j-scroll-area__thumb { background: color-mix(in srgb, #fff 40%, transparent); }

.j-resize-observer, j-resize-observer.j-resize-observer,
.j-scroll-observer, j-scroll-observer.j-scroll-observer { display: block; position: absolute; inset: 0; pointer-events: none; visibility: hidden; }

/* --------------------------------------------------------------------------
   JInnerLoading
   -------------------------------------------------------------------------- */
.j-inner-loading, j-inner-loading.j-inner-loading {
  position: absolute; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jv-space-sm);
  background: color-mix(in srgb, var(--jv-color-surface) 72%, transparent);
  transition: opacity var(--jv-motion-quick);
}
.j-inner-loading--hidden { display: none; }
.j-inner-loading__label { font-size: var(--jv-type-body-medium-size); color: var(--jv-color-on-surface-muted); }
.j-inner-loading--primary { color: var(--jv-color-primary); }
.j-inner-loading--secondary { color: var(--jv-color-secondary); }

/* --------------------------------------------------------------------------
   JItem / JListItem / JItemSection / JItemLabel and JList modifiers
   -------------------------------------------------------------------------- */
.j-item, .j-list-item, j-item.j-item, j-list-item.j-list-item {
  display: flex; align-items: center; gap: var(--jv-space-md);
  min-height: 48px; padding: var(--jv-space-sm) var(--jv-space-md);
  color: inherit; text-decoration: none; min-width: 0;
  transition: background var(--jv-motion-quick);
}
.j-item-type { position: relative; }
.j-item--clickable { cursor: pointer; }
.j-item--clickable:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-item--clickable:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: -2px; }
.j-item--active { background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }
.j-item--dense { min-height: 40px; padding: var(--jv-space-xs) var(--jv-space-md); }
.j-item--dark { background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface); }

.j-item__section { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.j-item__section--main { flex: 1 1 auto; min-width: 0; }
.j-item__section--side { flex: 0 0 auto; color: var(--jv-color-on-surface-variant); }
.j-item__section--top { align-self: flex-start; }
.j-item__section--avatar { flex: 0 0 auto; min-width: 40px; }
.j-item__section--thumbnail { flex: 0 0 auto; min-width: 56px; }
.j-item__section--nowrap { flex-wrap: nowrap; white-space: nowrap; }

.j-item-label, .j-item__label, j-item-label.j-item-label {
  display: block; min-width: 0;
  font-size: var(--jv-type-body-medium-size); line-height: var(--jv-type-body-medium-line-height);
}
.j-item__label--caption { font-size: 0.75rem; line-height: 1.4; color: var(--jv-color-on-surface-muted); }
.j-item__label--overline { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jv-color-on-surface-muted); }
.j-item__label--header { font-size: var(--jv-type-title-medium-size); font-weight: 500; color: var(--jv-color-on-surface-variant); padding: var(--jv-space-sm) 0; }

.j-list--bordered { border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md); }
.j-list--dense .j-item, .j-list--dense .j-list-item { min-height: 40px; padding: var(--jv-space-xs) var(--jv-space-md); }
.j-list--padding { padding: var(--jv-space-sm) 0; }
.j-list--separator > * + * { border-top: 1px solid var(--jv-color-outline); }
.j-list--dark { background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface); }

/* --------------------------------------------------------------------------
   JMenu items
   -------------------------------------------------------------------------- */
.j-menu-item, .j-menu__item, j-menu-item.j-menu-item {
  display: flex; align-items: center; gap: var(--jv-space-sm);
  min-height: 40px; padding: var(--jv-space-xs) var(--jv-space-md);
  border-radius: var(--jv-radius-sm); cursor: pointer; color: inherit; text-decoration: none;
  min-width: 0; transition: background var(--jv-motion-quick);
}
.j-menu-item:hover, .j-menu__item:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-menu-item:focus-visible, .j-menu__item:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: -2px; }
.j-menu-item__icon, .j-menu__icon { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--jv-color-on-surface-variant); }
.j-menu-item__label, .j-menu__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-menu__shortcut { flex: 0 0 auto; font-size: 0.6875rem; color: var(--jv-color-on-surface-muted); font-family: var(--jv-font-mono, monospace); }
.j-menu__action { flex: 0 0 auto; display: inline-flex; align-items: center; }
.j-menu__divider { height: 1px; margin: var(--jv-space-xs) 0; background: var(--jv-color-outline); border: 0; }
.j-menu__item--danger { color: var(--jv-color-error); }
.j-menu__item--danger .j-menu-item__icon, .j-menu__item--danger .j-menu__icon { color: var(--jv-color-error); }

/* --------------------------------------------------------------------------
   JMarkupTable
   -------------------------------------------------------------------------- */
.j-markup-table, j-markup-table.j-markup-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--jv-type-body-medium-size); color: var(--jv-color-on-surface);
  background: var(--jv-color-surface);
}
.j-markup-table th, .j-markup-table td { padding: var(--jv-space-sm) var(--jv-space-md); text-align: start; border-bottom: 1px solid var(--jv-color-outline); }
.j-markup-table th { font-weight: 500; color: var(--jv-color-on-surface-variant); }
.j-markup-table--dense th, .j-markup-table--dense td { padding: var(--jv-space-xs) var(--jv-space-sm); }
.j-markup-table--bordered, .j-markup-table--bordered th, .j-markup-table--bordered td { border: 1px solid var(--jv-color-outline); }
.j-markup-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--jv-color-on-surface) 4%, transparent); }

/* --------------------------------------------------------------------------
   JMap
   -------------------------------------------------------------------------- */
.j-map, j-map.j-map { position: relative; display: block; min-height: 240px; border-radius: var(--jv-radius-md); overflow: hidden; background: var(--jv-color-surface-container); }
.j-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-map__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jv-space-xs); padding: var(--jv-space-md); text-align: center; background: var(--jv-color-surface-container); }
.j-map__fallback-title { font-size: var(--jv-type-title-medium-size); font-weight: 500; color: var(--jv-color-on-surface); }
.j-map__fallback-reason { font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }

/* --------------------------------------------------------------------------
   JNotify
   -------------------------------------------------------------------------- */
.j-notify, j-notify.j-notify {
  display: flex; align-items: center; gap: var(--jv-space-sm);
  padding: var(--jv-space-sm) var(--jv-space-md); border-radius: var(--jv-radius-sm);
  background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface);
  box-shadow: var(--jv-elevation-2); min-width: 0;
}
.j-notify__icon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.j-notify__message { flex: 1 1 auto; min-width: 0; font-size: var(--jv-type-body-medium-size); }
.j-notify--info { background: var(--jv-color-info); color: var(--jv-color-on-info); }
.j-notify--positive, .j-notify--success { background: var(--jv-color-positive); color: var(--jv-color-on-positive); }
.j-notify--warning { background: var(--jv-color-warning); color: var(--jv-color-on-warning); }
.j-notify--negative, .j-notify--error { background: var(--jv-color-error); color: var(--jv-color-on-error); }
.j-notify--primary { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }

/* --------------------------------------------------------------------------
   JOptionGroup / JRadio
   -------------------------------------------------------------------------- */
.j-option-group, j-option-group.j-option-group { display: flex; flex-direction: column; gap: var(--jv-space-xs); border: 0; margin: 0; padding: 0; min-width: 0; }
.j-option-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--jv-space-md); }
.j-option-group__item { display: inline-flex; align-items: center; gap: var(--jv-space-sm); cursor: pointer; min-width: 0; }
.j-option-group__item input { accent-color: var(--jv-color-primary); width: 18px; height: 18px; cursor: pointer; }
.j-option-group__label { min-width: 0; font-size: var(--jv-type-body-medium-size); }

.j-radio, j-radio.j-radio { display: inline-flex; align-items: center; gap: var(--jv-space-sm); cursor: pointer; min-width: 0; }
.j-radio__input {
  appearance: none; width: 20px; height: 20px; flex: 0 0 auto; margin: 0; cursor: pointer;
  border: 2px solid var(--jv-color-outline); border-radius: 50%;
  display: inline-grid; place-content: center;
  transition: border-color var(--jv-motion-quick), box-shadow var(--jv-motion-quick);
}
.j-radio__input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--jv-color-primary); transform: scale(0); transition: transform var(--jv-motion-quick); }
.j-radio__input:checked { border-color: var(--jv-color-primary); }
.j-radio__input:checked::before { transform: scale(1); }
.j-radio__input:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--jv-color-primary) calc(var(--jv-state-focus) * 100%), transparent); }
.j-radio__input:disabled { opacity: var(--jv-state-disabled-content); cursor: not-allowed; }
.j-radio__label { min-width: 0; font-size: var(--jv-type-body-medium-size); }

/* --------------------------------------------------------------------------
   JPagination
   -------------------------------------------------------------------------- */
.j-pagination, j-pagination.j-pagination { display: block; min-width: 0; }
.j-pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jv-space-xs); margin: 0; padding: 0; list-style: none; }
.j-pagination__btn {
  appearance: none; cursor: pointer; min-width: 36px; height: 36px; padding: 0 var(--jv-space-xs);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--jv-color-on-surface);
  font: inherit; transition: background var(--jv-motion-quick), color var(--jv-motion-quick);
}
.j-pagination__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-pagination__btn:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-pagination__btn:disabled { opacity: var(--jv-state-disabled-content); cursor: not-allowed; }
.j-pagination__btn--active { background: var(--jv-color-primary); color: var(--jv-color-on-primary); font-weight: 500; }
.j-pagination__btn--active:hover { background: var(--jv-color-primary); }
.j-pagination__prev, .j-pagination__next { display: inline-flex; }
.j-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--jv-color-on-surface-muted); user-select: none; }

/* --------------------------------------------------------------------------
   JPopupEdit
   -------------------------------------------------------------------------- */
.j-popup-edit, j-popup-edit.j-popup-edit { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.j-popup-edit__value { cursor: pointer; border-bottom: 1px dashed var(--jv-color-outline); min-width: 0; }
.j-popup-edit__value:hover { border-bottom-color: var(--jv-color-primary); }
.j-popup-edit__popup {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 1250;
  display: flex; flex-direction: column; gap: var(--jv-space-sm);
  min-width: 220px; padding: var(--jv-space-md);
  background: var(--jv-color-surface-container-low); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md);
  box-shadow: var(--jv-elevation-3);
}
.j-popup-edit__popup[hidden] { display: none; }
.j-popup-edit__label { font-size: var(--jv-type-label-large-size); color: var(--jv-color-on-surface-variant); }
.j-popup-edit__input { min-height: 40px; padding: 0 var(--jv-space-sm); font: inherit; color: inherit; background: var(--jv-color-surface); border: 1px solid var(--jv-color-outline); border-radius: var(--jv-shape-radius); }
.j-popup-edit__input:focus-visible { outline: none; border-color: var(--jv-color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jv-color-primary) 24%, transparent); }
.j-popup-edit__actions { display: flex; justify-content: flex-end; gap: var(--jv-space-sm); }

/* --------------------------------------------------------------------------
   JProgress
   -------------------------------------------------------------------------- */
.j-progress, j-progress.j-progress {
  display: block; width: 100%; height: 4px; overflow: hidden;
  border-radius: 999px; background: color-mix(in srgb, var(--jv-color-primary) 20%, transparent);
  color: var(--jv-color-primary);
}
.j-progress__fill { height: 100%; background: currentColor; border-radius: inherit; transition: width var(--jv-motion-standard); }
.j-progress__fill--striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.22) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
  animation: jv-progress-stripes 1s linear infinite;
}
.j-progress--indeterminate { position: relative; }
/* JProgress renders no __fill child when indeterminate, so the moving bar is
   drawn by the pseudo-element. */
.j-progress--indeterminate::after {
  content: ""; position: absolute; inset-inline-start: -40%; inset-block: 0; width: 40%;
  background: currentColor; border-radius: inherit;
  animation: jv-progress-indeterminate 1.4s ease-in-out infinite;
}
.j-progress--primary { color: var(--jv-color-primary); background: color-mix(in srgb, var(--jv-color-primary) 20%, transparent); }
.j-progress--secondary { color: var(--jv-color-secondary); background: color-mix(in srgb, var(--jv-color-secondary) 20%, transparent); }
.j-progress--tertiary { color: var(--jv-color-tertiary); background: color-mix(in srgb, var(--jv-color-tertiary) 20%, transparent); }
.j-progress--positive { color: var(--jv-color-positive); background: color-mix(in srgb, var(--jv-color-positive) 20%, transparent); }
.j-progress--negative, .j-progress--error { color: var(--jv-color-error); background: color-mix(in srgb, var(--jv-color-error) 20%, transparent); }
.j-progress--warning { color: var(--jv-color-warning); background: color-mix(in srgb, var(--jv-color-warning) 20%, transparent); }
@keyframes jv-progress-stripes { to { background-position: 16px 0; } }
@keyframes jv-progress-indeterminate {
  0% { inset-inline-start: -40%; }
  100% { inset-inline-start: 100%; }
}

/* --------------------------------------------------------------------------
   JRange / JSlider
   -------------------------------------------------------------------------- */
.j-range, j-range.j-range { display: flex; align-items: center; gap: var(--jv-space-sm); min-width: 0; }
.j-range__from, .j-range__to { flex: 1 1 0%; min-width: 0; accent-color: var(--jv-color-primary); cursor: pointer; }
.j-range--primary { accent-color: var(--jv-color-primary); }
.j-range--secondary { accent-color: var(--jv-color-secondary); }

.j-slider, j-slider.j-slider { display: flex; flex-direction: column; gap: var(--jv-space-xs); min-width: 0; }
.j-slider__label { font-size: var(--jv-type-label-large-size); color: var(--jv-color-on-surface-variant); }
.j-slider__native { width: 100%; accent-color: var(--jv-color-primary); cursor: pointer; height: 20px; }
.j-slider__native:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 4px; }
.j-slider__native:disabled { opacity: var(--jv-state-disabled-content); cursor: not-allowed; }
.j-slider--primary { accent-color: var(--jv-color-primary); }
.j-slider--secondary { accent-color: var(--jv-color-secondary); }

/* --------------------------------------------------------------------------
   JRating
   -------------------------------------------------------------------------- */
.j-rating, j-rating.j-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--jv-color-warning); }
.j-rating__star { font-size: 24px; line-height: 1; cursor: pointer; transition: transform var(--jv-motion-quick), color var(--jv-motion-quick); }
.j-rating__star:hover { transform: scale(1.14); }
.j-rating__star[aria-checked="false"], .j-rating__star[data-filled="false"] { color: color-mix(in srgb, var(--jv-color-on-surface) 26%, transparent); }

/* --------------------------------------------------------------------------
   JSkeleton
   -------------------------------------------------------------------------- */
.j-skeleton, j-skeleton.j-skeleton {
  display: block; background: color-mix(in srgb, var(--jv-color-on-surface) 11%, transparent);
  border-radius: var(--jv-radius-xs); min-height: 1em;
}
.j-skeleton--text { height: 1em; border-radius: var(--jv-radius-xs); }
.j-skeleton--rect { border-radius: var(--jv-radius-sm); }
.j-skeleton--circle { border-radius: 50%; }
.j-skeleton--animated {
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--jv-color-on-surface) 8%, transparent), transparent);
  background-size: 200% 100%;
  animation: jv-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes jv-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   JSlideItem
   -------------------------------------------------------------------------- */
.j-slide-item, j-slide-item.j-slide-item { position: relative; display: block; overflow: hidden; touch-action: pan-y; }
.j-slide-item__content { position: relative; z-index: 1; background: var(--jv-color-surface); transition: transform var(--jv-motion-standard); }
.j-slide-item__action { position: absolute; top: 0; bottom: 0; z-index: 0; display: flex; align-items: center; justify-content: center; width: 72px; color: #fff; }
.j-slide-item__action--left { inset-inline-start: 0; background: var(--jv-color-positive); }
.j-slide-item__action--right { inset-inline-end: 0; background: var(--jv-color-error); }

/* --------------------------------------------------------------------------
   JSnackbar internals
   -------------------------------------------------------------------------- */
.j-snackbar__message { flex: 1 1 auto; min-width: 0; font-size: var(--jv-type-body-medium-size); }
.j-snackbar__action { flex: 0 0 auto; appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 500; color: var(--jv-color-primary); border-radius: var(--jv-radius-xs); padding: var(--jv-space-xs) var(--jv-space-sm); }
.j-snackbar__action:hover { background: color-mix(in srgb, currentColor calc(var(--jv-state-hover) * 100%), transparent); }
.j-snackbar__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   JSeparator modifiers
   -------------------------------------------------------------------------- */
.j-separator--horizontal { width: 100%; height: 1px; border: 0; margin: 0; background: var(--jv-color-outline); }
.j-separator--vertical { width: 1px; align-self: stretch; min-height: 1em; border: 0; margin: 0; background: var(--jv-color-outline); }
.j-separator--inset { margin-inline: var(--jv-space-md); }
.j-separator--primary { background: var(--jv-color-primary); }
.j-separator--secondary { background: var(--jv-color-secondary); }
.j-separator--negative, .j-separator--error { background: var(--jv-color-error); }

/* --------------------------------------------------------------------------
   JToolbar / JPullToRefresh / JAjaxBar / JTooltip / JCalendarEvent / JFlow
   -------------------------------------------------------------------------- */
.j-toolbar--inset { padding-inline-start: 56px; }
.j-pull-to-refresh__indicator { display: flex; align-items: center; justify-content: center; height: 48px; color: var(--jv-color-primary); transition: opacity var(--jv-motion-quick); }

.j-ajax-bar, j-ajax-bar.j-ajax-bar { position: fixed; z-index: 1400; pointer-events: none; overflow: hidden; }
.j-ajax-bar--top { top: 0; left: 0; right: 0; }
.j-ajax-bar--bottom { bottom: 0; left: 0; right: 0; }
.j-ajax-bar--left { top: 0; bottom: 0; left: 0; }
.j-ajax-bar--right { top: 0; bottom: 0; right: 0; }
.j-ajax-bar__fill { width: 0; height: 100%; background: var(--jv-color-primary); transition: width var(--jv-motion-standard); }
.j-ajax-bar--left .j-ajax-bar__fill, .j-ajax-bar--right .j-ajax-bar__fill { width: 100%; height: 0; transition: height var(--jv-motion-standard); }
.j-ajax-bar--primary .j-ajax-bar__fill { background: var(--jv-color-primary); }
.j-ajax-bar--secondary .j-ajax-bar__fill { background: var(--jv-color-secondary); }
.j-ajax-bar--positive .j-ajax-bar__fill { background: var(--jv-color-positive); }
.j-ajax-bar--negative .j-ajax-bar__fill, .j-ajax-bar--error .j-ajax-bar__fill { background: var(--jv-color-error); }

.j-tooltip, j-tooltip.j-tooltip {
  position: absolute; z-index: 1500; pointer-events: none;
  padding: var(--jv-space-xs) var(--jv-space-sm); max-width: 240px;
  border-radius: var(--jv-radius-xs);
  background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface);
  font-size: 0.75rem; line-height: 1.4; box-shadow: var(--jv-elevation-2);
  opacity: 0; transition: opacity var(--jv-motion-quick);
}
.j-tooltip[data-open="true"], .j-tooltip:not([hidden]):hover, [data-jv-tooltip-open] > .j-tooltip { opacity: 1; }
.j-tooltip--top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.j-tooltip--bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.j-tooltip--left { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.j-tooltip--right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }

.j-calendar-event--timed { border-inline-start: 3px solid var(--jv-color-primary); }
.j-calendar-event--all-day { background: var(--jv-color-primary); color: var(--jv-color-on-primary); border-radius: var(--jv-radius-xs); }
.j-calendar-event--disabled { opacity: var(--jv-state-disabled-content); pointer-events: none; }
.j-flow-edge--selected { stroke: var(--jv-color-primary); stroke-width: 3; }
.j-flow-marker-arrow { fill: var(--jv-color-outline); }

/* --------------------------------------------------------------------------
   JSpinner — shared frame + 22 variants
   -------------------------------------------------------------------------- */
.j-spinner, j-spinner.j-spinner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  color: var(--jv-color-primary); vertical-align: middle;
}
.j-spinner svg { display: block; width: 100%; height: 100%; }
.j-spinner__track { fill: none; stroke: color-mix(in srgb, currentColor 20%, transparent); }
.j-spinner__path { fill: none; stroke: currentColor; stroke-linecap: round; }
.j-spinner__bar, .j-spinner__dot, .j-spinner__box, .j-spinner__ring,
.j-spinner__heart, .j-spinner__gear, .j-spinner__pie, .j-spinner__comment,
.j-spinner__infinity, .j-spinner__hourglass, .j-spinner__clock-face, .j-spinner__clock-hand { fill: currentColor; }
.j-spinner__track, .j-spinner__path, .j-spinner__clock-face { transform-origin: center; }

/* rotational family */
.j-spinner--oval .j-spinner__path,
.j-spinner--tail .j-spinner__path,
.j-spinner--rings .j-spinner__ring,
.j-spinner--puff .j-spinner__ring,
.j-spinner--orbit .j-spinner__dot,
.j-spinner--ios .j-spinner__bar,
.j-spinner--radio .j-spinner__ring,
.j-spinner--gears .j-spinner__gear,
.j-spinner--infinity .j-spinner__infinity,
.j-spinner--pie .j-spinner__pie,
.j-spinner--facebook .j-spinner__bar { transform-origin: center; }
.j-spinner--oval svg, .j-spinner--tail svg, .j-spinner--rings svg,
.j-spinner--orbit svg, .j-spinner--radio svg, .j-spinner--pie svg,
.j-spinner--infinity svg { animation: jv-spinner-rotate 1s linear infinite; }
.j-spinner--ios svg { animation: jv-spinner-rotate 1s steps(8) infinite; }
.j-spinner--gears .j-spinner__gear { animation: jv-spinner-rotate 2s linear infinite; }
.j-spinner--gears .j-spinner__gear:nth-of-type(2) { animation-direction: reverse; animation-duration: 1.4s; }

/* pulse / scale family */
.j-spinner--ball .j-spinner__dot,
.j-spinner--puff .j-spinner__ring,
.j-spinner--hearts .j-spinner__heart,
.j-spinner--comment .j-spinner__comment { animation: jv-spinner-pulse 1.2s ease-in-out infinite; }
.j-spinner--puff .j-spinner__ring:nth-of-type(2) { animation-delay: -0.6s; }
.j-spinner--hearts .j-spinner__heart:nth-of-type(2) { animation-delay: -0.4s; }
.j-spinner--hearts .j-spinner__heart:nth-of-type(3) { animation-delay: -0.8s; }

/* staggered bar / dot family */
.j-spinner--bars .j-spinner__bar,
.j-spinner--audio .j-spinner__bar,
.j-spinner--facebook .j-spinner__bar { animation: jv-spinner-bar 1s ease-in-out infinite; transform-origin: center bottom; }
.j-spinner--bars .j-spinner__bar:nth-of-type(2),
.j-spinner--audio .j-spinner__bar:nth-of-type(2),
.j-spinner--facebook .j-spinner__bar:nth-of-type(2) { animation-delay: -0.8s; }
.j-spinner--bars .j-spinner__bar:nth-of-type(3),
.j-spinner--audio .j-spinner__bar:nth-of-type(3),
.j-spinner--facebook .j-spinner__bar:nth-of-type(3) { animation-delay: -0.6s; }
.j-spinner--bars .j-spinner__bar:nth-of-type(4),
.j-spinner--audio .j-spinner__bar:nth-of-type(4) { animation-delay: -0.4s; }
.j-spinner--bars .j-spinner__bar:nth-of-type(5),
.j-spinner--audio .j-spinner__bar:nth-of-type(5) { animation-delay: -0.2s; }

.j-spinner--dots .j-spinner__dot,
.j-spinner--grid .j-spinner__dot { animation: jv-spinner-fade 1.2s ease-in-out infinite; }
.j-spinner--dots .j-spinner__dot:nth-of-type(2) { animation-delay: -0.9s; }
.j-spinner--dots .j-spinner__dot:nth-of-type(3) { animation-delay: -0.6s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(2) { animation-delay: -0.1s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(3) { animation-delay: -0.2s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(4) { animation-delay: -0.3s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(5) { animation-delay: -0.4s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(6) { animation-delay: -0.5s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(7) { animation-delay: -0.6s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(8) { animation-delay: -0.7s; }
.j-spinner--grid .j-spinner__dot:nth-of-type(9) { animation-delay: -0.8s; }

/* 3d / flip family */
.j-spinner--box .j-spinner__box,
.j-spinner--cube .j-spinner__box { animation: jv-spinner-flip 1.4s ease-in-out infinite; transform-origin: center; }
.j-spinner--hourglass .j-spinner__hourglass { animation: jv-spinner-hourglass 1.6s ease-in-out infinite; transform-origin: center; }
.j-spinner--clock .j-spinner__clock-hand { animation: jv-spinner-rotate 2s steps(12) infinite; transform-origin: center; }

@keyframes jv-spinner-rotate { to { transform: rotate(360deg); } }
@keyframes jv-spinner-pulse { 0%, 100% { transform: scale(0.6); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
@keyframes jv-spinner-bar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes jv-spinner-fade { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes jv-spinner-flip { 0% { transform: rotateX(0) rotateY(0); } 50% { transform: rotateX(180deg) rotateY(0); } 100% { transform: rotateX(180deg) rotateY(180deg); } }
@keyframes jv-spinner-hourglass { 0%, 45% { transform: rotate(0); } 50%, 95% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .j-spinner svg, .j-spinner *, .j-skeleton--animated,
  .j-circular-progress--indeterminate svg, .j-circular-progress--indeterminate .j-circular-progress__arc,
  .j-progress--indeterminate::after, .j-progress__fill--striped { animation-duration: 3s !important; }
}

/* --------------------------------------------------------------------------
   JStepper / JStep / JStepperNavigation
   -------------------------------------------------------------------------- */
.j-stepper__list { display: flex; align-items: flex-start; gap: var(--jv-space-sm); margin: 0; padding: 0; list-style: none; min-width: 0; }
.j-stepper__connector { flex: 1 1 auto; height: 2px; margin-top: 15px; background: var(--jv-color-outline); border-radius: 999px; min-width: 16px; }
.j-stepper__content { padding: var(--jv-space-md) 0; min-width: 0; }
.j-stepper__nav, .j-stepper-navigation { display: flex; align-items: center; justify-content: flex-end; gap: var(--jv-space-sm); padding-top: var(--jv-space-md); }
.j-stepper--alternative .j-stepper__list { align-items: center; }
.j-stepper--alternative .j-step { flex-direction: column; text-align: center; gap: var(--jv-space-xs); }

.j-step, j-step.j-step { display: flex; align-items: flex-start; gap: var(--jv-space-sm); min-width: 0; }
.j-step__dot {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jv-color-surface-container-highest); color: var(--jv-color-on-surface-variant);
  font-size: 18px; line-height: 1; font-weight: 500;
  transition: background var(--jv-motion-quick), color var(--jv-motion-quick);
}
.j-step__labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.j-step__title { font-size: var(--jv-type-body-medium-size); font-weight: 500; color: var(--jv-color-on-surface); }
.j-step__caption { font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-step--active .j-step__dot { background: var(--jv-color-primary); color: var(--jv-color-on-primary); }
.j-step--active .j-step__title { color: var(--jv-color-primary); }
.j-step--done .j-step__dot { background: var(--jv-color-primary-container); color: var(--jv-color-on-primary-container); }
.j-step--error .j-step__dot { background: var(--jv-color-error); color: var(--jv-color-on-error); }
.j-step--error .j-step__title { color: var(--jv-color-error); }

/* --------------------------------------------------------------------------
   JTabs internals / JRouteTab / JTabPanel
   -------------------------------------------------------------------------- */
.j-tab__icon { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.j-tab__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-tab--active { color: var(--jv-color-primary); font-weight: 500; }
.j-tab--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px 999px 0 0; background: var(--jv-color-primary); }
.j-route-tab, j-route-tab.j-route-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--jv-space-sm);
  min-height: 48px; padding: 0 var(--jv-space-md); color: inherit; text-decoration: none;
  cursor: pointer; transition: color var(--jv-motion-quick), background var(--jv-motion-quick);
}
.j-route-tab:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-route-tab:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: -2px; }
.j-tab-panel--active { display: block; }

/* --------------------------------------------------------------------------
   JTable / JTr / JTd / JTh
   -------------------------------------------------------------------------- */
.j-table-wrap { position: relative; width: 100%; overflow-x: auto; border-radius: var(--jv-radius-md); }
.j-table__loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--jv-color-surface) 66%, transparent); }
.j-table--dense th, .j-table--dense td, .j-table--dense .j-th, .j-table--dense .j-td { padding: var(--jv-space-xs) var(--jv-space-sm); }
.j-table--bordered, .j-table--bordered th, .j-table--bordered td { border: 1px solid var(--jv-color-outline); }
.j-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--jv-color-on-surface) 4%, transparent); }
.j-table--col-auto-width { width: 1%; white-space: nowrap; }
.j-table__th--sortable { cursor: pointer; user-select: none; }
.j-table__th--sortable:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }

.j-tr, j-tr.j-tr { transition: background var(--jv-motion-quick); }
.j-tr:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-tr--no-hover:hover { background: transparent; }
.j-tr--header { background: var(--jv-color-surface-container-low); }
.j-tr--header:hover { background: var(--jv-color-surface-container-low); }
.j-tr--selected { background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container); }

.j-td, j-td.j-td { padding: var(--jv-space-sm) var(--jv-space-md); text-align: start; border-bottom: 1px solid var(--jv-color-outline); vertical-align: middle; }
.j-td--no-hover { background: transparent; }
.j-th, j-th.j-th {
  padding: var(--jv-space-sm) var(--jv-space-md); text-align: start;
  border-bottom: 1px solid var(--jv-color-outline);
  font-weight: 500; color: var(--jv-color-on-surface-variant); white-space: nowrap;
}
.j-th__label { display: inline-block; min-width: 0; }
.j-th__sort-icon { font-size: 16px; line-height: 1; vertical-align: middle; margin-inline-start: var(--jv-space-xs); color: var(--jv-color-primary); }

/* --------------------------------------------------------------------------
   JTimeline / JTimelineEntry
   -------------------------------------------------------------------------- */
.j-timeline, j-timeline.j-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; min-width: 0; }
.j-timeline-entry, j-timeline-entry.j-timeline-entry {
  position: relative; display: flex; gap: var(--jv-space-md);
  padding-bottom: var(--jv-space-lg); min-width: 0;
}
.j-timeline-entry::before {
  content: ""; position: absolute; inset-inline-start: 15px; top: 32px; bottom: 0;
  width: 2px; background: var(--jv-color-outline);
}
.j-timeline-entry:last-child::before { display: none; }
.j-timeline-entry__dot {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jv-color-primary-container); color: var(--jv-color-on-primary-container);
  font-size: 18px; line-height: 1;
}
.j-timeline-entry__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.j-timeline-entry__title { font-size: var(--jv-type-body-medium-size); font-weight: 500; color: var(--jv-color-on-surface); }
.j-timeline-entry__subtitle { font-size: 0.75rem; color: var(--jv-color-on-surface-muted); }
.j-timeline-entry__body { font-size: var(--jv-type-body-medium-size); line-height: var(--jv-type-body-medium-line-height); color: var(--jv-color-on-surface); }
.j-timeline--dense .j-timeline-entry { padding-bottom: var(--jv-space-md); gap: var(--jv-space-sm); }
.j-timeline--dense .j-timeline-entry__dot { width: 24px; height: 24px; font-size: 14px; }
.j-timeline--dense .j-timeline-entry::before { inset-inline-start: 11px; top: 24px; }

/* --------------------------------------------------------------------------
   JTree / JTreeNode
   -------------------------------------------------------------------------- */
.j-tree-node, j-tree-node.j-tree-node { display: block; list-style: none; min-width: 0; }
.j-tree-node__row {
  display: flex; align-items: center; gap: var(--jv-space-xs);
  min-height: 36px; padding: 0 var(--jv-space-sm); border-radius: var(--jv-radius-sm);
  cursor: pointer; min-width: 0; transition: background var(--jv-motion-quick);
}
.j-tree-node__row:hover { background: color-mix(in srgb, var(--jv-color-on-surface) calc(var(--jv-state-hover) * 100%), transparent); }
.j-tree-node__row:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: -2px; }
.j-tree-node__toggle { flex: 0 0 auto; width: 20px; font-size: 20px; line-height: 1; color: var(--jv-color-on-surface-variant); transition: transform var(--jv-motion-quick); }
.j-tree-node[aria-expanded="true"] > .j-tree-node__row > .j-tree-node__toggle, .j-tree-node--expanded > .j-tree-node__row > .j-tree-node__toggle { transform: rotate(90deg); }
.j-tree-node__spacer { flex: 0 0 auto; width: 20px; }
.j-tree-node__icon { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--jv-color-on-surface-variant); }
.j-tree-node__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--jv-type-body-medium-size); }
.j-tree-node__children { margin: 0; padding-inline-start: var(--jv-space-lg); list-style: none; position: relative; }
.j-tree-node__children::before { content: ""; position: absolute; inset-inline-start: 10px; top: 0; bottom: 0; width: 1px; background: var(--jv-color-outline); }
.j-tree--no-connectors .j-tree-node__children::before { display: none; }
.j-tree--dense .j-tree-node__row { min-height: 28px; }

/* --------------------------------------------------------------------------
   JUploader
   -------------------------------------------------------------------------- */
.j-uploader, j-uploader.j-uploader {
  display: flex; flex-direction: column; gap: var(--jv-space-sm); min-width: 0;
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md);
  background: var(--jv-color-surface); padding: var(--jv-space-md);
}
.j-uploader__zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jv-space-sm);
  padding: var(--jv-space-xl) var(--jv-space-md); text-align: center; cursor: pointer;
  border: 2px dashed var(--jv-color-outline); border-radius: var(--jv-radius-md);
  color: var(--jv-color-on-surface-muted);
  transition: border-color var(--jv-motion-quick), background var(--jv-motion-quick);
}
.j-uploader__zone:hover, .j-uploader__zone[data-dragover="true"] {
  border-color: var(--jv-color-primary);
  background: color-mix(in srgb, var(--jv-color-primary) calc(var(--jv-state-hover) * 100%), transparent);
}
.j-uploader__icon { font-size: 32px; line-height: 1; color: var(--jv-color-primary); }
.j-uploader__label { font-size: var(--jv-type-body-medium-size); }
.j-uploader__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.j-uploader__list { display: flex; flex-direction: column; gap: var(--jv-space-xs); margin: 0; padding: 0; list-style: none; }
.j-uploader__list > li { display: flex; align-items: center; gap: var(--jv-space-sm); padding: var(--jv-space-xs) var(--jv-space-sm); border-radius: var(--jv-radius-sm); background: var(--jv-color-surface-container-low); font-size: 0.875rem; }
.j-uploader-add-trigger, .j-uploader__add-trigger, j-uploader-add-trigger.j-uploader-add-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jv-space-sm);
  min-height: 40px; padding: 0 var(--jv-space-md); cursor: pointer;
  border: 0; border-radius: var(--jv-shape-radius);
  background: var(--jv-color-secondary-container); color: var(--jv-color-on-secondary-container);
  font: inherit; transition: background var(--jv-motion-quick);
}
.j-uploader__add-trigger:hover { background: color-mix(in srgb, var(--jv-color-secondary-container) 86%, var(--jv-color-on-surface)); }
.j-uploader__add-trigger:focus-visible { outline: 2px solid var(--jv-color-primary); outline-offset: 2px; }
.j-uploader__add-trigger--dense { min-height: 32px; padding: 0 var(--jv-space-sm); font-size: 0.875rem; }
.j-uploader__add-trigger--round { width: 40px; padding: 0; border-radius: 50%; }
.j-uploader__add-trigger--round.j-uploader__add-trigger--dense { width: 32px; }
.j-uploader__add-trigger-label { min-width: 0; }

/* --------------------------------------------------------------------------
   Dialog panel sizes + remaining single-purpose surfaces
   -------------------------------------------------------------------------- */
.j-dialog-panel--medium { max-width: 640px; width: 100%; }
.j-dialog-panel--wide { max-width: 960px; width: 100%; }

.j-floating-panel, j-floating-panel.j-floating-panel {
  position: fixed; z-index: 1250; min-width: 240px;
  background: var(--jv-color-surface-container-low); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-lg);
  box-shadow: var(--jv-elevation-3); overflow: hidden;
}
.j-hover-card, j-hover-card.j-hover-card {
  position: absolute; z-index: 1300; max-width: 320px; padding: var(--jv-space-md);
  background: var(--jv-color-surface-container-low); color: var(--jv-color-on-surface);
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md);
  box-shadow: var(--jv-elevation-2);
  opacity: 0; pointer-events: none; transition: opacity var(--jv-motion-quick);
}
.j-hover-card[data-open="true"] { opacity: 1; pointer-events: auto; }
.j-tour, j-tour.j-tour { position: fixed; inset: 0; z-index: 1400; pointer-events: none; }
.j-timer, j-timer.j-timer { display: inline-flex; align-items: baseline; gap: var(--jv-space-xs); font-variant-numeric: tabular-nums; font-family: var(--jv-font-mono, ui-monospace, monospace); }
.j-marquee, j-marquee.j-marquee { display: block; overflow: hidden; white-space: nowrap; }
.j-marquee > * { display: inline-block; padding-inline-end: 100%; animation: jv-marquee 18s linear infinite; }
@keyframes jv-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.j-qr-code, j-qr-code.j-qr-code { display: inline-block; line-height: 0; background: #fff; padding: var(--jv-space-sm); border-radius: var(--jv-radius-sm); }
.j-qr-code svg, .j-qr-code img, .j-qr-code canvas { display: block; width: 100%; height: auto; }
.j-signature-pad, j-signature-pad.j-signature-pad { display: block; border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-md); background: var(--jv-color-surface); touch-action: none; }
.j-pin-input, j-pin-input.j-pin-input { display: inline-flex; align-items: center; gap: var(--jv-space-sm); }
.j-pin-input input {
  width: 44px; height: 52px; text-align: center; font-size: 1.25rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--jv-color-outline); border-radius: var(--jv-radius-sm);
  background: var(--jv-color-surface); color: inherit;
  transition: border-color var(--jv-motion-quick), box-shadow var(--jv-motion-quick);
}
.j-pin-input input:focus-visible { outline: none; border-color: var(--jv-color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jv-color-primary) 24%, transparent); }
.j-npm, j-npm.j-npm { display: contents; }

/* --------------------------------------------------------------------------
   Custom-element normalisation
   --------------------------------------------------------------------------
   Every tag in JComponentRegistry.standard() can appear literally in a .jvl
   template. An unknown element defaults to `display: inline`, which collapses
   padding, width and flex on the component it wraps. These are bare tag
   selectors (specificity 0,0,1) so any .j-* class rule above still wins.
   -------------------------------------------------------------------------- */
j-app, j-layout, j-layout-container, j-page, j-page-container, j-section,
j-header, j-footer, j-drawer, j-toolbar, j-card, j-card-section, j-card-actions,
j-list, j-item, j-list-item, j-form, j-json-form, j-field, j-banner, j-alert,
j-carousel, j-carousel-slide, j-tab-panels, j-tab-panel, j-stepper, j-tree,
j-timeline, j-uploader, j-editor, j-code-editor, j-data-grid, j-table-wrap,
j-markup-table, j-scroll-area, j-virtual-scroll, j-infinite-scroll, j-map,
j-video, j-parallax, j-lazy, j-expansion-item, j-expansion-panel, j-command-bar,
j-signature-pad, j-qr-code, j-marquee, j-img-wrap, j-flow-background,
j-flow-controls, j-flow-minimap, j-flow-panel, j-no-ssr, j-responsive,
j-slide-transition, j-slide-item, j-pull-to-refresh, j-page-scroller,
j-linear-progress, j-progress, j-ajax-bar, j-separator, j-skeleton {
  display: block;
  min-width: 0;
}

j-row { display: flex; flex-wrap: wrap; min-width: 0; }
j-col { display: block; flex: 1 1 0%; min-width: 0; }

j-button, j-icon-button, j-button-group, j-button-toggle, j-button-dropdown,
j-chip, j-badge, j-avatar, j-icon, j-spinner, j-tab, j-route-tab, j-tabs,
j-breadcrumb, j-breadcrumbs, j-toolbar-title, j-bar, j-space, j-timer,
j-pin-input, j-rating, j-knob, j-circular-progress, j-item-section,
j-item-label, j-step, j-stepper-navigation, j-fab, j-fab-action,
j-carousel-control, j-dialog-title, j-popup-edit, j-color-picker, j-file,
j-date-picker, j-time-picker, j-slider, j-range, j-radio, j-option-group {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

j-menu, j-context-menu, j-dropdown, j-snackbar, j-notify, j-tooltip,
j-hover-card, j-floating-panel, j-popup-proxy, j-tour, j-chat-message,
j-tree-node, j-timeline-entry, j-pagination, j-breadcrumb, j-npm,
j-intersection, j-resize-observer, j-scroll-observer { min-width: 0; }

j-space { flex: 1 1 auto; }
j-npm, j-intersection { display: contents; }
j-resize-observer, j-scroll-observer { display: block; position: absolute; inset: 0; visibility: hidden; pointer-events: none; }

/* Tag-only spinner variants: the j-spinner-ball tag and friends carry no class of
   their own, so they inherit the shared .j-spinner frame here. */
j-spinner, j-spinner-audio, j-spinner-ball, j-spinner-bars, j-spinner-box,
j-spinner-clock, j-spinner-comment, j-spinner-cube, j-spinner-dots,
j-spinner-facebook, j-spinner-gears, j-spinner-grid, j-spinner-hearts,
j-spinner-hourglass, j-spinner-infinity, j-spinner-ios, j-spinner-orbit,
j-spinner-oval, j-spinner-pie, j-spinner-puff, j-spinner-radio,
j-spinner-rings, j-spinner-tail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--jv-color-primary);
  vertical-align: middle;
}
j-spinner-audio svg, j-spinner-ball svg, j-spinner-bars svg, j-spinner-box svg,
j-spinner-clock svg, j-spinner-comment svg, j-spinner-cube svg,
j-spinner-dots svg, j-spinner-facebook svg, j-spinner-gears svg,
j-spinner-grid svg, j-spinner-hearts svg, j-spinner-hourglass svg,
j-spinner-infinity svg, j-spinner-ios svg, j-spinner-orbit svg,
j-spinner-oval svg, j-spinner-pie svg, j-spinner-puff svg,
j-spinner-radio svg, j-spinner-rings svg, j-spinner-tail svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tag-only structural aliases: these render no class of their own but must
   behave like the block they stand in for. */
j-card-section { padding: var(--jv-space-md); }
j-card-actions { display: flex; align-items: center; gap: var(--jv-space-sm); padding: var(--jv-space-sm) var(--jv-space-md); }
j-item-section { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
j-carousel-control { position: absolute; z-index: 3; display: inline-flex; }
j-stepper-navigation { display: flex; align-items: center; justify-content: flex-end; gap: var(--jv-space-sm); padding-top: var(--jv-space-md); }
j-toolbar-title { flex: 1 1 auto; min-width: 0; font-size: var(--jv-type-title-medium-size); font-weight: 600; }
j-dialog-title { display: block; font-size: var(--jv-type-title-medium-size); font-weight: 500; }

[hidden] { display: none !important; }
j-input { display: inline-flex; align-items: center; min-width: 0; }
j-page-sticky { position: absolute; z-index: 1000; display: flex; }