.copy-item{position:relative;transition:all .2s ease}.copy-item:hover{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(168,85,247,.1));transform:translateY(-1px)}.copy-item:active{transform:translateY(0)}.copy-success{animation:copySuccess .3s ease}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.animate-shimmer{animation:shimmer 2s infinite}.color-card-overlay{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.color-card-gradient{background:linear-gradient(135deg,var(--color) 0,var(--color)dd 100%)}.button-group,.button-group-vertical{display:flex;gap:.375rem;align-items:center}.button-group-vertical{flex-direction:column}.format-badge{background:color-mix(in srgb,var(--card-color,#888) 30%,hsla(0,0%,100%,.9));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--card-color,#888) 50%,hsla(0,0%,100%,.5));transition:all .2s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 8px color-mix(in srgb,var(--card-color,#888) 40%,rgba(0,0,0,.1));color:color-mix(in srgb,var(--card-color,#888) 80%,#fff)}.format-badge:hover{background:color-mix(in srgb,var(--card-color,#888) 20%,hsla(0,0%,100%,.95));transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px color-mix(in srgb,var(--card-color,#888) 50%,rgba(0,0,0,.15));border-color:color-mix(in srgb,var(--card-color,#888) 60%,hsla(0,0%,100%,.6))}@keyframes pulse-subtle{0%,to{opacity:1}50%{opacity:.8}}.animate-pulse-subtle{animation:pulse-subtle 2s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes glow{0%,to{box-shadow:0 0 20px rgba(147,51,234,.3)}50%{box-shadow:0 0 40px rgba(147,51,234,.6)}}.animate-glow{animation:glow 2s ease-in-out infinite}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.animate-scale-in{animation:scaleIn .3s ease-out}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-in-up{animation:slideInUp .4s ease-out}.color-card-container{transition:transform .2s ease}.color-card-container:hover{transform:translateY(-2px)}.color-card-gradient{background:linear-gradient(135deg,var(--color) 0,var(--color) 50%,color-mix(in srgb,var(--color) 85%,#000) 100%);transition:all .3s ease;box-shadow:0 4px 20px color-mix(in srgb,var(--color) 40%,rgba(0,0,0,.3)),inset 0 1px 0 hsla(0,0%,100%,.2),inset 0 -1px 0 rgba(0,0,0,.1);position:relative}.color-card-gradient:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0,transparent 30%,color-mix(in srgb,var(--color) 80%,hsla(0,0%,100%,.3)) 70%,color-mix(in srgb,var(--color) 70%,hsla(0,0%,100%,.2)) 100%);border-radius:inherit;opacity:0;transition:opacity .3s ease}.color-card-gradient:hover:before{opacity:1}.color-card-gradient:hover{box-shadow:0 12px 40px color-mix(in srgb,var(--color) 50%,rgba(0,0,0,.4)),inset 0 1px 0 hsla(0,0%,100%,.3),inset 0 -1px 0 rgba(0,0,0,.2);transform:scale(1.02)}.btn-hover-lift{transition:all .2s ease}.btn-hover-lift:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.15)}.search-bar{transition:all .3s ease}.search-bar:focus{transform:scale(1.01);box-shadow:0 0 0 4px rgba(147,51,234,.1)}.stats-card{transition:all .3s cubic-bezier(.4,0,.2,1)}.stats-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.1)}.filter-active{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;transform:scale(1.05)}.skeleton-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes pageEntrance{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:pageEntrance .6s ease-out}.smooth-scroll{scroll-behavior:smooth}.glass-morphism{background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2)}.color-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.75rem;max-width:1400px;margin:0 auto}@media (max-width:480px){.color-card-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}}@media (max-width:380px){.color-card-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}}@media (min-width:481px) and (max-width:768px){.color-card-grid{grid-template-columns:repeat(6,1fr);gap:.625rem}}@media (min-width:769px) and (max-width:1024px){.color-card-grid{grid-template-columns:repeat(8,1fr);gap:.75rem}}@media (min-width:1025px){.color-card-grid{grid-template-columns:repeat(10,1fr);gap:.875rem}}.modern-page-bg{background:linear-gradient(135deg,#f8fafc,#fff 50%,#f8fafc);min-height:100vh}.clean-card-shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:box-shadow .2s ease}.clean-card-shadow:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}@media (prefers-color-scheme:dark){.glass-morphism{background:rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.1)}}.color-card-container{transition:transform .3s cubic-bezier(.4,0,.2,1)}.color-card-container:hover{transform:translateY(-4px);z-index:20}.hover-overlay-gradient{background:linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.4) 40%,rgba(0,0,0,.1) 70%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.action-button{transition:all .3s cubic-bezier(.25,.46,.45,.94);transform-origin:center;border-radius:4px}.action-button:hover{transform:scale(1.15) translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.color-card-container{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.4,0,.2,1)}.color-card-container:hover{transform:translateY(-1px);z-index:10}.action-button{transition:all .2s ease}.action-button:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.15)}.copy-hint-area{background:linear-gradient(135deg,rgba(59,130,246,.9),rgba(37,99,235,.9));backdrop-filter:blur(8px);border:1px solid rgba(96,165,250,.5);box-shadow:0 8px 32px rgba(59,130,246,.3)}.copy-hint-area:hover{background:linear-gradient(135deg,rgba(37,99,235,.95),rgba(29,78,216,.95));box-shadow:0 12px 40px rgba(59,130,246,.4);transform:scale(1.02)}.copy-hint-area svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));transition:transform .2s ease}.copy-hint-area:hover svg{transform:scale(1.1)}.figma-export-button{background:linear-gradient(135deg,#8b5cf6,#7c3aed);position:relative;overflow:hidden}.figma-export-button:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,hsla(0,0%,100%,.1) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s ease}.figma-export-button:hover:before{transform:translateX(100%)}.figma-export-button svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));transition:all .3s ease}.figma-export-button:hover svg{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.favorite-button{background:hsla(0,0%,100%,.95);backdrop-filter:blur(8px)}.favorite-button:hover{background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.1)}.color-info-panel{text-align:center;padding:.75rem;max-width:100%}.color-format-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;margin-bottom:.75rem}.list-view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.list-view-color-preview{position:relative;overflow:hidden}.list-view-color-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.1) 0,transparent);opacity:0;transition:opacity .3s ease}.list-view-color-preview:hover:after{opacity:1}@media (max-width:640px){.color-format-row{gap:.25rem}.action-button{width:1.25rem;height:1.25rem}.color-info-panel{padding:.5rem}.list-view-header{flex-direction:column;align-items:flex-start;gap:.5rem}.list-view-color-preview{width:3rem;height:3rem}.color-card-container{transform:scale(.95)}.color-card-container:hover{transform:scale(.98) translateY(-2px)}.color-card-container:hover .action-button{transform:scale(1.05)}}@media (hover:none) and (pointer:coarse){.color-card-container:hover{transform:translateY(-1px)}.color-card-container:active{transform:scale(.98)}.color-card-container .absolute.top-2{opacity:.8}.color-card-container:hover .absolute.top-2{opacity:1}}@media (min-width:641px) and (max-width:1024px){.color-card-grid{grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.4rem}}@media (prefers-reduced-motion:reduce){.animate-float,.animate-glow,.animate-pulse-subtle,.animate-scale-in,.animate-shimmer,.animate-slide-in-up{animation:none}.action-button,.btn-hover-lift,.color-card,.search-bar,.stats-card{transition:none}.action-button:hover,.btn-hover-lift:hover,.color-card:hover,.stats-card:hover{transform:none}.hover-overlay-gradient{background:rgba(0,0,0,.8)}}