/* Vape Junction — the one stylesheet (e8ab3df, 2026-09-26T23:28:02.081Z). Generated by scripts/build-brand-css.mjs from packages/ui/src/styles (tokens, shell.css, base.css); do not edit. Applies only under . Fonts: host Inter yourself ('Inter Variable', 'Inter Fallback'). */ :root[data-vj-brand] { color-scheme: light; --vj-color-brand-teal: #058789; --vj-color-brand-teal-deep: #047577; --vj-color-text-primary: #101114; --vj-color-text-secondary: #64676D; --vj-color-text-inverse: #FFFFFF; --vj-color-surface-main: #FFFFFF; --vj-color-surface-muted: #F3F4F5; --vj-color-surface-map: #F2F3F5; --vj-color-surface-raised: #F3F4F5; --vj-color-surface-panel: #FFFFFF; --vj-color-surface-photo: #F2F3F5; --vj-color-border-divider: #E5E7EA; --vj-color-border-control: #64676D; --vj-color-action-primary: #111214; --vj-color-action-on-primary: #FFFFFF; --vj-color-accent-text: #047577; --vj-color-accent-surface: #EAF6F6; --vj-color-state-error: #B91C1C; --vj-color-state-success: #1B7F3B; --vj-color-state-warning: #8A5C17; --vj-color-map-you: #1A73E8; --vj-color-focus-ring: #058789; --vj-color-overlay: rgb(16 17 20 / 0.4); --vj-font-family: 'Inter Boot', 'Inter Variable', 'Inter Fallback', system-ui, sans-serif; --vj-font-weight-body: 400; --vj-font-weight-label: 500; --vj-font-weight-heading: 700; --vj-type-display: 2.25rem; --vj-type-display-narrow: 1.875rem; --vj-type-h1: 2rem; --vj-type-h2: 1.5rem; --vj-type-h3: 1.25rem; --vj-type-wordmark: 1.125rem; --vj-type-body: 1rem; --vj-type-small: 0.875rem; --vj-type-meta: 0.875rem; --vj-type-eyebrow: 0.75rem; --vj-type-line-height-tight: 1.1; --vj-type-line-height-snug: 1.25; --vj-type-line-height-normal: 1.45; --vj-type-tracking-eyebrow: 0.1em; --vj-type-tracking-display: -0.02em; --vj-space-unit: 0.25rem; --vj-radius-control: 0.5rem; --vj-radius-card: 0.5rem; --vj-radius-pill: 9999px; --vj-radius-large: 0.5rem; --vj-radius-dock: 9999px; --vj-radius-capsule: 9999px; --vj-border-width: 1px; --vj-border-selected: 2px; --vj-focus-width: 2px; --vj-focus-offset: 2px; --vj-icon-sm: 16px; --vj-icon-md: 20px; --vj-icon-lg: 24px; --vj-icon-stroke: 2; --vj-target-min: 2.75rem; --vj-layout-header: 3.5rem; --vj-layout-status-bar: 2.25rem; --vj-layout-bottom-nav: 4rem; --vj-layout-bottom-nav-safe: calc(var(--vj-layout-bottom-nav) + env(safe-area-inset-bottom, 0px) + var(--vj-layout-content-end-gap)); --vj-layout-rail-md: 5.5rem; --vj-layout-rail-xl: 13rem; --vj-layout-page: 80rem; --vj-layout-reading: 42rem; --vj-layout-content: 35rem; --vj-layout-wide: 45rem; --vj-layout-dialog: 35rem; --vj-layout-map-placeholder: 9rem; --vj-layout-content-end-gap: 1.5rem; --vj-layout-phone-gutter-breakpoint: 22.5rem; --vj-layout-rail-breakpoint: 90rem; --vj-layout-header-search-breakpoint: 48rem; --vj-layout-basket-breakpoint: 80rem; --vj-layout-basket: 27.5rem; --vj-layout-basket-bar: 3.5rem; --vj-layout-shelf: 68rem; --vj-layout-shelf-wide: 84rem; --vj-layout-shelf-six: 100rem; --vj-layout-map-hero: 18rem; --vj-layout-map-hero-wide: 26rem; --vj-layout-drawer: 18.75rem; --vj-layout-sheet: 46rem; --vj-layout-scheduler: 44rem; --vj-layout-search-panel: 28rem; --vj-layout-shelf-page: 100rem; --vj-layout-shelf-row: 17rem; --vj-layout-dock-control: 2.875rem; --vj-shadow-dialog: 0 8px 24px rgb(16 17 20 / 0.12); --vj-shadow-dock: 0 0 2px rgb(16 17 20 / 0.06), 0 0 14px rgb(16 17 20 / 0.16); --vj-shadow-soft: 0 1px 2px rgb(16 17 20 / 0.06); --vj-shadow-sheet: 0 -8px 24px rgb(16 17 20 / 0.12); --vj-motion-duration: 160ms; --vj-motion-easing: cubic-bezier(0.2, 0, 0, 1); --vj-motion-pulse: 1600ms; } /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { [data-vj-brand] *, [data-vj-brand] :before, [data-vj-brand] :after, [data-vj-brand] ::backdrop { --tw-border-style: solid; --tw-font-weight: initial; --tw-tracking: initial; --tw-content: ""; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; } } } @layer base { :root[data-vj-brand] { color-scheme: light dark; } :root[data-vj-brand][data-scheme="light"] { color-scheme: light; } :root[data-vj-brand][data-scheme="dark"] { color-scheme: dark; } html[data-vj-brand] { font-family: var(--vj-font-family); font-weight: var(--vj-font-weight-body); color: var(--vj-color-text-primary); background-color: var(--vj-color-surface-main); -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; overflow-wrap: break-word; } [data-vj-brand] body { min-height: 100dvh; } [data-vj-brand] button:not(:disabled), [data-vj-brand] [role="button"]:not([aria-disabled="true"]) { cursor: pointer; } [data-vj-brand] :focus-visible { outline: var(--vj-focus-width) solid var(--vj-color-focus-ring); outline-offset: var(--vj-focus-offset); } [data-vj-brand] textarea:focus-visible, [data-vj-brand] select:focus-visible, [data-vj-brand] input:not([type]):focus-visible, [data-vj-brand] input:is([type="text"], [type="email"], [type="search"], [type="tel"], [type="password"], [type="number"], [type="url"], [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus-visible { outline-offset: calc(-1 * var(--vj-focus-width)); } [data-vj-brand] dialog:focus-visible { outline: none; } [data-vj-brand] dialog::backdrop { background: var(--vj-color-overlay); } @media (prefers-reduced-motion: reduce) { [data-vj-brand] *, [data-vj-brand] :before, [data-vj-brand] :after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } } @layer components { [data-vj-brand] .vj-header { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--vj-color-border-divider); background-color: var(--vj-color-surface-panel); padding-top: env(safe-area-inset-top); } [data-vj-brand] .vj-header-row { min-height: var(--vj-layout-header); align-items: center; column-gap: calc(var(--vj-space-unit) * 2); padding-inline: min(calc(var(--vj-space-unit) * 4), 5vw); padding-block: calc(var(--vj-space-unit) * 2); flex-wrap: nowrap; margin-inline: auto; display: flex; } @media (min-width: 22.5rem) { [data-vj-brand] .vj-header-row { padding-inline: min(calc(var(--vj-space-unit) * 6), 6vw); } } @media (min-width: 48rem) { [data-vj-brand] .vj-header-row { column-gap: calc(var(--vj-space-unit) * 3); } } [data-vj-brand] .vj-wordmark { text-overflow: ellipsis; white-space: nowrap; font-size: var(--vj-type-wordmark); line-height: var(--tw-leading, var(--vj-type-line-height-snug)); --tw-font-weight: var(--vj-font-weight-heading); font-weight: var(--vj-font-weight-heading); --tw-tracking: var(--vj-type-tracking-display); letter-spacing: var(--vj-type-tracking-display); overflow: hidden; } [data-vj-brand] .vj-icon-button { width: calc(var(--vj-space-unit) * 11); height: calc(var(--vj-space-unit) * 11); border-radius: var(--vj-radius-dock); color: var(--vj-color-text-primary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } @media (hover: hover) { [data-vj-brand] .vj-icon-button:hover { background-color: var(--vj-color-surface-muted); } } [data-vj-brand] .vj-header-control { min-height: calc(var(--vj-space-unit) * 11); align-items: center; gap: calc(var(--vj-space-unit) * 2); border-radius: var(--vj-radius-control); min-width: 0; padding-inline: calc(var(--vj-space-unit) * 2); text-align: start; font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-primary); display: flex; } @media (min-width: 40rem) { [data-vj-brand] .vj-header-control { padding-inline: calc(var(--vj-space-unit) * 3); } } [data-vj-brand] .vj-strip { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--vj-color-border-divider); } [data-vj-brand] .vj-strip-link { min-height: calc(var(--vj-space-unit) * 11); align-items: center; gap: calc(var(--vj-space-unit) * 1.5); padding-inline: calc(var(--vj-space-unit) * 3); font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-secondary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); flex-shrink: 0; text-decoration-line: none; display: inline-flex; position: relative; } @media (hover: hover) { [data-vj-brand] .vj-strip-link:hover { color: var(--vj-color-text-primary); } } @media (min-width: 48rem) { [data-vj-brand] .vj-strip-link { min-height: calc(var(--vj-space-unit) * 14); padding-inline: calc(var(--vj-space-unit) * 4); } } [data-vj-brand] .vj-strip-link:after { content: var(--tw-content); content: var(--tw-content); inset-inline: calc(var(--vj-space-unit) * 3); content: var(--tw-content); content: var(--tw-content); height: calc(var(--vj-space-unit) * .5); content: var(--tw-content); border-radius: var(--vj-radius-control); content: var(--tw-content); content: var(--tw-content); --tw-content: ""; content: var(--tw-content); background-color: #0000; position: absolute; bottom: 0; } @media (min-width: 48rem) { [data-vj-brand] .vj-strip-link:after { content: var(--tw-content); inset-inline: calc(var(--vj-space-unit) * 4); } } [data-vj-brand] .vj-strip-link[aria-current] { color: var(--vj-color-text-primary); } [data-vj-brand] .vj-strip-link[aria-current]:after { content: var(--tw-content); background-color: var(--vj-color-text-primary); } [data-vj-brand] .vj-dock-control { width: var(--vj-layout-dock-control); height: var(--vj-layout-dock-control); border-radius: var(--vj-radius-dock); background-color: var(--vj-color-surface-panel); color: var(--vj-color-text-primary); --tw-shadow: var(--vj-shadow-dock); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); flex-shrink: 0; justify-content: center; align-items: center; text-decoration-line: none; display: flex; } [data-vj-brand] .vj-dock-capsule { min-height: var(--vj-layout-dock-control); justify-content: center; align-items: center; gap: calc(var(--vj-space-unit) * 2); border-radius: var(--vj-radius-dock); background-color: var(--vj-color-surface-panel); min-width: 0; font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-primary); --tw-shadow: var(--vj-shadow-dock); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); text-decoration-line: none; display: flex; } [data-vj-brand] .vj-dock-item { min-height: calc(var(--vj-space-unit) * 11); justify-content: center; align-items: center; gap: calc(var(--vj-space-unit) * .5); border-radius: var(--vj-radius-dock); width: 100%; min-width: 0; padding-inline: calc(var(--vj-space-unit) * 2); padding-block: calc(var(--vj-space-unit) * 1.5); color: var(--vj-color-text-secondary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); flex-direction: column; text-decoration-line: none; display: flex; position: relative; } @media (hover: hover) { [data-vj-brand] .vj-dock-item:hover { background-color: var(--vj-color-surface-muted); color: var(--vj-color-text-primary); } } [data-vj-brand] .vj-dock-item[aria-current] { background-color: var(--vj-color-surface-muted); color: var(--vj-color-text-primary); } [data-vj-brand] .vj-dock-label { text-overflow: ellipsis; white-space: nowrap; text-align: center; min-width: 0; font-size: var(--vj-type-eyebrow); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); overflow: hidden; } [data-vj-brand] .vj-dock-item[aria-current] .vj-dock-label { font-weight: var(--vj-font-weight-heading); } [data-vj-brand] .vj-drawer-row { min-height: calc(var(--vj-space-unit) * 12); align-items: center; gap: calc(var(--vj-space-unit) * 4); border-radius: var(--vj-radius-control); width: 100%; padding-inline: calc(var(--vj-space-unit) * 2); text-align: left; font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-primary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); text-decoration-line: none; display: flex; } @media (hover: hover) { [data-vj-brand] .vj-drawer-row:hover { background-color: var(--vj-color-surface-muted); } } [data-vj-brand] .vj-drawer-row[aria-current] { background-color: var(--vj-color-surface-muted); } [data-vj-brand] .vj-btn-secondary { border-radius: var(--vj-radius-capsule); background-color: var(--vj-color-surface-muted); color: var(--vj-color-text-primary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); } @media (hover: hover) { [data-vj-brand] .vj-btn-secondary:hover { background-color: var(--vj-color-border-divider); } } [data-vj-brand] :where(.bleed-muted, .vj-page-muted) .vj-btn-secondary { background-color: var(--vj-color-surface-panel); } @media (hover: hover) { [data-vj-brand] :where(.bleed-muted, .vj-page-muted) .vj-btn-secondary:hover { background-color: var(--vj-color-border-divider); } } [data-vj-brand] :where(.bleed-muted, .vj-page-muted) :where(.vj-card, .bg-panel, dialog) .vj-btn-secondary { background-color: var(--vj-color-surface-muted); } @media (hover: hover) { [data-vj-brand] :where(.bleed-muted, .vj-page-muted) :where(.vj-card, .bg-panel, dialog) .vj-btn-secondary:hover { background-color: var(--vj-color-border-divider); } } [data-vj-brand] .vj-segmented { gap: var(--vj-space-unit); border-radius: var(--vj-radius-capsule); background-color: var(--vj-color-surface-muted); padding: var(--vj-space-unit); display: flex; } [data-vj-brand] .vj-segment { min-height: calc(var(--vj-space-unit) * 10); border-radius: var(--vj-radius-capsule); padding-inline: calc(var(--vj-space-unit) * 4); font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-secondary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); justify-content: center; align-items: center; display: inline-flex; } @media (hover: hover) { [data-vj-brand] .vj-segment:hover { color: var(--vj-color-text-primary); } } [data-vj-brand] .vj-segment[aria-checked="true"] { background-color: var(--vj-color-surface-panel); color: var(--vj-color-text-primary); --tw-shadow: var(--vj-shadow-soft); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } [data-vj-brand] .vj-page-muted { background-color: var(--vj-color-surface-main); } @media (min-width: 48rem) { [data-vj-brand] .vj-page-muted { background-color: var(--vj-color-surface-muted); } } [data-vj-brand] .vj-card { border-radius: var(--vj-radius-card); background-color: var(--vj-color-surface-panel); } [data-vj-brand] .vj-card-quiet { border-radius: var(--vj-radius-card); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--vj-color-border-divider); background-color: var(--vj-color-surface-panel); } [data-vj-brand] .vj-toast { max-width: 35rem; align-items: center; gap: calc(var(--vj-space-unit) * 3); border-radius: var(--vj-radius-control); background-color: var(--vj-color-text-primary); padding-inline: calc(var(--vj-space-unit) * 4); padding-block: calc(var(--vj-space-unit) * 3); font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); color: var(--vj-color-text-inverse); --tw-shadow: var(--vj-shadow-dialog); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); display: flex; } [data-vj-brand] .vj-chat-bubble { border-radius: var(--vj-radius-card); max-width: 85%; padding-inline: calc(var(--vj-space-unit) * 3); padding-block: calc(var(--vj-space-unit) * 2); font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); } [data-vj-brand] .vj-chat-bubble-mine { background-color: var(--vj-color-action-primary); color: var(--vj-color-action-on-primary); } [data-vj-brand] .vj-chat-bubble-theirs { background-color: var(--vj-color-surface-muted); color: var(--vj-color-text-primary); } [data-vj-brand] .vj-chat-quick { min-height: calc(var(--vj-space-unit) * 10); padding-inline: calc(var(--vj-space-unit) * 4); font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); } [data-vj-brand] .vj-chat-input { min-height: calc(var(--vj-space-unit) * 12); resize: none; border-radius: var(--vj-radius-control); border-style: var(--tw-border-style); background-color: var(--vj-color-surface-muted); min-width: 0; padding-inline: calc(var(--vj-space-unit) * 4); padding-block: calc(var(--vj-space-unit) * 3); font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); color: var(--vj-color-text-primary); --tw-outline-style: none; border-width: 1px; border-color: #0000; outline-style: none; flex: 1; } [data-vj-brand] .vj-chat-input::placeholder { color: var(--vj-color-text-secondary); } [data-vj-brand] .vj-chat-input:focus-visible { border-color: var(--vj-color-border-control); } [data-vj-brand] .vj-chat-send { width: calc(var(--vj-space-unit) * 12); height: calc(var(--vj-space-unit) * 12); border-radius: var(--vj-radius-pill); background-color: var(--vj-color-action-primary); color: var(--vj-color-action-on-primary); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } [data-vj-brand] .vj-chat-send:disabled { opacity: .4; } [data-vj-brand] .vj-card-bleed { margin-inline: calc(min(calc(var(--vj-space-unit) * 4), 5vw) * -1); padding-inline: min(calc(var(--vj-space-unit) * 4), 5vw); border-radius: 0; } @media (min-width: 22.5rem) { [data-vj-brand] .vj-card-bleed { margin-inline: calc(min(calc(var(--vj-space-unit) * 6), 6vw) * -1); padding-inline: min(calc(var(--vj-space-unit) * 6), 6vw); } } @media (min-width: 48rem) { [data-vj-brand] .vj-card-bleed { border-radius: var(--vj-radius-card); margin-inline: 0; } } [data-vj-brand] .vj-radio { width: calc(var(--vj-space-unit) * 5); height: calc(var(--vj-space-unit) * 5); border-radius: var(--vj-radius-pill); border-style: var(--tw-border-style); border-width: 2px; border-color: var(--vj-color-border-control); background-color: var(--vj-color-surface-panel); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } [data-vj-brand] .vj-radio-on { border-color: var(--vj-color-text-primary); background-color: var(--vj-color-text-primary); } [data-vj-brand] .vj-radio-dot { width: calc(var(--vj-space-unit) * 2); height: calc(var(--vj-space-unit) * 2); border-radius: var(--vj-radius-pill); background-color: var(--vj-color-surface-panel); } [data-vj-brand] .vj-btn { justify-content: center; align-items: center; gap: calc(var(--vj-space-unit) * 2); font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); text-decoration-line: none; display: inline-flex; } [data-vj-brand] .vj-btn-primary { border-radius: var(--vj-radius-control); background-color: var(--vj-color-action-primary); color: var(--vj-color-action-on-primary); } @media (hover: hover) { [data-vj-brand] .vj-btn-primary:hover { opacity: .9; } } [data-vj-brand] .vj-btn-ghost { border-radius: var(--vj-radius-control); color: var(--vj-color-accent-text); background-color: #0000; } @media (hover: hover) { [data-vj-brand] .vj-btn-ghost:hover { background-color: var(--vj-color-surface-muted); } } [data-vj-brand] .vj-btn-inverse { border-radius: var(--vj-radius-control); background-color: var(--vj-color-surface-panel); color: var(--vj-color-accent-text); } @media (hover: hover) { [data-vj-brand] .vj-btn-inverse:hover { background-color: var(--vj-color-surface-muted); } } [data-vj-brand] .vj-btn-danger { border-radius: var(--vj-radius-control); background-color: var(--vj-color-state-error); color: var(--vj-color-action-on-primary); } @media (hover: hover) { [data-vj-brand] .vj-btn-danger:hover { opacity: .9; } } [data-vj-brand] .vj-btn:disabled, [data-vj-brand] .vj-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; } [data-vj-brand] .vj-field { border-radius: var(--vj-radius-control); border-style: var(--tw-border-style); background-color: var(--vj-color-surface-muted); width: 100%; min-width: 0; padding-inline: calc(var(--vj-space-unit) * 4); font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); color: var(--vj-color-text-primary); border-width: 1px; border-color: #0000; } [data-vj-brand] .vj-field::placeholder { color: var(--vj-color-text-secondary); } [data-vj-brand] .vj-field:focus { border-color: var(--vj-color-border-control); background-color: var(--vj-color-surface-panel); } [data-vj-brand] .vj-field:disabled { cursor: not-allowed; background-color: var(--vj-color-surface-muted); opacity: .7; } [data-vj-brand] .vj-field[aria-invalid="true"] { border-color: var(--vj-color-state-error); } [data-vj-brand] .vj-field-label { font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-primary); } [data-vj-brand] .vj-field-help { font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); color: var(--vj-color-text-secondary); } [data-vj-brand] .vj-field-error { align-items: flex-start; gap: var(--vj-space-unit); font-size: var(--vj-type-small); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); --tw-font-weight: var(--vj-font-weight-label); font-weight: var(--vj-font-weight-label); color: var(--vj-color-state-error); display: flex; } [data-vj-brand] .vj-select { justify-content: space-between; align-items: center; gap: calc(var(--vj-space-unit) * 3); border-radius: var(--vj-radius-control); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--vj-color-border-divider); background-color: var(--vj-color-surface-panel); width: 100%; min-width: 0; padding-inline: calc(var(--vj-space-unit) * 4); text-align: left; font-size: var(--vj-type-body); line-height: var(--tw-leading, var(--vj-type-line-height-normal)); color: var(--vj-color-text-primary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); display: flex; } @media (hover: hover) { [data-vj-brand] .vj-select:hover { border-color: var(--vj-color-text-secondary); } } [data-vj-brand] .vj-select:focus { border-color: var(--vj-color-border-control); --tw-outline-style: none; outline-style: none; } [data-vj-brand] .vj-select:disabled { cursor: not-allowed; opacity: .5; } [data-vj-brand] .vj-select[aria-expanded="true"] { border-color: var(--vj-color-border-control); } [data-vj-brand] .vj-tag { align-items: center; gap: var(--vj-space-unit); border-radius: var(--vj-radius-control); --tw-font-weight: var(--vj-font-weight-label); max-width: 100%; font-weight: var(--vj-font-weight-label); --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); display: inline-flex; } [data-vj-brand] .vj-tag-neutral { background-color: var(--vj-color-surface-muted); color: var(--vj-color-text-primary); } [data-vj-brand] .vj-tag-quiet { background-color: var(--vj-color-surface-muted); color: var(--vj-color-text-secondary); } [data-vj-brand] .vj-tag-accent { background-color: var(--vj-color-accent-surface); color: var(--vj-color-accent-text); } [data-vj-brand] .vj-tag-success { background-color: var(--vj-color-surface-muted); color: var(--vj-color-state-success); } [data-vj-brand] .vj-tag-warning { background-color: var(--vj-color-surface-muted); color: var(--vj-color-state-warning); } [data-vj-brand] .vj-tag-error { background-color: var(--vj-color-surface-muted); color: var(--vj-color-state-error); } [data-vj-brand] .vj-tag-critical { background-color: var(--vj-color-state-error); color: var(--vj-color-action-on-primary); } [data-vj-brand] .vj-tag-inverse { background-color: var(--vj-color-action-primary); color: var(--vj-color-action-on-primary); } [data-vj-brand] .vj-switch-track { height: calc(var(--vj-space-unit) * 7); width: calc(var(--vj-space-unit) * 12); border-radius: var(--vj-radius-pill); background-color: var(--vj-color-border-control); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); align-items: center; display: flex; position: relative; } [data-vj-brand] .vj-switch-track:is(:where(.group)[aria-checked="true"] *) { background-color: var(--vj-color-brand-teal); } [data-vj-brand] .vj-switch-thumb { width: calc(var(--vj-space-unit) * 6); height: calc(var(--vj-space-unit) * 6); --tw-translate-x: calc(var(--vj-space-unit) * .5); translate: var(--tw-translate-x) var(--tw-translate-y); border-radius: var(--vj-radius-pill); background-color: var(--vj-color-surface-main); transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); display: block; } [data-vj-brand] .vj-switch-thumb:is(:where(.group)[aria-checked="true"] *) { --tw-translate-x: calc(var(--vj-space-unit) * 5.5); translate: var(--tw-translate-x) var(--tw-translate-y); } [data-vj-brand] .vj-dialog { border-radius: var(--vj-radius-card); background-color: var(--vj-color-surface-panel); color: var(--vj-color-text-primary); --tw-shadow: var(--vj-shadow-dialog); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); padding: 0; } [data-vj-brand] .vj-status { gap: calc(var(--vj-space-unit) * 2); border-radius: var(--vj-radius-card); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--vj-color-border-divider); background-color: var(--vj-color-surface-panel); padding: calc(var(--vj-space-unit) * 4); flex-direction: column; display: flex; } [data-vj-brand] .vj-scroll-arrow { width: calc(var(--vj-space-unit) * 9); height: calc(var(--vj-space-unit) * 9); border-radius: var(--vj-radius-dock); background-color: var(--vj-color-surface-panel); color: var(--vj-color-text-primary); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--vj-motion-easing)); transition-duration: var(--tw-duration, var(--vj-motion-duration)); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } @media (hover: hover) { [data-vj-brand] .vj-scroll-arrow:hover { background-color: var(--vj-color-border-divider); } } [data-vj-brand] .vj-scroll-arrow:disabled { cursor: default; opacity: .4; } @media (hover: hover) { [data-vj-brand] .vj-scroll-arrow:disabled:hover { background-color: var(--vj-color-surface-panel); } } [data-vj-brand] .data-table { border-collapse: collapse; text-align: start; width: 100%; font-size: var(--vj-type-body); line-height: var(--vj-type-line-height-normal); color: var(--vj-color-text-primary); } [data-vj-brand] .data-table th { text-align: inherit; } [data-vj-brand] .data-table thead th { font-size: var(--vj-type-small); line-height: var(--vj-type-line-height-normal); font-weight: var(--vj-font-weight-label); color: var(--vj-color-text-secondary); border-bottom: var(--vj-border-width) solid var(--vj-color-border-divider); vertical-align: bottom; white-space: nowrap; background: none; } [data-vj-brand] .data-table tbody tr + tr, [data-vj-brand] .data-table tbody + tbody tr:first-child { border-top: var(--vj-border-width) solid var(--vj-color-border-divider); } [data-vj-brand] .data-table td { vertical-align: middle; } [data-vj-brand] .data-table-wrap { scrollbar-width: thin; border-radius: var(--vj-radius-card); border: var(--vj-border-width) solid var(--vj-color-border-divider); background: var(--vj-color-surface-panel); overflow-x: auto; } } @layer utilities; :root[data-vj-brand], :root[data-vj-brand] { } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }