.utility-page { min-height: calc(100svh - 176px); padding: 72px 24px 120px; }
[hidden] { display:none !important; }
.form-field { min-width:0; }
.form-field select { max-width:100%; }
.utility-field:focus-visible, .tool-help summary:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.tool-help { font-size:13px; line-height:1.8; color:#5d5e61; overflow-wrap:anywhere; }
.tool-help summary { cursor:pointer; }
.related-tools { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:12px; }
.related-tools a { text-decoration:underline; text-underline-offset:4px; }
#visual-output img { display:block; max-width:100%; max-height:500px; object-fit:contain; }
.file-list { padding:0; list-style:none; margin:0; }
.file-list li { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0; }
.file-list li span { flex:1 1 180px; overflow-wrap:anywhere; font-size:13px; }
.file-list button { padding:8px 12px; }
.diff-preview { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; }
.diff-preview ins { background:#ededed; text-decoration:underline; }
.diff-preview del { background:#f5f5f5; text-decoration:line-through; }
#result-downloads a { overflow-wrap:anywhere; max-width:100%; }
.utility-container { width: min(800px,100%); margin:0 auto; }
.utility-back { font-size:12px; color:#89898d; display:inline-block; margin-bottom:56px; }
.utility-back:hover { color:var(--ink); }
.utility-back span { font-size:18px; vertical-align:-1px; margin-right:8px; }
.utility-title { font-size:clamp(36px,5vw,58px); font-weight:350; letter-spacing:-.065em; line-height:1.14; margin:0 0 44px; }
.utility-workspace { display:flex; flex-direction:column; gap:19px; }
.utility-panel { background:#fff; border:1px solid #e8e8e8; border-radius:13px; overflow:hidden; }
.utility-textarea { display:block; width:100%; min-height:230px; border:0; resize:vertical; background:transparent; color:var(--ink); font:400 15px/1.7 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; padding:23px; outline:0; }
.utility-textarea::placeholder { color:#a7a7ab; }
.utility-panel:focus-within { border-color:#b9bcc0; }
.utility-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.utility-label { display:block; font-size:12px; color:#76777a; margin-bottom:9px; }
.utility-inline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.utility-field { width:100%; min-width:0; border:1px solid #e7e7e7; background:#fff; border-radius:10px; padding:13px 15px; font-size:15px; color:var(--ink); }
.utility-field:disabled { opacity:.5; }
.utility-field[type='number'] { font-variant-numeric:tabular-nums; }
.utility-button { border:1px solid #e5e5e5; border-radius:10px; padding:12px 18px; background:white; color:var(--ink); font-size:13px; font-weight:500; transition:background .15s ease,border-color .15s ease; }
.utility-button:hover:not(:disabled) { background:#f5f5f5; border-color:#d3d3d3; }
.utility-button:disabled { color:#aaa; cursor:default; }
.utility-button-primary { background:#17181b; color:white; border-color:#17181b; }
.utility-button-primary:hover:not(:disabled) { background:#353639; color:white; border-color:#353639; }
.utility-button[aria-pressed='true'] { background:#202124; color:#fff; border-color:#202124; }
.utility-actions { display:flex; gap:9px; flex-wrap:wrap; }
.utility-privacy { margin:9px 0 0; font-size:11px; color:#a0a0a4; }
.utility-message { min-height:1.5em; font-size:12px; color:#696a6c; margin:0; }
.utility-message[data-error='true'] { color:#ad3434; }
.utility-stats { display:flex; gap:27px; align-items:center; color:#85868a; font-size:12px; flex-wrap:wrap; }
.utility-stats strong { color:#202124; font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; }
.utility-check { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#5d5e61; cursor:pointer; }
.utility-check input { accent-color:#222; width:16px; height:16px; }
.utility-grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.utility-separator { height:1px; background:#f1f1f1; margin:6px 0; }
@media(max-width:620px) { .utility-page { min-height:calc(100svh - 136px); padding:45px 20px 74px; } .utility-back { margin-bottom:41px; } .utility-title { margin-bottom:28px; } .utility-workspace { gap:15px; } .utility-textarea { min-height:210px; padding:16px; font-size:14px; } .utility-button { padding:11px 14px; } .utility-grid-two { gap:10px; } }
@media (prefers-reduced-motion:reduce) { .utility-button { transition:none; } }