create-yoya-ui 0.2.1 → 0.2.2

package/templates/admin/node_modules/@yoyaflow/yoya-ui/dist/yoya.ui.css

@@ -0,0 +1,2289 @@
+@layer yoya;
+
+body {
+  margin: 0;
+}
+
+:root {
+  color-scheme: light;
+}
+
+[data-yoya-mode='light'] {
+  color-scheme: light;
+}
+
+[data-yoya-mode='dark'] {
+  color-scheme: dark;
+}
+
+[data-yoya-mode='system'] {
+  color-scheme: light dark;
+}
+
+@property --yoya-raw-primary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #2563eb;
+}
+@property --yoya-raw-success {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #16a34a;
+}
+@property --yoya-raw-danger {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #dc2626;
+}
+@property --yoya-raw-warning {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f59e0b;
+}
+@property --yoya-raw-info {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0284c7;
+}
+
+:root,
+[data-yoya-theme] {
+  --yoya-raw-primary: #2563eb;
+  --yoya-raw-success: #16a34a;
+  --yoya-raw-danger: #dc2626;
+  --yoya-raw-warning: #f59e0b;
+  --yoya-raw-info: #0284c7;
+
+  --yoya-color-bg: light-dark(#f9f9f9, #171717);
+  --yoya-color-border: light-dark(#e5e5e5, #3c3c3c);
+  --yoya-color-border-faint: light-dark(#efefef, #2a2a2a);
+  --yoya-color-border-muted: light-dark(#b3b3b3, #5c5c5c);
+  --yoya-color-border-ring: light-dark(rgba(13, 13, 13, 0.14), rgba(255, 255, 255, 0.22));
+  --yoya-color-border-strong: light-dark(#d9d9d9, #484848);
+  --yoya-color-code-badge: light-dark(#ececec, #2e2e2e);
+  --yoya-color-code-badge-text: light-dark(#4b4b4b, #b9b9b9);
+  --yoya-color-code-bg: light-dark(#f7f7f8, #0f0f0f);
+  --yoya-color-code-border: light-dark(#ececec, #2c2c2c);
+  --yoya-color-code-header: light-dark(#fafafa, #191919);
+  --yoya-color-surface: light-dark(#ffffff, #212121);
+  --yoya-color-surface-active: light-dark(#e9e9e9, #2b2b2b);
+  --yoya-color-surface-hover: light-dark(#f3f3f3, #262626);
+  --yoya-color-surface-muted: light-dark(#f5f5f5, #1c1c1c);
+  --yoya-color-text: light-dark(#0d0d0d, #ececec);
+  --yoya-color-text-active: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary), black 20%),
+    color-mix(in srgb, var(--yoya-raw-primary), white 40%)
+  );
+  --yoya-color-text-danger: light-dark(#b91c1c, #f87171);
+  --yoya-color-text-inverse: light-dark(#ffffff, #ffffff);
+  --yoya-color-text-muted: light-dark(#8f8f8f, #8a8a8a);
+  --yoya-color-text-secondary: light-dark(#6f6f6f, #a6a6a6);
+  --yoya-color-text-strong: light-dark(#0a0a0a, #f5f5f5);
+  --yoya-color-success-text: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success), black 35%),
+    color-mix(in srgb, var(--yoya-raw-success), white 50%)
+  );
+  --yoya-color-danger-text: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger), black 35%),
+    color-mix(in srgb, var(--yoya-raw-danger), white 50%)
+  );
+  --yoya-color-warning-text: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning), black 35%),
+    color-mix(in srgb, var(--yoya-raw-warning), white 50%)
+  );
+  --yoya-color-info-text: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info), black 35%),
+    color-mix(in srgb, var(--yoya-raw-info), white 50%)
+  );
+  --yoya-color-primary: light-dark(
+    var(--yoya-raw-primary),
+    color-mix(in srgb, var(--yoya-raw-primary), white 16%)
+  );
+  --yoya-color-primary-hover: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary), black 12%),
+    color-mix(in srgb, var(--yoya-raw-primary), white 28%)
+  );
+  --yoya-color-primary-active: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary), black 22%),
+    color-mix(in srgb, var(--yoya-raw-primary), white 8%)
+  );
+  --yoya-color-primary-deep: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary), black 36%),
+    color-mix(in srgb, var(--yoya-raw-primary), black 40%)
+  );
+  --yoya-color-primary-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary) 12%, white),
+    color-mix(in srgb, var(--yoya-raw-primary) 26%, black)
+  );
+  --yoya-color-primary-active-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary) 20%, white),
+    color-mix(in srgb, var(--yoya-raw-primary) 34%, black)
+  );
+  --yoya-color-primary-border: light-dark(
+    color-mix(in srgb, var(--yoya-raw-primary) 30%, white),
+    color-mix(in srgb, var(--yoya-raw-primary) 40%, black)
+  );
+  --yoya-color-primary-ring: color-mix(in srgb, var(--yoya-raw-primary) 30%, transparent);
+  --yoya-color-success: light-dark(
+    var(--yoya-raw-success),
+    color-mix(in srgb, var(--yoya-raw-success), white 16%)
+  );
+  --yoya-color-success-hover: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success), black 12%),
+    color-mix(in srgb, var(--yoya-raw-success), white 28%)
+  );
+  --yoya-color-success-active: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success), black 22%),
+    color-mix(in srgb, var(--yoya-raw-success), white 8%)
+  );
+  --yoya-color-success-deep: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success), black 36%),
+    color-mix(in srgb, var(--yoya-raw-success), black 40%)
+  );
+  --yoya-color-success-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success) 12%, white),
+    color-mix(in srgb, var(--yoya-raw-success) 26%, black)
+  );
+  --yoya-color-success-active-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success) 20%, white),
+    color-mix(in srgb, var(--yoya-raw-success) 34%, black)
+  );
+  --yoya-color-success-border: light-dark(
+    color-mix(in srgb, var(--yoya-raw-success) 30%, white),
+    color-mix(in srgb, var(--yoya-raw-success) 40%, black)
+  );
+  --yoya-color-success-ring: color-mix(in srgb, var(--yoya-raw-success) 30%, transparent);
+  --yoya-color-danger: light-dark(
+    var(--yoya-raw-danger),
+    color-mix(in srgb, var(--yoya-raw-danger), white 16%)
+  );
+  --yoya-color-danger-hover: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger), black 12%),
+    color-mix(in srgb, var(--yoya-raw-danger), white 28%)
+  );
+  --yoya-color-danger-active: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger), black 22%),
+    color-mix(in srgb, var(--yoya-raw-danger), white 8%)
+  );
+  --yoya-color-danger-deep: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger), black 36%),
+    color-mix(in srgb, var(--yoya-raw-danger), black 40%)
+  );
+  --yoya-color-danger-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger) 12%, white),
+    color-mix(in srgb, var(--yoya-raw-danger) 26%, black)
+  );
+  --yoya-color-danger-active-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger) 20%, white),
+    color-mix(in srgb, var(--yoya-raw-danger) 34%, black)
+  );
+  --yoya-color-danger-border: light-dark(
+    color-mix(in srgb, var(--yoya-raw-danger) 30%, white),
+    color-mix(in srgb, var(--yoya-raw-danger) 40%, black)
+  );
+  --yoya-color-danger-ring: color-mix(in srgb, var(--yoya-raw-danger) 30%, transparent);
+  --yoya-color-warning: light-dark(
+    var(--yoya-raw-warning),
+    color-mix(in srgb, var(--yoya-raw-warning), white 16%)
+  );
+  --yoya-color-warning-hover: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning), black 12%),
+    color-mix(in srgb, var(--yoya-raw-warning), white 28%)
+  );
+  --yoya-color-warning-active: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning), black 22%),
+    color-mix(in srgb, var(--yoya-raw-warning), white 8%)
+  );
+  --yoya-color-warning-deep: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning), black 36%),
+    color-mix(in srgb, var(--yoya-raw-warning), black 40%)
+  );
+  --yoya-color-warning-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning) 12%, white),
+    color-mix(in srgb, var(--yoya-raw-warning) 26%, black)
+  );
+  --yoya-color-warning-active-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning) 20%, white),
+    color-mix(in srgb, var(--yoya-raw-warning) 34%, black)
+  );
+  --yoya-color-warning-border: light-dark(
+    color-mix(in srgb, var(--yoya-raw-warning) 30%, white),
+    color-mix(in srgb, var(--yoya-raw-warning) 40%, black)
+  );
+  --yoya-color-warning-ring: color-mix(in srgb, var(--yoya-raw-warning) 30%, transparent);
+  --yoya-color-info: light-dark(
+    var(--yoya-raw-info),
+    color-mix(in srgb, var(--yoya-raw-info), white 16%)
+  );
+  --yoya-color-info-hover: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info), black 12%),
+    color-mix(in srgb, var(--yoya-raw-info), white 28%)
+  );
+  --yoya-color-info-active: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info), black 22%),
+    color-mix(in srgb, var(--yoya-raw-info), white 8%)
+  );
+  --yoya-color-info-deep: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info), black 36%),
+    color-mix(in srgb, var(--yoya-raw-info), black 40%)
+  );
+  --yoya-color-info-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info) 12%, white),
+    color-mix(in srgb, var(--yoya-raw-info) 26%, black)
+  );
+  --yoya-color-info-active-subtle: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info) 20%, white),
+    color-mix(in srgb, var(--yoya-raw-info) 34%, black)
+  );
+  --yoya-color-info-border: light-dark(
+    color-mix(in srgb, var(--yoya-raw-info) 30%, white),
+    color-mix(in srgb, var(--yoya-raw-info) 40%, black)
+  );
+  --yoya-color-info-ring: color-mix(in srgb, var(--yoya-raw-info) 30%, transparent);
+  --yoya-font-family:
+    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --yoya-font-size: 14px;
+  --yoya-line-height: 1.5;
+  --yoya-radius-sm: 4px;
+  --yoya-radius-md: 6px;
+  --yoya-radius-lg: 8px;
+  --yoya-motion-fast: 120ms;
+  --yoya-motion-base: 160ms;
+  --yoya-shadow-sm: light-dark(0 1px 2px rgb(15 23 42 / 8%), 0 1px 2px rgb(0 0 0 / 30%));
+  --yoya-shadow-md: light-dark(0 8px 18px rgb(15 23 42 / 10%), 0 8px 18px rgb(0 0 0 / 36%));
+  --yoya-shadow-lg: light-dark(0 24px 72px rgb(15 23 42 / 20%), 0 24px 72px rgb(0 0 0 / 50%));
+  --yoya-border-width: 1px;
+  --yoya-border-width-strong: 2px;
+  --yoya-space-1: 4px;
+  --yoya-space-2: 8px;
+  --yoya-space-3: 12px;
+  --yoya-space-4: 16px;
+  --yoya-space-5: 24px;
+  --yoya-space-6: 32px;
+  --yoya-space-7: 48px;
+  --yoya-space-8: 64px;
+  --yoya-font-size-xs: 12px;
+  --yoya-font-size-sm: 13px;
+  --yoya-font-size-base: 14px;
+  --yoya-font-size-lg: 15px;
+  --yoya-font-size-xl: 20px;
+  --yoya-font-weight-regular: 400;
+  --yoya-font-weight-medium: 500;
+  --yoya-font-weight-semibold: 600;
+  --yoya-font-weight-bold: 700;
+  --yoya-control-height-sm: 30px;
+  --yoya-control-height-md: 34px;
+  --yoya-control-height-lg: 38px;
+  --yoya-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --yoya-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --yoya-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --yoya-motion-slow: 220ms;
+  --yoya-z-dropdown: 110;
+  --yoya-z-popover: 120;
+  --yoya-z-overlay: 300;
+  --yoya-z-toast: 500;
+}
+
+[data-yoya-density='compact'] {
+  --yoya-space-1: 3px;
+  --yoya-space-2: 6px;
+  --yoya-space-3: 10px;
+  --yoya-space-4: 12px;
+  --yoya-space-5: 18px;
+  --yoya-space-6: 24px;
+  --yoya-space-7: 36px;
+  --yoya-space-8: 48px;
+  --yoya-control-height-sm: 26px;
+  --yoya-control-height-md: 30px;
+  --yoya-control-height-lg: 34px;
+}
+@layer yoya {
+  .yoya-component {
+    box-sizing: border-box;
+    font-family: var(--yoya-font-family);
+    font-size: var(--yoya-font-size);
+    line-height: var(--yoya-line-height);
+  }
+  :where(.yoya-vaside),
+  :where(.yoya-vmain) {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  :where(.yoya-vaside)::-webkit-scrollbar,
+  :where(.yoya-vmain)::-webkit-scrollbar {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+  :where(.yoya-vbutton) {
+    align-items: center;
+    border-radius: var(--yoya-radius-md, 6px);
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-weight: 600;
+    gap: 6px;
+    justify-content: center;
+    line-height: 1;
+    transition:
+      background 140ms ease,
+      border-color 140ms ease,
+      box-shadow 140ms ease,
+      opacity 140ms ease,
+      transform 140ms ease;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .yoya-vbutton .yoya-vbutton-spinner {
+    display: none;
+  }
+
+  .yoya-vbutton[data-loading='true'] {
+    cursor: progress;
+  }
+
+  .yoya-vbutton[data-loading='true'] .yoya-vbutton-spinner {
+    display: inline-flex;
+  }
+
+  .yoya-vbutton[data-size='large'] {
+    font-size: var(--yoya-font-size-lg);
+    min-height: var(--yoya-control-height-lg);
+    padding: 0 var(--yoya-space-4);
+  }
+
+  .yoya-vbutton[data-size='medium'] {
+    font-size: var(--yoya-font-size-base);
+    min-height: var(--yoya-control-height-md);
+    padding: 0 var(--yoya-space-3);
+  }
+
+  .yoya-vbutton[data-size='small'] {
+    font-size: var(--yoya-font-size-sm);
+    min-height: var(--yoya-control-height-sm);
+    padding: 0 var(--yoya-space-2);
+  }
+
+  .yoya-vbutton[data-variant='danger'] {
+    background: var(--yoya-color-danger, #dc2626);
+    border-color: var(--yoya-color-danger-hover, #b91c1c);
+    box-shadow: 0 1px 2px rgba(185, 28, 28, 0.16);
+    color: var(--yoya-color-text-inverse, #ffffff);
+    outline: none;
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='danger'][data-interaction='hover'] {
+    background: var(--yoya-color-danger-hover, #b91c1c);
+    border-color: var(--yoya-color-danger-active, #991b1b);
+    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
+    transform: translateY(-1px);
+  }
+
+  .yoya-vbutton[data-variant='danger'][data-interaction='active'] {
+    background: var(--yoya-color-danger-active, #991b1b);
+    border-color: var(--yoya-color-danger-deep, #7f1d1d);
+    box-shadow: inset 0 1px 2px rgba(127, 29, 29, 0.24);
+    transform: translateY(0);
+  }
+
+  .yoya-vbutton[data-variant='danger'][data-interaction='focus'] {
+    outline: 3px solid var(--yoya-color-danger-ring, rgba(220, 38, 38, 0.24));
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='ghost'] {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    color: var(--yoya-color-primary, #2563eb);
+    outline: none;
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='ghost'][data-interaction='hover'] {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    border-color: var(--yoya-color-primary-border, #bfdbfe);
+    box-shadow: none;
+    transform: translateY(-1px);
+  }
+
+  .yoya-vbutton[data-variant='ghost'][data-interaction='active'] {
+    background: var(--yoya-color-primary-active-subtle, #dbeafe);
+    border-color: var(--yoya-color-primary-border, #bfdbfe);
+    box-shadow: none;
+    transform: translateY(0);
+  }
+
+  .yoya-vbutton[data-variant='ghost'][data-interaction='focus'] {
+    outline: 3px solid var(--yoya-color-primary-ring, rgba(37, 99, 235, 0.22));
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='primary'] {
+    background: var(--yoya-color-primary, #2563eb);
+    border-color: var(--yoya-color-primary-hover, #1d4ed8);
+    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
+    color: var(--yoya-color-text-inverse, #ffffff);
+    outline: none;
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='primary'][data-interaction='hover'] {
+    background: var(--yoya-color-primary-hover, #1d4ed8);
+    border-color: var(--yoya-color-primary-active, #1e40af);
+    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
+    transform: translateY(-1px);
+  }
+
+  .yoya-vbutton[data-variant='primary'][data-interaction='active'] {
+    background: var(--yoya-color-primary-active, #1e40af);
+    border-color: var(--yoya-color-primary-deep, #1e3a8a);
+    box-shadow: inset 0 1px 2px rgba(30, 58, 138, 0.28);
+    transform: translateY(0);
+  }
+
+  .yoya-vbutton[data-variant='primary'][data-interaction='focus'] {
+    outline: 3px solid var(--yoya-color-primary-ring, rgba(37, 99, 235, 0.28));
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='secondary'] {
+    background: var(--yoya-color-surface, #ffffff);
+    border-color: var(--yoya-color-border-strong, #cbd5e1);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+    color: var(--yoya-color-text, #1f2937);
+    outline: none;
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[data-variant='secondary'][data-interaction='hover'] {
+    background: var(--yoya-color-surface-hover, #f8fafc);
+    border-color: var(--yoya-color-border-muted, #94a3b8);
+    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
+    transform: translateY(-1px);
+  }
+
+  .yoya-vbutton[data-variant='secondary'][data-interaction='active'] {
+    background: var(--yoya-color-surface-active, #eef2f7);
+    border-color: var(--yoya-color-border-muted, #94a3b8);
+    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
+    transform: translateY(0);
+  }
+
+  .yoya-vbutton[data-variant='secondary'][data-interaction='focus'] {
+    outline: 3px solid var(--yoya-color-border-ring, rgba(100, 116, 139, 0.24));
+    outline-offset: 2px;
+  }
+
+  .yoya-vbutton[disabled],
+  .yoya-vbutton[data-interaction='disabled'] {
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 0.58;
+    outline: none;
+    transform: translateY(0);
+  }
+
+  :where(.yoya-vglow-button) {
+    --yoya-glow-alpha: 0.4;
+    --yoya-glow-duration: 2.8s;
+    isolation: isolate;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .yoya-vglow-button .yoya-vbutton-label,
+  .yoya-vglow-button .yoya-vbutton-spinner {
+    position: relative;
+    z-index: 1;
+  }
+
+  .yoya-vglow-button::before {
+    animation: yoya-glow-button-sweep var(--yoya-glow-duration) ease-in-out infinite;
+    background: linear-gradient(
+      105deg,
+      transparent 0%,
+      rgba(255, 255, 255, var(--yoya-glow-alpha)) 50%,
+      transparent 100%
+    );
+    bottom: 0;
+    content: '';
+    left: -45%;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    transform: translate3d(0, 0, 0) skewX(-14deg);
+    width: 40%;
+    z-index: 0;
+  }
+
+  .yoya-vglow-button[data-glow-play='hover']::before,
+  .yoya-vglow-button[data-glow-play='off']::before,
+  .yoya-vglow-button[disabled]::before,
+  .yoya-vglow-button[data-interaction='disabled']::before {
+    animation-play-state: paused;
+    opacity: 0;
+  }
+
+  .yoya-vglow-button[data-glow-play='hover']:hover::before,
+  .yoya-vglow-button[data-glow-play='hover']:focus-visible::before {
+    animation-play-state: running;
+    opacity: 1;
+  }
+
+  .yoya-vglow-button[data-glow-speed='slow'] {
+    --yoya-glow-duration: 4.2s;
+  }
+
+  .yoya-vglow-button[data-glow-speed='fast'] {
+    --yoya-glow-duration: 1.5s;
+  }
+
+  .yoya-vglow-button[data-glow-strength='soft'] {
+    --yoya-glow-alpha: 0.22;
+  }
+
+  .yoya-vglow-button:hover::before {
+    animation-duration: calc(var(--yoya-glow-duration) * 0.6);
+  }
+
+  .yoya-vglow-button[data-glow-direction='rtl']::before {
+    animation-name: yoya-glow-button-sweep-rtl;
+  }
+
+  @keyframes yoya-glow-button-sweep {
+    0%,
+    45% {
+      transform: translate3d(0, 0, 0) skewX(-14deg);
+    }
+    100% {
+      transform: translate3d(420%, 0, 0) skewX(-14deg);
+    }
+  }
+
+  @keyframes yoya-glow-button-sweep-rtl {
+    0%,
+    45% {
+      transform: translate3d(420%, 0, 0) skewX(-14deg);
+    }
+    100% {
+      transform: translate3d(0, 0, 0) skewX(-14deg);
+    }
+  }
+
+  .yoya-vglow-button .yoya-vglow-button-ripple {
+    animation: yoya-glow-button-ripple 520ms ease-out forwards;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
+    border-radius: 50%;
+    pointer-events: none;
+    position: absolute;
+    transform: scale(0);
+    z-index: 0;
+  }
+
+  @keyframes yoya-glow-button-ripple {
+    0% {
+      opacity: 0.9;
+      transform: scale(0);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+
+  :where(.yoya-vdropdown-menu) {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .yoya-vdropdown-menu .yoya-vdropdown-panel {
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border, #dbe3ef);
+    border-radius: 10px;
+    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
+    display: none;
+    min-width: 192px;
+    overflow: hidden;
+    position: absolute;
+    transform-origin: top left;
+    z-index: var(--yoya-z-popover);
+  }
+
+  .yoya-vdropdown-menu[data-open='true'] > .yoya-vdropdown-panel {
+    display: block;
+  }
+
+  :where(.yoya-vcontext-menu) {
+    display: block;
+    min-width: 0;
+  }
+
+  .yoya-vcontext-menu .yoya-vcontext-target {
+    min-width: 0;
+  }
+
+  .yoya-vcontext-menu .yoya-vcontext-panel {
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border, #d8dee8);
+    border-radius: 8px;
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
+    display: none;
+    min-width: 200px;
+    position: fixed;
+    z-index: var(--yoya-z-popover);
+  }
+
+  .yoya-vcontext-menu[data-open='true'] > .yoya-vcontext-panel {
+    display: block;
+  }
+
+  .yoya-vdialog .yoya-vdialog-close:hover {
+    background: var(--yoya-color-surface-hover, #eef0f3);
+    color: var(--yoya-color-text, #172033);
+  }
+
+  :where(.yoya-vtooltip) {
+    box-sizing: border-box;
+    display: inline-flex;
+    max-width: 100%;
+    position: relative;
+  }
+
+  .yoya-vtooltip .yoya-vtooltip-target {
+    align-items: center;
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .yoya-vtooltip .yoya-vtooltip-panel {
+    background: var(--yoya-color-text-strong, #111827);
+    border: 1px solid var(--yoya-color-text-strong, #111827);
+    border-radius: var(--yoya-radius-sm, 4px);
+    box-shadow: var(--yoya-shadow-md, 0 8px 18px rgb(15 23 42 / 10%));
+    color: var(--yoya-color-surface, #ffffff);
+    display: none;
+    font-size: 12px;
+    line-height: 1.45;
+    max-width: min(280px, 70vw);
+    padding: 6px 9px;
+    pointer-events: none;
+    position: absolute;
+    width: max-content;
+    z-index: var(--yoya-z-popover);
+  }
+
+  .yoya-vtooltip[data-open='true'] > .yoya-vtooltip-panel {
+    display: block;
+  }
+
+  .yoya-vtooltip .yoya-vtooltip-panel::after {
+    border: 5px solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  .yoya-vtooltip[data-placement='top'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='top-start'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='top-end'] > .yoya-vtooltip-panel::after {
+    border-top-color: var(--yoya-color-text-strong, #111827);
+    bottom: -10px;
+  }
+
+  .yoya-vtooltip[data-placement='top'] > .yoya-vtooltip-panel::after {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .yoya-vtooltip[data-placement='top-start'] > .yoya-vtooltip-panel::after {
+    left: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='top-end'] > .yoya-vtooltip-panel::after {
+    right: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='bottom'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='bottom-start'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='bottom-end'] > .yoya-vtooltip-panel::after {
+    border-bottom-color: var(--yoya-color-text-strong, #111827);
+    top: -10px;
+  }
+
+  .yoya-vtooltip[data-placement='bottom'] > .yoya-vtooltip-panel::after {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .yoya-vtooltip[data-placement='bottom-start'] > .yoya-vtooltip-panel::after {
+    left: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='bottom-end'] > .yoya-vtooltip-panel::after {
+    right: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='left'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='left-start'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='left-end'] > .yoya-vtooltip-panel::after {
+    border-left-color: var(--yoya-color-text-strong, #111827);
+    right: -10px;
+  }
+
+  .yoya-vtooltip[data-placement='left'] > .yoya-vtooltip-panel::after {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .yoya-vtooltip[data-placement='left-start'] > .yoya-vtooltip-panel::after {
+    bottom: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='left-end'] > .yoya-vtooltip-panel::after {
+    top: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='right'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='right-start'] > .yoya-vtooltip-panel::after,
+  .yoya-vtooltip[data-placement='right-end'] > .yoya-vtooltip-panel::after {
+    border-right-color: var(--yoya-color-text-strong, #111827);
+    left: -10px;
+  }
+
+  .yoya-vtooltip[data-placement='right'] > .yoya-vtooltip-panel::after {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .yoya-vtooltip[data-placement='right-start'] > .yoya-vtooltip-panel::after {
+    bottom: 12px;
+  }
+
+  .yoya-vtooltip[data-placement='right-end'] > .yoya-vtooltip-panel::after {
+    top: 12px;
+  }
+
+  :where(.yoya-vmenu) {
+    display: flex;
+    gap: 4px;
+    min-width: 180px;
+    padding: 6px;
+  }
+
+  .yoya-vmenu[data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .yoya-vmenu[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  :where(.yoya-vmenu-item) {
+    align-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    box-sizing: border-box;
+    color: var(--yoya-color-text, #1f2937);
+    cursor: pointer;
+    display: grid;
+    font: inherit;
+    gap: 10px;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    line-height: 1.2;
+    min-height: 34px;
+    padding: 8px 10px;
+    text-align: left;
+    width: 100%;
+  }
+
+  .yoya-vmenu[data-orientation='horizontal'] .yoya-vmenu-item {
+    display: inline-flex;
+    justify-content: center;
+    text-align: center;
+    width: auto;
+  }
+
+  .yoya-vmenu-item[data-active='true'] {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    border-color: var(--yoya-color-primary-border, #bfdbfe);
+    color: var(--yoya-color-primary-hover, #1d4ed8);
+    font-weight: 700;
+  }
+
+  .yoya-vmenu-item[data-danger='true'] {
+    color: var(--yoya-color-text-danger, #b91c1c);
+  }
+
+  .yoya-vmenu-item[data-hovered='true']:not([data-active='true']) {
+    background: var(--yoya-color-surface-hover, #f1f5f9);
+    border-color: var(--yoya-color-border-faint, #e2e8f0);
+  }
+
+  .yoya-vmenu-item[disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  :where(.yoya-vmenu-divider) {
+    align-self: stretch;
+    border-top: 1px solid var(--yoya-color-border-faint, #e2e8f0);
+    height: 0;
+    margin: 4px 0;
+    width: auto;
+  }
+
+  .yoya-vmenu[data-orientation='horizontal'] .yoya-vmenu-divider {
+    border-left: 1px solid var(--yoya-color-border-faint, #e2e8f0);
+    border-top: 0;
+    height: auto;
+    margin: 0 4px;
+    width: 0;
+  }
+
+  :where(.yoya-vmenu-group) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .yoya-vmenu[data-orientation='horizontal'] .yoya-vmenu-group {
+    flex-direction: row;
+  }
+
+  .yoya-vmenu-group .yoya-vmenu-group-label {
+    color: var(--yoya-color-text-muted, #64748b);
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 6px 10px 4px;
+  }
+
+  :where(.yoya-vsubmenu) {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+  }
+
+  .yoya-vsubmenu[data-inline='true'] {
+    display: block;
+  }
+
+  .yoya-vsubmenu .yoya-vsubmenu-panel {
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border, #d8dee8);
+    border-radius: 8px;
+    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
+    display: none;
+    left: calc(100% + 4px);
+    min-width: 200px;
+    position: absolute;
+    top: 0;
+    z-index: var(--yoya-z-dropdown);
+  }
+
+  .yoya-vsubmenu[data-open='true'] > .yoya-vsubmenu-panel {
+    display: block;
+  }
+
+  .yoya-vsubmenu[data-inline='true'] > .yoya-vsubmenu-panel {
+    background: transparent;
+    border: 0;
+    border-left: 1px solid var(--yoya-color-border-faint, #e2e8f0);
+    border-radius: 0;
+    box-shadow: none;
+    display: none;
+    left: auto;
+    margin-left: 14px;
+    min-width: auto;
+    padding-left: 10px;
+    position: static;
+    top: auto;
+    width: auto;
+    z-index: auto;
+  }
+
+  .yoya-vsubmenu[data-inline='true'][data-open='true'] > .yoya-vsubmenu-panel {
+    display: block;
+  }
+
+  :where(.yoya-vsidebar) {
+    align-content: start;
+    background: transparent;
+    border-radius: 8px;
+    box-sizing: border-box;
+    display: grid;
+    gap: 12px;
+    overflow: hidden;
+    padding: 12px;
+    transition: width 160ms ease;
+    width: 260px;
+  }
+
+  .yoya-vsidebar[data-collapsed='true'] {
+    width: 72px;
+  }
+
+  .yoya-vsidebar .yoya-vsidebar-header {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+  }
+
+  .yoya-vsidebar .yoya-vsidebar-menu {
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  .yoya-vsidebar .yoya-vsidebar-menu::-webkit-scrollbar {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+
+  .yoya-vtreeranger .yoya-vtreeranger-list {
+    scrollbar-width: none;
+  }
+
+  .yoya-vtreeranger .yoya-vtreeranger-list::-webkit-scrollbar {
+    display: none;
+    height: 0;
+    width: 0;
+  }
+
+  :where(.yoya-vnavbar) {
+    align-items: center;
+    background: transparent;
+    border-radius: 8px;
+    box-sizing: border-box;
+    column-gap: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 56px;
+    row-gap: 8px;
+    transition: border-color 160ms ease;
+    width: 100%;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-brand {
+    align-content: center;
+    display: grid;
+    flex: 0 0 auto;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-brand-title {
+    color: var(--yoya-color-text-strong, #0f172a);
+    display: none;
+    font-size: 1.02rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-brand-subtitle {
+    color: var(--yoya-color-text-muted, #64748b);
+    display: none;
+    font-size: 0.78rem;
+    line-height: 1.2;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-brand-default,
+  .yoya-vnavbar .yoya-vnavbar-brand-custom {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-brand-custom {
+    display: none;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-menu-slot {
+    align-items: center;
+    display: flex;
+    flex: 1 1 320px;
+    min-width: 0;
+  }
+
+  .yoya-vnavbar .yoya-vnavbar-actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-left: auto;
+    min-width: 0;
+  }
+
+  :where(.yoya-vsteps) {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .yoya-vsteps[data-direction='vertical'] {
+    flex-direction: column;
+  }
+
+  :where(.yoya-vstep) {
+    align-items: flex-start;
+    display: grid;
+    flex: 1 1 0;
+    gap: 10px;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-width: 0;
+    position: relative;
+  }
+
+  .yoya-vsteps[data-direction='horizontal'] .yoya-vstep {
+    gap: 0;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .yoya-vsteps .yoya-vsteps-indicator {
+    align-items: center;
+    background: var(--yoya-color-surface, #ffffff);
+    border: 2px solid var(--yoya-color-border-strong, #cbd5e1);
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: var(--yoya-color-text-muted, #64748b);
+    display: inline-flex;
+    font-size: 14px;
+    font-weight: 700;
+    height: 30px;
+    justify-content: center;
+    line-height: 1;
+    width: 30px;
+  }
+
+  .yoya-vsteps[data-size='small'] .yoya-vsteps-indicator {
+    font-size: 12px;
+    height: 24px;
+    width: 24px;
+  }
+
+  .yoya-vsteps .yoya-vsteps-content {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .yoya-vsteps[data-direction='horizontal'] .yoya-vsteps-content {
+    padding-top: 6px;
+  }
+
+  .yoya-vsteps[data-direction='vertical'] .yoya-vsteps-content {
+    padding-top: 3px;
+  }
+
+  .yoya-vsteps .yoya-vsteps-title {
+    color: var(--yoya-color-text, #172033);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  .yoya-vsteps[data-size='small'] .yoya-vsteps-title {
+    font-size: 13px;
+  }
+
+  .yoya-vsteps .yoya-vsteps-description {
+    color: var(--yoya-color-text-muted, #64748b);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .yoya-vsteps .yoya-vsteps-connector {
+    background: var(--yoya-color-border, #d8dee8);
+    display: none;
+    height: 2px;
+    position: absolute;
+  }
+
+  .yoya-vstep[data-status='finish'] .yoya-vsteps-indicator {
+    background: var(--yoya-color-success, #16a34a);
+    border-color: var(--yoya-color-success, #16a34a);
+    color: var(--yoya-color-text-inverse, #ffffff);
+  }
+
+  .yoya-vstep[data-status='error'] .yoya-vsteps-indicator {
+    background: var(--yoya-color-danger, #dc2626);
+    border-color: var(--yoya-color-danger, #dc2626);
+    color: var(--yoya-color-text-inverse, #ffffff);
+  }
+
+  .yoya-vstep[data-status='process'] .yoya-vsteps-indicator {
+    background: var(--yoya-color-primary, #2563eb);
+    border-color: var(--yoya-color-primary, #2563eb);
+    color: var(--yoya-color-text-inverse, #ffffff);
+  }
+
+  .yoya-vstep[data-status='finish'] .yoya-vsteps-connector {
+    background: var(--yoya-color-primary, #2563eb);
+  }
+
+  :where(.yoya-vtabs) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: 0;
+  }
+
+  .yoya-vtabs[data-orientation='vertical'] {
+    flex-direction: row;
+    gap: 16px;
+  }
+
+  .yoya-vtabs .yoya-vtabs-nav {
+    align-items: stretch;
+    display: flex;
+    gap: 2px;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .yoya-vtabs[data-orientation='vertical'] .yoya-vtabs-nav {
+    border-bottom: 0;
+    border-right: 1px solid var(--yoya-color-border, #d8dee8);
+    flex: 0 0 auto;
+    flex-direction: column;
+    overflow: visible;
+    padding-right: 4px;
+  }
+
+  .yoya-vtabs .yoya-vtabs-panels {
+    min-width: 0;
+    padding-top: 12px;
+  }
+
+  .yoya-vtabs[data-orientation='vertical'] .yoya-vtabs-panels {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-top: 0;
+  }
+
+  :where(.yoya-vtab-trigger) {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    color: var(--yoya-color-text-secondary, #475569);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: 6px;
+    line-height: 1.35;
+    min-height: 36px;
+    padding: 0 12px;
+    position: relative;
+    white-space: nowrap;
+  }
+
+  .yoya-vtab-trigger:hover {
+    background: var(--yoya-color-surface-hover, #f8fafc);
+    color: var(--yoya-color-text, #172033);
+  }
+
+  .yoya-vtab-trigger:focus-visible {
+    outline: 3px solid var(--yoya-color-primary-ring, rgba(37, 99, 235, 0.28));
+    outline-offset: -1px;
+  }
+
+  .yoya-vtab-trigger[data-active='true'] {
+    border-bottom-color: var(--yoya-color-primary, #2563eb);
+    color: var(--yoya-color-text-active, #1d4ed8);
+  }
+
+  .yoya-vtab-trigger[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .yoya-vtabs .yoya-vtab-icon {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .yoya-vtabs .yoya-vtab-label {
+    min-width: 0;
+  }
+
+  .yoya-vtabs .yoya-vtab-panel {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .yoya-vtabs .yoya-vtab-panel[hidden] {
+    display: none;
+  }
+
+  .yoya-vtabs[data-variant='card'] .yoya-vtabs-nav {
+    border-bottom: 1px solid var(--yoya-color-border, #d8dee8);
+    gap: 0;
+  }
+
+  .yoya-vtabs[data-variant='card'] .yoya-vtab-trigger {
+    border: 1px solid transparent;
+    border-bottom-color: var(--yoya-color-border, #d8dee8);
+    border-radius: var(--yoya-radius-md, 6px) var(--yoya-radius-md, 6px) 0 0;
+    margin-bottom: -1px;
+  }
+
+  .yoya-vtabs[data-variant='card'] .yoya-vtab-trigger[data-active='true'] {
+    background: var(--yoya-color-surface, #ffffff);
+    border-color: var(--yoya-color-border-strong, #cbd5e1);
+    border-bottom-color: var(--yoya-color-surface, #ffffff);
+  }
+
+  .yoya-vtabs[data-variant='pills'] .yoya-vtab-trigger {
+    border-radius: var(--yoya-radius-md, 6px);
+  }
+
+  .yoya-vtabs[data-variant='pills'] .yoya-vtab-trigger[data-active='true'] {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    color: var(--yoya-color-text-active, #1d4ed8);
+  }
+
+  .yoya-vtabs[data-variant='pills'] .yoya-vtab-trigger:hover:not([data-active='true']) {
+    background: var(--yoya-color-surface-hover, #f8fafc);
+  }
+
+  .yoya-vtabs[data-size='small'] .yoya-vtab-trigger {
+    font-size: 13px;
+    min-height: 32px;
+    padding: 0 10px;
+  }
+
+  .yoya-vtabs[data-size='large'] .yoya-vtab-trigger {
+    font-size: 15px;
+    min-height: 40px;
+    padding: 0 16px;
+  }
+
+  .yoya-vtabs[data-orientation='vertical'] .yoya-vtab-trigger {
+    border-bottom: 0;
+    border-right: 2px solid transparent;
+    border-radius: 0;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .yoya-vtabs[data-orientation='vertical'] .yoya-vtab-trigger[data-active='true'] {
+    border-bottom-color: transparent;
+    border-right-color: var(--yoya-color-primary, #2563eb);
+  }
+
+  .yoya-vtabs[data-orientation='vertical'][data-variant='card'] .yoya-vtab-trigger {
+    border: 1px solid transparent;
+    border-radius: var(--yoya-radius-md, 6px);
+    margin-bottom: 0;
+  }
+
+  .yoya-vtabs[data-orientation='vertical'][data-variant='card']
+    .yoya-vtab-trigger[data-active='true'] {
+    background: var(--yoya-color-surface, #ffffff);
+    border-color: var(--yoya-color-border-strong, #cbd5e1);
+  }
+
+  :where(.yoya-vbreadcrumb) {
+    box-sizing: border-box;
+    display: flex;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-item {
+    align-items: center;
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-link,
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-current {
+    border-radius: 5px;
+    box-sizing: border-box;
+    color: var(--yoya-color-text-secondary, #475569);
+    font-size: 13px;
+    line-height: 1.4;
+    text-decoration: none;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-link {
+    font-weight: 500;
+    padding: 3px 4px;
+    transition:
+      background 140ms ease,
+      color 140ms ease;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-link:hover {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    color: var(--yoya-color-primary-hover, #1d4ed8);
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-link:focus-visible {
+    outline: 2px solid var(--yoya-color-primary-ring, rgba(37, 99, 235, 0.24));
+    outline-offset: 1px;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-current {
+    color: var(--yoya-color-text, #172033);
+    font-weight: 700;
+    max-width: min(260px, 100%);
+    overflow-wrap: anywhere;
+    padding: 3px 4px;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-item[data-current='true'] .yoya-vbreadcrumb-current {
+    color: var(--yoya-color-text-strong, #0f172a);
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-separator {
+    color: var(--yoya-color-text-muted, #94a3b8);
+    flex: 0 0 auto;
+    font-size: 13px;
+    line-height: 1;
+    margin: 0 6px;
+    user-select: none;
+  }
+
+  .yoya-vbreadcrumb .yoya-vbreadcrumb-item:last-child .yoya-vbreadcrumb-separator {
+    display: none;
+  }
+
+  :where(.yoya-vanchor) {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .yoya-vanchor .yoya-vanchor-list {
+    display: grid;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+  }
+
+  .yoya-vanchor .yoya-vanchor-item {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .yoya-vanchor .yoya-vanchor-link {
+    border-left: 2px solid transparent;
+    border-radius: 0 5px 5px 0;
+    box-sizing: border-box;
+    color: var(--yoya-color-text-secondary, #475569);
+    display: block;
+    font-size: 14px;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    padding: 6px 10px;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition:
+      background 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease;
+    white-space: nowrap;
+  }
+
+  .yoya-vanchor .yoya-vanchor-link:hover {
+    background: var(--yoya-color-surface-hover, #f1f5f9);
+    color: var(--yoya-color-text, #172033);
+  }
+
+  .yoya-vanchor .yoya-vanchor-link:focus-visible {
+    outline: 2px solid var(--yoya-color-primary-ring, rgba(37, 99, 235, 0.24));
+    outline-offset: 1px;
+  }
+
+  .yoya-vanchor .yoya-vanchor-item[data-active='true'] > .yoya-vanchor-link {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    border-left-color: var(--yoya-color-primary, #2563eb);
+    color: var(--yoya-color-primary-hover, #1d4ed8);
+    font-weight: 700;
+  }
+
+  .yoya-vanchor .yoya-vanchor-children {
+    display: grid;
+    gap: 2px;
+    list-style: none;
+    margin: 0;
+    min-width: 0;
+    padding: 2px 0 2px 14px;
+  }
+
+  .yoya-vanchor .yoya-vanchor-children .yoya-vanchor-link {
+    font-size: 13px;
+    padding: 5px 10px;
+  }
+
+  :where(.yoya-vavatar) {
+    align-items: center;
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: var(--yoya-color-primary-hover, #1d4ed8);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 14px;
+    font-weight: 600;
+    justify-content: center;
+    line-height: 1;
+    position: relative;
+    user-select: none;
+    vertical-align: middle;
+  }
+
+  .yoya-vavatar[data-shape='square'] {
+    border-radius: var(--yoya-radius-md, 6px);
+  }
+
+  .yoya-vavatar[data-size='small'] {
+    font-size: 12px;
+    height: 28px;
+    width: 28px;
+  }
+
+  .yoya-vavatar[data-size='medium'] {
+    font-size: 14px;
+    height: 32px;
+    width: 32px;
+  }
+
+  .yoya-vavatar[data-size='large'] {
+    font-size: 16px;
+    height: 40px;
+    width: 40px;
+  }
+
+  .yoya-vavatar[data-size='xlarge'] {
+    font-size: 20px;
+    height: 48px;
+    width: 48px;
+  }
+
+  .yoya-vavatar .yoya-vavatar-content {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-width: 0;
+    padding: 2px;
+  }
+
+  .yoya-vavatar .yoya-vavatar-image {
+    border-radius: inherit;
+    display: none;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .yoya-vavatar[data-image='true'] .yoya-vavatar-image {
+    display: block;
+  }
+
+  .yoya-vavatar[data-image='true'] .yoya-vavatar-content {
+    display: none;
+  }
+
+  .yoya-vavatar .yoya-vavatar-status {
+    background: var(--yoya-color-text-muted, #64748b);
+    border: 2px solid var(--yoya-color-surface, #ffffff);
+    border-radius: 50%;
+    bottom: -3px;
+    display: none;
+    height: 10px;
+    position: absolute;
+    right: -3px;
+    width: 10px;
+  }
+
+  .yoya-vavatar[data-status='online'] .yoya-vavatar-status {
+    background: var(--yoya-color-success, #22c55e);
+    display: block;
+  }
+
+  .yoya-vavatar[data-status='busy'] .yoya-vavatar-status {
+    background: var(--yoya-color-danger, #ef4444);
+    display: block;
+  }
+
+  .yoya-vavatar[data-status='away'] .yoya-vavatar-status {
+    background: var(--yoya-color-warning, #f59e0b);
+    display: block;
+  }
+
+  .yoya-vavatar[data-status='offline'] .yoya-vavatar-status {
+    display: block;
+  }
+
+  :where(.yoya-vprogress) {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    gap: 10px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .yoya-vprogress .yoya-vprogress-label {
+    color: var(--yoya-color-text-secondary, #475569);
+    flex: 0 0 auto;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.35;
+    max-width: 160px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .yoya-vprogress .yoya-vprogress-track {
+    background: var(--yoya-color-surface-active, #eef2f7);
+    border-radius: 999px;
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    height: 8px;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .yoya-vprogress .yoya-vprogress-bar {
+    border-radius: inherit;
+    display: block;
+    height: 100%;
+    transition: width 160ms ease;
+  }
+
+  .yoya-vprogress .yoya-vprogress-text {
+    color: var(--yoya-color-text-secondary, #475569);
+    flex: 0 0 auto;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.35;
+    min-width: 34px;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .yoya-vprogress[data-size='small'] .yoya-vprogress-track {
+    height: 4px;
+  }
+
+  .yoya-vprogress[data-size='large'] .yoya-vprogress-track {
+    height: 12px;
+  }
+
+  .yoya-vprogress[data-size='large'] .yoya-vprogress-text {
+    font-size: 14px;
+  }
+
+  .yoya-vprogress[data-indeterminate='true'] .yoya-vprogress-bar {
+    animation: yoya-vprogress-indeterminate 1.2s ease-in-out infinite;
+  }
+
+  @keyframes yoya-vprogress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+      width: 40%;
+    }
+    50% {
+      transform: translateX(0);
+      width: 70%;
+    }
+    100% {
+      transform: translateX(100%);
+      width: 40%;
+    }
+  }
+
+  :where(.yoya-vscroll) {
+    box-sizing: border-box;
+    min-width: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    position: relative;
+  }
+
+  .yoya-vscroll .yoya-vscroll-list {
+    display: grid;
+    gap: 8px;
+    min-width: 0;
+    padding: 12px;
+  }
+
+  .yoya-vscroll[data-virtual='true'] .yoya-vscroll-list {
+    display: block;
+    gap: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  .yoya-vscroll .yoya-vscroll-virtual-item {
+    box-sizing: border-box;
+    left: 0;
+    min-width: 0;
+    overflow: visible;
+    position: absolute;
+    right: 0;
+    width: 100%;
+  }
+
+  .yoya-vscroll .yoya-vscroll-footer {
+    align-items: center;
+    border-top: 1px solid var(--yoya-color-border-faint, #e2e8f0);
+    color: var(--yoya-color-text-muted, #64748b);
+    display: none;
+    font-size: 12px;
+    justify-content: center;
+    min-height: 38px;
+    padding: 8px 12px;
+  }
+
+  .yoya-vscroll[data-loading='true'] > .yoya-vscroll-footer,
+  .yoya-vscroll[data-blocked='true'] > .yoya-vscroll-footer {
+    display: flex;
+  }
+
+  .yoya-vscroll .yoya-vscroll-status {
+    align-items: center;
+    display: inline-flex;
+    gap: 6px;
+  }
+
+  :where(.yoya-vcarousel) {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    min-width: 0;
+    position: relative;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-viewport {
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-track {
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    transition: transform 320ms ease;
+    will-change: transform;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-slide {
+    box-sizing: border-box;
+    flex: 0 0 100%;
+    height: 100%;
+    min-width: 0;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-arrow {
+    align-items: center;
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border-strong, #cbd5e1);
+    border-radius: 50%;
+    box-shadow: var(--yoya-shadow-sm, 0 1px 2px rgb(15 23 42 / 8%));
+    color: var(--yoya-color-text, #172033);
+    cursor: pointer;
+    display: inline-flex;
+    height: 30px;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 30px;
+    z-index: 2;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-arrow:hover:not([disabled]) {
+    background: var(--yoya-color-surface-hover, #f8fafc);
+    border-color: var(--yoya-color-primary, #2563eb);
+    color: var(--yoya-color-primary-hover, #1d4ed8);
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-arrow[disabled] {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-arrow--prev {
+    left: 10px;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-arrow--next {
+    right: 10px;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-arrow svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-dots {
+    align-items: center;
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+    min-height: 28px;
+    padding: 8px;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-dot {
+    background: var(--yoya-color-border-muted, #94a3b8);
+    border: 0;
+    border-radius: 999px;
+    cursor: pointer;
+    height: 8px;
+    padding: 0;
+    transition:
+      background 140ms ease,
+      width 140ms ease;
+    width: 8px;
+  }
+
+  .yoya-vcarousel .yoya-vcarousel-dot[aria-selected='true'] {
+    background: var(--yoya-color-primary, #2563eb);
+    width: 18px;
+  }
+
+  :where(.yoya-vupload) {
+    display: grid;
+    gap: 10px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .yoya-vupload .yoya-vupload-dropzone {
+    align-items: center;
+    background: var(--yoya-color-surface-muted, #fbfcfe);
+    border: 1px dashed var(--yoya-color-border-strong, #cbd5e1);
+    border-radius: 8px;
+    box-sizing: border-box;
+    color: var(--yoya-color-text-secondary, #475569);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    justify-content: center;
+    min-height: 96px;
+    outline: none;
+    padding: 14px;
+    text-align: center;
+    transition:
+      border-color 140ms ease,
+      background 140ms ease;
+  }
+
+  .yoya-vupload .yoya-vupload-dropzone:hover,
+  .yoya-vupload .yoya-vupload-dropzone[data-dragging='true'] {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    border-color: var(--yoya-color-primary, #2563eb);
+  }
+
+  .yoya-vupload .yoya-vupload-dropzone[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .yoya-vupload .yoya-vupload-dropzone-title {
+    color: var(--yoya-color-text, #172033);
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .yoya-vupload .yoya-vupload-dropzone-hint {
+    color: var(--yoya-color-text-muted, #64748b);
+    font-size: 12px;
+  }
+
+  .yoya-vupload .yoya-vupload-list {
+    display: grid;
+    gap: 6px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .yoya-vupload .yoya-vupload-item {
+    align-items: center;
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border-faint, #e2e8f0);
+    border-radius: 6px;
+    box-sizing: border-box;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: minmax(0, 1fr) auto;
+    min-width: 0;
+    padding: 8px 10px;
+  }
+
+  .yoya-vupload .yoya-vupload-item-info {
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+  }
+
+  .yoya-vupload .yoya-vupload-item-name {
+    color: var(--yoya-color-text, #172033);
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .yoya-vupload .yoya-vupload-item-meta {
+    color: var(--yoya-color-text-muted, #64748b);
+    font-size: 12px;
+  }
+
+  .yoya-vupload .yoya-vupload-progress {
+    background: var(--yoya-color-surface-active, #eef2f7);
+    border-radius: 999px;
+    height: 4px;
+    overflow: hidden;
+  }
+
+  .yoya-vupload .yoya-vupload-progress-bar {
+    background: var(--yoya-color-primary, #2563eb);
+    display: block;
+    height: 100%;
+  }
+
+  .yoya-vupload .yoya-vupload-remove {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: 5px;
+    color: var(--yoya-color-text-muted, #64748b);
+    cursor: pointer;
+    display: inline-flex;
+    height: 24px;
+    justify-content: center;
+    padding: 4px;
+    width: 24px;
+  }
+
+  .yoya-vupload .yoya-vupload-remove:hover {
+    background: var(--yoya-color-danger-subtle, #fef2f2);
+    color: var(--yoya-color-text-danger, #b91c1c);
+  }
+
+  :where(.yoya-vavatar-upload) {
+    display: inline-grid;
+    gap: 8px;
+    justify-items: center;
+    min-width: 0;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-preview {
+    align-items: center;
+    background: var(--yoya-color-surface-muted, #fbfcfe);
+    border: 1px dashed var(--yoya-color-border-strong, #cbd5e1);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    outline: none;
+    position: relative;
+    transition:
+      border-color 140ms ease,
+      background 140ms ease;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-preview:hover,
+  .yoya-vavatar-upload .yoya-vavatar-upload-preview[data-dragging='true'] {
+    background: var(--yoya-color-primary-subtle, #eff6ff);
+    border-color: var(--yoya-color-primary, #2563eb);
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-preview[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-image {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-fallback {
+    align-items: center;
+    display: grid;
+    gap: 5px;
+    justify-items: center;
+    padding: 8px;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-hint {
+    color: var(--yoya-color-text-muted, #64748b);
+    font-size: 12px;
+    text-align: center;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-remove {
+    align-items: center;
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border-faint, #e2e8f0);
+    border-radius: 50%;
+    color: var(--yoya-color-text-muted, #64748b);
+    cursor: pointer;
+    display: inline-flex;
+    height: 24px;
+    justify-content: center;
+    padding: 4px;
+    width: 24px;
+  }
+
+  .yoya-vavatar-upload .yoya-vavatar-upload-remove:hover {
+    background: var(--yoya-color-danger-subtle, #fef2f2);
+    color: var(--yoya-color-text-danger, #b91c1c);
+  }
+
+  :where(.yoya-vechart) {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yoya-vglow-button::before {
+    animation: none !important;
+    left: 35%;
+    width: 30%;
+  }
+
+  .yoya-vglow-button[data-glow-motion='always']::before {
+    animation: yoya-glow-button-sweep var(--yoya-glow-duration) ease-in-out infinite !important;
+    left: -45%;
+    width: 40%;
+  }
+
+  .yoya-vglow-button[data-glow-direction='rtl'][data-glow-motion='always']::before {
+    animation-name: yoya-glow-button-sweep-rtl !important;
+  }
+
+  .yoya-vglow-button[data-glow-motion='always'] .yoya-vglow-button-ripple {
+    animation: yoya-glow-button-ripple 520ms ease-out forwards !important;
+  }
+
+  .yoya-vglow-button[data-glow-play='hover']::before,
+  .yoya-vglow-button[data-glow-play='off']::before,
+  .yoya-vglow-button[disabled]::before,
+  .yoya-vglow-button[data-interaction='disabled']::before {
+    opacity: 0 !important;
+  }
+
+  .yoya-vglow-button[data-glow-play='hover']:hover::before,
+  .yoya-vglow-button[data-glow-play='hover']:focus-visible::before {
+    opacity: 1 !important;
+  }
+
+  :where(.yoya-vskeleton) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .yoya-vskeleton .yoya-vskeleton-bar,
+  .yoya-vskeleton .yoya-vskeleton-avatar,
+  .yoya-vskeleton .yoya-vskeleton-block {
+    animation: yoya-vskeleton-shimmer 1.4s ease-in-out infinite;
+    background: linear-gradient(
+      90deg,
+      var(--yoya-color-surface-muted, #f5f5f5) 25%,
+      var(--yoya-color-surface-active, #e9e9e9) 37%,
+      var(--yoya-color-surface-muted, #f5f5f5) 63%
+    );
+    background-size: 400% 100%;
+  }
+
+  .yoya-vskeleton .yoya-vskeleton-bar {
+    border-radius: 4px;
+    height: 20px;
+  }
+
+  .yoya-vskeleton .yoya-vskeleton-avatar {
+    border-radius: 50%;
+    flex: 0 0 auto;
+  }
+
+  .yoya-vskeleton .yoya-vskeleton-block {
+    border-radius: 8px;
+    height: 96px;
+  }
+
+  @keyframes yoya-vskeleton-shimmer {
+    from {
+      background-position: 100% 50%;
+    }
+
+    to {
+      background-position: 0 50%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .yoya-vskeleton[data-motion='auto'] .yoya-vskeleton-bar,
+    .yoya-vskeleton[data-motion='auto'] .yoya-vskeleton-avatar,
+    .yoya-vskeleton[data-motion='auto'] .yoya-vskeleton-block {
+      animation: none;
+    }
+  }
+
+  :where(.yoya-vlazyimage) {
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100%;
+    min-height: 48px;
+    min-width: 48px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .yoya-vlazyimage .yoya-vlazyimage-placeholder {
+    background: var(--yoya-color-surface-muted, #f5f5f5);
+    inset: 0;
+    position: absolute;
+  }
+
+  .yoya-vlazyimage img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    position: relative;
+    transition: opacity 240ms ease;
+    width: 100%;
+  }
+
+  .yoya-vlazyimage .yoya-vlazyimage-retry {
+    align-items: center;
+    background: var(--yoya-color-surface, #ffffff);
+    border: 1px solid var(--yoya-color-border-strong, #cbd5e1);
+    border-radius: 6px;
+    box-sizing: border-box;
+    color: var(--yoya-color-text-muted, #64748b);
+    cursor: pointer;
+    font-size: 12px;
+    gap: 6px;
+    inset: 50% auto auto 50%;
+    line-height: 1;
+    padding: 7px 10px;
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+
+  .yoya-vlazyimage .yoya-vlazyimage-retry:hover {
+    border-color: var(--yoya-color-primary, #2563eb);
+    color: var(--yoya-color-primary, #2563eb);
+  }
+
+  :where(.yoya-vtransition) {
+    box-sizing: border-box;
+  }
+
+  .yoya-vtransition[data-state='enter'] {
+    animation: yoya-vtransition-enter var(--yoya-vtransition-duration, 280ms) ease both;
+  }
+
+  .yoya-vtransition[data-state='leave'] {
+    animation: yoya-vtransition-leave var(--yoya-vtransition-duration, 240ms) ease both;
+  }
+
+  .yoya-vtransition[data-motion='always'] {
+    animation: none !important;
+  }
+
+  @keyframes yoya-vtransition-enter {
+    from {
+      opacity: 0;
+      transform: translateY(12px) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes yoya-vtransition-leave {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-12px) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .yoya-vtransition[data-motion='auto'] {
+      animation: none;
+    }
+  }
+
+  :where(.yoya-vmasonry) {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .yoya-vmasonry > * {
+    break-inside: avoid;
+    box-sizing: border-box;
+    margin-bottom: var(--yoya-masonry-gap, 16px);
+  }
+
+  :where(.yoya-vimagepreview) {
+    box-sizing: border-box;
+    cursor: zoom-in;
+    display: inline-block;
+    line-height: 0;
+  }
+
+  .yoya-vimagepreview > img {
+    display: block;
+    max-width: 100%;
+  }
+
+  .yoya-vimagepreview-overlay {
+    align-items: center;
+    background: rgba(0, 0, 0, 0.72);
+    box-sizing: border-box;
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    position: fixed;
+    z-index: 1000;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-backdrop {
+    inset: 0;
+    position: absolute;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-stage {
+    position: relative;
+    transform-origin: center;
+    transition: transform 180ms ease;
+    z-index: 1;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-stage .yoya-vlazyimage {
+    max-height: 86vh;
+    max-width: 90vw;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-close {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.14);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: #ffffff;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 22px;
+    height: 40px;
+    justify-content: center;
+    line-height: 1;
+    position: absolute;
+    right: 18px;
+    top: 18px;
+    width: 40px;
+    z-index: 2;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-close:hover {
+    background: rgba(255, 255, 255, 0.26);
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-toolbar {
+    align-items: center;
+    bottom: 18px;
+    display: flex;
+    gap: 8px;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    z-index: 2;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-tool {
+    align-items: center;
+    background: rgba(255, 255, 255, 0.14);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 6px;
+    box-sizing: border-box;
+    color: #ffffff;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 13px;
+    height: 32px;
+    justify-content: center;
+    line-height: 1;
+    min-width: 44px;
+    padding: 0 10px;
+  }
+
+  .yoya-vimagepreview-overlay .yoya-vimagepreview-tool:hover {
+    background: rgba(255, 255, 255, 0.26);
+  }
+}