.pk-cm__color-row { display: flex; align-items: center; gap: 10px; }
    .pk-cm__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-cm__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;
    }
    #cm-ratio {
        width: 100%;
        margin-top: 6px;
    }
    .pk-cm__pct {
        margin-left: 8px;
        padding: 2px 8px;
        background: rgba(255,255,255,0.10);
        border-radius: 999px;
        font-size: 0.78rem; font-weight: 700;
        color: var(--calc-accent);
    }
    .pk-cm__hint { color: var(--pk-fg-mut); font-size: 0.78rem; margin-top: 4px; }
    .pk-cm__check {
        display: inline-flex; align-items: center; gap: 8px;
        cursor: pointer;
        font-weight: 600;
    }
    .pk-cm__preview {
        min-height: 160px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        padding: 22px;
        color: #04102B;
        display: flex; align-items: flex-end;
    }
    .pk-cm__preview.is-dark { color: #ffffff; }
    .pk-cm__preview-meta {
        background: rgba(255,255,255,0.18);
        backdrop-filter: blur(2px);
        border-radius: 10px;
        padding: 10px 14px;
        width: 100%;
    }
    .pk-cm__preview.is-dark .pk-cm__preview-meta { background: rgba(0,0,0,0.32); }
    .pk-cm__big-hex {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-weight: 800; font-size: 1.6rem;
        margin: 0;
    }
    .pk-cm__line {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.82rem;
        margin: 2px 0 0;
    }
    .pk-cm__stops {
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(11, minmax(0, 1fr));
        gap: 4px;
    }
    .pk-cm__stop {
        appearance: none; cursor: pointer;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 8px;
        padding: 30px 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: 80px;
        color: rgba(0,0,0,0.85);
        text-shadow: 0 0 2px rgba(255,255,255,0.40);
    }
    .pk-cm__stop.is-dark { color: rgba(255,255,255,0.92); text-shadow: 0 0 2px rgba(0,0,0,0.40); }
    .pk-cm__stop-pct { font-size: 0.68rem; opacity: 0.80; font-weight: 700; }
    .pk-cm__stop-hex { font-size: 0.70rem; font-weight: 700; }
    @media (max-width: 720px) {
        .pk-cm__stops { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    }
    .pk-btn {
        appearance: none; cursor: pointer;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        color: var(--pk-fg);
        padding: 10px 16px;
        border-radius: 10px;
        font-weight: 700; font-size: 0.85rem;
        display: inline-flex; align-items: center; gap: 8px;
    }
    .pk-btn--primary {
        background: linear-gradient(135deg, var(--calc-accent-2), var(--calc-accent));
        color: #04102B; border-color: transparent;
    }
    .pk-btn.is-copied { background: rgba(45,190,122,0.20); border-color: #2DBE7A; color: #2DBE7A; }