.clr-layout{display:flex;flex-direction:column;gap:var(--tb-space-5)}.clr-top{align-items:start}.clr-picker-col{display:flex;flex-direction:column;gap:var(--tb-space-4)}.clr-input-header{display:flex;align-items:center;justify-content:space-between;gap:var(--tb-space-2);margin-bottom:var(--tb-space-2)}.clr-format-select{width:auto;min-width:5rem;padding:var(--tb-space-1) var(--tb-space-2);font-size:var(--tb-font-size-sm);font-weight:600}.clr-hex-row{display:flex;align-items:center;gap:var(--tb-space-2)}.clr-native-picker{width:var(--tb-space-10);height:var(--tb-space-10);padding:var(--tb-space-1);border:1px solid var(--tb-color-gray-200);border-radius:var(--tb-radius-md);background:var(--tb-color-bg);cursor:pointer;flex-shrink:0}.clr-hex-row .tb-input{flex:1;font-family:var(--tb-font-mono);font-size:var(--tb-font-size-input-mono)}.clr-actions{display:flex;gap:var(--tb-space-2);flex-wrap:wrap}.clr-swatch-col{display:flex;flex-direction:column}.clr-swatch{min-height:7.5rem;border-radius:var(--tb-radius-lg) var(--tb-radius-lg) 0 0;transition:background-color var(--tb-transition-fast)}.clr-swatch-info{display:flex;flex-direction:column;gap:var(--tb-space-1);padding:var(--tb-space-3) var(--tb-space-4);border:1px solid var(--tb-color-gray-200);border-top:none;border-radius:0 0 var(--tb-radius-lg) var(--tb-radius-lg);background:var(--tb-color-bg)}.clr-swatch__hex{font-family:var(--tb-font-mono);font-size:var(--tb-font-size-lg);font-weight:700;color:var(--tb-color-gray-900);letter-spacing:.05em}.clr-swatch__name{font-size:var(--tb-font-size-sm);color:var(--tb-color-gray-500)}.clr-formats{display:flex;flex-direction:column;gap:var(--tb-space-2)}.clr-format-row{display:flex;align-items:center;gap:var(--tb-space-2)}.clr-format-label{flex-shrink:0;width:3.5rem;font-size:var(--tb-font-size-sm);font-weight:500;color:var(--tb-color-gray-500)}.clr-output-input{flex:1;font-family:var(--tb-font-mono);font-size:var(--tb-font-size-input-mono);background:var(--tb-color-gray-100);cursor:default}.clr-copy-btn{flex-shrink:0;padding:var(--tb-space-2) var(--tb-space-3)}.clr-section-title{font-size:var(--tb-font-size-base);font-weight:600;color:var(--tb-color-gray-600);margin:0 0 var(--tb-space-3) 0}.clr-css-section,.clr-bottom{padding-top:var(--tb-space-4);border-top:1px solid var(--tb-color-gray-200)}.clr-contrast-section,.clr-harmony-section{display:flex;flex-direction:column}.clr-contrast-row{display:flex;align-items:center;gap:var(--tb-space-2);padding:var(--tb-space-2) var(--tb-space-3);border-radius:var(--tb-radius-md);background:var(--tb-color-gray-100);margin-bottom:var(--tb-space-2)}.clr-contrast-swatch{width:var(--tb-space-6);height:var(--tb-space-6);border-radius:var(--tb-radius-sm);border:1px solid var(--tb-color-gray-200);flex-shrink:0}.clr-contrast-vs{font-size:var(--tb-font-size-sm);color:var(--tb-color-gray-500);flex:1}.clr-contrast-ratio{font-family:var(--tb-font-mono);font-size:var(--tb-font-size-sm);font-weight:600;color:var(--tb-color-gray-600)}.clr-contrast-badge{font-size:var(--tb-font-size-xs);font-weight:700;padding:var(--tb-space-1) var(--tb-space-2);border-radius:var(--tb-radius-full);text-transform:uppercase;letter-spacing:.05em;color:var(--tb-color-white);background:var(--tb-color-gray-400)}.clr-contrast-badge.badge-aaa{background:var(--tb-color-success)}.clr-contrast-badge.badge-aa{background:var(--tb-color-warning)}.clr-contrast-badge.badge-fail{background:var(--tb-color-danger)}.clr-harmony-group{display:flex;flex-direction:column;gap:var(--tb-space-2);margin-bottom:var(--tb-space-3)}.clr-harmony-label{font-size:var(--tb-font-size-xs);font-weight:500;color:var(--tb-color-gray-400);text-transform:uppercase;letter-spacing:.05em}.clr-harmony-swatches{display:flex;gap:var(--tb-space-2);flex-wrap:wrap}.clr-harmony-btn{width:var(--tb-space-6);height:var(--tb-space-6);border-radius:var(--tb-radius-sm);border:2px solid transparent;cursor:pointer;padding:0;transition:transform var(--tb-transition-fast),border-color var(--tb-transition-fast);flex-shrink:0}.clr-harmony-btn:hover{transform:scale(1.15);border-color:var(--tb-color-gray-300)}.clr-harmony-btn:focus-visible{outline:none;border-color:var(--tb-focus-border);box-shadow:var(--tb-focus-ring)}@media(max-width:639px){.clr-top,.clr-bottom{grid-template-columns:1fr}.clr-format-label{width:3rem}}