.browser-tool-privacy { max-width: 70ch; margin-top: 2rem; padding: 1.2rem 1.4rem; border-left: 3px solid var(--blue); background: var(--surface); color: var(--muted); }
.browser-tool-intro { max-width: 76ch; margin-bottom: 2rem; }
.browser-tool-intro .label { margin-bottom: .8rem; }
.browser-tool-intro p:last-child { color: var(--muted); }
.browser-tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.browser-tool-editor, .browser-tool-result { min-width: 0; }
.browser-tool-editor fieldset { min-inline-size: 0; margin: 0 0 1.2rem; padding: 1.2rem; border: 1px solid var(--line); background: var(--surface); }
.browser-tool-editor legend { max-width: 100%; padding: 0 .4rem; font-size: 1.2rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.browser-tool-editor label, .browser-tool-result label { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: .4rem; margin-bottom: 1rem; font-size: .83rem; font-weight: 700; overflow-wrap: anywhere; }
.browser-tool-editor label:has(select) { overflow-x: clip; }
.browser-tool-editor label:last-child { margin-bottom: 0; }
.browser-tool input, .browser-tool select, .browser-tool textarea { min-width: 0; width: 100%; max-width: 100%; min-height: 46px; padding: .65rem .75rem; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; font-weight: 400; }
.browser-tool textarea { resize: vertical; }
.browser-tool-result { position: sticky; top: 6rem; padding: clamp(1.2rem, 2.6vw, 2.2rem); border: 1px solid var(--line); background: var(--surface); }
.browser-tool-result h3 { margin: .5rem 0 1rem; }
.browser-tool-result > p { color: var(--muted); }
.browser-tool-result textarea { font-family: Consolas, 'Courier New', monospace; font-size: .85rem; line-height: 1.55; }
.browser-tool-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0; }
.browser-tool-actions button, .browser-tool-actions label, .browser-tool-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .6rem .8rem; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: .78rem; font-weight: 700; text-align: center; cursor: pointer; }
.browser-tool-actions .button { background: var(--blue); color: #fff; }
.browser-tool-actions label { flex-wrap: wrap; gap: .4rem; }
.browser-tool-actions input[type=file] { max-width: 13rem; padding: 0; min-height: 0; border: 0; font-size: .7rem; }
.browser-tool-result [role=status] { margin-top: 1rem; font-size: .8rem; }
.browser-tool-print { display: none; }
.browser-tool-noscript { padding: 1.5rem; border: 1px solid var(--line); }
.browser-tool-warning { padding: 1rem; border-left: 3px solid var(--blue); background: #fff; }
.browser-tool-table { width: 100%; }
.browser-tool-cards { display: grid; gap: .9rem; }
.browser-tool-card { min-width: 0; padding: 1rem; border: 1px solid var(--line); background: #fff; overflow-wrap: anywhere; }
.browser-tool-card label { display: grid; gap: .35rem; margin-top: .7rem; font-size: .82rem; font-weight: 700; }
.browser-tool-card select, .browser-tool-card input { width: 100%; }
.browser-tool-card small { display: block; margin-top: .5rem; color: var(--muted); }
.browser-tool-card .conflict { color: #8d3028; font-weight: 700; }
.browser-tool-import-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.browser-tool-import-grid > div { min-width: 0; padding: 1.2rem; border: 1px solid var(--line); background: var(--surface); }
.browser-tool-import-grid label { display: grid; gap: .4rem; margin-bottom: .8rem; font-size: .83rem; font-weight: 700; }
.browser-tool-import-grid pre { max-height: 10rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .72rem; }
@media (max-width: 900px) {
  .browser-tool-grid { grid-template-columns: 1fr; }
  .browser-tool-result { position: static; }
}
@media (max-width: 600px) {
  .browser-tool-import-grid { grid-template-columns: 1fr; }
  .browser-tool-actions { display: grid; }
  .browser-tool-actions > * { width: 100%; }
}
@media print {
  .browser-tool-editor, .browser-tool-actions, .browser-tool-result textarea, .browser-tool-result > p:not(.label), .browser-tool-result label, header, footer, .skip-link, .page-hero, .browser-tool-intro, .browser-tool-noscript { display: none !important; }
  .browser-tool-grid { display: block; }
  .browser-tool-result { position: static; border: 0; padding: 0; }
  .browser-tool-print { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: 11pt/1.5 sans-serif; }
}