.cpl__input-area{padding:16px;border-bottom:1px solid var(--color-border)}.cpl__input-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px;flex-wrap:wrap}.cpl__label{font-size:13px;font-weight:500;color:var(--color-text-soft)}.cpl__input-row{display:flex;gap:10px;align-items:stretch}.cpl__picker{width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;overflow:hidden}.cpl__picker::-webkit-color-swatch-wrapper{padding:4px}.cpl__picker::-webkit-color-swatch{border:none;border-radius:4px}.cpl__picker::-moz-color-swatch{border:none;border-radius:4px}.cpl__input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:13px;line-height:1.6;transition:border-color .15s ease,box-shadow .15s ease}.cpl__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2b6cff1f}.cpl__hint{margin:6px 0 0;font-size:12px;color:var(--color-text-muted)}.cpl__error{margin:12px 16px;padding:10px 14px;border-radius:var(--radius-sm);background:#dc262614;border:1px solid rgba(220,38,38,.2);color:var(--color-error);font-size:13px}.cpl__current{padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:1px solid var(--color-border)}.cpl__current-hex{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:22px;font-weight:700;letter-spacing:.04em}.cpl__current-rgb{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px;opacity:.85}.cpl__tabs{display:flex;gap:4px;padding:12px 16px 0;border-bottom:1px solid var(--color-border);overflow-x:auto}.cpl__tab{padding:8px 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--color-text-soft);font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease}.cpl__tab:hover{color:var(--color-primary)}.cpl__tab--active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.cpl__tab-desc{margin:8px 16px 0;font-size:12px;color:var(--color-text-muted)}.cpl__content{padding:16px}.cpl__section{margin-bottom:16px}.cpl__section:last-child{margin-bottom:0}.cpl__section-title{margin:0 0 12px;font-size:15px;font-weight:600}.cpl__section-title--mt{margin-top:24px}.cpl__section-desc{margin:8px 0 12px;font-size:12.5px;color:var(--color-text-muted);line-height:1.6}.cpl__sub-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.cpl__sub-tab{padding:5px 12px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg);color:var(--color-text-soft);font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s ease}.cpl__sub-tab:hover{border-color:var(--color-primary);color:var(--color-primary)}.cpl__sub-tab--active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.cpl__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.cpl__scale{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}.cpl__swatch{position:relative;min-height:90px;border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:8px;transition:transform .15s ease,box-shadow .15s ease}.cpl__swatch:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.cpl__swatch:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.cpl__swatch-label{font-size:11px;font-weight:600;opacity:.85}.cpl__swatch-hex{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:11.5px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.1)}.cpl__swatch-copy{align-self:flex-end;padding:2px 8px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font-size:10.5px;font-family:inherit;cursor:pointer;opacity:.85;transition:opacity .15s ease}.cpl__swatch-copy:hover{opacity:1}.cpl__a11y-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:8px}.cpl__a11y-item{padding:14px;border-radius:var(--radius-sm);border:1px solid var(--color-border);display:flex;flex-direction:column;gap:4px;min-height:90px}.cpl__a11y-label{font-size:12px;font-weight:500;opacity:.9}.cpl__a11y-ratio{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:18px;font-weight:700}.cpl__a11y-level{align-self:flex-start;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#fff3;border:1px solid currentColor}.cpl__cb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.cpl__cb-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.cpl__cb-swatch{width:100%;height:60px;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.cpl__cb-label{font-size:12px;color:var(--color-text-soft)}.cpl__cb-hex{font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px;color:var(--color-text)}.cpl__refresh{margin-top:12px;width:100%}.cpl__export{padding:16px;border-top:1px solid var(--color-border)}.cpl__export-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}.cpl__export-title{margin:0;font-size:15px;font-weight:600}.cpl__export-actions{display:flex;gap:4px;flex-wrap:wrap}.cpl__format-btn{padding:4px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-soft);font-size:11.5px;font-family:inherit;cursor:pointer;transition:all .15s ease}.cpl__format-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.cpl__format-btn--active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.cpl__name-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}.cpl__name-input{flex:1;padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12.5px}.cpl__name-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2b6cff1f}.cpl__export-code{margin:0 0 12px;padding:12px;background:var(--color-bg-code);color:var(--color-text);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:12px;line-height:1.6;border-radius:var(--radius-sm);overflow-x:auto;white-space:pre;max-height:360px;overflow-y:auto}.cpl__export-copy{width:100%}.cpl__notice{margin:12px 16px;padding:8px 14px;border-radius:var(--radius-sm);background:#1aaa5514;color:var(--color-success);font-size:13px;text-align:center}@media(max-width:768px){.cpl__input-head{flex-direction:column;align-items:stretch}.cpl__tabs{padding:10px 12px 0}.cpl__tab{padding:6px 10px;font-size:12px}.cpl__content{padding:12px}.cpl__swatches{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.cpl__scale{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))}.cpl__swatch{min-height:78px}.cpl__swatch-hex{font-size:10.5px}.cpl__a11y-grid{grid-template-columns:1fr}.cpl__export-head{flex-direction:column;align-items:stretch}.cpl__export-actions{overflow-x:auto}}