.color-tool { min-width: 0; }
.color-tabs { display:flex; flex-wrap:wrap; gap:.5rem; }
.color-tabs button { padding:.65rem 1rem; border:1px solid var(--bs-border-color); border-radius:2rem; background:var(--bs-tertiary-bg); color:var(--bs-body-color); }
.color-tabs button[aria-selected="true"] { color:white; background:#0b5ed7; border-color:#0b5ed7; }
.color-tool button:focus-visible,.color-tool canvas:focus-visible { outline:3px solid #659fff; outline-offset:3px; }
.color-checker { border:1px solid var(--bs-border-color); border-radius:.6rem; overflow:hidden; background-color:white; background-image:repeating-conic-gradient(#dce0e4 0% 25%,transparent 0% 50%); background-size:16px 16px; }
#color-preview { height:150px; }
.sample-preview { height:100px; }
.color-swatches { display:flex; flex-wrap:wrap; gap:.5rem; }
.color-swatch { min-width:44px; min-height:44px; border:1px solid var(--bs-border-color); border-radius:.5rem; padding:0; overflow:hidden; }
.color-swatch span { display:block; width:44px; height:44px; }
.color-drop { min-height:180px; padding:1rem; display:flex; justify-content:center; align-items:center; border:1px dashed var(--bs-border-color); border-radius:.75rem; background:var(--bs-tertiary-bg); }
.color-drop.dragging { border-color:var(--bs-primary); }
#pixel-wrap { position:relative; max-width:100%; }
#pixel-canvas { display:block; max-width:100%; height:auto; cursor:crosshair; background:repeating-conic-gradient(#ddd 0% 25%,white 0% 50%) 0/16px 16px; }
#pixel-marker { position:absolute; width:10px; height:10px; border:2px solid white; outline:1px solid black; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
#contrast-example { padding:1.3rem; border:1px solid var(--bs-border-color); border-radius:.6rem; }
#normal-example { font-size:16px; margin-bottom:1rem; }
#large-example { font-size:24px; font-weight:400; margin:0; }
.color-tool .input-group { flex-wrap:nowrap; }
.color-tool .input-group .form-control { min-width:0; }
.color-tool .form-control[readonly] { background:var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .color-tool .btn-outline-secondary { color:var(--bs-body-color); border-color:var(--bs-secondary-color); }
[data-bs-theme="dark"] .color-tool .btn-outline-primary { color:var(--bs-primary-text-emphasis); }
@media(max-width:575px) { .color-tabs button { flex:1 1 auto; } #pixel-form .btn { padding:.45rem .3rem; font-size:.85rem; } }