.pk-ts__color-row {
        display: flex; align-items: center; gap: 10px;
    }
    .pk-ts__color-row input[type="color"] {
        width: 56px; height: 44px;
        padding: 2px;
        background: rgba(0,0,0,0.30);
        border: 1.5px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        cursor: pointer;
    }
    .pk-ts__color-row input[type="text"] {
        flex: 1;
        padding: 10px 12px;
        background: rgba(0,0,0,0.30);
        border: 1.5px solid rgba(255,255,255,0.12);
        border-radius: 10px;
        color: var(--pk-fg);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.92rem;
        text-transform: lowercase;
    }
    .pk-ts__row-block { margin-bottom: 18px; }
    .pk-ts__strip {
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 4px;
        margin-top: 8px;
    }
    .pk-ts__swatch {
        appearance: none; cursor: pointer;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 8px;
        padding: 36px 4px 8px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
        gap: 2px;
        min-height: 88px;
        color: rgba(0,0,0,0.85);
        text-shadow: 0 0 2px rgba(255,255,255,0.40);
        transition: transform .12s ease;
    }
    .pk-ts__swatch.is-dark { color: rgba(255,255,255,0.92); text-shadow: 0 0 2px rgba(0,0,0,0.40); }
    .pk-ts__swatch:hover { transform: translateY(-2px); }
    .pk-ts__swatch.is-copied { outline: 2px solid var(--calc-accent); }
    .pk-ts__swatch-pct { font-size: 0.70rem; opacity: 0.75; font-weight: 700; }
    .pk-ts__swatch-hex { font-size: 0.74rem; font-weight: 700; }
    .pk-ts__hint { font-size: 0.82rem; color: var(--pk-fg-mut); margin-top: 4px; text-align: center; }
    @media (max-width: 720px) {
        .pk-ts__strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }