.tools-page .site-header, .tool-page .site-header { border-bottom: 1px solid var(--line); }
.tools-intro, .tool-header { padding: clamp(68px, 9vw, 118px) 0; }
.tools-intro h1, .tool-header h1 { margin-bottom: 25px; font-size: clamp(2rem, 4vw, 3.35rem); }
.tools-intro p:not(.section-label), .tool-header p:not(.section-label) { max-width: 40rem; margin-bottom: 0; color: var(--muted); letter-spacing: 0.035em; }
.tool-list-section { padding: 0 0 clamp(84px, 11vw, 145px); }
.tool-category + .tool-category { margin-top: clamp(72px, 9vw, 116px); padding-top: clamp(52px, 7vw, 82px); border-top: 1px solid var(--line); }
.tool-category-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.tool-category-heading h2 { margin-bottom: 0; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.tool-category-heading p { max-width: 30rem; margin: 0; color: var(--muted); letter-spacing: 0.035em; }
.tool-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tool-list-card { display: flex; min-height: 310px; flex-direction: column; padding: clamp(30px, 4vw, 48px); border-top: 2px solid var(--light-green); background: rgba(231, 223, 207, 0.38); }
.tool-number { margin-bottom: 28px; color: var(--green); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.14em; }
.tool-list-card h3 { margin: 0 0 20px; font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 500; letter-spacing: 0.055em; line-height: 1.55; }
.tool-list-card > p:not(.tool-number) { max-width: 28rem; margin-bottom: 34px; color: var(--muted); letter-spacing: 0.03em; }
.tool-list-card > .tool-meta { margin: -6px 0 20px; color: var(--green); font-weight: 700; }
.tool-link, .back-link { color: var(--green); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; }
.tool-link { display: inline-flex; gap: 12px; align-items: center; margin-top: auto; }
.tool-links { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: auto; }
.tool-links .tool-link { margin-top: 0; }
.tool-link span { font-size: 1.25em; transition: transform 160ms ease; }
.tool-link:hover span, .tool-link:focus-visible span { transform: translateX(4px); }
.back-link { display: inline-block; margin-bottom: 32px; font-size: 0.96rem; }
.back-link:hover, .back-link:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.tool-workspace { padding: clamp(60px, 8vw, 108px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(231, 223, 207, 0.28); }
.workspace-grid { display: grid; grid-template-columns: minmax(290px, 0.9fr) minmax(0, 1.1fr); gap: clamp(38px, 7vw, 100px); align-items: start; }
.tool-form { padding: clamp(26px, 4vw, 42px); background: var(--background); }
.form-field { margin-bottom: 28px; }
.form-field label, .option-fieldset legend { display: block; margin-bottom: 11px; color: var(--ink); font-weight: 700; letter-spacing: 0.035em; }
.form-field textarea { display: block; width: 100%; resize: vertical; border: 1px solid rgba(78, 127, 97, 0.4); border-radius: 0; background: #fffdf8; color: var(--ink); font: inherit; line-height: 1.7; padding: 13px 14px; }
.form-field textarea:focus, .form-field input:focus-visible { outline: 2px solid var(--light-green); outline-offset: 2px; }
.color-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.color-field input[type="color"] { display: block; width: 100%; height: 46px; padding: 3px; border: 1px solid rgba(78, 127, 97, 0.4); background: #fffdf8; cursor: pointer; }
.primary-button, .secondary-button { min-height: 48px; padding: 10px 19px; border: 0; border-radius: 0; font: inherit; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
.primary-button { background: var(--green); color: #fff; }
.primary-button:hover, .primary-button:focus-visible { background: #3f6b50; }
.primary-button:disabled { cursor: not-allowed; background: #9ca89e; }
.secondary-button { border: 1px solid var(--green); background: transparent; color: var(--green); }
.secondary-button:hover, .secondary-button:focus-visible { background: rgba(168, 197, 162, 0.24); }
.form-message { min-height: 1.75em; margin: 15px 0 0; color: #8b4c3d; font-size: 0.9rem; }
.form-warning { margin: -5px 0 22px; color: #8b4c3d; font-size: 0.9rem; line-height: 1.65; }
.tool-preview { display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: clamp(22px, 4vw, 48px); border: 1px solid rgba(78, 127, 97, 0.22); background: var(--background); text-align: center; }
.tool-preview canvas { width: min(100%, 420px); height: auto; image-rendering: pixelated; }
.preview-placeholder { max-width: 19rem; margin: 0; color: var(--muted); font-size: 0.96rem; }
.option-fieldset { display: grid; gap: 13px; padding: 0; border: 0; }
.check-label { display: flex !important; gap: 10px; align-items: center; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.check-label input { width: 18px; height: 18px; accent-color: var(--green); }
.range-field label { display: flex; justify-content: space-between; gap: 18px; }
.range-field output { color: var(--green); font-weight: 700; }
.range-field input[type="range"] { width: 100%; accent-color: var(--green); }
.watermark-preview { align-items: flex-start; overflow: auto; }
.watermark-preview canvas { width: 100%; max-width: none; height: auto; image-rendering: auto; }
.tool-notes { padding: clamp(52px, 7vw, 82px) 0; }
.tool-notes p { margin-bottom: 0.7em; color: var(--muted); font-size: 0.92rem; letter-spacing: 0.025em; }
.tool-notes .library-credit { margin-top: 24px; font-size: 0.84rem; }
.library-credit a { color: var(--green); }
@media (max-width: 720px) {
  .tools-intro, .tool-header { padding: 56px 0 72px; }
  .tool-category-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .tool-category-grid { grid-template-columns: 1fr; gap: 16px; }
  .tool-list-card { min-height: 0; }
  .workspace-grid { grid-template-columns: 1fr; gap: 26px; }
  .tool-preview { min-height: 310px; }
  .color-fields { gap: 14px; }
}
@media (max-width: 420px) {
  .tool-form { padding: 22px 18px; }
  .color-fields { grid-template-columns: 1fr; }
  .tool-preview { min-height: 260px; padding: 18px; }
}