/* 
   color palette tool css
   dependency on /resources/global.css for all else
 */
.tool-hero {background-image:url('/resources/color.webp');}
.dropzone {border:2px dashed rgba(229,0,125,0.3);border-radius:2px;padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease;background:linear-gradient(180deg, rgba(229,0,125,0.03), transparent);}
.dropzone:hover, .dropzone.drag {border-color:var(--spot);background:rgba(229,0,125,0.05);}
.dropzone svg {width:38px;height:38px;margin-bottom:10px;color:var(--spot);}
.dropzone p {margin:0;font-weight:600;font-family:'Barlow',sans-serif;}
.dropzone .hint {color:var(--slate);font-size:13.5px;margin-top:6px;font-family:'Barlow',monospace;letter-spacing:0.02em;}
input[type=file] {display:none;}
.workspace {display:none;}
.workspace.active {display:block;}
.source-row {display:flex;align-items:center;gap:20px;margin-bottom:26px;}
.source-thumb {width:72px;height:72px;object-fit:cover;border-radius:2px;border:1px solid var(--line);flex-shrink:0;}
.count-control {display:flex;align-items:center;gap:12px;flex:1;}
.count-control label {font-family:'Barlow',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);flex-shrink:0;}
.count-control input[type=range] {flex:1;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--panel);outline:none;}
.count-control input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--spot);border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;}
.count-control span {font-family:'Fraunces',serif;font-size:16px;width:16px;text-align:center;}
.swatch-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.swatch {aspect-ratio:1.4;border:1px solid var(--line);border-radius:2px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;transition:transform .1s ease;}
.swatch:hover {transform:translateY(-2px);}
.swatch:active {transform:scale(0.98);}
.swatch-hex {font-family:'Barlow',monospace;font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.25);}
.swatch-hex.is-dark {color:#17181C;text-shadow:none;}
.swatch-pct {font-family:'Barlow',monospace;font-size:10.5px;color:rgba(255,255,255,0.75);}
.swatch-pct.is-dark {color:rgba(23,24,28,0.6);}
.copy-hint {font-family:'Barlow',monospace;font-size:12px;color:var(--slate);margin:0 0 24px;}
.actions {display:flex;gap:10px;flex-wrap:wrap;}
.copy-confirm {display:none;font-family:'Barlow',monospace;font-size:12.5px;color:var(--spot-dark);margin-top:12px;}
.copy-confirm.show {display:block;}
@media (max-width:480px) {.swatch-grid {grid-template-columns:repeat(2,1fr);} .source-row {flex-direction:column;align-items:flex-start;}}
@media (max-width:860px) {.tool-hero {background-image:none;}}