.cs-component-library {padding: 2rem;max-width: 1400px;margin: 0 auto;}.cs-library-header {text-align: center;margin-bottom: 3rem;}.cs-library-title {color: #fff;font-size: 2.5rem;margin-bottom: 1rem;}.cs-library-description {color: #fff;opacity: 0.8;font-size: 1.1rem;max-width: 600px;margin: 0 auto;}.cs-component-variant {margin-bottom: 4rem;border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 16px;overflow: hidden;background: rgba(255, 255, 255, 0.02);}.cs-variant-header {background: var(--blackColor);padding: 2rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.cs-variant-title {color: var(--primary);font-size: 1.5rem;margin-bottom: 0.5rem;}.cs-variant-description {color: #fff;opacity: 0.8;margin-bottom: 1rem;}.cs-variant-tags {display: flex;gap: 0.5rem;flex-wrap: wrap;}.cs-variant-tag {background: rgba(var(--primary-rgb), 0.2);color: var(--primary);padding: 0.25rem 0.75rem;border-radius: 12px;font-size: 0.8rem;font-weight: 600;}.cs-variant-preview {position: relative;}.cs-usage-guide {background: var(--blackColor);border-radius: 12px;padding: 2rem;margin-top: 3rem;}.cs-usage-guide h2 {color: var(--primary);font-size: 1.5rem;margin-bottom: 1.5rem;}.cs-usage-guide h3 {color: #fff;margin-bottom: 1rem;margin-top: 1.5rem;}.cs-usage-content {color: #fff;opacity: 0.9;line-height: 1.6;}.cs-usage-content ol, .cs-usage-content ul {padding-left: 1.5rem;margin: 1rem 0;}.cs-usage-content li {margin-bottom: 0.5rem;}.cs-usage-content code {background: rgba(var(--primary-rgb), 0.2);color: var(--primary);padding: 0.2rem 0.4rem;border-radius: 4px;font-family: 'Courier New', monospace;font-size: 0.9rem;}.cs-usage-content pre {background: #111;padding: 1rem;border-radius: 6px;margin: 1rem 0;overflow-x: auto;}.cs-usage-content pre code {background: none;color: #f8f8f2;padding: 0;}.component-showcase {padding: 2rem;max-width: 1200px;margin: 0 auto;}.component-title {color: #fff;font-size: 2rem;margin-bottom: 0.5rem;}.component-description {color: #fff;opacity: 0.8;margin-bottom: 3rem;font-size: 1.1rem;}.variant-section {margin-bottom: 4rem;}.variant-title {color: var(--primary);font-size: 1.5rem;margin-bottom: 2rem;border-bottom: 2px solid var(--primary);padding-bottom: 0.5rem;}.product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;margin-bottom: 2rem;}.product-card {background: var(--blackColor);border-radius: 12px;overflow: hidden;transition: transform 0.3s ease;border: 1px solid rgba(255, 255, 255, 0.1);}.product-card:hover {transform: translateY(-5px);box-shadow: rgba(var(--primary-rgb), 0.2) 0px 15px 40px;}.product-image {width: 100%;height: 200px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);display: flex;align-items: center;justify-content: center;color: #fff;font-size: 1.2rem;}.product-content {padding: 1.5rem;}.product-title {color: #fff;font-size: 1.25rem;font-weight: 600;margin-bottom: 0.5rem;}.product-price {color: var(--primary);font-size: 1.5rem;font-weight: 700;margin-bottom: 1rem;}.product-description {color: #fff;opacity: 0.8;font-size: 0.95rem;line-height: 1.5;margin-bottom: 1.5rem;}.product-button {width: 100%;padding: 0.75rem;background: var(--primary);color: #fff;border: none;border-radius: 8px;font-weight: 600;cursor: pointer;transition: background-color 0.3s;}.product-button:hover {background: var(--primaryDark);}.product-card-minimal {background: transparent;border: 2px solid rgba(255, 255, 255, 0.1);}.product-card-minimal:hover {border-color: var(--primary);}.product-badge {position: absolute;top: 1rem;right: 1rem;background: #ff6b6b;color: #fff;padding: 0.25rem 0.75rem;border-radius: 20px;font-size: 0.8rem;font-weight: 600;}.product-features {list-style: none;padding: 0;margin: 1rem 0;}.product-features li {color: #fff;opacity: 0.8;font-size: 0.9rem;margin-bottom: 0.5rem;position: relative;padding-left: 1.5rem;}.product-features li:before {content: '✓';color: var(--primary);position: absolute;left: 0;font-weight: bold;}