/* ===== Tool page layout ===== */
.tool-page-hero {
  padding: calc(var(--header-height) + 50px) 0 20px;
  background: var(--gradient-mesh), var(--color-bg);
}
.tool-breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.tool-breadcrumb a { color: var(--color-primary); font-weight: 600; }
.tool-page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.tool-page-head .tool-icon { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: 0; flex-shrink: 0; }
.tool-page-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.tool-page-desc { color: var(--text-body); max-width: 640px; margin: 10px 0 0; }

.tool-panel {
  background: var(--surface-white);
  border: 1px solid #EEF0F5;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 34px;
  margin: 26px 0 60px;
}
@media (max-width: 576px) { .tool-panel { padding: 22px; } }

.tz-label {
  display: block; font-weight: 600; font-size: 0.85rem; color: var(--text-heading);
  margin-bottom: 8px;
}
.tz-input, .tz-textarea, .tz-select {
  width: 100%;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--text-heading);
  background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
}
.tz-input:focus, .tz-textarea:focus, .tz-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
  background: #fff;
}
.tz-textarea { resize: vertical; min-height: 160px; font-family: 'ui-monospace', 'SFMono-Regular', Menlo, monospace; font-size: 0.9rem; }
.tz-field { margin-bottom: 20px; }
.tz-row { display: flex; gap: 16px; flex-wrap: wrap; }
.tz-row > .tz-field { flex: 1; min-width: 180px; }

.tz-btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.tz-chip-btn {
  border: 1.5px solid #E5E7EB; background: #fff; color: var(--text-body);
  padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.85rem;
  transition: all var(--dur-fast) var(--ease-out); cursor: pointer;
}
.tz-chip-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tz-chip-btn.active { background: var(--gradient-primary); border-color: transparent; color: #fff; }

/* ===== Result area ===== */
.tz-result {
  background: var(--color-bg);
  border: 1.5px dashed #D8DCE6;
  border-radius: var(--radius-md);
  padding: 24px;
  margin-top: 22px;
  transition: border-color var(--dur-mid);
}
.tz-result.has-value { border-style: solid; border-color: transparent; background: rgba(79,70,229,0.05); }
.tz-result-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; }
.tz-result-value {
  font-family: var(--font-heading); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--text-heading);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tz-result-value .unit { font-size: 1rem; font-weight: 600; color: var(--color-primary); }
.tz-result-sub { font-size: 0.9rem; color: var(--text-body); margin-top: 8px; }
.tz-result-value.pop { animation: resultPop 0.45s var(--ease-out); }
@keyframes resultPop {
  0% { transform: scale(0.85); opacity: 0.3; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
.tz-field.shake { animation: fieldShake 0.4s; }
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Stat grid inside result (used by BMI, Age, etc.) */
.tz-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-top: 4px; }
.tz-stat-box { background: #fff; border-radius: 14px; padding: 16px; text-align: center; box-shadow: var(--shadow-soft); }
.tz-stat-box .n { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.tz-stat-box .l { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

/* BMI gauge */
.tz-gauge-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #3B82F6, #22C55E, #F59E0B, #EF4444); position: relative; margin-top: 20px; }
.tz-gauge-dot {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--color-dark); transform: translate(-50%, -50%);
  transition: left 0.5s var(--ease-out); left: 0%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tz-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; margin-top: 14px; }

/* Copy button */
.tz-copy-btn {
  background: #fff; border: 1.5px solid #E5E7EB; border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 0.8rem; font-weight: 600; color: var(--text-body);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all var(--dur-fast);
}
.tz-copy-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tz-copy-btn.copied { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.tz-error-msg { color: #EF4444; font-size: 0.85rem; font-weight: 600; margin-top: 10px; display: none; align-items: center; gap: 6px; }
.tz-error-msg.show { display: flex; }

/* Checkbox field label (used by Password Generator, etc.) */
.tz-check-label {
  display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600;
  color: var(--text-heading); cursor: pointer; user-select: none;
}
.tz-check-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

/* Related tools */
.related-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.related-chip {
  background: #fff; border: 1px solid #EEF0F5; border-radius: var(--radius-pill);
  padding: 10px 18px; font-size: 0.85rem; font-weight: 600; color: var(--text-heading);
  display: inline-flex; align-items: center; gap: 8px; transition: all var(--dur-fast);
}
.related-chip:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }