.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:2.5rem}.color-card{border-radius:var(--border-radius-md);overflow:hidden;transition:var(--transition-fast);box-shadow:0 4px 12px var(--shadow-color-dark-8);height:100%;cursor:pointer}.color-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.12)}.color-preview{height:100px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600}.color-info{padding:0.5rem;background-color:var(--border-color-extra-light)}.color-name{font-weight:600;margin-bottom:0.25rem;font-size:0.95rem}.color-japanese{font-size:0.85rem;color:var(--text-color-light);margin-bottom:0.25rem;font-family:'MS Gothic',monospace}.color-code{font-family:'Courier New',monospace;font-weight:600;font-size:0.9rem;display:flex;justify-content:space-between;align-items:center;background-color:var(--white-bg);border-radius:var(--border-radius-sm);margin-top:0.5rem;padding:0.5rem;border:1px solid var(--border-color-light)}.copy-btn{background:var(--primary-color);color:#ffffff;border:none;font-size:0.75rem;cursor:pointer;padding:0.4rem 0.9rem;border-radius:var(--border-radius-sm);transition:var(--transition-fast);display:flex;align-items:center;gap:0.4rem;font-weight:500}.copy-btn:hover{background:var(--primary-color-dark);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow-color-primary-20)}.copy-btn i{font-size:0.8rem}.filter-section{background-color:var(--white-bg);border-radius:var(--border-radius-md);box-shadow:0 4px 12px rgba(0,0,0,0.06);margin-bottom:2rem}.filter-btn{background-color:var(--primary-color-bg);color:var(--primary-color);border:1px solid var(--border-color-light);margin:0.5rem}.filter-btn:hover,.filter-btn.active{background-color:var(--primary-color);color:var(--text-color-white);border-color:var(--primary-color)}.filter-buttons-container{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;white-space:nowrap}.filter-buttons-container::-webkit-scrollbar{display:none}.filter-buttons-container > .d-flex{flex-wrap:nowrap;justify-content:flex-start}@media (max-width:992px){.color-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media (max-width:768px){.color-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem}}@media (max-width:576px){.color-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.filter-buttons{justify-content:center}}.btn-primary{background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:var(--primary-color-dark);border-color:var(--primary-color-dark)}.badge-primary{background-color:var(--primary-color)}