.cp-tool .cp-layout{align-items: flex-start;row-gap: var(--tool-module-gap)}.cp-tool .cp-layout>[class*="col-"]{display: flex;flex-direction: column;gap: var(--tool-module-gap)}.cp-tool .cp-panel{min-width: 0;height: auto}.cp-tool [hidden],.cp-float[hidden],.cp-loupe-wrap[hidden]{display: none !important}.cp-panel-header{gap: 10px 12px}.cp-panel-header>span:first-child{flex: 1 1 auto;min-width: 0}.cp-badge{display: inline-flex;align-items: center;padding: 2px 9px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: 999px;color: var(--text-2);font-size: 12px;font-weight: 600;white-space: nowrap}.cp-badge[data-usable="1"]{background: var(--success-soft);border-color: #bbf7d0;color: var(--success)}.cp-badge[data-usable="0"]{background: var(--warning-soft);border-color: #fde68a;color: var(--warning)}:root[data-theme="dark"] .cp-badge{color: var(--text-2)}.cp-pick-body{gap: 12px}.cp-pick-row{display: flex;flex-wrap: wrap;align-items: center;gap: 10px 14px}.btn.cp-btn-unavailable{background: var(--bg-soft);border-style: dashed;border-color: var(--border-strong);color: var(--text-2);cursor: help;opacity: 1;box-shadow: none}.btn.cp-btn-unavailable:hover{background: var(--warning-soft);border-color: var(--warning);color: var(--warning);box-shadow: none}.cp-screen-note{padding-left: 10px;border-left: 3px solid var(--border)}.cp-screen-note[data-usable="0"]{border-left-color: var(--warning);color: var(--warning)}.cp-native-wrap{display: inline-flex;align-items: center;gap: 8px;margin: 0;color: var(--text-2);font-size: 13px;cursor: pointer}.cp-native-wrap input[type="color"]{width: 42px;height: 30px;padding: 0;background: transparent;border: 1px solid var(--border-strong);border-radius: 8px;cursor: pointer}.cp-check{display: inline-flex;align-items: center;gap: 6px;margin: 0;color: var(--text-2);font-size: 13px;cursor: pointer}.cp-check input{width: 16px;height: 16px;accent-color: var(--primary)}.cp-manual-group{min-width: 0}.cp-example-row{display: flex;flex-wrap: wrap;gap: 8px}.cp-example-row .btn{margin: 0}.cp-message{padding: 9px 12px;border: 1px solid var(--border);border-left-width: 3px;border-radius: var(--radius);background: var(--bg-soft);color: var(--text-2);font-size: 13px;line-height: 1.6;word-break: break-word}.cp-message-good{background: var(--success-soft);border-color: #bbf7d0;border-left-color: var(--success);color: var(--success)}.cp-message-error{background: var(--danger-soft);border-color: #fecaca;border-left-color: var(--danger);color: var(--danger)}.cp-message-info{background: var(--primary-soft);border-color: #bfdbfe;border-left-color: var(--primary);color: var(--primary)}.cp-drop-zone{position: relative;padding: 10px;background: var(--bg-soft);border: 1px dashed var(--border-strong);border-radius: var(--radius);transition: border-color .15s ease,background .15s ease}.cp-drag-over{border-color: var(--primary);background: var(--primary-soft)}.cp-canvas{display: block;width: 100%;max-width: 100%;height: auto;margin: 0 auto;cursor: crosshair;background: conic-gradient(from 90deg at 50% 50%,#e8e8e8 25%,#ffffff 0 50%,#e8e8e8 0 75%,#ffffff 0) 0 0 / 16px 16px;image-rendering: pixelated}.cp-image-empty{position: absolute;inset: 10px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 6px;padding: 14px;color: var(--text-2);text-align: center;pointer-events: none}.cp-image-empty i{font-size: 26px;color: var(--text-3)}.cp-image-empty strong{font-size: 14px;color: var(--text)}.cp-image-empty span{font-size: 12px;line-height: 1.6}.cp-readout-row{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 10px}.cp-readout{font-family: var(--mono);font-size: 12px;color: var(--text-2);min-width: 96px}.cp-readout-hex{padding: 2px 8px;border: 1px solid var(--border);border-radius: 999px;background: var(--bg-soft);color: var(--text);font-weight: 600;letter-spacing: .3px;overflow-wrap: anywhere}.cp-file-input{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0 0 0 0);clip-path: inset(50%);white-space: nowrap;border: 0}.cp-file-btn{margin: 0;cursor: pointer}.cp-note{margin: 0;color: var(--text-2);font-size: 12px;line-height: 1.7;word-break: break-word}.cp-loupe-wrap{position: fixed;z-index: 1200;padding: 4px;background: var(--bg);border: 1px solid var(--border-strong);border-radius: var(--radius);box-shadow: var(--shadow);pointer-events: none}.cp-loupe{display: block;width: 150px;height: 150px;image-rendering: pixelated}.cp-float{position: fixed;z-index: 1200;max-width: min(360px,calc(100vw - 24px));padding: 5px 10px;background: rgba(17,24,39,.92);border-radius: 999px;color: #fff;font-family: var(--mono);font-size: 12px;line-height: 1.5;overflow-wrap: anywhere;pointer-events: none}body.cp-picking,body.cp-picking *{cursor: crosshair !important}.cp-current-body{align-items: center;gap: 10px}.cp-swatch{width: 100%;height: 96px;border: 1px solid var(--border-strong);border-radius: var(--radius);background: conic-gradient(from 90deg at 50% 50%,#e8e8e8 25%,#ffffff 0 50%,#e8e8e8 0 75%,#ffffff 0) 0 0 / 16px 16px}.cp-hex-big{font-family: var(--mono);font-size: 22px;font-weight: 700;letter-spacing: .5px;color: var(--text);text-align: center;overflow-wrap: anywhere}.cp-rows{display: flex;flex-direction: column;gap: 8px}.cp-row{display: flex;flex-wrap: wrap;align-items: center;gap: 6px 10px;padding: 8px 10px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius)}.cp-row-label{flex: 0 0 auto;min-width: 7em;color: var(--text-2);font-size: 12px;font-weight: 600}.cp-row-value{flex: 1 1 12rem;min-width: 0;margin: 0;color: var(--text);font-family: var(--mono);font-size: 13px;line-height: 1.6;background: none;border: 0;padding: 0;word-break: break-all;white-space: normal}.cp-row-copy{flex: 0 0 auto;margin-left: auto}.cp-row-wide .cp-row-value{flex: 0 0 auto;min-width: 4.5em;text-align: right}.cp-btn{display: inline-flex;align-items: center;justify-content: center;padding: 5px 12px;background: var(--bg);border: 1px solid var(--border-strong);border-radius: 8px;color: var(--text-2);font-size: 12px;font-weight: 600;line-height: 1.4;cursor: pointer}.cp-btn:hover{border-color: var(--primary);color: var(--primary)}.cp-btn-sm{padding: 3px 10px;font-size: 12px}.cp-tags{display: flex;flex-wrap: wrap;gap: 6px}.cp-tag{padding: 1px 8px;border: 1px solid var(--border);border-radius: 999px;background: var(--bg);color: var(--text-3);font-size: 11px;white-space: nowrap}.cp-tag-pass{background: var(--success-soft);border-color: #bbf7d0;color: var(--success)}.cp-tag-fail{background: var(--danger-soft);border-color: #fecaca;color: var(--danger)}.cp-preview-box{padding: 16px 14px;border: 1px solid var(--border-strong);border-radius: var(--radius);font-size: 18px;font-weight: 700;text-align: center;letter-spacing: .5px;overflow-wrap: anywhere}.cp-preview{display: flex;flex-direction: column;gap: 6px;margin-bottom: 10px}.cp-preview-note{margin: 0;color: var(--text-2);font-size: 12px;line-height: 1.6;word-break: break-word}.cp-wide-panel .cp-rows{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));align-items: start}.cp-wide-panel .cp-empty{grid-column: 1 / -1}.cp-palettes{display: flex;flex-direction: column;gap: 12px}.cp-palette-group{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 12px;padding: 10px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius)}.cp-palette-label{flex: 0 0 auto;min-width: 6.5em;color: var(--text-2);font-size: 12px;font-weight: 600}.cp-palette-swatches{display: flex;flex: 1 1 14rem;flex-wrap: wrap;gap: 6px;min-width: 0}.cp-swatch-btn{position: relative;width: 44px;height: 44px;padding: 0;border: 1px solid var(--border-strong);border-radius: 8px;cursor: pointer;background-clip: padding-box;overflow: hidden}.cp-swatch-caption{position: absolute;right: 0;bottom: 0;left: 0;padding: 2px 0;background: rgba(17,24,39,.62);color: #fff;font-family: var(--mono);font-size: 9px;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}.cp-swatch-btn:hover{outline: 2px solid var(--primary);outline-offset: 1px}.cp-chips{display: flex;flex-wrap: wrap;gap: 8px}.cp-chip{display: inline-flex;align-items: center;gap: 6px;padding: 4px 10px 4px 6px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: 999px;color: var(--text);font-family: var(--mono);font-size: 12px;cursor: pointer}.cp-chip:hover{border-color: var(--primary);color: var(--primary)}.cp-chip-dot{width: 16px;height: 16px;border: 1px solid var(--border-strong);border-radius: 50%;background: conic-gradient(from 90deg at 50% 50%,#e8e8e8 25%,#ffffff 0 50%,#e8e8e8 0 75%,#ffffff 0) 0 0 / 8px 8px}.cp-chip-text{overflow-wrap: anywhere}.cp-chip-empty,.cp-empty,.cp-log-empty{color: var(--text-3);font-size: 12px;line-height: 1.7;word-break: break-word}.cp-empty{margin: 0}.cp-log{max-height: 220px;margin: 0;padding: 0 0 0 18px;overflow-y: auto;color: var(--text-2);font-size: 12px;line-height: 1.8;list-style: disc}.cp-log li{word-break: break-all}@media (max-width: 767px){.cp-swatch{height: 72px}.cp-hex-big{font-size: 19px}}