/* BinCast — Encode / Decode Tool */

/* ── Image-mode workspace layout ────────────────────────────────── */

[data-tool-id="encode"] .tool-workspace.mode-image {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 760px) {
  [data-tool-id="encode"] .tool-workspace.mode-image {
    grid-template-columns: 1fr;
  }
}

/* ── Base32 / Base58 sub-toggle ──────────────────────────────────── */

.enc-subtoggle {
  display: flex;
  gap: 4px;
  margin-bottom: .6rem;
}

.enc-sub-btn {
  padding: .25rem .7rem;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}

.enc-sub-btn:hover { color: var(--text); border-color: var(--muted); }

.enc-sub-btn.is-active {
  color: var(--forge-primary);
  border-color: var(--forge-primary);
  background-color: var(--forge-a8);
}

/* ── Image drop zone ─────────────────────────────────────────────── */

.img-drop {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  width: 100%;
  min-height: 360px;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  overflow: hidden;
}

.img-drop:hover,
.img-drop.dragover {
  border-color: var(--forge-border);
  background-color: var(--surface2);
}

.img-drop input[type="file"] { display: none; }

.img-drop-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  flex-shrink: 0;
}

.img-drop-label svg {
  color: var(--forge-primary);
  opacity: .7;
  margin-bottom: .2rem;
}

.img-drop-label span { font-size: .875rem; }

.img-hint {
  font-size: .6875rem !important;
  color: var(--border) !important;
  letter-spacing: .04em;
}

/* ── Image preview ───────────────────────────────────────────────── */

.img-preview {
  width: 100%;
  text-align: center;
  flex-shrink: 0;
}

.img-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ── Error state ─────────────────────────────────────────────────── */

#enc-output.is-error { color: #e05c5c; }