.tool-page { max-width: 980px; margin: 0 auto; padding: 0 16px 36px; color: #263747; }
.tool-breadcrumb { display: flex; gap: 8px; align-items: center; color: #6c757d; font-size: .9rem; margin: 4px 0 18px; }
.tool-hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.tool-hero h1 { margin: 0 0 7px; }
.tool-hero p { margin: 0; color: #56616d; line-height: 1.55; }
.tool-emoji { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; background: #edf6ff; border-radius: 14px; font-size: 1.8rem; }
.prefill-location { display: inline-block; margin-top: 9px !important; padding: 5px 9px; border-radius: 16px; background: #e9f7ef; color: #26734d !important; font-size: .88rem; }
.tool-card, .tool-explainer, .related-tools { background: #fff; border: 1px solid #dfe6ed; border-radius: 12px; padding: 22px; margin-bottom: 22px; box-shadow: 0 2px 8px rgba(30,58,87,.05); }
.tool-card h2, .tool-explainer h2, .related-tools h2 { margin: 0 0 16px; font-size: 1.25rem; }
.input-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.input-grid label, .converter-row label { display: flex; flex-direction: column; gap: 7px; color: #405262; font-weight: 600; }
.tool-page input, .tool-page select { width: 100%; min-height: 44px; border: 1px solid #b8c4cf; border-radius: 7px; padding: 9px 10px; background: #fff; color: #263747; font: inherit; }
.tool-page input:focus, .tool-page select:focus { outline: 3px solid rgba(74,144,226,.2); border-color: #4A90E2; }
.input-with-unit { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.input-with-unit select { width: 88px; flex: 0 0 88px; }
.primary-result { margin-top: 20px; padding: 18px; background: #edf6ff; border-radius: 9px; color: #173a5e; font-size: 1.55rem; font-weight: 700; text-align: center; }
.result-detail { margin: 10px 0 0; color: #56616d; text-align: center; }
.converter-grid { display: grid; gap: 12px; }
.converter-row { display: grid; grid-template-columns: minmax(160px,1fr) 130px minmax(230px,1.4fr); gap: 12px; align-items: end; padding: 14px; background: #f8fafc; border-radius: 9px; }
.converter-row output { min-height: 44px; display: flex; align-items: center; padding: 9px 12px; border-radius: 7px; background: #edf6ff; font-weight: 700; overflow-wrap: anywhere; }
.recommendation-list { margin: 14px 0 0; padding-left: 22px; line-height: 1.75; }
.tool-explainer p { margin: 0; color: #4d5d6c; line-height: 1.65; }
.related-tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.related-tools-grid a { display: flex; gap: 8px; align-items: center; padding: 11px; border: 1px solid #dfe6ed; border-radius: 8px; }
.tool-notice { padding: 12px; background: #fff4d6; border-radius: 8px; }
@media (max-width: 720px) {
  .input-grid, .related-tools-grid { grid-template-columns: 1fr; }
  .converter-row { grid-template-columns: 1fr; }
  .tool-card, .tool-explainer, .related-tools { padding: 17px; }
  .tool-hero { gap: 12px; }
  .tool-emoji { width: 48px; height: 48px; flex-basis: 48px; }
}