.colors-dashboard{display: grid;grid-template-columns: minmax(0,1fr) minmax(320px,.82fr);gap: 16px;align-items: stretch}.colors-panel{height: 100%}.colors-panel .form-control-group-header{flex: 0 0 auto;padding-top: 6px;padding-bottom: 6px}.colors-panel .form-control-group-header>span{flex: 1;min-width: 0}.colors-control-body,.colors-detail-body{display: grid;gap: 14px}.colors-search-field,.colors-detail-values label{display: grid;gap: 6px;margin: 0;min-width: 0}.colors-search-field>span,.colors-detail-values label>span{color: var(--text-2);font-size: 13px;font-weight: 600;line-height: 1.35}.colors-filter-row{display: flex;flex-wrap: wrap;gap: 8px}.colors-filter-row .btn{min-width: 72px;justify-content: center}.colors-stats{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));overflow: hidden;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg-soft)}.colors-stats>div{display: grid;gap: 3px;padding: 12px 14px;border-right: 1px solid var(--border)}.colors-stats>div:last-child{border-right: 0}.colors-stats strong{min-width: 0;overflow: hidden;color: var(--text);font-size: 18px;line-height: 1.2;text-overflow: ellipsis;white-space: nowrap}.colors-stats span{color: var(--text-2);font-size: 12.5px;line-height: 1.35}.colors-message{display: flex;align-items: flex-start;gap: 8px;padding: 10px 12px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg-soft);color: var(--text-2);font-size: 13.5px;line-height: 1.45}.colors-preview{position: relative;min-height: 164px;overflow: hidden;border: 1px solid var(--border);border-radius: var(--radius);background: linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-color: #fff;background-position: 0 0,0 10px,10px -10px,-10px 0;background-size: 20px 20px}.colors-preview>i{position: absolute;inset: 0;display: block;background: transparent}.colors-detail-values{display: grid;grid-template-columns: 1fr;gap: 10px}.colors-detail-values input{min-width: 0;font-family: var(--mono-font);font-size: 13px}.colors-copy-btn,.btn-copy-selected,.btn-copy-visible{min-width: 86px;justify-content: center}.colors-contrast-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 8px}.colors-contrast-grid p{display: grid;gap: 3px;margin: 0;padding: 9px 10px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg-soft)}.colors-contrast-grid span{color: var(--text-2);font-size: 12px;line-height: 1.3}.colors-contrast-grid strong{overflow: hidden;color: var(--text);font-family: var(--mono-font);font-size: 12.5px;line-height: 1.3;text-overflow: ellipsis;white-space: nowrap}.colors-grid-panel{margin-top: 16px}.colors-keyword-panel{margin-top: 16px}.colors-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(188px,1fr));gap: 12px}.color-card{display: grid;grid-template-columns: 42px minmax(0,1fr);gap: 10px;align-items: center;min-height: 72px;padding: 10px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg);color: var(--text);text-align: left;cursor: pointer}.color-card:hover,.color-card:focus{border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-soft)}.color-card.is-active{border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-soft)}.color-card-swatch{display: block;width: 42px;height: 42px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--color)}.color-card-meta{display: grid;gap: 3px;min-width: 0}.color-card-name{overflow: hidden;font-size: 13.5px;font-weight: 700;line-height: 1.25;text-overflow: ellipsis;white-space: nowrap}.color-card-code{color: var(--text-2);font-family: var(--mono-font);font-size: 12.5px;line-height: 1.35}.color-card-family{color: var(--text-3);font-size: 12px;line-height: 1.3;text-transform: capitalize}.colors-keyword-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 12px}.color-keyword-card{display: grid;grid-template-columns: 42px minmax(0,1fr);gap: 10px;align-items: center;min-height: 84px;padding: 11px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg);color: var(--text);text-align: left;cursor: pointer}.color-keyword-card:hover,.color-keyword-card:focus{border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-soft)}.color-keyword-icon{display: block;width: 42px;height: 42px;border: 1px solid var(--border);border-radius: var(--radius);background: linear-gradient(45deg,#d1d5db 25%,transparent 25%),linear-gradient(-45deg,#d1d5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d1d5db 75%),linear-gradient(-45deg,transparent 75%,#d1d5db 75%);background-color: #fff;background-position: 0 0,0 7px,7px -7px,-7px 0;background-size: 14px 14px}.color-keyword-meta{display: grid;gap: 3px;min-width: 0}.color-keyword-meta strong{font-size: 13.5px;line-height: 1.25}.color-keyword-meta code{overflow: hidden;color: var(--text-2);font-family: var(--mono-font);font-size: 12.5px;line-height: 1.35;text-overflow: ellipsis;white-space: nowrap}.color-keyword-meta span,.colors-empty-keywords{margin: 0;color: var(--text-3);font-size: 12.5px;line-height: 1.4}@media (max-width: 991px){.colors-dashboard{grid-template-columns: 1fr}}@media (max-width: 640px){.colors-panel .form-control-group-body{padding: 14px}.colors-stats,.colors-contrast-grid{grid-template-columns: 1fr}.colors-stats>div{border-right: 0;border-bottom: 1px solid var(--border)}.colors-stats>div:last-child{border-bottom: 0}.colors-filter-row{display: grid;grid-template-columns: repeat(2,minmax(0,1fr))}.colors-filter-row .btn{min-width: 0;width: 100%}.colors-results-header{display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: center;column-gap: 8px;padding-top: 6px;padding-bottom: 6px}.colors-results-header>span{display: block;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.btn-copy-selected,.btn-copy-visible{width: 94px;min-width: 94px;padding-right: 8px;padding-left: 8px;white-space: nowrap}.colors-grid{grid-template-columns: 1fr}.colors-keyword-grid{grid-template-columns: 1fr}}