/* Tool-only tweaks that blend into your portfolio CSS */
.tool-card { background: var(--border-gradient-onyx); border-radius: 14px; box-shadow: var(--shadow-2); position: relative; padding: 16px; z-index: 1; }
.tool-card::before { content: ""; position: absolute; inset: 1px; background: var(--bg-gradient-jet); border-radius: inherit; z-index: -1; }

.tool-auth {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border-radius: 12px; border: 1px solid var(--jet);
  background: var(--eerie-black-1);
  margin-bottom: 18px;
}
.tool-auth .meta { display: flex; flex-direction: column; gap: 4px; }
.tool-auth .status { color: var(--white-2); font-size: var(--fs-7); }
.tool-auth .hint { color: var(--light-gray-70); font-size: var(--fs-8); line-height: 1.4; }

.tool-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tool-actions .form-btn { width: auto; }

.tool-output {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 160px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--jet);
  background: var(--eerie-black-1);
  color: var(--white-2);
  font-size: var(--fs-6);
  line-height: 1.6;
}

.tool-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .tool-grid-2 { grid-template-columns: 1fr; } }

.tool-note { margin-top: 14px; color: var(--light-gray-70); font-size: var(--fs-8); line-height: 1.6; }
.tool-note code { background: var(--onyx); padding: 2px 6px; border-radius: 6px; color: var(--white-2); }