/* Tool pages share the site's surface, form and accent tokens. */
.tools-page { min-width: 0; }
.tools-page .page-title { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.25; overflow-wrap: anywhere; }
.tools-page .page-subtitle { max-width: 78ch; font-size: .86rem; line-height: 1.7; }
.tools-page [hidden] { display: none !important; }
.tools-page :is(button, select, summary, a):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.tools-page :disabled { opacity: .5; cursor: default; }
.tools-page .form-field { min-width: 0; margin-bottom: .85rem; }
.tools-page .form-field > :is(span, label) { color: var(--ui-muted-strong); font-size: .76rem; font-weight: 600; letter-spacing: normal; overflow-wrap: anywhere; }
.tools-page .form-field :is(input,textarea), .tools-page select { min-width: 0; border-color: var(--surface-rule); background: var(--ui-bg); color: var(--ui-text); }
.tools-page .form-field :is(input,select), .tools-page .custom-select-trigger { min-height: 2.75rem; font-size: .85rem; }
.tools-page select { width: 100%; border: 1px solid var(--surface-rule); border-radius: .6rem; padding: .6rem .75rem; font: inherit; }
.tools-page textarea { font: .84rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; resize: vertical; }
.tools-page input[readonly] { background: var(--surface-fill); }
.tools-page .tool-field-error { margin-top: .3rem; font-weight: 500; overflow-wrap: anywhere; }
.tools-page .form-field :is(input,select,textarea)[aria-invalid=true],
.tools-page .custom-select-trigger[aria-invalid=true] { border-color: var(--ui-down, #dc2626); }
.tools-page .form-field :is(input,select,textarea)[aria-invalid=true]:focus,
.tools-page .custom-select-trigger[aria-invalid=true]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-down, #dc2626) 14%, transparent); }
.tools-page input[type=color] { width: 100%; height: 2.75rem; padding: .2rem; border: 1px solid var(--surface-rule); border-radius: .6rem; }
.tools-page input[type=file] { padding: .35rem; font-size: .75rem; }
.tools-page input[type=file]::file-selector-button { min-height: 2rem; border: 0; border-radius: .35rem; background: var(--surface-fill); color: var(--ui-text); padding: .35rem .65rem; margin-inline-end: .5rem; font: inherit; cursor: pointer; }
.tool-select-field .custom-select-trigger { font-weight: 500; border-radius: .6rem; }
.tool-select-field .custom-select-trigger[aria-disabled=true] { opacity: .5; cursor: default; }
.tool-select-field .custom-select-trigger > [data-tool-selected] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-select-field .custom-select-menu { max-height: min(18rem, 45svh); }
.tool-select-field .custom-select-option { font-weight: 500; }
.tool-select-field .custom-select-option:focus-visible { color: var(--ui-accent); background: var(--ui-accent-soft); outline-offset: -2px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tools-page .action-button { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .5rem .85rem; border: 1px solid var(--surface-rule); border-radius: .5rem; background: var(--ui-bg); color: var(--ui-text); font-size: .79rem; font-weight: 600; line-height: 1.4; cursor: pointer; text-align: center; }
.tools-page .action-button:hover:not(:disabled) { background: var(--surface-fill); }
.tools-page .action-button-primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-bg); }
.tools-page .action-button-primary:hover:not(:disabled) { background: var(--ui-accent); filter: brightness(.96); }
.tool-detail-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.tool-detail-nav .exchange-back-link { margin: 0; }
.tool-detail-category { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--ui-accent); font-size: .8rem; text-align: end; }
.tool-detail-category:hover { text-decoration: underline; }
.tools-page .tool-detail-header { margin-bottom: 1.2rem; }
.tool-detail-header .page-subtitle { margin-top: .55rem; }
.tool-privacy { margin: .55rem 0 0; color: var(--ui-muted); font-size: .74rem; line-height: 1.65; }
.tool-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tool-panels > * { min-width: 0; }
.tool-panels-form { align-items: start; }
.tool-panels-editor { align-items: stretch; }
.tool-workspace, .tool-result { border: 1px solid var(--surface-rule); border-radius: .75rem; padding: clamp(1rem, 2vw, 1.35rem); background: var(--ui-bg); min-width: 0; }
.tool-panels-editor .tool-workspace, .tool-result { display: flex; flex-direction: column; }
.tool-workspace > fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.tool-panels-editor .tool-workspace > fieldset { flex: 1; display: flex; flex-direction: column; }
.tool-workspace-heading, .tool-result-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; min-height: 2.5rem; }
.tool-workspace-heading h2, .tool-result h2, .tool-related-heading h2 { font-size: .9rem; font-weight: 650; }
.tool-result-heading { flex-wrap: wrap; }
.tool-result-heading .tool-actions { margin-inline-start: auto; }
.tool-result > .tool-actions { margin-top: .75rem; }
.tool-options { display: flex; flex-wrap: wrap; gap: 0 1rem; min-width: 0; }
.tool-options > .form-field { flex: 1 1 10rem; min-width: 0; }
.tool-options > .tool-options { flex: 1 1 100%; }
.tool-panels-editor .tool-input-field { flex: 1; display: flex; flex-direction: column; }
.tool-input-field > textarea { flex: 1; min-height: 15rem; }
.tool-settings { border-top: 1px solid var(--surface-rule); margin-bottom: .6rem; }
.tool-settings > summary { padding: .7rem 0; min-height: 2.5rem; cursor: pointer; color: var(--ui-muted-strong); font-size: .8rem; font-weight: 600; }
.tool-settings[open] > summary { margin-bottom: .3rem; }
.tool-primary-actions { margin-top: .3rem; }
.tool-primary-actions .action-button-primary { min-width: 7rem; }
.tool-input-actions { margin-bottom: .85rem; }
.tool-input-meta { margin-inline-start: auto; color: var(--ui-muted); font-size: .68rem; line-height: 1.6; overflow-wrap: anywhere; }
.tool-import-label { position: relative; }
.tool-import-label:focus-within { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.tool-checks { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 0 .75rem; margin-bottom: .4rem; }
.tool-check { display: inline-flex; gap: .45rem; align-items: center; min-height: 2.5rem; font-size: .78rem; cursor: pointer; }
.tool-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ui-accent); }
.tool-time-batch-table tr[data-error=true] { color: var(--ui-down, #dc2626); }
.tool-output-field { flex: 1; display: flex !important; flex-direction: column; margin-bottom: 0 !important; }
.tool-output-field textarea { flex: 1; width: 100%; min-height: 15rem; }
.tool-result-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem; min-height: 13rem; padding: 1.5rem 1rem; border: 1px dashed var(--surface-rule); border-radius: .6rem; color: var(--ui-muted); text-align: center; }
.tool-result-empty svg { width: 1.6rem; height: 1.6rem; color: var(--ui-muted); opacity: .65; }
.tool-result-empty p { max-width: 32ch; font-size: .8rem; line-height: 1.7; }
.tool-raw-result { border-top: 1px solid var(--surface-rule); margin-top: .85rem; }
.tool-raw-result summary { min-height: 2.5rem; padding: .65rem .1rem; color: var(--ui-muted-strong); font-size: .77rem; font-weight: 600; cursor: pointer; }
.tool-raw-result .tool-output-field { margin: .25rem 0 0 !important; }
.tool-raw-result textarea { min-height: 12rem; max-height: 25rem; }
.tool-raw-result[data-preview=false] { border: 0; margin-top: 0; }
.tool-preview { max-width: 100%; min-width: 0; overflow: auto; overflow-wrap: anywhere; }
.tool-preview :is(img,canvas) { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 24rem; object-fit: contain; margin-inline: auto; }
.tool-preview canvas { background: white; }
.tool-preview :is(h1,h2,h3) { font-size: 1.15em; font-weight: 650; margin: 1em 0 .5em; }
.tool-preview p, .tool-preview pre { margin: .75rem 0; }
.tool-contrast-sample { padding: 1rem; border: 1px solid var(--surface-rule); border-radius: .5rem; text-align: center; }
.tool-preview pre { white-space: pre-wrap; background: var(--surface-fill); padding: .85rem; border-radius: .5rem; font-size: .8rem; line-height: 1.6; max-height: 30rem; overflow: auto; }
.tool-preview :is(ul,ol) { padding-left: 1.5rem; list-style: revert; }
.tool-preview table { border-collapse: collapse; font-size: .78rem; width: 100%; }
.tool-preview :is(td,th) { padding: .55rem .65rem; border-bottom: 1px solid var(--surface-rule); text-align: start; }
.tool-preview th { color: var(--ui-muted-strong); background: var(--surface-fill); font-weight: 600; }
.tool-dns-scroll-hint { display: none; padding: 0 0 .5rem; color: var(--ui-muted); font-size: .72rem; text-align: end; }
.tool-dns-records-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin-bottom: 1rem; border: 1px solid var(--surface-rule); border-radius: .6rem; }
.tool-dns-records-scroll:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.tool-preview .tool-dns-records { min-width: 36rem; }
.tool-dns-records :is(th,td) { vertical-align: top; }
.tool-dns-records th, .tool-dns-records :is(th,td):nth-child(2), .tool-dns-records :is(th,td):nth-child(3) { white-space: nowrap; }
.tool-dns-records :is(th,td):first-child { min-width: 9rem; width: 24%; }
.tool-dns-records :is(th,td):last-child { min-width: 12rem; }
.tool-dns-records td { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.65; }
.tool-dns-records :is(th,td):nth-child(3) { text-align: end; font-variant-numeric: tabular-nums; }
.tool-dns-records td:last-child { white-space: pre-wrap; }
.tool-dns-records tbody tr:last-child td { border-bottom: 0; }
@media (min-width: 1001px) { [data-tool=dns] .tool-panels { grid-template-columns: minmax(18rem,.65fr) minmax(0,1.35fr); } }
[data-tool=http-status] #tool-preview, [data-tool=tables] #tool-preview, [data-morse-alphabet] { max-height: 32rem; }
.tool-query-summary { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); border: 1px solid var(--surface-rule); border-radius: .6rem; font-size: .8rem; line-height: 1.65; overflow: hidden; }
.tool-query-summary :is(dt,dd) { min-width: 0; margin: 0; padding: .55rem .7rem; border-bottom: 1px solid var(--surface-rule); overflow-wrap: anywhere; }
.tool-query-summary dt { color: var(--ui-muted); background: var(--surface-fill); }
.tool-query-summary dd { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.tool-query-summary :is(dt,dd):nth-last-child(-n+2) { border-bottom: 0; }
.tool-value-copy { margin-inline-start: .4rem; color: var(--ui-accent); font-size: .72rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tool-diff-preview span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-diff-preview .is-added { color: var(--ui-up, #15803d); background: color-mix(in srgb, var(--ui-up, #15803d) 10%, transparent); }
.tool-diff-preview .is-removed { color: var(--ui-down, #dc2626); background: color-mix(in srgb, var(--ui-down, #dc2626) 10%, transparent); }
.tool-match-preview mark { color: var(--ui-text); background: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-bg)); border-radius: .2rem; }
[data-tool=diff] .tool-panels { grid-template-columns: minmax(0,1fr); }
[data-tool=diff] .tool-workspace > fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1rem; }
[data-tool=diff] .tool-workspace fieldset > :is(.tool-options,.tool-actions) { grid-column: 1 / -1; }
.tool-crypto-options > .form-field { flex-basis: calc(50% - .5rem); }
.tool-crypto-options > [data-tool-select=gasMode], .tool-crypto-address-input { flex-basis: 100%; }
.tool-crypto-options > .tool-field-wide { flex-basis: 100%; }
[data-tool=qrcode] textarea[name=input] { min-height: 8rem; height: 8rem; }
[data-tool=cron] .tool-preview :is(th,td) { white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-tool=cron] .tool-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
[data-tool=cron] textarea[name=input] { min-height: 3.5rem; height: 3.5rem; font-size: 1.1rem; letter-spacing: .06em; }
[data-tool=cron] #tool-preview { max-height: 36rem; }
.tool-cron-examples { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .85rem 1rem; }
.tool-cron-examples .action-button { padding-inline: .6rem; }
.tool-cron-breakdown { padding-block: .85rem; margin-bottom: .85rem; border-block: 1px solid var(--surface-rule); }
.tool-cron-breakdown h3 { font-size: .78rem; font-weight: 600; margin-bottom: .65rem; }
.tool-cron-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); gap: .5rem; }
.tool-cron-fields > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tool-cron-fields :is(span,small) { color: var(--ui-muted); font-size: .67rem; overflow-wrap: anywhere; }
.tool-cron-fields code { font-size: 1rem; color: var(--ui-accent); overflow-wrap: anywhere; }
.tool-cron-start { flex-basis: 100% !important; }
.tool-cron-start-control { display: flex; align-items: center; gap: .5rem; }
.tool-cron-start-control input { flex: 1; width: 0; font-family: ui-monospace, monospace; }
.tool-cron-start-control button { flex-shrink: 0; }
#tool-cron-builder fieldset { border: 0; padding: 0; margin: .25rem 0 1rem; min-width: 0; }
#tool-cron-builder .tool-options > div[data-cron-builder-when] { flex: 1 1 10rem; min-width: 0; }
.tool-cron-reference { margin-top: 1.3rem; }
.tool-cron-reference h2 { font-size: .9rem; font-weight: 650; }
.tool-cron-reference-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; }
.tool-cron-reference .tool-preview td { white-space: normal; }
@media (max-width: 900px) {
    [data-tool=cron] .tool-panels, .tool-cron-reference-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .tool-cron-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tool-cron-start-control { flex-wrap: wrap; }
    .tool-cron-start-control input { flex-basis: 100%; width: 100%; }
}
.tool-crypto-note, .tool-json-note { margin: .65rem 0; color: var(--ui-muted); font-size: .74rem; line-height: 1.7; overflow-wrap: anywhere; }
.tool-help, .tool-cron-builder { margin-top: 1.15rem; border-block: 1px solid var(--surface-rule); }
.tool-help summary, .tool-cron-builder > summary { min-height: 2.75rem; padding-block: .8rem; color: var(--ui-muted-strong); font-size: .8rem; font-weight: 600; cursor: pointer; }
.tool-help p { margin: 0 0 1rem; max-width: 110ch; color: var(--ui-muted); font-size: .8rem; line-height: 1.8; }
.tool-related-section { margin-top: 1.3rem; }
.tool-related-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.tool-related-heading > a { color: var(--ui-accent); font-size: .75rem; text-align: end; }
.tool-related { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); gap: .6rem; }
.tool-related a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; min-height: 2.75rem; padding: .7rem .8rem; border: 1px solid var(--surface-rule); border-radius: .5rem; color: var(--ui-muted-strong); font-size: .78rem; line-height: 1.5; }
.tool-related a:hover { color: var(--ui-accent); background: var(--surface-fill); }
.tool-related a > span:first-child { overflow-wrap: anywhere; }
.tool-time-live { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.1rem; background: var(--surface-fill); border-radius: .6rem; margin-bottom: 1rem; }
.tool-time-value { font-family: ui-monospace,monospace; font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tool-time-unit { font-size: .78rem; color: var(--ui-accent); }
.tool-time-label { color: var(--ui-muted-strong); font-size: .78rem; }
.tool-time-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.tool-time-tabs [aria-selected=true] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-bg); }
.tool-time-help { margin-bottom: .85rem; color: var(--ui-muted); font-size: .75rem; line-height: 1.65; overflow-wrap: anywhere; }
.tool-time-help p { margin: 0; }
.tool-timezone-control > input { width: 100%; padding-inline-end: 2.9rem; }
.tools-page .tool-timezone-toggle { position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 2.6rem; min-height: 0; padding: 0; border: 0; background: transparent; }
.tool-timezone-toggle svg { width: 1rem; height: 1rem; transition: transform .15s; }
.tool-timezone-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
.tool-timezone-menu { max-height: min(17rem, 42svh); border-radius: .6rem; }
.tool-timezone-menu .custom-select-option { font-size: .8rem; font-weight: 500; overflow-wrap: anywhere; }
.tool-timezone-menu .tool-json-note { padding: .35rem .5rem; margin: 0; }
#tool-time-single { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.tool-time-section { display: flex; flex-direction: column; min-width: 0; padding-top: .85rem; border-top: 1px solid var(--surface-rule); }
.tool-time-section h2 { font-size: .9rem; font-weight: 650; margin-bottom: 1rem; }
.tool-time-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: .8rem; }
.tool-time-row > .form-field { max-width: none; }
#tool-timestamp-workspace .form-field :is(input,select), #tool-timestamp-workspace .custom-select-trigger { height: 2.85rem; padding-block: .6rem; }
.tool-time-input { grid-column: 1 / -1; }
.tool-time-section > .tool-actions { margin-bottom: .85rem; }
.tool-time-result { display: flex; align-items: end; gap: .5rem; }
.tool-time-result > .form-field { flex: 1; }
.tool-time-result > .action-button { flex-shrink: 0; min-height: 2.85rem; margin-bottom: .85rem; }
.tool-time-utc { margin: 0; color: var(--ui-muted); font: .73rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
.tool-time-utc:empty { display: none; }
.tool-time-batch-table { max-width: 100%; overflow: auto; }
.tool-time-batch-table table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tool-time-batch-table :is(th,td) { padding: .6rem; border-bottom: 1px solid var(--surface-rule); text-align: start; white-space: pre-wrap; }
[data-tool=json] .tool-panels { grid-template-columns: minmax(0,1fr); }
[data-tool=json] .tool-panels:fullscreen { display: block; overflow: auto; padding: 1rem; background: var(--ui-bg); }
[data-tool=json] .tool-panels:fullscreen .tool-result { margin-top: 1rem; }
[data-tool=json] .tool-panels:fullscreen :is(.tool-json-tree,.tool-json-table,.tool-json-code-editor textarea) { height: 56vh; max-height: none; }
.tool-json-heading, .tool-json-toolbar, .tool-json-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.tool-json-icon { width: 1.1rem; height: 1.1rem; flex: none; }
.tool-json-toolbar { padding: .6rem; margin-bottom: .5rem; border: 1px solid var(--surface-rule); border-radius: .6rem; background: var(--surface-fill); }
.tool-json-toolbar .tool-actions, .tool-json-bar .tool-actions { gap: .25rem; }
.tool-json-tabs { padding: .14rem; background: var(--ui-bg); border: 1px solid var(--surface-rule); border-radius: .5rem; }
.tool-json-tabs .action-button { border: 0; color: var(--ui-muted-strong); background: transparent; padding-inline: .7rem; }
.tools-page .tool-json-tabs .is-active, .tool-json-toolbar button[aria-expanded=true], .tool-json-heading button[aria-pressed=true] { background: var(--ui-accent-soft); color: var(--ui-accent); }
.tool-json-toolbar .tool-select-field { width: 7rem; margin: 0; }
.tool-json-toolbar .tool-select-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tool-json-toolbar .custom-select-trigger { min-height: 2.5rem; }
.tool-json-toolbar button:has(svg), .tool-json-heading button:has(svg), .tool-json-bar button:has(svg) { min-width: 2.5rem; padding-inline: .4rem; }
.tool-json-bar { margin-bottom: .65rem; font-size: .8rem; color: var(--ui-muted-strong); }
.tool-json-bar .search-field, .tool-json-bar > .form-field { width: min(100%, 24rem); margin: 0; }
.tool-json-export { border-top: 1px solid var(--surface-rule); padding-top: .85rem; margin-top: .65rem; }
.tool-json-export h3 { font-size: .85rem; margin-bottom: .55rem; font-weight: 650; }
.tool-json-export .form-field { display: flex; align-items: center; gap: .5rem; margin: 0; flex-wrap: wrap; }
.tool-json-export .form-field input { width: 8rem; min-height: 2.5rem; }
.tool-json-export .tool-actions { align-items: center; }
.tool-json-export .tool-json-note { margin-bottom: 0; }
.tools-page .tool-json-current-match { background: #ffdc81; color: #332500; outline: 2px solid #946200; outline-offset: -1px; }
.dark .tool-json-current-match { background: #70551b; color: #fff3ca; outline-color: #efc76a; }
.tool-json-text-panel { flex: 1; display: flex; flex-direction: column; }
.tool-json-text-panel > .form-field { flex: 1; }
.tool-json-validation { margin: 0 0 .65rem; color: var(--ui-muted); font-size: .75rem; line-height: 1.6; }
.tool-json-validation[data-error=true] { color: var(--ui-down,#dc2626); }
.tool-json-code-editor { position: relative; display: block; min-width: 0; font-weight: 400 !important; letter-spacing: normal; }
.tool-json-code-editor pre { display: none; }
.tool-json-code-editor.is-highlighted { background: var(--ui-bg); border-radius: .6rem; }
.tools-page .tool-json-code-editor :is(textarea,pre) { font: .84rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size: 2; letter-spacing: normal; padding: .7rem .82rem; }
.tool-json-code-editor textarea { min-height: 20rem; height: clamp(20rem,42vh,34rem); display: block; }
.tool-json-code-editor.is-highlighted pre { display: block; position: absolute; inset: 0; margin: 0; border: 1px solid transparent; overflow: hidden; white-space: pre; pointer-events: none; color: var(--ui-text); }
.tools-page .tool-json-code-editor.is-highlighted textarea { position: relative; background: transparent; color: transparent; caret-color: var(--ui-text); -webkit-text-fill-color: transparent; }
.tool-json-code-editor textarea::selection { background: color-mix(in srgb,var(--ui-accent) 25%,transparent); }
.tool-json-token-string { color: #15803d; }
.tool-json-token-number { color: #b45309; }
.tool-json-token-literal { color: #7c3aed; }
.dark .tool-json-token-string { color: #86efac; }
.dark .tool-json-token-number { color: #fcd34d; }
.dark .tool-json-token-literal { color: #c4b5fd; }
.tool-json-tree, .tool-json-table { min-height: 20rem; max-height: 32rem; overflow: auto; padding: .75rem; border: 1px solid var(--surface-rule); border-radius: .6rem; font-size: .82rem; }
.tool-json-tree details { margin-left: .6rem; padding-left: .5rem; border-left: 1px solid var(--surface-rule); }
.tool-json-tree summary { cursor: pointer; padding: .3rem; overflow-wrap: anywhere; }
.tool-json-tree .tool-json-leaf { display: flex; gap: .5rem; align-items: center; margin: .3rem 0 .3rem .6rem; min-width: 0; }
.tool-json-leaf > span:first-child { overflow-wrap: anywhere; min-width: 3rem; }
.tool-json-leaf input, .tool-json-table input { min-height: 2.5rem; border: 1px solid var(--surface-rule); border-radius: .35rem; padding: .4rem; font: .8rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; color: var(--ui-text); background: var(--ui-bg); min-width: 0; }
.tool-json-leaf input { flex: 1; width: 13rem; max-width: 100%; }
.tool-json-value { position: relative; display: block; min-width: 0; }
.tool-json-leaf > .tool-json-value { flex: 1; }
.tool-json-leaf .tool-json-value input { width: 100%; }
.tools-page .tool-json-code-editor pre.tool-json-find-overlay:not([hidden]) { display: block; position: absolute; inset: 0; margin: 0; border: 1px solid transparent; overflow: hidden; white-space: pre; pointer-events: none; color: transparent; }
.tool-json-value-overlay { position: absolute; inset: 0; margin: 0; border: 1px solid transparent; padding: .4rem; font: .8rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; align-content: center; overflow: hidden; white-space: pre; pointer-events: none; border-radius: .35rem; background: var(--ui-bg); color: var(--ui-text); }
.tool-json-value:focus-within .tool-json-value-overlay { visibility: hidden; }
.tool-json-table table { border-collapse: collapse; }
.tool-json-table :is(th,td) { border: 1px solid var(--surface-rule); padding: .4rem; text-align: start; }
.tool-json-table input { width: 12rem; max-width: none; }
.tool-json-extra { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--surface-rule); }
.tool-json-extra > summary { min-height: 2.5rem; color: var(--ui-muted-strong); font-size: .78rem; font-weight: 600; cursor: pointer; }
.tool-json-extra[open] > summary { margin-bottom: .5rem; }
@media (max-width: 1000px) { .tool-panels { grid-template-columns: minmax(0,1fr); } #tool-time-single { grid-template-columns: minmax(0,1fr); gap: 1rem; } }
@media (max-width: 650px) { [data-tool=diff] .tool-workspace > fieldset { grid-template-columns: minmax(0,1fr); } .tool-related { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 540px) {
 .tool-dns-scroll-hint { display: block; }
 .tool-detail-nav { margin-bottom: 1rem; }
 .tool-detail .page-subtitle { font-size: .82rem; }
 .tool-options > .form-field { flex-basis: 100%; }
 .tool-crypto-options > .form-field,
 [data-tool=qrcode] .tool-options[data-when="action=generate"] > .form-field,
 [data-tool=image] .tool-options[data-when="action=convert"] > .form-field { flex-basis: calc(50% - .5rem); }
 .tool-crypto-options > :is([data-tool-select=gasMode],[data-tool-select=network],.tool-crypto-address-input,.tool-field-wide) { flex-basis: 100%; }
 .tool-json-toolbar { gap: .35rem; }
 .tool-json-toolbar > .tool-actions:not(.tool-json-tabs,[hidden]) { display: contents; }
 .tool-json-export .form-field { flex-basis: 100%; }
 .tool-json-code-editor textarea { min-height: 14rem; height: 14rem; }
 .tool-json-tree, .tool-json-table { min-height: 14rem; }
 .tool-input-field > textarea, .tool-output-field textarea { min-height: 12rem; }
 .tool-primary-actions .action-button-primary { flex: 1; }
 .tool-input-meta { flex-basis: 100%; margin-inline-start: 0; }
 .tool-time-live { padding: .85rem; gap: .75rem; }
 .tool-time-live > .tool-actions { width: 100%; }
 .tool-time-live > .tool-actions > .action-button { flex: 1; padding-inline: .6rem; }
 .tool-time-row { grid-template-columns: minmax(0,1fr); }
 .tool-time-input { grid-column: auto; }
 .tool-result-empty { min-height: 10rem; }
}
/* Directory navigation and cards. */
.tools-search { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; }
.tools-categories { display: flex; flex-wrap: wrap; column-gap: 1.5rem; border-bottom: 1px solid var(--surface-rule); }
.tool-category-link { position: relative; display: inline-flex; align-items: center; color: var(--ui-muted-strong); line-height: 1.5; }
.tool-category-link:hover, .tool-category-link.is-active { color: var(--ui-accent); }
.tool-category-link.is-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--ui-accent); }
.tools-grid { display: grid; }
.tool-link { border: 1px solid var(--surface-rule); background: var(--ui-bg); overflow-wrap: anywhere; }
.tool-link:hover { background: var(--surface-fill); border-color: var(--ui-accent); }
/* Directory layout; uses the same form, surface and accent tokens as tool pages. */
.tools-directory .tools-directory-header { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 1.35rem; }
.tools-directory-intro { min-width: 0; }
.tools-directory-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem 1rem; }
.tools-directory-title .page-title { margin: 0; }
.tools-directory .page-subtitle { margin-top: .5rem; font-size: .86rem; }
.tools-result-count { margin: 0; color: var(--ui-muted); font-size: .76rem; line-height: 1.5; }
.tools-result-count strong { font-weight: 650; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.tools-directory .tools-search { flex: 0 1 29rem; width: min(100%, 29rem); margin: 0; }
.tools-directory .tools-search .search-field { width: 100%; }
.tools-directory .tools-categories { column-gap: 1.35rem; row-gap: .1rem; margin-bottom: 1.25rem; }
.tools-directory .tool-category-link { gap: .4rem; padding: .8rem .05rem; min-height: 2.85rem; font-size: .83rem; }
.tool-category-count { padding: .08rem .35rem; border-radius: .3rem; background: var(--surface-fill); color: var(--ui-muted); font-size: .66rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.tool-category-link.is-active .tool-category-count { background: var(--ui-accent-soft); color: var(--ui-accent); }
.tools-directory .tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.tools-directory .tool-link { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: 1.1rem; border-radius: .75rem; transition: border-color .16s ease, background-color .16s ease; }
.tool-card-heading { display: grid; grid-template-columns: 2rem minmax(0, 1fr) .9rem; align-items: center; gap: .65rem; }
.tool-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--ui-accent); background: var(--ui-accent-soft); }
.tool-card-icon svg { width: 1.1rem; height: 1.1rem; }
.tools-directory .tool-link h2 { margin: 0; font-size: .94rem; font-weight: 650; line-height: 1.4; }
.tools-directory .tool-open { position: static; width: .9rem; height: .9rem; color: var(--ui-muted); }
.tools-directory .tool-link:hover .tool-open { color: var(--ui-accent); }
.tools-directory .tool-link > p { flex: 1; margin: 0; font-size: .79rem; line-height: 1.65; color: var(--ui-muted); }
.tools-directory .tool-link > .tool-category { margin-top: .1rem; font-size: .68rem; line-height: 1.4; color: var(--ui-muted); }
.tools-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; border: 1px dashed var(--surface-rule); border-radius: .75rem; color: var(--ui-muted); font-size: .86rem; text-align: center; }
@media (max-width: 1199px) { .tools-directory .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tools-directory .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-directory .tools-search { flex-basis: 23rem; } }
@media (max-width: 700px) { .tools-directory .tools-directory-header { align-items: stretch; flex-direction: column; gap: 1rem; } .tools-directory .tools-search { flex-basis: auto; width: 100%; } .tools-directory .tools-categories { column-gap: 1.1rem; } }
@media (max-width: 540px) { .tools-directory .tools-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; } .tools-directory .tool-link { gap: .65rem; padding: 1rem; } .tools-directory .tool-category-link { min-height: 2.6rem; padding-block: .65rem; font-size: .8rem; } .tools-directory .tools-categories { column-gap: 1rem; margin-bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .tools-directory .tool-link { transition: none; } }

.tool-file-selection { display: grid; gap: .5rem; max-height: 20rem; overflow: auto; margin-bottom: .85rem; }
.tool-file-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .65rem; border: 1px solid var(--surface-rule); border-radius: .5rem; }
.tool-file-row > span { flex: 1 1 12rem; min-width: 0; font-size: .78rem; overflow-wrap: anywhere; }
.tool-file-row .tool-actions { margin-inline-start: auto; }
.tool-file-table { max-height: 24rem; overflow: auto; margin-top: .85rem; }
.tool-file-table .action-button { white-space: nowrap; }

.tool-preview .tool-image-ascii { white-space: pre; font: .6rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; max-height: 30rem; overflow: auto; }
.tool-image-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; max-width: 24rem; margin-inline: auto; }
.tool-image-grid figure { margin: 0; min-width: 0; }
.tool-image-grid figcaption { text-align: center; color: var(--ui-muted); font-size: .68rem; padding-block: .2rem; }

.tool-calculator-keys { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .4rem; margin-bottom: .85rem; }
.tool-calculator-keys .action-button { min-width: 0; padding-inline: .3rem; }
.tool-calculator-keys [data-calculator-delete] { grid-column: 1 / -1; }
[data-tool=calculator] :is(textarea[name=input],#tool-output) { min-height: 5rem; height: 5rem; }
[data-tool=calculator] #tool-output { flex: none; }
.tool-result-short .tool-result-empty { flex: none; min-height: 6rem; padding-block: .85rem; }
.tool-result-short .tool-output-field { flex: none; }
.tool-result-short .tool-output-field textarea { flex: none; min-height: 4rem; font-size: 1.05rem; }
[data-tool=json-diff] .tool-panels { grid-template-columns: minmax(0,1fr); }
[data-tool=json-diff] .tool-workspace > fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1rem; }
[data-tool=json-diff] .tool-workspace fieldset > :is(.tool-options,.tool-actions,.tool-crypto-note) { grid-column: 1 / -1; }
@media(max-width:640px) { [data-tool=json-diff] .tool-workspace > fieldset { grid-template-columns: minmax(0,1fr); } }

.tool-file-drop { display: grid; gap: .25rem; min-width: 0; margin-top: .25rem; padding: .55rem .65rem; border: 1px dashed var(--surface-rule); border-radius: .6rem; }
.tools-page .tool-file-drop input[type=file] { width: 100%; max-width: 100%; padding: .1rem; min-height: 2.15rem; border: 0; background: transparent; }
.tool-file-drop:focus-within, .tool-file-drop.is-dragging { border-color: var(--ui-accent); }
.tool-file-drop.is-dragging { background: var(--ui-accent-soft); }
.tool-file-drop [data-file-hint], .tool-file-current { color: var(--ui-muted-strong); font-size: .75rem; }
.tool-file-current { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.tool-file-current bdi { overflow-wrap: anywhere; }