/* Designed by Kapil Pidhwani: Image Color Extractor — tool-only styles; adapts via @container (card is the container) */
.ice-preview-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); line-height: 0; }
.ice-preview-wrap[hidden], #dropzone[hidden] { display: none; }
.ice-preview-canvas { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; cursor: crosshair; touch-action: manipulation; }
.ice-crosshair { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35); pointer-events: none; }
.ice-crosshair[hidden] { display: none; }

.ice-pick { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.ice-pick[hidden] { display: none; }
.ice-pick-swatch { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-md); border: 1px solid var(--border); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px var(--background); transition: transform 0.12s ease; }
.ice-pick-swatch:hover { transform: scale(1.05); }
.ice-pick-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ice-pick-meta strong { font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-primary); }
.ice-pick-meta span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); overflow-wrap: anywhere; }

.ice-hint { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--text-muted); text-align: center; min-height: 1.2em; }
.ice-hint[hidden] { display: none; }

.ice-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
.ice-chip { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); cursor: pointer; padding: 0; text-align: left; font: inherit; color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.ice-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ice-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ice-chip-color { height: 64px; width: 100%; }
.ice-chip-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; padding: 0.45rem 0.6rem; }
.ice-chip-hex { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.ice-chip-pct { font-size: 0.7rem; color: var(--text-muted); }
.ice-chip.is-copied .ice-chip-hex { color: var(--brand); }

@container (min-width: 900px) {
  .ice-chip-color { height: 76px; }
}