*,::after,::before{-webkit-tap-highlight-color:transparent}.cp-dpad,.cp-dpad-btn,.cp-extract-controls,.cp-palette-item,.cp-palette-list,.cp-viewport{user-select:none;-webkit-user-select:none}.cp-page{padding:40px 0 64px}.cp-sub{text-align:center;font-size:15px;color:var(--sub);margin-top:8px;margin-bottom:24px}.cp-tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:24px}.cp-tab{flex:1;padding:10px 0;font-family:system-ui,sans-serif;font-weight:600;font-size:14px;color:var(--mute);background:0 0;border:none;border-radius:10px;cursor:pointer;transition:color .2s,background .2s;touch-action:manipulation}.cp-tab.active{color:var(--text);background:var(--field);box-shadow:0 1px 4px rgba(0,0,0,.06)}.cp-tab:not(.active):active{color:var(--sub)}.cp-wheel-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px}.cp-wheel-area{position:relative;width:240px;height:240px;touch-action:none;flex-shrink:0}.cp-wheel-canvas{width:100%;height:100%;border-radius:50%;cursor:crosshair}.cp-wheel-cursor{position:absolute;width:20px;height:20px;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.15);pointer-events:none;transform:translate(-50%,-50%);z-index:2}.cp-lightness-vert{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.cp-slider-label{font-size:11px;font-weight:600;color:var(--mute);white-space:nowrap}.cp-lightness-track{position:relative;width:32px;height:240px;border-radius:16px;overflow:visible;touch-action:none;cursor:pointer}.cp-lightness-canvas{width:24px;height:100%;border-radius:12px;margin-left:4px;pointer-events:none}.cp-lightness-thumb{position:absolute;left:50%;width:24px;height:24px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.12);transform:translate(-50%,-50%);pointer-events:none;z-index:2}.cp-drop{display:block;border:2px dashed var(--line);border-radius:var(--card-radius);background:var(--card);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s}.cp-drop input[type=file]{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}.cp-drop.drag-over{border-color:var(--accent);background:rgba(196,154,142,.03);box-shadow:0 0 0 4px rgba(196,154,142,.08)}[data-theme=dark] .cp-drop.drag-over{background:rgba(217,179,168,.04);box-shadow:0 0 0 4px rgba(217,179,168,.08)}.cp-drop-inner{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}.cp-drop-icon{width:48px;height:48px;color:var(--mute);margin-bottom:8px}.cp-drop-text{font-size:16px;font-weight:500;color:var(--text)}.cp-drop-or{font-size:13px;color:var(--mute);margin:4px 0}.cp-drop-btn{display:inline-block;border:1px solid var(--mute);border-radius:var(--btn-radius);color:var(--text);padding:10px 32px;font-family:system-ui,sans-serif;font-weight:500;font-size:14px;letter-spacing:.06em;cursor:pointer;transition:.3s;pointer-events:auto}.cp-drop-btn:active{border-color:var(--accent);color:var(--accent)}.cp-drop-formats{font-size:12px;color:var(--mute);margin-top:8px}.cp-extract{display:flex;flex-direction:column;gap:12px}.cp-viewport{position:relative;width:100%;height:300px;border-radius:14px;overflow:hidden;background:#1a1a1a;touch-action:none;cursor:grab;border:1px solid var(--line)}.cp-viewport:active{cursor:grabbing}.cp-viewport-inner{position:absolute;inset:0;overflow:hidden}.cp-image-canvas{position:absolute;top:0;left:0;image-rendering:auto}.cp-crosshair{position:absolute;inset:0;pointer-events:none;z-index:5}.cp-crosshair-v{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.45);transform:translateX(-.5px)}.cp-crosshair-h{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.45);transform:translateY(-.5px)}.cp-crosshair-dot{position:absolute;top:50%;left:50%;width:10px;height:10px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.2)}.cp-viewport-hint{font-size:12px;color:var(--mute);text-align:center;margin:0}.cp-extract-controls{display:flex;align-items:center;justify-content:center;gap:16px}.cp-mag-box{position:relative;width:130px;height:130px;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:#000;flex-shrink:0}.cp-mag-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.cp-mag-crosshair{position:absolute;top:50%;left:50%;width:11px;height:11px;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none;z-index:2}.cp-mag-label{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);padding:1px 8px;border-radius:6px;pointer-events:none;z-index:3;white-space:nowrap;font-variant-numeric:tabular-nums}:root{--cp-dpad-bg:#F3EBF7;--cp-dpad-btn:#FFFFFF;--cp-dpad-btn-active:#EDE5F2;--cp-dpad-arrow:#9B7EB0;--cp-dpad-border:rgba(200,170,220,.4);--cp-dpad-shadow:rgba(160,120,200,.12)}[data-theme=dark]{--cp-dpad-bg:#2A2438;--cp-dpad-btn:#362E42;--cp-dpad-btn-active:#443A52;--cp-dpad-arrow:#C0A8D8;--cp-dpad-border:rgba(180,150,220,.2);--cp-dpad-shadow:rgba(0,0,0,.3)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .cp-drop.drag-over{background:rgba(217,179,168,.04);box-shadow:0 0 0 4px rgba(217,179,168,.08)}:root:not([data-theme=light]){--cp-dpad-bg:#2A2438;--cp-dpad-btn:#362E42;--cp-dpad-btn-active:#443A52;--cp-dpad-arrow:#C0A8D8;--cp-dpad-border:rgba(180,150,220,.2);--cp-dpad-shadow:rgba(0,0,0,.3)}}.cp-dpad-wrap{flex-shrink:0}.cp-dpad{position:relative;width:130px;height:130px}.cp-dpad::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;background:var(--cp-dpad-bg);border-radius:8px;pointer-events:none;z-index:0}.cp-dpad-btn{position:absolute;background:var(--cp-dpad-btn);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--cp-dpad-arrow);transition:background .08s;touch-action:manipulation;border:1.5px solid var(--cp-dpad-border);outline:0;z-index:1;box-shadow:0 2px 8px var(--cp-dpad-shadow)}.cp-dpad-btn:active{background:var(--cp-dpad-btn-active)}.cp-dpad-btn svg{stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px;pointer-events:none}.cp-dpad-up{left:50%;transform:translateX(-50%);top:0;width:42px;height:46px;border-radius:14px 14px 6px 6px;padding-bottom:6px}.cp-dpad-up:active{transform:translateX(-50%) scale(.94)}.cp-dpad-down{left:50%;transform:translateX(-50%);bottom:0;width:42px;height:46px;border-radius:6px 6px 14px 14px;padding-top:6px}.cp-dpad-down:active{transform:translateX(-50%) scale(.94)}.cp-dpad-left{top:50%;transform:translateY(-50%);left:0;width:46px;height:42px;border-radius:14px 6px 6px 14px;padding-right:6px}.cp-dpad-left:active{transform:translateY(-50%) scale(.94)}.cp-dpad-right{top:50%;transform:translateY(-50%);right:0;width:46px;height:42px;border-radius:6px 14px 14px 6px;padding-left:6px}.cp-dpad-right:active{transform:translateY(-50%) scale(.94)}.cp-extract-meta{display:flex;align-items:center;justify-content:space-between}.cp-extract-size{font-size:12px;color:var(--mute)}.cp-extract-change{padding:8px 24px;font-family:system-ui,sans-serif;font-weight:500;font-size:13px;color:var(--sub);background:0 0;border:1px solid var(--line);border-radius:var(--btn-radius);cursor:pointer;transition:border-color .2s,color .2s;touch-action:manipulation}.cp-extract-change:active{border-color:var(--accent);color:var(--text)}.cp-result-card{margin-top:4px;border:1px solid var(--line);border-radius:var(--card-radius);padding:10px 16px 14px;background:var(--card)}.cp-preview-row{display:flex;align-items:stretch;gap:16px;margin-bottom:12px}.cp-preview-swatch{width:80px;min-height:80px;border-radius:14px;background:red;flex-shrink:0;border:1px solid var(--line)}.cp-preview-values{flex:1;display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:0}.cp-color-name{font-size:13px;font-weight:600;color:var(--sub);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-match-pct{font-size:11px;font-weight:400;color:var(--mute)}.cp-flash{background:var(--line)!important;transition:none!important}@keyframes cp-tap-anim{0%,100%{transform:scale(1)}50%{transform:scale(.92)}}.cp-tap{animation:.15s cp-tap-anim}.cp-value-row{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.cp-value-row::-webkit-scrollbar{display:none}.cp-value-label{font-size:11px;font-weight:700;color:var(--mute);width:32px;flex-shrink:0;letter-spacing:.08em}.cp-value-copy{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--text);background:0 0;border:none;padding:4px 8px;border-radius:6px;cursor:pointer;transition:background .15s;letter-spacing:.02em;text-align:left;white-space:nowrap}.cp-value-copy:active{background:var(--line)}.cp-hex-input-row{display:flex;align-items:center;margin-bottom:16px}.cp-hex-label{font-size:12px;font-weight:700;color:var(--mute);width:24px;text-align:center;flex-shrink:0;margin-right:4px}.cp-hex-hash{font-family:system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--mute);background:var(--line);padding:9px 10px;border-radius:10px 0 0 10px;border:1px solid var(--line);border-right:none;line-height:1.4}.cp-hex-input{font-family:system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:0 10px 10px 0;padding:9px 12px;width:120px;letter-spacing:.12em;outline:0;transition:border-color .2s;text-transform:uppercase}.cp-hex-input:focus{border-color:var(--accent)}.cp-num-section{display:flex;gap:8px;margin-bottom:12px}.cp-num-row{flex:1;display:flex;align-items:center;gap:4px}.cp-num-label{font-size:12px;font-weight:700;color:var(--mute);width:16px;text-align:center;flex-shrink:0}.cp-num-input{width:100%;font-family:system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:7px 6px;text-align:center;outline:0;transition:border-color .2s;-moz-appearance:textfield;font-variant-numeric:tabular-nums}.cp-num-input::-webkit-inner-spin-button,.cp-num-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cp-num-input:focus{border-color:var(--accent)}.cp-num-unit{font-size:12px;color:var(--mute);flex-shrink:0;width:12px}.cp-palette{border-top:1px solid var(--line);padding-top:12px;margin-top:0}.cp-palette-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.cp-palette-title{font-size:13px;font-weight:600;color:var(--sub)}.cp-name-prompt-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);cursor:pointer;margin-bottom:10px;user-select:none;-webkit-user-select:none}.cp-name-prompt-toggle input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}.cp-palette-add-btn{width:36px;height:36px;border-radius:10px;border:1.5px dashed var(--mute);cursor:pointer;display:flex;align-items:center;justify-content:center;background:0 0;color:var(--mute);font-size:22px;font-weight:300;transition:border-color .2s,color .2s,background .2s;touch-action:manipulation;padding:0;line-height:1}.cp-palette-add-btn:active{border-color:var(--accent);color:var(--accent);background:rgba(196,154,142,.06)}.cp-palette-list{display:flex;flex-wrap:wrap;gap:8px;min-height:36px}.cp-palette-item{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;transition:transform .15s,box-shadow .15s;touch-action:manipulation;position:relative;background:0 0;padding:0}.cp-palette-item:active{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.12)}.cp-palette-item.active{border-color:var(--text);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--text)}.cp-palette-empty{font-size:12px;color:var(--mute);padding:8px 0}.cp-palette-mode-btn{background:0 0;border:1.5px solid var(--line);cursor:pointer;color:var(--mute);padding:7px 9px;border-radius:10px;transition:color .2s,background .2s,border-color .2s;display:flex;align-items:center;justify-content:center;touch-action:manipulation}.cp-palette-mode-btn:active{color:var(--text);background:var(--line)}.cp-palette-mode-btn.active{color:#fff;border-color:var(--accent);background:var(--accent)}.cp-palette-item.cp-del-target{cursor:pointer}.cp-palette-item.cp-del-target::after{content:'\00D7';position:absolute;top:-6px;right:-6px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;color:#fff;background:#e05555;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}.cp-palette-item.cp-swap-src{border-color:var(--accent);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent);transform:scale(1.1)}.cp-palette-swap-bar{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.cp-palette-swap-btn{font-family:system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--accent);background:0 0;border:1.5px solid var(--accent);border-radius:10px;padding:8px 18px;cursor:pointer;transition:background .15s,color .15s;touch-action:manipulation}.cp-palette-swap-btn:active{background:var(--accent);color:#fff}.cp-palette-swap-hint{font-size:13px;color:var(--mute)}.cp-palette-name-row{display:flex;align-items:center;gap:10px;margin-top:14px}.cp-palette-name-lbl{font-size:13px;font-weight:700;color:var(--mute);flex-shrink:0}.cp-palette-name-input{flex:1;font-family:system-ui,sans-serif;font-size:16px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 12px;outline:0;transition:border-color .2s}.cp-palette-name-input:focus{border-color:var(--accent)}.cp-palette-data-section{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.cp-palette-data-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.cp-palette-data-label{font-size:13px;font-weight:600;color:var(--sub);margin-right:auto}.cp-palette-data-actions{display:flex;align-items:center;gap:8px}.cp-palette-data-act{background:0 0;border:1.5px solid var(--line);cursor:pointer;color:var(--sub);padding:7px 14px;border-radius:10px;transition:color .2s,background .2s,border-color .2s;display:flex;align-items:center;gap:5px;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;touch-action:manipulation}.cp-palette-data-act:active{color:var(--text);border-color:var(--sub);background:var(--line)}.cp-palette-data-act.active{color:var(--accent);border-color:var(--accent)}.cp-palette-data-edit-actions{display:flex;align-items:center;gap:8px}.cp-palette-data-cancel{font-family:system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--sub);background:0 0;border:1.5px solid var(--line);border-radius:10px;padding:7px 16px;cursor:pointer;transition:color .2s,border-color .2s;touch-action:manipulation}.cp-palette-data-cancel:active{color:var(--text);border-color:var(--sub)}.cp-palette-data-apply{font-family:system-ui,sans-serif;font-size:13px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:10px;padding:8px 18px;cursor:pointer;transition:opacity .15s;touch-action:manipulation}.cp-palette-data-apply:active{opacity:.85}.cp-palette-data-paste{font-family:system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--sub);background:0 0;border:1.5px solid var(--line);border-radius:10px;padding:7px 16px;cursor:pointer;transition:color .2s,border-color .2s;touch-action:manipulation}.cp-palette-data-paste:active{color:var(--text);border-color:var(--sub)}.cp-palette-data-txt{width:100%;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:16px;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:0;resize:vertical;line-height:1.7;transition:border-color .2s;box-sizing:border-box;white-space:pre;overflow-x:auto}.cp-palette-data-txt:focus{border-color:var(--accent)}.cp-palette-data-txt[readonly]{background:0 0;border-color:transparent;resize:none}.cp-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.cp-section-title{font-size:14px;font-weight:700;color:var(--text)}.cp-adjust-btn{background:0 0;border:1.5px solid var(--line);cursor:pointer;color:var(--sub);padding:7px 14px;border-radius:10px;transition:color .2s,background .2s,border-color .2s;display:flex;align-items:center;gap:5px;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;touch-action:manipulation}.cp-adjust-btn:active{color:var(--text);border-color:var(--sub);background:var(--line)}.cp-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}.cp-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);width:100%;max-width:400px;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,.2)}.cp-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}.cp-modal-title{font-size:16px;font-weight:700;color:var(--text)}.cp-modal-close{background:0 0;border:none;font-size:28px;line-height:1;color:var(--mute);cursor:pointer;padding:0 4px;transition:color .15s}.cp-modal-close:active{color:var(--text)}.cp-modal-body{padding:16px 20px 20px}.cp-modal-body .cp-preview-row{margin-bottom:16px}.cp-modal-val{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--text);letter-spacing:.02em}.cp-modal-swatch{cursor:pointer}.cp-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.cp-modal-cancel{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;color:var(--sub);background:0 0;border:1.5px solid var(--line);border-radius:10px;padding:10px 22px;cursor:pointer;transition:color .2s,border-color .2s}.cp-modal-cancel:active{color:var(--text);border-color:var(--sub)}.cp-modal-confirm{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:10px;padding:10px 22px;cursor:pointer;transition:opacity .15s}.cp-modal-confirm:active{opacity:.85}.cp-detail-btn{background:0 0;border:1.5px solid var(--line);cursor:pointer;color:var(--sub);padding:7px 14px;border-radius:10px;transition:color .2s,background .2s,border-color .2s;display:flex;align-items:center;gap:5px;font-family:system-ui,sans-serif;font-size:13px;font-weight:600;touch-action:manipulation}.cp-detail-btn:active{color:var(--text);border-color:var(--sub);background:var(--line)}.cp-detail-swatch-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}.cp-detail-swatch{width:64px;height:64px;border-radius:14px;border:1px solid var(--line);flex-shrink:0}.cp-detail-name{font-size:15px;font-weight:600;color:var(--text)}.cp-detail-hint{font-size:11px;color:var(--mute);margin:0 0 8px}.cp-detail-values{display:flex;flex-direction:column;gap:4px}.cp-detail-row{display:flex;align-items:center;gap:8px}.cp-detail-label{font-size:11px;font-weight:700;color:var(--mute);width:52px;flex-shrink:0;letter-spacing:.08em}.cp-detail-copy{font-family:system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--text);background:0 0;border:none;padding:5px 8px;border-radius:6px;cursor:pointer;transition:background .15s;letter-spacing:.02em;text-align:left;word-break:break-all}.cp-detail-copy:active{background:var(--line)}.cp-add-modal-preview{display:flex;align-items:center;gap:14px;margin-bottom:16px}.cp-add-modal-swatch{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);flex-shrink:0}.cp-add-modal-hex{font-size:18px;font-weight:700;color:var(--text);letter-spacing:.04em}.cp-harmony-fold{border-top:1px solid var(--line);margin-top:4px;padding-top:0}.cp-harmony-sum{font-size:12px;font-weight:600;color:var(--mute);padding:8px 0;cursor:pointer;user-select:none;-webkit-user-select:none;list-style:none;display:flex;align-items:center;gap:6px}.cp-harmony-sum::-webkit-details-marker{display:none}.cp-harmony-sum>span:first-child::before{content:'';display:inline-block;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s;margin-right:2px}details[open].cp-harmony-fold>.cp-harmony-sum>span:first-child::before{transform:rotate(90deg)}.cp-harmony-hint{font-size:11px;font-weight:400;color:var(--mute);display:none}details[open].cp-harmony-fold .cp-harmony-hint{display:inline}.cp-harmony-body{padding-bottom:8px}.cp-harmony-row{display:flex;align-items:center;gap:12px;padding:3px 0;border-radius:8px}.cp-harmony-name{font-size:13px;font-weight:600;color:var(--text);width:72px;flex-shrink:0;cursor:pointer}.cp-harmony-name:active{color:var(--accent)}.cp-harmony-chips{display:flex;gap:6px;flex-wrap:wrap}.cp-harmony-chip{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--line);flex-shrink:0;cursor:pointer;transition:transform .15s,box-shadow .15s}.cp-harmony-chip:active{transform:scale(1.12);box-shadow:0 2px 8px rgba(0,0,0,.12)}.cp-harmony-modal-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.cp-harmony-modal-chip{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line)}.cp-sort-menu{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--card)}.cp-sort-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.cp-sort-title{font-size:13px;font-weight:700;color:var(--text)}.cp-sort-dir{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.cp-sort-dir-btn{font-family:system-ui,sans-serif;font-size:12px;font-weight:600;padding:5px 12px;border:none;background:0 0;color:var(--mute);cursor:pointer;transition:background .15s,color .15s}.cp-sort-dir-btn.active{background:var(--accent);color:#fff}.cp-sort-opt{display:block;width:100%;text-align:left;font-family:system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--text);background:0 0;border:none;padding:10px 8px;border-radius:8px;cursor:pointer;transition:background .15s}.cp-sort-opt:active{background:var(--line)}.cp-sort-opt.active{color:var(--accent);font-weight:700}.cp-preview-swatch{position:relative;cursor:pointer;overflow:hidden}.cp-preview-swatch::after{content:'+';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:300;color:#fff;background:rgba(0,0,0,.25);opacity:0;transition:opacity .2s;pointer-events:none}.cp-preview-swatch:active::after{opacity:1}.cp-lightness-track,.cp-wheel-canvas{-webkit-touch-callout:none}@media(max-width:480px){.cp-page{padding:32px 0 48px}.cp-wheel-row{gap:12px}.cp-wheel-area{width:200px;height:200px}.cp-lightness-track{height:200px}.cp-viewport{height:240px}.cp-preview-swatch{width:64px;min-height:64px}.cp-extract-controls{gap:10px}.cp-dpad,.cp-mag-box{width:110px;height:110px}.cp-dpad::after{width:36px;height:36px}.cp-dpad-down,.cp-dpad-up{width:36px;height:40px}.cp-dpad-left,.cp-dpad-right{width:40px;height:36px}.cp-dpad-btn svg{width:20px;height:20px}}@media(max-width:360px){.cp-wheel-area{width:170px;height:170px}.cp-lightness-track{height:170px}}@media(hover:hover){.cp-tab:not(.active):hover{color:var(--sub)}.cp-drop:hover{border-color:var(--accent);background:rgba(196,154,142,.03);box-shadow:0 0 0 4px rgba(196,154,142,.08)}.cp-drop-btn:hover{border-color:var(--accent);color:var(--accent)}.cp-extract-change:hover{border-color:var(--accent);color:var(--text)}.cp-value-copy:hover{background:var(--line)}.cp-palette-add-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(196,154,142,.06)}.cp-palette-item:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.12)}.cp-palette-mode-btn:hover{color:var(--text);background:var(--line)}.cp-palette-swap-btn:hover{background:var(--accent);color:#fff}.cp-palette-data-act:hover{color:var(--text);border-color:var(--sub);background:var(--line)}.cp-palette-data-cancel:hover{color:var(--text);border-color:var(--sub)}.cp-palette-data-apply:hover{opacity:.85}.cp-palette-data-paste:hover{color:var(--text);border-color:var(--sub)}.cp-adjust-btn:hover,.cp-detail-btn:hover{color:var(--text);border-color:var(--sub);background:var(--line)}.cp-detail-copy:hover{background:var(--line)}.cp-modal-close:hover{color:var(--text)}.cp-modal-cancel:hover{color:var(--text);border-color:var(--sub)}.cp-modal-confirm:hover{opacity:.85}.cp-harmony-name:hover{color:var(--accent)}.cp-harmony-chip:hover{transform:scale(1.12);box-shadow:0 2px 8px rgba(0,0,0,.12)}.cp-sort-opt:hover{background:var(--line)}.cp-preview-swatch:hover::after{opacity:1}}