.page-heading{margin-bottom:20px}
.page-heading h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 8px;word-break:keep-all;text-wrap:balance}
.page-heading>p{font-size:.9rem}
.options-panel{margin-bottom:20px;padding:18px 20px}
.options-panel h2{font-size:1.05rem;margin:0 0 14px}
.options-panel input[type=text]{width:100%;min-height:44px;font:.95rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;unicode-bidi:isolate}
.flag-set{border:0;margin:14px 0 0;padding:0;min-width:0}
.flag-set legend{font-weight:650;font-size:.9rem;padding:0;margin-bottom:8px}
.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;align-items:start}
.check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--bg);cursor:pointer;min-height:44px;min-width:0}
.check:has(input:checked){border-color:#a2b9ed;background:#f0f5ff}
.check input{margin:2px 0 0;flex-shrink:0}
.check strong{display:block;font:650 .95rem ui-monospace,SFMono-Regular,Consolas,monospace}
.check small{display:block;margin-top:4px;font-size:.75rem;line-height:1.5;overflow-wrap:anywhere}
.check span{min-width:0;overflow-wrap:anywhere}
.check:has(input:focus-visible){outline:3px solid #e9aa23;outline-offset:2px}
.options-panel input[type=text]:focus-visible,.field input:focus-visible,.action-row .button:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.guide summary:focus-visible{outline:3px solid #e9aa23;outline-offset:2px;border-radius:4px}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.input-column{min-width:0;display:flex;flex-direction:column;gap:20px}
.editor-panel{padding:0;overflow:hidden}
.panel-top{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel-top h2{font-size:1.05rem;margin:0}
.counter{font-size:.78rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.editor-panel textarea{display:block;width:100%;min-height:220px;resize:vertical;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;padding:16px 20px;color:var(--text);font:.92rem/1.7 ui-monospace,SFMono-Regular,Consolas,"Malgun Gothic",monospace;tab-size:2;overflow-wrap:anywhere}
.editor-panel textarea::placeholder{color:#718198}
.editor-panel textarea:focus-visible{outline:3px solid #e9aa23;outline-offset:-3px}
.replace-panel textarea{min-height:120px;background:#f9fbff}
.padded{padding:0 20px 14px}
.field.padded input[type=text]{width:100%;min-height:44px;font:.92rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;unicode-bidi:isolate}
.editor-footer{padding:10px 20px 0;display:flex;flex-direction:column;gap:2px}
.privacy-note{color:var(--muted);font-size:.76rem;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere}
.editor-footer .privacy-note{margin:0}
.action-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 16px}
.action-row .button{font-size:.85rem;min-height:44px}
.status{margin:0;min-height:1.5em;overflow-wrap:anywhere}
.status.error{color:var(--danger)}
.error-box{margin:0 20px 14px;border:1px solid #efd3d7;background:#fff7f8;border-radius:8px;padding:14px 16px;font-size:.88rem}
.error-box p{margin:0 0 6px;overflow-wrap:anywhere}
.error-box .error-title{color:var(--danger)}
#error-detail{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;unicode-bidi:isolate}
.result-panel{min-width:0}
#result-body{padding:0 20px 18px}
.result-sub{font-size:.95rem;margin:14px 0 8px}
.highlight{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:.9rem/1.7 ui-monospace,SFMono-Regular,Consolas,"Malgun Gothic",monospace;unicode-bidi:plaintext}
.highlight:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.highlight mark{background:#ffe08a;color:inherit;border-radius:3px;box-shadow:0 0 0 1px #d9a400}
.highlight mark.alt{background:#bfe3ff;box-shadow:0 0 0 1px #4a9bd6}
.highlight mark.empty-match{display:inline-block;width:0;padding:0;border-left:2px solid #c0392b;box-shadow:none;background:none}
.match-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:480px;overflow:auto}
.match-list>li{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg);min-width:0}
.match-head{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:4px;font-size:.82rem}
.match-list code{display:inline-block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--border);padding:2px 6px;border-radius:5px;font-size:.88rem;unicode-bidi:plaintext}
.match-list code.empty{color:var(--muted);font-style:italic}
.group-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.group-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:.84rem;min-width:0}
.group-name{color:var(--muted);min-width:5em;overflow-wrap:anywhere}
.guide{margin:32px 0 40px;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.86rem;line-height:1.8}
.guide h2{color:var(--text);font-size:1.1rem}
.guide h3{color:var(--text);margin:20px 0 6px}
.guide summary{cursor:pointer;color:var(--text);font-weight:650;padding:10px 0;min-height:44px}
.guide code{background:var(--surface);border:1px solid var(--border);padding:2px 6px;border-radius:5px;white-space:pre-wrap;overflow-wrap:anywhere}
.example{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button,input,select,summary,a{touch-action:manipulation}
@media(max-width:860px){
  .editor-layout{grid-template-columns:1fr;gap:18px}
}
@media(max-width:760px){
  .options-panel{padding:16px}
  .editor-panel textarea{min-height:160px;padding:14px 16px}
  .panel-top{padding:12px 16px}
  .editor-footer{padding:10px 16px 0}
  .action-row{padding:12px 12px 14px}
  .padded{padding:0 16px 14px}
  .error-box{margin:0 16px 14px}
  #result-body{padding:0 16px 16px}
}
@media(max-width:480px){
  .options-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-row .button{flex:1 1 100%;width:100%;text-align:center}
}