/*! UI Vault 3.1.0 · collections — gradients, patterns, loaders, text effects, shadows, image hovers, dividers, tooltips, charts, icons. MIT */
@keyframes uv-c-rot { to { transform: rotate(360deg); } }
@keyframes uv-c-flow { 50% { background-position: 100% 50%; } }
@keyframes uv-c-ping { 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes uv-c-breathe { 50% { transform: scale(.55); opacity: .5; } }
@keyframes uv-c-ripple { from { transform: scale(.1); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes uv-c-dots { 0% { background-size: 33.3% 40%, 33.3% 40%, 33.3% 40%; } 33% { background-size: 33.3% 100%, 33.3% 40%, 33.3% 40%; } 66% { background-size: 33.3% 40%, 33.3% 100%, 33.3% 40%; } 100% { background-size: 33.3% 40%, 33.3% 40%, 33.3% 100%; } }
@keyframes uv-c-bars { 0%, 100% { background-size: 20% 100%, 20% 40%, 20% 70%; } 33% { background-size: 20% 40%, 20% 100%, 20% 40%; } 66% { background-size: 20% 70%, 20% 40%, 20% 100%; } }
@keyframes uv-c-slide { 0% { background-position: -30% 0; } 100% { background-position: 130% 0; } }
@keyframes uv-c-roll { to { background-position: 22.6px 0; } }
@keyframes uv-c-fill { 0% { background-size: 0 100%; } 80%, 100% { background-size: 100% 100%; } }
@keyframes uv-c-flip { 0% { transform: perspective(80px) rotateX(0) rotateY(0); } 50% { transform: perspective(80px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(80px) rotateX(-180deg) rotateY(-180deg); } }
@keyframes uv-c-sqspin { 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg) scale(.6); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
@keyframes uv-c-hg { 50% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@keyframes uv-c-heart { 0%, 100% { transform: rotate(45deg) scale(1); } 30% { transform: rotate(45deg) scale(1.2); } }
@keyframes uv-c-bounce { from { transform: translateY(0) scale(1.1, .9); } to { transform: translateY(-26px); } }
@keyframes uv-c-typing { 0%, 100% { background-position: 10px 50%, 25px 50%, 40px 50%; } 20% { background-position: 10px 30%, 25px 50%, 40px 50%; } 40% { background-position: 10px 50%, 25px 30%, 40px 50%; } 60% { background-position: 10px 50%, 25px 50%, 40px 30%; } }
@property --uv-c-p { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
@keyframes uv-c-pie { to { --uv-c-p: 100%; } }
@keyframes uv-c-blink { 50% { opacity: .3; } }
@keyframes uv-c-wave { to { background-position: 20% 50%; } }
@keyframes uv-c-shimmer { to { background-position: -200% 0; } }
@keyframes uv-c-bounce-t { to { transform: translateY(-6px); letter-spacing: .3em; } }
@keyframes uv-c-cube { 25% { transform: rotate(90deg) scale(.7); border-radius: 50%; } 50% { transform: rotate(180deg); border-radius: 0; } 75% { transform: rotate(270deg) scale(.7); border-radius: 50%; } 100% { transform: rotate(360deg); } }
@keyframes uv-c-dna { to { background-position: 14px 0, 21px 100%; } }
@keyframes uv-c-glitch { 0% { transform: translate(0); clip-path: inset(0 0 0 0); } 50% { transform: translate(-3px, 1px); clip-path: inset(0 30% 0 0); } 100% { transform: translate(2px, -1px); clip-path: inset(0 0 0 40%); } }
@keyframes uv-c-pan { to { background-position: 200% 0; } }
@keyframes uv-c-sheen { 0%, 60% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }
@keyframes uv-c-flicker { 0%, 19%, 21%, 23%, 55%, 57%, 100% { opacity: 1; } 20%, 22%, 56% { opacity: .45; } }
@keyframes uv-c-tglitch { 0%, 92%, 100% { text-shadow: 2px 0 #ff2bd6, -2px 0 #00f0ff; transform: none; } 94% { text-shadow: -3px 0 #ff2bd6, 3px 0 #00f0ff; transform: translateX(2px); } 97% { transform: translateX(-2px); } }
@keyframes uv-c-waveText { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes uv-c-blurin { from { filter: blur(8px); opacity: .2; letter-spacing: .3em; } }

.uv-icon { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
/* ── Gradients ── */
.uv-g-sunset { background: linear-gradient(135deg, #ff512f, #f09819, #ffd86f); }
.uv-g-sunset-glow { background: radial-gradient(120% 90% at 20% 10%, #ff512f 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ffd86f 0%, transparent 60%), #f09819; }
.uv-g-sunset-conic { background: conic-gradient(from 200deg at 60% 40%, #ff512f, #f09819, #ffd86f, #ff512f); }
.uv-g-ocean { background: linear-gradient(135deg, #2e3192, #1bffff); }
.uv-g-ocean-glow { background: radial-gradient(120% 90% at 20% 10%, #2e3192 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #1bffff 0%, transparent 60%), #0b0b10; }
.uv-g-ocean-conic { background: conic-gradient(from 200deg at 60% 40%, #2e3192, #1bffff, #2e3192); }
.uv-g-aurora { background: linear-gradient(135deg, #00c9a7, #845ec2, #ff6f91); }
.uv-g-aurora-glow { background: radial-gradient(120% 90% at 20% 10%, #00c9a7 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ff6f91 0%, transparent 60%), #845ec2; }
.uv-g-aurora-conic { background: conic-gradient(from 200deg at 60% 40%, #00c9a7, #845ec2, #ff6f91, #00c9a7); }
.uv-g-peach { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.uv-g-peach-glow { background: radial-gradient(120% 90% at 20% 10%, #ffecd2 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #fcb69f 0%, transparent 60%), #0b0b10; }
.uv-g-peach-conic { background: conic-gradient(from 200deg at 60% 40%, #ffecd2, #fcb69f, #ffecd2); }
.uv-g-lagoon { background: linear-gradient(135deg, #43cea2, #185a9d); }
.uv-g-lagoon-glow { background: radial-gradient(120% 90% at 20% 10%, #43cea2 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #185a9d 0%, transparent 60%), #0b0b10; }
.uv-g-lagoon-conic { background: conic-gradient(from 200deg at 60% 40%, #43cea2, #185a9d, #43cea2); }
.uv-g-berry { background: linear-gradient(135deg, #8e2de2, #4a00e0); }
.uv-g-berry-glow { background: radial-gradient(120% 90% at 20% 10%, #8e2de2 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #4a00e0 0%, transparent 60%), #0b0b10; }
.uv-g-berry-conic { background: conic-gradient(from 200deg at 60% 40%, #8e2de2, #4a00e0, #8e2de2); }
.uv-g-citrus { background: linear-gradient(135deg, #f7971e, #ffd200); }
.uv-g-citrus-glow { background: radial-gradient(120% 90% at 20% 10%, #f7971e 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ffd200 0%, transparent 60%), #0b0b10; }
.uv-g-citrus-conic { background: conic-gradient(from 200deg at 60% 40%, #f7971e, #ffd200, #f7971e); }
.uv-g-mint { background: linear-gradient(135deg, #d4fc79, #96e6a1); }
.uv-g-mint-glow { background: radial-gradient(120% 90% at 20% 10%, #d4fc79 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #96e6a1 0%, transparent 60%), #0b0b10; }
.uv-g-mint-conic { background: conic-gradient(from 200deg at 60% 40%, #d4fc79, #96e6a1, #d4fc79); }
.uv-g-candy { background: linear-gradient(135deg, #ff9a9e, #fecfef, #a18cd1); }
.uv-g-candy-glow { background: radial-gradient(120% 90% at 20% 10%, #ff9a9e 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #a18cd1 0%, transparent 60%), #fecfef; }
.uv-g-candy-conic { background: conic-gradient(from 200deg at 60% 40%, #ff9a9e, #fecfef, #a18cd1, #ff9a9e); }
.uv-g-ember { background: linear-gradient(135deg, #ff416c, #ff4b2b); }
.uv-g-ember-glow { background: radial-gradient(120% 90% at 20% 10%, #ff416c 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ff4b2b 0%, transparent 60%), #0b0b10; }
.uv-g-ember-conic { background: conic-gradient(from 200deg at 60% 40%, #ff416c, #ff4b2b, #ff416c); }
.uv-g-deep-space { background: linear-gradient(135deg, #000428, #004e92); }
.uv-g-deep-space-glow { background: radial-gradient(120% 90% at 20% 10%, #000428 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #004e92 0%, transparent 60%), #0b0b10; }
.uv-g-deep-space-conic { background: conic-gradient(from 200deg at 60% 40%, #000428, #004e92, #000428); }
.uv-g-lavender { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); }
.uv-g-lavender-glow { background: radial-gradient(120% 90% at 20% 10%, #e0c3fc 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #8ec5fc 0%, transparent 60%), #0b0b10; }
.uv-g-lavender-conic { background: conic-gradient(from 200deg at 60% 40%, #e0c3fc, #8ec5fc, #e0c3fc); }
.uv-g-coral { background: linear-gradient(135deg, #ff7e5f, #feb47b); }
.uv-g-coral-glow { background: radial-gradient(120% 90% at 20% 10%, #ff7e5f 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #feb47b 0%, transparent 60%), #0b0b10; }
.uv-g-coral-conic { background: conic-gradient(from 200deg at 60% 40%, #ff7e5f, #feb47b, #ff7e5f); }
.uv-g-forest { background: linear-gradient(135deg, #134e5e, #71b280); }
.uv-g-forest-glow { background: radial-gradient(120% 90% at 20% 10%, #134e5e 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #71b280 0%, transparent 60%), #0b0b10; }
.uv-g-forest-conic { background: conic-gradient(from 200deg at 60% 40%, #134e5e, #71b280, #134e5e); }
.uv-g-royal { background: linear-gradient(135deg, #141e30, #243b55); }
.uv-g-royal-glow { background: radial-gradient(120% 90% at 20% 10%, #141e30 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #243b55 0%, transparent 60%), #0b0b10; }
.uv-g-royal-conic { background: conic-gradient(from 200deg at 60% 40%, #141e30, #243b55, #141e30); }
.uv-g-flamingo { background: linear-gradient(135deg, #ee9ca7, #ffdde1); }
.uv-g-flamingo-glow { background: radial-gradient(120% 90% at 20% 10%, #ee9ca7 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ffdde1 0%, transparent 60%), #0b0b10; }
.uv-g-flamingo-conic { background: conic-gradient(from 200deg at 60% 40%, #ee9ca7, #ffdde1, #ee9ca7); }
.uv-g-neon-dream { background: linear-gradient(135deg, #f72585, #7209b7, #3a0ca3, #4cc9f0); }
.uv-g-neon-dream-glow { background: radial-gradient(120% 90% at 20% 10%, #f72585 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #4cc9f0 0%, transparent 60%), #3a0ca3; }
.uv-g-neon-dream-conic { background: conic-gradient(from 200deg at 60% 40%, #f72585, #7209b7, #3a0ca3, #4cc9f0, #f72585); }
.uv-g-gold-rush { background: linear-gradient(135deg, #f9d423, #ff4e50); }
.uv-g-gold-rush-glow { background: radial-gradient(120% 90% at 20% 10%, #f9d423 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ff4e50 0%, transparent 60%), #0b0b10; }
.uv-g-gold-rush-conic { background: conic-gradient(from 200deg at 60% 40%, #f9d423, #ff4e50, #f9d423); }
.uv-g-arctic { background: linear-gradient(135deg, #e0eafc, #cfdef3); }
.uv-g-arctic-glow { background: radial-gradient(120% 90% at 20% 10%, #e0eafc 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #cfdef3 0%, transparent 60%), #0b0b10; }
.uv-g-arctic-conic { background: conic-gradient(from 200deg at 60% 40%, #e0eafc, #cfdef3, #e0eafc); }
.uv-g-cosmic { background: linear-gradient(135deg, #ff00cc, #333399); }
.uv-g-cosmic-glow { background: radial-gradient(120% 90% at 20% 10%, #ff00cc 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #333399 0%, transparent 60%), #0b0b10; }
.uv-g-cosmic-conic { background: conic-gradient(from 200deg at 60% 40%, #ff00cc, #333399, #ff00cc); }
.uv-g-lime-punch { background: linear-gradient(135deg, #a8ff78, #78ffd6); }
.uv-g-lime-punch-glow { background: radial-gradient(120% 90% at 20% 10%, #a8ff78 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #78ffd6 0%, transparent 60%), #0b0b10; }
.uv-g-lime-punch-conic { background: conic-gradient(from 200deg at 60% 40%, #a8ff78, #78ffd6, #a8ff78); }
.uv-g-velvet { background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b); }
.uv-g-velvet-glow { background: radial-gradient(120% 90% at 20% 10%, #3a1c71 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ffaf7b 0%, transparent 60%), #d76d77; }
.uv-g-velvet-conic { background: conic-gradient(from 200deg at 60% 40%, #3a1c71, #d76d77, #ffaf7b, #3a1c71); }
.uv-g-steel { background: linear-gradient(135deg, #bdc3c7, #2c3e50); }
.uv-g-steel-glow { background: radial-gradient(120% 90% at 20% 10%, #bdc3c7 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #2c3e50 0%, transparent 60%), #0b0b10; }
.uv-g-steel-conic { background: conic-gradient(from 200deg at 60% 40%, #bdc3c7, #2c3e50, #bdc3c7); }
.uv-g-mango { background: linear-gradient(135deg, #ffe259, #ffa751); }
.uv-g-mango-glow { background: radial-gradient(120% 90% at 20% 10%, #ffe259 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ffa751 0%, transparent 60%), #0b0b10; }
.uv-g-mango-conic { background: conic-gradient(from 200deg at 60% 40%, #ffe259, #ffa751, #ffe259); }
.uv-g-rose-gold { background: linear-gradient(135deg, #b76e79, #e8c4a0, #f6e0c8); }
.uv-g-rose-gold-glow { background: radial-gradient(120% 90% at 20% 10%, #b76e79 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #f6e0c8 0%, transparent 60%), #e8c4a0; }
.uv-g-rose-gold-conic { background: conic-gradient(from 200deg at 60% 40%, #b76e79, #e8c4a0, #f6e0c8, #b76e79); }
.uv-g-sky { background: linear-gradient(135deg, #56ccf2, #2f80ed); }
.uv-g-sky-glow { background: radial-gradient(120% 90% at 20% 10%, #56ccf2 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #2f80ed 0%, transparent 60%), #0b0b10; }
.uv-g-sky-conic { background: conic-gradient(from 200deg at 60% 40%, #56ccf2, #2f80ed, #56ccf2); }
.uv-g-toxic { background: linear-gradient(135deg, #bff098, #6fd6ff); }
.uv-g-toxic-glow { background: radial-gradient(120% 90% at 20% 10%, #bff098 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #6fd6ff 0%, transparent 60%), #0b0b10; }
.uv-g-toxic-conic { background: conic-gradient(from 200deg at 60% 40%, #bff098, #6fd6ff, #bff098); }
.uv-g-dusk { background: linear-gradient(135deg, #2c3e50, #fd746c); }
.uv-g-dusk-glow { background: radial-gradient(120% 90% at 20% 10%, #2c3e50 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #fd746c 0%, transparent 60%), #0b0b10; }
.uv-g-dusk-conic { background: conic-gradient(from 200deg at 60% 40%, #2c3e50, #fd746c, #2c3e50); }
.uv-g-plum { background: linear-gradient(135deg, #614385, #516395); }
.uv-g-plum-glow { background: radial-gradient(120% 90% at 20% 10%, #614385 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #516395 0%, transparent 60%), #0b0b10; }
.uv-g-plum-conic { background: conic-gradient(from 200deg at 60% 40%, #614385, #516395, #614385); }
.uv-g-tropic { background: linear-gradient(135deg, #00f260, #0575e6); }
.uv-g-tropic-glow { background: radial-gradient(120% 90% at 20% 10%, #00f260 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #0575e6 0%, transparent 60%), #0b0b10; }
.uv-g-tropic-conic { background: conic-gradient(from 200deg at 60% 40%, #00f260, #0575e6, #00f260); }
.uv-g-fire { background: linear-gradient(135deg, #f12711, #f5af19); }
.uv-g-fire-glow { background: radial-gradient(120% 90% at 20% 10%, #f12711 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #f5af19 0%, transparent 60%), #0b0b10; }
.uv-g-fire-conic { background: conic-gradient(from 200deg at 60% 40%, #f12711, #f5af19, #f12711); }
.uv-g-blush { background: linear-gradient(135deg, #ffafbd, #ffc3a0); }
.uv-g-blush-glow { background: radial-gradient(120% 90% at 20% 10%, #ffafbd 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #ffc3a0 0%, transparent 60%), #0b0b10; }
.uv-g-blush-conic { background: conic-gradient(from 200deg at 60% 40%, #ffafbd, #ffc3a0, #ffafbd); }
.uv-g-midnight-city { background: linear-gradient(135deg, #232526, #414345); }
.uv-g-midnight-city-glow { background: radial-gradient(120% 90% at 20% 10%, #232526 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #414345 0%, transparent 60%), #0b0b10; }
.uv-g-midnight-city-conic { background: conic-gradient(from 200deg at 60% 40%, #232526, #414345, #232526); }
.uv-g-sea-glass { background: linear-gradient(135deg, #a1ffce, #faffd1); }
.uv-g-sea-glass-glow { background: radial-gradient(120% 90% at 20% 10%, #a1ffce 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #faffd1 0%, transparent 60%), #0b0b10; }
.uv-g-sea-glass-conic { background: conic-gradient(from 200deg at 60% 40%, #a1ffce, #faffd1, #a1ffce); }
.uv-g-vapor { background: linear-gradient(135deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff); }
.uv-g-vapor-glow { background: radial-gradient(120% 90% at 20% 10%, #ff6ad5 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #94d0ff 0%, transparent 60%), #ad8cff; }
.uv-g-vapor-conic { background: conic-gradient(from 200deg at 60% 40%, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #ff6ad5); }
.uv-g-printstream { background: linear-gradient(135deg, #ffffff, #e9e1f7, #d6efff, #fff1d6); }
.uv-g-printstream-glow { background: radial-gradient(120% 90% at 20% 10%, #ffffff 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #fff1d6 0%, transparent 60%), #d6efff; }
.uv-g-printstream-conic { background: conic-gradient(from 200deg at 60% 40%, #ffffff, #e9e1f7, #d6efff, #fff1d6, #ffffff); }
.uv-g-deep-metal { background: linear-gradient(135deg, #a9cbff, #3f74dc, #0a2560, #1d4cad, #86b4ff); }
.uv-g-deep-metal-glow { background: radial-gradient(120% 90% at 20% 10%, #a9cbff 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #86b4ff 0%, transparent 60%), #0a2560; }
.uv-g-deep-metal-conic { background: conic-gradient(from 200deg at 60% 40%, #a9cbff, #3f74dc, #0a2560, #1d4cad, #86b4ff, #a9cbff); }
.uv-g-chrome { background: linear-gradient(135deg, #ffffff, #dfe3ea, #8a919c, #c9ced6, #f4f6f9); }
.uv-g-chrome-glow { background: radial-gradient(120% 90% at 20% 10%, #ffffff 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #f4f6f9 0%, transparent 60%), #8a919c; }
.uv-g-chrome-conic { background: conic-gradient(from 200deg at 60% 40%, #ffffff, #dfe3ea, #8a919c, #c9ced6, #f4f6f9, #ffffff); }
.uv-g-gold-leaf { background: linear-gradient(135deg, #fff3c4, #e6c25a, #9a6f12, #d8b04a); }
.uv-g-gold-leaf-glow { background: radial-gradient(120% 90% at 20% 10%, #fff3c4 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #d8b04a 0%, transparent 60%), #9a6f12; }
.uv-g-gold-leaf-conic { background: conic-gradient(from 200deg at 60% 40%, #fff3c4, #e6c25a, #9a6f12, #d8b04a, #fff3c4); }
.uv-g-holo { background: linear-gradient(135deg, #ff9ae6, #9ad3ff, #b8ff9a, #fff59a); }
.uv-g-holo-glow { background: radial-gradient(120% 90% at 20% 10%, #ff9ae6 0%, transparent 55%), radial-gradient(100% 90% at 90% 100%, #fff59a 0%, transparent 60%), #b8ff9a; }
.uv-g-holo-conic { background: conic-gradient(from 200deg at 60% 40%, #ff9ae6, #9ad3ff, #b8ff9a, #fff59a, #ff9ae6); }
.uv-g-theme { background: linear-gradient(135deg, var(--uv-accent), var(--uv-accent-2)); }
.uv-g-theme-mesh { background: radial-gradient(at 15% 15%, color-mix(in srgb, var(--uv-accent) 60%, transparent) 0, transparent 50%), radial-gradient(at 85% 20%, color-mix(in srgb, var(--uv-accent-2) 55%, transparent) 0, transparent 50%), radial-gradient(at 50% 100%, color-mix(in srgb, var(--uv-accent) 40%, transparent) 0, transparent 60%), var(--uv-surface); }
.uv-g-animated { background: linear-gradient(120deg, #ff6ad5, #8795e8, #94d0ff, #ff6ad5) 0 0 / 300% 300%; animation: uv-c-flow 8s ease infinite; }
/* ── Patterns ── */
.uv-p-dots { background: radial-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1.5px, transparent 1.6px) 0 0 / 16px 16px, var(--uv-surface);  }
.uv-p-dots-ink { background: radial-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1.5px, transparent 1.6px) 0 0 / 16px 16px, var(--uv-bg);  }
.uv-p-dots-offset { background: radial-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1.5px, transparent 1.6px) 0 0 / 20px 20px, radial-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1.5px, transparent 1.6px) 10px 10px / 20px 20px, var(--uv-surface);  }
.uv-p-dots-offset-ink { background: radial-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1.5px, transparent 1.6px) 0 0 / 20px 20px, radial-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1.5px, transparent 1.6px) 10px 10px / 20px 20px, var(--uv-bg);  }
.uv-p-grid { background: linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 24px 24px, var(--uv-surface);  }
.uv-p-grid-ink { background: linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 24px 24px, var(--uv-bg);  }
.uv-p-graph { background: linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) .5px, transparent .5px) 0 0 / 20px 20px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) .5px, transparent .5px) 0 0 / 20px 20px, var(--uv-surface);  }
.uv-p-graph-ink { background: linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 100px 100px, linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) .5px, transparent .5px) 0 0 / 20px 20px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) .5px, transparent .5px) 0 0 / 20px 20px, var(--uv-bg);  }
.uv-p-lines { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 1px, transparent 1px 12px), var(--uv-surface);  }
.uv-p-lines-ink { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 1px, transparent 1px 12px), var(--uv-bg);  }
.uv-p-vlines { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 1px, transparent 1px 12px), var(--uv-surface);  }
.uv-p-vlines-ink { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 1px, transparent 1px 12px), var(--uv-bg);  }
.uv-p-diagonal { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 2px, transparent 2px 12px), var(--uv-surface);  }
.uv-p-diagonal-ink { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 2px, transparent 2px 12px), var(--uv-bg);  }
.uv-p-crosshatch { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 1px, transparent 1px 10px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 1px, transparent 1px 10px), var(--uv-surface);  }
.uv-p-crosshatch-ink { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 1px, transparent 1px 10px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 1px, transparent 1px 10px), var(--uv-bg);  }
.uv-p-checker { background: conic-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 75%, transparent 0) 0 0 / 24px 24px, var(--uv-surface);  }
.uv-p-checker-ink { background: conic-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 75%, transparent 0) 0 0 / 24px 24px, var(--uv-bg);  }
.uv-p-zigzag { background: linear-gradient(135deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(225deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(315deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25%) 0 0 / 24px 24px, var(--uv-surface);  }
.uv-p-zigzag-ink { background: linear-gradient(135deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(225deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(315deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25%) 0 0 / 24px 24px, linear-gradient(45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25%) 0 0 / 24px 24px, var(--uv-bg);  }
.uv-p-triangles { background: linear-gradient(60deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 75%) 0 0 / 28px 48px, linear-gradient(120deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 75%) 0 0 / 28px 48px, var(--uv-surface);  }
.uv-p-triangles-ink { background: linear-gradient(60deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--uv-text) 18%, transparent) 75%) 0 0 / 28px 48px, linear-gradient(120deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25.5%, transparent 75%, color-mix(in srgb, var(--uv-text) 18%, transparent) 75%) 0 0 / 28px 48px, var(--uv-bg);  }
.uv-p-waves { background: radial-gradient(circle at 50% 100%, transparent 9px, color-mix(in srgb, var(--uv-accent) 35%, transparent) 10px 11px, transparent 12px) 0 0 / 24px 12px, var(--uv-surface);  }
.uv-p-waves-ink { background: radial-gradient(circle at 50% 100%, transparent 9px, color-mix(in srgb, var(--uv-text) 18%, transparent) 10px 11px, transparent 12px) 0 0 / 24px 12px, var(--uv-bg);  }
.uv-p-circles { background: radial-gradient(circle, transparent 6px, color-mix(in srgb, var(--uv-accent) 35%, transparent) 7px 8px, transparent 9px) 0 0 / 24px 24px, var(--uv-surface);  }
.uv-p-circles-ink { background: radial-gradient(circle, transparent 6px, color-mix(in srgb, var(--uv-text) 18%, transparent) 7px 8px, transparent 9px) 0 0 / 24px 24px, var(--uv-bg);  }
.uv-p-plus { background: linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 0) 50% 50% / 2px 10px no-repeat, linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 0) 50% 50% / 10px 2px no-repeat, var(--uv-surface);  }
.uv-p-plus-ink { background: linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 0 0) 50% 50% / 2px 10px no-repeat, linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 0 0) 50% 50% / 10px 2px no-repeat, var(--uv-bg);  }
.uv-p-diamonds { background: linear-gradient(45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 75%) 0 0 / 20px 20px, linear-gradient(45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 75%) 10px 10px / 20px 20px, var(--uv-surface);  }
.uv-p-diamonds-ink { background: linear-gradient(45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--uv-text) 18%, transparent) 75%) 0 0 / 20px 20px, linear-gradient(45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--uv-text) 18%, transparent) 75%) 10px 10px / 20px 20px, var(--uv-bg);  }
.uv-p-bricks { background: linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 40px 20px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 20px 20px / 40px 40px, var(--uv-surface);  }
.uv-p-bricks-ink { background: linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 40px 20px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 20px 20px / 40px 40px, var(--uv-bg);  }
.uv-p-stripes-wide { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 14px, transparent 14px 28px), var(--uv-surface);  }
.uv-p-stripes-wide-ink { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 14px, transparent 14px 28px), var(--uv-bg);  }
.uv-p-halftone { background: radial-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 30%, transparent 32%) 0 0 / 12px 12px, var(--uv-surface);  }
.uv-p-halftone-ink { background: radial-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 30%, transparent 32%) 0 0 / 12px 12px, var(--uv-bg);  }
.uv-p-scales { background: radial-gradient(circle at 100% 150%, transparent 24%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25% 28%, transparent 29%) 0 0 / 24px 24px, radial-gradient(circle at 0 150%, transparent 24%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 25% 28%, transparent 29%) 0 0 / 24px 24px, var(--uv-surface);  }
.uv-p-scales-ink { background: radial-gradient(circle at 100% 150%, transparent 24%, color-mix(in srgb, var(--uv-text) 18%, transparent) 25% 28%, transparent 29%) 0 0 / 24px 24px, radial-gradient(circle at 0 150%, transparent 24%, color-mix(in srgb, var(--uv-text) 18%, transparent) 25% 28%, transparent 29%) 0 0 / 24px 24px, var(--uv-bg);  }
.uv-p-blueprint { background: linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 2px, transparent 2px) -2px -2px / 100px 100px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 2px, transparent 2px) -2px -2px / 100px 100px, linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) -1px -1px / 20px 20px, linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) -1px -1px / 20px 20px, var(--uv-surface);  }
.uv-p-blueprint-ink { background: linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 2px, transparent 2px) -2px -2px / 100px 100px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 2px, transparent 2px) -2px -2px / 100px 100px, linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) -1px -1px / 20px 20px, linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) -1px -1px / 20px 20px, var(--uv-bg);  }
.uv-p-isometric { background: linear-gradient(30deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 87.5%) 0 0 / 40px 70px, linear-gradient(150deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 87.5%) 0 0 / 40px 70px, linear-gradient(30deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 87.5%) 20px 35px / 40px 70px, linear-gradient(150deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 87.5%) 20px 35px / 40px 70px, var(--uv-surface);  }
.uv-p-isometric-ink { background: linear-gradient(30deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-text) 18%, transparent) 87.5%) 0 0 / 40px 70px, linear-gradient(150deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-text) 18%, transparent) 87.5%) 0 0 / 40px 70px, linear-gradient(30deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-text) 18%, transparent) 87.5%) 20px 35px / 40px 70px, linear-gradient(150deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--uv-text) 18%, transparent) 87.5%) 20px 35px / 40px 70px, var(--uv-bg);  }
.uv-p-pinstripe { background: repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--uv-accent) 35%, transparent) 18px 19px), var(--uv-surface);  }
.uv-p-pinstripe-ink { background: repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--uv-text) 18%, transparent) 18px 19px), var(--uv-bg);  }
.uv-p-tartan { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 6px, transparent 6px 20px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 6px, transparent 6px 20px), var(--uv-surface);  }
.uv-p-tartan-ink { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 6px, transparent 6px 20px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 6px, transparent 6px 20px), var(--uv-bg);  }
.uv-p-noise { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--uv-surface);  }
.uv-p-noise-ink { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--uv-bg);  }
.uv-p-sunburst { background: repeating-conic-gradient(from 0deg at 50% 100%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 0 6deg, transparent 6deg 12deg), var(--uv-surface);  }
.uv-p-sunburst-ink { background: repeating-conic-gradient(from 0deg at 50% 100%, color-mix(in srgb, var(--uv-text) 18%, transparent) 0 6deg, transparent 6deg 12deg), var(--uv-bg);  }
.uv-p-spotlight { background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--uv-accent) 35%, transparent), transparent 70%), var(--uv-surface);  }
.uv-p-spotlight-ink { background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--uv-text) 18%, transparent), transparent 70%), var(--uv-bg);  }
.uv-p-dashes { background: linear-gradient(90deg, color-mix(in srgb, var(--uv-accent) 35%, transparent) 50%, transparent 0) 0 0 / 16px 8px, var(--uv-surface);  }
.uv-p-dashes-ink { background: linear-gradient(90deg, color-mix(in srgb, var(--uv-text) 18%, transparent) 50%, transparent 0) 0 0 / 16px 8px, var(--uv-bg);  }
.uv-p-cross-dots { background: radial-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1.5px) 0 0 / 10px 10px, linear-gradient(color-mix(in srgb, var(--uv-accent) 35%, transparent) 1px, transparent 1px) 0 0 / 40px 40px, var(--uv-surface);  }
.uv-p-cross-dots-ink { background: radial-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1.5px) 0 0 / 10px 10px, linear-gradient(color-mix(in srgb, var(--uv-text) 18%, transparent) 1px, transparent 1px) 0 0 / 40px 40px, var(--uv-bg);  }
.uv-p-hex { background: radial-gradient(circle farthest-side at 0% 50%, transparent 47%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 48% 52%, transparent 53%) 0 0 / 28px 48px, radial-gradient(circle farthest-side at 100% 50%, transparent 47%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 48% 52%, transparent 53%) 0 0 / 28px 48px, var(--uv-surface);  }
.uv-p-hex-ink { background: radial-gradient(circle farthest-side at 0% 50%, transparent 47%, color-mix(in srgb, var(--uv-text) 18%, transparent) 48% 52%, transparent 53%) 0 0 / 28px 48px, radial-gradient(circle farthest-side at 100% 50%, transparent 47%, color-mix(in srgb, var(--uv-text) 18%, transparent) 48% 52%, transparent 53%) 0 0 / 28px 48px, var(--uv-bg);  }
.uv-p-rain { background: linear-gradient(transparent 70%, color-mix(in srgb, var(--uv-accent) 35%, transparent) 70%) 0 0 / 3px 18px, var(--uv-surface);  }
.uv-p-rain-ink { background: linear-gradient(transparent 70%, color-mix(in srgb, var(--uv-text) 18%, transparent) 70%) 0 0 / 3px 18px, var(--uv-bg);  }
/* ── CSS loaders ── */
.uv-l-spin { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--uv-line-2); border-top-color: var(--uv-accent); animation: uv-c-rot .8s linear infinite; }
.uv-l-spin-duo { width: 36px; height: 36px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--uv-accent); border-bottom-color: var(--uv-accent-2); animation: uv-c-rot 1s linear infinite; }
.uv-l-spin-thin { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; border-left-color: var(--uv-accent); animation: uv-c-rot .6s linear infinite; }
.uv-l-arc-gradient { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(transparent 10%, var(--uv-accent)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); animation: uv-c-rot .9s linear infinite; }
.uv-l-pulse-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--uv-accent); box-shadow: 0 0 0 0 var(--uv-accent); animation: uv-c-ping 1.3s infinite; }
.uv-l-breathe { width: 34px; height: 34px; border-radius: 50%; background: var(--uv-accent); animation: uv-c-breathe 1.2s ease-in-out infinite; }
.uv-l-ripple { position: relative; width: 44px; height: 44px; } .uv-l-ripple::before, .uv-l-ripple::after { content: ''; position: absolute; inset: 0; border: 3px solid var(--uv-accent); border-radius: 50%; animation: uv-c-ripple 1.4s cubic-bezier(.2,.6,.3,1) infinite; } .uv-l-ripple::after { animation-delay: -.7s; }
.uv-l-dots3 { width: 54px; height: 14px; background: radial-gradient(circle closest-side, var(--uv-accent) 90%, transparent) 0 50% / 33.3% 100% no-repeat, radial-gradient(circle closest-side, var(--uv-accent) 90%, transparent) 50% 50% / 33.3% 100% no-repeat, radial-gradient(circle closest-side, var(--uv-accent) 90%, transparent) 100% 50% / 33.3% 100% no-repeat; animation: uv-c-dots 1s steps(1) infinite; }
.uv-l-bars { width: 40px; height: 32px; background: linear-gradient(var(--uv-accent) 0 0) 0 100% / 20% 100% no-repeat, linear-gradient(var(--uv-accent) 0 0) 50% 100% / 20% 100% no-repeat, linear-gradient(var(--uv-accent) 0 0) 100% 100% / 20% 100% no-repeat; animation: uv-c-bars 1s infinite ease-in-out; }
.uv-l-bar-slide { width: 120px; height: 6px; border-radius: 99px; background: linear-gradient(var(--uv-accent) 0 0) 0 0 / 30% 100% no-repeat, var(--uv-line-2); animation: uv-c-slide 1.2s ease-in-out infinite; }
.uv-l-bar-stripes { width: 140px; height: 12px; border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--uv-accent) 0 8px, color-mix(in srgb, var(--uv-accent), #fff 30%) 8px 16px); background-size: 22.6px 100%; animation: uv-c-roll .6s linear infinite; }
.uv-l-bar-fill { width: 140px; height: 8px; border-radius: 99px; background: linear-gradient(var(--uv-accent) 0 0) 0 0 / 0 100% no-repeat, var(--uv-line-2); animation: uv-c-fill 1.6s ease-in-out infinite; }
.uv-l-square-flip { width: 30px; height: 30px; background: var(--uv-accent); animation: uv-c-flip 1.2s ease-in-out infinite; }
.uv-l-square-spin { width: 28px; height: 28px; border: 4px solid var(--uv-accent); animation: uv-c-sqspin 1.6s ease-in-out infinite; }
.uv-l-orbit { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--uv-line-2); animation: uv-c-rot 1.4s linear infinite; } .uv-l-orbit::after { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--uv-accent); box-shadow: 0 0 10px var(--uv-accent); }
.uv-l-atom { position: relative; width: 48px; height: 48px; } .uv-l-atom::before, .uv-l-atom::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--uv-accent); border-radius: 50%; transform: rotateX(70deg); animation: uv-c-rot 1s linear infinite; } .uv-l-atom::after { border-color: var(--uv-accent-2); transform: rotateY(70deg); animation-delay: -.5s; }
.uv-l-clock { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--uv-accent); } .uv-l-clock::before, .uv-l-clock::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; transform-origin: 50% 100%; background: var(--uv-accent); border-radius: 2px; } .uv-l-clock::before { height: 13px; animation: uv-c-rot 1s linear infinite; } .uv-l-clock::after { height: 9px; animation: uv-c-rot 6s linear infinite; }
.uv-l-hourglass { width: 0; height: 0; border: 16px solid; border-color: var(--uv-accent) transparent; animation: uv-c-hg 1.4s infinite ease-in-out; }
.uv-l-heart { width: 22px; height: 22px; background: var(--uv-danger); transform: rotate(45deg); position: relative; animation: uv-c-heart 1s infinite; } .uv-l-heart::before, .uv-l-heart::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: inherit; } .uv-l-heart::before { left: -11px; } .uv-l-heart::after { top: -11px; }
.uv-l-bounce-ball { width: 18px; height: 18px; border-radius: 50%; background: var(--uv-accent); animation: uv-c-bounce .6s cubic-bezier(.5,0,.5,1) infinite alternate; }
.uv-l-typing { width: 60px; height: 26px; border-radius: 13px; background: radial-gradient(circle closest-side, var(--uv-muted) 90%, transparent) 10px 50% / 10px 10px no-repeat, radial-gradient(circle closest-side, var(--uv-muted) 90%, transparent) 25px 50% / 10px 10px no-repeat, radial-gradient(circle closest-side, var(--uv-muted) 90%, transparent) 40px 50% / 10px 10px no-repeat, var(--uv-surface-2); animation: uv-c-typing 1.2s infinite; }
.uv-l-half-moon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(90deg, var(--uv-accent) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--uv-accent); animation: uv-c-rot 1s linear infinite; }
.uv-l-pie { width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--uv-accent) var(--uv-c-p, 0%), var(--uv-line-2) 0); animation: uv-c-pie 1.8s linear infinite; }
.uv-l-grid9 { width: 36px; height: 36px; background: conic-gradient(from 90deg at 2px 2px, transparent 90deg, var(--uv-accent) 0) 0 0 / calc((100% - 6px) / 3 + 2px) calc((100% - 6px) / 3 + 2px); animation: uv-c-blink 1s steps(2) infinite; }
.uv-l-pixel { width: 32px; height: 32px; background: conic-gradient(var(--uv-accent) 0 25%, color-mix(in srgb, var(--uv-accent) 50%, transparent) 0 50%, color-mix(in srgb, var(--uv-accent) 25%, transparent) 0 75%, color-mix(in srgb, var(--uv-accent) 10%, transparent) 0); animation: uv-c-rot 1s steps(4) infinite; }
.uv-l-dash-circle { width: 40px; height: 40px; border-radius: 50%; border: 4px dotted var(--uv-accent); animation: uv-c-rot 2s linear infinite; }
.uv-l-wave-bar { width: 60px; height: 20px; background: radial-gradient(circle closest-side, var(--uv-accent) 90%, transparent) 0 50% / 20% 50% repeat-x; -webkit-mask: linear-gradient(90deg, #000 0 100%); animation: uv-c-wave 1s linear infinite; }
.uv-l-neon-ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--uv-accent) 15%, transparent); border-top-color: var(--uv-accent); box-shadow: 0 0 14px -2px var(--uv-accent), inset 0 0 8px -3px var(--uv-accent); animation: uv-c-rot .7s linear infinite; }
.uv-l-pearl-ring { width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(#ffd9f3, #cdeeff, #e7ffdc, #fff2d6, #ffd9f3); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0); animation: uv-c-rot 1.4s linear infinite; }
.uv-l-metal-ring { width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(#a9cbff, #3f74dc, #0a2560, #1d4cad, #86b4ff, #a9cbff); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0); animation: uv-c-rot 1.1s linear infinite; }
.uv-l-skeleton-line { width: 160px; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--uv-surface-2) 25%, var(--uv-surface-3) 50%, var(--uv-surface-2) 75%) 0 0 / 200% 100%; animation: uv-c-shimmer 1.4s infinite; }
.uv-l-skeleton-card { width: 170px; height: 90px; border-radius: 10px; background: linear-gradient(90deg, transparent 25%, #ffffff18 50%, transparent 75%) 0 0 / 200% 100%, radial-gradient(circle 14px at 22px 22px, var(--uv-surface-3) 98%, transparent), linear-gradient(var(--uv-surface-3) 0 0) 46px 14px / 90px 8px no-repeat, linear-gradient(var(--uv-surface-3) 0 0) 46px 28px / 60px 8px no-repeat, linear-gradient(var(--uv-surface-3) 0 0) 12px 54px / 140px 8px no-repeat, linear-gradient(var(--uv-surface-3) 0 0) 12px 68px / 110px 8px no-repeat, var(--uv-surface-2); animation: uv-c-shimmer 1.4s infinite; }
.uv-l-text-loading { font: 700 16px var(--uv-mono); color: transparent; background: linear-gradient(90deg, var(--uv-muted) 40%, var(--uv-text) 50%, var(--uv-muted) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: uv-c-shimmer 1.6s linear infinite; } .uv-l-text-loading::before { content: 'LOADING…'; }
.uv-l-letters { font: 800 18px var(--uv-font); letter-spacing: .2em; color: var(--uv-accent); animation: uv-c-bounce-t 1s ease-in-out infinite alternate; } .uv-l-letters::before { content: 'WAIT'; }
.uv-l-gear { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, var(--uv-bg) 30%, transparent 31%), repeating-conic-gradient(var(--uv-accent) 0 15deg, transparent 15deg 30deg); -webkit-mask: radial-gradient(circle, #000 64%, transparent 65%), repeating-conic-gradient(#000 0 15deg, transparent 15deg 30deg); -webkit-mask-composite: source-over; animation: uv-c-rot 2.4s linear infinite; }
.uv-l-radar { width: 46px; height: 46px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--uv-accent) 40%, transparent); background: conic-gradient(from 0deg, color-mix(in srgb, var(--uv-accent) 60%, transparent), transparent 30%), repeating-radial-gradient(circle, transparent 0 7px, color-mix(in srgb, var(--uv-accent) 25%, transparent) 7px 8px); animation: uv-c-rot 1.6s linear infinite; }
.uv-l-battery { width: 50px; height: 22px; border: 3px solid var(--uv-text); border-radius: 4px; background: linear-gradient(var(--uv-success) 0 0) 0 0 / 0 100% no-repeat; position: relative; animation: uv-c-fill 1.6s steps(5) infinite; } .uv-l-battery::after { content: ''; position: absolute; right: -7px; top: 4px; width: 4px; height: 8px; border-radius: 0 2px 2px 0; background: var(--uv-text); }
.uv-l-cube { width: 26px; height: 26px; background: var(--uv-accent); animation: uv-c-cube 1.8s ease-in-out infinite; }
.uv-l-spiral { width: 40px; height: 40px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--uv-accent) 0 20deg, transparent 20deg 40deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%); animation: uv-c-rot 1.2s linear infinite; }
.uv-l-dna { width: 70px; height: 30px; background: radial-gradient(circle 4px, var(--uv-accent) 98%, transparent) 0 0 / 14px 50%, radial-gradient(circle 4px, var(--uv-accent-2) 98%, transparent) 7px 100% / 14px 50%; background-repeat: repeat-x; animation: uv-c-dna 1s linear infinite; }
.uv-l-glitch-bar { width: 140px; height: 10px; background: linear-gradient(90deg, #ff2bd6, #00f0ff); animation: uv-c-glitch .4s steps(2) infinite; }
/* ── Text effects ── */
.uv-t-gradient { background: linear-gradient(90deg, var(--uv-accent), var(--uv-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uv-t-sunset { background: linear-gradient(90deg, #ff512f, #f09819, #ffd86f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uv-t-rainbow { background: linear-gradient(90deg, #ff4d8d, #ffb84d, #4dffb8, #4db8ff, #b84dff) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: uv-c-pan 4s linear infinite; }
.uv-t-chrome { background: linear-gradient(180deg, #fff 0%, #c9ced6 38%, #3b4048 50%, #dfe3ea 62%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #0006); }
.uv-t-gold { background: linear-gradient(180deg, #fff3c4 0%, #e6c25a 38%, #8a5f0c 52%, #d8b04a 64%, #fff0b8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uv-t-deep-metal { background: linear-gradient(100deg, transparent 35%, #ffffff8c 50%, transparent 65%) 150% 0 / 250% 100%, linear-gradient(180deg, #3f74dc 22%, #d6e6ff 48%, #5b8ce8 54%, #23489a 76%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: uv-c-sheen 6s ease-in-out infinite; }
.uv-t-holo { background: linear-gradient(115deg, #ff9ae6, #9ad3ff, #b8ff9a, #fff59a, #ff9ae6) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: uv-c-pan 6s linear infinite; }
.uv-t-pearl { background: linear-gradient(115deg, #cdb8ff, #ffd9f3, #b8ecff, #fff2c6, #cdb8ff) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: uv-c-pan 9s linear infinite; }
.uv-t-fire { background: linear-gradient(0deg, #ff3d00, #ffb300 55%, #fff3c4); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px #ff6a0066); }
.uv-t-ice { background: linear-gradient(180deg, #fff, #bfe6ff 40%, #3a9be0 55%, #dff4ff 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uv-t-neon { color: color-mix(in srgb, var(--uv-accent), #fff 55%); text-shadow: 0 0 6px var(--uv-accent), 0 0 20px var(--uv-accent), 0 0 44px color-mix(in srgb, var(--uv-accent) 50%, transparent); }
.uv-t-neon-flicker { color: color-mix(in srgb, var(--uv-accent-2), #fff 55%); text-shadow: 0 0 6px var(--uv-accent-2), 0 0 20px var(--uv-accent-2); animation: uv-c-flicker 2.4s linear infinite; }
.uv-t-outline { color: transparent; -webkit-text-stroke: 1.5px var(--uv-text); }
.uv-t-outline-fill { color: transparent; -webkit-text-stroke: 1.5px var(--uv-text); background: linear-gradient(var(--uv-text) 0 0) 0 0 / 0 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-size .5s; } .uv-t-outline-fill:hover { background-size: 100% 100%; }
.uv-t-3d { color: var(--uv-text); text-shadow: 1px 1px 0 var(--uv-accent), 2px 2px 0 var(--uv-accent), 3px 3px 0 var(--uv-accent), 4px 4px 0 var(--uv-accent), 5px 5px 0 var(--uv-accent), 6px 6px 0 var(--uv-accent); }
.uv-t-long { color: var(--uv-text); text-shadow: 1px 1px 0 color-mix(in srgb, var(--uv-accent) 56%, transparent), 2px 2px 0 color-mix(in srgb, var(--uv-accent) 52%, transparent), 3px 3px 0 color-mix(in srgb, var(--uv-accent) 48%, transparent), 4px 4px 0 color-mix(in srgb, var(--uv-accent) 44%, transparent), 5px 5px 0 color-mix(in srgb, var(--uv-accent) 40%, transparent), 6px 6px 0 color-mix(in srgb, var(--uv-accent) 36%, transparent), 7px 7px 0 color-mix(in srgb, var(--uv-accent) 32%, transparent), 8px 8px 0 color-mix(in srgb, var(--uv-accent) 28%, transparent), 9px 9px 0 color-mix(in srgb, var(--uv-accent) 24%, transparent), 10px 10px 0 color-mix(in srgb, var(--uv-accent) 20%, transparent), 11px 11px 0 color-mix(in srgb, var(--uv-accent) 16%, transparent), 12px 12px 0 color-mix(in srgb, var(--uv-accent) 12%, transparent), 13px 13px 0 color-mix(in srgb, var(--uv-accent) 8%, transparent), 14px 14px 0 color-mix(in srgb, var(--uv-accent) 5%, transparent); }
.uv-t-retro { color: #ffe66d; text-shadow: 3px 3px 0 #ff6ec7, 6px 6px 0 #7b2ff7; font-style: italic; }
.uv-t-glitch { text-shadow: 2px 0 #ff2bd6, -2px 0 #00f0ff; animation: uv-c-tglitch 2.4s steps(1) infinite; }
.uv-t-emboss { color: color-mix(in srgb, var(--uv-text) 55%, var(--uv-bg)); text-shadow: 0 1px 0 #ffffff50, 0 -1px 0 #00000060; }
.uv-t-letterpress { color: color-mix(in srgb, var(--uv-bg), #000 35%); text-shadow: 0 1px 1px #ffffff30; }
.uv-t-marker { background: linear-gradient(100deg, transparent .2em, color-mix(in srgb, var(--uv-accent) 40%, transparent) .2em calc(100% - .2em), transparent 0) 0 85% / 100% 42% no-repeat; }
.uv-t-underline-draw { background: linear-gradient(var(--uv-accent) 0 0) 0 100% / 0 3px no-repeat; transition: background-size .4s; } .uv-t-underline-draw:hover { background-size: 100% 3px; }
.uv-t-sticker { color: var(--uv-accent); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; filter: drop-shadow(0 3px 4px #0006); }
.uv-t-shimmer { background: linear-gradient(100deg, var(--uv-muted) 40%, var(--uv-text) 50%, var(--uv-muted) 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: uv-c-pan 2.6s linear infinite reverse; }
.uv-t-wave { display: inline-block; animation: uv-c-waveText 1.6s ease-in-out infinite; }
.uv-t-blur-in { animation: uv-c-blurin 1.4s ease both infinite alternate; }
.uv-t-spaced { letter-spacing: .35em; text-transform: uppercase; font-weight: 300; }
.uv-t-condensed { letter-spacing: -.06em; font-weight: 900; }
.uv-t-mirror { -webkit-box-reflect: below -8px linear-gradient(transparent 40%, #0005); }
.uv-t-stroke-gradient { color: var(--uv-bg); -webkit-text-stroke: 2px var(--uv-accent); text-shadow: 3px 3px 0 var(--uv-accent-2); }
.uv-t-pop-shadow { color: #fff; text-shadow: 0 4px 0 var(--uv-accent), 0 8px 0 var(--uv-text); }
.uv-t-vapor { background: linear-gradient(180deg, #ffe66d 0%, #ff6ec7 45%, #7b2ff7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; filter: drop-shadow(0 0 12px #ff3cac66); }
.uv-t-matrix { color: #3cff6a; font-family: var(--uv-mono); text-shadow: 0 0 8px #3cff6a; }
.uv-t-glass { color: #ffffff26; -webkit-text-stroke: 1px #ffffffaa; text-shadow: 0 8px 20px #0008; }
.uv-t-shadow-soft { text-shadow: 0 6px 20px rgb(0 0 0 / .45); }
.uv-t-cut { background: linear-gradient(var(--uv-text) 50%, var(--uv-accent) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ── Shadows ── */
.uv-sh-e1 { box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.11), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e2 { box-shadow: 0 5px 10px -2px rgb(0 0 0 / 0.14), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e3 { box-shadow: 0 9px 20px -3px rgb(0 0 0 / 0.17), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e4 { box-shadow: 0 15px 34px -4px rgb(0 0 0 / 0.20), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e5 { box-shadow: 0 24px 52px -5px rgb(0 0 0 / 0.23), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e6 { box-shadow: 0 33px 74px -6px rgb(0 0 0 / 0.26), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e7 { box-shadow: 0 45px 100px -7px rgb(0 0 0 / 0.29), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-e8 { box-shadow: 0 59px 130px -8px rgb(0 0 0 / 0.32), 0 1px 2px rgb(0 0 0 / .08); }
.uv-sh-glow-accent { box-shadow: 0 0 0 1px color-mix(in srgb, var(--uv-accent) 40%, transparent), 0 0 28px -4px var(--uv-accent); }
.uv-sh-glow-accent-2 { box-shadow: 0 0 0 1px color-mix(in srgb, var(--uv-accent-2) 40%, transparent), 0 0 28px -4px var(--uv-accent-2); }
.uv-sh-neon { box-shadow: 0 0 6px var(--uv-accent), 0 0 18px var(--uv-accent), 0 0 40px color-mix(in srgb, var(--uv-accent) 50%, transparent); }
.uv-sh-halo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--uv-accent) 25%, transparent), 0 0 0 9px color-mix(in srgb, var(--uv-accent) 10%, transparent); }
.uv-sh-hard { box-shadow: 6px 6px 0 var(--uv-text); }
.uv-sh-hard-accent { box-shadow: 6px 6px 0 var(--uv-accent); }
.uv-sh-hard-stack { box-shadow: 4px 4px 0 var(--uv-accent), 8px 8px 0 var(--uv-text); }
.uv-sh-long { box-shadow: 1px 1px 0 color-mix(in srgb, var(--uv-text) 37%, transparent), 2px 2px 0 color-mix(in srgb, var(--uv-text) 34%, transparent), 3px 3px 0 color-mix(in srgb, var(--uv-text) 31%, transparent), 4px 4px 0 color-mix(in srgb, var(--uv-text) 28%, transparent), 5px 5px 0 color-mix(in srgb, var(--uv-text) 25%, transparent), 6px 6px 0 color-mix(in srgb, var(--uv-text) 22%, transparent), 7px 7px 0 color-mix(in srgb, var(--uv-text) 19%, transparent), 8px 8px 0 color-mix(in srgb, var(--uv-text) 16%, transparent), 9px 9px 0 color-mix(in srgb, var(--uv-text) 13%, transparent), 10px 10px 0 color-mix(in srgb, var(--uv-text) 10%, transparent), 11px 11px 0 color-mix(in srgb, var(--uv-text) 7%, transparent), 12px 12px 0 color-mix(in srgb, var(--uv-text) 4%, transparent); }
.uv-sh-layered { box-shadow: 0 1px 1px #0000000f, 0 2px 2px #0000000f, 0 4px 4px #0000000f, 0 8px 8px #0000000f, 0 16px 16px #0000000f, 0 32px 32px #0000000f; }
.uv-sh-inner { box-shadow: inset 0 2px 10px #00000040; }
.uv-sh-inner-deep { box-shadow: inset 0 6px 20px #00000066; }
.uv-sh-pressed { box-shadow: inset 0 3px 0 #00000033, inset 0 -1px 0 #ffffff20; }
.uv-sh-bevel { box-shadow: inset 1px 1px 0 #ffffff60, inset -1px -1px 0 #00000040; }
.uv-sh-win98 { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.uv-sh-neumorph { box-shadow: 8px 8px 18px color-mix(in srgb, var(--uv-bg), #000 22%), -8px -8px 18px color-mix(in srgb, var(--uv-bg), #fff 40%); }
.uv-sh-neumorph-in { box-shadow: inset 6px 6px 12px color-mix(in srgb, var(--uv-bg), #000 22%), inset -6px -6px 12px color-mix(in srgb, var(--uv-bg), #fff 40%); }
.uv-sh-lifted { box-shadow: 0 22px 40px -16px #00000080, 0 6px 12px -6px #00000040; }
.uv-sh-floating { box-shadow: 0 40px 80px -30px #000000a0; }
.uv-sh-ambient { box-shadow: 0 0 60px -10px #00000060; }
.uv-sh-ring { box-shadow: 0 0 0 2px var(--uv-text); }
.uv-sh-ring-offset { box-shadow: 0 0 0 3px var(--uv-bg), 0 0 0 5px var(--uv-accent); }
.uv-sh-sharp-bottom { box-shadow: 0 4px 0 #00000040; }
.uv-sh-3d-key { box-shadow: 0 6px 0 color-mix(in srgb, var(--uv-accent), #000 40%), 0 10px 18px -6px #000000a0; }
.uv-sh-rainbow { box-shadow: -4px -4px 14px #ff6ad5aa, 4px -4px 14px #94d0ffaa, 4px 4px 14px #b8ff9aaa, -4px 4px 14px #fff59aaa; }
.uv-sh-sunset { box-shadow: 0 10px 30px -8px #ff512fa0, 0 20px 50px -20px #f09819a0; }
.uv-sh-ice { box-shadow: 0 0 0 1px #bfe6ff, 0 10px 30px -8px #2a8be0a0; }
.uv-sh-gold { box-shadow: 0 0 0 1px #d8b04a, 0 12px 30px -10px #9a6f12; }
.uv-sh-paper { box-shadow: 0 1px 1px #0001, 2px 3px 0 #0000001a, 4px 6px 10px -4px #0003; }
.uv-sh-curl { box-shadow: 0 15px 10px -10px #0000004d, 0 1px 4px #0000001a; }
.uv-sh-outline-glow { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uv-accent) 60%, transparent), 0 0 20px -6px var(--uv-accent); }
.uv-sh-dreamy { box-shadow: 0 30px 60px -12px #3c8cff40, 0 18px 36px -18px #ff3cac50; }
.uv-sh-double-border { box-shadow: 0 0 0 2px var(--uv-bg), 0 0 0 4px var(--uv-text), 0 0 0 6px var(--uv-bg), 0 0 0 8px var(--uv-text); }
/* ── Image hovers ── */
.uv-hv-zoom .img { transition: transform .5s; } .uv-hv-zoom:hover .img { transform: scale(1.12); } .uv-hv-zoom figcaption { font: 600 14px var(--uv-font); }
.uv-hv-zoom-out .img { transform: scale(1.15); transition: transform .5s; } .uv-hv-zoom-out:hover .img { transform: scale(1); } .uv-hv-zoom-out figcaption { font: 600 14px var(--uv-font); }
.uv-hv-rotate .img { transition: transform .5s; } .uv-hv-rotate:hover .img { transform: scale(1.2) rotate(4deg); } .uv-hv-rotate figcaption { font: 600 14px var(--uv-font); }
.uv-hv-grayscale .img { filter: grayscale(1); transition: filter .4s; } .uv-hv-grayscale:hover .img { filter: none; } .uv-hv-grayscale figcaption { font: 600 14px var(--uv-font); }
.uv-hv-blur .img { transition: filter .4s; } .uv-hv-blur:hover .img { filter: blur(4px); } .uv-hv-blur figcaption { font: 600 14px var(--uv-font); }
.uv-hv-brighten .img { filter: brightness(.7); transition: filter .4s; } .uv-hv-brighten:hover .img { filter: brightness(1.1); } .uv-hv-brighten figcaption { font: 600 14px var(--uv-font); }
.uv-hv-sepia .img { filter: sepia(.8); transition: filter .4s; } .uv-hv-sepia:hover .img { filter: none; } .uv-hv-sepia figcaption { font: 600 14px var(--uv-font); }
.uv-hv-caption-up figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: #000a; color: #fff; translate: 0 100%; transition: translate .35s; } .uv-hv-caption-up:hover figcaption { translate: 0 0; } .uv-hv-caption-up figcaption { font: 600 14px var(--uv-font); }
.uv-hv-caption-fade figcaption { position: absolute; inset: 0; display: grid; place-items: center; background: #000a; color: #fff; opacity: 0; transition: opacity .35s; } .uv-hv-caption-fade:hover figcaption { opacity: 1; } .uv-hv-caption-fade figcaption { font: 600 14px var(--uv-font); }
.uv-hv-overlay-accent figcaption { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--uv-accent) 75%, transparent); color: #fff; font-weight: 700; clip-path: circle(0 at 50% 50%); transition: clip-path .5s; } .uv-hv-overlay-accent:hover figcaption { clip-path: circle(75% at 50% 50%); } .uv-hv-overlay-accent figcaption { font: 600 14px var(--uv-font); }
.uv-hv-wipe figcaption { position: absolute; inset: 0; display: grid; place-items: center; background: var(--uv-text); color: var(--uv-bg); clip-path: inset(0 100% 0 0); transition: clip-path .45s; } .uv-hv-wipe:hover figcaption { clip-path: inset(0 0 0 0); } .uv-hv-wipe figcaption { font: 600 14px var(--uv-font); }
.uv-hv-curtain figcaption { position: absolute; inset: 0; display: grid; place-items: center; background: #000c; color: #fff; clip-path: inset(50% 0 50% 0); transition: clip-path .45s; } .uv-hv-curtain:hover figcaption { clip-path: inset(0 0 0 0); } .uv-hv-curtain figcaption { font: 600 14px var(--uv-font); }
.uv-hv-tilt { transition: transform .35s; } .uv-hv-tilt:hover { transform: perspective(600px) rotateX(6deg) rotateY(-8deg); } .uv-hv-tilt figcaption { font: 600 14px var(--uv-font); }
.uv-hv-lift { transition: translate .3s, box-shadow .3s; } .uv-hv-lift:hover { translate: 0 -6px; box-shadow: 0 20px 30px -14px #000a; } .uv-hv-lift figcaption { font: 600 14px var(--uv-font); }
.uv-hv-frame::after { content: ''; position: absolute; inset: 10px; border: 2px solid #fff; opacity: 0; transform: scale(1.1); transition: all .35s; } .uv-hv-frame:hover::after { opacity: 1; transform: none; } .uv-hv-frame figcaption { font: 600 14px var(--uv-font); }
.uv-hv-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff60 50%, transparent 65%); translate: -120% 0; transition: translate .7s; } .uv-hv-shine:hover::after { translate: 120% 0; } .uv-hv-shine figcaption { font: 600 14px var(--uv-font); }
.uv-hv-glow { transition: box-shadow .35s; } .uv-hv-glow:hover { box-shadow: 0 0 0 2px var(--uv-accent), 0 0 30px -4px var(--uv-accent); } .uv-hv-glow figcaption { font: 600 14px var(--uv-font); }
.uv-hv-duotone .img { filter: grayscale(1) contrast(1.2); } .uv-hv-duotone::after { content: ''; position: absolute; inset: 0; background: var(--uv-accent); mix-blend-mode: multiply; transition: opacity .4s; } .uv-hv-duotone:hover::after { opacity: 0; } .uv-hv-duotone figcaption { font: 600 14px var(--uv-font); }
.uv-hv-scanlines::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #0004 0 1px, transparent 1px 3px); opacity: 0; transition: opacity .3s; } .uv-hv-scanlines:hover::after { opacity: 1; } .uv-hv-scanlines figcaption { font: 600 14px var(--uv-font); }
.uv-hv-pixelate::after { content: ''; position: absolute; inset: 0; background: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0) 0 0 / 12px 12px; opacity: .6; transition: opacity .4s; } .uv-hv-pixelate:hover::after { opacity: 0; } .uv-hv-pixelate figcaption { font: 600 14px var(--uv-font); }
.uv-hv-round { transition: border-radius .5s; } .uv-hv-round:hover { border-radius: 50% !important; } .uv-hv-round figcaption { font: 600 14px var(--uv-font); }
.uv-hv-skew { transition: transform .35s; } .uv-hv-skew:hover { transform: skewY(-3deg); } .uv-hv-skew figcaption { font: 600 14px var(--uv-font); }
.uv-hv-border-draw::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(var(--uv-accent) 0 0) 0 0 / 0 3px no-repeat, linear-gradient(var(--uv-accent) 0 0) 100% 100% / 0 3px no-repeat; transition: background-size .5s; } .uv-hv-border-draw:hover::after { background-size: 100% 3px; } .uv-hv-border-draw figcaption { font: 600 14px var(--uv-font); }
.uv-hv-hue .img { transition: filter .6s; } .uv-hv-hue:hover .img { filter: hue-rotate(120deg); } .uv-hv-hue figcaption { font: 600 14px var(--uv-font); }
/* ── Dividers ── */
.uv-dv-hairline { border: 0; margin: 12px 0; height: 1px; background: var(--uv-line-2); }
.uv-dv-thick { border: 0; margin: 12px 0; height: 4px; background: var(--uv-text); }
.uv-dv-accent { border: 0; margin: 12px 0; height: 3px; background: var(--uv-accent); }
.uv-dv-fade { border: 0; margin: 12px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--uv-text), transparent); }
.uv-dv-gradient { border: 0; margin: 12px 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--uv-accent), var(--uv-accent-2)); }
.uv-dv-dashed { border: 0; margin: 12px 0; height: 0; border-top: 2px dashed var(--uv-line-2); }
.uv-dv-dotted { border: 0; margin: 12px 0; height: 6px; background: radial-gradient(circle, var(--uv-muted) 1.5px, transparent 2px) 0 0 / 12px 6px repeat-x; }
.uv-dv-double { border: 0; margin: 12px 0; height: 6px; border-top: 1px solid var(--uv-text); border-bottom: 1px solid var(--uv-text); }
.uv-dv-zigzag { border: 0; margin: 12px 0; height: 10px; background: linear-gradient(135deg, var(--uv-accent) 25%, transparent 25%) -5px 0 / 10px 10px, linear-gradient(225deg, var(--uv-accent) 25%, transparent 25%) -5px 0 / 10px 10px; }
.uv-dv-wave { border: 0; margin: 12px 0; height: 10px; background: radial-gradient(circle at 50% 0, transparent 6px, var(--uv-accent) 7px 8px, transparent 9px) 0 0 / 16px 10px repeat-x; }
.uv-dv-stitch { border: 0; margin: 12px 0; height: 2px; background: repeating-linear-gradient(90deg, var(--uv-muted) 0 8px, transparent 8px 14px); }
.uv-dv-glow { border: 0; margin: 12px 0; height: 2px; background: var(--uv-accent); box-shadow: 0 0 10px var(--uv-accent), 0 0 20px var(--uv-accent); }
.uv-dv-diamond { border: 0; margin: 12px 0; height: 12px; background: linear-gradient(var(--uv-line-2) 0 0) 0 50% / 100% 1px no-repeat, linear-gradient(45deg, transparent 40%, var(--uv-accent) 40% 60%, transparent 60%) 50% 50% / 12px 12px no-repeat, linear-gradient(-45deg, transparent 40%, var(--uv-accent) 40% 60%, transparent 60%) 50% 50% / 12px 12px no-repeat; }
.uv-dv-dot-center { border: 0; margin: 12px 0; height: 8px; background: radial-gradient(circle, var(--uv-accent) 3px, transparent 3.5px) 50% 50% / 24px 8px no-repeat, radial-gradient(circle, var(--uv-muted) 2px, transparent 2.5px) calc(50% - 20px) 50% / 8px 8px no-repeat, radial-gradient(circle, var(--uv-muted) 2px, transparent 2.5px) calc(50% + 20px) 50% / 8px 8px no-repeat; }
.uv-dv-rainbow { border: 0; margin: 12px 0; height: 4px; background: linear-gradient(90deg, #ff4d8d, #ffb84d, #4dffb8, #4db8ff, #b84dff); }
.uv-dv-pearl { border: 0; margin: 12px 0; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #ffd9f3, #c6b2ff, #9fd8ff, #e7ffdc); }
.uv-dv-chrome { border: 0; margin: 12px 0; height: 6px; background: linear-gradient(180deg, #fff, #8a919c 50%, #f4f6f9); }
.uv-dv-deep-metal { border: 0; margin: 12px 0; height: 6px; background: linear-gradient(180deg, #a9cbff, #0a2560 50%, #86b4ff); }
.uv-dv-ticket { border: 0; margin: 12px 0; height: 10px; background: radial-gradient(circle, var(--uv-bg) 4px, transparent 4.5px) 0 50% / 14px 10px repeat-x, var(--uv-line-2); }
.uv-dv-scissors { border: 0; margin: 12px 0; height: 2px; background: repeating-linear-gradient(90deg, var(--uv-muted) 0 6px, transparent 6px 10px); position: relative; overflow: visible; }
.uv-dv-brush { border: 0; margin: 12px 0; height: 8px; border-radius: 50% 40% 60% 30%; background: var(--uv-accent); opacity: .8; }
.uv-dv-short { border: 0; margin: 12px 0; width: 48px !important; height: 4px; background: var(--uv-accent); border-radius: 4px; }
.uv-dv-arrow { border: 0; margin: 12px 0; height: 12px; background: linear-gradient(var(--uv-line-2) 0 0) 0 50% / calc(100% - 10px) 2px no-repeat, linear-gradient(45deg, transparent 50%, var(--uv-line-2) 50%) right 0 top 50% / 10px 10px no-repeat; }
.uv-dv-blur { border: 0; margin: 12px 0; height: 12px; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--uv-accent) 60%, transparent), transparent); }
/* ── Tooltip styles ── */
.uv-tip-dark[data-tip]::after { background: #111; color: #fff; border-radius: 6px; } .uv-tip-dark[data-tip]:hover::after { opacity: 1; }
.uv-tip-light[data-tip]::after { background: #fff; color: #111; border-radius: 6px; box-shadow: 0 6px 20px -6px #0006; } .uv-tip-light[data-tip]:hover::after { opacity: 1; }
.uv-tip-accent[data-tip]::after { background: var(--uv-accent); color: var(--uv-on-accent, #fff); border-radius: 999px; } .uv-tip-accent[data-tip]:hover::after { opacity: 1; }
.uv-tip-glass[data-tip]::after { background: #ffffff26; color: var(--uv-text); backdrop-filter: blur(10px); border: 1px solid #ffffff40; border-radius: 10px; } .uv-tip-glass[data-tip]:hover::after { opacity: 1; }
.uv-tip-neon[data-tip]::after { background: #000; color: var(--uv-accent); border: 1px solid var(--uv-accent); box-shadow: 0 0 12px var(--uv-accent); font-family: var(--uv-mono); } .uv-tip-neon[data-tip]:hover::after { opacity: 1; }
.uv-tip-brutal[data-tip]::after { background: var(--uv-accent); color: #000; border: 2px solid #000; box-shadow: 3px 3px 0 #000; border-radius: 0; font-weight: 800; } .uv-tip-brutal[data-tip]:hover::after { opacity: 1; }
.uv-tip-pearl[data-tip]::after { background: linear-gradient(115deg, #fff, #f3e8ff, #e0f4ff, #fff4dc); color: #3a2f5a; border: 1px solid #d9cfee; border-radius: 999px; } .uv-tip-pearl[data-tip]:hover::after { opacity: 1; }
.uv-tip-terminal[data-tip]::after { background: #050c05; color: #9dff9d; font-family: var(--uv-mono); border: 1px solid #1f5f1f; border-radius: 0; } .uv-tip-terminal[data-tip]:hover::after { opacity: 1; }
.uv-tip-win98[data-tip]::after { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; font-family: Tahoma, sans-serif; } .uv-tip-win98[data-tip]:hover::after { opacity: 1; }
.uv-tip-big[data-tip]::after { padding: 10px 14px; font-size: 14px; border-radius: 10px; } .uv-tip-big[data-tip]:hover::after { opacity: 1; }
.uv-tip-mono[data-tip]::after { font: 500 10px var(--uv-mono); text-transform: uppercase; letter-spacing: .08em; } .uv-tip-mono[data-tip]:hover::after { opacity: 1; }
.uv-tip-deep-metal[data-tip]::after { background: linear-gradient(180deg, #1a3f8a, #0b1d48); color: #e8f0ff; border: 1px solid #3f74dc; border-radius: 6px; } .uv-tip-deep-metal[data-tip]:hover::after { opacity: 1; }
/* ── CSS charts ── */
.uv-ch-bars { display: flex; align-items: end; gap: 6px; height: 100px; width: 100%; } .uv-ch-bars > i { flex: 1; height: var(--v); border-radius: 4px 4px 0 0; background: linear-gradient(var(--uv-accent), color-mix(in srgb, var(--uv-accent) 40%, transparent)); }
.uv-ch-hbars { display: grid; gap: 8px; width: 100%; } .uv-ch-hbars > i { height: 12px; width: var(--v); border-radius: 6px; background: var(--uv-accent); }
.uv-ch-donut { width: 100px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--uv-accent) 0 var(--a), var(--uv-accent-2) 0 var(--b), var(--uv-line-2) 0); -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 59%); mask: radial-gradient(farthest-side, transparent 58%, #000 59%); }
.uv-ch-pie { width: 100px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--uv-accent) 0 35%, var(--uv-accent-2) 0 60%, var(--uv-muted) 0 82%, var(--uv-line-2) 0); }
.uv-ch-gauge { width: 120px; aspect-ratio: 2; border-radius: 120px 120px 0 0; background: conic-gradient(from -90deg at 50% 100%, var(--uv-accent) 0 calc(var(--v) * 1.8deg), var(--uv-line-2) 0 180deg, transparent 0); -webkit-mask: radial-gradient(circle at 50% 100%, transparent 55%, #000 56%); mask: radial-gradient(circle at 50% 100%, transparent 55%, #000 56%); }
.uv-ch-spark { width: 100%; height: 50px; } .uv-ch-spark polyline { fill: none; stroke: var(--uv-accent); stroke-width: 2.5; stroke-linejoin: round; } .uv-ch-spark polygon { fill: color-mix(in srgb, var(--uv-accent) 18%, transparent); }
.uv-ch-stacked { display: flex; width: 100%; height: 16px; border-radius: 8px; overflow: hidden; } .uv-ch-stacked > i { width: var(--v); } .uv-ch-stacked > i:nth-child(1) { background: var(--uv-accent); } .uv-ch-stacked > i:nth-child(2) { background: var(--uv-accent-2); } .uv-ch-stacked > i:nth-child(3) { background: var(--uv-muted); }
.uv-ch-heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: 100%; } .uv-ch-heatmap > i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--uv-accent) var(--v), var(--uv-surface-2)); }
.uv-ch-ring { width: 90px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--uv-accent) calc(var(--v) * 1%), var(--uv-line-2) 0); -webkit-mask: radial-gradient(farthest-side, transparent 78%, #000 79%); mask: radial-gradient(farthest-side, transparent 78%, #000 79%); }
.uv-ch-kpi { display: grid; gap: 2px; padding: 14px 16px; border-radius: 10px; background: var(--uv-surface); border: 1px solid var(--uv-line); } .uv-ch-kpi small { color: var(--uv-muted); font: 500 11px var(--uv-mono); text-transform: uppercase; } .uv-ch-kpi b { font: 700 28px var(--uv-font); } .uv-ch-kpi em { font-style: normal; font-size: 12px; color: var(--uv-success); }
.uv-ch-columns { display: flex; align-items: end; gap: 12px; height: 100px; } .uv-ch-columns > span { display: flex; align-items: end; gap: 3px; height: 100%; } .uv-ch-columns i { width: 10px; height: var(--v); border-radius: 3px 3px 0 0; background: var(--uv-accent); } .uv-ch-columns i + i { background: var(--uv-accent-2); }
.uv-ch-meter { display: flex; gap: 3px; width: 100%; } .uv-ch-meter > i { flex: 1; height: 18px; border-radius: 2px; background: var(--uv-line-2); } .uv-ch-meter > i.on { background: var(--uv-success); } .uv-ch-meter > i.on.w { background: var(--uv-warn); } .uv-ch-meter > i.on.d { background: var(--uv-danger); }
/* ── Icons ── */