.jhw-hex-color-inspector{--hci-bg:var(--color-surface);--hci-card:var(--color-bg);--hci-ink:var(--color-text);--hci-muted:var(--color-text-muted);--hci-accent:var(--color-primary);--hci-border:var(--color-border)}.jhw-hex-color-inspector [hidden]{display:none!important}.jhw-hex-color-inspector__mode{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.jhw-hex-color-inspector__mode-button.is-active{--wc-button-bg:var(--ink);--wc-button-text:var(--bg);--wc-button-border:var(--ink);--wc-button-bg-hover:var(--ink);--wc-button-text-hover:var(--bg);--wc-button-border-hover:var(--ink)}.jhw-hex-color-inspector__layout{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;gap:24px;display:grid}.jhw-hex-color-inspector__panel--output{gap:18px;display:grid}.jhw-hex-color-inspector__panel--swatches{margin-top:24px}.jhw-hex-color-inspector__panel-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.jhw-hex-color-inspector__panel-title{margin:0;font-size:18px}.jhw-hex-color-inspector__panel-section{gap:10px;display:grid}.jhw-hex-color-inspector__panel-section textarea.wc-input{resize:vertical}.jhw-hex-color-inspector__hint{color:var(--hci-muted);margin:0;font-size:12px}.jhw-hex-color-inspector__swatch{border-radius:var(--wc-radius-lg);background:var(--hci-swatch,var(--color-surface));color:var(--hci-swatch-text,var(--hci-muted));border:1px solid var(--hci-border);align-items:center;min-height:140px;padding:18px;display:flex}.jhw-hex-color-inspector__swatch-inner{gap:6px;display:grid}.jhw-hex-color-inspector__swatch-hex{margin:0;font-size:22px;font-weight:600}.jhw-hex-color-inspector__swatch-text{opacity:.8;margin:0;font-size:13px}.jhw-hex-color-inspector__values{gap:12px;display:grid}.jhw-hex-color-inspector__value-row{grid-template-columns:1fr auto;align-items:center;gap:12px;display:grid}.jhw-hex-color-inspector__value-label{color:var(--hci-muted);margin:0 0 4px;font-size:12px}.jhw-hex-color-inspector__value{font-family:var(--wc-font-mono);margin:0;font-size:15px}.jhw-hex-color-inspector__contrast{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;display:grid}.jhw-hex-color-inspector__contrast-card{border-radius:var(--wc-radius-md);border:1px solid var(--hci-border);background:var(--color-surface);gap:6px;padding:12px;display:grid}.jhw-hex-color-inspector__contrast-value{margin:0;font-weight:600}.jhw-hex-color-inspector__badge{border-radius:var(--radius);border:1px solid var(--hci-border);color:var(--hci-ink);background:0 0;justify-content:center;align-items:center;width:fit-content;padding:4px 8px;font-size:11px;font-weight:600;display:inline-flex}.jhw-hex-color-inspector__badge.is-pass{color:var(--ok-ink)}.jhw-hex-color-inspector__badge.is-fail{color:var(--fail-ink)}.jhw-hex-color-inspector__tints{gap:10px;display:grid}.jhw-hex-color-inspector__tints-row{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px;display:grid}.jhw-hex-color-inspector button.jhw-hex-color-inspector__tint-button{border:1px solid var(--hci-border);border-radius:var(--wc-radius-sm);background:var(--hci-tint,var(--color-surface));min-height:44px;color:var(--hci-tint-text,var(--hci-ink));font-family:var(--wc-font-mono);cursor:pointer;padding:6px;font-size:11px}.jhw-hex-color-inspector__invalid{border-left:3px solid var(--fail);gap:6px;padding:10px 0 10px 14px;display:grid}.jhw-hex-color-inspector__invalid-title{color:var(--fail-ink);margin:0;font-size:12px;font-weight:600}.jhw-hex-color-inspector__invalid-list{color:var(--color-danger);margin:0;padding-left:18px;font-size:12px}.jhw-hex-color-inspector__swatches{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.jhw-hex-color-inspector__swatch-card{border-radius:var(--wc-radius-md);border:1px solid var(--hci-border);background:var(--color-surface);gap:8px;display:grid;overflow:hidden}.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-preview{cursor:pointer;background:var(--hci-swatch,var(--color-surface));color:var(--hci-swatch-text,var(--hci-ink));text-align:left;border:none;padding:16px;font-size:14px;font-weight:600}.jhw-hex-color-inspector__swatch-actions{justify-content:space-between;align-items:center;gap:8px;padding:0 12px 12px;display:flex}.jhw-hex-color-inspector__swatch-hex{font-family:var(--wc-font-mono);font-size:12px}.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-copy{border:1px solid var(--hci-border);color:var(--hci-ink);border-radius:var(--wc-radius-sm);cursor:pointer;background:0 0;padding:6px 10px;font-size:12px;font-weight:600}.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-preview:hover:not(:disabled),.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-preview:focus,.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-preview:focus-visible{background:var(--hci-swatch,var(--color-surface));color:var(--hci-swatch-text,var(--hci-ink))}.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-copy:hover:not(:disabled),.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-copy:focus,.jhw-hex-color-inspector button.jhw-hex-color-inspector__swatch-copy:focus-visible{border-color:var(--faint);color:var(--hci-ink)}.jhw-hex-color-inspector button.jhw-hex-color-inspector__tint-button:hover:not(:disabled),.jhw-hex-color-inspector button.jhw-hex-color-inspector__tint-button:focus,.jhw-hex-color-inspector button.jhw-hex-color-inspector__tint-button:focus-visible{background:var(--hci-tint,var(--color-surface));color:var(--hci-tint-text,var(--hci-ink))}.jhw-hex-color-inspector__swatch-preview:focus,.jhw-hex-color-inspector__swatch-copy:focus,.jhw-hex-color-inspector__tint-button:focus{outline:2px solid var(--hci-accent);outline-offset:2px}@media (width<=640px){.jhw-hex-color-inspector__mode{gap:8px}}