.utility-card {
  flex: 1;
  padding: 27px 18px 22px;
  border: 2px solid var(--ink);
  background: radial-gradient(circle at 1px 1px, rgba(17,18,16,.07) 0 .65px, transparent .8px) 0 0 / 6px 6px, rgba(205,206,201,.96);
  box-shadow: 7px 7px 0 rgba(17,18,16,.13);
}
.utility-heading h1 { margin: 0; color: #3e3f3b; font-family: "Archivo Black", "Inter", sans-serif; font-size: clamp(34px, 10.5vw, 48px); line-height: .92; letter-spacing: -.07em; }
.conversion-mode-switch { margin-bottom: 24px; }
.conversion-mode-switch a { font-size: 9px; line-height: 1.2; text-align: center; }
.utility-heading p { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.utility-drop { margin-top: 18px; }
.utility-workspace { margin-top: 18px; }
.utility-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; }
.field.wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid var(--ink); border-radius: 0; background: #d7d8d3; color: var(--ink); font: 11px "Inter", sans-serif; }
.field textarea { min-height: 92px; resize: vertical; }
.check-field { min-height: 38px; padding: 8px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); font-size: 9px; }
.check-field input { width: auto; min-height: 0; }
.tool-action { width: 100%; min-height: 48px; padding: 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-size: 11px; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
.tool-action:hover:not(:disabled) { background: var(--accent); }
.tool-action:disabled { background: transparent; color: var(--muted); opacity: .55; cursor: not-allowed; }
.tool-action.secondary { background: transparent; color: var(--ink); }
.tool-action.secondary:hover:not(:disabled) { background: rgba(17,18,16,.1); }
.tool-status { min-height: 17px; margin: 12px 0 8px; color: var(--muted); font: 9px/1.5 "DM Mono", monospace; overflow-wrap: anywhere; }
.tool-status.error { color: #641e19; }
.tool-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; list-style: none; }
.asset-card { min-width: 0; padding: 8px; border: 1px solid var(--line); background: rgba(212,213,208,.55); }
.asset-card.selected { border: 2px solid var(--ink); padding: 7px; }
.asset-card canvas, .asset-card img { width: 100%; height: 124px; display: block; object-fit: contain; background: #ecece8; }
.asset-name { margin: 7px 0 0; overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.asset-meta { margin: 3px 0 0; color: var(--muted); font: 7px "DM Mono", monospace; }
.asset-actions { margin-top: 7px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.asset-actions button { min-height: 27px; padding: 3px; border: 1px solid var(--line); background: transparent; font: 8px "DM Mono", monospace; cursor: pointer; }
.asset-actions button:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.asset-actions button:disabled { opacity: .3; }
.preview-panel { min-height: 190px; padding: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: #d7d8d3; }
.preview-panel img, .preview-panel canvas { max-width: 100%; max-height: 300px; object-fit: contain; }
.hash-output { width: 100%; min-height: 86px; padding: 10px; border: 1px solid var(--ink); background: #d7d8d3; color: var(--ink); font: 10px/1.5 "DM Mono", monospace; overflow-wrap: anywhere; user-select: all; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.local-tool-note { margin: 12px 4px 0; color: var(--muted); font-size: 8px; line-height: 1.6; text-align: center; }
.transform-workspace { display: grid; gap: 14px; }
.transform-workspace[hidden] { display: none; }
.transform-preview {
  min-height: 240px;
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ink);
  background:
    linear-gradient(45deg, #c5c6c1 25%, transparent 25%, transparent 75%, #c5c6c1 75%),
    linear-gradient(45deg, #c5c6c1 25%, #dedfda 25%, #dedfda 75%, #c5c6c1 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}
.transform-preview canvas { display: block; max-width: 100%; max-height: 420px; box-shadow: 0 8px 24px rgba(17,18,16,.18); }
.transform-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.transform-actions button {
  min-height: 55px;
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--ink);
  background: transparent;
  font: 8px "DM Mono", monospace;
  letter-spacing: .04em;
  cursor: pointer;
}
.transform-actions button span { font-size: 20px; line-height: 1; }
.transform-actions button:hover { background: var(--ink); color: var(--white); }
.angle-field {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font: 8px "DM Mono", monospace;
  letter-spacing: .06em;
}
.angle-field output { color: var(--ink); font-size: 10px; }
.angle-field input { width: 100%; grid-column: 1 / -1; accent-color: var(--ink); cursor: ew-resize; }
.transform-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-items: end; }
.transform-reset, .replace-image {
  min-height: 38px;
  padding: 8px;
  border: 1px solid var(--ink);
  background: transparent;
  font: 9px "DM Mono", monospace;
  letter-spacing: .05em;
  cursor: pointer;
}
.transform-reset:hover, .replace-image:hover { background: var(--ink); color: var(--white); }
.replace-image { width: 100%; border-color: var(--line); }
@media (min-width: 520px) { .utility-card { padding: 31px 22px 24px; } .tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .asset-card canvas, .asset-card img { height: 112px; } }