.b64-shell {
  display: grid;
  gap: 18px;
}

.b64-panel,
.b64-file-shell {
  border: 1px solid var(--border, #d7deea);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.b64-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.b64-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

.b64-checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.b64-textareas {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 14px;
}

.b64-textareas textarea,
.b64-file-output textarea,
.b64-field input,
.b64-field select {
  width: 100%;
  box-sizing: border-box;
}

.b64-textareas textarea,
.b64-file-output textarea {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.b64-actions,
.b64-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.b64-banner {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef4ff;
  color: #12355b;
}

.b64-banner--ok {
  background: #eaf8ef;
  color: #14532d;
}

.b64-banner--warn {
  background: #fff8e7;
  color: #7c4a03;
}

.b64-banner--error {
  background: #fff0f0;
  color: #8a1f1f;
}

.b64-meta {
  margin-top: 10px;
  color: #4a6079;
}

.b64-drop {
  margin-top: 14px;
  border: 2px dashed #9ab0cc;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  background: #f7faff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.b64-drop.is-dragover,
.b64-drop:focus-visible {
  border-color: #0b57d0;
  background: #edf4ff;
  transform: translateY(-1px);
  outline: none;
}

.b64-drop strong {
  display: block;
  margin-bottom: 6px;
}

.b64-preview-wrap {
  margin-top: 16px;
}

.b64-preview-wrap img {
  display: block;
  max-width: min(100%, 360px);
  max-height: 220px;
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 640px) {
  .b64-panel,
  .b64-file-shell {
    padding: 16px;
  }

  .b64-textareas textarea,
  .b64-file-output textarea {
    min-height: 180px;
  }
}