.colors-page{max-width: 1000px;margin: 0 auto;padding: 24px 16px 48px}.colors-page h1{font-size: 1.7rem;line-height: 1.3;margin: 0 0 12px}.colors-intro{color: var(--text-light);line-height: 1.7;margin: 0 0 28px}.colors-section{margin: 0 0 40px}.colors-section h2{font-size: 1.25rem;margin: 0 0 6px}.colors-note{color: var(--text-muted);font-size: .92rem;line-height: 1.6;margin: 0 0 14px}.colors-table-wrap{overflow-x: auto;max-height: 78vh;width: fit-content;max-width: 100%;border: var(--border-width) solid var(--border-color);border-radius: var(--radius-sm);background: var(--color-white);box-shadow: var(--shadow-sm)}.colors-table{width: auto;border-collapse: collapse;font-size: .94rem}.colors-table th,.colors-table td{padding: 9px 12px;text-align: left;white-space: nowrap}.colors-table thead th{background: var(--color-cream);border-bottom: var(--border-width) solid var(--border-color);font-weight: 800;position: sticky;top: 0}.colors-table tbody tr:nth-child(even){background: var(--color-cream)}.colors-table td.col-no{color: var(--text-muted);font-variant-numeric: tabular-nums}.colors-table td.col-name{white-space: nowrap;font-weight: 600}.colors-table td.col-hex{font-family: ui-monospace,SFMono-Regular,Menlo,monospace;text-transform: uppercase}.colors-swatch{display: inline-block;width: 30px;height: 30px;vertical-align: middle;border: var(--border-width) solid var(--border-color);border-radius: var(--radius-xs)}.colors-tag{display: inline-block;margin-left: 6px;padding: 1px 7px;border-radius: var(--radius-full);font-size: .72rem;font-weight: 800;background: var(--color-sky);color: var(--text-color)}.colors-tag--glow{background: var(--color-mint)}.colors-count{color: var(--text-muted);font-size: .88rem;font-weight: 600}.colors-cta{margin: 8px 0 0}.colors-tabs{flex-wrap: wrap;gap: 6px;margin: 0 0 14px;width: fit-content;max-width: 100%}.colors-tabs .tab-btn{padding: 9px 16px;font-size: .92rem;text-decoration: none;color: var(--text-color)}.colors-tabs .tab-btn.active{color: var(--color-black)}.colors-tab-n{font-size: .8rem;font-weight: 600;opacity: .7;font-variant-numeric: tabular-nums}.colors-search{margin: 0 0 12px;position: relative;max-width: 420px}.colors-search input{width: 100%;padding: 10px 14px;font-size: .95rem;border: var(--border-width) solid var(--border-color);border-radius: var(--radius-sm);background: var(--color-white);color: var(--text-color)}#colorSearchOut{position: absolute;top: calc(100% + 6px);left: 0;right: 0;z-index: 120;max-height: 340px;overflow-y: auto;padding: 6px;background: var(--color-white);border: var(--border-width) solid var(--border-color);border-radius: var(--radius-sm);box-shadow: var(--shadow-sm);display: flex;flex-direction: column;gap: 4px}#colorSearchOut:empty{display: none}.colors-search-result{display: flex;align-items: center;gap: 12px;flex-wrap: wrap;padding: 10px 12px;width: 100%;text-align: left;cursor: pointer;font: inherit;color: inherit;border: 1px solid rgba(0,0,0,0.08);border-radius: 8px;background: transparent}.colors-search-result:hover{background: var(--color-cream)}.colors-search-result .colors-swatch{width: 34px;height: 34px;flex: 0 0 34px}.colors-search-code{font-weight: 800;font-family: ui-monospace,SFMono-Regular,Menlo,monospace}.colors-search-note{flex: 1 1 100%;color: var(--text-muted);font-size: .85rem;line-height: 1.5;margin: 0}.colors-search-none{color: var(--text-muted);font-size: .9rem;margin: 4px}.colors-search-row{display: flex;align-items: center;gap: 10px;flex-wrap: wrap;padding: 8px 10px;border: 0;border-radius: 8px;background: transparent;width: 100%;text-align: left;cursor: pointer;font: inherit;color: inherit}.colors-search-row:hover{background: var(--color-cream)}.colors-search-row strong{font-weight: 700}.colors-search-row .colors-swatch{width: 26px;height: 26px;flex: 0 0 26px}.colors-search-en{color: var(--text-muted);font-size: .85rem}.colors-search-hex{font-family: ui-monospace,SFMono-Regular,Menlo,monospace;color: var(--text-muted);font-size: .88rem}.colors-search-brands{flex-basis: 100%;color: var(--text-muted);font-size: .84rem;font-family: ui-monospace,SFMono-Regular,Menlo,monospace}.colors-search-more{color: var(--text-muted);font-size: .88rem;margin: 2px 4px 4px}.colors-table tbody tr.colors-row-hit{background: var(--color-sky)}@media (max-width: 640px){.colors-page h1{font-size: 1.4rem}.colors-tabs{border-bottom: 0}.colors-tabs .tab-btn{border-bottom: var(--border-width) solid var(--border-color);border-radius: var(--radius-sm);margin-bottom: 0;padding: 7px 13px}.colors-table-wrap{overflow-x: visible;max-height: none;width: auto;max-width: none;border: 0;border-radius: 0;background: transparent;box-shadow: none}.colors-table{display: block;width: 100%;font-size: .9rem}.colors-table thead{display: none}.colors-table tbody{display: flex;flex-direction: column;gap: 8px}.colors-table tr{display: flex;flex-wrap: wrap;align-items: center;gap: 4px 10px;padding: 10px 12px;background: var(--color-white);border: var(--border-width) solid var(--border-color);border-radius: var(--radius-sm)}.colors-table tbody tr:nth-child(even){background: var(--color-white)}.colors-table td{padding: 0;border: 0}.colors-table td.col-no{order: 1;font-weight: 700}.colors-table td.col-no::before{content: attr(data-label) ' ';font-weight: 600}.colors-table td.col-swatch{order: 2;line-height: 0}.colors-table td.col-name{order: 3;flex: 1 1 auto;white-space: normal;font-size: 1rem}.colors-table td.col-hex{order: 4}.colors-table td.col-code{order: 5;flex: 1 1 100%;display: flex;justify-content: space-between;align-items: baseline;gap: 10px;font-variant-numeric: tabular-nums}.colors-table td.col-code::before{content: attr(data-label);color: var(--text-muted);font-weight: 700;font-size: .85rem}.colors-table td[data-empty]{display: none}}