create-yoya-ui 0.2.2 → 0.2.3

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

@@ -1,2289 +0,0 @@
-@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);
-  }
-}