/* Tool page specific styles */
.tool-main { max-width: 700px; margin: 0 auto; padding: 2rem 1rem; }

.back-link { color: #718096; text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: 1.5rem; }
.back-link:hover { color: #e53e3e; }

.tool-page-header {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;
}
.tool-page-icon { font-size: 3rem; line-height: 1; }
.tool-page-header h1 { font-size: 1.75rem; font-weight: 700; color: #1a202c; }
.tool-page-header p { color: #718096; margin-top: .25rem; }

.tool-page-card {
  background: #fff; border-radius: 16px; padding: 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.field-group {
  display: flex; flex-direction: column; gap: .5rem;
  margin-top: 1.25rem;
}
.field-group label { font-weight: 600; font-size: .9rem; color: #4a5568; }
.field-input {
  padding: .6rem .9rem; border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: .95rem; font-family: inherit; background: #fff;
}
.field-input:focus { outline: none; border-color: #e53e3e; }

.field-row { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
.field-row > div { flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: .3rem; }
.field-row label { font-size: .8rem; }

.status { padding: .75rem 1rem; border-radius: 8px; font-weight: 600; display: none; }
.status.success { background: #e8f5e9; color: #2e7d32; display: block; }
.status.error   { background: #ffebee; color: #c62828; display: block; }