.page-tools { padding-block: 2rem 4rem; max-width: 1200px; }
.tool-hero { max-width: 820px; margin-bottom: 2rem; }
.tool-hero h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.12; letter-spacing: -.04em; }
.tool-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.4fr); gap: 1.25rem; align-items: start; }
.tool-panel, .tool-promo { padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-surface); border: 1px solid var(--color-surface-3); border-radius: var(--radius-lg); }
.tool-panel h2 { margin: 0 0 1.25rem; }
.tool-panel label:not(.tool-checkbox) { display: block; margin: 1rem 0 .4rem; font-size: .875rem; font-weight: 600; }
.tool-panel label span { display: block; font-size: .75rem; color: var(--color-text-soft); font-weight: 400; }
.tool-panel input[type=number], .tool-panel select { width: 100%; padding: .8rem; background: var(--color-bg-2); color: var(--color-text); border: 1px solid var(--color-muted-2); border-radius: 8px; font: inherit; }
.tool-panel input:focus-visible, .tool-panel select:focus-visible, .tool-presets button:focus-visible, .catalog-pagination a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.tool-checkbox { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0; font-size: .875rem; }
.tool-checkbox input { accent-color: var(--color-accent); }
.tool-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.tool-presets button { color: var(--color-text-soft); background: var(--color-surface-2); border: 1px solid var(--color-surface-3); padding: .5rem .65rem; border-radius: 6px; cursor: pointer; font: inherit; font-size: .75rem; }
.tool-presets button:hover { color: var(--color-accent); border-color: var(--color-accent); }
.tool-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0; }
.tool-result-grid div { padding: 1rem; border-radius: 10px; background: var(--color-bg-2); }
.tool-result-grid dt { font-size: .75rem; color: var(--color-text-soft); }
.tool-result-grid dd { margin: .5rem 0 0; color: var(--color-accent-hover); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
.tool-advice { padding: 1rem; background: var(--color-accent-dim); border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; font-size: .875rem; }
.tool-table-wrap { overflow-x: auto; }
.tool-comparison { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tool-comparison caption { text-align: left; font-weight: 600; padding: .5rem 0; }
.tool-comparison th, .tool-comparison td { padding: .7rem .5rem; text-align: left; border-bottom: 1px solid var(--color-surface-3); }
.tool-comparison th { color: var(--color-text-soft); font-size: .75rem; }
.tool-result-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.tool-note { font-size: .75rem; color: var(--color-text-soft); line-height: 1.7; }
.tool-error { color: #ffb4a2; }
.tool-explanation { margin-top: 3rem; max-width: 900px; }
.tool-explanation h2 { margin-top: 2rem; }
.tool-explanation p { color: var(--color-text-soft); line-height: 1.8; }
.tool-explanation strong { color: var(--color-text); }
.tool-promo { display: block; margin-block: 1.5rem; color: var(--color-text); text-decoration: none; }
.tool-promo:hover { border-color: var(--color-accent); }
.tool-promo p { color: var(--color-text-soft); max-width: 650px; }
@media (max-width: 760px) { .tool-layout { grid-template-columns: 1fr; } .tool-result-grid dd { font-size: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .page-tools * { scroll-behavior: auto; transition: none; } }