.color-tool{display:grid;gap:16px}.color-surface{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:16px;align-items:stretch}.color-preview{display:grid;min-height:220px;border:1px solid rgba(0,109,119,.16);border-radius:8px;background:var(--active-color, #006d77);box-shadow:inset 0 0 0 1px #ffffff6b}.color-controls{display:grid;gap:14px}.color-field{display:grid;gap:8px;color:var(--ink);font-weight:800}.color-input,.color-text-input{width:100%;min-height:44px;border:1px solid rgba(0,109,119,.18);border-radius:8px;background:#fbfefe;color:var(--ink);padding:10px 12px;font:.95rem/1.45 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace}.color-input{min-height:54px;padding:4px;cursor:pointer}.color-input:focus,.color-text-input:focus{outline:none;box-shadow:var(--tool-focus)}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.color-actions{display:flex;flex-wrap:wrap;gap:10px}.color-actions .button,.color-copy{min-height:44px}.color-values{display:grid;gap:10px}.color-row{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:#fbfefe;padding:10px}.color-label{color:var(--muted);font-weight:900;text-transform:uppercase}.color-value{overflow-wrap:anywhere;color:var(--ink);font:.94rem/1.5 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace}.color-copy{border:1px solid rgba(0,109,119,.18);border-radius:8px;background:var(--mist);color:var(--deep-teal);cursor:pointer;font-weight:900;padding:8px 12px}.color-copy:focus,.color-swatch:focus{outline:none;box-shadow:var(--tool-focus)}.color-meta{margin:0;border-radius:8px;padding:12px;background:#edf6f9db;color:var(--muted);font-weight:800}.color-meta.is-valid{background:#83c5be38;color:var(--deep-teal)}.color-meta.is-invalid{background:var(--peach);color:#613224}.color-history{display:grid;gap:10px}.color-history h3{margin:0;color:var(--ink);font-size:1rem}.color-swatches{display:flex;flex-wrap:wrap;gap:10px}.color-swatch{width:44px;height:44px;border:1px solid rgba(0,109,119,.2);border-radius:8px;background:var(--swatch-color, #006d77);cursor:pointer}@media (max-width: 860px){.color-surface{grid-template-columns:1fr}}@media (max-width: 720px){.color-preview{min-height:180px}.color-grid,.color-actions{grid-template-columns:1fr}.color-actions{display:grid}.color-row{grid-template-columns:1fr}.color-copy{width:100%}}