/* Scoped to individual free tools; no change to marketing/console/API styles. */
.free-tool-page { background: #f6f8fc; }
.tool-page-main { padding-block: 36px 70px; }
.tool-page-header { margin: 28px 0 27px; max-width: 800px; }
.tool-page-header h1 { margin-top: 16px; color: #15213d; font-size: 34px; line-height: 1.3; font-weight: 750; letter-spacing: -.035em; }
.tool-page-header > p { margin-top: 12px; color: #7b879d; font-size: 15px; line-height: 1.9; }
.tool-workspace { min-width: 0; }
.tool-privacy { margin-bottom: 17px; color: #77859b; font-size: 12px; line-height: 1.8; }
.tool-warning { margin-bottom: 18px; padding: 12px 17px; border: 1px solid #eee0ba; border-radius: 9px; background: #fffaf0; color: #8b682c; font-size: 12px; line-height: 1.85; }
.tool-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.tool-generator .tool-grid { grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); }
.tool-box { min-width: 0; border: 1px solid #e0e6f0; border-radius: 15px; padding: 25px; background: #fff; box-shadow: 0 8px 26px #1c2a4e04; }
.tool-box-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid #edf0f6; margin-bottom: 20px; }
.tool-box h2 { font-size: 16px; color: #17223b; font-weight: 700; }
.tool-input-actions,.tool-output-actions { display: flex; gap: 17px; align-items: center; flex-wrap: wrap; }
.tool-text-button { color: #4563c0; font-size: 12px; font-weight: 600; cursor: pointer; background: none; border: 0; min-height: 32px; padding-block: 4px; }
.tool-text-button:hover { color: #214eea; }
.tool-text-button[data-copy-status="error"] { color: #ae3d49; }
.tool-workspace button:disabled { opacity: .4; cursor: not-allowed; }
.tool-help { color: #8490a3; font-size: 12px; line-height: 1.85; margin: 0 0 18px; }
.tool-fields { display: grid; gap: 18px; }
.tool-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; font-size: 12px; color: #51617e; font-weight: 600; }
.tool-field input,.tool-field select,.tool-field textarea,.tool-output { width: 100%; min-width: 0; border: 1px solid #dbe2ee; border-radius: 9px; padding: 12px 13px; background: #fbfcff; color: #21314e; font-size: 13px; font-weight: 400; line-height: 1.8; }
.tool-field input,.tool-field select { height: 45px; }
.tool-field textarea,.tool-output { resize: vertical; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; tab-size: 2; }
.tool-field textarea { min-height: 90px; max-height: 650px; }
.tool-field textarea#tool-input { min-height: 275px; }
.tool-workspace[data-tool^="url-"] #tool-input { min-height: 120px; }
.tool-workspace[data-tool^="url-"] .tool-output,.tool-workspace[data-tool^="url-"] .tool-result-content { min-height: 180px; }
.tool-workspace[data-tool="hash"] .tool-output,.tool-workspace[data-tool="hash"] .tool-result-content { min-height: 150px; }
.tool-workspace[data-tool="qr-code"] #tool-input { min-height: 145px; }
.tool-field small { color: #91a0b6; font-weight: 400; font-size: 11px; }
.tool-short { max-width: 210px; }
.tool-run-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
.tool-run-actions .primary-btn,.tool-run-actions .secondary-btn { padding: 12px 20px; border-radius: 8px; font-size: 13px; }
.tool-shortcut { display: block; margin-top: 13px; color: #97a3b7; font-size: 11px; }
.tool-character-groups { display: flex; gap: 13px 22px; flex-wrap: wrap; border: 0; padding: 0; }
.tool-character-groups legend { color: #51617e; font-size: 12px; margin-bottom: 13px; font-weight: 600; }
.tool-character-groups label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #65738c; }
.tool-character-groups input { accent-color: #345be2; width: 15px; height: 15px; }
.tool-status { padding: 11px 14px; border-radius: 8px; margin-top: 18px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.tool-status[data-kind="error"] { background: #fff3f3; color: #ae3d49; border: 1px solid #f2d8dc; }
.tool-status[data-kind="info"] { background: #f0f4fd; color: #526eab; border: 1px solid #dce5f6; }
.tool-result-content { min-height: 320px; }
.tool-output { display: block; min-height: 320px; max-height: 650px; background: #f8faff; }
.tool-output[hidden],.tool-workspace [hidden] { display: none !important; }
.tool-password { min-height: 0; height: 56px; font-size: 17px; font-family: ui-monospace,Consolas,monospace; margin-bottom: 17px; }
.tool-generator[data-tool="password"] .tool-result-content { min-height: 115px; }
.tool-empty { display: grid; place-items: center; min-height: 310px; padding: 25px; background: #fbfcff; border: 1px dashed #e1e7f1; border-radius: 9px; color: #9aa6b8; font-size: 13px; text-align: center; }
.tool-result-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; color: #8c9aaf; font-size: 11px; }
.tool-workspace[data-state="stale"] .tool-result-content { opacity: .5; }
.tool-workspace pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f8faff; border: 1px solid #e3e9f4; padding: 17px; border-radius: 9px; font: 12px/1.85 ui-monospace,Consolas,monospace; max-height: 360px; overflow: auto; }
.tool-clipboard { position: fixed; left: -9999px; top: 0; }
.tool-structured-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 18px 0 12px; }
.tool-structured-header h3 { color: #51617e; font-size: 12px; font-weight: 700; }
.tool-success { padding: 18px; background: #edf8f3; border: 1px solid #d3ebdf; border-radius: 9px; color: #287556; font-size: 14px; font-weight: 650; }
.tool-table-wrap { max-width: 100%; max-height: 440px; overflow: auto; border: 1px solid #e3e9f4; border-radius: 9px; margin-top: 15px; }
.tool-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.tool-table-wrap th { color: #6e7f9b; font-weight: 600; background: #f7f9fd; }
.tool-table-wrap td,.tool-table-wrap th { padding: 12px 13px; border-bottom: 1px solid #eaf0f8; }
.tool-table-wrap tr:last-child td { border-bottom: 0; }
.tool-table-value { font-family: ui-monospace,Consolas,monospace; overflow-wrap: anywhere; min-width: 120px; }
.tool-uuid-list { display: grid; gap: 10px; max-height: 420px; overflow: auto; }
.tool-uuid-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid #e4eaf5; padding: 12px; border-radius: 8px; }
.tool-uuid-row code { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.tool-qr-image { display: block; width: 260px; max-width: 100%; height: auto; margin: 20px auto; border: 1px solid #e3e9f4; border-radius: 12px; padding: 15px; background: #fff; }
.tool-workspace input:focus-visible,.tool-workspace textarea:focus-visible,.tool-workspace select:focus-visible { outline: 3px solid #dce6ff; border-color: #6a8ef0; }
.tool-workspace button:focus-visible { outline: 3px solid #b5c9ff; outline-offset: 5px; }
@media (max-width: 850px) {
  .tool-grid,.tool-generator .tool-grid { grid-template-columns: 1fr; }
  .tool-page-header h1 { font-size: 30px; }
  .tool-box { padding: 22px; }
  .tool-result-content,textarea.tool-output { min-height: 270px; }
  .tool-result-panel { scroll-margin-top: 135px; }
}
@media (max-width: 480px) {
  .free-tool-page .glass-nav .site-brand { width: 104px; }
  .free-tool-page .glass-nav .site-brand img { height: auto; }
  .free-tool-page .glass-nav .primary-btn { padding-inline: 10px !important; font-size: 11px; }
  .tool-box { padding: 18px; }
  .tool-page-main { padding-block: 25px 45px; }
  .tool-box-header { gap: 12px; }
  .tool-input-actions,.tool-output-actions { gap: 14px; }
  .tool-field textarea#tool-input { min-height: 235px; }
  .tool-page-header > p { font-size: 13px; }
  .tool-table-wrap td,.tool-table-wrap th { padding: 10px; }
  .tool-uuid-row code { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tool-workspace * { transition: none !important; } }