/* ===== merged from /style.css ===== */
/* FilePat clean layout v14 — visual/layout only */
*{box-sizing:border-box}
html{min-height:100%;background:#f6f7f9;scroll-behavior:smooth}
body{min-height:100%;margin:0;font-family:Arial,"Noto Sans JP","Yu Gothic",sans-serif;color:#17191d;background:#f6f7f9;overflow-x:hidden}
button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}

.topbar{position:sticky;top:0;z-index:20;min-height:64px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 28px;background:rgba(255,255,255,.96);border-bottom:1px solid #e3e5e9;backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;flex:0 0 auto;font-size:16px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.logo{width:29px;height:29px;display:grid;place-items:center;flex:0 0 auto;margin-right:9px;border-radius:8px;background:#111;color:#fff;font-size:12px}
.mainnav{display:flex;align-items:center;justify-content:flex-end;gap:22px;min-width:0}
.mainnav a{display:inline-flex;align-items:center;color:#535962;font-size:11px;font-weight:650;line-height:1.4;white-space:nowrap}
.mainnav a:hover{color:#111}
.lang-switch{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;padding:3px;border:1px solid #e1e4e8;border-radius:8px;background:#fafbfc}
.lang-switch button{min-width:30px;min-height:28px;padding:5px 7px;border:0;border-radius:5px;background:transparent;color:#888d95;font-size:9px;font-weight:750;line-height:1}
.lang-switch button.active{background:#111;color:#fff}
.lang-ja{display:inline}.lang-en{display:none}
html[data-lang="en"] .lang-ja{display:none!important}html[data-lang="en"] .lang-en{display:inline!important}

.page{width:100%;max-width:1200px;margin:0 auto;padding:26px 20px 58px}
.tool-layout{display:grid;grid-template-columns:210px minmax(0,1fr);min-width:0;overflow:hidden;background:#fff;border:1px solid #e1e4e8;border-radius:18px;box-shadow:0 16px 45px rgba(20,26,34,.055)}
.sidebar{min-width:0;padding:18px 11px;background:#fbfbfc;border-right:1px solid #e1e4e8}
.tools-label{padding:2px 10px 11px;color:#a1a6ad;font-size:9px;font-weight:800;letter-spacing:.18em}
.tool{width:100%;min-width:0;margin:2px 0;padding:10px;border:0;border-radius:9px;background:transparent;color:#6f757e;text-align:left;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:650}
.tool:hover{background:#f0f1f3;color:#111}.tool.active{background:#111;color:#fff}
.ico{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:7px;background:#eef0f3;color:#7e858f;font-size:8px;font-weight:800}.tool.active .ico{background:#2c2e32;color:#fff}

.panel{min-width:0;padding:34px 40px 36px}
.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.eyebrow{display:block;color:#a0a5ad;font-size:9px;font-weight:800;letter-spacing:.18em}
.heading h1{margin:6px 0 5px;font-size:29px;line-height:1.15;letter-spacing:-.045em}
.heading p{margin:0;color:#858b95;font-size:11px;line-height:1.6}
.keys{flex:0 0 auto;padding:7px 9px;border:1px solid #e3e5e8;border-radius:8px;background:#fafafb;color:#9ca1a9;font-size:9px;line-height:1.4;white-space:nowrap}

.dropzone{width:100%;min-height:360px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;outline:0;cursor:pointer;border:1px dashed #c9cdd3;border-radius:15px;background:#fafbfc;transition:background .15s,border-color .15s,transform .15s}
.dropzone:hover{background:#f7f8fa}.dropzone.drag{border-color:#111;background:#f2f3f5}.dropzone:focus{box-shadow:0 0 0 3px rgba(17,17,17,.10)}
.drop-plus{width:43px;height:43px;display:grid;place-items:center;margin-bottom:3px;border-radius:12px;background:#eceef1;color:#666d77;font-size:20px}
.drop-title{font-size:14px;font-weight:700}.drop-sub{color:#949aa3;font-size:10px}.pick{margin-top:9px;padding:10px 16px;border-radius:9px;background:#111;color:#fff;font-size:11px;font-weight:700}.limit{margin-top:2px;color:#a1a6ad;font-size:9px}

.settings{margin-top:14px}.setting-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px;padding:14px;border:1px solid #e7e8eb;border-radius:12px;background:#f8f8fa}
.setting{display:flex;flex-direction:column;gap:6px;color:#797f88;font-size:10px}.setting input,.setting select{width:100%;min-height:34px;padding:8px 9px;border:1px solid #dedfe3;border-radius:8px;outline:0;background:#fff;font-size:11px}.setting input:focus,.setting select:focus{border-color:#b7bbc1;box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.range{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:7px;align-items:center}.range output{text-align:right;color:#555;font-size:10px}

.files-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:23px 0 8px}.files-head>span{color:#969ca5;font-size:9px;font-weight:800;letter-spacing:.16em}.files-head b{color:#111;letter-spacing:normal}.clear{padding:4px;border:0;background:transparent;color:#8d939b;font-size:10px}.clear:hover{color:#111}
.queue{display:grid;gap:8px;min-width:0}.queue.empty{min-height:84px;border:1px solid #eceef0;border-radius:11px}.queue.empty>div{min-height:83px;display:grid;place-items:center;padding:14px;color:#b0b5bd;font-size:10px;text-align:center}
.row{min-width:0;display:flex;align-items:center;gap:11px;padding:9px 10px;border:1px solid #e4e6ea;border-radius:11px;background:#fff}.thumb{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#eff1f3;object-fit:cover;color:#737983;font-size:8px;font-weight:800}.meta,.result-info{min-width:0;flex:1}.name,.result-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650}.sub,.result-size{margin-top:3px;color:#9aa0a8;font-size:9px}.remove{width:28px;height:28px;flex:0 0 auto;border:0;border-radius:7px;background:transparent;color:#a2a7af;font-size:16px}.remove:hover{background:#f0f1f3;color:#111}

.actionbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:21px;padding-top:15px;border-top:1px solid #e7e8eb}.privacy{color:#8d939c;font-size:9px;line-height:1.6}.run{flex:0 0 auto;padding:11px 19px;border:0;border-radius:10px;background:#111;color:#fff;font-size:11px;font-weight:750}.run:disabled{opacity:.32;cursor:not-allowed}
.progress{margin-top:15px}.progress.hidden{display:none}.progress-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;color:#787e88;font-size:9px}.progress-track{height:5px;overflow:hidden;border-radius:6px;background:#eceef0}.progress-track i{display:block;width:0;height:100%;background:#111;transition:width .15s}
.results{margin-top:10px}.result{display:flex;align-items:center;justify-content:space-between;gap:15px;min-width:0;margin-top:8px;padding:10px 12px;border:1px solid #e4e6ea;border-radius:11px;background:#fcfcfd}.save{flex:0 0 auto;padding:8px 11px;border:0;border-radius:8px;background:#eceef1;color:#111;font-size:10px;font-weight:700;white-space:nowrap}.notice{margin-top:8px;padding:10px 11px;border-radius:9px;background:#f3f4f6;color:#6e747e;font-size:10px;line-height:1.6}.notice.error{background:#faf1f1;color:#8f3f3f}

.info-section{max-width:980px;margin:62px auto 0;padding:0 4px}.section-head{margin-bottom:22px}.section-head h2{margin:6px 0 0;font-size:24px;line-height:1.3;letter-spacing:-.035em}.howto-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.howto-list>div{padding:21px 20px;border:1px solid #e2e5e8;border-radius:14px;background:#fff}.howto-list b{display:block;margin-bottom:11px;color:#8b9199;font-size:10px;letter-spacing:.12em}.howto-list p{margin:0;color:#616872;font-size:12px;line-height:1.8}.howto-list strong{color:#20242a}
.articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.articles article{padding:21px 20px;border:1px solid #e2e5e8;border-radius:14px;background:#fff}.articles h3{margin:0 0 8px;font-size:14px;line-height:1.45}.articles p{margin:0;color:#606771;font-size:12px;line-height:1.85}
.faq details{padding:15px 0;border-top:1px solid #e3e5e8}.faq details:first-of-type{border-top:0}.faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;color:#20242a;font-size:12px;font-weight:700;line-height:1.6}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';flex:0 0 auto;color:#8c929a;font-weight:400}.faq details[open] summary::after{content:'−'}.faq details p{margin:9px 25px 0 0;color:#606771;font-size:12px;line-height:1.85}

.seo-content{width:100%;max-width:1100px;margin:58px auto 76px;padding:0 24px;color:#181818}.seo-inner{padding-top:38px;border-top:1px solid #dedede}.seo-content .section-kicker{margin:0 0 8px;color:#707070;font-size:12px;letter-spacing:.08em}.seo-content h2{margin:0 0 10px;font-size:27px;line-height:1.4}.seo-content .seo-inner>p{max-width:780px;margin:0 0 20px;color:#707070;font-size:14px;line-height:1.9}.seo-links{display:flex;flex-wrap:wrap;gap:0;margin:0 0 34px;border-top:1px solid #dedede;border-bottom:1px solid #dedede}.seo-links a{margin-right:16px;padding:11px 16px 11px 0;color:#181818;font-size:13px}.seo-links a:hover{text-decoration:underline}.seo-content article{padding:23px 0;border-bottom:1px solid #e4e4e4}.seo-content article h3,.seo-faq-text h3{margin:0 0 8px;font-size:17px}.seo-content article p,.seo-faq-text p{margin:0;color:#444;font-size:14px;line-height:1.9}.seo-faq-text{padding:30px 0 0}.seo-faq-text p{margin-top:10px}

.footer-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px 28px}.footer-wrap footer{padding:25px 0 0;border-top:1px solid #e3e5e9;color:#8d939c;font-size:10px}.footer-inner{display:grid;grid-template-columns:minmax(180px,1fr) 2.4fr;gap:42px;align-items:start}.footer-brand strong{display:block;color:#20242a;font-size:14px;letter-spacing:-.03em}.footer-brand p{margin:6px 0 0;color:#8a9098;font-size:10px;line-height:1.7}.footer-operator{display:flex;align-items:center;gap:9px;margin-top:16px;color:#747a83}.footer-operator img{width:34px;height:34px;object-fit:cover;border-radius:7px;border:1px solid #e5e6e8;background:#fff}.footer-operator span{color:#8b9199;font-size:9px}.footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.footer-links div{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}.footer-links b{margin-bottom:2px;color:#a0a5ad;font-size:8px;letter-spacing:.16em}.footer-links a{max-width:100%;color:#747a83;font-size:10px;line-height:1.45;overflow-wrap:anywhere}.footer-links a:hover{color:#111;text-decoration:underline}.copyright{display:flex;justify-content:space-between;gap:16px;margin-top:21px;padding-top:13px;border-top:1px solid #eceef0;color:#a0a5ad;font-size:9px}

.trust-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;padding:5px 4px 8px}.trust-links a{color:#747b85;font-size:10px;text-decoration:underline;text-underline-offset:3px}.trust-links a:hover{color:#111}
.simple-page{max-width:920px;margin:0 auto;padding:28px 20px 52px}.simple-card{padding:36px;border:1px solid #e1e4e8;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(20,26,34,.035)}.simple-card h1{margin:8px 0 20px;font-size:28px;line-height:1.3;letter-spacing:-.04em}.simple-card h2{margin:28px 0 10px;font-size:18px}.simple-card h3{margin:20px 0 7px;font-size:13px}.simple-card p,.simple-card li{color:#5f6670;font-size:12px;line-height:1.95}.simple-card ul{padding-left:1.3em}.back-link{display:inline-block;margin-bottom:14px;color:#737a83;font-size:11px;text-decoration:underline;text-underline-offset:3px}.warning-box{padding:12px 13px;border:1px solid #eee0cb;border-radius:10px;background:#faf5ee;color:#765c39;font-size:11px;line-height:1.7}

@media(max-width:900px){
  .topbar{min-height:64px;padding:10px 20px;align-items:center}
  .mainnav{gap:14px}
  .tool-layout{grid-template-columns:1fr}
  .sidebar{display:flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;padding:9px;border-right:0;border-bottom:1px solid #e1e4e8;scrollbar-width:thin;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .tools-label{display:none}.tool{width:auto;flex:0 0 auto;min-height:42px;white-space:nowrap}.panel{padding:28px 24px 32px}.keys{display:none}
  .howto-list{grid-template-columns:1fr}.articles{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr;gap:26px}.footer-wrap{padding-left:20px;padding-right:20px}.footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .topbar{display:grid;grid-template-columns:1fr;gap:8px;padding:10px 15px}.brand{font-size:15px}.mainnav{justify-content:space-between;gap:8px;width:100%}.mainnav a{font-size:10px}.lang-switch{margin-left:auto}.lang-switch button{min-width:29px;min-height:29px}
  .page{padding:9px 8px 42px}.tool-layout{border-radius:14px}.sidebar{padding:8px 7px}.tool{min-height:40px;padding:8px 9px;font-size:10px;gap:8px}.ico{width:26px;height:26px;font-size:7px}.panel{padding:23px 14px 28px}.heading{margin-bottom:18px}.heading h1{font-size:23px}.heading p{font-size:10px}.dropzone{min-height:235px;border-radius:13px}.pick{padding:10px 14px}.setting-card{grid-template-columns:1fr;padding:12px}.files-head{margin-top:19px}.row{gap:8px;padding:8px}.thumb{width:38px;height:38px}.actionbar{align-items:stretch;flex-direction:column;gap:10px}.run{width:100%}.result{align-items:stretch;flex-direction:column;gap:9px}.save{width:100%;text-align:center}.info-section{margin-top:46px;padding:0}.section-head h2{font-size:21px}.howto-list>div,.articles article{padding:18px}.articles p,.howto-list p,.faq details p{font-size:11px}.seo-content{margin-top:44px;margin-bottom:58px;padding:0 16px}.seo-content h2{font-size:23px}.seo-content .seo-inner>p,.seo-content article p,.seo-faq-text p{font-size:12px}.seo-links a{margin-right:12px;padding-right:12px;font-size:11px}
  .simple-page{padding:16px 10px 34px}.simple-card{padding:25px 19px}.simple-card h1{font-size:25px}.simple-card p,.simple-card li{font-size:11px}.simple-card h2{font-size:17px}.footer-wrap{padding:0 15px 20px}.footer-links{gap:20px 12px}.footer-links a{font-size:10px}.copyright{flex-direction:column;gap:4px}
}
@media(max-width:370px){.mainnav a{font-size:9px}.lang-switch button{min-width:27px;padding:4px}.panel{padding-left:12px;padding-right:12px}.heading h1{font-size:21px}.tool{padding-left:8px;padding-right:8px}}

/* PDF split tool */
.split-settings{display:block}
.split-settings .setting{max-width:none}
.split-settings .setting input{width:100%}
.setting-help{margin:10px 0 0;color:#777;font-size:12px;line-height:1.7}
@media (max-width:720px){
  .split-settings{padding:14px}
  .split-settings .setting input{min-height:44px}
}



/* Clear boundary between in-page tools and separate tool pages */
.tools-group-label{padding:3px 10px 2px;color:#5d646e;font-size:10px;font-weight:800;letter-spacing:.02em}
.tools-group-note{padding:0 10px 8px;color:#9298a0;font-size:9px;line-height:1.45}
.tools-external-divider{display:flex;align-items:center;gap:8px;margin:10px 10px 7px;padding-top:12px;border-top:1px solid #d9dde2;color:#6f7680;font-size:9px;font-weight:800;line-height:1.4}
.tools-external-divider::before,.tools-external-divider::after{content:"";height:1px;flex:1;background:#d9dde2}
.tools-external-divider span{display:block;white-space:nowrap}

@media(max-width:900px){
  .tools-group-label,.tools-group-note{display:none}
  .tools-external-divider{flex:0 0 auto;margin:0 2px;padding:0 8px;border-top:0;border-left:1px solid #cfd4da;height:34px;gap:7px}
  .tools-external-divider::before{display:none}
  .tools-external-divider::after{display:none}
  .tools-external-divider span{font-size:9px}
}

/* Fine interaction + responsive refinements */
html,body{width:100%;max-width:100%;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.brand,.mainnav a,.lang-switch button,.tool,.clear,.remove,.save,.run,.pick,.dropzone{touch-action:manipulation}
.brand{min-height:34px;outline:0;color:#17191d}
.brand:hover{color:#17191d}
.brand:focus,.brand:focus-visible{outline:0;box-shadow:none}
.logo{transition:background-color .12s ease,transform .12s ease}
.brand:active .logo{transform:none;background:#111}
.mainnav a{padding:6px 0}
.mainnav a:focus-visible,.lang-switch button:focus-visible,.tool:focus-visible,.clear:focus-visible,.remove:focus-visible,.run:focus-visible,.save:focus-visible,.pick:focus-visible{outline:2px solid #b9bdc4;outline-offset:2px}
.lang-switch button{appearance:none;-webkit-appearance:none}
.lang-switch button:active{transform:none}
.tool{transition:background-color .12s ease,color .12s ease}
.tool:active{transform:none}
.sidebar{scrollbar-color:#cfd3d8 transparent}
.sidebar::-webkit-scrollbar{height:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:#d4d7dc;border-radius:10px}
.dropzone:active{transform:none}
.panel,.sidebar,.tool-layout,.setting-card,.row,.result,.simple-card{min-width:0}
input,select,button{max-width:100%}

@media (max-width:900px){
  .topbar{position:sticky;top:0;padding:9px 18px;gap:10px}
  .mainnav{overflow-x:auto;overflow-y:hidden;justify-content:flex-end;white-space:nowrap;padding:2px 0 3px;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{flex:0 0 auto}
  .tool-layout{border-radius:16px}
  .sidebar{overscroll-behavior-x:contain}
  .panel{padding:30px 28px 34px}
}

@media (max-width:620px){
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;gap:10px;min-height:58px}
  .brand{font-size:14px;min-width:0}
  .logo{width:28px;height:28px;margin-right:8px;border-radius:7px;font-size:11px}
  .mainnav{flex:1 1 auto;justify-content:flex-end;gap:10px;min-width:0}
  .mainnav a{font-size:9px;padding:5px 1px}
  .lang-switch{padding:2px;border-radius:7px}
  .lang-switch button{min-width:28px;min-height:27px;padding:5px 6px;font-size:8px}
  .page{padding:8px 7px 40px}
  .tool-layout{border-radius:13px}
  .sidebar{padding:7px 6px;gap:3px}
  .tool{min-height:39px;padding:7px 8px;border-radius:8px;font-size:9px;gap:7px}
  .ico{width:25px;height:25px;border-radius:6px;font-size:6.5px}
  .panel{padding:22px 13px 27px}
  .heading{gap:12px}
  .heading h1{font-size:22px}
  .heading p{font-size:9.5px}
  .dropzone{min-height:280px}
  .files-head{gap:8px}
  .clear{font-size:9px}
  .row{padding:8px;gap:8px}
  .name,.result-name{font-size:10px}
  .sub,.result-size{font-size:8.5px}
  .remove{width:27px;height:27px}
  .actionbar{margin-top:18px;padding-top:13px}
  .privacy{font-size:8.5px}
  .run{padding:11px 16px}
  .result{padding:9px 10px}
  .save{padding:8px 10px}
}

@media (max-width:380px){
  .topbar{padding-left:10px;padding-right:10px;gap:7px}
  .brand{font-size:13px}
  .mainnav{gap:7px}
  .mainnav a{font-size:8.5px}
  .lang-switch button{min-width:26px;padding-left:5px;padding-right:5px}
  .heading h1{font-size:20px}
  .dropzone{min-height:260px}
  .tool{padding-left:7px;padding-right:7px}
}


/* Internal anchor / section jump fix */
section[id], article[id], h1[id], h2[id], h3[id], [id=top]{scroll-margin-top:88px}
@media (max-width:620px){
  section[id], article[id], h1[id], h2[id], h3[id], [id=top]{scroll-margin-top:72px}
}

.tool-link{display:flex;align-items:center;text-decoration:none;color:inherit}

/* FilePat v7 tool colors: category cues without gradients/glow. */
.tool{}
.tool .ico{width:30px;height:34px;border:1px solid #d4d8dc;border-radius:4px;background:#fff;color:#6f757e;font-size:7px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tool .ico:before{content:"";position:absolute;right:-1px;top:-1px;width:8px;height:8px;background:currentColor;opacity:.12;clip-path:polygon(0 0,100% 100%,0 100%)}
.tool .ico:after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:1px;background:currentColor;opacity:.25;box-shadow:0 -4px 0 currentColor}
.tool[data-tool="image-convert"],.tool[data-tool="compress"],.tool[data-tool="resize"]{--tool-accent:#245b97}
.tool[data-tool="image-pdf"],.tool[data-tool="pdf-image"],.tool[data-tool="pdf-merge"],.tool[data-tool="pdf-split"]{--tool-accent:#b71c1c}
.tool-link[href*="pdf-password"]{--tool-accent:#b71c1c}
.tool-link[href*="text-convert"],.tool[data-tool="text-convert"],.tool-link[href*="csv-merge"],.tool-link[href*="table-extract"]{--tool-accent:#246139}
.tool[data-tool="zip"],.tool-link[href*="file-rename"],.tool-link[href*="file-organize"],.tool-link[href*="duplicate-finder"]{--tool-accent:#76520e}
.tool-link[href*="qr"]{--tool-accent:#4c3b70}
.tool-link[href*="transcribe"]{--tool-accent:#3f7d80}
.tool:hover{}
.tool.active{background:#f4f5f7;color:#111;}
.tool.active .ico{background:#fff;color:var(--tool-accent,#111);border-color:var(--tool-accent,#c9cdd2)}
.panel .heading h1{letter-spacing:-.04em}
/* Make the work surface visually follow the active category. */
:root{--tool-page-accent:#111;--tool-page-soft:#fafafa}
body:has(.tool[data-tool="image-convert"].active),body:has(.tool[data-tool="compress"].active),body:has(.tool[data-tool="resize"].active){--tool-page-accent:#245b97;--tool-page-soft:#f8fbff}
body:has(.tool[data-tool="image-pdf"].active),body:has(.tool[data-tool="pdf-image"].active),body:has(.tool[data-tool="pdf-merge"].active),body:has(.tool[data-tool="pdf-split"].active){--tool-page-accent:#b71c1c;--tool-page-soft:#fff8f8}
.dropzone{background:var(--tool-page-soft)}
.dropzone.drag{border-color:var(--tool-page-accent);background:#fff}
.pick{background:#111}
@media(max-width:760px){.tool-layout{grid-template-columns:1fr}.sidebar{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid #e1e4e8;padding:10px}.tools-label{display:none}.tool{flex:0 0 auto;width:auto;min-width:132px}.panel{padding:24px 18px 28px}.dropzone{min-height:300px}}

/* FilePat final sidebar format badges — text only, no legacy file icons */
.sidebar .ico.file-format-side,
.sidebar .tool .ico:not(.file-format-side){
  width:38px!important;
  height:26px!important;
  min-width:38px!important;
  flex:0 0 38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:0!important;
  border:1.5px solid #c9ced4!important;
  border-radius:3px!important;
  background:#fff!important;
  box-shadow:none!important;
  font-family:Arial,sans-serif!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.03em!important;
}
.sidebar .ico.file-format-side img{display:none!important}
.sidebar .ico.file-format-side.format-jpg{border-color:#5d8fc4!important;color:#2f679c!important;background:#f8fbff!important}
.sidebar .ico.file-format-side.format-pdf{border-color:#c62828!important;color:#b71c1c!important;background:#fff8f8!important}
.sidebar .ico.file-format-side.format-zip{border-color:#c69532!important;color:#8a650f!important;background:#fffaf0!important}
.sidebar .ico.file-format-side.format-csv{border-color:#5b9a68!important;color:#347045!important;background:#f8fcf8!important}
.sidebar .ico.file-format-side.format-mp3{border-color:#8c6ab1!important;color:#62438a!important;background:#fbf8ff!important}
.sidebar .ico.file-format-side.format-txt{border-color:#4f8f91!important;color:#2e6668!important;background:#f7fcfc!important}
.sidebar .ico.file-format-side.format-folder{border-color:#4f8f91!important;color:#2e6668!important;background:#f7fcfc!important}
.sidebar .ico.file-format-side.format-file{border-color:#4f8f91!important;color:#2e6668!important;background:#f7fcfc!important}
.sidebar .ico.file-format-side.format-html{border-color:#6a849a!important;color:#415d73!important;background:#f8fafc!important}
.sidebar .tool.active .ico.file-format-side{background:#fff!important}
@media(max-width:620px){
  .sidebar .ico.file-format-side,
  .sidebar .tool .ico:not(.file-format-side){width:34px!important;height:23px!important;min-width:34px!important;flex-basis:34px!important;font-size:8px!important}
}

/* FilePat v3 — text-only tool labels. No framed file icons. */
.format-text{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font:700 11px/1 Arial,sans-serif !important;
  letter-spacing:.04em !important;
}
.format-text.format-img{color:#2f679c !important}
.format-text.format-pdf{color:#b51f1f !important}
.format-text.format-archive{color:#91680d !important}
.format-text.format-data{color:#347045 !important}
.format-text.format-office{color:#28686b !important}
.format-text.format-utility{color:#65498b !important}
.feature-top{gap:0 !important; margin-bottom:10px !important}
.feature-top .tag{display:none !important}
.feature-card .file-icon{display:none !important}
.feature-card:has(.format-text){border-color:#dfe3e8 !important}
.side-format{
  display:inline-block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  flex:0 0 auto !important;
  margin:0 2px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font:700 9px/1 Arial,sans-serif !important;
  letter-spacing:.035em !important;
  text-decoration:none !important;
}
.side-format.format-jpg{color:#2f679c !important}
.side-format.format-pdf{color:#b51f1f !important}
.side-format.format-zip{color:#91680d !important}
.side-format.format-csv{color:#347045 !important}
.side-format.format-mp3{color:#62438a !important}
.side-format.format-txt{color:#596c78 !important}
.side-format.format-folder{color:#596c78 !important}
.side-format.format-file{color:#596c78 !important}
.side-format.format-html{color:#4d6b84 !important}
.side-format.format-qr{color:#65498b !important}
.sidebar .ico,.sidebar .ico *{display:none !important}
.sidebar .tool{gap:0 !important}
.sidebar .tool .side-format{display:inline-block !important}
@media(max-width:640px){
  .format-text{font-size:10px !important}
  .side-format{font-size:8px !important}
}

/* Keep the ad from visually escaping above the tool page on narrow screens. */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:768px){
  .filepat-ad-top + .page{margin-top:0!important}
  .filepat-ad-top{contain:layout paint!important}
}

/* =========================================================
   FilePat UX polish v11 — CSS ONLY
   Purpose: reduce visual friction without changing markup,
   JavaScript, links, tools or interaction logic.
   ========================================================= */
:root{
  --fp-blue:#0b66d1;
  --fp-ink:#111418;
  --fp-muted:#69727d;
  --fp-line:#e1e5e9;
  --fp-soft:#f7f9fc;
}

/* Make the directory behave like a calm, scannable index rather than a wall of cards. */
.directory-section{scroll-margin-top:82px}
.directory-section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;margin-bottom:15px}
.directory-section-head h2{margin:0;color:var(--fp-ink);font-size:21px;line-height:1.35;letter-spacing:-.035em}
.directory-section-head p{max-width:520px;margin:0;color:#858c95;font-size:11px;line-height:1.7;text-align:right}

/* Homepage tool rows: larger touch target, stronger hierarchy, quieter chrome. */
#tools .feature-card{min-height:148px;transition:background-color .16s ease, padding .16s ease, color .16s ease}
#tools .feature-card strong{font-size:19px;line-height:1.35;letter-spacing:-.025em}
#tools .feature-card .use{max-width:46em;color:#727b86}
#tools .feature-card .go{display:inline-flex;align-items:center;min-height:32px;margin-top:10px;padding:2px 0!important;font-size:11px;letter-spacing:.01em}
#tools .feature-card:focus-visible{outline:2px solid var(--fp-blue);outline-offset:-2px;background:#f8fbff!important}
#tools .feature-card:hover{background:linear-gradient(90deg,#fbfcfd 0%,#f7f9fc 100%)!important}
#tools .feature-card .feature-top .format-text{font-weight:800;letter-spacing:.06em}

/* Keep new/editorial links easy to scan while preserving their existing two-column layout. */
.new-tools-editorial a{min-height:112px;transition:background-color .16s ease, padding .16s ease}
.new-tools-editorial a:focus-visible{outline:2px solid var(--fp-blue);outline-offset:-2px;background:#f8fbff}
.new-tools-editorial a:hover{background:#fafbfc}
.new-tools-editorial strong{letter-spacing:-.02em}
.new-tools-editorial i{transition:transform .16s ease,color .16s ease}
.new-tools-editorial a:hover i,.new-tools-editorial a:focus-visible i{transform:translateX(3px);color:var(--fp-blue)}

/* Sections below the tool directory read as editorial content, not competing CTAs. */
#office,#office-tools,#formats,#edit-tools{margin-top:68px}
#office-tools .directory-section-head,
#formats .directory-section-head,
#edit-tools .directory-section-head{border-top:1px solid var(--fp-line);padding-top:20px}

/* Use-case entries: retain existing card markup, but visually flatten them into information rows. */
.office{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;border-top:1px solid var(--fp-line)}
.office-card{min-height:132px;padding:20px 0;border:0;border-bottom:1px solid var(--fp-line);border-radius:0;background:transparent;box-shadow:none}
.office-card h3{margin:0 0 7px;font-size:15px;letter-spacing:-.02em}
.office-card p{max-width:48em;margin:0;color:#69727d;font-size:11px;line-height:1.8}
.office-card:hover h3{color:var(--fp-blue)}

/* Tool pages: keep the working surface visually dominant and the navigation quiet. */
@media(min-width:861px){
  .tool-layout{align-items:stretch}
  .sidebar{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
.sidebar .tool{min-height:42px}
.sidebar .tool:focus-visible{outline:2px solid var(--fp-blue);outline-offset:-2px;background:#f8fbff;color:var(--fp-ink)}
.sidebar .tool.active{box-shadow:inset 2px 0 0 var(--fp-blue)}

/* Working area: clearer rhythm around the primary action. */
.panel .heading{margin-bottom:28px}
.panel .heading h1{max-width:18em}
.dropzone{min-height:320px;border-width:1px;border-style:dashed;background:linear-gradient(180deg,#fbfcfd 0%,#f8fafb 100%)}
.dropzone:hover{background:#f7f9fc}
.dropzone:focus-visible{box-shadow:0 0 0 3px rgba(11,102,209,.13);border-color:var(--fp-blue)}
.pick{min-height:42px;padding:11px 18px;background:var(--fp-ink);transition:background-color .16s ease,transform .16s ease}
.pick:hover{background:#252a31;transform:translateY(-1px)}
.run{min-height:42px;background:var(--fp-blue);transition:background-color .16s ease,transform .16s ease}
.run:hover:not(:disabled){background:#095ab8;transform:translateY(-1px)}
.save{min-height:38px;padding:9px 13px;transition:background-color .16s ease}
.save:hover{background:#dfe4e9}

/* Forms: make labels, focus and control size easier to read without changing behavior. */
.setting label,.setting .label{line-height:1.5}
.setting input,.setting select{min-height:40px}
.setting input:focus,.setting select:focus{border-color:var(--fp-blue);box-shadow:0 0 0 3px rgba(11,102,209,.10)}

/* File/result lists: prioritize filename and the one relevant action. */
.row,.result{min-height:58px}
.remove:focus-visible,.clear:focus-visible,.save:focus-visible,.run:focus-visible,.pick:focus-visible{outline:2px solid var(--fp-blue);outline-offset:2px}

/* Quiet Japanese/editorial cue: use proportion and spacing rather than decorative motifs. */
.section-head h2,.seo-content h2,.simple-card h1{font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif}

@media(max-width:860px){
  .directory-section-head{grid-template-columns:1fr;gap:5px;align-items:start}
  .directory-section-head p{text-align:left}
  #office,#office-tools,#formats,#edit-tools{margin-top:52px}
  .office{grid-template-columns:1fr}
  .office-card{min-height:0;padding:17px 0}
}

@media(max-width:640px){
  #tools .feature-card{min-height:136px}
  #tools .feature-card strong{font-size:16px}
  .directory-section-head h2{font-size:19px}
  .directory-section-head p{font-size:10px}
  .new-tools-editorial a{min-height:96px}
  .dropzone{min-height:280px}
  .pick,.run{min-height:44px}
}

/* FilePat social links: visual-only extension of the existing footer */
.footer-instagram{margin-top:8px}
.footer-instagram span{display:inline-flex;align-items:center}
@media(max-width:640px){.footer-instagram{margin-top:6px}}


/* FilePat shared footer social visibility — v19 */
.footer-operator{
  min-height:40px;
  padding:4px 0;
  color:#3f4650 !important;
  text-decoration:none;
}
.footer-operator img{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px;
  object-fit:cover;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.footer-social-link{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  min-height:32px;
  color:#3f4650 !important;
  font-size:11px !important;
  line-height:1.5;
}
.footer-social-link b{
  color:#171a1e !important;
  font-size:11px !important;
  font-weight:700;
  letter-spacing:.02em;
}
.footer-social-link em{
  color:#7d848e;
  font-style:normal;
}
.footer-operator:hover .footer-social-link{color:#0b66d1 !important}
.footer-operator:focus-visible{outline:2px solid #2f6fff;outline-offset:3px}
.footer-instagram{margin-top:5px !important}
@media(max-width:620px){
  .footer-operator{min-height:46px}
  .footer-operator img{width:42px !important;height:42px !important;flex-basis:42px}
  .footer-social-link{font-size:12px !important}
  .footer-social-link b{font-size:12px !important}
}

/* FilePat v21 — align X / Instagram social links */
.footer-brand .footer-operator {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.footer-brand .footer-operator .footer-social-link {
  grid-column: 2;
  min-width: 0;
}
.footer-brand .footer-operator img {
  grid-column: 1;
  grid-row: 1;
  width: 36px !important;
  height: 36px !important;
}
.footer-brand .footer-instagram {
  grid-template-columns: 36px minmax(0, 1fr);
  padding-left: 0;
}
.footer-brand .footer-instagram::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
}
.footer-brand .footer-instagram .footer-social-link {
  grid-column: 2;
}
@media (max-width: 640px) {
  .footer-brand .footer-operator {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 9px;
  }
  .footer-brand .footer-operator img,
  .footer-brand .footer-instagram::before {
    width: 42px !important;
    height: 42px !important;
  }
  .footer-brand .footer-instagram {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}



/* ===== merged from /ad.css ===== */
/* FilePat / Ninja AdMax responsive ads */
.filepat-ad-top{
  width:100%;
  max-width:100%;
  height:90px;
  margin:2px auto 1px;
  padding:0;
  text-align:center;
  box-sizing:border-box;
  overflow:hidden;
}
.filepat-ad-top .ad-slot{
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:center;
  box-sizing:border-box;
}
.filepat-ad-top .ad-slot-sp{
  display:none;
  width:320px;
  max-width:100%;
  min-height:50px;
  margin:0 auto;
}
.filepat-ad-top .ad-slot-pc{
  display:block;
  width:100%;
  max-width:728px;
  min-height:90px;
  margin:0 auto;
}
@media (max-width:768px){
  .filepat-ad-top{height:50px;margin:0 auto 1px;}
  .filepat-ad-top .ad-slot-pc{display:none;}
  .filepat-ad-top .ad-slot-sp{display:block;}
}
.filepat-ad-top .ad-slot iframe{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* FilePat safe ad wrappers: never overlap tool controls */
.filepat-ad-wrap{width:100%;max-width:100%;margin:20px auto;text-align:center;position:relative;z-index:1;clear:both;box-sizing:border-box}
.filepat-ad-wrap>*{position:relative;z-index:1;max-width:100%}
@media(max-width:768px){.filepat-ad-wrap{width:100%;min-width:0;overflow:visible}}

/* FilePat stable ad frame: keep ad creatives inside their reserved area. */
.filepat-ad-top{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:90px!important;
  height:90px!important;
  margin:0 auto 10px!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  isolation:isolate!important;
}
.filepat-ad-top .ad-slot{
  position:relative!important;
  inset:auto!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  max-width:100%!important;
}
.filepat-ad-top .ad-slot-pc{width:728px!important;height:90px!important;min-height:90px!important}
.filepat-ad-top .ad-slot-sp{width:320px!important;height:50px!important;min-height:50px!important}
.filepat-ad-top iframe,
.filepat-ad-top > div > iframe,
.filepat-ad-top script + iframe{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important;
  margin:0 auto!important;
  border:0!important;
  overflow:hidden!important;
}
.filepat-ad-top img{display:block!important;max-width:100%!important;max-height:100%!important}
@media(max-width:768px){
  .filepat-ad-top{
    min-height:50px!important;
    height:50px!important;
    margin:0 auto 8px!important;
    overflow:hidden!important;
  }
  .filepat-ad-top .ad-slot-pc{display:none!important}
  .filepat-ad-top .ad-slot-sp{display:block!important;width:320px!important;height:50px!important;min-height:50px!important;max-width:100%!important}
}
@media(min-width:769px){
  .filepat-ad-top .ad-slot-sp{display:none!important}
  .filepat-ad-top .ad-slot-pc{display:block!important}
}
@media(max-width:360px){
  .filepat-ad-top .ad-slot-sp{width:100%!important;max-width:320px!important}
}


/* FilePat Stage 6 — preserve existing ad positions and reserve the intended space.
   No ad script, provider, or placement is changed. */
.seo-main > .ad-container{
  min-height:90px;
  min-width:0;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.seo-main > .ad-container > iframe,
.seo-main > .ad-container > div,
.seo-main > .ad-container > script + iframe{
  max-width:100%;
}
.filepat-new-tool-ad{
  min-height:104px;
}
.filepat-new-tool-ad .ad-container{
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
}
.filepat-new-tool-ad .ad-slot-pc{
  display:block;
  width:728px;
  height:90px;
  min-height:90px;
  max-width:100%;
}
.filepat-new-tool-ad .ad-slot-sp{
  display:none;
  width:320px;
  height:50px;
  min-height:50px;
  max-width:100%;
}
.filepat-side-ad__inner{
  min-height:250px;
}
@media(max-width:768px){
  .seo-main > .ad-container{min-height:50px;}
  .filepat-new-tool-ad{min-height:66px;}
  .filepat-new-tool-ad .ad-container{min-height:50px;}
  .filepat-new-tool-ad .ad-slot-pc{display:none;}
  .filepat-new-tool-ad .ad-slot-sp{display:block;min-height:50px;height:50px;}
}



/* ===== merged from /file-icons.css ===== */
/* FilePat compact format badges — no external icon images */
.file-icon{
  width:46px!important;height:30px!important;flex:0 0 46px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;margin:0!important;
  border:1.5px solid #c9ced4!important;border-radius:4px!important;
  background:#fff!important;box-shadow:none!important;
  color:#4b5563!important;font:700 12px/1 Arial,sans-serif!important;
  letter-spacing:.035em!important;box-sizing:border-box!important;
}
/* Never draw the old document-fold or divider lines. */
.file-icon::before,.file-icon::after{content:none!important;display:none!important;border:0!important;background:none!important;box-shadow:none!important}
.file-icon img,.file-icon svg,.file-icon .real-file-icon,.file-icon .icon-fallback,.file-icon i{display:none!important}

.feature-card:has(.file-icon-IMG) .file-icon{border-color:#4c78a8!important;color:#285f93!important}
.feature-card.pdf-card .file-icon,.feature-card:has(.file-icon-PDF) .file-icon{border-color:#d53b3b!important;color:#c21f1f!important}
.feature-card:has(.file-icon-ARCHIVE) .file-icon{border-color:#c89025!important;color:#8d650f!important}
.feature-card:has(.file-icon-DATA) .file-icon{border-color:#4f8b5b!important;color:#2f6b3e!important}
.feature-card:has(.file-icon-OFFICE) .file-icon{border-color:#4b8c8f!important;color:#28686b!important}
.feature-card:has(.file-icon-UTILITY) .file-icon{border-color:#7b64a5!important;color:#5a4488!important}

/* Sidebar badges */
.file-format-side{
  width:38px!important;height:24px!important;flex:0 0 38px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;box-sizing:border-box!important;
  border:1.5px solid #c9ced4!important;border-radius:3px!important;
  background:#fff!important;color:#4b5563!important;
  font:700 10px/1 Arial,sans-serif!important;letter-spacing:.03em!important;
}
.file-format-side img,.file-format-side svg,.file-format-side .real-file-icon,.file-format-side .icon-fallback{display:none!important}
.sidebar .tool .ico.file-format-side{width:38px!important;height:24px!important;flex-basis:38px!important;border-radius:3px!important}

.sidebar .tool .format-pdf,.sidebar .tool[data-tool="image-pdf"] .ico,.sidebar .tool[data-tool="pdf-image"] .ico,.sidebar .tool[data-tool="pdf-merge"] .ico,.sidebar .tool[data-tool="pdf-split"] .ico,.sidebar .tool-link[href*="pdf-password"] .ico{border-color:#d53b3b!important;color:#c21f1f!important}
.sidebar .tool .format-jpg{border-color:#4c78a8!important;color:#285f93!important}
.sidebar .tool .format-zip{border-color:#c89025!important;color:#8d650f!important}
.sidebar .tool .format-csv{border-color:#4f8b5b!important;color:#2f6b3e!important}
.sidebar .tool .format-mp3{border-color:#7b64a5!important;color:#5a4488!important}
.sidebar .tool .format-txt,.sidebar .tool .format-folder,.sidebar .tool .format-file,.sidebar .tool .format-html{border-color:#6f7b86!important;color:#46515b!important}

@media(max-width:640px){
  .file-icon{width:38px!important;height:26px!important;flex-basis:38px!important;font-size:10px!important}
  .file-format-side,.sidebar .tool .ico.file-format-side{width:34px!important;height:23px!important;flex-basis:34px!important;font-size:9px!important}
}

/* FilePat badge polish v2 — clean, compact, no legacy document graphics */
.file-icon,
.sidebar .tool .ico.file-format-side,
.sidebar .tool .ico:not(.file-format-side){
  position:relative!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  text-align:center!important;
  text-indent:0!important;
  text-decoration:none!important;
  background:#fff!important;
  box-shadow:none!important;
}
.file-icon::before,
.file-icon::after,
.sidebar .tool .ico::before,
.sidebar .tool .ico::after,
.sidebar .tool .ico.file-format-side::before,
.sidebar .tool .ico.file-format-side::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.file-icon img,.file-icon svg,.file-icon i,
.sidebar .tool .ico img,.sidebar .tool .ico svg,.sidebar .tool .ico i{
  display:none!important;
}
.file-icon{
  width:44px!important;
  height:29px!important;
  flex:0 0 44px!important;
  padding:0!important;
  border-width:1.5px!important;
  border-radius:5px!important;
  font:700 11px/1 Arial,sans-serif!important;
  letter-spacing:.02em!important;
}
.sidebar .tool .ico.file-format-side,
.sidebar .tool .ico:not(.file-format-side){
  width:36px!important;
  min-width:36px!important;
  height:23px!important;
  flex:0 0 36px!important;
  padding:0!important;
  border:1px solid #c9ced4!important;
  border-radius:4px!important;
  font:700 8px/1 Arial,sans-serif!important;
  letter-spacing:.015em!important;
  color:#4b5563!important;
}
.sidebar .tool .format-jpg{border-color:#6d9ccb!important;color:#2e679e!important;background:#fbfdff!important}
.sidebar .tool .format-pdf{border-color:#d43b3b!important;color:#b51f1f!important;background:#fffafa!important}
.sidebar .tool .format-zip{border-color:#d0a348!important;color:#91680d!important;background:#fffdf7!important}
.sidebar .tool .format-csv{border-color:#69a176!important;color:#3f7448!important;background:#fbfefb!important}
.sidebar .tool .format-mp3{border-color:#a18ac4!important;color:#6d5190!important;background:#fdfbff!important}
.sidebar .tool .format-txt{border-color:#74a5a7!important;color:#417577!important;background:#fbfefe!important}
.sidebar .tool .format-folder,.sidebar .tool .format-file{border-color:#8ea0ad!important;color:#596c78!important;background:#fcfdfe!important}
.sidebar .tool .format-html{border-color:#718fa8!important;color:#4d6b84!important;background:#fbfdff!important}
.sidebar .tool[data-tool="qr"] .ico,
.sidebar .tool-link[href*="qr"] .ico{border-color:#9a7bc1!important;color:#65498b!important;background:#fcf9ff!important}
.feature-card .tag{font-size:9px!important;line-height:1!important;letter-spacing:.06em!important}

@media(max-width:640px){
  .file-icon{width:38px!important;height:26px!important;flex-basis:38px!important;font-size:10px!important}
  .sidebar .tool .ico.file-format-side,
  .sidebar .tool .ico:not(.file-format-side){width:34px!important;min-width:34px!important;height:22px!important;flex-basis:34px!important;font-size:7.5px!important}
}

/* FilePat v3 — text-only tool labels. No framed file icons. */
.format-text{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font:700 11px/1 Arial,sans-serif !important;
  letter-spacing:.04em !important;
}
.format-text.format-img{color:#2f679c !important}
.format-text.format-pdf{color:#b51f1f !important}
.format-text.format-archive{color:#91680d !important}
.format-text.format-data{color:#347045 !important}
.format-text.format-office{color:#28686b !important}
.format-text.format-utility{color:#65498b !important}
.feature-top{gap:0 !important; margin-bottom:10px !important}
.feature-top .tag{display:none !important}
.feature-card .file-icon{display:none !important}
.feature-card:has(.format-text){border-color:#dfe3e8 !important}
.side-format{
  display:inline-block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  flex:0 0 auto !important;
  margin:0 2px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font:700 9px/1 Arial,sans-serif !important;
  letter-spacing:.035em !important;
  text-decoration:none !important;
}
.side-format.format-jpg{color:#2f679c !important}
.side-format.format-pdf{color:#b51f1f !important}
.side-format.format-zip{color:#91680d !important}
.side-format.format-csv{color:#347045 !important}
.side-format.format-mp3{color:#62438a !important}
.side-format.format-txt{color:#596c78 !important}
.side-format.format-folder{color:#596c78 !important}
.side-format.format-file{color:#596c78 !important}
.side-format.format-html{color:#4d6b84 !important}
.side-format.format-qr{color:#65498b !important}
.sidebar .ico,.sidebar .ico *{display:none !important}
.sidebar .tool{gap:0 !important}
.sidebar .tool .side-format{display:inline-block !important}
@media(max-width:640px){
  .format-text{font-size:10px !important}
  .side-format{font-size:8px !important}
}



/* ===== merged from /accessibility.css ===== */
/* FilePat accessibility + universal design layer: no gradients, no glow. */
:root{--fp-scale:1;--fp-focus:#111;--fp-text:#15171a;--fp-muted:#4e5660;--fp-line:#c9ced4;--fp-page:#f5f6f8;--fp-panel:#fff}
html[data-font-scale="small"]{--fp-scale:0.94}
html[data-font-scale="large"]{--fp-scale:1.16}
html[data-font-scale="small"] body,html[data-font-scale="large"] body{zoom:var(--fp-scale)}
html{scroll-padding-top:88px}
body{font-family:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--fp-text)}
button,input,select,textarea{font-family:inherit}
*:focus-visible{outline:3px solid var(--fp-focus)!important;outline-offset:3px!important}
.filepat-skip{position:fixed;left:12px;top:10px;z-index:1000;transform:translateY(-180%);padding:10px 14px;border:2px solid #111;border-radius:8px;background:#fff;color:#111;font-weight:800;font-size:13px;line-height:1.2}
.filepat-skip:focus{transform:translateY(0)}
.filepat-a11y{display:flex;align-items:center;gap:8px;margin-left:8px;color:#303640;font-size:11px;white-space:nowrap}
.filepat-a11y__label{font-weight:800}
.filepat-a11y__group{display:inline-flex;align-items:center;gap:2px;border:1px solid #cbd0d6;border-radius:7px;background:#fff;padding:2px}
.filepat-a11y__sub{padding:0 5px;color:#59616b;font-size:10px;font-weight:700}
.filepat-a11y__btn,.filepat-a11y__contrast{min-width:30px;min-height:30px;padding:4px 7px;border:0;border-radius:5px;background:#fff;color:#303640;font-weight:800;font-size:11px;cursor:pointer}
.filepat-a11y__btn.active{background:#111;color:#fff}
.filepat-a11y__contrast{border:1px solid #cbd0d6;min-width:auto;font-size:10px}
.filepat-a11y__contrast.active{background:#111;color:#fff;border-color:#111}

/* Main app: larger type, stronger structure, clearer sidebar. */
.topbar{min-height:68px;background:#fff;border-bottom:1px solid #d9dde2;backdrop-filter:none}
.mainnav a{font-size:13px;color:#3d4650}
.brand{font-size:18px}
.page{padding-top:18px}
.tool-layout{grid-template-columns:250px minmax(0,1fr);border-color:#cfd4da;box-shadow:0 10px 25px rgba(20,26,34,.045);border-radius:14px}
.sidebar{padding:18px 12px;background:#f8f9fa;border-right:1px solid #cfd4da;position:sticky;top:78px;align-self:start;max-height:calc(100vh - 96px);overflow:auto}
.tools-label{padding:3px 11px 12px;color:#4d5660;font-size:11px;letter-spacing:.16em}
.tool{min-height:48px;margin:3px 0;padding:7px 9px;gap:11px;border-radius:8px;color:#3c4550;font-size:13px;font-weight:700}
.tool:hover{background:#eef1f4;color:#111}
.tool .ico{width:34px;height:36px;border-radius:5px;font-size:8px;color:#303840;border-color:#b8bec5;box-shadow:none;background:#fff}
.tool.active{background:#edf0f3;color:#111}
.tool.active .ico{color:var(--tool-accent,#111);border-color:var(--tool-accent,#111);background:#fff}
.panel{padding:34px 40px 42px}
.eyebrow{font-size:11px;color:#5a636d}
.heading{margin-bottom:22px}
.heading h1{font-size:34px;letter-spacing:-.025em;line-height:1.2}
.heading p{font-size:14px;color:#5c6570;line-height:1.7}
.keys{font-size:11px;color:#59616b;background:#fff;border-color:#cbd0d6}
.dropzone{min-height:330px;border:2px dashed #9ba4ae;border-radius:12px;background:#fbfcfd}
.dropzone:hover{background:#f4f6f8}
.dropzone:focus{box-shadow:0 0 0 4px rgba(17,17,17,.12)}
.drop-title{font-size:18px}.drop-sub{font-size:13px;color:#5f6872}.pick{font-size:13px;padding:11px 18px;border-radius:8px}
.settings{margin-top:16px}.setting-card{border-color:#cfd4da;background:#f6f7f9;padding:16px}.setting{font-size:12px;color:#3f4852}.setting input,.setting select{min-height:42px;font-size:13px;border-color:#bcc3ca}.range output{font-size:11px;color:#303840}
.files-head{margin-top:24px}.files-head>span{font-size:11px;color:#4e5862}.clear{font-size:12px;color:#46505a}
.queue.empty{border-color:#ccd2d8}.queue.empty>div{min-height:94px;color:#69737d;font-size:12px}
.row{padding:10px 12px;border-color:#cbd1d7}.name,.result-name{font-size:13px}.sub,.result-size{font-size:11px;color:#65707b}
.actionbar{margin-top:22px;padding-top:18px;border-top:1px solid #cfd4da}.privacy{font-size:11px;color:#59636e}.run{font-size:13px;padding:12px 20px;border-radius:8px}
.progress-top{font-size:11px}.notice{font-size:12px;color:#424b55;background:#f1f3f5;border:1px solid #d1d6db}.notice.error{background:#fff0f0;color:#8d1d1d;border-color:#d79a9a}
.info-section{margin-top:44px}.section-head h2{font-size:26px}.howto-list>div,.articles article{border-color:#cfd4da}.howto-list p,.articles p,.faq details p{font-size:13px;color:#48515b}

/* Category colors: saturated and flat, with text labels kept so color is never the only cue. */
.tool[data-tool="image-convert"],.tool[data-tool="compress"],.tool[data-tool="resize"]{--tool-accent:#0B5CAD}
.tool[data-tool="image-pdf"],.tool[data-tool="pdf-image"],.tool[data-tool="pdf-merge"],.tool[data-tool="pdf-split"],.tool-link[href*="pdf-password"]{--tool-accent:#B42318}
.tool[data-tool="text-convert"],.tool-link[href*="csv-merge"],.tool-link[href*="table-extract"]{--tool-accent:#16794C}
.tool[data-tool="zip"],.tool-link[href*="file-rename"],.tool-link[href*="file-organize"],.tool-link[href*="duplicate-finder"]{--tool-accent:#8A5A00}
.tool-link[href*="qr"]{--tool-accent:#5B3AA4}
.tool-link[href*="transcribe"]{--tool-accent:#0F6B6D}

body{--tool-page-accent:#111;--tool-page-soft:#fbfcfd}
body:has(.tool[data-tool="image-convert"].active),body:has(.tool[data-tool="compress"].active),body:has(.tool[data-tool="resize"].active){--tool-page-accent:#0B5CAD;--tool-page-soft:#f4f8fd}
body:has(.tool[data-tool="image-pdf"].active),body:has(.tool[data-tool="pdf-image"].active),body:has(.tool[data-tool="pdf-merge"].active),body:has(.tool[data-tool="pdf-split"].active){--tool-page-accent:#B42318;--tool-page-soft:#fff7f6}
body:has(.tool[data-tool="text-convert"].active){--tool-page-accent:#16794C;--tool-page-soft:#f4faf6}
body:has(.tool[data-tool="zip"].active){--tool-page-accent:#8A5A00;--tool-page-soft:#fffbf2}
.dropzone{background:var(--tool-page-soft);border-color:var(--tool-page-accent)}
.pick{background:var(--tool-page-accent)}
.progress-track i{background:var(--tool-page-accent)}
.tool.active{}

/* Ad containers are clipped to their reserved area so injected ad iframes cannot draw stray lines over the page. */
.filepat-ad-top,.filepat-ad-wrap,.ad-container{overflow:hidden!important;contain:layout paint;isolation:isolate;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important}
.filepat-ad-top iframe,.filepat-ad-wrap iframe,.ad-container iframe{display:block;border:0!important;outline:0!important;box-shadow:none!important;max-width:100%;margin-left:auto!important;margin-right:auto!important}

/* Tool pages: readable controls + shared header/accessibility treatment. */
.tool-page{font-family:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#15171a}
.tool-head{min-height:68px;padding:14px 0;border-bottom:1px solid #cfd4da}
.tool-head .back{font-size:13px;color:#3f4852}
.tool-main{padding-top:24px}
.tool-main h1{font-size:40px;letter-spacing:-.025em;color:#111}
.lead{font-size:16px;color:#404953;line-height:1.85}
.tool-page .hero-card{border-color:#cbd1d7;box-shadow:none;border-radius:12px}
.tool-page .field label{font-size:14px;color:#2f3841}
.tool-page .field input,.tool-page .field select,.tool-page .field textarea{min-height:44px;border-color:#b9c0c7;font-size:14px}
.tool-page .drop{min-height:280px;border:2px dashed #929ca6;background:#fbfcfd}
.tool-page .drop p{font-size:15px}
.tool-page .btn{min-height:46px;border-radius:8px;font-size:14px}
.tool-page .status{font-size:14px;color:#3f4852}
.tool-page .seo-section p{font-size:15px;line-height:1.95;color:#3e4750}

html[data-contrast="high"]{--fp-page:#fff;--fp-panel:#fff;--fp-text:#000;--fp-muted:#20252a;--fp-line:#4b535b;--fp-focus:#000}
html[data-contrast="high"] body{background:#fff;color:#000}
html[data-contrast="high"] .topbar,html[data-contrast="high"] .tool-layout,html[data-contrast="high"] .hero-card,html[data-contrast="high"] .simple-card,.tool-page html[data-contrast="high"]{background:#fff}
html[data-contrast="high"] .sidebar{background:#fff;border-color:#4b535b}
html[data-contrast="high"] .tool{color:#111;border:0!important}
html[data-contrast="high"] .tool.active{background:#fff;border:2px solid #111!important}
html[data-contrast="high"] .heading p,html[data-contrast="high"] .drop-sub,html[data-contrast="high"] .privacy,html[data-contrast="high"] .sub,html[data-contrast="high"] .result-size{color:#20252a}
html[data-contrast="high"] .dropzone{background:#fff;border-color:#000}
html[data-contrast="high"] .setting-card,html[data-contrast="high"] .queue.empty{background:#fff;border-color:#4b535b}
html[data-contrast="high"] .filepat-a11y__group,html[data-contrast="high"] .filepat-a11y__contrast{border-color:#111}
html[data-contrast="high"] .feature-card,html[data-contrast="high"] .office-card{background:#fff!important;border-color:#4b535b!important;color:#000}

@media(max-width:1050px){
  .tool-layout{grid-template-columns:232px minmax(0,1fr)}
  .panel{padding:30px 30px 36px}
}
@media(max-width:900px){
  .filepat-a11y{margin-left:0}
  .sidebar{position:static;max-height:none}
  .topbar,.tool-head{flex-wrap:wrap}
}
@media(max-width:760px){
  html{scroll-padding-top:76px}
  .filepat-a11y{width:100%;justify-content:flex-end;flex-wrap:wrap;margin-top:2px}
  .tool-layout{grid-template-columns:1fr}
  .sidebar{display:flex;gap:6px;overflow-x:auto;border-right:0;border-bottom:1px solid #cfd4da;padding:10px}
  .tools-label{display:none}
  .tool{flex:0 0 auto;width:auto;min-width:150px}
  .panel{padding:24px 18px 30px}
  .heading h1{font-size:30px}
  .heading p{font-size:13px}
  .dropzone{min-height:290px}
  .tool-main h1{font-size:32px}
  .lead{font-size:14px}
  .tool-head{align-items:flex-start}
  .tool-head .filepat-a11y{order:5;justify-content:flex-start}
}
@media(max-width:560px){
  .topbar{padding:8px 12px}
  .mainnav{width:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:2px}
  .filepat-a11y{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:1px}
  .filepat-a11y__label,.filepat-a11y__sub{font-size:9px}
  .filepat-a11y__contrast{font-size:9px}
  .dropzone{min-height:250px}
  .heading{display:block}
  .keys{display:inline-block;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* v9 evidence-based UX refinement
   Principles applied: scannable hierarchy, strong grouping, readable text,
   no decorative glow, large targets, visible focus, and no color-only cues. */

:root{
  --fp-bg:#f4f5f7;
  --fp-surface:#ffffff;
  --fp-text:#17191d;
  --fp-muted:#4a535d;
  --fp-soft:#eef1f4;
  --fp-line:#c8ced5;
  --fp-line-strong:#9da6b0;
}

html{font-size:16px;background:var(--fp-bg)}
body{
  font-family:"Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--fp-text);
  line-height:1.6;
  background:var(--fp-bg);
}

/* Remove the accidental full-width ad/iframe rule seen in the previous build. */
body>iframe{
  position:fixed!important;
  inset:auto auto 0 0!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  border:0!important;
  outline:0!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}

/* Calm header: no glass effects, no visual noise. */
.topbar{background:#fff;border-bottom:1px solid #d4d9de;backdrop-filter:none;box-shadow:none}
.mainnav{gap:10px}
.mainnav a{min-height:44px;padding:10px 12px;border-radius:8px;color:#37404a;font-size:13px}
.mainnav a:hover,.mainnav a:focus-visible{background:#f0f2f4;color:#111;text-decoration:none}
.lang-switch{min-height:38px}
.lang-switch button{min-width:36px;min-height:32px;font-size:11px}

/* Tool container: clear grouping instead of floating/glowing surfaces. */
.tool-layout{
  grid-template-columns:272px minmax(0,1fr);
  border:1px solid #bfc6cd;
  border-radius:12px;
  box-shadow:none;
  background:#fff;
}
.sidebar{
  padding:18px 14px;
  background:#f7f8fa;
  border-right:1px solid #c9cfd5;
}
.tools-label{padding:4px 10px 14px;color:#46515c;font-size:12px;letter-spacing:.12em}

/* Sidebar: no left-border accent; active state is a filled, high-contrast row. */
.tool{
  min-height:50px;
  margin:4px 0;
  padding:7px 10px;
  gap:12px;
  border:0!important;
  border-left:0!important;
  border-radius:9px;
  color:#34404b;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}
.tool:hover{background:#e9edf1;color:#111}
.tool.active{background:#1d2329;color:#fff}
.tool.active:hover{background:#1d2329;color:#fff}

/* File-like icons with a folded corner, not an abstract AI accent. */
.tool .ico{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1.5px solid #aab2ba;
  border-radius:6px;
  background:#fff;
  color:#3d4853;
  box-shadow:none;
  font:800 8px/1 Arial,sans-serif;
  overflow:hidden;
}
.tool .ico:before{
  content:"";
  position:absolute;
  right:-1px;
  top:-1px;
  width:11px;
  height:11px;
  background:#fff;
  border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  clip-path:polygon(0 0,100% 100%,0 100%);
  opacity:1;
}
.tool .ico:after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:9px;
  height:1px;
  background:currentColor;
  opacity:.32;
  box-shadow:0 -4px 0 currentColor,0 -8px 0 currentColor;
}
.tool.active .ico{background:#fff;color:var(--tool-accent,#1d2329);border-color:var(--tool-accent,#1d2329)}
.tool-link{display:flex}

/* Category identity: saturated but flat, no glow. */
.tool[data-tool="image-convert"],.tool[data-tool="compress"],.tool[data-tool="resize"],.tool-link[href*="image"]{--tool-accent:#1769aa}
.tool[data-tool="image-pdf"],.tool[data-tool="pdf-image"],.tool[data-tool="pdf-merge"],.tool[data-tool="pdf-split"],.tool-link[href*="pdf-"]{--tool-accent:#b71c1c}
.tool[data-tool="text-convert"],.tool-link[href*="csv"],.tool-link[href*="table-extract"]{--tool-accent:#1b7a45}
.tool[data-tool="zip"],.tool-link[href*="file-rename"],.tool-link[href*="file-organize"],.tool-link[href*="duplicate-finder"]{--tool-accent:#9a6500}
.tool-link[href*="qr"]{--tool-accent:#5a3b8f}
.tool-link[href*="transcribe"]{--tool-accent:#0d6f73}
.tool-link[href*="pdf-password"]{--tool-accent:#b71c1c}

/* Main work area: stronger hierarchy + more breathing room only where it helps comprehension. */
.panel{padding:34px 42px 44px}
.eyebrow{font-size:12px;color:#4d5964;letter-spacing:.12em}
.heading{margin-bottom:22px}
.heading h1{font-size:36px;letter-spacing:-.02em;line-height:1.25;color:#14181d}
.heading p{font-size:15px;line-height:1.75;color:#4c5661}
.keys{min-height:44px;padding:11px 13px;border:1px solid #c4cad0;border-radius:8px;background:#fff;color:#48535e;font-size:12px}

.dropzone{
  min-height:300px;
  border:2px dashed #7f8993;
  border-radius:12px;
  background:#f8f9fa;
  transition:background-color .12s,border-color .12s;
}
.dropzone:hover{background:#f1f3f5}
.dropzone.drag{background:#edf0f2;border-color:#2e3944}
.dropzone:focus{box-shadow:none;outline:3px solid #1d2329;outline-offset:3px}
.drop-title{font-size:19px}.drop-sub{font-size:14px;color:#4d5761}.pick{min-height:44px;padding:10px 18px;font-size:14px;border-radius:8px}

.setting-card{border:1px solid #bcc4cb;background:#f5f7f8;border-radius:10px;padding:16px}
.setting{font-size:13px;color:#35404b}
.setting input,.setting select{min-height:44px;border:1px solid #aeb7bf;border-radius:8px;font-size:14px;background:#fff}
.setting input:focus,.setting select:focus{border-color:#313a43;box-shadow:none;outline:3px solid #c7ccd1;outline-offset:1px}

.files-head{margin:24px 0 10px}.files-head>span{font-size:12px;color:#4a5560}.clear{min-height:40px;padding:8px 10px;font-size:12px;color:#39434d;border-radius:7px}.clear:hover{background:#eef1f3}
.queue.empty{min-height:92px;border:1px solid #c6cdd3;border-radius:10px}.queue.empty>div{min-height:90px;color:#53606b;font-size:13px}
.row{padding:11px 12px;border:1px solid #c1c8cf;border-radius:9px}.name,.result-name{font-size:14px}.sub,.result-size{font-size:12px;color:#58636e}
.remove{width:40px;height:40px;border-radius:7px;color:#4b5660}.remove:hover{background:#eef1f3;color:#111}

.actionbar{margin-top:22px;padding-top:18px;border-top:1px solid #c7cdd3}.privacy{font-size:12px;color:#4f5a65;line-height:1.7}.run{min-height:46px;padding:11px 20px;font-size:14px;border-radius:8px;background:#1d2329}.run:disabled{opacity:.4}.progress-top{font-size:12px}.progress-track{height:7px;background:#dde2e6}.progress-track i{background:var(--tool-page-accent,#1d2329)}
.notice{font-size:13px;line-height:1.7;border:1px solid #c7cdd3;background:#f1f3f5;color:#39434d}.notice.error{background:#fff1f1;border-color:#ce8e8e;color:#8f1111}

/* Remove every left-border accent in cards / panels. */
.feature-card,.pdf-card,.office-card,.tool,.hero-card,.simple-card{border-left:0!important}

/* Tool cards: recognition comes from icon + tint, not a decorative stripe. */
.feature-card{
  min-height:182px;
  padding:18px;
  border:1px solid #bfc6cd;
  border-radius:10px;
  background:#fff;
  box-shadow:none;
  transition:background-color .12s,border-color .12s,transform .12s;
}
.feature-card:hover{transform:translateY(-1px);box-shadow:none}
.feature-card:focus-visible{outline:3px solid #1d2329!important;outline-offset:3px}
.feature-card .use{color:#4b5660;font-size:13px;line-height:1.75}
.feature-card strong{font-size:17px;line-height:1.4}

/* Flat category colors: visible at a glance without neon/glow. */
.feature-card:has(.file-icon-IMG){border-color:#d7dce2;background:#fff}
.feature-card:has(.file-icon-IMG) .file-icon{border-color:#1769aa;color:#1769aa;background:#eaf3fb}
.feature-card:has(.file-icon-IMG) .tag{color:#1769aa}
.feature-card:has(.file-icon-IMG):hover{border-color:#c8cfd7;background:#fff}
.feature-card.pdf-card{border:1px solid #d7dce2;background:#fff}
.feature-card.pdf-card .file-icon{border:2px solid #b71c1c;color:#8e1111;background:#ffe9e9}
.feature-card.pdf-card .tag{color:#8e1111}
.feature-card.pdf-card:hover{border-color:#c8cfd7;background:#fff}
.feature-card:has(.file-icon-DATA){border-color:#d7dce2;background:#fff}
.feature-card:has(.file-icon-DATA) .file-icon{border-color:#1b7a45;color:#1b7a45;background:#eaf6ee}
.feature-card:has(.file-icon-DATA) .tag{color:#1b7a45}
.feature-card:has(.file-icon-ARCHIVE){border-color:#d7dce2;background:#fff}
.feature-card:has(.file-icon-ARCHIVE) .file-icon{border-color:#9a6500;color:#8a5800;background:#fff5dc}
.feature-card:has(.file-icon-ARCHIVE) .tag{color:#7a5000}
.feature-card:has(.file-icon-UTILITY){border-color:#d7dce2;background:#fff}
.feature-card:has(.file-icon-UTILITY) .file-icon{border-color:#5a3b8f;color:#5a3b8f;background:#f2edfa}
.feature-card:has(.file-icon-UTILITY) .tag{color:#5a3b8f}
.feature-card:has(.file-icon-OFFICE){border-color:#d7dce2;background:#fff}
.feature-card:has(.file-icon-OFFICE) .file-icon{border-color:#0d6f73;color:#0d6f73;background:#e9f5f5}
.feature-card:has(.file-icon-OFFICE) .tag{color:#0d6f73}

/* Scannable text: shorter measure and stronger headings. */
.directory{max-width:1180px}
.directory-section-head{margin-bottom:12px}
.directory-section h2{font-size:26px;line-height:1.35;color:#15191e}
.directory-section-head p{font-size:13px;line-height:1.7;color:#4e5863}
.directory-foot,.seo-content,.info-section{color:#1d2329}

/* All pointer targets meet a comfortable 44px target on primary actions. */
@media (pointer:coarse){
  .tool,.mainnav a,.lang-switch button,.filepat-a11y__btn,.filepat-a11y__contrast,.clear,.remove,.save{min-height:44px}
}

/* Small-screen layout: preserve the hierarchy, avoid tiny controls. */
@media(max-width:900px){
  .tool-layout{grid-template-columns:1fr}
  .sidebar{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px;border-right:0;border-bottom:1px solid #c9cfd5}
  .tool{width:auto;flex:0 0 auto;min-width:170px}
  .panel{padding:28px 26px 34px}
}
@media(max-width:620px){
  .topbar{padding:10px 12px}
  .mainnav a{font-size:12px;padding:9px 10px}
  .tool{min-width:158px;font-size:13px}
  .panel{padding:22px 15px 30px}
  .heading h1{font-size:28px}
  .heading p{font-size:14px}
  .dropzone{min-height:260px}
  .drop-title{font-size:18px}
  .setting input,.setting select{min-height:46px}
}

/* Active navigation uses category-tinted surfaces, not black bars. */
.tool.active{background:#e9edf1;color:#172027}
.tool.active .ico{background:#fff;color:var(--tool-accent,#1d2329);border-color:var(--tool-accent,#1d2329)}
.tool[data-tool="image-convert"].active,.tool[data-tool="compress"].active,.tool[data-tool="resize"].active{background:#eaf3fb}
.tool[data-tool="image-pdf"].active,.tool[data-tool="pdf-image"].active,.tool[data-tool="pdf-merge"].active,.tool[data-tool="pdf-split"].active{background:#faeaea}
.tool[data-tool="text-convert"].active{background:#eaf6ee}
.tool[data-tool="zip"].active{background:#fff4dd}
.tool-link[href*="qr"].active{background:#f2edfa}
.tool-link[href*="transcribe"].active{background:#e7f4f4}
.tool-link[href*="pdf-password"].active{background:#faeaea}
.tool-link[href*="file-rename"].active,.tool-link[href*="file-organize"].active,.tool-link[href*="duplicate-finder"].active{background:#e7f4f4}
.tool-link[href*="csv"].active,.tool-link[href*="table-extract"].active{background:#eaf6ee}


/* Mobile navigation drawer: navigation + accessibility controls live together behind a hamburger. */
.filepat-menu-toggle{display:none}
@media(max-width:760px){
  .topbar{position:sticky;top:0;z-index:100;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;min-height:58px;padding:9px 12px!important}
  .filepat-menu-toggle{
    display:grid;
    place-items:center;
    gap:4px;
    width:46px;
    height:46px;
    flex:0 0 46px;
    margin-left:auto;
    padding:10px;
    border:1px solid #c7cdd3;
    border-radius:9px;
    background:#fff;
    color:#1b2229;
  }
  .filepat-menu-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .15s ease,opacity .15s ease}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(2){opacity:0}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .topbar .mainnav{
    position:fixed;
    left:0;
    right:0;
    top:58px;
    z-index:99;
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start!important;
    gap:0!important;
    padding:12px;
    max-height:calc(100dvh - 58px);
    overflow:auto;
    background:#fff;
    border-top:1px solid #d9dee3;
    border-bottom:1px solid #d9dee3;
    box-shadow:0 10px 24px rgba(20,26,34,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  }
  html.filepat-menu-open .topbar .mainnav{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .topbar .mainnav>a{min-height:48px;width:100%;padding:12px 10px!important;border-bottom:1px solid #e4e7ea;font-size:14px!important;color:#252c33!important}
  .topbar .lang-switch{margin:12px 0 4px!important;align-self:flex-start}
  .topbar .filepat-a11y{
    width:100%;
    margin:12px 0 0!important;
    padding:14px 0 2px;
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid #d9dee3;
  }
  .topbar .filepat-a11y__label{width:100%;font-size:12px;color:#3e4852;font-weight:800}
  .topbar .filepat-a11y__group{display:flex;align-items:center;gap:4px}
  .topbar .filepat-a11y__sub{font-size:12px!important;color:#4d5862!important;padding:0 7px 0 0}
  .topbar .filepat-a11y__btn{min-width:48px!important;min-height:46px!important;border:1px solid #c3cad1!important;border-radius:8px!important;font-size:15px!important;background:#fff!important;color:#20272e!important}
  .topbar .filepat-a11y__btn.active{background:#1e252b!important;color:#fff!important;border-color:#1e252b!important}
  .topbar .filepat-a11y__contrast{min-height:46px!important;padding:10px 12px!important;border:1px solid #c3cad1!important;border-radius:8px!important;font-size:12px!important;background:#fff!important;color:#20272e!important}
  .topbar .filepat-a11y__btn:focus-visible,.topbar .filepat-a11y__contrast:focus-visible,.filepat-menu-toggle:focus-visible{outline:3px solid #1d5f91;outline-offset:2px}
}
@media(max-width:420px){
  .topbar .mainnav{top:58px}
  .topbar .filepat-a11y{align-items:stretch}
  .topbar .filepat-a11y__group{width:100%;}
  .topbar .filepat-a11y__btn{flex:1;}
  .topbar .filepat-a11y__contrast{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .filepat-menu-toggle span,.topbar .mainnav{transition:none!important}
}
/* v16: stable mobile menu icon/close button */
@media(max-width:760px){
  .filepat-menu-toggle{
    position:relative;
    display:block;
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    padding:0;
    overflow:hidden;
  }
  .filepat-menu-toggle span{
    position:absolute;
    left:50%;
    top:50%;
    width:22px;
    height:2px;
    margin:0;
    transform-origin:center;
    transition:transform .15s ease,opacity .15s ease;
  }
  .filepat-menu-toggle span:nth-child(1){transform:translate(-50%,-7px)}
  .filepat-menu-toggle span:nth-child(2){transform:translate(-50%,-1px)}
  .filepat-menu-toggle span:nth-child(3){transform:translate(-50%,5px)}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(1){transform:translate(-50%,-1px) rotate(45deg)}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(2){opacity:0;transform:translate(-50%,-1px) scaleX(.6)}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(3){transform:translate(-50%,-1px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
  .filepat-menu-toggle span{transition:none!important}
}


/* Accessibility font scaling — applied to the actual tool directory/sidebar items,
   including links that open separate tool pages. */
html[data-font-scale="small"]{--fp-a11y-scale:.90}
html[data-font-scale="normal"]{--fp-a11y-scale:1}
html[data-font-scale="large"]{--fp-a11y-scale:1.20}

html[data-font-scale="small"] .sidebar .tool,
html[data-font-scale="normal"] .sidebar .tool,
html[data-font-scale="large"] .sidebar .tool{
  font-size:calc(14px * var(--fp-a11y-scale)) !important;
  line-height:1.4;
}
html[data-font-scale="small"] .sidebar .side-format,
html[data-font-scale="normal"] .sidebar .side-format,
html[data-font-scale="large"] .sidebar .side-format{
  font-size:calc(10px * var(--fp-a11y-scale)) !important;
}
html[data-font-scale="small"] .sidebar .tools-external-divider,
html[data-font-scale="normal"] .sidebar .tools-external-divider,
html[data-font-scale="large"] .sidebar .tools-external-divider{
  font-size:calc(11px * var(--fp-a11y-scale)) !important;
}
html[data-font-scale="large"] .sidebar .tool{min-height:56px}
html[data-font-scale="small"] .sidebar .tool{min-height:46px}

/* The screenshoted five new links are .tool-link elements, so they must receive
   the same font/contrast behavior as the original .tool buttons. */
html[data-font-scale="small"] .sidebar .tool-link,
html[data-font-scale="normal"] .sidebar .tool-link,
html[data-font-scale="large"] .sidebar .tool-link{
  font-size:calc(14px * var(--fp-a11y-scale)) !important;
}

/* High-contrast mode for both original buttons and separate-page links. */
html[data-contrast="high"] .sidebar .tool,
html[data-contrast="high"] .sidebar .tool-link{
  background:#fff !important;
  color:#000 !important;
  border:2px solid #111 !important;
}
html[data-contrast="high"] .sidebar .tool:hover,
html[data-contrast="high"] .sidebar .tool-link:hover,
html[data-contrast="high"] .sidebar .tool:focus-visible,
html[data-contrast="high"] .sidebar .tool-link:focus-visible{
  background:#000 !important;
  color:#fff !important;
}
html[data-contrast="high"] .sidebar .tool.active,
html[data-contrast="high"] .sidebar .tool-link.active{
  background:#000 !important;
  color:#fff !important;
}
html[data-contrast="high"] .sidebar .side-format,
html[data-contrast="high"] .sidebar .tools-external-divider{
  color:inherit !important;
}

/* Final QA: visually-hidden semantic content remains available to assistive technology. */
.fp-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (pointer:coarse){.filepat-language-switch button{min-width:40px;min-height:40px}.filepat-language-switch{min-height:44px}}
html,body{max-width:100%;}



/* ===== merged from /design-system.css ===== */
/* FilePat Design System — stable, warm Japanese, responsive-first */
:root{
  --fp-ink:#22201d;
  --fp-muted:#6f6a63;
  --fp-soft:#f4f0e8;
  --fp-paper:#fffdf8;
  --fp-line:#ddd6ca;
  --fp-line-strong:#c9c0b2;
  --fp-blue:#3f5d73;
  --fp-red:#a63a32;
  --fp-gold:#92733a;
  --fp-green:#52705a;
  --fp-shadow:0 8px 26px rgba(55,45,30,.07);
}
html{background:var(--fp-soft);scroll-behavior:smooth}
body{
  color:var(--fp-ink)!important;
  background:var(--fp-soft)!important;
  font-family:"Noto Sans JP","Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN",sans-serif!important;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit}
button,a,input,select,textarea{touch-action:manipulation}

/* Shared header */
.topbar{
  position:sticky!important;top:0;z-index:1000;
  min-height:64px!important;
  padding:8px clamp(14px,3vw,36px)!important;
  background:rgba(255,253,248,.96)!important;
  border-bottom:1px solid var(--fp-line)!important;
  box-shadow:0 1px 0 rgba(80,65,45,.03);
  backdrop-filter:blur(12px);
}
.brand{font-family:"Noto Sans JP",sans-serif!important;color:var(--fp-ink)!important;font-weight:700!important;letter-spacing:-.02em!important}
.logo{background:var(--fp-ink)!important;border-radius:6px!important}
.mainnav{gap:clamp(10px,2vw,22px)!important}
.mainnav a{color:#5e5851!important;font-weight:500!important;font-size:12px!important}
.mainnav a:hover{color:var(--fp-ink)!important}
.lang-switch{border-color:var(--fp-line)!important;background:#fffdf8!important}
.lang-switch button.active{background:var(--fp-ink)!important}

/* Landing / directory */
.directory{max-width:1200px!important;padding:24px clamp(12px,2.5vw,28px) 68px!important}
.filepat-ad-top{margin:0 auto 16px!important;min-height:0!important}
.feature-grid,.office-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
.feature-card{
  min-height:194px!important;
  padding:20px 19px 17px!important;
  border:1px solid var(--fp-line)!important;
  border-radius:10px!important;
  background:var(--fp-paper)!important;
  box-shadow:0 2px 8px rgba(65,53,36,.035)!important;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.feature-card:hover{transform:translateY(-1px)!important;border-color:#c9c0b2!important;box-shadow:var(--fp-shadow)!important}
.feature-top{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:12px!important;min-height:18px}
/* Text-only format marks */
.format-text,.side-format{
  display:inline-block!important;
  width:auto!important;height:auto!important;min-width:0!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important;outline:0!important;
  background:transparent!important;box-shadow:none!important;
  font-family:Arial,sans-serif!important;
  font-weight:800!important;line-height:1!important;
  letter-spacing:.04em!important;
}
.format-text{font-size:12px!important}.side-format{font-size:9px!important}
.format-text.format-img,.side-format.format-jpg{color:#496987!important}
.format-text.format-pdf,.side-format.format-pdf{color:var(--fp-red)!important}
.format-text.format-archive,.side-format.format-zip{color:var(--fp-gold)!important}
.format-text.format-data,.side-format.format-csv{color:#4f7258!important}
.format-text.format-office,.side-format.format-txt,.side-format.format-folder,.side-format.format-file{color:#5b6d72!important}
.format-text.format-utility,.side-format.format-qr,.side-format.format-html{color:#665a7d!important}
.feature-top .tag{color:#93897d!important;font-size:9px!important;font-weight:600!important;letter-spacing:.05em!important}
.feature-card strong{font-size:18px!important;line-height:1.5!important;letter-spacing:-.02em!important;color:#28231f!important}
.feature-card .use{padding-top:10px!important;color:#6b665e!important;font-size:12px!important;line-height:1.8!important}
.feature-card .go{padding-top:10px!important;color:#4b443d!important;font-size:11px!important;font-weight:700!important}
.feature-card:focus-visible{outline:2px solid #7c6b53!important;outline-offset:3px}
.directory-section{margin-bottom:40px!important}
.directory-section-head{margin-bottom:16px!important}
.directory-section-head h2{font-size:24px!important;line-height:1.4!important;letter-spacing:-.02em!important;color:var(--fp-ink)!important}
.directory-section-head p{color:#756e64!important;font-size:12px!important;line-height:1.8!important}
.office-card{border:1px solid var(--fp-line)!important;border-radius:10px!important;background:var(--fp-paper)!important;box-shadow:none!important}

/* Remove all legacy framed/paper icon decorations */
.file-icon,.file-icon::before,.file-icon::after,
.sidebar .ico,.sidebar .ico::before,.sidebar .ico::after,
.file-icon-stack::before,.file-icon-stack::after,
.feature-card .file-icon{display:none!important;content:none!important;border:0!important;box-shadow:none!important;background:transparent!important}
.feature-card:has(.format-text){border-color:var(--fp-line)!important}

/* Main app */
.page{max-width:1240px!important;padding:24px clamp(12px,2.5vw,28px) 64px!important}
.filepat-main-with-side-ad{display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:18px!important;align-items:start!important}
.tool-layout{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;border:1px solid var(--fp-line)!important;border-radius:12px!important;background:var(--fp-paper)!important;box-shadow:var(--fp-shadow)!important;overflow:hidden!important}
.sidebar{min-width:0!important;padding:18px 10px!important;background:#f8f4ec!important;border-right:1px solid var(--fp-line)!important}
.tools-label{color:#817769!important;font-size:9px!important;letter-spacing:.18em!important}
.tools-group-label{color:#5f584f!important;font-size:10px!important;font-weight:700!important;padding:2px 10px 5px!important}
.tools-group-note{color:#91897e!important;font-size:8.5px!important;line-height:1.55!important;padding:0 10px 9px!important}
.tool{
  min-width:0!important;width:100%!important;
  margin:1px 0!important;padding:9px 10px!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  border:0!important;border-radius:7px!important;background:transparent!important;
  color:#5f5a53!important;font-size:11px!important;font-weight:600!important;text-align:left!important;
  white-space:nowrap!important;overflow:hidden!important;
}
.tool:hover{background:#eee8de!important;color:var(--fp-ink)!important}
.tool.active{background:#2b2824!important;color:#fffdf8!important}
.sidebar .side-format{flex:0 0 auto!important}
.tools-external-divider{margin:9px 8px 6px!important;padding-top:10px!important;border-top:1px solid var(--fp-line)!important;color:#8c8377!important;font-size:8.5px!important}
.panel{min-width:0!important;padding:34px clamp(22px,4vw,42px) 38px!important;background:var(--fp-paper)!important}
.heading{gap:16px!important;margin-bottom:22px!important}
.eyebrow{color:#8b7d6b!important;font-size:9px!important;font-weight:800!important;letter-spacing:.16em!important}
.heading h1{font-size:clamp(25px,3vw,34px)!important;line-height:1.25!important;letter-spacing:-.025em!important;color:#2b2723!important}
.heading p{font-size:12px!important;line-height:1.8!important;color:#756f67!important}
.keys{border-color:var(--fp-line)!important;background:#f8f4ec!important;color:#81786d!important}
.dropzone{min-height:340px!important;border-color:#cfc5b7!important;border-radius:12px!important;background:#fcfaf5!important}
.dropzone:hover{background:#f8f3ea!important}
.dropzone.drag{border-color:#8d7651!important;background:#f4ede1!important}
.drop-plus{background:#eee6da!important;color:#756854!important;border-radius:10px!important}
.drop-title{font-size:15px!important}.drop-sub{font-size:10px!important;color:#91877b!important}
.pick,.run{background:#2b2824!important;color:#fffdf8!important;border-radius:7px!important}
.setting-card{border-color:var(--fp-line)!important;background:#f8f4ec!important}
.setting input,.setting select{border-color:#d4ccc0!important;background:#fffdf8!important}
.row,.result{border-color:var(--fp-line)!important;background:#fffdf8!important}
.actionbar{border-color:var(--fp-line)!important}
.info-section{max-width:1040px!important;margin-top:52px!important}
.section-head h2{color:var(--fp-ink)!important;font-size:25px!important}
.howto-list,.articles{gap:14px!important}
.howto-list>div,.articles article{border-color:var(--fp-line)!important;border-radius:10px!important;background:var(--fp-paper)!important;box-shadow:none!important}
.howto-list b{color:#927b57!important}
.howto-list p,.articles p,.faq details p{color:#686159!important}
.seo-content{color:var(--fp-ink)!important}
.seo-inner{border-top-color:var(--fp-line)!important}
.seo-content article{border-color:var(--fp-line)!important}

/* Standalone tool pages */
.tool-page{
  width:min(1080px,100%)!important;
  padding:0 clamp(14px,3vw,28px) 70px!important;
  margin:0 auto!important;
}
.tool-head{
  padding:15px 0!important;
  border-bottom:1px solid var(--fp-line)!important;
  background:rgba(255,253,248,.96)!important;
}
.tool-head .brand{font-size:16px!important}.tool-head .back{color:#6b6258!important}
.filekit-lang-switch{border-color:var(--fp-line)!important;background:#fffdf8!important}
.filekit-lang-switch button.active{background:#2b2824!important;color:#fff!important}
.tool-main{padding-top:30px!important}.tool-main h1{color:var(--fp-ink)!important;font-weight:700!important;line-height:1.3!important}
.lead{color:#676057!important;line-height:1.9!important}
.hero-card,.panel-card{border-color:var(--fp-line)!important;border-radius:10px!important;background:var(--fp-paper)!important;box-shadow:var(--fp-shadow)!important}
.tabs{gap:4px!important;border-bottom-color:var(--fp-line)!important}
.tabs button{color:#736b62!important;border-bottom-color:transparent!important}
.tabs button.active{color:var(--fp-ink)!important;border-bottom-color:#847052!important}
.field input,.field select,.field textarea{border-color:#d2c8bb!important;border-radius:7px!important;background:#fffdf8!important}
.btn{background:#2b2824!important;border-color:#2b2824!important;border-radius:7px!important}.btn.secondary{background:#fffdf8!important;color:#2b2824!important;border-color:#cfc5b7!important}
.drop{border-color:#cfc5b7!important;background:#fcfaf5!important;border-radius:10px!important}.drop.drag{border-color:#8d7651!important;background:#f5eee3!important}
.preview{border-color:var(--fp-line)!important;background:#fbf8f2!important;border-radius:10px!important}
.seo-section{border-top-color:var(--fp-line)!important}.faq details{border-color:var(--fp-line)!important}
.tool-footer{border-top-color:var(--fp-line)!important;color:#877e73!important}

/* Responsive breakpoints: deliberately earlier than the old layout */
@media (max-width:1120px){
  .feature-grid,.office-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .filepat-main-with-side-ad{grid-template-columns:minmax(0,1fr)!important}
  .filepat-side-ad{display:flex!important;justify-content:center!important;width:100%!important;min-width:0!important}
}
@media (max-width:920px){
  .feature-grid,.office-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tool-layout{grid-template-columns:1fr!important}
  .sidebar{
    display:flex!important;align-items:center!important;gap:4px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    padding:8px!important;border-right:0!important;border-bottom:1px solid var(--fp-line)!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;
  }
  .tools-label,.tools-group-label,.tools-group-note{display:none!important}
  .tool{flex:0 0 auto!important;width:auto!important;min-width:128px!important;max-width:185px!important;margin:0!important}
  .tools-external-divider{flex:0 0 auto!important;margin:0 3px!important;padding:0 9px!important;border-top:0!important;border-left:1px solid var(--fp-line)!important;height:28px!important;display:flex!important;align-items:center!important}
  .panel{padding:28px 24px 32px!important}
}
@media (max-width:680px){
  .topbar{min-height:56px!important;padding:7px 11px!important}
  .mainnav{gap:8px!important}.mainnav a{font-size:10px!important}.lang-switch button{min-width:28px!important;min-height:27px!important}
  .directory{padding:16px 10px 46px!important}
  .feature-grid,.office-grid{grid-template-columns:1fr!important;gap:9px!important}
  .feature-card{min-height:0!important;padding:15px!important;border-radius:9px!important}
  .feature-card strong{font-size:16px!important}.feature-card .use{font-size:11px!important;line-height:1.7!important}.feature-card .go{font-size:10px!important}
  .directory-section-head h2{font-size:21px!important}.directory-section-head p{font-size:10.5px!important}
  .page{padding:12px 7px 46px!important}
  .filepat-side-ad__inner{width:300px!important;max-width:100%!important;min-width:0!important}
  .panel{padding:23px 14px 28px!important}
  .heading{display:block!important}.keys{display:inline-block!important;margin-top:10px!important}
  .heading h1{font-size:23px!important}.dropzone{min-height:250px!important}
  .setting-card{grid-template-columns:1fr!important}
  .actionbar{flex-direction:column!important;align-items:stretch!important}.run{width:100%!important}
  .info-section{margin-top:42px!important}.section-head h2{font-size:21px!important}
  .howto-list,.articles{grid-template-columns:1fr!important}
  .tool-page{padding:0 12px 52px!important}
  .tool-head{gap:10px!important;flex-wrap:wrap!important}.tool-main{padding-top:24px!important}.tool-main h1{font-size:31px!important}.lead{font-size:13px!important}
  .hero-card,.panel-card{padding:14px!important}.grid-2{grid-template-columns:1fr!important}
  .actions{display:grid!important;grid-template-columns:1fr!important}.actions .btn{width:100%!important}
  .drop{min-height:200px!important;padding:32px 14px!important}.preview{min-height:190px!important}
  .filekit-lang-switch{margin-left:auto!important}
}
@media (max-width:420px){
  .brand{font-size:13px!important}.logo{width:26px!important;height:26px!important}
  .mainnav a{font-size:9px!important}.mainnav{gap:6px!important}
  .tool{min-width:118px!important;padding:8px!important;font-size:9px!important}
  .side-format{font-size:8px!important}
  .panel{padding-left:11px!important;padding-right:11px!important}
  .dropzone{min-height:225px!important}
  .tool-main h1{font-size:27px!important}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== FilePat editorial card + SEO polish ===== */
:root{
  --fp-paper-2:#fbf8f1;
  --fp-ink-2:#2a2723;
  --fp-subtle:#8b8175;
  --fp-red-2:#a8453c;
  --fp-blue-2:#4b6577;
  --fp-green-2:#55705a;
  --fp-gold-2:#987846;
  --fp-violet-2:#6b5a78;
}

/* Cards: crafted, quiet, no left accent */
.feature-grid,.office-grid{gap:18px!important}
.feature-card{
  position:relative!important;
  min-height:204px!important;
  padding:19px 18px 17px!important;
  border:1px solid #d8d1c6!important;
  border-radius:12px!important;
  background:#fffdf8!important;
  box-shadow:0 2px 0 rgba(74,59,42,.025), 0 9px 24px rgba(74,59,42,.045)!important;
  overflow:hidden!important;
  transform:none!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease!important;
}
.feature-card::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  right:13px!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#b8aea1!important;
  opacity:.8!important;
  box-shadow:none!important;
}
.feature-card:hover{
  transform:translateY(-3px)!important;
  border-color:#c5bbad!important;
  background:#fffefa!important;
  box-shadow:0 12px 28px rgba(74,59,42,.09)!important;
}
.feature-card:active{transform:translateY(-1px)!important}
.feature-card .feature-top{
  margin-bottom:13px!important;
  min-height:16px!important;
  padding-right:14px!important;
}
.feature-card .format-text{
  font-size:11px!important;
  letter-spacing:.09em!important;
  font-family:Arial,"Noto Sans JP",sans-serif!important;
}
.feature-card strong{
  display:block!important;
  margin:0!important;
  font-size:17px!important;
  line-height:1.55!important;
  letter-spacing:-.018em!important;
  color:#2a2723!important;
}
.feature-card .use{
  padding-top:9px!important;
  color:#6f685f!important;
  font-size:12px!important;
  line-height:1.78!important;
}
.feature-card .go{
  margin-top:12px!important;
  padding-top:10px!important;
  border-top:1px solid #eee8de!important;
  color:#695f54!important;
  font-size:10px!important;
  letter-spacing:.02em!important;
}
.feature-card:hover .go{color:#2a2723!important;text-decoration:none!important}
.feature-card.pdf-card{border-color:#dccdc6!important}
.feature-card.pdf-card::before{background:#b85a52!important}
.feature-card:has(.format-text.format-img)::before{background:var(--fp-blue-2)!important}
.feature-card:has(.format-text.format-data)::before{background:var(--fp-green-2)!important}
.feature-card:has(.format-text.format-archive)::before{background:var(--fp-gold-2)!important}
.feature-card:has(.format-text.format-office)::before{background:#607478!important}
.feature-card:has(.format-text.format-utility)::before{background:var(--fp-violet-2)!important}

/* Office cards get a little more editorial structure */
.office-card{
  position:relative!important;
  padding:20px 20px 19px!important;
  border:1px solid #d9d1c6!important;
  border-radius:12px!important;
  background:#fffdf8!important;
  box-shadow:0 6px 18px rgba(74,59,42,.04)!important;
}
.office-card h3{font-size:16px!important;line-height:1.5!important;color:#2a2723!important}
.office-card p{font-size:12px!important;line-height:1.85!important;color:#6f685f!important}

/* More readable navigation */
.sidebar .tool{border-radius:8px!important}
.sidebar .tool.active{box-shadow:inset 3px 0 0 rgba(255,253,248,.5)!important}
/* Keep the user's text-only sidebar; no icon boxes or decorative lines */
.sidebar .tool .ico{display:none!important}
.sidebar .tool .side-format{margin-right:8px!important;font-size:9px!important;min-width:auto!important}

/* SEO area: editorial guide instead of a long plain wall of text */
.seo-content{
  max-width:1120px!important;
  margin:54px auto 86px!important;
  padding:0 clamp(14px,3vw,28px)!important;
  color:var(--fp-ink-2)!important;
}
.seo-content .seo-inner{
  position:relative!important;
  padding:33px 0 0!important;
  border-top:1px solid #d8d0c4!important;
}
.seo-content .section-kicker{
  margin:0 0 8px!important;
  color:#8d7f70!important;
  font:800 10px/1.2 Arial,"Noto Sans JP",sans-serif!important;
  letter-spacing:.16em!important;
}
.seo-content h2{
  margin:0 0 11px!important;
  color:#2b2723!important;
  font-size:28px!important;
  line-height:1.4!important;
  letter-spacing:-.025em!important;
}
.seo-content .seo-inner>p:not(.section-kicker){
  max-width:780px!important;
  margin:0 0 22px!important;
  color:#6e675f!important;
  font-size:13px!important;
  line-height:1.95!important;
}
.seo-links{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0 0 26px!important;
}
.seo-links a{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  padding:6px 11px!important;
  border:1px solid #ddd4c8!important;
  border-radius:999px!important;
  background:#fffdf8!important;
  color:#5b544c!important;
  font-size:11px!important;
  line-height:1.2!important;
  text-decoration:none!important;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s!important;
}
.seo-links a::after{content:"↗";margin-left:6px;color:#9c9284;font-size:10px}
.seo-links a:hover{background:#f5efe5!important;border-color:#cfc3b4!important;color:#2b2723!important;transform:translateY(-1px)!important}
.seo-content article{
  position:relative!important;
  display:block!important;
  margin:0!important;
  padding:20px 21px 19px!important;
  border:1px solid #ded6ca!important;
  border-bottom:1px solid #ded6ca!important;
  border-radius:12px!important;
  background:#fffdf8!important;
  box-shadow:0 5px 16px rgba(74,59,42,.035)!important;
}
.seo-content .seo-inner>article + article{margin-top:12px!important}
.seo-content article h3{
  margin:0 0 8px!important;
  color:#2e2924!important;
  font-size:15px!important;
  line-height:1.55!important;
  letter-spacing:-.01em!important;
}
.seo-content article h3::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  margin:0 8px 2px 0;
  border-radius:50%;
  background:#b3a490;
}
.seo-content article p,
.seo-faq-text p{
  margin:0!important;
  color:#6d665e!important;
  font-size:12px!important;
  line-height:1.9!important;
}
.seo-faq-text{
  margin-top:18px!important;
  padding:22px!important;
  border:1px solid #d9d1c5!important;
  border-radius:12px!important;
  background:#f8f2e9!important;
}
.seo-faq-text h3{margin:0 0 12px!important;color:#2e2924!important;font-size:16px!important}
.seo-faq-text p + p{margin-top:9px!important}

/* Format guide gets a denser reading rhythm on larger screens */
#file-format-search .seo-inner>article{
  display:inline-block!important;
  vertical-align:top!important;
  width:calc(50% - 7px)!important;
  min-height:142px!important;
  margin-top:12px!important;
}
#file-format-search .seo-inner>article:nth-of-type(even){margin-left:10px!important}
#file-format-search .seo-inner>article + article{margin-top:12px!important}
#file-format-search .seo-inner>.seo-faq-text{display:block!important;width:100%!important;margin-top:18px!important}

/* Mobile: preserve hierarchy without turning cards into tiny text blocks */
@media(max-width:860px){
  .feature-grid,.office-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .seo-content h2{font-size:24px!important}
}
@media(max-width:640px){
  .feature-grid,.office-grid{grid-template-columns:1fr!important;gap:9px!important}
  .feature-card{min-height:0!important;padding:15px 14px 13px!important;border-radius:11px!important}
  .feature-card::before{top:10px!important;right:11px!important}
  .feature-card strong{font-size:15px!important;line-height:1.45!important}
  .feature-card .use{font-size:11px!important;line-height:1.68!important;padding-top:7px!important}
  .feature-card .go{margin-top:8px!important;padding-top:8px!important;font-size:10px!important}
  .office-card{padding:16px 15px!important}
  .seo-content{margin:42px auto 62px!important;padding:0 12px!important}
  .seo-content .seo-inner{padding-top:27px!important}
  .seo-content h2{font-size:22px!important;line-height:1.45!important}
  .seo-content .seo-inner>p:not(.section-kicker){font-size:12px!important;line-height:1.9!important}
  .seo-links{gap:6px!important;margin-bottom:19px!important}
  .seo-links a{font-size:10px!important;min-height:29px!important;padding:5px 9px!important}
  .seo-content article{padding:16px 15px!important;border-radius:10px!important}
  .seo-content article h3{font-size:14px!important}
  .seo-content article p,.seo-faq-text p{font-size:11px!important;line-height:1.85!important}
  #file-format-search .seo-inner>article{display:block!important;width:100%!important;margin:10px 0 0!important;min-height:0!important}
  #file-format-search .seo-inner>article:nth-of-type(even){margin-left:0!important}
  .seo-faq-text{padding:17px!important;border-radius:10px!important}
}
@media(max-width:420px){
  .feature-card{padding:13px 13px 12px!important}
  .feature-card::before{width:5px!important;height:5px!important}
  .seo-content h2{font-size:20px!important}
  .seo-links a{max-width:100%;white-space:normal}
}

/* FilePat refined Japanese sidebar — text stays unchanged, presentation becomes calmer and more crafted. */
.sidebar{
  position:relative!important;
  padding:22px 12px 16px!important;
  background:
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
    #f7f1e7!important;
  border-right:1px solid #ddd2c3!important;
}
.sidebar::before{
  content:""!important;
  display:block!important;
  height:1px!important;
  margin:0 10px 17px!important;
  background:linear-gradient(90deg,transparent,#cfc1ae 18%,#cfc1ae 82%,transparent)!important;
}
.tools-label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 10px 12px!important;
  color:#706353!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
}
.tools-label::after{
  content:""!important;
  width:28px!important;
  height:1px!important;
  background:#b79a7d!important;
  opacity:.75!important;
}
.tools-group-label{
  position:relative!important;
  margin:0 8px!important;
  padding:9px 10px 5px 14px!important;
  color:#3f3a34!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.55!important;
}
.tools-group-label::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:13px!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#a04d43!important;
}
.tools-group-note{
  margin:0 8px 10px!important;
  padding:0 10px 11px 14px!important;
  color:#92877a!important;
  font-size:8.5px!important;
  line-height:1.7!important;
}
.sidebar .tool{
  position:relative!important;
  min-height:39px!important;
  margin:2px 2px!important;
  padding:8px 10px 8px 12px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:#5a544d!important;
  font-size:11px!important;
  font-weight:600!important;
  transition:background-color .16s ease,color .16s ease,transform .16s ease!important;
}
.sidebar .tool::before{
  content:""!important;
  flex:0 0 4px!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:#c8bba9!important;
  transition:background-color .16s ease,transform .16s ease!important;
}
.sidebar .tool:hover{
  background:#eee5d8!important;
  color:#2d2925!important;
  transform:translateX(2px)!important;
}
.sidebar .tool:hover::before{
  background:#a56a58!important;
  transform:scale(1.35)!important;
}
.sidebar .tool.active{
  background:#2d3d59!important;
  color:#fffaf2!important;
  box-shadow:0 4px 12px rgba(47,45,42,.09)!important;
}
.sidebar .tool.active::before{
  background:#d7aa75!important;
  transform:scale(1.25)!important;
}
.sidebar .side-format{
  flex:0 0 auto!important;
  min-width:34px!important;
  margin-right:1px!important;
  color:#887c6c!important;
  font:700 8px/1 "Arial",sans-serif!important;
  letter-spacing:.06em!important;
  text-align:center!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
}
.sidebar .tool.active .side-format{color:#d9c9b1!important}
.tools-external-divider{
  position:relative!important;
  margin:13px 8px 7px!important;
  padding:13px 10px 7px!important;
  border-top:1px solid #d9cdbd!important;
  color:#8d8071!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:8px!important;
  line-height:1.5!important;
}
.tools-external-divider::before{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  top:-4px!important;
  width:7px!important;
  height:7px!important;
  background:#f7f1e7!important;
  border:1px solid #b99a7c!important;
  transform:rotate(45deg)!important;
}
.sidebar .tool-link::after{
  content:"↗"!important;
  margin-left:auto!important;
  color:#aa9a87!important;
  font-size:10px!important;
  opacity:.75!important;
}
.sidebar .tool-link:hover::after{color:#7f4b40!important;opacity:1!important}

@media(max-width:760px){
  .sidebar{
    padding:10px 9px 9px!important;
    background:#f7f1e7!important;
    border-right:0!important;
    border-bottom:1px solid #ddd2c3!important;
  }
  .sidebar::before{display:none!important}
  .tools-label,.tools-group-label,.tools-group-note,.tools-external-divider{display:none!important}
  .sidebar .tool{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:136px!important;
    min-height:36px!important;
    margin:0!important;
    padding:7px 10px!important;
    border:1px solid #dfd5c7!important;
    border-radius:6px!important;
    background:#fbf7f0!important;
    gap:8px!important;
  }
  .sidebar .tool.active{
    border-color:#2d3d59!important;
    background:#2d3d59!important;
  }
  .sidebar .tool:hover{transform:none!important}
  .sidebar .tool-link::after{display:none!important}
}

/* FilePat Japanese washi background — background only; layout untouched */
html{background:#f3efe6}
body{
  background-color:#f3efe6!important;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(128,104,72,.055) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 70%, rgba(128,104,72,.04) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(120,102,78,.018) 0, rgba(120,102,78,.018) 1px, transparent 1px, transparent 5px),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(236,226,209,.18));
  background-size: 28px 28px, 36px 36px, auto, auto;
  background-attachment: fixed;
}

/* ================================================================
   FilePat identity theme — visual layer only
   Based on the supplied FilePat mark: ink black + electric blue.
   No content, URLs, JavaScript, or interaction rules are changed.
   ================================================================ */
:root{
  --fp-brand-ink:#111318;
  --fp-brand-blue:#246BFF;
  --fp-brand-blue-strong:#1658e8;
  --fp-brand-blue-soft:#f1f5ff;
  --fp-surface:#ffffff;
  --fp-surface-soft:#f7f9fc;
  --fp-border:#dfe4eb;
  --fp-border-strong:#cbd3df;
  --fp-text:#15181d;
  --fp-muted:#66707d;
  --fp-muted-2:#87909c;
}

html,body{background:var(--fp-surface-soft)!important;color:var(--fp-text)!important}
body{
  font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Header / brand */
.topbar{
  min-height:72px!important;
  padding:0 clamp(18px,4vw,44px)!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid var(--fp-border)!important;
  box-shadow:0 1px 0 rgba(17,19,24,.02)!important;
  backdrop-filter:none!important;
}
.brand{
  font-family:Inter,"Noto Sans JP",sans-serif!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.045em!important;
  color:var(--fp-brand-ink)!important;
}
.logo{
  width:34px!important;height:34px!important;
  margin-right:10px!important;
  border-radius:9px!important;
  background-color:transparent!important;
  background-image:url("./assets/filepat-mark.png")!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  font-size:0!important;
  color:transparent!important;
}
.mainnav{gap:8px!important}
.mainnav>a{
  min-height:38px!important;
  padding:0 11px!important;
  border-radius:8px!important;
  color:#59636f!important;
  font-size:11px!important;
  font-weight:650!important;
}
.mainnav>a:hover{color:var(--fp-brand-ink)!important;background:#f3f6fa!important}
.lang-switch{
  margin-left:4px!important;
  border:1px solid var(--fp-border)!important;
  border-radius:9px!important;
  background:#fff!important;
}
.lang-switch button{border-radius:6px!important;color:#7b8591!important}
.lang-switch button.active{background:var(--fp-brand-ink)!important;color:#fff!important}

/* Directory / homepage */
.directory{
  max-width:1220px!important;
  padding:46px clamp(16px,3vw,30px) 76px!important;
}
.directory-section{margin:0 0 54px!important}
.directory-section-head{
  align-items:flex-end!important;
  margin-bottom:18px!important;
  padding-bottom:13px!important;
  border-bottom:1px solid var(--fp-border)!important;
}
.directory-section-head h2{
  color:var(--fp-brand-ink)!important;
  font-size:24px!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
.directory-section-head p{
  color:var(--fp-muted)!important;
  font-size:11px!important;
  line-height:1.75!important;
}
.feature-grid{gap:12px!important}
.feature-card{
  position:relative!important;
  min-height:192px!important;
  padding:19px 19px 17px!important;
  border:1px solid var(--fp-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:none!important;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease!important;
}
.feature-card::after{
  content:""!important;
  position:absolute!important;
  top:17px!important;
  right:17px!important;
  width:14px!important;
  height:4px!important;
  border-radius:1px!important;
  background:var(--fp-brand-blue)!important;
  transform:skewX(-28deg)!important;
  opacity:.95!important;
}
.feature-card:hover{
  transform:translateY(-2px)!important;
  border-color:#aebbd0!important;
  background:var(--fp-brand-blue-soft)!important;
  box-shadow:0 9px 22px rgba(18,33,58,.055)!important;
}
.feature-card:focus-visible{outline:3px solid rgba(36,107,255,.28)!important;outline-offset:3px!important}
.feature-top{margin-bottom:17px!important}
.format-text{
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.11em!important;
}
.format-text.format-img,.format-text.format-data,.format-text.format-office,.format-text.format-utility,.format-text.format-archive{color:var(--fp-brand-ink)!important}
.format-text.format-pdf{color:#b4232c!important}
.feature-card strong{
  color:var(--fp-text)!important;
  font-size:17px!important;
  font-weight:750!important;
  letter-spacing:-.025em!important;
}
.feature-card .use{
  color:var(--fp-muted)!important;
  font-size:12px!important;
  line-height:1.75!important;
}
.feature-card .go{
  color:var(--fp-brand-blue-strong)!important;
  font-size:11px!important;
  font-weight:750!important;
  letter-spacing:.01em!important;
}
.feature-card:hover .go{text-decoration:none!important}

/* Editorial tool list */
.new-tools-editorial{border-top-color:var(--fp-border)!important}
.new-tools-editorial a{border-bottom-color:var(--fp-border)!important}
.new-tools-editorial a:nth-child(odd){border-right-color:var(--fp-border)!important}
.new-tools-editorial b{color:var(--fp-brand-blue-strong)!important;font-weight:800!important}
.new-tools-editorial strong{color:var(--fp-text)!important}
.new-tools-editorial em{color:var(--fp-muted)!important}
.new-tools-editorial i{color:var(--fp-brand-blue-strong)!important;font-weight:700!important}
.new-tools-editorial a:hover{background:var(--fp-brand-blue-soft)!important}

/* Office / supporting cards */
.office-card,.simple-card,.howto-list>div,.articles article{
  border-color:var(--fp-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.office-card:hover,.simple-card:hover,.howto-list>div:hover,.articles article:hover{border-color:#c8d0dc!important}
.office-card h3,.simple-card h1,.simple-card h2,.howto-list strong,.articles h3{color:var(--fp-text)!important}
.office-card p,.simple-card p,.howto-list p,.articles p{color:var(--fp-muted)!important}

/* Main file work surface */
.page{max-width:1240px!important;padding:28px clamp(10px,2.5vw,26px) 70px!important}
.tool-layout{
  border:1px solid var(--fp-border)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 12px 32px rgba(17,31,50,.045)!important;
}
.sidebar{
  padding:16px 10px!important;
  background:#f5f7fa!important;
  border-right:1px solid var(--fp-border)!important;
}
.tools-label{color:#8a95a2!important}
.tools-group-label{color:#5d6874!important}
.tools-group-note{color:#929ca7!important}
.tool{
  margin:2px 0!important;
  padding:10px!important;
  border-radius:9px!important;
  color:#65707c!important;
}
.tool:hover{background:#eaf0f7!important;color:var(--fp-brand-ink)!important}
.tool.active{background:var(--fp-brand-ink)!important;color:#fff!important;box-shadow:none!important}
.tool.active .ico{background:#2a2e35!important;color:#fff!important}
.panel{background:#fff!important}
.heading h1{color:var(--fp-text)!important;font-weight:800!important}
.heading p{color:var(--fp-muted)!important}
.keys{border-color:var(--fp-border)!important;background:#f7f9fc!important;color:#7a8591!important}
.dropzone{
  min-height:340px!important;
  border:1px dashed #b9c5d4!important;
  border-radius:13px!important;
  background:#fbfcfe!important;
}
.dropzone:hover{background:#f5f8fc!important;border-color:#91a3ba!important}
.dropzone.drag{border-color:var(--fp-brand-blue)!important;background:var(--fp-brand-blue-soft)!important}
.dropzone:focus{box-shadow:0 0 0 4px rgba(36,107,255,.12)!important}
.drop-plus{background:var(--fp-brand-ink)!important;color:#fff!important;border-radius:10px!important}
.pick,.run{background:var(--fp-brand-ink)!important;color:#fff!important;border-radius:9px!important}
.pick:hover,.run:hover{background:var(--fp-brand-blue-strong)!important}
.setting-card{border-color:var(--fp-border)!important;background:#f7f9fc!important}
.setting input,.setting select{border-color:#d5dce5!important;background:#fff!important}
.setting input:focus,.setting select:focus{border-color:var(--fp-brand-blue)!important;box-shadow:0 0 0 3px rgba(36,107,255,.10)!important}
.row,.result{border-color:var(--fp-border)!important;background:#fff!important}
.remove:hover{background:#eef3f8!important;color:var(--fp-brand-ink)!important}
.actionbar{border-top-color:var(--fp-border)!important}
.progress-track{background:#e8edf3!important}
.progress-track i{background:var(--fp-brand-blue)!important}
.notice{background:#f4f7fb!important;color:#677482!important}
.notice.error{background:#fff1f2!important;color:#9f3139!important}

/* Standalone tools / content pages */
.tool-head{background:#fff!important;border-bottom-color:var(--fp-border)!important}
.tool-head .back{color:#66717d!important}
.tool-main h1{color:var(--fp-text)!important;font-weight:800!important}
.lead{color:var(--fp-muted)!important}
.hero-card,.panel-card{
  border-color:var(--fp-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(17,31,50,.04)!important;
}
.tabs{border-bottom-color:var(--fp-border)!important}
.tabs button{color:#74808c!important}
.tabs button.active{color:var(--fp-brand-ink)!important;border-bottom-color:var(--fp-brand-blue)!important}
.field input,.field select,.field textarea{border-color:#d5dce5!important;background:#fff!important}
.btn{background:var(--fp-brand-ink)!important;border-color:var(--fp-brand-ink)!important;border-radius:8px!important}
.btn:hover{background:var(--fp-brand-blue-strong)!important;border-color:var(--fp-brand-blue-strong)!important}
.btn.secondary{background:#fff!important;color:var(--fp-brand-ink)!important;border-color:#cbd4df!important}
.drop{border-color:#b9c5d4!important;background:#fbfcfe!important;border-radius:11px!important}
.drop.drag{border-color:var(--fp-brand-blue)!important;background:var(--fp-brand-blue-soft)!important}
.preview{border-color:var(--fp-border)!important;background:#f8fafc!important;border-radius:11px!important}
.seo-section{border-top-color:var(--fp-border)!important}
.faq details{border-color:var(--fp-border)!important}

/* Footer */
.footer-wrap{max-width:1220px!important;padding:0 clamp(16px,3vw,30px) 28px!important}
.footer-wrap footer{border-top-color:var(--fp-border)!important;color:#7e8995!important}
.footer-brand strong{color:var(--fp-text)!important}
.footer-brand p{color:#8a95a1!important}
.footer-links b{color:#8a95a1!important}
.footer-links a:hover,.back-link:hover{color:var(--fp-brand-blue-strong)!important}

/* Keep language variants on the same identity system */
html[lang="en"] body{background:var(--fp-surface-soft)!important;color:var(--fp-text)!important}
html[lang="en"] .topbar{background:rgba(255,255,255,.98)!important;border-bottom-color:var(--fp-border)!important}
html[lang="en"] .feature-card{border-color:var(--fp-border)!important;background:#fff!important}
html[lang="en"] .feature-card:hover{border-color:#aebbd0!important;background:var(--fp-brand-blue-soft)!important}
html[lang="en"] .pick,html[lang="en"] .run{background:var(--fp-brand-ink)!important}

/* Accessibility: visible keyboard focus, no motion when reduced motion is requested. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(36,107,255,.28)!important;
  outline-offset:3px!important;
}
@media(prefers-reduced-motion:reduce){
  .feature-card,.tool,.new-tools-editorial a,.pick,.run,.btn{transition:none!important}
  .feature-card:hover{transform:none!important}
}

@media(max-width:920px){
  .topbar{min-height:64px!important}
  .mainnav>a{padding:0 8px!important}
}
@media(max-width:680px){
  .topbar{padding:0 12px!important}
  .brand{font-size:15px!important}
  .logo{width:31px!important;height:31px!important;margin-right:8px!important}
  .mainnav{gap:2px!important}
  .mainnav>a{font-size:10px!important;padding:0 6px!important}
  .directory{padding-top:28px!important}
  .directory-section-head{display:block!important;padding-bottom:11px!important}
  .directory-section-head p{margin-top:7px!important}
  .feature-card{min-height:0!important;padding:16px!important}
  .feature-card::after{top:14px!important;right:14px!important}
}
@media(max-width:420px){
  .topbar{min-height:58px!important}
  .mainnav>a{font-size:9px!important}
  .lang-switch button{min-width:27px!important;min-height:26px!important}
}



/* ===== merged from /filepat-japanese-editorial-v2.css ===== */
/* FilePat — Japanese modern editorial v2
   Intent: readable first, Japanese atmosphere second, no heavy decoration. */
:root{
  --jp-ink:#282621;
  --jp-muted:#716b61;
  --jp-paper:#fcfaf4;
  --jp-paper-deep:#f5f0e5;
  --jp-rule:#d9d1c3;
  --jp-rule-dark:#bcae9a;
  --jp-indigo:#365a68;
  --jp-vermilion:#9c3b2f;
  --jp-gold:#9b7a43;
  --jp-green:#5a6d5a;
}
html,body{background:var(--jp-paper)!important;color:var(--jp-ink)!important}
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif!important;letter-spacing:.01em}
h1,h2,h3,.heading h1,.section-head h2,.directory-section-head h2,.tool-main h1{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
}

/* Header: quiet and useful, no hero/marketing treatment. */
.topbar{
  background:rgba(252,250,244,.97)!important;
  border-bottom:1px solid var(--jp-rule)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.brand{font-family:"Noto Serif JP","Yu Mincho",serif!important;font-weight:700!important;color:var(--jp-ink)!important}
.logo{background:var(--jp-indigo)!important;border-radius:50%!important}
.mainnav a{color:#625d55!important;font-size:12px!important}
.mainnav a:hover{color:var(--jp-vermilion)!important}
.lang-switch{border-color:var(--jp-rule)!important;background:transparent!important}
.lang-switch button.active{background:var(--jp-indigo)!important;color:#fff!important}

/* Home/directory: first section is allowed to be cards. */
.directory{max-width:1160px!important;padding:24px clamp(14px,3vw,30px) 72px!important}
.directory-section{margin-bottom:58px!important}
.directory-section-head{display:block!important;margin-bottom:18px!important;padding-bottom:12px!important;border-bottom:1px solid var(--jp-rule)!important}
.directory-section-head h2{font-size:clamp(22px,2vw,28px)!important;line-height:1.45!important;margin:0!important;color:var(--jp-ink)!important}
.directory-section-head p{margin:7px 0 0!important;color:var(--jp-muted)!important;font-size:12px!important;line-height:1.9!important}

/* First selection: refined cards, not generic SaaS tiles. */
#tools .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#tools .feature-card{
  min-height:184px!important;
  padding:21px 20px 17px!important;
  border:1px solid var(--jp-rule)!important;
  border-radius:4px!important;
  background:rgba(255,253,248,.82)!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:hidden!important;
}
#tools .feature-card::after{
  content:""!important;
  position:absolute!important;
  left:16px!important;right:16px!important;bottom:10px!important;
  height:1px!important;background:linear-gradient(90deg,transparent,var(--jp-rule),transparent)!important;
  opacity:.75!important;
}
#tools .feature-card:hover{transform:translateY(-2px)!important;border-color:var(--jp-rule-dark)!important;background:#fffdf8!important;box-shadow:0 7px 22px rgba(75,60,40,.07)!important}
#tools .feature-top{margin-bottom:13px!important;align-items:baseline!important}
#tools .format-text{
  font:800 10px/1 Arial,sans-serif!important;letter-spacing:.09em!important;
  color:var(--jp-indigo)!important;
}
#tools .format-text.format-pdf{color:var(--jp-vermilion)!important}
#tools .format-text.format-archive{color:var(--jp-gold)!important}
#tools .format-text.format-data{color:var(--jp-green)!important}
#tools .format-text.format-office{color:#4f6f74!important}
#tools .feature-card strong{font-size:17px!important;line-height:1.55!important;color:var(--jp-ink)!important}
#tools .feature-card .use{padding-top:9px!important;color:#6b665e!important;font-size:11.5px!important;line-height:1.8!important}
#tools .feature-card .go{margin-top:9px!important;padding-top:7px!important;color:var(--jp-indigo)!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.02em!important}
#tools .feature-card:hover .go{text-decoration:none!important;color:var(--jp-vermilion)!important}

/* Remaining sections: editorial rows, not card forests. */
#office .office{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}
#office .office-card{
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  padding:6px 0 18px!important;border-bottom:1px solid var(--jp-rule)!important;
}
#office .office-card h3{font-size:18px!important;margin:0 0 8px!important;color:var(--jp-ink)!important}
#office .office-card p{margin:0!important;color:#6d675f!important;font-size:12px!important;line-height:1.95!important}

#office-tools .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
#office-tools .feature-card,
#formats .feature-card{
  min-height:auto!important;height:auto!important;padding:17px 8px 18px 0!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  border-bottom:1px solid var(--jp-rule)!important;
}
#office-tools .feature-card:nth-child(odd),#formats .feature-card:nth-child(odd){padding-right:30px!important}
#office-tools .feature-card:nth-child(even),#formats .feature-card:nth-child(even){padding-left:30px!important;border-left:1px solid var(--jp-rule)!important}
#office-tools .feature-card:hover,#formats .feature-card:hover{transform:none!important;background:transparent!important;box-shadow:none!important;border-color:var(--jp-rule)!important}
#office-tools .feature-card::after,#formats .feature-card::after{display:none!important}
#office-tools .feature-card strong,#formats .feature-card strong{font-size:16px!important;line-height:1.6!important}
#office-tools .feature-card .use,#formats .feature-card .use{padding-top:7px!important;font-size:11.5px!important;color:#6e675f!important}
#office-tools .feature-card .go{padding-top:6px!important;color:var(--jp-indigo)!important}

#formats{margin-bottom:34px!important}
#formats .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#formats .feature-card:nth-child(odd),#formats .feature-card:nth-child(even){padding-left:0!important;padding-right:22px!important;border-left:0!important}
#formats .feature-card + .feature-card{padding-left:22px!important;border-left:1px solid var(--jp-rule)!important}
#formats .feature-card strong{font-size:15px!important}

/* Section headings get a tiny Japanese editorial mark, not a decorative banner. */
.directory-section-head h2::before{
  content:"";display:inline-block;width:18px;height:2px;margin:0 9px 7px 0;
  background:var(--jp-vermilion);vertical-align:middle;opacity:.85;
}

/* Tool pages: retain cards only for the actual tool workspace. */
.tool-page{max-width:1060px!important}
.tool-main h1{font-size:clamp(27px,4vw,38px)!important;color:var(--jp-ink)!important}
.hero-card{border-color:var(--jp-rule)!important;border-radius:4px!important;background:var(--jp-paper)!important;box-shadow:none!important}
.panel-card{border-color:var(--jp-rule)!important;border-radius:4px!important;background:#fffdf8!important;box-shadow:0 3px 15px rgba(75,60,40,.05)!important}
.tool-main .lead{font-size:12px!important;color:#6f685f!important;line-height:1.95!important}

/* SEO / information areas: magazine-like hierarchy, not nested boxes. */
.info-section{max-width:1020px!important;margin:58px auto 0!important}
.section-head{margin-bottom:24px!important}
.section-head h2{font-size:24px!important;line-height:1.5!important;margin:0!important}
.howto-list,.articles{display:block!important}
.howto-list>div,.articles article,.seo-content article{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:22px 0!important;border-top:1px solid var(--jp-rule)!important}
.howto-list>div:last-child,.articles article:last-child{border-bottom:1px solid var(--jp-rule)!important}
.howto-list b{font-family:"Noto Serif JP",serif!important;color:var(--jp-vermilion)!important;font-size:15px!important}
.howto-list p,.articles p,.faq details p{font-size:12px!important;line-height:2!important;color:#68625a!important}
.seo-content{max-width:980px!important;color:var(--jp-ink)!important}
.seo-inner{border-top:1px solid var(--jp-rule)!important}

/* Compact sidebar labels, still plain text. */
.sidebar{background:#f8f3e9!important;border-right:1px solid var(--jp-rule)!important}
.tool{border-radius:3px!important;font-size:11px!important}
.tool:hover{background:#ece5d8!important}
.tool.active{background:var(--jp-indigo)!important;color:#fffdf8!important}

/* Responsive. */
@media(max-width:980px){
  #tools .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #formats .feature-grid{grid-template-columns:1fr!important}
  #formats .feature-card + .feature-card{padding-left:0!important;border-left:0!important}
  #office .office{grid-template-columns:1fr!important;gap:0!important}
}
@media(max-width:760px){
  .directory{padding:18px 13px 48px!important}
  #tools .feature-grid{grid-template-columns:1fr!important;gap:8px!important}
  #tools .feature-card{min-height:0!important;padding:17px 16px 15px!important}
  #tools .feature-card strong{font-size:16px!important}
  #office-tools .feature-grid{grid-template-columns:1fr!important}
  #office-tools .feature-card,
  #office-tools .feature-card:nth-child(odd),
  #office-tools .feature-card:nth-child(even){padding:15px 0!important;border-left:0!important}
  #formats .feature-card,
  #formats .feature-card:nth-child(odd),
  #formats .feature-card:nth-child(even),
  #formats .feature-card + .feature-card{padding:15px 0!important;border-left:0!important}
  .directory-section{margin-bottom:44px!important}
  .directory-section-head{padding-bottom:10px!important;margin-bottom:12px!important}
  .directory-section-head h2{font-size:21px!important}
  .directory-section-head p{font-size:11px!important;line-height:1.8!important}
}
@media(prefers-reduced-motion:reduce){#tools .feature-card{transition:none!important}#tools .feature-card:hover{transform:none!important}}

/* =========================================================
   FilePat mobile layout lock — prevents sidebar/title overlap
   ========================================================= */
@media (max-width: 920px){
  #tools.tool-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #tools.tool-layout > .sidebar{
    grid-column:1!important;
    grid-row:1!important;
    position:static!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    float:none!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    transform:none!important;
    z-index:2!important;
  }
  #tools.tool-layout > .panel{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    top:auto!important;
    margin:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    transform:none!important;
    z-index:1!important;
  }
  #tools .sidebar + .panel .heading{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    align-items:flex-start!important;
    margin:0 0 22px!important;
    padding-top:0!important;
  }
}

@media (max-width: 760px){
  #tools.tool-layout{
    border-radius:12px!important;
  }
  #tools.tool-layout > .sidebar{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:8px!important;
    gap:6px!important;
    border-right:0!important;
    border-bottom:1px solid #d9cfbf!important;
  }
  #tools.tool-layout > .sidebar::-webkit-scrollbar{display:none!important}
  #tools.tool-layout > .sidebar .tool{
    position:relative!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:132px!important;
    min-height:36px!important;
    margin:0!important;
    padding:7px 10px!important;
    white-space:nowrap!important;
  }
  #tools.tool-layout > .panel{
    padding:22px 14px 28px!important;
  }
  #tools .sidebar + .panel .heading{
    display:block!important;
    clear:both!important;
    overflow:visible!important;
  }
  #tools .sidebar + .panel .heading > div:first-child{
    min-width:0!important;
    width:100%!important;
  }
  #tools .sidebar + .panel .heading .eyebrow{
    display:block!important;
    position:static!important;
    margin:0 0 6px!important;
  }
  #tools .sidebar + .panel .heading h1{
    display:block!important;
    position:static!important;
    visibility:visible!important;
    opacity:1!important;
    margin:0 0 6px!important;
    max-width:100%!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  #tools .sidebar + .panel .heading p{
    display:block!important;
    position:static!important;
    max-width:100%!important;
  }
  #tools .sidebar + .panel .keys{
    display:inline-block!important;
    margin-top:9px!important;
    max-width:100%!important;
    white-space:normal!important;
  }
}

@media (max-width: 420px){
  #tools.tool-layout > .sidebar .tool{
    min-width:120px!important;
    min-height:35px!important;
    padding:7px 9px!important;
    font-size:10px!important;
  }
  #tools.tool-layout > .panel{
    padding:20px 11px 26px!important;
  }
  #tools .sidebar + .panel .heading h1{
    font-size:23px!important;
    line-height:1.35!important;
  }
}

/* =========================================================
   FilePat Japanese Modern Editorial v3
   Concept: modern Japanese paper / stationery / printed matter.
   No glossy SaaS treatment, no glass, no neon, no oversized cards.
   ========================================================= */
:root{
  --fp-paper:#f5f1e8;
  --fp-paper-light:#fbf8f1;
  --fp-paper-deep:#ebe4d6;
  --fp-ink:#272522;
  --fp-ink-soft:#4d4942;
  --fp-muted:#756f65;
  --fp-rule:#d4ccbd;
  --fp-rule-dark:#b7aa96;
  --fp-indigo:#294e5b;
  --fp-indigo-dark:#1f3d47;
  --fp-vermilion:#9a3d31;
  --fp-green:#5e6d5c;
  --fp-brown:#806b52;
  --fp-focus:#7b5d2f;
}

html,body{
  background:var(--fp-paper)!important;
  color:var(--fp-ink)!important;
}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif!important;
  letter-spacing:.02em!important;
  background-color:var(--fp-paper)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238b7b62' stroke-opacity='.05' stroke-width='.6'%3E%3Cpath d='M0 18H120M0 67H120M18 0V120M94 0V120'/%3E%3C/g%3E%3Cg fill='%238b7b62' fill-opacity='.035'%3E%3Ccircle cx='32' cy='34' r='.7'/%3E%3Ccircle cx='74' cy='91' r='.55'/%3E%3Ccircle cx='108' cy='49' r='.5'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Global paper / type rules */
h1,h2,h3,h4,.heading h1,.section-head h2,.directory-section-head h2,.tool-main h1{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif!important;
  color:var(--fp-ink)!important;
  font-weight:600!important;
}

a{color:inherit}
button,input,select,textarea{border-radius:3px!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--fp-focus)!important;
  outline-offset:2px!important;
}

/* Header: like a well-made Japanese stationery label. */
.topbar{
  min-height:66px!important;
  padding:0 26px!important;
  background:rgba(251,248,241,.98)!important;
  border-bottom:1px solid var(--fp-rule)!important;
  box-shadow:0 1px 0 rgba(93,76,54,.035)!important;
  backdrop-filter:none!important;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;height:2px;
  background:var(--fp-paper-deep);
  pointer-events:none;
}
.brand{
  font-family:"Noto Serif JP","Yu Mincho",serif!important;
  font-size:17px!important;
  font-weight:600!important;
  letter-spacing:.04em!important;
  color:var(--fp-ink)!important;
}
.logo{
  width:30px!important;height:30px!important;
  margin-right:9px!important;
  border-radius:2px!important;
  background:var(--fp-indigo)!important;
  color:#fbf8f1!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:12px!important;
  box-shadow:none!important;
  border:1px solid var(--fp-indigo-dark)!important;
}
.mainnav{gap:18px!important}
.mainnav a{
  color:var(--fp-ink-soft)!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.03em!important;
}
.mainnav a:hover{color:var(--fp-vermilion)!important}
.lang-switch{
  padding:2px!important;
  border:1px solid var(--fp-rule)!important;
  border-radius:3px!important;
  background:var(--fp-paper-light)!important;
}
.lang-switch button{
  min-width:31px!important;
  min-height:27px!important;
  border-radius:2px!important;
  color:var(--fp-muted)!important;
  font-size:9px!important;
}
.lang-switch button.active{background:var(--fp-indigo)!important;color:#fff!important}

/* Directory: printed catalogue, not SaaS dashboard. */
.directory{
  max-width:1160px!important;
  padding:34px clamp(15px,3vw,34px) 82px!important;
}
.directory-section{margin-bottom:62px!important}
.directory-section-head{
  margin-bottom:0!important;
  padding:0 0 14px!important;
  border-bottom:2px solid var(--fp-ink)!important;
}
.directory-section-head h2{
  margin:0!important;
  font-size:clamp(22px,2.2vw,29px)!important;
  line-height:1.4!important;
  letter-spacing:.04em!important;
}
.directory-section-head p{
  margin:8px 0 0!important;
  color:var(--fp-muted)!important;
  font-size:12px!important;
  line-height:1.9!important;
}
.directory-section-head h2::before{
  width:6px!important;height:26px!important;
  margin:0 12px 1px 0!important;
  background:var(--fp-vermilion)!important;
  opacity:1!important;
}

/* Main tool index: a catalogue grid with rules instead of boxes. */
#tools .feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid var(--fp-rule)!important;
}
#tools .feature-card{
  min-height:0!important;
  padding:22px 22px 20px 18px!important;
  border:0!important;
  border-bottom:1px solid var(--fp-rule)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  position:relative!important;
}
#tools .feature-card:nth-child(odd){border-right:1px solid var(--fp-rule)!important;padding-right:24px!important}
#tools .feature-card:nth-child(even){padding-left:24px!important}
#tools .feature-card::before{
  content:"";
  position:absolute;
  top:22px;left:0;
  width:3px;height:38px;
  background:var(--fp-indigo);
}
#tools .feature-card.pdf-card::before{background:var(--fp-vermilion)}
#tools .feature-card:hover{
  transform:none!important;
  border-color:var(--fp-rule)!important;
  background:#faf6ee!important;
  box-shadow:none!important;
}
#tools .feature-card::after{display:none!important}
#tools .feature-top{margin-bottom:12px!important}
#tools .format-text{
  font:700 10px/1 "Noto Sans JP",sans-serif!important;
  letter-spacing:.18em!important;
  color:var(--fp-indigo)!important;
}
#tools .format-text.format-pdf{color:var(--fp-vermilion)!important}
#tools .format-text.format-archive{color:var(--fp-brown)!important}
#tools .format-text.format-data{color:var(--fp-green)!important}
#tools .format-text.format-office{color:#5b6f74!important}
#tools .feature-card strong{
  display:block!important;
  font-family:"Noto Serif JP","Yu Mincho",serif!important;
  font-size:17px!important;
  line-height:1.6!important;
  font-weight:600!important;
  color:var(--fp-ink)!important;
}
#tools .feature-card .use{
  display:block!important;
  padding-top:7px!important;
  color:var(--fp-muted)!important;
  font-size:11.5px!important;
  line-height:1.9!important;
}
#tools .feature-card .go{
  display:inline-block!important;
  margin-top:10px!important;
  padding-top:0!important;
  color:var(--fp-indigo)!important;
  font-size:10.5px!important;
  font-weight:700!important;
  border-bottom:1px solid transparent!important;
}
#tools .feature-card:hover .go{color:var(--fp-vermilion)!important;border-color:currentColor!important}

/* Secondary office section: newspaper-like rows. */
#office .office{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
#office .office-card{
  padding:20px 24px 19px 0!important;
  border-bottom:1px solid var(--fp-rule)!important;
  border-radius:0!important;
  background:transparent!important;
}
#office .office-card:nth-child(even){padding-left:24px!important;border-left:1px solid var(--fp-rule)!important}
#office .office-card h3{
  margin:0 0 8px!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:17px!important;
  font-weight:600!important;
}
#office .office-card p{font-size:11.5px!important;line-height:1.95!important;color:var(--fp-muted)!important}

#office-tools .feature-grid,#formats .feature-grid{border-top:1px solid var(--fp-rule)!important}
#office-tools .feature-card,#formats .feature-card{
  padding:18px 22px 18px 0!important;
  border:0!important;
  border-bottom:1px solid var(--fp-rule)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#office-tools .feature-card:nth-child(even),#formats .feature-card:nth-child(even){padding-left:22px!important;border-left:1px solid var(--fp-rule)!important}
#office-tools .feature-card:hover,#formats .feature-card:hover{background:#faf6ee!important;transform:none!important;box-shadow:none!important}

/* Actual tool workspace: like a carefully printed work sheet. */
.page{max-width:1220px!important;padding:28px 20px 68px!important}
.tool-layout{
  background:var(--fp-paper-light)!important;
  border:1px solid var(--fp-rule)!important;
  border-radius:4px!important;
  box-shadow:0 5px 18px rgba(74,61,43,.045)!important;
  overflow:hidden!important;
}
.sidebar{
  padding:17px 12px!important;
  background:#f0eadf!important;
  border-right:1px solid var(--fp-rule)!important;
}
.tools-label{
  color:var(--fp-vermilion)!important;
  font-family:"Noto Serif JP",serif!important;
  font-size:11px!important;
  letter-spacing:.12em!important;
}
.tool{
  margin:0 0 2px!important;
  padding:9px 8px!important;
  border-radius:2px!important;
  color:var(--fp-ink-soft)!important;
  font-size:11px!important;
  font-weight:600!important;
}
.tool:hover{background:#e7dfd2!important;color:var(--fp-ink)!important}
.tool.active{background:var(--fp-indigo)!important;color:#fffdf7!important}

.panel{
  padding:34px 38px 38px!important;
  background:#fffdf8!important;
}
.heading{
  margin-bottom:24px!important;
  padding-bottom:17px!important;
  border-bottom:1px solid var(--fp-rule)!important;
}
.eyebrow{
  color:var(--fp-vermilion)!important;
  font-size:9px!important;
  letter-spacing:.2em!important;
  font-weight:800!important;
}
.heading h1{
  margin:7px 0 6px!important;
  font-size:clamp(27px,3.2vw,34px)!important;
  letter-spacing:.02em!important;
}
.heading p{color:var(--fp-muted)!important;font-size:11px!important;line-height:1.8!important}
.keys{
  border:1px solid var(--fp-rule)!important;
  border-radius:2px!important;
  background:#f7f2e8!important;
  color:var(--fp-muted)!important;
}

.dropzone{
  min-height:330px!important;
  border:1px dashed var(--fp-rule-dark)!important;
  border-radius:3px!important;
  background:#fbf8f1!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)!important;
}
.dropzone:hover{background:#f8f3e9!important;border-color:#a8977f!important}
.dropzone.drag{border-color:var(--fp-indigo)!important;background:#f3eee4!important}
.dropzone:focus{box-shadow:0 0 0 3px rgba(41,78,91,.13)!important}
.drop-plus{
  width:46px!important;height:46px!important;
  border-radius:2px!important;
  background:#ece4d5!important;
  color:var(--fp-indigo)!important;
  border:1px solid var(--fp-rule)!important;
}
.drop-title{font-family:"Noto Serif JP",serif!important;font-size:15px!important;font-weight:600!important}
.drop-sub{color:var(--fp-muted)!important}
.pick,.run{
  border-radius:3px!important;
  background:var(--fp-indigo)!important;
  color:#fffdf8!important;
  border:1px solid var(--fp-indigo-dark)!important;
  box-shadow:none!important;
}
.pick:hover,.run:hover:not(:disabled){background:var(--fp-indigo-dark)!important}

.setting-card{
  padding:14px!important;
  border:1px solid var(--fp-rule)!important;
  border-radius:3px!important;
  background:#f6f0e5!important;
}
.setting input,.setting select{
  border:1px solid var(--fp-rule)!important;
  border-radius:2px!important;
  background:#fffdf8!important;
}
.setting input:focus,.setting select:focus{border-color:var(--fp-indigo)!important;box-shadow:0 0 0 3px rgba(41,78,91,.08)!important}

.files-head{border-bottom:1px solid var(--fp-rule)!important;padding-bottom:7px!important}
.files-head>span{color:var(--fp-vermilion)!important;letter-spacing:.14em!important}
.clear{color:var(--fp-muted)!important}
.row,.result{
  border:0!important;
  border-bottom:1px solid var(--fp-rule)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:10px 4px!important;
}
.thumb{border-radius:2px!important;background:#eee7dc!important;border:1px solid var(--fp-rule)!important}
.remove{border-radius:2px!important}
.remove:hover{background:#eee6da!important}
.actionbar{border-top:1px solid var(--fp-rule)!important}
.privacy{color:var(--fp-muted)!important}
.progress-track{height:4px!important;border-radius:0!important;background:#e7dfd2!important}
.progress-track i{background:var(--fp-indigo)!important}
.save{border-radius:2px!important;background:#e7dfd2!important;border:1px solid var(--fp-rule)!important}
.notice{border-radius:2px!important;background:#f1ebdf!important;color:var(--fp-ink-soft)!important;border-left:3px solid var(--fp-indigo)!important}
.notice.error{background:#f7ece8!important;color:#78372e!important;border-left-color:var(--fp-vermilion)!important}

/* Editorial information sections */
.info-section,.seo-content{max-width:1040px!important}
.info-section{margin-top:64px!important}
.section-head{padding-bottom:11px!important;border-bottom:2px solid var(--fp-ink)!important;margin-bottom:0!important}
.section-head h2{font-size:23px!important;letter-spacing:.04em!important}
.howto-list>div,.articles article,.seo-content article{
  padding:20px 0!important;
  border-top:0!important;
  border-bottom:1px solid var(--fp-rule)!important;
}
.howto-list b{color:var(--fp-vermilion)!important;font-family:"Noto Serif JP",serif!important}
.howto-list p,.articles p,.faq details p{font-size:12px!important;line-height:2!important;color:var(--fp-muted)!important}
.faq details{border-top:0!important;border-bottom:1px solid var(--fp-rule)!important;padding:17px 0!important}
.faq summary{font-family:"Noto Serif JP",serif!important;font-weight:600!important;color:var(--fp-ink)!important}
.faq summary::after{color:var(--fp-vermilion)!important}

.seo-content{padding:0 10px!important;color:var(--fp-ink)!important}
.seo-inner{padding-top:34px!important;border-top:2px solid var(--fp-ink)!important}
.seo-content .section-kicker{color:var(--fp-vermilion)!important;letter-spacing:.16em!important}
.seo-content h2{font-size:25px!important;letter-spacing:.03em!important}
.seo-links{border-top:1px solid var(--fp-rule)!important;border-bottom:1px solid var(--fp-rule)!important}
.seo-links a{color:var(--fp-indigo)!important}

/* Dedicated SEO / article pages */
.seo-page{background:var(--fp-paper)!important}
.seo-header{
  background:rgba(251,248,241,.98)!important;
  border-bottom:1px solid var(--fp-rule)!important;
  box-shadow:none!important;
}
.seo-header .brand{font-family:"Noto Serif JP",serif!important}
.seo-header .back{color:var(--fp-indigo)!important}
.seo-main{max-width:920px!important}
.seo-main h1{font-size:clamp(30px,5vw,44px)!important;line-height:1.4!important;letter-spacing:.015em!important}
.seo-main .lead{color:var(--fp-muted)!important;line-height:2!important}
.seo-section{border-top:1px solid var(--fp-rule)!important}
.seo-section h2{font-family:"Noto Serif JP",serif!important}
.seo-footer{border-top:1px solid var(--fp-rule)!important;background:transparent!important;color:var(--fp-muted)!important}

/* Ads live inside reserved, paper-coloured space; never look like part of controls. */
.ad-container,.filepat-ad-top,.filepat-side-ad{background:transparent!important}
.ad-container{border:0!important}
.filepat-side-ad__inner{border:1px solid var(--fp-rule)!important;background:#f1ebdf!important;border-radius:2px!important}

/* Small file-format labels: public-sign clarity, not colourful app icons. */
.side-format,.file-format-side{font-family:"Noto Sans JP",sans-serif!important;font-weight:800!important;letter-spacing:.08em!important}

/* Mobile: preserve the paper hierarchy and eliminate horizontal overflow. */
@media(max-width:980px){
  .topbar{padding:0 18px!important}
  #office .office{grid-template-columns:1fr!important}
  #office .office-card,#office .office-card:nth-child(even){padding-left:0!important;padding-right:0!important;border-left:0!important}
  #office-tools .feature-grid,#formats .feature-grid{grid-template-columns:1fr!important}
  #office-tools .feature-card,#office-tools .feature-card:nth-child(even),#formats .feature-card,#formats .feature-card:nth-child(even){padding-left:0!important;padding-right:0!important;border-left:0!important}
}
@media(max-width:760px){
  .topbar{min-height:62px!important;padding:0 13px!important}
  .mainnav{gap:8px!important}
  .mainnav a:nth-child(2){display:none!important}
  .brand{font-size:16px!important}
  .directory{padding:24px 13px 54px!important}
  #tools .feature-grid{grid-template-columns:1fr!important}
  #tools .feature-card,#tools .feature-card:nth-child(odd),#tools .feature-card:nth-child(even){padding:17px 14px 16px 14px!important;border-right:0!important}
  #tools .feature-card::before{left:0;top:18px;height:32px;width:3px}
  .page{padding:18px 10px 52px!important}
  .panel{padding:23px 14px 28px!important}
  .heading h1{font-size:26px!important}
  .heading{padding-bottom:14px!important}
  .dropzone{min-height:260px!important}
  .actionbar{align-items:flex-start!important;flex-direction:column!important}
  .run{width:100%!important;min-height:44px!important}
  .pick{min-height:42px!important;padding:10px 17px!important}
  .info-section{margin-top:48px!important}
  .section-head h2{font-size:21px!important}
}
@media(max-width:360px){
  .mainnav a:first-child{display:none!important}
  .lang-switch button{min-width:29px!important}
  .heading h1{font-size:24px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* =========================================================
   FilePat Responsive Safety Layer v4
   Layout-only rules: do not alter tool processing logic.
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
pre,code{max-width:100%;overflow:auto}

/* Header: never force the brand, nav and language switch outside the viewport. */
@media (max-width: 900px){
  .topbar{flex-wrap:wrap;min-height:58px;padding:8px 14px!important;gap:7px 12px}
  .brand{min-width:0}
  .mainnav{flex:1 1 auto;min-width:0;justify-content:flex-end;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mainnav::-webkit-scrollbar{display:none}
}
@media (max-width: 560px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .brand{max-width:55vw;overflow:hidden;text-overflow:ellipsis}
  .mainnav{grid-column:1 / -1;justify-content:flex-start;width:100%;padding-bottom:2px}
}

/* Tool pages: keep every interactive region inside the viewport. */
.filepat-runtime,.runtime-panel,.runtime-top,.runtime-drop,.runtime-settings,.runtime-actionbar,.runtime-results,.runtime-queue{min-width:0;max-width:100%}
.runtime-top>div:first-child{min-width:0}
.runtime-top h2,.runtime-desc,.runtime-note{overflow-wrap:anywhere}
.runtime-note{max-width:42%;}
.runtime-drop{width:100%;}
.runtime-drop-content{max-width:100%;}
.runtime-drop-sub{max-width:min(100%,34rem)}
.runtime-settings .setting-card{min-width:0}
.runtime-settings .setting-card>*{min-width:0}
.runtime-settings input,.runtime-settings select{max-width:100%;min-width:0}
.runtime-files-head,.runtime-actionbar{min-width:0}
.runtime-privacy{min-width:0;overflow-wrap:anywhere}
.runtime-results .result{min-width:0}
.runtime-results .result>*,.runtime-results .result-info{min-width:0;max-width:100%}
.runtime-results .result-name{overflow-wrap:anywhere;word-break:break-word}
.runtime-results a{max-width:100%;}

/* Ads must never widen the document on narrow phones. */
.ad-container,.filepat-ad-tool-mid,[class*="admax"],.admax-slot{max-width:100%!important;overflow:hidden!important}
.filepat-ad-tool-mid>div{width:min(320px,100%)!important;max-width:100%!important;min-width:0!important}

/* File lists: names may be long, controls stay tappable. */
.runtime-queue .row,.runtime-queue .queue-row{min-width:0;max-width:100%}
.runtime-queue .meta,.runtime-queue .result-info{min-width:0;max-width:100%}
.runtime-queue .name,.runtime-queue .sub{overflow-wrap:anywhere;word-break:break-word}
.runtime-queue .remove{flex:0 0 40px;min-width:40px;min-height:40px}

/* The actual primary action remains reachable on touch devices. */
.runtime-run,.runtime-pick,.pick,.run{min-height:44px}

@media (max-width: 700px){
  .page{padding-left:10px!important;padding-right:10px!important}
  .panel{padding-left:16px!important;padding-right:16px!important}
  .runtime-panel{padding:14px!important}
  .runtime-top{gap:10px}
  .runtime-note{max-width:none;white-space:normal}
  .runtime-drop{min-height:180px;padding:18px 12px}
  .runtime-actionbar{grid-template-columns:1fr}
  .runtime-privacy{font-size:11px}
  .runtime-run{width:100%}
  .runtime-results .result{align-items:stretch}
  .runtime-results a{width:100%;justify-content:center}
}

@media (max-width: 420px){
  .page{padding-left:7px!important;padding-right:7px!important}
  .panel{padding-left:10px!important;padding-right:10px!important}
  .runtime-panel{padding:11px!important}
  .runtime-top h2{font-size:21px!important;line-height:1.45!important}
  .runtime-desc{font-size:11px!important}
  .runtime-drop{min-height:170px;padding:16px 10px}
  .runtime-drop-title{font-size:14px}
  .runtime-drop-sub{font-size:11px;line-height:1.7}
  .runtime-pick{width:100%;max-width:260px}
  .runtime-settings .setting-card{grid-template-columns:1fr!important}
  .runtime-files-head{align-items:flex-start}
  .runtime-clear{min-height:40px}
}

@media (max-width: 340px){
  .brand{max-width:48vw;font-size:14px!important}
  .mainnav a{font-size:9px!important}
  .page{padding-left:5px!important;padding-right:5px!important}
  .runtime-panel{padding:9px!important}
  .runtime-top h2{font-size:20px!important}
  .runtime-drop{min-height:155px}
}

/* Avoid layout jumps from mobile browser text autosizing. */
@media (max-width: 700px){
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}

/* Japanese atmosphere: background only. Keep all layout, panels and spacing unchanged. */
html, body{
  background-color:#f3eee3!important;
}
body{
  background-image:
    radial-gradient(circle at 18% 24%, rgba(82,66,48,.10) 0 0.65px, transparent 1.2px),
    radial-gradient(circle at 72% 66%, rgba(82,66,48,.075) 0 0.6px, transparent 1.2px),
    repeating-linear-gradient(30deg, rgba(93,78,60,.028) 0, rgba(93,78,60,.028) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(150deg, rgba(93,78,60,.028) 0, rgba(93,78,60,.028) 1px, transparent 1px, transparent 18px),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(226,215,195,.14))!important;
  background-size:34px 34px, 41px 41px, 28px 28px, 28px 28px, auto!important;
  background-attachment:fixed!important;
}



/* ===== merged from /filepat-brand-theme.css ===== */
/* FilePat Brand UI v3 — visual-only layer
   Visual language derived from the supplied FilePat mark: ink / white / electric blue.
   No content, routing, JavaScript, file-processing, analytics, or SEO behavior is changed. */
:root{
  --fp-brand-ink:#111318;
  --fp-brand-ink-2:#1b1e24;
  --fp-brand-blue:#1f6bff;
  --fp-brand-blue-2:#0f56e8;
  --fp-brand-blue-soft:#eef4ff;
  --fp-brand-bg:#f7f8fa;
  --fp-brand-paper:#fff;
  --fp-brand-line:#e2e5ea;
  --fp-brand-line-strong:#cbd1d9;
  --fp-brand-text:#17191d;
  --fp-brand-muted:#68707b;
  --fp-brand-muted-2:#8a929d;
  --fp-brand-focus:rgba(31,107,255,.22);
}

html{background:var(--fp-brand-bg)!important;scroll-behavior:smooth}
body{
  background:var(--fp-brand-bg)!important;
  color:var(--fp-brand-text)!important;
  font-family:Inter,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:0!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}

/* ---------- Shared header: quiet, structural, logo-first ---------- */
.topbar{
  position:sticky!important;top:0!important;z-index:1000!important;
  min-height:70px!important;
  padding:0 clamp(16px,3vw,40px)!important;
  display:flex!important;align-items:center!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--fp-brand-line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
}
.brand{
  display:inline-flex!important;align-items:center!important;
  gap:10px!important;color:var(--fp-brand-ink)!important;
  font-family:Inter,"Noto Sans JP",sans-serif!important;
  font-size:18px!important;font-weight:800!important;
  letter-spacing:-.045em!important;
}
.logo{
  width:36px!important;height:36px!important;min-width:36px!important;
  margin:0!important;border:0!important;border-radius:9px!important;
  background-color:transparent!important;
  background-image:url("./assets/filepat-mark.png")!important;
  background-position:center!important;background-repeat:no-repeat!important;
  background-size:contain!important;color:transparent!important;font-size:0!important;
}
.mainnav{gap:2px!important;align-items:center!important}
.mainnav>a{
  min-height:38px!important;padding:0 11px!important;
  border-radius:7px!important;color:#646d78!important;
  font-size:11px!important;font-weight:650!important;
  text-decoration:none!important;display:inline-flex!important;align-items:center!important;
}
.mainnav>a:hover{color:var(--fp-brand-ink)!important;background:#f3f6fa!important}
.mainnav>a:focus-visible,
.brand:focus-visible,
.lang-switch button:focus-visible,
.filekit-lang-switch button:focus-visible{outline:3px solid var(--fp-brand-focus)!important;outline-offset:2px!important}
.lang-switch,.filekit-lang-switch{
  border:1px solid var(--fp-brand-line)!important;border-radius:8px!important;
  background:#fff!important;box-shadow:none!important;
}
.lang-switch button,.filekit-lang-switch button{
  border-radius:6px!important;color:#7b838e!important;background:transparent!important;
}
.lang-switch button.active,.filekit-lang-switch button.active{
  background:var(--fp-brand-ink)!important;color:#fff!important;
}

/* Small blue slash — directly echoes the supplied mark, used as a restrained brand signature. */
.directory-section-head h2::after,
.section-head h2::after{
  content:""!important;display:inline-block!important;
  width:16px!important;height:4px!important;margin-left:10px!important;
  vertical-align:middle!important;background:var(--fp-brand-blue)!important;
  transform:skewX(-28deg) translateY(-2px)!important;border:0!important;
}

/* ---------- Home / directory: editorial tool index, not a pile of cards ---------- */
.directory{
  width:100%!important;max-width:1240px!important;margin:0 auto!important;
  padding:32px clamp(16px,3vw,32px) 76px!important;
}
.directory-section{margin-bottom:54px!important}
.directory-section-head{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  gap:28px!important;flex-wrap:wrap!important;
  padding:0 0 14px!important;margin:0 0 0!important;
  border-bottom:1px solid var(--fp-brand-line)!important;
}
.directory-section-head h2{
  margin:0!important;color:var(--fp-brand-ink)!important;
  font-size:25px!important;font-weight:800!important;
  letter-spacing:-.035em!important;line-height:1.25!important;
}
.directory-section-head p{margin:0!important;max-width:650px!important;color:var(--fp-brand-muted)!important;line-height:1.7!important;font-size:12px!important}

.feature-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 38px!important;width:100%!important;
  border-top:0!important;
  counter-reset:fp-tool!important;
}
.feature-card{
  counter-increment:fp-tool!important;
  position:relative!important;display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  align-items:start!important;gap:4px 18px!important;
  min-width:0!important;min-height:150px!important;height:auto!important;
  padding:22px 2px 20px!important;margin:0!important;
  border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;
  border-radius:0!important;background:transparent!important;
  box-shadow:none!important;transform:none!important;overflow:visible!important;
  color:inherit!important;text-decoration:none!important;
  transition:background-color .14s ease,padding .14s ease!important;
}
.feature-card::before{
  content:counter(fp-tool,decimal-leading-zero)!important;
  grid-column:1!important;grid-row:1 / span 3!important;
  display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;
  padding-top:1px!important;
  color:#a1a8b1!important;font:700 10px/1 Inter,sans-serif!important;
  letter-spacing:.08em!important;
}
.feature-card::after{
  content:"→"!important;grid-column:3!important;grid-row:1 / span 3!important;
  align-self:center!important;justify-self:end!important;
  width:26px!important;height:26px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  color:#9ba2ac!important;font:500 17px/1 Inter,sans-serif!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  transform:none!important;opacity:1!important;position:static!important;
  transition:color .14s ease,transform .14s ease!important;
}
.feature-card:hover,
.feature-card:focus-visible{
  background:#f3f6fa!important;padding-left:11px!important;padding-right:11px!important;
}
.feature-card:hover::before,.feature-card:focus-visible::before{color:var(--fp-brand-blue-2)!important}
.feature-card:hover::after,.feature-card:focus-visible::after{color:var(--fp-brand-blue)!important;transform:translateX(3px)!important}
.feature-card:focus-visible{outline:3px solid var(--fp-brand-focus)!important;outline-offset:2px!important}
.feature-top{grid-column:2!important;grid-row:1!important;margin:0!important;display:block!important}
.format-text,.feature-card .tag{
  display:inline-flex!important;align-items:center!important;width:auto!important;height:auto!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--fp-brand-blue-2)!important;
  font:800 10px/1 Inter,sans-serif!important;letter-spacing:.12em!important;
}
.format-text.format-img,.feature-card:has(.format-img) .format-text{color:var(--fp-brand-blue-2)!important}
.format-text.format-pdf,.feature-card:has(.format-pdf) .format-text{color:var(--fp-brand-ink-2)!important}
.format-text.format-archive,.feature-card:has(.format-archive) .format-text{color:#4f5966!important}
.format-text.format-data,.feature-card:has(.format-data) .format-text{color:#4f5966!important}
.format-text.format-office,.feature-card:has(.format-office) .format-text{color:#4f5966!important}
.format-text.format-utility,.feature-card:has(.format-utility) .format-text{color:var(--fp-brand-blue-2)!important}
.feature-card strong{
  grid-column:2!important;grid-row:2!important;display:block!important;
  color:var(--fp-brand-ink)!important;font-size:18px!important;font-weight:760!important;
  line-height:1.35!important;letter-spacing:-.02em!important;
}
.feature-card .use{
  grid-column:2!important;grid-row:3!important;display:block!important;
  margin:4px 0 0!important;padding:0!important;color:var(--fp-brand-muted)!important;
  font-size:12px!important;line-height:1.7!important;
}
.feature-card .go{display:none!important}
.feature-card.pdf-card{border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;background:transparent!important}
.feature-card.pdf-card:hover{background:#f3f6fa!important;border-color:var(--fp-brand-line)!important}

/* Editorial new-tools list: preserve the useful structure, remove the boxed look. */
.new-tools-editorial{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  border:0!important;
}
.new-tools-editorial a{
  min-width:0!important;padding:20px 4px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;
  border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;
  color:inherit!important;background:transparent!important;text-decoration:none!important;
}
.new-tools-editorial a:nth-child(odd){padding-right:24px!important;border-right:0!important}
.new-tools-editorial a:nth-child(even){padding-left:24px!important}
.new-tools-editorial a:hover{background:#f3f6fa!important}
.new-tools-editorial b{display:block!important;margin:0 0 6px!important;color:var(--fp-brand-blue-2)!important;font:800 9px/1 Inter,sans-serif!important;letter-spacing:.14em!important}
.new-tools-editorial strong{display:block!important;color:var(--fp-brand-ink)!important;font-size:16px!important;line-height:1.35!important}
.new-tools-editorial em{display:block!important;margin-top:5px!important;color:var(--fp-brand-muted)!important;font-size:11px!important;line-height:1.7!important;font-style:normal!important}
.new-tools-editorial i{color:var(--fp-brand-blue)!important;font-style:normal!important;font-size:17px!important}

/* Office/about blocks: horizontal information bands rather than cards. */
.office{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 38px!important}
.office-card,.howto-list>div,.articles article,.simple-card{
  min-width:0!important;padding:20px 2px!important;
  border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.office-card:hover,.howto-list>div:hover,.articles article:hover,.simple-card:hover{background:#f3f6fa!important;border-color:var(--fp-brand-line)!important}
.office-card h3,.articles article h3{margin:0 0 7px!important;color:var(--fp-brand-ink)!important;font-weight:750!important}
.office-card p,.articles article p{margin:0!important;color:var(--fp-brand-muted)!important;line-height:1.75!important}

/* ---------- Main tool application: workspace, not panel-in-panel ---------- */
.page{max-width:1380px!important;padding:28px clamp(10px,2.2vw,24px) 76px!important}
.filepat-main-with-side-ad{gap:24px!important}
.tool-layout{
  min-width:0!important;display:grid!important;
  border:1px solid var(--fp-brand-line)!important;border-radius:0!important;
  background:#fff!important;box-shadow:none!important;overflow:hidden!important;
}
.sidebar{
  background:#fbfcfd!important;border-right:1px solid var(--fp-brand-line)!important;
  border-radius:0!important;padding:18px 10px!important;
}
.tools-label{color:var(--fp-brand-ink)!important;font:800 10px/1 Inter,sans-serif!important;letter-spacing:.16em!important}
.tools-group-label{color:#717984!important;font-size:10px!important;font-weight:700!important}
.tools-group-note{color:#9aa1ab!important;font-size:9px!important;line-height:1.55!important}
.tool{
  position:relative!important;width:100%!important;min-width:0!important;
  margin:1px 0!important;padding:9px 10px!important;
  display:flex!important;align-items:center!important;gap:9px!important;
  border:0!important;border-radius:6px!important;background:transparent!important;
  color:#5f6874!important;font-size:11px!important;font-weight:650!important;text-align:left!important;
}
.tool:hover{background:#edf2f8!important;color:var(--fp-brand-ink)!important}
.tool.active{
  color:var(--fp-brand-ink)!important;background:#eaf1ff!important;
  box-shadow:none!important;
}
.tool.active::before{
  content:""!important;position:absolute!important;left:7px!important;top:50%!important;
  width:5px!important;height:5px!important;border-radius:50%!important;
  background:var(--fp-brand-blue)!important;transform:translateY(-50%)!important;
}
.tool.active .ico{background:transparent!important;color:inherit!important}
.side-format{
  min-width:30px!important;width:30px!important;height:18px!important;flex:0 0 30px!important;
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  font:800 8px/1 Inter,sans-serif!important;letter-spacing:.04em!important;color:#6e7782!important;
}
.side-format.format-jpg,.side-format.format-qr{color:var(--fp-brand-blue-2)!important}
.side-format.format-pdf{color:var(--fp-brand-ink)!important}
.side-format.format-zip,.side-format.format-csv,.side-format.format-mp3,.side-format.format-txt,.side-format.format-folder,.side-format.format-file,.side-format.format-html{color:#66707c!important}
.tools-external-divider{
  margin:10px 5px 5px!important;padding:13px 6px 6px!important;
  border-top:1px solid var(--fp-brand-line)!important;
  color:#9aa1ab!important;font-size:8.5px!important;
}
.panel{min-width:0!important;background:#fff!important;padding:38px clamp(24px,4vw,52px) 46px!important}
.heading{gap:18px!important;margin-bottom:24px!important}
.eyebrow,.section-kicker{color:var(--fp-brand-blue-2)!important;font:800 9px/1 Inter,sans-serif!important;letter-spacing:.16em!important}
.heading h1{color:var(--fp-brand-ink)!important;font-weight:800!important;letter-spacing:-.035em!important;line-height:1.2!important}
.heading p{color:var(--fp-brand-muted)!important;line-height:1.75!important}
.keys{border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;border-radius:0!important;background:transparent!important;color:#848b95!important;padding:7px 0!important;font-size:10px!important}
.dropzone{
  min-height:330px!important;padding:38px 24px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  border:1px dashed #bfc6d0!important;border-radius:8px!important;
  background:#fcfdff!important;box-shadow:none!important;
}
.dropzone:hover{background:#f7f9fc!important;border-color:#8f9aaa!important}
.dropzone.drag{background:var(--fp-brand-blue-soft)!important;border-color:var(--fp-brand-blue)!important}
.dropzone:focus,.dropzone:focus-within{box-shadow:0 0 0 4px var(--fp-brand-focus)!important}
.drop-title{color:var(--fp-brand-ink)!important;font-weight:750!important}
.drop-sub{color:#8a929d!important}
.drop-plus{background:transparent!important;color:var(--fp-brand-blue)!important;border:1px solid #cbd8f2!important;border-radius:8px!important}
.pick,.run{border-radius:6px!important;background:var(--fp-brand-ink)!important;color:#fff!important;box-shadow:none!important}
.pick:hover,.run:hover{background:var(--fp-brand-blue)!important}
.pick:focus-visible,.run:focus-visible,.btn:focus-visible{outline:3px solid var(--fp-brand-focus)!important;outline-offset:3px!important}
.setting-card{border:0!important;border-top:1px solid var(--fp-brand-line)!important;border-radius:0!important;background:transparent!important}
.setting input,.setting select,.setting textarea{border:1px solid #ccd2da!important;border-radius:6px!important;background:#fff!important;box-shadow:none!important}
.files-head{border-top:1px solid var(--fp-brand-line)!important;border-bottom:1px solid var(--fp-brand-line)!important;background:#fff!important}
.clear{color:#7a838e!important}
.row,.result{border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;border-radius:0!important;background:#fff!important}
.actionbar{border-top:1px solid var(--fp-brand-line)!important;background:#fff!important}
.privacy{color:#7a838f!important}
.progress{border:0!important;background:transparent!important}
.progress-track{background:#e8ebef!important;border-radius:99px!important}.progress-track i{background:var(--fp-brand-blue)!important}

/* ---------- Information sections under the workspace ---------- */
.info-section{max-width:1080px!important;margin:58px auto 0!important}
.section-head{padding-bottom:13px!important;border-bottom:1px solid var(--fp-brand-line)!important}
.section-head h2{margin:0!important;color:var(--fp-brand-ink)!important;font-size:25px!important;font-weight:800!important;letter-spacing:-.035em!important}
.howto-list,.articles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0 28px!important}
.howto-list>div{display:block!important;padding:22px 2px!important}
.howto-list b{display:block!important;margin:0 0 12px!important;color:var(--fp-brand-blue-2)!important;font:800 20px/1 Inter,sans-serif!important;letter-spacing:-.03em!important}
.howto-list p{margin:0!important;color:var(--fp-brand-muted)!important;font-size:12px!important;line-height:1.8!important}
.howto-list strong{color:var(--fp-brand-ink)!important;font-weight:750!important}
.articles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.articles article{padding:20px 2px!important}
.faq details{border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.faq summary{color:var(--fp-brand-ink)!important;font-weight:700!important}
.faq details p{color:var(--fp-brand-muted)!important;line-height:1.8!important}
.seo-content{background:#fff!important;color:var(--fp-brand-text)!important}
.seo-inner{border-top:1px solid var(--fp-brand-line)!important}
.seo-content article{border:0!important;border-bottom:1px solid var(--fp-brand-line)!important;border-radius:0!important;background:transparent!important}
.seo-content a{color:var(--fp-brand-blue-2)!important}

/* ---------- Dedicated tool pages: focused workspace with clear hierarchy ---------- */
.tool-page{width:min(1100px,100%)!important;padding:0 clamp(14px,3vw,28px) 76px!important;margin:0 auto!important}
.tool-head{
  padding:14px 0!important;border-bottom:1px solid var(--fp-brand-line)!important;
  background:#fff!important;box-shadow:none!important;
}
.tool-head .brand{font-size:16px!important}.tool-head .back{color:#69727d!important}
.tool-main{padding-top:34px!important}.tool-main h1{color:var(--fp-brand-ink)!important;font-weight:800!important;letter-spacing:-.035em!important}
.lead{color:var(--fp-brand-muted)!important;line-height:1.9!important}
.hero-card,.panel-card{
  border:0!important;border-top:1px solid var(--fp-brand-line)!important;
  border-bottom:1px solid var(--fp-brand-line)!important;
  border-radius:0!important;background:#fff!important;box-shadow:none!important;
}
.tabs{gap:0!important;border-bottom:1px solid var(--fp-brand-line)!important}
.tabs button{color:#747d88!important;border-bottom:2px solid transparent!important;background:transparent!important;border-radius:0!important}
.tabs button:hover{color:var(--fp-brand-ink)!important}
.tabs button.active{color:var(--fp-brand-ink)!important;border-bottom-color:var(--fp-brand-blue)!important}
.field input,.field select,.field textarea{border:1px solid #ccd2da!important;border-radius:6px!important;background:#fff!important;box-shadow:none!important}
.btn{background:var(--fp-brand-ink)!important;border-color:var(--fp-brand-ink)!important;border-radius:6px!important;box-shadow:none!important}.btn:hover{background:var(--fp-brand-blue)!important;border-color:var(--fp-brand-blue)!important}.btn.secondary{background:#fff!important;color:var(--fp-brand-ink)!important;border-color:#cbd1d9!important}
.drop{border:1px dashed #bfc6d0!important;background:#fcfdff!important;border-radius:8px!important;box-shadow:none!important}.drop:hover{background:#f7f9fc!important;border-color:#8f9aaa!important}.drop.drag{border-color:var(--fp-brand-blue)!important;background:var(--fp-brand-blue-soft)!important}
.preview{border:1px solid var(--fp-brand-line)!important;background:#fbfcfd!important;border-radius:6px!important}
.seo-section{border-top:1px solid var(--fp-brand-line)!important}.faq details{border-color:var(--fp-brand-line)!important}.tool-footer{border-top:1px solid var(--fp-brand-line)!important;color:#8a929d!important}

/* ---------- Footer ---------- */
.directory-foot{border-top:1px solid var(--fp-brand-line)!important;color:#8b929b!important}

/* Responsive UX */
@media(max-width:980px){
  .feature-grid{grid-template-columns:1fr!important;gap:0!important}
  .office{grid-template-columns:1fr!important;gap:0!important}
  .new-tools-editorial{grid-template-columns:1fr!important}
  .new-tools-editorial a:nth-child(odd),.new-tools-editorial a:nth-child(even){padding-left:4px!important;padding-right:4px!important;border-right:0!important}
}
@media(max-width:920px){
  .tool-layout{grid-template-columns:1fr!important}
  .sidebar{display:flex!important;align-items:center!important;gap:3px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:8px!important;border-right:0!important;border-bottom:1px solid var(--fp-brand-line)!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important}
  .tools-label,.tools-group-label,.tools-group-note{display:none!important}
  .tool{flex:0 0 auto!important;width:auto!important;min-width:125px!important;max-width:190px!important;margin:0!important}
  .tools-external-divider{flex:0 0 auto!important;margin:0 4px!important;padding:0 9px!important;border-top:0!important;height:28px!important;display:flex!important;align-items:center!important}
  .panel{padding:30px 24px 36px!important}
}
@media(max-width:680px){
  .topbar{min-height:58px!important;padding:7px 11px!important}.brand{font-size:15px!important}.logo{width:30px!important;height:30px!important;min-width:30px!important}
  .mainnav{gap:3px!important}.mainnav>a{min-height:32px!important;padding:0 7px!important;font-size:9.5px!important}.lang-switch button{min-width:28px!important;min-height:27px!important}
  .directory{padding:20px 11px 46px!important}.directory-section{margin-bottom:40px!important}.directory-section-head{align-items:flex-start!important;gap:10px!important;padding-bottom:11px!important}.directory-section-head h2{font-size:21px!important}.directory-section-head p{font-size:10.5px!important}
  .feature-card{grid-template-columns:40px minmax(0,1fr) auto!important;min-height:128px!important;padding:17px 2px 16px!important;gap:4px 12px!important}.feature-card strong{font-size:16px!important}.feature-card .use{font-size:11px!important;line-height:1.65!important}
  .new-tools-editorial a{padding-top:17px!important;padding-bottom:17px!important}.new-tools-editorial strong{font-size:15px!important}
  .howto-list,.articles{grid-template-columns:1fr!important;gap:0!important}.howto-list>div,.articles article{padding:18px 2px!important}
  .page{padding:11px 7px 48px!important}.panel{padding:24px 14px 30px!important}.heading{display:block!important}.keys{display:inline-block!important;margin-top:10px!important}.heading h1{font-size:23px!important}.dropzone{min-height:245px!important}
  .setting-card{grid-template-columns:1fr!important}.actionbar{flex-direction:column!important;align-items:stretch!important}.run{width:100%!important}.info-section{margin-top:42px!important}.section-head h2{font-size:21px!important}
  .tool-page{padding:0 12px 52px!important}.tool-head{gap:10px!important;flex-wrap:wrap!important}.tool-main{padding-top:24px!important}.tool-main h1{font-size:31px!important}.lead{font-size:13px!important}.hero-card,.panel-card{padding:14px 0!important}.grid-2{grid-template-columns:1fr!important}.actions{display:grid!important;grid-template-columns:1fr!important}.actions .btn{width:100%!important}.drop{min-height:200px!important;padding:32px 14px!important}.preview{min-height:190px!important}
}
@media(max-width:420px){
  .mainnav>a:nth-child(3){display:none!important}
  .brand{font-size:13px!important}.logo{width:27px!important;height:27px!important;min-width:27px!important}
  .mainnav>a{font-size:9px!important}.feature-card{grid-template-columns:32px minmax(0,1fr) auto!important}.feature-card::before{font-size:9px!important}.feature-card::after{font-size:15px!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* FilePat v6 — tool index marker correction
   Keep the sequence number on the left, move the small brand marker to the upper-right,
   and remove every legacy left-edge/number-adjacent marker. */
.feature-card::before,
#tools .feature-card::before,
#office-tools .feature-card::before,
#formats .feature-card::before{
  content:counter(fp-tool,decimal-leading-zero)!important;
  position:static!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  display:flex!important;
  grid-column:1!important;
  grid-row:1 / span 3!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding:1px 0 0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  opacity:1!important;
  color:#a1a8b1!important;
  font:700 10px/1 Inter,sans-serif!important;
  letter-spacing:.08em!important;
}
.feature-card.pdf-card::before,
#tools .feature-card.pdf-card::before,
#office-tools .feature-card.pdf-card::before,
#formats .feature-card.pdf-card::before{
  background:transparent!important;
  color:#a1a8b1!important;
}
.feature-card:has(.format-text.format-img)::before,
.feature-card:has(.format-text.format-data)::before,
.feature-card:has(.format-text.format-archive)::before,
.feature-card:has(.format-text.format-office)::before,
.feature-card:has(.format-text.format-utility)::before{
  background:transparent!important;
  color:#a1a8b1!important;
}
.feature-top{
  position:relative!important;
}
.feature-top::after{
  content:""!important;
  position:absolute!important;
  top:-1px!important;
  right:0!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:var(--fp-brand-blue)!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
}
.feature-card.pdf-card .feature-top::after{background:#a63a32!important}
.feature-card:has(.format-text.format-archive) .feature-top::after{background:#92733a!important}
.feature-card:has(.format-text.format-data) .feature-top::after{background:#52705a!important}
.feature-card:has(.format-text.format-office) .feature-top::after{background:#5b6d72!important}
.feature-card:has(.format-text.format-utility) .feature-top::after{background:#665a7d!important}


/* FilePat mobile language + flow hotfix v9
   Applies to all sidebar-bearing pages. Presentation and language boot only. */
@media (max-width: 900px){
  .tool-layout > .sidebar,
  #tools > .sidebar,
  .sidebar{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    align-self:stretch!important;
    transform:none!important;
  }
  .page{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important;width:100%!important;min-width:0!important}
  .tool-page{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important;width:100%!important;min-width:0!important}
  .filepat-main-with-side-ad,.tool-layout,.panel{min-width:0!important;max-width:100%!important}
  .sidebar .tool > .lang-ja{display:block!important}
  .sidebar .tool > .lang-en{display:none!important}
  html[lang="en"] .sidebar .tool > .lang-ja,
  html[data-lang="en"] .sidebar .tool > .lang-ja{display:none!important}
  html[lang="en"] .sidebar .tool > .lang-en,
  html[data-lang="en"] .sidebar .tool > .lang-en{display:block!important}
  .sidebar .tool > .lang-ja,.sidebar .tool > .lang-en{
    min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  #tools.tool-layout > .sidebar .tool,#tools.tool-layout > .sidebar .tool.tool-link{
    position:relative!important;flex:0 0 148px!important;width:148px!important;min-width:148px!important;max-width:148px!important;height:46px!important;min-height:46px!important;margin:0!important;box-sizing:border-box!important;
  }
}
@media (max-width:430px){
  .page{padding-left:16px!important;padding-right:16px!important}
  .tool-page{padding-left:16px!important;padding-right:16px!important}
  #tools.tool-layout > .sidebar .tool,#tools.tool-layout > .sidebar .tool.tool-link{flex-basis:146px!important;width:146px!important;min-width:146px!important;max-width:146px!important}
}
@media (max-width:360px){
  .page{padding-left:14px!important;padding-right:14px!important}
  .tool-page{padding-left:14px!important;padding-right:14px!important}
  #tools.tool-layout > .sidebar .tool,#tools.tool-layout > .sidebar .tool.tool-link{flex-basis:136px!important;width:136px!important;min-width:136px!important;max-width:136px!important}
}



/* ===== merged from /filepat-brand-refined.css ===== */
/* FilePat refined brand direction — visual layer only.
   Design language: precise Japanese editorial utility, restrained black/white/blue.
   No content, routing, JS, processing, SEO, or accessibility behavior changed. */
:root{
  --fp-r-ink:#111216;
  --fp-r-text:#24272c;
  --fp-r-muted:#6f757c;
  --fp-r-faint:#98a0a8;
  --fp-r-blue:#1769ff;
  --fp-r-blue-soft:#eff4ff;
  --fp-r-paper:#fbfbfa;
  --fp-r-white:#fff;
  --fp-r-rule:#dedfdc;
  --fp-r-rule-soft:#e9e9e6;
  --fp-r-focus:rgba(23,105,255,.22);
}

html,body{
  background:var(--fp-r-paper)!important;
  color:var(--fp-r-text)!important;
  font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif!important;
}

/* ---- Header: quiet Japanese stationery / editorial tone ---- */
.topbar{
  min-height:72px!important;
  padding:0 clamp(18px,3.4vw,48px)!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--fp-r-rule)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px)!important;
}
.brand{gap:11px!important;font-size:18px!important;font-weight:800!important;letter-spacing:-.045em!important}
.logo{width:36px!important;height:36px!important;min-width:36px!important;border-radius:10px!important}
.mainnav>a{
  position:relative!important;
  min-height:36px!important;
  padding:0 10px!important;
  border-radius:0!important;
  color:#747a81!important;
  font-size:11px!important;
  font-weight:650!important;
}
.mainnav>a:hover{background:transparent!important;color:var(--fp-r-ink)!important}
.mainnav>a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;
  background:var(--fp-r-blue);transform:scaleX(0) skewX(-24deg);transform-origin:left center;
  transition:transform .16s ease;
}
.mainnav>a:hover::after,.mainnav>a:focus-visible::after{transform:scaleX(1) skewX(-24deg)}
.lang-switch,.filekit-lang-switch{border:1px solid var(--fp-r-rule)!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
.lang-switch button,.filekit-lang-switch button{border-radius:0!important;color:#80858b!important}
.lang-switch button.active,.filekit-lang-switch button.active{background:var(--fp-r-ink)!important;color:#fff!important}

/* ---- Directory framing ---- */
.directory{
  max-width:1280px!important;
  padding:48px clamp(18px,3.4vw,44px) 88px!important;
}
.directory-section{margin-bottom:70px!important}
.directory-section-head{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,520px)!important;
  align-items:end!important;
  gap:28px!important;
  padding:0 0 18px!important;
  margin:0!important;
  border-bottom:1px solid var(--fp-r-rule)!important;
}
.directory-section-head h2,.section-head h2{
  color:var(--fp-r-ink)!important;
  font-family:"Noto Serif JP",Georgia,serif!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
  line-height:1.35!important;
}
.directory-section-head h2{font-size:25px!important;margin:0!important}
.directory-section-head h2::after,.section-head h2::after{
  content:""!important;display:inline-block!important;
  width:15px!important;height:4px!important;margin-left:10px!important;
  vertical-align:middle!important;background:var(--fp-r-blue)!important;
  transform:skewX(-28deg) translateY(-2px)!important;
}
.directory-section-head p{margin:0!important;color:var(--fp-r-muted)!important;max-width:none!important;font-size:11.5px!important;line-height:1.85!important}

/* ---- Tool index: structured rows, not cards ---- */
.feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:0!important;
  border-top:0!important;
}
.feature-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 30px!important;
  grid-template-rows:auto auto auto auto!important;
  gap:0 18px!important;
  min-height:166px!important;
  padding:27px 26px 21px 0!important;
  border:0!important;
  border-bottom:1px solid var(--fp-r-rule)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  overflow:visible!important;
}
.feature-card:nth-child(even){padding-left:38px!important;border-left:1px solid var(--fp-r-rule)!important}
.feature-card:nth-child(odd){padding-right:38px!important}
.feature-card:hover,.feature-card:focus-visible{background:#f4f6f8!important;padding-top:27px!important;transform:none!important}
.feature-card:focus-visible{outline:3px solid var(--fp-r-focus)!important;outline-offset:3px!important}
.feature-card::before{
  content:counter(fp-tool,decimal-leading-zero)!important;
  grid-column:1!important;grid-row:1 / span 4!important;
  align-self:start!important;justify-self:start!important;
  padding:3px 0 0!important;margin:0!important;
  color:#a1a7ae!important;font:700 10px/1 Inter,sans-serif!important;
  letter-spacing:.12em!important;background:transparent!important;border:0!important;
  position:static!important;display:block!important;width:auto!important;height:auto!important;
}
.feature-card:hover::before,.feature-card:focus-visible::before{color:#69727b!important}
.feature-top{grid-column:2!important;grid-row:1!important;position:relative!important;display:block!important;margin:0 0 16px!important;padding:0!important}
.feature-top::after{
  content:""!important;position:absolute!important;right:0!important;top:1px!important;
  width:6px!important;height:6px!important;border-radius:50%!important;
  background:var(--fp-r-blue)!important;box-shadow:none!important;opacity:1!important;
}
.feature-card.pdf-card .feature-top::after{background:#7d8792!important}
.format-text,.feature-card .tag{
  display:inline-block!important;padding:0!important;margin:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
  color:var(--fp-r-ink)!important;font:800 9px/1 Inter,sans-serif!important;
  letter-spacing:.17em!important;
}
.format-text.format-img,.feature-card:has(.format-img) .format-text{color:var(--fp-r-blue)!important}
.format-text.format-pdf,.feature-card:has(.format-pdf) .format-text{color:#4d535a!important}
.format-text.format-archive,.feature-card:has(.format-archive) .format-text,
.format-text.format-data,.feature-card:has(.format-data) .format-text,
.format-text.format-office,.feature-card:has(.format-office) .format-text,
.format-text.format-utility,.feature-card:has(.format-utility) .format-text{color:#687078!important}
.feature-card strong{
  grid-column:2!important;grid-row:2!important;
  color:var(--fp-r-ink)!important;
  font-family:"Noto Serif JP",Georgia,serif!important;
  font-size:20px!important;font-weight:600!important;
  line-height:1.45!important;letter-spacing:-.025em!important;
}
.feature-card .use{
  grid-column:2!important;grid-row:3!important;
  margin:7px 0 0!important;padding:0!important;
  color:#747a80!important;font-size:11.5px!important;line-height:1.8!important;
}
.feature-card .go{
  grid-column:2!important;grid-row:4!important;display:block!important;
  margin:14px 0 0!important;padding:9px 0 0!important;
  border-top:1px solid var(--fp-r-rule-soft)!important;
  color:var(--fp-r-ink)!important;font-size:10.5px!important;font-weight:750!important;
  letter-spacing:.01em!important;
}
.feature-card .go::after{content:"";display:inline-block;width:10px;height:4px;margin-left:7px;vertical-align:middle;background:var(--fp-r-blue);transform:skewX(-28deg)}
.feature-card:hover .go{color:var(--fp-r-blue)!important;text-decoration:none!important}
.feature-card::after{
  content:"↗"!important;grid-column:3!important;grid-row:2 / span 2!important;
  align-self:center!important;justify-self:end!important;
  position:static!important;width:auto!important;height:auto!important;
  display:block!important;color:#afb5bb!important;background:none!important;border:0!important;
  border-radius:0!important;font:500 17px/1 Inter,sans-serif!important;opacity:1!important;
  transition:color .15s ease,transform .15s ease!important;
}
.feature-card:hover::after,.feature-card:focus-visible::after{color:var(--fp-r-blue)!important;transform:translate(2px,-2px)!important}
.feature-card.pdf-card{border:0!important;background:transparent!important}
.feature-card.pdf-card:nth-child(even){border-left:1px solid var(--fp-r-rule)!important}

/* ---- Additional tool list: clean two-column editorial index ---- */
.new-tools-editorial{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-top:0!important}
.new-tools-editorial a{
  position:relative!important;min-height:116px!important;
  padding:21px 20px 20px 0!important;margin:0!important;
  border:0!important;border-bottom:1px solid var(--fp-r-rule)!important;border-radius:0!important;
  background:transparent!important;
}
.new-tools-editorial a:nth-child(even){padding-left:26px!important;border-left:1px solid var(--fp-r-rule)!important}
.new-tools-editorial a:nth-child(odd){padding-right:26px!important}
.new-tools-editorial a:hover{background:#f4f6f8!important}
.new-tools-editorial b{margin:0 0 9px!important;color:var(--fp-r-blue)!important;font:800 9px/1 Inter,sans-serif!important;letter-spacing:.16em!important}
.new-tools-editorial strong{font-family:"Noto Serif JP",Georgia,serif!important;color:var(--fp-r-ink)!important;font-size:17px!important;font-weight:600!important}
.new-tools-editorial em{margin-top:6px!important;color:#777d83!important;font-size:11px!important;line-height:1.7!important}
.new-tools-editorial i{color:#aab1b8!important;font-size:17px!important}
.new-tools-editorial a:hover i{color:var(--fp-r-blue)!important;transform:translate(2px,-2px)}

/* ---- Informational bands, not boxes ---- */
.office{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
.office-card,.howto-list>div,.articles article,.simple-card{
  padding:22px 24px 22px 0!important;border:0!important;border-bottom:1px solid var(--fp-r-rule)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
.office-card:nth-child(even),.howto-list>div:nth-child(even),.articles article:nth-child(even){padding-left:26px!important;border-left:1px solid var(--fp-r-rule)!important}
.office-card:hover,.howto-list>div:hover,.articles article:hover,.simple-card:hover{background:#f4f6f8!important;border-color:var(--fp-r-rule)!important}
.office-card h3,.articles article h3{font-family:"Noto Serif JP",Georgia,serif!important;color:var(--fp-r-ink)!important;font-weight:600!important}

/* ---- Main workspace: strong alignment, soft Japanese paper white ---- */
.tool-layout{border:1px solid var(--fp-r-rule)!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
.sidebar{background:#f8f8f6!important;border-right:1px solid var(--fp-r-rule)!important;border-radius:0!important}
.panel{background:#fff!important}
.heading h1,.tool-main h1{font-family:"Noto Serif JP",Georgia,serif!important;font-weight:600!important;color:var(--fp-r-ink)!important;letter-spacing:-.035em!important}
.eyebrow,.section-kicker{color:var(--fp-r-blue)!important;letter-spacing:.18em!important}
.dropzone,.drop{border:1px dashed #b9bec4!important;border-radius:0!important;background:#fcfcfb!important;box-shadow:none!important}
.dropzone:hover,.drop:hover{background:#f6f8fb!important;border-color:#8d98a5!important}
.dropzone.drag,.drop.drag{background:var(--fp-r-blue-soft)!important;border-color:var(--fp-r-blue)!important}
.pick,.run,.btn{border-radius:0!important;background:var(--fp-r-ink)!important;box-shadow:none!important}
.pick:hover,.run:hover,.btn:hover{background:var(--fp-r-blue)!important}
.setting input,.setting select,.setting textarea,.field input,.field select,.field textarea{border-radius:0!important;box-shadow:none!important}

/* ---- FAQ / SEO: editorial reading width ---- */
.info-section{max-width:1100px!important}
.faq details{border-radius:0!important;border:0!important;border-bottom:1px solid var(--fp-r-rule)!important;background:transparent!important;box-shadow:none!important}
.faq summary{font-family:"Noto Serif JP",Georgia,serif!important;font-weight:600!important}
.seo-content{background:#fff!important}

/* ---- Dedicated tools ---- */
.tool-page{max-width:1120px!important}
.tool-head{background:#fff!important;border-bottom:1px solid var(--fp-r-rule)!important;box-shadow:none!important}
.hero-card,.panel-card{border:0!important;border-top:1px solid var(--fp-r-rule)!important;border-bottom:1px solid var(--fp-r-rule)!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
.tabs{border-bottom:1px solid var(--fp-r-rule)!important}
.tabs button{border-radius:0!important;background:transparent!important}
.tabs button.active{border-bottom-color:var(--fp-r-blue)!important}
.preview{border-radius:0!important}

.directory-foot{border-top:1px solid var(--fp-r-rule)!important}

/* Responsive: preserve the editorial rhythm instead of collapsing into cards */
@media(max-width:900px){
  .directory-section-head{grid-template-columns:1fr;gap:10px}
  .feature-grid{grid-template-columns:1fr!important}
  .feature-card:nth-child(even){padding-left:0!important;border-left:0!important}
  .feature-card:nth-child(odd){padding-right:0!important}
  .new-tools-editorial{grid-template-columns:1fr!important}
  .new-tools-editorial a:nth-child(even){padding-left:0!important;border-left:0!important}
  .new-tools-editorial a:nth-child(odd){padding-right:0!important}
  .office{grid-template-columns:1fr!important}
  .office-card:nth-child(even),.howto-list>div:nth-child(even),.articles article:nth-child(even){padding-left:0!important;border-left:0!important}
}
@media(max-width:640px){
  .topbar{min-height:60px!important;padding:7px 12px!important}
  .brand{font-size:15px!important}.logo{width:30px!important;height:30px!important;min-width:30px!important}
  .directory{padding:32px 12px 52px!important}
  .directory-section{margin-bottom:48px!important}
  .directory-section-head{padding-bottom:13px!important}
  .directory-section-head h2{font-size:21px!important}
  .feature-card{grid-template-columns:40px minmax(0,1fr) 24px!important;min-height:145px!important;padding:22px 0 17px!important}
  .feature-card strong{font-size:17px!important}
  .feature-card .use{font-size:10.8px!important}
  .feature-card .go{font-size:10px!important;margin-top:11px!important;padding-top:8px!important}
  .feature-card::after{font-size:15px!important}
}
@media(prefers-reduced-motion:reduce){.mainnav>a::after,.feature-card::after,.new-tools-editorial i{transition:none!important}}

/* FilePat v8 — usability pass / visual-only
   Purpose: reduce visual noise, strengthen hierarchy, and make the primary action
   easier to scan. No HTML, JS, content, routes, or behavior are changed. */
:root{
  --fp-v8-ink:#0f1115;
  --fp-v8-blue:#0a63ff;
  --fp-v8-blue-quiet:#eaf1ff;
  --fp-v8-paper:#f8f8f6;
  --fp-v8-line:#dfe2e5;
  --fp-v8-line-soft:#eceeed;
  --fp-v8-muted:#68717a;
}

body{
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}

/* Headers: compact, calm, obvious navigation */
.topbar{
  min-height:68px!important;
  padding-inline:clamp(16px,4vw,56px)!important;
}
.brand{letter-spacing:-.035em!important}
.brand .brand-name{font-weight:750!important}
.mainnav>a{font-size:11px!important;letter-spacing:.015em!important}

/* Directory: use whitespace as the main separator instead of boxes */
.directory{
  max-width:1240px!important;
  padding-top:42px!important;
}
.directory-section{margin-bottom:76px!important}
.directory-section-head{
  grid-template-columns:minmax(220px,.72fr) minmax(320px,1.28fr)!important;
  gap:44px!important;
  padding-bottom:16px!important;
}
.directory-section-head h2,.section-head h2{
  font-size:24px!important;
  letter-spacing:-.035em!important;
}
.directory-section-head p{
  max-width:52ch!important;
  justify-self:end!important;
}

/* Main tool index: no left borders, no floating cards, strong scan path */
#tools .feature-grid,
.feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:0!important;
  row-gap:0!important;
}
#tools .feature-card,
.feature-card{
  grid-template-columns:46px minmax(0,1fr) 34px!important;
  grid-template-rows:auto auto minmax(0,1fr) auto!important;
  min-height:168px!important;
  padding:26px 28px 20px 0!important;
  border:0!important;
  border-bottom:1px solid var(--fp-v8-line)!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  background:transparent!important;
  transition:background .16s ease, padding-inline .16s ease!important;
}
#tools .feature-card:nth-child(even),
.feature-card:nth-child(even),
.feature-card.pdf-card:nth-child(even){
  padding-left:0!important;
  border-left:0!important;
}
#tools .feature-card:nth-child(odd),
.feature-card:nth-child(odd){padding-right:28px!important}
#tools .feature-card:hover,
#tools .feature-card:focus-visible,
.feature-card:hover,
.feature-card:focus-visible{
  padding-left:8px!important;
  padding-right:20px!important;
  background:rgba(10,99,255,.035)!important;
}

/* The number is metadata; keep it visually quiet */
#tools .feature-card::before,
.feature-card::before{
  color:#9ba2aa!important;
  font-size:9px!important;
  letter-spacing:.16em!important;
  padding-top:4px!important;
}

/* Format + brand dot live at the top edge; the dot is decoration only */
#tools .feature-card .feature-top,
.feature-card .feature-top{
  position:relative!important;
  min-height:12px!important;
  margin-bottom:13px!important;
}
#tools .feature-card .feature-top::after,
.feature-card .feature-top::after{
  content:""!important;
  position:absolute!important;
  top:2px!important;
  right:0!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:var(--fp-v8-blue)!important;
}

#tools .feature-card strong,
.feature-card strong{
  font-family:"Noto Serif JP",Georgia,serif!important;
  font-size:19px!important;
  line-height:1.42!important;
  font-weight:600!important;
  letter-spacing:-.035em!important;
  max-width:23ch!important;
}
#tools .feature-card .use,
.feature-card .use{
  max-width:48ch!important;
  padding-top:7px!important;
  color:var(--fp-v8-muted)!important;
  font-size:11.5px!important;
  line-height:1.78!important;
}

/* Primary action: text-led, not button-led */
#tools .feature-card .go,
.feature-card .go{
  width:max-content!important;
  margin-top:16px!important;
  padding:0!important;
  border:0!important;
  color:var(--fp-v8-ink)!important;
  font-size:10.5px!important;
  line-height:1.6!important;
  font-weight:760!important;
  letter-spacing:.01em!important;
  text-decoration:none!important;
}
#tools .feature-card .go::after,
.feature-card .go::after{
  width:11px!important;
  height:3px!important;
  margin-left:8px!important;
  background:var(--fp-v8-blue)!important;
  transition:width .16s ease,transform .16s ease!important;
}
#tools .feature-card:hover .go,
.feature-card:hover .go,
#tools .feature-card:focus-visible .go,
.feature-card:focus-visible .go{color:var(--fp-v8-blue)!important}
#tools .feature-card:hover .go::after,
.feature-card:hover .go::after{width:17px!important;transform:skewX(-28deg)!important}

#tools .feature-card::after,
.feature-card::after{
  grid-column:3!important;
  grid-row:1 / span 4!important;
  align-self:center!important;
  justify-self:end!important;
  color:#aab1b8!important;
  font-size:18px!important;
  transform:none!important;
}
#tools .feature-card:hover::after,
.feature-card:hover::after,
#tools .feature-card:focus-visible::after,
.feature-card:focus-visible::after{
  color:var(--fp-v8-blue)!important;
  transform:translate(3px,-3px)!important;
}

/* Supporting tool lists: same interaction model, lighter visual weight */
.new-tools-editorial,
.office{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:0!important}
.new-tools-editorial a,
.office-card{
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.new-tools-editorial a:nth-child(even),
.office-card:nth-child(even){border-left:0!important;padding-left:0!important}
.new-tools-editorial a:nth-child(odd),
.office-card:nth-child(odd){padding-right:34px!important}
.new-tools-editorial a:nth-child(even),
.office-card:nth-child(even){padding-left:34px!important}
.new-tools-editorial a:hover,
.office-card:hover{background:rgba(10,99,255,.035)!important}

/* Workspace: focus the task, not the chrome */
.tool-layout{
  border-color:var(--fp-v8-line)!important;
  box-shadow:0 14px 40px rgba(15,17,21,.035)!important;
}
.sidebar{background:#f6f7f5!important}
.dropzone,.drop{
  min-height:220px!important;
  background:#fff!important;
  border:1px dashed #b7bec6!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.dropzone:hover,.drop:hover{background:#fbfcff!important;border-color:#8e98a4!important;box-shadow:0 0 0 4px rgba(10,99,255,.05)!important}
.dropzone.drag,.drop.drag{background:var(--fp-v8-blue-quiet)!important;border-color:var(--fp-v8-blue)!important;box-shadow:none!important}
.pick,.run,.btn{
  min-height:42px!important;
  padding-inline:18px!important;
  font-weight:760!important;
}

/* Form controls: generous hit areas and clearer grouping */
.setting input,.setting select,.setting textarea,.field input,.field select,.field textarea{
  min-height:42px!important;
  background:#fff!important;
  border-color:#cfd5da!important;
}

/* Mobile: one-column reading order, no accidental visual hierarchy loss */
@media(max-width:900px){
  .directory-section-head{grid-template-columns:1fr!important;gap:9px!important}
  .directory-section-head p{justify-self:start!important}
  #tools .feature-grid,.feature-grid,.new-tools-editorial,.office{grid-template-columns:1fr!important}
  #tools .feature-card,.feature-card{padding-right:0!important}
  #tools .feature-card:nth-child(even),.feature-card:nth-child(even),
  #tools .feature-card:nth-child(odd),.feature-card:nth-child(odd){padding-left:0!important;padding-right:0!important}
  #tools .feature-card:hover,.feature-card:hover,#tools .feature-card:focus-visible,.feature-card:focus-visible{padding-left:7px!important;padding-right:0!important}
  .new-tools-editorial a:nth-child(n),.office-card:nth-child(n){padding-left:0!important;padding-right:0!important}
}
@media(max-width:640px){
  .topbar{min-height:58px!important}
  .directory{padding-top:28px!important}
  .directory-section{margin-bottom:52px!important}
  .directory-section-head h2{font-size:21px!important}
  #tools .feature-card,.feature-card{grid-template-columns:38px minmax(0,1fr) 24px!important;min-height:150px!important;padding-top:22px!important;padding-bottom:17px!important}
  #tools .feature-card strong,.feature-card strong{font-size:17px!important;max-width:26ch!important}
  #tools .feature-card .use,.feature-card .use{font-size:10.8px!important;line-height:1.72!important}
}
@media(prefers-reduced-motion:reduce){
  #tools .feature-card,.feature-card,.dropzone,.drop,.feature-card .go::after{transition:none!important}
}

/* FilePat v9 — sidebar alignment only (CSS-only)
   Keep the navigation's dot, file-type label and tool title on one stable baseline.
   No HTML, JS or tool behavior changes. */
.sidebar .tool,
.sidebar .tool.tool-link{
  display:grid!important;
  grid-template-columns:8px 34px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:9px!important;
  min-width:0!important;
  text-align:left!important;
}
.sidebar .tool::before{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  width:4px!important;
  height:4px!important;
  margin:0!important;
  flex:none!important;
  transform:none!important;
}
.sidebar .tool .side-format{
  grid-column:2!important;
  grid-row:1!important;
  width:34px!important;
  min-width:34px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:start!important;
  text-align:left!important;
  line-height:1!important;
}
.sidebar .tool > .lang-ja,
.sidebar .tool > .lang-en{
  grid-column:3!important;
  grid-row:1!important;
  min-width:0!important;
  align-self:center!important;
  line-height:1.45!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sidebar .tool.tool-link::after{
  grid-column:4!important;
  grid-row:1!important;
  margin-left:0!important;
  align-self:center!important;
  justify-self:end!important;
}
.sidebar .tool.active::before{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  align-self:center!important;
  justify-self:center!important;
}
.sidebar .tool:hover::before,
.sidebar .tool.active:hover::before{
  transform:scale(1.25)!important;
}

@media(max-width:920px){
  .sidebar .tool,
  .sidebar .tool.tool-link{
    display:grid!important;
    grid-template-columns:7px 30px minmax(0,1fr) auto!important;
    column-gap:8px!important;
  }
  .sidebar .tool .side-format{
    width:30px!important;
    min-width:30px!important;
  }
}

@media(max-width:760px){
  .sidebar .tool,
  .sidebar .tool.tool-link{
    display:grid!important;
    grid-template-columns:7px 30px minmax(0,1fr) auto!important;
    align-items:center!important;
  }
}

/* FilePat v10 — sidebar dot/text alignment (CSS only)
   The dot is a fixed decorative marker at the upper-right of each row.
   The format label and tool title share stable left baselines.
   No HTML / JS / behavior changes. */
.sidebar .tool,
.sidebar .tool.tool-link{
  position:relative!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 16px!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  column-gap:10px!important;
  min-height:42px!important;
  padding:8px 28px 8px 8px!important;
  box-sizing:border-box!important;
  text-align:left!important;
}

.sidebar .tool::before,
.sidebar .tool.tool-link::before{
  content:'•'!important;
  position:absolute!important;
  top:7px!important;
  right:10px!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:700!important;
  transform:none!important;
  opacity:.72!important;
  color:#2487f5!important;
  pointer-events:none!important;
}

.sidebar .tool .side-format{
  grid-column:1!important;
  grid-row:1!important;
  width:40px!important;
  min-width:40px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:start!important;
  line-height:1.1!important;
  text-align:left!important;
  white-space:nowrap!important;
}

.sidebar .tool > .lang-ja,
.sidebar .tool > .lang-en{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  line-height:1.5!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.sidebar .tool.tool-link::after{
  grid-column:3!important;
  grid-row:1!important;
  position:static!important;
  margin:0!important;
  align-self:center!important;
  justify-self:end!important;
}

.sidebar .tool.active::before,
.sidebar .tool:hover::before,
.sidebar .tool.active:hover::before{
  top:7px!important;
  right:10px!important;
  transform:none!important;
}

@media (max-width:920px){
  .sidebar .tool,
  .sidebar .tool.tool-link{
    grid-template-columns:36px minmax(0,1fr) 16px!important;
    column-gap:9px!important;
    min-height:42px!important;
    padding:8px 27px 8px 7px!important;
  }
  .sidebar .tool .side-format{width:36px!important;min-width:36px!important}
}

@media (max-width:760px){
  .sidebar .tool,
  .sidebar .tool.tool-link{
    grid-template-columns:36px minmax(0,1fr) 16px!important;
    min-height:44px!important;
    padding:9px 27px 9px 8px!important;
  }
  .sidebar .tool::before,
  .sidebar .tool.tool-link::before{top:8px!important;right:9px!important}
}



/* ===== merged from /language-v5.css ===== */

/* FilePat language selector v5 */
.filepat-language-select{min-height:36px;padding:6px 30px 6px 10px;border:1px solid #d9dee5;border-radius:7px;background:#fff;color:#20242a;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",sans-serif;cursor:pointer;max-width:138px}
.filepat-language-select:focus-visible{outline:3px solid rgba(47,111,255,.28);outline-offset:2px}
@media(max-width:760px){.filepat-language-select{min-height:40px;font-size:13px;max-width:150px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}



/* ===== merged from /language-v6.css ===== */
/* FilePat language UI */
.filepat-language-switch{display:inline-flex;align-items:center}
.filepat-language-select{min-height:36px;min-width:110px;padding:7px 30px 7px 10px;border:1px solid #d9dee5;border-radius:7px;background:#fff;color:#20242a;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",sans-serif;cursor:pointer}
.filepat-language-select:focus-visible{outline:3px solid rgba(47,111,255,.25);outline-offset:2px}
@media(max-width:760px){.filepat-language-select{min-height:40px;min-width:120px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}



/* ===== merged from /header-footer-unified.css ===== */
/* FilePat Step 3 — unified site header/footer. Visual/layout only. */
header.topbar{
  position:sticky!important;top:0!important;z-index:1000!important;
  width:100%!important;min-height:64px!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:24px!important;padding:0 28px!important;
  background:#fff!important;border-bottom:1px solid #dfe3e7!important;
  box-shadow:none!important;backdrop-filter:none!important;
}
header.topbar .brand{
  display:flex!important;align-items:center!important;gap:10px!important;
  flex:0 0 auto!important;color:#17191d!important;text-decoration:none!important;
  font-family:Arial,"Noto Sans JP","Yu Gothic",sans-serif!important;
  font-size:16px!important;font-weight:800!important;letter-spacing:-.03em!important;
  white-space:nowrap!important;min-height:34px!important;
}
header.topbar .brand .logo{
  width:30px!important;height:30px!important;min-width:30px!important;
  margin:0!important;border-radius:8px!important;display:block!important;
  background:transparent url('assets/filepat-mark.png') center/contain no-repeat!important;
  color:transparent!important;font-size:0!important;
}
header.topbar .mainnav{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:18px!important;min-width:0!important;flex:0 1 auto!important;
}
header.topbar .mainnav>a{
  display:inline-flex!important;align-items:center!important;min-height:34px!important;
  padding:6px 0!important;border:0!important;border-radius:0!important;background:transparent!important;
  color:#535d67!important;font-size:12px!important;font-weight:650!important;line-height:1.4!important;
  text-decoration:none!important;white-space:nowrap!important;
}
header.topbar .mainnav>a:hover{color:#161b20!important}
header.topbar .mainnav>a:focus-visible,
header.topbar .brand:focus-visible,
header.topbar .filepat-language-switch button:focus-visible,
header.topbar .filepat-language-switch select:focus-visible{
  outline:2px solid #245b8f!important;outline-offset:3px!important;
}
header.topbar>.back{display:none!important}
header.topbar .filepat-language-switch{
  display:inline-flex!important;align-items:center!important;gap:3px!important;
  flex:0 0 auto!important;padding:3px!important;border:1px solid #dfe3e7!important;
  border-radius:8px!important;background:#fafbfc!important;margin-left:4px!important;
}
header.topbar .filepat-language-switch button{
  min-width:30px!important;min-height:28px!important;padding:5px 7px!important;border:0!important;
  border-radius:5px!important;background:transparent!important;color:#7a828b!important;
  font:700 9px/1 Arial,sans-serif!important;cursor:pointer!important;
}
header.topbar .filepat-language-switch button.active{background:#111!important;color:#fff!important}
header.topbar .filepat-language-switch select{
  min-height:32px!important;min-width:120px!important;padding:5px 28px 5px 9px!important;
  border:0!important;border-radius:5px!important;background:#fff!important;color:#23292f!important;
  font:600 11px/1.2 Arial,"Noto Sans JP","Yu Gothic",sans-serif!important;
}

/* Existing tool/SEO header classes are kept for JS compatibility, but visually follow index.html. */
header.topbar.tool-head,header.topbar.seo-header{max-width:none!important;margin:0!important;}
header.topbar.tool-head .brand,header.topbar.seo-header .brand{margin:0!important;padding:0!important;}

.footer-wrap{
  width:100%!important;max-width:1180px!important;margin:0 auto!important;
  padding:0 24px 30px!important;box-sizing:border-box!important;
}
.footer-wrap footer{
  padding:26px 0 0!important;border-top:1px solid #dfe3e7!important;
  color:#7f8790!important;background:transparent!important;
}
.footer-wrap .footer-inner{
  display:grid!important;grid-template-columns:minmax(190px,1fr) 2.4fr!important;
  gap:42px!important;align-items:start!important;
}
.footer-wrap .footer-brand strong{color:#20262c!important;font-size:14px!important}
.footer-wrap .footer-brand p{color:#7f8790!important}
.footer-wrap .footer-links{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important}
.footer-wrap .footer-links b{color:#8e969f!important}
.footer-wrap .footer-links a{color:#68717b!important}
.footer-wrap .footer-links a:hover{color:#171b20!important}
.footer-wrap .copyright{border-top:1px solid #e6e9ec!important;color:#9299a1!important}

@media(max-width:760px){
  header.topbar{min-height:58px!important;padding:9px 12px!important;gap:10px!important;flex-wrap:wrap!important}
  header.topbar .brand{font-size:15px!important}
  header.topbar .brand .logo{width:30px!important;height:30px!important;min-width:30px!important}
  header.topbar .mainnav{gap:0!important;}
  header.topbar .filepat-language-switch{margin-left:0!important}
  .footer-wrap{padding:0 16px 24px!important}
  .footer-wrap .footer-inner{grid-template-columns:1fr!important;gap:26px!important}
  .footer-wrap .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
}



/* ===== merged from /responsive-final.css ===== */
/* FilePat responsive stability layer v1
   CSS ONLY. No processing logic, JS, routes, IDs or DOM behavior changed.
   Purpose: consistent desktop/tablet/mobile layout across all page families. */

*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
pre,code{max-width:100%}
pre{overflow:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%;border-collapse:collapse}
button,input,select,textarea{max-width:100%;min-width:0}
input,select,textarea{font-size:16px}

/* Header: one predictable flow at every width. */
.topbar,
.tool-head,
.seo-header{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.topbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:12px!important;
}
.brand{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
.mainnav{min-width:0!important;max-width:100%!important}
.filepat-language-switch,
.lang-switch,
.filekit-lang-switch{min-width:0!important;max-width:100%!important;flex:0 0 auto!important}

/* Main content containers. */
.page,
.directory,
.tool-page,
.simple-page,
.seo-page,
.fp-tool-page,
.fp-tool-main,
.tool-main,
.seo-main,
.panel,
.filepat-runtime,
.runtime-panel,
.seo-content,
.info-section,
.filepat-seo-section,
.fp-practical-guide-final,
.filepat-tool-guide-v13{min-width:0!important;max-width:100%!important}
.page,.directory{width:100%!important}
.tool-layout{width:100%!important;min-width:0!important}
.panel{width:100%!important}
.heading,.runtime-top{min-width:0!important;max-width:100%!important}
.heading>*,.runtime-top>*{min-width:0!important}
.heading h1,.heading p,.lead,.runtime-top h2,.runtime-desc{overflow-wrap:anywhere!important}

/* Tool directory on the homepage. */
.fp-unified-grid{width:100%!important;min-width:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.fp-unified-tool{min-width:0!important;width:100%!important}
.fp-unified-name,.fp-unified-desc{min-width:0!important;overflow-wrap:anywhere!important}

/* App workspace and sidebar. */
.filepat-main-with-side-ad{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,300px)!important;
}
.filepat-side-ad{min-width:0!important;width:100%!important}
.filepat-side-ad__inner{width:100%!important;max-width:300px!important;min-width:0!important;margin-inline:auto!important}
.tool-layout{overflow:hidden!important}
.sidebar{min-width:0!important;max-width:100%!important}
.sidebar .tool{min-width:0!important;max-width:100%!important}
.sidebar .tool>span{min-width:0!important}

/* Generic controls and file rows. */
.setting-card,.runtime-settings .setting-card{min-width:0!important}
.setting,.field,.fp-control{min-width:0!important}
.setting input,.setting select,.setting textarea,
.field input,.field select,.field textarea,
.fp-control input,.fp-control select,.fp-control textarea{width:100%!important;max-width:100%!important}
.row,.result,.queue-row{min-width:0!important;max-width:100%!important}
.name,.result-name,.sub,.result-size{min-width:0!important}
.actionbar,.runtime-actionbar,.actions,.fp-actions{min-width:0!important}
.actionbar>* ,.runtime-actionbar>* ,.actions>* ,.fp-actions>*{min-width:0!important}

/* Standalone tool pages. */
.tool-main,.fp-tool-main,.seo-main{width:100%!important}
.hero-card,.panel-card,.fp-tool-card{width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
.tabs{display:flex!important;align-items:stretch!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important}
.tabs button{flex:0 0 auto!important;min-width:max-content!important;max-width:none!important;white-space:nowrap!important}
.grid-2{min-width:0!important}
.preview,.fp-preview{min-width:0!important;max-width:100%!important;overflow:auto!important}
.preview img,.preview canvas,.preview video,.fp-preview img,.fp-preview canvas,.fp-preview video{max-width:100%!important;height:auto!important}
.actions,.fp-actions{flex-wrap:wrap!important}
.btn,.fp-btn{min-height:44px!important;max-width:100%!important}
.drop,.fp-drop{width:100%!important;min-width:0!important;max-width:100%!important}
.fp-practical-guide-final__grid,.filepat-tool-guide-v13__grid{min-width:0!important}
.fp-practical-guide-final__item,.filepat-guide-panel{min-width:0!important;overflow-wrap:anywhere!important}
.fp-seo-content,.seo-section{min-width:0!important;max-width:100%!important}

/* Footer. */
.footer-wrap,.footer-wrap footer,.footer-inner,.footer-links{width:100%!important;max-width:100%!important;min-width:0!important}
.footer-links a{min-width:0!important;overflow-wrap:anywhere!important}
.footer-social-link{min-width:0!important;overflow-wrap:anywhere!important}

/* Tablet. */
@media (max-width:1100px){
  .topbar{grid-template-columns:minmax(0,1fr) auto!important}
  .mainnav{grid-column:1/-1!important;grid-row:2!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;scrollbar-width:thin!important;-webkit-overflow-scrolling:touch!important}
  .filepat-language-switch,.lang-switch,.filekit-lang-switch{grid-column:2!important;grid-row:1!important}
  .filepat-main-with-side-ad{grid-template-columns:1fr!important}
  .filepat-side-ad{display:flex!important;justify-content:center!important;padding-top:18px!important}
  .filepat-side-ad__inner{width:300px!important;max-width:100%!important}
  .fp-unified-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-inner{grid-template-columns:1fr!important;gap:24px!important}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Tablet / small laptop workspace. */
@media (max-width:900px){
  .tool-layout{grid-template-columns:1fr!important}
  .sidebar{
    display:flex!important;
    align-items:stretch!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:9px!important;
    border-right:0!important;
    border-bottom:1px solid var(--fp-line,#d9dfe5)!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
  }
  .sidebar .tool,
  .sidebar .tool.tool-link{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:150px!important;
    max-width:220px!important;
    scroll-snap-align:start!important;
  }
  .tools-label,.tools-group-label,.tools-group-note{display:none!important}
  .tools-external-divider{flex:0 0 auto!important}
  .panel{padding:26px 22px 32px!important}
  .setting-card{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .runtime-settings .setting-card{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .info-section{width:100%!important}
  .howto-list,.articles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fp-practical-guide-final__grid,.filepat-tool-guide-v13__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fp-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Phones. */
@media (max-width:680px){
  .topbar{padding:8px 12px!important;row-gap:7px!important}
  .brand{font-size:15px!important}
  .mainnav{gap:4px!important;padding-bottom:2px!important}
  .mainnav a{min-height:40px!important;padding:9px 10px!important;font-size:11px!important}
  .filepat-language-switch,.lang-switch,.filekit-lang-switch{overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;scrollbar-width:none!important}
  .filepat-language-switch::-webkit-scrollbar,.lang-switch::-webkit-scrollbar,.filekit-lang-switch::-webkit-scrollbar{display:none!important}
  .filepat-language-switch button,.lang-switch button,.filekit-lang-switch button{flex:0 0 auto!important}

  .directory{padding:20px 14px 48px!important}
  .fp-unified-grid{grid-template-columns:1fr!important}
  .fp-unified-tool{min-height:80px!important;padding:15px 14px!important}
  .fp-unified-type{min-width:40px!important;font-size:8px!important}
  .fp-unified-name{font-size:15px!important;line-height:1.4!important}
  .fp-unified-desc{font-size:10.5px!important;line-height:1.5!important}

  .page{padding:10px 8px 42px!important}
  .panel{padding:22px 12px 27px!important}
  .heading{display:block!important;margin-bottom:18px!important}
  .heading h1{font-size:24px!important;line-height:1.3!important}
  .heading p{font-size:12px!important;line-height:1.75!important}
  .keys{display:inline-block!important;margin-top:9px!important;max-width:100%!important;white-space:normal!important}
  .dropzone{min-height:230px!important;padding:24px 14px!important}
  .drop-title{font-size:14px!important;text-align:center!important}
  .drop-sub{font-size:10px!important;text-align:center!important;overflow-wrap:anywhere!important}
  .pick{width:auto!important;max-width:100%!important;min-height:44px!important}
  .setting-card,.runtime-settings .setting-card{grid-template-columns:1fr!important;gap:10px!important}
  .actionbar,.runtime-actionbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;align-items:stretch!important}
  .run,.runtime-run,.btn,.fp-btn{width:100%!important;min-height:46px!important}
  .files-head{flex-wrap:wrap!important}
  .row,.result,.queue-row{flex-wrap:wrap!important}
  .name,.result-name{overflow-wrap:anywhere!important;white-space:normal!important}
  .remove{margin-left:auto!important}
  .result{align-items:flex-start!important}
  .save,.runtime-results a{width:100%!important;justify-content:center!important}
  .progress-top{font-size:10px!important}

  .tool-head,.seo-header{padding:11px 0!important;gap:9px!important}
  .tool-main,.fp-tool-main,.seo-main{padding-top:22px!important}
  .tool-main h1{font-size:28px!important;line-height:1.35!important}
  .lead{font-size:13px!important;line-height:1.8!important}
  .hero-card,.panel-card,.fp-tool-card{padding:14px!important}
  .tabs{margin-inline:-14px!important;padding-inline:14px!important}
  .grid-2,.fp-controls{grid-template-columns:1fr!important}
  .actions,.fp-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .actions .btn,.fp-actions .fp-btn{width:100%!important}
  .drop,.fp-drop{min-height:190px!important;padding:24px 12px!important}
  .preview,.fp-preview{min-height:160px!important}

  .info-section{margin-top:42px!important}
  .howto-list,.articles{grid-template-columns:1fr!important}
  .fp-practical-guide-final__grid,.filepat-tool-guide-v13__grid{grid-template-columns:1fr!important}
  .fp-practical-guide-final,.filepat-tool-guide-v13{margin-top:44px!important;padding-inline:0!important}
  .seo-content,.filepat-seo-section{padding-inline:16px!important}
  .seo-content h2{font-size:23px!important}
  .simple-page{padding:14px 10px 38px!important}
  .simple-card{padding:22px 18px!important}
  .simple-card h1{font-size:24px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
  .simple-card h2{font-size:18px!important;line-height:1.5!important}
  .simple-card p,.simple-card li{font-size:13px!important;line-height:1.9!important}

  .filepat-related-tools{max-width:100%!important;overflow:hidden!important}
  .filepat-related-tools-list{max-width:100%!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important}
  .filepat-related-tool{flex:0 0 auto!important;max-width:80vw!important}

  .footer-wrap{padding-inline:14px!important}
  .footer-links{grid-template-columns:1fr 1fr!important;gap:18px 14px!important}
  .copyright{flex-direction:column!important;gap:5px!important}
}

/* Narrow phones: prevent cramped two-column header controls and keep all actions reachable. */
@media (max-width:430px){
  .topbar{grid-template-columns:minmax(0,1fr) auto!important}
  .brand{font-size:14px!important}
  .logo{width:28px!important;height:28px!important;min-width:28px!important}
  .filepat-language-switch,.lang-switch,.filekit-lang-switch{max-width:172px!important}
  .mainnav a{font-size:10px!important;padding-inline:8px!important}
  .sidebar .tool,.sidebar .tool.tool-link{min-width:122px!important;max-width:175px!important}
  .sidebar .tool{font-size:10px!important}
  .panel{padding-inline:10px!important}
  .dropzone{min-height:210px!important}
  .drop-plus{width:38px!important;height:38px!important}
  .tool-main h1{font-size:25px!important}
  .tool-page{padding-inline:10px!important}
  .tool-head{display:flex!important;flex-wrap:wrap!important}
  .tool-head .back{font-size:12px!important}
  .filepat-language-switch{margin-left:auto!important}
  .footer-links{grid-template-columns:1fr!important}
}

/* Safety for embedded/captured content and long filenames. */
.filepat-runtime,.hero-card,.panel-card,.fp-tool-card,.simple-card,.seo-content,.filepat-seo-section{overflow-wrap:anywhere!important}
.runtime-note,.keys{overflow-wrap:anywhere!important}
.runtime-drop,.dropzone,.drop,.fp-drop{contain:paint}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* FilePat responsive refinement v2
   CSS/HTML presentation only. Existing JavaScript remains locked and unchanged. */

/* Never let a text-heavy child force the layout wider than the viewport. */
.topbar > *,
.tool-head > *,
.seo-header > *,
.filepat-main-with-side-ad > *,
.tool-layout > *,
.panel > *,
.heading > *,
.files-head > *,
.actionbar > *,
.filepat-runtime > *,
.runtime-top > *,
.runtime-settings > *,
.runtime-results > *,
.info-section > *,
.section-head > *{
  min-width:0!important;
  max-width:100%!important;
}

/* Headings, file names and generated settings should wrap rather than overflow. */
h1,h2,h3,h4,h5,h6,
.tool-main h1,.fp-tool-main h1,.seo-main h1,
.setting label,.setting-card label,
.queue .name,.result .name,.result-name,
.file-name,.filename,.filepat-file-name,
button,.btn,.run,.save,.clear,.pick{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Standalone SEO/tool headers: keep brand, back link and language control on one safe flow. */
.seo-header,.tool-head{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.seo-header .brand,.tool-head .brand{flex:0 1 auto!important}
.seo-header .back,.tool-head .back{flex:0 1 auto!important;min-width:0!important}
.seo-header .filekit-lang-switch,.tool-head .filekit-lang-switch,
.seo-header .filepat-language-switch,.tool-head .filepat-language-switch{
  margin-left:auto!important;
}

/* Workspace: the sidebar remains a horizontal tool rail on smaller screens. */
@media (max-width:900px){
  .tool-layout{display:flex!important;flex-direction:column!important;min-width:0!important}
  .sidebar{
    width:100%!important;
    flex:0 0 auto!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    overscroll-behavior-x:contain!important;
  }
  .sidebar .tool,.sidebar .tool.tool-link{
    flex:0 0 146px!important;
    width:146px!important;
    min-width:146px!important;
    max-width:146px!important;
    white-space:normal!important;
    text-align:left!important;
  }
  .sidebar .side-format{flex:0 0 34px!important;width:34px!important;min-width:34px!important}
  .sidebar .tool > .lang-ja,.sidebar .tool > .lang-en{
    min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .panel{width:100%!important;min-width:0!important}
  .filepat-main-with-side-ad{width:100%!important}
}

/* Phones: predictable one-column controls with generous touch targets. */
@media (max-width:680px){
  .topbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
  }
  .brand{max-width:calc(100vw - 180px)!important}
  .mainnav{grid-column:1/-1!important;grid-row:2!important}

  .tool-head,.seo-header{align-items:flex-start!important}
  .tool-head .back,.seo-header .back{max-width:55%!important}
  .tool-head .filekit-lang-switch,.seo-header .filekit-lang-switch{max-width:45%!important}

  .panel{padding:20px 12px 26px!important}
  .heading{gap:8px!important}
  .heading > div:first-child{min-width:0!important}
  .heading h1{max-width:100%!important}
  .keys{max-width:100%!important;line-height:1.55!important}

  .dropzone{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;text-align:center!important}
  .drop-title,.drop-sub,.pick{max-width:100%!important}
  .pick{white-space:normal!important;text-align:center!important}

  .settings{width:100%!important;min-width:0!important}
  .settings > *, .runtime-settings > *{min-width:0!important;max-width:100%!important}
  .setting,.setting-card,.field,.fp-control{width:100%!important;min-width:0!important}
  .setting input,.setting select,.setting textarea,
  .setting-card input,.setting-card select,.setting-card textarea,
  .field input,.field select,.field textarea,
  .fp-control input,.fp-control select,.fp-control textarea{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }

  .files-head{gap:8px!important;align-items:center!important}
  .files-head .clear{margin-left:auto!important;min-height:44px!important}
  .actionbar{gap:9px!important}
  .privacy{line-height:1.6!important}
  .progress-track{max-width:100%!important}

  .queue,.results,.result,.queue-row{width:100%!important;min-width:0!important}
  .result > *, .queue-row > *{min-width:0!important;max-width:100%!important}
  .result .name,.queue-row .name{flex:1 1 100%!important}

  .filepat-side-ad{padding-top:14px!important}
  .filepat-side-ad__inner{width:300px!important;max-width:100%!important;min-height:250px!important}
}

/* Very small phones: avoid a squeezed header; keep controls reachable. */
@media (max-width:380px){
  .brand{max-width:calc(100vw - 160px)!important}
  .mainnav a{font-size:10px!important;padding-inline:7px!important}
  .filepat-language-switch,.lang-switch,.filekit-lang-switch{max-width:150px!important}
  .filepat-language-switch button,.lang-switch button,.filekit-lang-switch button{min-width:32px!important;padding-inline:6px!important}
  .sidebar .tool,.sidebar .tool.tool-link{
    flex-basis:132px!important;width:132px!important;min-width:132px!important;max-width:132px!important;
  }
  .panel{padding-inline:9px!important}
  .heading h1{font-size:23px!important}
  .dropzone{min-height:200px!important;padding-inline:10px!important}
}

/* Tables and long preformatted data: scroll inside the component, not the page. */
.table-wrap,.table-responsive,.overflow-table,.data-table-wrap{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
.table-wrap table,.table-responsive table,.overflow-table table,.data-table-wrap table{min-width:max-content!important;max-width:none!important}

/* Media previews never become wider than their containing block. */
.preview img,.preview canvas,.preview video,.preview iframe,
.preview-area img,.preview-area canvas,.preview-area video,.preview-area iframe,
.preview-wrap img,.preview-wrap canvas,.preview-wrap video,.preview-wrap iframe,
#preview img,#preview canvas,#preview video,#preview iframe{
  max-width:100%!important;
  width:auto!important;
  height:auto!important;
}

/* Respect intentional horizontal rails while preventing the outer page from scrolling. */
.sidebar,.tabs,.mainnav,.filepat-related-tools-list,.seo-links{overscroll-behavior-inline:contain!important}

/* Non-Japanese display fix: the language engine translates the .lang-ja
   source node for ES / zh-CN / PT. Hide the parallel English source node so
   mobile tool-rail items do not render two labels at once. */
html[data-lang="es"] .lang-en,
html[data-lang="zh-CN"] .lang-en,
html[data-lang="pt"] .lang-en{display:none!important}
html[data-lang="es"] .lang-ja,
html[data-lang="zh-CN"] .lang-ja,
html[data-lang="pt"] .lang-ja{display:inline!important}

/* Allow longer translated labels to breathe on the mobile horizontal rail. */
@media (max-width:680px){
  #tools.tool-layout > .sidebar .tool,
  #tools.tool-layout > .sidebar .tool.tool-link{
    flex-basis:168px!important;
    width:168px!important;
    min-width:168px!important;
    max-width:168px!important;
    min-height:52px!important;
    height:auto!important;
  }
}
@media (max-width:430px){
  #tools.tool-layout > .sidebar .tool,
  #tools.tool-layout > .sidebar .tool.tool-link{
    flex-basis:160px!important;
    width:160px!important;
    min-width:160px!important;
    max-width:160px!important;
    min-height:52px!important;
  }
}
@media (max-width:380px){
  #tools.tool-layout > .sidebar .tool,
  #tools.tool-layout > .sidebar .tool.tool-link{
    flex-basis:154px!important;
    width:154px!important;
    min-width:154px!important;
    max-width:154px!important;
  }
}


/* FilePat mobile repair v5
   Presentation-only overrides for the app workspace.
   Existing processing JavaScript remains unchanged and locked. */
@media (max-width: 768px){
  html,body{width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
  main{width:100%!important;min-width:0!important;max-width:100%!important}

  /* Keep the top ad at its intended mobile height so it cannot create a large blank band. */
  .filepat-ad-top{
    display:block!important;
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    margin:0 0 8px!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .filepat-ad-top .ad-slot-pc{display:none!important}
  .filepat-ad-top .ad-slot-sp{
    display:block!important;
    width:min(320px,100%)!important;
    max-width:100%!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    margin:0 auto!important;
  }
  .filepat-ad-top iframe,
  .filepat-ad-top img{max-width:100%!important;max-height:50px!important;height:auto!important}

  /* The workspace must begin immediately after the ad and stay inside the viewport. */
  .page{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px 14px 40px!important;
  }
  .filepat-main-with-side-ad{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:14px!important;
  }

  /* Mobile workspace: one horizontal tool rail, then the actual work panel. */
  #tools.tool-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    overflow:visible!important;
    border-radius:10px!important;
  }
  #tools.tool-layout > .sidebar{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:7px!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    border-right:0!important;
    border-bottom:1px solid #d9dfe5!important;
  }
  #tools.tool-layout > .sidebar::-webkit-scrollbar{display:none!important}
  #tools.tool-layout > .sidebar .tools-label,
  #tools.tool-layout > .sidebar .tools-group-label,
  #tools.tool-layout > .sidebar .tools-group-note{
    display:none!important;
  }
  #tools.tool-layout > .sidebar .tools-external-divider{
    flex:0 0 auto!important;
    width:auto!important;
    height:auto!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 6px!important;
    display:flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    border:0!important;
    font-size:9px!important;
  }
  #tools.tool-layout > .sidebar .tool,
  #tools.tool-layout > .sidebar .tool.tool-link{
    display:flex!important;
    flex:0 0 148px!important;
    width:148px!important;
    min-width:148px!important;
    max-width:148px!important;
    min-height:46px!important;
    height:46px!important;
    margin:0!important;
    padding:7px 10px!important;
    gap:8px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }
  #tools.tool-layout > .sidebar .tool .side-format,
  #tools.tool-layout > .sidebar .tool .ico{
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    height:30px!important;
    margin:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  #tools.tool-layout > .sidebar .tool > .lang-ja,
  #tools.tool-layout > .sidebar .tool > .lang-en{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.25!important;
  }

  /* Mobile language visibility must win over the generic display:block above.
     English uses .lang-en; Japanese and the translated JP-source spans used by
     Spanish, Simplified Chinese and Portuguese use .lang-ja. */
  html[data-lang="ja"] #tools.tool-layout > .sidebar .tool > .lang-ja,
  html[data-lang="es"] #tools.tool-layout > .sidebar .tool > .lang-ja,
  html[data-lang="zh-CN"] #tools.tool-layout > .sidebar .tool > .lang-ja,
  html[data-lang="pt"] #tools.tool-layout > .sidebar .tool > .lang-ja{display:block!important}
  html[data-lang="ja"] #tools.tool-layout > .sidebar .tool > .lang-en,
  html[data-lang="es"] #tools.tool-layout > .sidebar .tool > .lang-en,
  html[data-lang="zh-CN"] #tools.tool-layout > .sidebar .tool > .lang-en,
  html[data-lang="pt"] #tools.tool-layout > .sidebar .tool > .lang-en{display:none!important}
  html[data-lang="en"] #tools.tool-layout > .sidebar .tool > .lang-ja{display:none!important}
  html[data-lang="en"] #tools.tool-layout > .sidebar .tool > .lang-en{display:block!important}
  #tools.tool-layout > .sidebar .tool::before{display:none!important}
  #tools.tool-layout > .sidebar .tool.tool-link::after{display:none!important}

  #tools.tool-layout > .panel{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px 14px 24px!important;
    box-sizing:border-box!important;
  }
  #tools .sidebar + .panel .heading{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 16px!important;
    padding:0 0 14px!important;
    overflow:visible!important;
  }
  #tools .sidebar + .panel .heading > div:first-child{width:100%!important;min-width:0!important}
  #tools .sidebar + .panel .heading h1{
    font-size:25px!important;
    line-height:1.3!important;
    margin:4px 0 5px!important;
    max-width:100%!important;
  }
  #tools .sidebar + .panel .heading p{
    font-size:12px!important;
    line-height:1.65!important;
    max-width:100%!important;
  }
  #tools .sidebar + .panel .keys{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin-top:8px!important;
    white-space:normal!important;
  }

  /* Compact, predictable upload area on phones. */
  #tools .dropzone{
    width:100%!important;
    min-width:0!important;
    min-height:230px!important;
    height:auto!important;
    padding:24px 12px!important;
    border-radius:10px!important;
  }
  #tools .drop-title{font-size:17px!important}
  #tools .drop-sub{font-size:12px!important}
  #tools .pick{width:auto!important;max-width:100%!important;min-height:44px!important}

  #tools .settings,
  #tools .setting-card,
  #tools .files-head,
  #tools .queue,
  #tools .actionbar,
  #tools .progress,
  #tools .results{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #tools .setting-card{grid-template-columns:1fr!important}
  #tools .actionbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important}
  #tools .actionbar .run{width:100%!important;min-height:46px!important}
  #tools .privacy{max-width:100%!important;overflow-wrap:anywhere!important}
  #tools .row,#tools .result{width:100%!important;min-width:0!important}

  /* Keep the following desktop-side ad after the tool, not inside the mobile rail. */
  .filepat-side-ad{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
  }
  .filepat-side-ad__inner{
    width:300px!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:250px!important;
    margin:0 auto!important;
  }
}

@media (max-width: 430px){
  .page{padding-left:12px!important;padding-right:12px!important}
  #tools.tool-layout > .sidebar{padding:6px!important;gap:5px!important}
  #tools.tool-layout > .sidebar .tool,
  #tools.tool-layout > .sidebar .tool.tool-link{
    flex-basis:142px!important;
    width:142px!important;
    min-width:142px!important;
    max-width:142px!important;
    min-height:44px!important;
    height:44px!important;
    padding:7px 9px!important;
  }
  #tools.tool-layout > .sidebar .tool .side-format,
  #tools.tool-layout > .sidebar .tool .ico{
    flex-basis:30px!important;
    width:30px!important;
    min-width:30px!important;
    height:28px!important;
  }
  #tools.tool-layout > .panel{padding-left:12px!important;padding-right:12px!important}
  #tools .sidebar + .panel .heading h1{font-size:23px!important}
  #tools .dropzone{min-height:215px!important;padding:20px 10px!important}
}

@media (max-width: 360px){
  .page{padding-left:10px!important;padding-right:10px!important}
  #tools.tool-layout > .sidebar .tool,
  #tools.tool-layout > .sidebar .tool.tool-link{
    flex-basis:134px!important;
    width:134px!important;
    min-width:134px!important;
    max-width:134px!important;
  }
  #tools.tool-layout > .panel{padding-left:10px!important;padding-right:10px!important}
}

/* Mobile workspace separation — final fix
   Sidebar must occupy normal document flow before the working panel.
   This prevents the tool title/description from rendering underneath the
   horizontal tool rail on phones. CSS only; no JS or processing changes. */
@media (max-width: 768px){
  #tools.tool-layout{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  #tools.tool-layout > .sidebar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2!important;
    flex:0 0 auto!important;
    order:1!important;
    width:100%!important;
    height:auto!important;
    min-height:52px!important;
    max-height:none!important;
    margin:0!important;
    transform:none!important;
  }
  #tools.tool-layout > .panel{
    position:relative!important;
    z-index:1!important;
    flex:0 0 auto!important;
    order:2!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    transform:none!important;
    clear:both!important;
    padding-top:22px!important;
  }
  #tools.tool-layout > .panel .heading{
    position:relative!important;
    z-index:1!important;
    margin-top:0!important;
  }
}

@media (max-width: 430px){
  #tools.tool-layout > .sidebar{
    min-height:50px!important;
    padding:6px!important;
  }
  #tools.tool-layout > .panel{
    padding-top:20px!important;
  }
}



/* ===== merged from /seo-responsive-polish.css ===== */
/* FilePat SEO / mobile spacing polish. CSS only. */
.filepat-seo-section{width:100%;box-sizing:border-box;display:block;text-align:center}
.filepat-seo-inner{width:min(1080px,100%);margin-inline:auto!important}
.filepat-seo-heading{margin-inline:auto!important;text-align:center!important}
.filepat-seo-grid{width:min(1080px,100%);margin-inline:auto!important}
.fp-practical-guide-final{width:min(1080px,calc(100% - 32px));margin-left:auto!important;margin-right:auto!important}
.fp-practical-guide-final__head,.fp-practical-guide-final__grid,.fp-practical-guide-final__note{margin-left:auto!important;margin-right:auto!important}
@media(max-width:680px){
  .filepat-seo-section{padding-left:20px!important;padding-right:20px!important}
  .filepat-seo-inner,.filepat-seo-grid{width:100%!important}
  .filepat-seo-heading{padding-inline:2px!important}
  .fp-practical-guide-final{width:calc(100% - 28px)!important;margin-left:auto!important;margin-right:auto!important}
  .fp-practical-guide-final__head{padding-inline:2px!important}
}
@media(max-width:380px){
  .filepat-seo-section{padding-left:16px!important;padding-right:16px!important}
  .fp-practical-guide-final{width:calc(100% - 20px)!important}
}



/* ===== merged from /seo-article.css ===== */
/* FilePat practical SEO articles — content-first, responsive, no layout dependence on tool UI */
.fp-practical-guide-article-final{width:min(920px,calc(100% - 48px));margin:84px auto 0;padding:48px 0 64px;border-top:1px solid #e3e6ea;box-sizing:border-box;color:#20242a;overflow-wrap:anywhere}
.fp-practical-guide-article-final__eyebrow{margin:0 0 10px;font:700 10px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.14em;color:#6f7883;text-transform:uppercase}
.fp-practical-guide-article-final h2{margin:0 0 22px;font:600 clamp(25px,3vw,34px)/1.45 "Noto Serif JP",Georgia,"Times New Roman",serif;letter-spacing:.01em}
.fp-practical-guide-article-final__intro{margin:0 auto 34px;max-width:820px;font:15px/2 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#4f5862}
.fp-practical-guide-article-final__section{padding:26px 0;border-top:1px solid #e7e9ed}
.fp-practical-guide-article-final__section:last-child{border-bottom:1px solid #e7e9ed}
.fp-practical-guide-article-final h3{margin:0 0 11px;font:600 18px/1.6 "Noto Serif JP",Georgia,"Times New Roman",serif;color:#20242a}
.fp-practical-guide-article-final p{margin:0;font:14px/2 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#505862}
.fp-practical-guide-article-final a{color:inherit;text-underline-offset:3px}
@media(max-width:760px){.fp-practical-guide-article-final{width:calc(100% - 36px);margin-top:62px;padding:36px 0 48px}.fp-practical-guide-article-final h2{font-size:24px;margin-bottom:18px}.fp-practical-guide-article-final__intro{font-size:14px;line-height:1.95;margin-bottom:26px}.fp-practical-guide-article-final__section{padding:22px 0}.fp-practical-guide-article-final h3{font-size:17px}.fp-practical-guide-article-final p{font-size:13.5px;line-height:1.95}}
@media(max-width:390px){.fp-practical-guide-article-final{width:calc(100% - 32px);margin-top:54px}.fp-practical-guide-article-final__intro{font-size:13.5px}.fp-practical-guide-article-final p{font-size:13px}}



/* ===== merged from /seo-gutters.css ===== */
/* FilePat content gutters: keep long-form text centered without touching tool logic. */
:where(
  .fp-practical-guide-article-final,
  .filepat-seo-section,
  .filepat-seo-inner,
  .fp-practical-guide-final,
  .filepat-related-tools,
  .filepat-related-tools-list,
  .info-section,
  .seo-content,
  .seo-inner,
  .fp-seo-content,
  .seo-section,
  .article-wrap,
  .simple-page
){
  width: min(1040px, calc(100% - 40px)) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Keep text readable: center the content block, not every line of prose. */
:where(
  .fp-practical-guide-article-final__intro,
  .fp-practical-guide-article-final__section,
  .seo-content,
  .fp-seo-content,
  .seo-section,
  .article-wrap,
  .simple-page
){
  overflow-wrap: anywhere;
}

@media (max-width: 760px){
  :where(
    .fp-practical-guide-article-final,
    .filepat-seo-section,
    .filepat-seo-inner,
    .fp-practical-guide-final,
    .filepat-related-tools,
    .filepat-related-tools-list,
    .info-section,
    .seo-content,
    .seo-inner,
    .fp-seo-content,
    .seo-section,
    .article-wrap,
    .simple-page
  ){
    width: calc(100% - 32px) !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 390px){
  :where(
    .fp-practical-guide-article-final,
    .filepat-seo-section,
    .filepat-seo-inner,
    .fp-practical-guide-final,
    .filepat-related-tools,
    .filepat-related-tools-list,
    .info-section,
    .seo-content,
    .seo-inner,
    .fp-seo-content,
    .seo-section,
    .article-wrap,
    .simple-page
  ){
    width: calc(100% - 24px) !important;
  }
}

/* FilePat global content frame v2
   Apply the same centered reading/work area to every public page family.
   Ads, processing logic and DOM are untouched. */
:where(
  .directory,
  .page,
  .tool-page,
  .tool-main,
  .fp-tool-main,
  .simple-page
){
  width:min(1240px, calc(100% - 32px)) !important;
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* The older base styles already provide internal padding; keep the outer frame
   responsible for the visible page gutters instead of stacking padding twice. */
.directory,
.page,
.tool-page,
.tool-main,
.fp-tool-main,
.simple-page{
  overflow-wrap:anywhere;
}

/* Tool directory/index pages without a shared class. */
main:has(> .filepat-ad-wrap.filepat-ad-tool-index),
main:has(> .tool-card){
  width:min(1240px, calc(100% - 32px)) !important;
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
  overflow-wrap:anywhere;
}

/* Standalone narrow text/tool pages using an inline max-width. */
main[style*="max-width:820px"],
main[style*="max-width:900px"],
main[style*="max-width:1000px"]{
  width:min(1240px, calc(100% - 32px)) !important;
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

@media (max-width:760px){
  :where(
    .directory,
    .page,
    .tool-page,
    .tool-main,
    .fp-tool-main,
    .simple-page
  ){
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  main:has(> .filepat-ad-wrap.filepat-ad-tool-index),
  main:has(> .tool-card),
  main[style*="max-width:820px"],
  main[style*="max-width:900px"],
  main[style*="max-width:1000px"]{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:390px){
  :where(
    .directory,
    .page,
    .tool-page,
    .tool-main,
    .fp-tool-main,
    .simple-page
  ),
  main:has(> .filepat-ad-wrap.filepat-ad-tool-index),
  main:has(> .tool-card),
  main[style*="max-width:820px"],
  main[style*="max-width:900px"],
  main[style*="max-width:1000px"]{
    width:calc(100% - 24px) !important;
  }
}

/* FilePat global content frame v3
   Same outer gutters for homepage, app workspace, standalone tools and text pages. */
:where(.seo-main,.filepat-runtime){
  width:min(920px, calc(100% - 32px)) !important;
  max-width:920px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

@media (max-width:760px){
  :where(.seo-main,.filepat-runtime){
    width:calc(100% - 32px) !important;
    max-width:none !important;
  }
}

@media (max-width:390px){
  :where(.seo-main,.filepat-runtime){
    width:calc(100% - 24px) !important;
  }
}



/* ===== merged from /filepat-layout-final-v5.css ===== */
/* FilePat final layout repair v5 — visual/layout only. Processing logic is untouched. */

/* The practical guide gets its own viewport-centered rail so side ads, tool columns,
   and nested page frames cannot shift it horizontally. */
.fp-practical-guide-rail{
  display:block !important;
  position:relative !important;
  float:none !important;
  clear:both !important;
  box-sizing:border-box !important;
  width:min(980px, calc(100vw - 64px)) !important;
  max-width:980px !important;
  margin:72px auto 0 !important;
  padding:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}
.fp-practical-guide-rail > .fp-practical-guide-article-final{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* The footer uses one predictable centered frame on every tool and information page.
   This also cancels the older responsive layer that expanded .footer-wrap to 100%. */
.footer-wrap{
  display:block !important;
  width:min(1180px, calc(100% - 32px)) !important;
  max-width:1180px !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
  padding:0 24px 30px !important;
}
.footer-wrap footer{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.footer-wrap .footer-inner{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.footer-wrap .footer-links{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.footer-wrap .footer-links a,
.footer-wrap .footer-social-link{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

@media (max-width:760px){
  .fp-practical-guide-rail{
    width:calc(100vw - 32px) !important;
    max-width:980px !important;
    margin-top:52px !important;
  }
  .fp-practical-guide-rail > .fp-practical-guide-article-final{
    padding-top:36px !important;
    padding-bottom:48px !important;
  }
  .footer-wrap{
    width:calc(100% - 24px) !important;
    max-width:1180px !important;
    padding:0 16px 24px !important;
  }
}

@media (max-width:390px){
  .fp-practical-guide-rail{
    width:calc(100vw - 24px) !important;
  }
  .footer-wrap{
    width:calc(100% - 16px) !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* Footer viewport-frame repair v6 */
/* Tool/info pages place the footer inside their narrower page shell.
   Let the footer itself span the viewport while keeping its contents on the
   same centered 1180px reading frame as the top page. */
.footer-wrap{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 clamp(16px, calc((100vw - 1180px)/2 + 24px), 52px) 30px !important;
  box-sizing:border-box !important;
}
.footer-wrap footer{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.footer-wrap .footer-inner,
.footer-wrap .footer-links,
.footer-wrap .copyright{
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
@media(max-width:760px){
  .footer-wrap{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 16px 24px !important;
  }
  .footer-wrap .footer-inner,
  .footer-wrap .footer-links,
  .footer-wrap .copyright{
    width:100% !important;
    max-width:none !important;
  }
}
@media(max-width:390px){
  .footer-wrap{padding:0 12px 22px !important;}
}



/* ===== merged from /filepat-enterprise.css ===== */

/* FilePat Enterprise surface v1 — visual/layout only. Never use this file for runtime logic. */
:root{
  --fp-bg:#f5f6f8;
  --fp-surface:#ffffff;
  --fp-ink:#18212b;
  --fp-muted:#66727f;
  --fp-subtle:#8a95a1;
  --fp-line:#dfe4e9;
  --fp-line-strong:#cfd7df;
  --fp-accent:#24577f;
  --fp-accent-soft:#edf3f7;
  --fp-radius:10px;
  --fp-content:1180px;
}
html{background:var(--fp-bg)!important;scroll-behavior:smooth}
body{background:var(--fp-bg)!important;color:var(--fp-ink)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif!important;font-size:14px!important;line-height:1.7!important}
body::selection{background:#dbe8f0}
a{color:inherit}
/* Header: restrained enterprise navigation, no gradients/glass. */
header.topbar{position:sticky!important;top:0!important;z-index:1000!important;min-height:68px!important;width:100%!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:28px!important;padding:0 max(24px,calc((100vw - var(--fp-content))/2))!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid var(--fp-line)!important;box-shadow:0 1px 0 rgba(24,33,43,.02)!important;backdrop-filter:none!important}
header.topbar .brand{font-size:16px!important;font-weight:760!important;letter-spacing:-.02em!important;color:var(--fp-ink)!important}
header.topbar .brand .logo{width:32px!important;height:32px!important;min-width:32px!important;border-radius:8px!important;margin:0!important;background:transparent url('./assets/filepat-mark.png') center/contain no-repeat!important}
header.topbar .mainnav{justify-self:center!important;justify-content:center!important;gap:28px!important;min-width:0!important}
header.topbar .mainnav>a{min-height:40px!important;padding:9px 0!important;color:#4d5965!important;font-size:12px!important;font-weight:620!important;border-bottom:2px solid transparent!important}
header.topbar .mainnav>a:hover{color:var(--fp-ink)!important;border-bottom-color:transparent!important}
header.topbar .filepat-language-switch{display:flex!important;align-items:center!important;justify-content:flex-end!important;min-width:110px!important}
header.topbar .filepat-language-switch button,header.topbar .filepat-language-switch select{font-family:inherit!important;font-size:11px!important;font-weight:600!important;line-height:1.2!important;border:1px solid var(--fp-line)!important;border-radius:7px!important;background:#fff!important;color:#4f5a65!important;min-height:32px!important;padding:7px 9px!important}
header.topbar .filepat-language-switch select{min-width:98px!important}
/* Main surfaces */
.page,.simple-page,.seo-main,.directory{max-width:var(--fp-content)!important;margin-left:auto!important;margin-right:auto!important}
.page{padding:34px 28px 68px!important}
.seo-main{padding:30px 28px 72px!important}
.directory{padding:30px 28px 64px!important}
.info-section,.seo-content,.filepat-home-intro{max-width:var(--fp-content)!important}
/* Reduce the template-card feel. */
.feature-card,.howto-list>div,.articles article,.simple-card,.fact,.section,.facts,.filepat-related-tools,.seo-content article{box-shadow:none!important}
.feature-card,.howto-list>div,.articles article,.simple-card{border:1px solid var(--fp-line)!important;border-radius:var(--fp-radius)!important;background:#fff!important}
/* Tool layout */
.tool-layout,.filepat-standalone-layout{border:1px solid var(--fp-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 8px 24px rgba(16,28,40,.035)!important;overflow:hidden!important}
.sidebar{padding:16px 12px!important;background:#fbfcfd!important;border-right:1px solid var(--fp-line)!important}
.sidebar-group{margin:0 0 17px!important}
.sidebar-group-title{margin:0 8px 6px!important;color:#8a96a2!important;font-size:10px!important;font-weight:760!important;letter-spacing:.07em!important}
.tools-label{padding:0 8px 13px!important;color:#6d7a87!important;font-size:9px!important;font-weight:800!important;letter-spacing:.16em!important}
.tool,.tool-link{width:100%!important;min-width:0!important;margin:1px 0!important;padding:8px 9px!important;border:1px solid transparent!important;border-radius:7px!important;background:transparent!important;color:#596571!important;text-align:left!important;display:flex!important;align-items:center!important;gap:9px!important;font-size:11px!important;font-weight:600!important;text-decoration:none!important;line-height:1.35!important}
.tool:hover,.tool-link:hover{background:#f0f4f7!important;color:var(--fp-ink)!important;border-color:#e3e8ec!important}
.tool.active,.tool-link.active{background:#eaf1f5!important;color:#183f5d!important;border-color:#d5e0e8!important}
.tool .ico,.tool-link .ico{width:25px!important;height:25px!important;min-width:25px!important;border-radius:5px!important;background:#eef2f5!important;color:#6f7d89!important;font-size:7px!important;font-weight:800!important}
.tool.active .ico,.tool-link.active .ico{background:#24577f!important;color:#fff!important}
.sidebar-all{display:flex!important;margin:8px 8px 1px!important;padding-top:11px!important;border-top:1px solid var(--fp-line)!important;color:#4d667a!important;font-size:10px!important;font-weight:650!important}
.panel{padding:34px 42px 38px!important}
.heading{margin-bottom:22px!important}
.heading h1,.seo-main>h1{font-size:30px!important;line-height:1.25!important;letter-spacing:-.025em!important;color:var(--fp-ink)!important}
.heading p,.seo-main>.lead{color:var(--fp-muted)!important;font-size:13px!important;line-height:1.85!important}
.eyebrow{font-size:9px!important;font-weight:780!important;letter-spacing:.16em!important;color:#7b8792!important}
.dropzone,.runtime-drop{border:1px dashed #bbc6d0!important;border-radius:10px!important;background:#f9fafb!important;min-height:320px!important;box-shadow:none!important}
.dropzone:hover,.runtime-drop:hover{background:#f5f8fa!important;border-color:#8ea2b1!important}
.drop-plus{background:#edf2f5!important;color:#47647a!important;border-radius:7px!important}
.pick,.run,.runtime-pick,.runtime-run{border-radius:7px!important;background:#1d4f73!important;color:#fff!important;font-weight:700!important;box-shadow:none!important}
.run:hover,.runtime-run:hover,.pick:hover,.runtime-pick:hover{background:#173f5b!important}
.setting-card,.runtime-settings{border:1px solid var(--fp-line)!important;border-radius:9px!important;background:#fafbfc!important}
.row,.result{border:1px solid var(--fp-line)!important;border-radius:8px!important;box-shadow:none!important}
.notice{border:1px solid var(--fp-line)!important;border-radius:8px!important;background:#f7f9fa!important}
.facts{gap:0!important;border-top:1px solid var(--fp-line)!important;border-bottom:1px solid var(--fp-line)!important;background:transparent!important}
.fact{padding:16px 18px!important;border-right:1px solid var(--fp-line)!important;background:#fff!important}
.fact:last-child{border-right:0!important}
.section{padding:0 0 28px!important;margin-top:40px!important;border-bottom:1px solid var(--fp-line)!important}
.section h2,.section-head h2,.seo-content h2{font-size:21px!important;line-height:1.4!important;letter-spacing:-.015em!important;color:var(--fp-ink)!important}
.section p,.faq details p,.seo-content article p{color:#596571!important;font-size:13px!important;line-height:1.95!important}
.filepat-related-tools{margin-top:36px!important;padding-top:22px!important;border-top:1px solid var(--fp-line)!important}
.filepat-related-tools-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border-top:1px solid var(--fp-line)!important}
.filepat-related-tool{padding:14px 16px!important;border-right:1px solid var(--fp-line)!important;border-bottom:1px solid var(--fp-line)!important;background:#fff!important;font-size:12px!important;font-weight:650!important}
.filepat-related-tool:hover{background:#f8fafb!important}
/* Homepage: stronger editorial hierarchy, not a grid of floating cards. */
.filepat-home-intro{border-bottom:1px solid var(--fp-line)!important;padding:16px 0 25px!important;margin-bottom:0!important}
.filepat-home-eyebrow{font-size:9px!important;color:#778593!important;letter-spacing:.16em!important}
.filepat-home-summary{font-size:24px!important;line-height:1.45!important;font-weight:650!important;color:var(--fp-ink)!important}
#tools.fp-unified-tools{padding-top:26px!important}
.fp-unified-head{border-bottom:1px solid var(--fp-line-strong)!important;padding-bottom:13px!important}
.fp-unified-head h2{font-size:21px!important;font-weight:650!important}
.fp-unified-head p{font-size:12px!important;color:#74808b!important}
.fp-unified-grid{border-left:1px solid var(--fp-line)!important}
.fp-unified-tool{min-height:116px!important;padding:18px 17px!important;border-right:1px solid var(--fp-line)!important;border-bottom:1px solid var(--fp-line)!important;background:#fff!important;box-shadow:none!important;border-radius:0!important}
.fp-unified-tool:hover{background:#f8fafb!important}
.fp-unified-type{color:#72808d!important}
.fp-unified-name{font-size:15px!important;font-weight:650!important}
.fp-unified-desc{font-size:11px!important;color:#7a8590!important}
/* Footer */
.footer-wrap{max-width:var(--fp-content)!important;padding:0 28px 34px!important}
.footer-wrap footer{padding:34px 0 0!important;border-top:1px solid var(--fp-line)!important;background:transparent!important}
.footer-inner{grid-template-columns:minmax(220px,1fr) 3fr!important;gap:56px!important}
.footer-brand strong{font-size:15px!important;color:var(--fp-ink)!important}
.footer-brand p{font-size:11px!important;color:#6d7883!important;line-height:1.7!important}
.footer-links{gap:30px!important}
.footer-links b{font-size:8px!important;letter-spacing:.14em!important;color:#87929d!important}
.footer-links a{font-size:11px!important;color:#596571!important;line-height:1.65!important}
.footer-links a:hover{color:#1d4f73!important;text-decoration:none!important}
.footer-operator{margin-top:13px!important}
.footer-operator img{border-radius:7px!important;border:1px solid var(--fp-line)!important}
.copyright{margin-top:26px!important;padding-top:14px!important;border-top:1px solid var(--fp-line)!important;color:#929ca6!important;font-size:9px!important}
/* Remove stale/duplicate mobile horizontal nav behavior from older CSS. */
@media(max-width:900px){
  header.topbar{grid-template-columns:auto minmax(0,1fr) auto!important;gap:14px!important;padding-left:18px!important;padding-right:18px!important}
  header.topbar .mainnav{gap:17px!important}
  .page,.seo-main,.directory{padding-left:18px!important;padding-right:18px!important}
  .panel{padding:28px 24px 32px!important}
  .filepat-related-tools-list{grid-template-columns:1fr 1fr!important}
  .footer-wrap{padding-left:18px!important;padding-right:18px!important}
  .footer-inner{grid-template-columns:1fr!important;gap:30px!important}
}
@media(max-width:680px){
  header.topbar{grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;align-items:center!important;min-height:62px!important;padding:9px 13px!important}
  header.topbar .mainnav{grid-column:1 / -1!important;grid-row:2!important;justify-content:flex-start!important;display:flex!important;flex-wrap:wrap!important;gap:12px 18px!important;overflow:visible!important;padding:2px 0 1px!important}
  header.topbar .mainnav>a{font-size:10px!important;min-height:29px!important;padding:4px 0!important}
  header.topbar .filepat-language-switch{grid-column:2!important;grid-row:1!important;min-width:auto!important}
  header.topbar .filepat-language-switch select{min-width:88px!important;height:32px!important}
  .page,.seo-main,.directory{padding-left:13px!important;padding-right:13px!important}
  .panel{padding:22px 15px 28px!important}
  .sidebar{border-right:0!important;border-bottom:1px solid var(--fp-line)!important;padding:13px!important}
  .tool-layout,.filepat-standalone-layout{grid-template-columns:1fr!important}
  .sidebar-group{margin-bottom:10px!important}
  .sidebar-group-title{margin-bottom:3px!important}
  .tool,.tool-link{font-size:10px!important;padding:7px 8px!important}
  .filepat-standalone-layout .sidebar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 7px!important}
  .filepat-standalone-layout .tools-label,.filepat-standalone-layout .sidebar-group-title,.filepat-standalone-layout .sidebar-all{grid-column:1 / -1!important}
  .filepat-related-tools-list{grid-template-columns:1fr!important}
  .facts{grid-template-columns:1fr!important}
  .fact{border-right:0!important;border-bottom:1px solid var(--fp-line)!important}
  .fact:last-child{border-bottom:0!important}
  .filepat-home-summary{font-size:19px!important}
  .fp-unified-grid{grid-template-columns:1fr!important}
  .fp-unified-tool{min-height:92px!important}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v15 — Full-bleed global header for every page/tool.
   Visual-only override: keeps existing markup and JavaScript untouched. */
header.topbar{
  width:100vw!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:28px!important;
  padding-left:max(28px,calc((100vw - 1240px)/2))!important;
  padding-right:max(28px,calc((100vw - 1240px)/2))!important;
}
header.topbar .brand{min-width:0!important}
header.topbar .mainnav{
  min-width:0!important;
  justify-content:center!important;
  align-items:center!important;
  gap:24px!important;
}
header.topbar .mainnav>a{flex:0 0 auto!important}
header.topbar .mainnav .filepat-a11y{
  margin-left:12px!important;
  flex:0 1 auto!important;
  justify-content:center!important;
}
header.topbar .filepat-language-switch{justify-self:end!important}

@media(max-width:1100px){
  header.topbar{gap:18px!important;padding-left:20px!important;padding-right:20px!important}
  header.topbar .mainnav{gap:16px!important}
  header.topbar .mainnav .filepat-a11y{margin-left:6px!important}
}

@media(max-width:760px){
  header.topbar{
    width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    grid-template-columns:1fr auto!important;
    grid-template-rows:auto auto!important;
    gap:8px 12px!important;
    padding:9px 14px!important;
  }
  header.topbar .mainnav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    justify-content:flex-start!important;
    gap:12px 18px!important;
    min-width:0!important;
  }
  header.topbar .mainnav .filepat-a11y{
    margin-left:0!important;
    justify-content:flex-start!important;
  }
  header.topbar .filepat-language-switch{grid-column:2!important;grid-row:1!important}
}



/* ===== merged from /pt/english-friendly.css ===== */
/* FilePat English-market presentation layer.
   Keeps the existing tool structure and interaction intact.
   No gradients, glow effects, oversized AI-style cards, or decorative motion. */

html[lang="en"]{
  --en-ink:#18212b;
  --en-text:#4d5965;
  --en-muted:#7b8792;
  --en-line:#dfe4e8;
  --en-soft:#f6f8fa;
  --en-white:#ffffff;
  --en-accent:#2563a6;
}

html[lang="en"] body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
  background:#fff;
}

/* Header: familiar, editorial-neutral, not 'AI dashboard' */
html[lang="en"] .topbar{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--en-line);
  box-shadow:none;
  backdrop-filter:none;
}
html[lang="en"] .brand{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:-.025em;color:var(--en-ink)}
html[lang="en"] .logo{box-shadow:none}
html[lang="en"] .mainnav{gap:20px}
html[lang="en"] .mainnav a{font-size:11px;font-weight:600;color:#5f6974;text-decoration:none}
html[lang="en"] .mainnav a:hover{color:var(--en-ink);text-decoration:none}

/* Selection / directory page: preserve the existing grid and sizing. */
html[lang="en"] .directory{max-width:1180px}
html[lang="en"] .directory-section-head h2,
html[lang="en"] .simple-card h1,
html[lang="en"] .section-head h2,
html[lang="en"] .seo-content h2{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
}
html[lang="en"] .directory-section-head p,
html[lang="en"] .office-card p,
html[lang="en"] .simple-card p,
html[lang="en"] .seo-content p{color:var(--en-text)}

html[lang="en"] .feature-card{
  border-color:#dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,33,43,.035);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
html[lang="en"] .feature-card:hover{
  border-color:#cbd3db;
  box-shadow:0 4px 12px rgba(24,33,43,.06);
  transform:translateY(-1px);
}
html[lang="en"] .feature-card strong{font-size:17px;color:var(--en-ink)}
html[lang="en"] .feature-card .use{color:#596572;font-size:13px;line-height:1.7}
html[lang="en"] .feature-card .go{color:#345f87;font-size:12px}
html[lang="en"] .feature-card .tag{font-size:9px;letter-spacing:.1em}
html[lang="en"] .file-icon{border-radius:7px}

/* Office cards remain simple and text-led. */
html[lang="en"] .office-card{
  border:1px solid #dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .office-card h3{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Work surface: same controls/DOM, calmer visual hierarchy. */
html[lang="en"] .tool-layout{
  border-color:#dfe4e8;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(24,33,43,.045);
}
html[lang="en"] .sidebar{background:#f8fafb;border-color:#dfe4e8}
html[lang="en"] .tool{border-radius:8px;color:#56616d}
html[lang="en"] .tool:hover{background:#f1f4f6;color:var(--en-ink)}
html[lang="en"] .tool.active{background:#edf3f8;color:var(--en-ink)}
html[lang="en"] .tool .ico{box-shadow:none}
html[lang="en"] .panel{background:#fff}
html[lang="en"] .heading h1{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .heading p{color:#687580}
html[lang="en"] .dropzone{border-color:#cbd3db;background:#f8fafb;border-radius:12px}
html[lang="en"] .dropzone:hover{background:#f4f7f9}
html[lang="en"] .dropzone.drag{border-color:var(--en-accent);background:#f8fbff}
html[lang="en"] .drop-title{color:var(--en-ink);font-weight:650}
html[lang="en"] .drop-sub{color:#7b8792}
html[lang="en"] .pick,
html[lang="en"] .run{background:#1f5d96;box-shadow:none}
html[lang="en"] .pick:hover,
html[lang="en"] .run:hover{background:#194f80}
html[lang="en"] .privacy{color:#78838e}
html[lang="en"] .setting-card,
html[lang="en"] .row,
html[lang="en"] .result{border-color:#e1e5e9;background:#fff;box-shadow:none}

/* Content pages */
html[lang="en"] .simple-page{max-width:920px}
html[lang="en"] .simple-card{border-color:#dfe4e8;border-radius:14px;box-shadow:0 6px 20px rgba(24,33,43,.035)}
html[lang="en"] .simple-card h2,
html[lang="en"] .simple-card h3{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .simple-card a{color:#245f95}
html[lang="en"] .back-link{color:#6d7883}

/* Existing SEO/help sections: keep content and layout, reduce decorative feel. */
html[lang="en"] .info-section,
html[lang="en"] .seo-content{color:var(--en-text)}
html[lang="en"] .howto-list>div,
html[lang="en"] .articles article,
html[lang="en"] .faq details{
  border-color:#e0e5e9;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .howto-list b{color:#42617d}
html[lang="en"] .faq summary{color:var(--en-ink)}

/* English footer. The same footer structure is used on every English page. */
html[lang="en"] .footer-wrap{max-width:1180px}
html[lang="en"] .footer-wrap footer{border-top-color:#dfe4e8;color:#7b8792}
html[lang="en"] .footer-brand strong{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html[lang="en"] .footer-brand p{color:#7b8792}
html[lang="en"] .footer-links b{color:#9aa3ac}
html[lang="en"] .footer-links a{color:#697580}
html[lang="en"] .footer-links a:hover{color:var(--en-ink)}
html[lang="en"] .copyright{border-top-color:#e7eaed;color:#9aa3ac}

/* The directory page previously ended with a small text line. Keep it understated. */
html[lang="en"] .directory-foot{border-top:1px solid #e7eaed;color:#8b96a0}

@media(max-width:900px){
  html[lang="en"] .topbar{backdrop-filter:none}
}
@media(max-width:620px){
  html[lang="en"] .feature-card{border-radius:11px}
  html[lang="en"] .tool-layout{border-radius:12px}
  html[lang="en"] .simple-card{border-radius:12px}
}



/* ===== merged from /related-tools.css ===== */
/* FilePat Step 5 — related tools: compact, calm, mobile-scrollable. */
.filepat-related-tools{margin:38px 0 0;padding:28px 0 0;border-top:1px solid #e5e5e5}
.filepat-related-tools h2{margin:0 0 14px;font-size:20px;line-height:1.4;color:#17191d}
.filepat-related-tools-list{display:flex;flex-wrap:wrap;gap:9px}
.filepat-related-tool{display:inline-flex;align-items:center;min-height:42px;padding:9px 13px;border:1px solid #dfe3e7;border-radius:7px;background:#fff;color:#30353b;text-decoration:none;font-size:13px;line-height:1.35;box-sizing:border-box}
.filepat-related-tool:hover{background:#f8fafb;border-color:#cbd2da}
.filepat-related-tool:focus-visible{outline:2px solid #244f7d;outline-offset:2px}
@media(max-width:700px){.filepat-related-tools{margin-top:30px;padding-top:24px}.filepat-related-tools h2{font-size:18px;margin-bottom:11px}.filepat-related-tools-list{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.filepat-related-tool{flex:0 0 auto;min-height:44px;font-size:12px;padding:9px 12px}.filepat-related-tools-list::-webkit-scrollbar{height:6px}}



/* ===== merged from /tools-runtime.css ===== */

.filepat-runtime{margin:28px 0 34px}.filepat-runtime *{box-sizing:border-box}.runtime-panel{border:1px solid var(--jp-rule,#d9d4ca);background:#fffdf8;border-radius:5px;padding:24px;box-shadow:none}.runtime-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--jp-rule,#d9d4ca);padding-bottom:18px;margin-bottom:18px}.runtime-top h2{margin:4px 0 5px;font-size:clamp(22px,3vw,31px);line-height:1.35}.runtime-desc{margin:0;color:#6b665f;font-size:13px;line-height:1.8}.runtime-note{font-size:11px;color:#777167;white-space:nowrap;padding-top:5px}.runtime-drop{display:flex;align-items:center;justify-content:center;min-height:190px;border:1px dashed #b9b1a4;border-radius:4px;background:#fbf8f0;text-align:center;padding:24px;cursor:pointer;transition:background .15s,border-color .15s}.runtime-drop.drag{background:#f4eee2;border-color:#7a6b59}.runtime-drop:focus-within{outline:3px solid rgba(75,91,119,.18);outline-offset:2px}.runtime-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.runtime-drop-content{display:grid;gap:7px;justify-items:center}.runtime-drop-title{font-weight:700;color:#27241f}.runtime-drop-sub{font-size:12px;color:#756e64}.runtime-pick{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 16px;border:1px solid #706453;border-radius:4px;background:#fff;color:#27241f;font-weight:700;cursor:pointer}.runtime-settings{margin:18px 0}.runtime-settings .setting-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;border-top:1px solid var(--jp-rule,#d9d4ca);border-bottom:1px solid var(--jp-rule,#d9d4ca);padding:15px 0}.runtime-settings .setting,.runtime-settings label{display:grid;gap:6px;color:#49433b;font-size:12px;font-weight:700}.runtime-settings input,.runtime-settings select{min-height:42px;border:1px solid #cfc7ba;border-radius:4px;background:#fff;padding:0 10px;font:inherit;font-weight:500}.runtime-files-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 8px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#746d62}.runtime-clear{border:0;background:none;padding:4px 0;color:#6b665f;text-decoration:underline;cursor:pointer}.runtime-queue{min-height:54px;border-top:1px solid #e7e1d8;border-bottom:1px solid #e7e1d8}.runtime-actionbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:17px}.runtime-privacy{font-size:11px;color:#777167;line-height:1.65}.runtime-run{min-height:46px;padding:0 20px;border:1px solid #303d58;border-radius:4px;background:#303d58;color:#fff;font-weight:800;cursor:pointer;white-space:nowrap}.runtime-run:disabled{opacity:.45;cursor:not-allowed}.runtime-progress{margin-top:14px}.runtime-progress.hidden{display:none}.runtime-progress-top{display:flex;justify-content:space-between;font-size:11px;color:#756e64;margin-bottom:6px}.runtime-progress-track{height:6px;background:#ebe5db;border-radius:8px;overflow:hidden}.runtime-progress-track i{display:block;width:0;height:100%;background:#4b5b77}.runtime-results{margin-top:16px;display:grid;gap:8px}.runtime-results .result{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #e7e1d8;padding:12px 0}.runtime-results .result-name{font-weight:700;color:#2c2924;word-break:break-word}.runtime-results .result-size{font-size:11px;color:#756e64;margin-top:3px}.runtime-results a{display:inline-flex;min-height:40px;align-items:center;padding:0 12px;border:1px solid #746956;border-radius:4px;color:#2d2924;text-decoration:none;font-size:12px;font-weight:700;background:#fff}.runtime-tools{display:none}.runtime-results .thumb{max-width:64px;height:48px;object-fit:cover;border:1px solid #ddd7ce}.notice{padding:10px 12px;border-left:3px solid #8d6a3d;background:#faf6ee;color:#5f584f;font-size:12px;line-height:1.7}.notice.error{border-left-color:#9a4a42;background:#fff4f1;color:#7e312b}.queue{display:grid;gap:7px}.queue-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eee8de}.queue-row .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thumb{width:52px;height:42px;border:1px solid #ded7cd;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#746d62;background:#f9f5ee}.result-info{min-width:0}.result-name{word-break:break-word}.range{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.setting-help{font-size:11px;color:#777167;line-height:1.6;margin:0}.filepat-runtime .hidden{display:none!important}.filepat-runtime button,.filepat-runtime a,.filepat-runtime input,.filepat-runtime select{font:inherit}@media(max-width:700px){.runtime-panel{padding:16px}.runtime-top{display:block}.runtime-note{white-space:normal;margin-top:5px}.runtime-drop{min-height:165px}.runtime-actionbar{display:grid;grid-template-columns:1fr}.runtime-run{width:100%}}@media(max-width:420px){.runtime-settings .setting-card{grid-template-columns:1fr}.runtime-drop{padding:18px 12px}.runtime-results .result{align-items:flex-start;flex-direction:column}.runtime-results a{width:100%}}



/* ===== merged from /es/english-friendly.css ===== */
/* FilePat English-market presentation layer.
   Keeps the existing tool structure and interaction intact.
   No gradients, glow effects, oversized AI-style cards, or decorative motion. */

html[lang="en"]{
  --en-ink:#18212b;
  --en-text:#4d5965;
  --en-muted:#7b8792;
  --en-line:#dfe4e8;
  --en-soft:#f6f8fa;
  --en-white:#ffffff;
  --en-accent:#2563a6;
}

html[lang="en"] body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
  background:#fff;
}

/* Header: familiar, editorial-neutral, not 'AI dashboard' */
html[lang="en"] .topbar{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--en-line);
  box-shadow:none;
  backdrop-filter:none;
}
html[lang="en"] .brand{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:-.025em;color:var(--en-ink)}
html[lang="en"] .logo{box-shadow:none}
html[lang="en"] .mainnav{gap:20px}
html[lang="en"] .mainnav a{font-size:11px;font-weight:600;color:#5f6974;text-decoration:none}
html[lang="en"] .mainnav a:hover{color:var(--en-ink);text-decoration:none}

/* Selection / directory page: preserve the existing grid and sizing. */
html[lang="en"] .directory{max-width:1180px}
html[lang="en"] .directory-section-head h2,
html[lang="en"] .simple-card h1,
html[lang="en"] .section-head h2,
html[lang="en"] .seo-content h2{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
}
html[lang="en"] .directory-section-head p,
html[lang="en"] .office-card p,
html[lang="en"] .simple-card p,
html[lang="en"] .seo-content p{color:var(--en-text)}

html[lang="en"] .feature-card{
  border-color:#dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,33,43,.035);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
html[lang="en"] .feature-card:hover{
  border-color:#cbd3db;
  box-shadow:0 4px 12px rgba(24,33,43,.06);
  transform:translateY(-1px);
}
html[lang="en"] .feature-card strong{font-size:17px;color:var(--en-ink)}
html[lang="en"] .feature-card .use{color:#596572;font-size:13px;line-height:1.7}
html[lang="en"] .feature-card .go{color:#345f87;font-size:12px}
html[lang="en"] .feature-card .tag{font-size:9px;letter-spacing:.1em}
html[lang="en"] .file-icon{border-radius:7px}

/* Office cards remain simple and text-led. */
html[lang="en"] .office-card{
  border:1px solid #dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .office-card h3{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Work surface: same controls/DOM, calmer visual hierarchy. */
html[lang="en"] .tool-layout{
  border-color:#dfe4e8;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(24,33,43,.045);
}
html[lang="en"] .sidebar{background:#f8fafb;border-color:#dfe4e8}
html[lang="en"] .tool{border-radius:8px;color:#56616d}
html[lang="en"] .tool:hover{background:#f1f4f6;color:var(--en-ink)}
html[lang="en"] .tool.active{background:#edf3f8;color:var(--en-ink)}
html[lang="en"] .tool .ico{box-shadow:none}
html[lang="en"] .panel{background:#fff}
html[lang="en"] .heading h1{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .heading p{color:#687580}
html[lang="en"] .dropzone{border-color:#cbd3db;background:#f8fafb;border-radius:12px}
html[lang="en"] .dropzone:hover{background:#f4f7f9}
html[lang="en"] .dropzone.drag{border-color:var(--en-accent);background:#f8fbff}
html[lang="en"] .drop-title{color:var(--en-ink);font-weight:650}
html[lang="en"] .drop-sub{color:#7b8792}
html[lang="en"] .pick,
html[lang="en"] .run{background:#1f5d96;box-shadow:none}
html[lang="en"] .pick:hover,
html[lang="en"] .run:hover{background:#194f80}
html[lang="en"] .privacy{color:#78838e}
html[lang="en"] .setting-card,
html[lang="en"] .row,
html[lang="en"] .result{border-color:#e1e5e9;background:#fff;box-shadow:none}

/* Content pages */
html[lang="en"] .simple-page{max-width:920px}
html[lang="en"] .simple-card{border-color:#dfe4e8;border-radius:14px;box-shadow:0 6px 20px rgba(24,33,43,.035)}
html[lang="en"] .simple-card h2,
html[lang="en"] .simple-card h3{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .simple-card a{color:#245f95}
html[lang="en"] .back-link{color:#6d7883}

/* Existing SEO/help sections: keep content and layout, reduce decorative feel. */
html[lang="en"] .info-section,
html[lang="en"] .seo-content{color:var(--en-text)}
html[lang="en"] .howto-list>div,
html[lang="en"] .articles article,
html[lang="en"] .faq details{
  border-color:#e0e5e9;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .howto-list b{color:#42617d}
html[lang="en"] .faq summary{color:var(--en-ink)}

/* English footer. The same footer structure is used on every English page. */
html[lang="en"] .footer-wrap{max-width:1180px}
html[lang="en"] .footer-wrap footer{border-top-color:#dfe4e8;color:#7b8792}
html[lang="en"] .footer-brand strong{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html[lang="en"] .footer-brand p{color:#7b8792}
html[lang="en"] .footer-links b{color:#9aa3ac}
html[lang="en"] .footer-links a{color:#697580}
html[lang="en"] .footer-links a:hover{color:var(--en-ink)}
html[lang="en"] .copyright{border-top-color:#e7eaed;color:#9aa3ac}

/* The directory page previously ended with a small text line. Keep it understated. */
html[lang="en"] .directory-foot{border-top:1px solid #e7eaed;color:#8b96a0}

@media(max-width:900px){
  html[lang="en"] .topbar{backdrop-filter:none}
}
@media(max-width:620px){
  html[lang="en"] .feature-card{border-radius:11px}
  html[lang="en"] .tool-layout{border-radius:12px}
  html[lang="en"] .simple-card{border-radius:12px}
}



/* ===== merged from /zh-cn/english-friendly.css ===== */
/* FilePat English-market presentation layer.
   Keeps the existing tool structure and interaction intact.
   No gradients, glow effects, oversized AI-style cards, or decorative motion. */

html[lang="en"]{
  --en-ink:#18212b;
  --en-text:#4d5965;
  --en-muted:#7b8792;
  --en-line:#dfe4e8;
  --en-soft:#f6f8fa;
  --en-white:#ffffff;
  --en-accent:#2563a6;
}

html[lang="en"] body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
  background:#fff;
}

/* Header: familiar, editorial-neutral, not 'AI dashboard' */
html[lang="en"] .topbar{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--en-line);
  box-shadow:none;
  backdrop-filter:none;
}
html[lang="en"] .brand{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:-.025em;color:var(--en-ink)}
html[lang="en"] .logo{box-shadow:none}
html[lang="en"] .mainnav{gap:20px}
html[lang="en"] .mainnav a{font-size:11px;font-weight:600;color:#5f6974;text-decoration:none}
html[lang="en"] .mainnav a:hover{color:var(--en-ink);text-decoration:none}

/* Selection / directory page: preserve the existing grid and sizing. */
html[lang="en"] .directory{max-width:1180px}
html[lang="en"] .directory-section-head h2,
html[lang="en"] .simple-card h1,
html[lang="en"] .section-head h2,
html[lang="en"] .seo-content h2{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
}
html[lang="en"] .directory-section-head p,
html[lang="en"] .office-card p,
html[lang="en"] .simple-card p,
html[lang="en"] .seo-content p{color:var(--en-text)}

html[lang="en"] .feature-card{
  border-color:#dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,33,43,.035);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
html[lang="en"] .feature-card:hover{
  border-color:#cbd3db;
  box-shadow:0 4px 12px rgba(24,33,43,.06);
  transform:translateY(-1px);
}
html[lang="en"] .feature-card strong{font-size:17px;color:var(--en-ink)}
html[lang="en"] .feature-card .use{color:#596572;font-size:13px;line-height:1.7}
html[lang="en"] .feature-card .go{color:#345f87;font-size:12px}
html[lang="en"] .feature-card .tag{font-size:9px;letter-spacing:.1em}
html[lang="en"] .file-icon{border-radius:7px}

/* Office cards remain simple and text-led. */
html[lang="en"] .office-card{
  border:1px solid #dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .office-card h3{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Work surface: same controls/DOM, calmer visual hierarchy. */
html[lang="en"] .tool-layout{
  border-color:#dfe4e8;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(24,33,43,.045);
}
html[lang="en"] .sidebar{background:#f8fafb;border-color:#dfe4e8}
html[lang="en"] .tool{border-radius:8px;color:#56616d}
html[lang="en"] .tool:hover{background:#f1f4f6;color:var(--en-ink)}
html[lang="en"] .tool.active{background:#edf3f8;color:var(--en-ink)}
html[lang="en"] .tool .ico{box-shadow:none}
html[lang="en"] .panel{background:#fff}
html[lang="en"] .heading h1{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .heading p{color:#687580}
html[lang="en"] .dropzone{border-color:#cbd3db;background:#f8fafb;border-radius:12px}
html[lang="en"] .dropzone:hover{background:#f4f7f9}
html[lang="en"] .dropzone.drag{border-color:var(--en-accent);background:#f8fbff}
html[lang="en"] .drop-title{color:var(--en-ink);font-weight:650}
html[lang="en"] .drop-sub{color:#7b8792}
html[lang="en"] .pick,
html[lang="en"] .run{background:#1f5d96;box-shadow:none}
html[lang="en"] .pick:hover,
html[lang="en"] .run:hover{background:#194f80}
html[lang="en"] .privacy{color:#78838e}
html[lang="en"] .setting-card,
html[lang="en"] .row,
html[lang="en"] .result{border-color:#e1e5e9;background:#fff;box-shadow:none}

/* Content pages */
html[lang="en"] .simple-page{max-width:920px}
html[lang="en"] .simple-card{border-color:#dfe4e8;border-radius:14px;box-shadow:0 6px 20px rgba(24,33,43,.035)}
html[lang="en"] .simple-card h2,
html[lang="en"] .simple-card h3{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .simple-card a{color:#245f95}
html[lang="en"] .back-link{color:#6d7883}

/* Existing SEO/help sections: keep content and layout, reduce decorative feel. */
html[lang="en"] .info-section,
html[lang="en"] .seo-content{color:var(--en-text)}
html[lang="en"] .howto-list>div,
html[lang="en"] .articles article,
html[lang="en"] .faq details{
  border-color:#e0e5e9;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .howto-list b{color:#42617d}
html[lang="en"] .faq summary{color:var(--en-ink)}

/* English footer. The same footer structure is used on every English page. */
html[lang="en"] .footer-wrap{max-width:1180px}
html[lang="en"] .footer-wrap footer{border-top-color:#dfe4e8;color:#7b8792}
html[lang="en"] .footer-brand strong{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html[lang="en"] .footer-brand p{color:#7b8792}
html[lang="en"] .footer-links b{color:#9aa3ac}
html[lang="en"] .footer-links a{color:#697580}
html[lang="en"] .footer-links a:hover{color:var(--en-ink)}
html[lang="en"] .copyright{border-top-color:#e7eaed;color:#9aa3ac}

/* The directory page previously ended with a small text line. Keep it understated. */
html[lang="en"] .directory-foot{border-top:1px solid #e7eaed;color:#8b96a0}

@media(max-width:900px){
  html[lang="en"] .topbar{backdrop-filter:none}
}
@media(max-width:620px){
  html[lang="en"] .feature-card{border-radius:11px}
  html[lang="en"] .tool-layout{border-radius:12px}
  html[lang="en"] .simple-card{border-radius:12px}
}



/* ===== merged from /en/english-friendly.css ===== */
/* FilePat English-market presentation layer.
   Keeps the existing tool structure and interaction intact.
   No gradients, glow effects, oversized AI-style cards, or decorative motion. */

html[lang="en"]{
  --en-ink:#18212b;
  --en-text:#4d5965;
  --en-muted:#7b8792;
  --en-line:#dfe4e8;
  --en-soft:#f6f8fa;
  --en-white:#ffffff;
  --en-accent:#2563a6;
}

html[lang="en"] body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
  background:#fff;
}

/* Header: familiar, editorial-neutral, not 'AI dashboard' */
html[lang="en"] .topbar{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--en-line);
  box-shadow:none;
  backdrop-filter:none;
}
html[lang="en"] .brand{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:-.025em;color:var(--en-ink)}
html[lang="en"] .logo{box-shadow:none}
html[lang="en"] .mainnav{gap:20px}
html[lang="en"] .mainnav a{font-size:11px;font-weight:600;color:#5f6974;text-decoration:none}
html[lang="en"] .mainnav a:hover{color:var(--en-ink);text-decoration:none}

/* Selection / directory page: preserve the existing grid and sizing. */
html[lang="en"] .directory{max-width:1180px}
html[lang="en"] .directory-section-head h2,
html[lang="en"] .simple-card h1,
html[lang="en"] .section-head h2,
html[lang="en"] .seo-content h2{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--en-ink);
}
html[lang="en"] .directory-section-head p,
html[lang="en"] .office-card p,
html[lang="en"] .simple-card p,
html[lang="en"] .seo-content p{color:var(--en-text)}

html[lang="en"] .feature-card{
  border-color:#dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,33,43,.035);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
html[lang="en"] .feature-card:hover{
  border-color:#cbd3db;
  box-shadow:0 4px 12px rgba(24,33,43,.06);
  transform:translateY(-1px);
}
html[lang="en"] .feature-card strong{font-size:17px;color:var(--en-ink)}
html[lang="en"] .feature-card .use{color:#596572;font-size:13px;line-height:1.7}
html[lang="en"] .feature-card .go{color:#345f87;font-size:12px}
html[lang="en"] .feature-card .tag{font-size:9px;letter-spacing:.1em}
html[lang="en"] .file-icon{border-radius:7px}

/* Office cards remain simple and text-led. */
html[lang="en"] .office-card{
  border:1px solid #dfe4e8;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .office-card h3{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Work surface: same controls/DOM, calmer visual hierarchy. */
html[lang="en"] .tool-layout{
  border-color:#dfe4e8;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(24,33,43,.045);
}
html[lang="en"] .sidebar{background:#f8fafb;border-color:#dfe4e8}
html[lang="en"] .tool{border-radius:8px;color:#56616d}
html[lang="en"] .tool:hover{background:#f1f4f6;color:var(--en-ink)}
html[lang="en"] .tool.active{background:#edf3f8;color:var(--en-ink)}
html[lang="en"] .tool .ico{box-shadow:none}
html[lang="en"] .panel{background:#fff}
html[lang="en"] .heading h1{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .heading p{color:#687580}
html[lang="en"] .dropzone{border-color:#cbd3db;background:#f8fafb;border-radius:12px}
html[lang="en"] .dropzone:hover{background:#f4f7f9}
html[lang="en"] .dropzone.drag{border-color:var(--en-accent);background:#f8fbff}
html[lang="en"] .drop-title{color:var(--en-ink);font-weight:650}
html[lang="en"] .drop-sub{color:#7b8792}
html[lang="en"] .pick,
html[lang="en"] .run{background:#1f5d96;box-shadow:none}
html[lang="en"] .pick:hover,
html[lang="en"] .run:hover{background:#194f80}
html[lang="en"] .privacy{color:#78838e}
html[lang="en"] .setting-card,
html[lang="en"] .row,
html[lang="en"] .result{border-color:#e1e5e9;background:#fff;box-shadow:none}

/* Content pages */
html[lang="en"] .simple-page{max-width:920px}
html[lang="en"] .simple-card{border-color:#dfe4e8;border-radius:14px;box-shadow:0 6px 20px rgba(24,33,43,.035)}
html[lang="en"] .simple-card h2,
html[lang="en"] .simple-card h3{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--en-ink)}
html[lang="en"] .simple-card a{color:#245f95}
html[lang="en"] .back-link{color:#6d7883}

/* Existing SEO/help sections: keep content and layout, reduce decorative feel. */
html[lang="en"] .info-section,
html[lang="en"] .seo-content{color:var(--en-text)}
html[lang="en"] .howto-list>div,
html[lang="en"] .articles article,
html[lang="en"] .faq details{
  border-color:#e0e5e9;
  background:#fff;
  box-shadow:none;
}
html[lang="en"] .howto-list b{color:#42617d}
html[lang="en"] .faq summary{color:var(--en-ink)}

/* English footer. The same footer structure is used on every English page. */
html[lang="en"] .footer-wrap{max-width:1180px}
html[lang="en"] .footer-wrap footer{border-top-color:#dfe4e8;color:#7b8792}
html[lang="en"] .footer-brand strong{color:var(--en-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html[lang="en"] .footer-brand p{color:#7b8792}
html[lang="en"] .footer-links b{color:#9aa3ac}
html[lang="en"] .footer-links a{color:#697580}
html[lang="en"] .footer-links a:hover{color:var(--en-ink)}
html[lang="en"] .copyright{border-top-color:#e7eaed;color:#9aa3ac}

/* The directory page previously ended with a small text line. Keep it understated. */
html[lang="en"] .directory-foot{border-top:1px solid #e7eaed;color:#8b96a0}

@media(max-width:900px){
  html[lang="en"] .topbar{backdrop-filter:none}
}
@media(max-width:620px){
  html[lang="en"] .feature-card{border-radius:11px}
  html[lang="en"] .tool-layout{border-radius:12px}
  html[lang="en"] .simple-card{border-radius:12px}
}



/* ===== merged from /en/english-language.css ===== */
/* English language presentation layer — content/UI only. */
html[lang="en"] .lang-ja{display:none !important;}
html[lang="en"] .lang-en{display:inline !important;}
html[lang="en"] .filepat-language-switch button{min-width:36px;}
html[lang="en"] body{overflow-x:hidden;}



/* FilePat final sidebar simplification
   All languages: keep only file-format label + tool title.
   Remove decorative bullets and external-link arrows. */
.sidebar .tool,
.sidebar .tool.tool-link{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  column-gap:10px!important;
  min-width:0!important;
  padding:8px 10px!important;
}
.sidebar .tool::before,
.sidebar .tool.tool-link::before,
.sidebar .tool-link::after{
  content:none!important;
  display:none!important;
}
.sidebar .tool .ico,
.sidebar .tool .side-format{
  grid-column:1!important;
  grid-row:1!important;
  width:40px!important;
  min-width:40px!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:start!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.sidebar .tool > span:not(.ico):not(.side-format),
.sidebar .tool > .lang-ja,
.sidebar .tool > .lang-en{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  line-height:1.5!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:920px){
  .sidebar .tool,
  .sidebar .tool.tool-link{grid-template-columns:36px minmax(0,1fr)!important;column-gap:9px!important}
  .sidebar .tool .ico,
  .sidebar .tool .side-format{width:36px!important;min-width:36px!important}
}
@media(max-width:760px){
  .sidebar .tool,
  .sidebar .tool.tool-link{grid-template-columns:36px minmax(0,1fr)!important;padding:9px 10px!important}
}


/* ===== Universal high-contrast mode: final override ===== */
html[data-contrast="high"] {
  --fp-page:#ffffff;
  --fp-panel:#ffffff;
  --fp-text:#000000;
  --fp-muted:#111111;
  --fp-line:#000000;
  --fp-focus:#000000;
  background:#ffffff !important;
  color:#000000 !important;
}
html[data-contrast="high"] body,
html[data-contrast="high"] body * {
  text-shadow:none !important;
}
html[data-contrast="high"] body {
  background:#ffffff !important;
  color:#000000 !important;
}
html[data-contrast="high"] .topbar,
html[data-contrast="high"] .mainnav,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .sidebar,
html[data-contrast="high"] .page,
html[data-contrast="high"] .directory,
html[data-contrast="high"] .simple-page,
html[data-contrast="high"] .wrap,
html[data-contrast="high"] main,
html[data-contrast="high"] section,
html[data-contrast="high"] article,
html[data-contrast="high"] footer {
  background:#ffffff !important;
  color:#000000 !important;
}
html[data-contrast="high"] .topbar,
html[data-contrast="high"] .sidebar,
html[data-contrast="high"] .tool-layout,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .setting-card,
html[data-contrast="high"] .queue,
html[data-contrast="high"] .row,
html[data-contrast="high"] details,
html[data-contrast="high"] .feature-card,
html[data-contrast="high"] .office-card,
html[data-contrast="high"] .notice {
  border-color:#000000 !important;
  box-shadow:none !important;
}
html[data-contrast="high"] a,
html[data-contrast="high"] .mainnav a,
html[data-contrast="high"] .sidebar a,
html[data-contrast="high"] .tool,
html[data-contrast="high"] .tool-link {
  color:#000000 !important;
  text-decoration-thickness:2px;
}
html[data-contrast="high"] a:hover,
html[data-contrast="high"] a:focus-visible,
html[data-contrast="high"] .mainnav a:hover,
html[data-contrast="high"] .mainnav a:focus-visible,
html[data-contrast="high"] .sidebar a:hover,
html[data-contrast="high"] .sidebar a:focus-visible,
html[data-contrast="high"] .tool:hover,
html[data-contrast="high"] .tool:focus-visible,
html[data-contrast="high"] .tool-link:hover,
html[data-contrast="high"] .tool-link:focus-visible {
  background:#000000 !important;
  color:#ffffff !important;
}
html[data-contrast="high"] button,
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea {
  background:#ffffff !important;
  color:#000000 !important;
  border-color:#000000 !important;
  box-shadow:none !important;
}
html[data-contrast="high"] button:hover,
html[data-contrast="high"] button:focus-visible,
html[data-contrast="high"] select:hover,
html[data-contrast="high"] input:focus,
html[data-contrast="high"] textarea:focus {
  background:#000000 !important;
  color:#ffffff !important;
}
html[data-contrast="high"] .run,
html[data-contrast="high"] .pick,
html[data-contrast="high"] .filepat-a11y__contrast.active,
html[data-contrast="high"] .filepat-a11y__btn.active {
  background:#000000 !important;
  color:#ffffff !important;
  border-color:#000000 !important;
}
html[data-contrast="high"] .dropzone {
  background:#ffffff !important;
  border-color:#000000 !important;
  color:#000000 !important;
}
html[data-contrast="high"] .dropzone:hover,
html[data-contrast="high"] .dropzone:focus-within {
  background:#f0f0f0 !important;
}
html[data-contrast="high"] .heading p,
html[data-contrast="high"] .drop-sub,
html[data-contrast="high"] .privacy,
html[data-contrast="high"] .sub,
html[data-contrast="high"] .result-size,
html[data-contrast="high"] .eyebrow,
html[data-contrast="high"] .section-head p,
html[data-contrast="high"] .howto-list p,
html[data-contrast="high"] .articles p,
html[data-contrast="high"] .faq details p,
html[data-contrast="high"] .tools-label,
html[data-contrast="high"] .filepat-a11y__sub {
  color:#111111 !important;
}
html[data-contrast="high"] img,
html[data-contrast="high"] svg,
html[data-contrast="high"] canvas {
  filter:none !important;
}
html[data-contrast="high"] .filepat-a11y__group,
html[data-contrast="high"] .filepat-a11y__contrast,
html[data-contrast="high"] .filepat-a11y__btn {
  border-color:#000000 !important;
}


/* Language selector globe */
header.topbar .filepat-language-switch .language-globe{display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;line-height:1!important;margin:0 2px 0 3px!important;flex:0 0 auto!important;}
@media(max-width:760px){header.topbar .filepat-language-switch .language-globe{font-size:14px!important;margin-left:2px!important;}}


/* Final sidebar cleanup: file-format labels are text only; remove white icon boxes in every language. */
.sidebar .tool,
.sidebar .tool.tool-link{
  grid-template-columns:max-content minmax(0,1fr)!important;
  column-gap:10px!important;
}
.sidebar .tool .ico,
.sidebar .tool .ico.file-format-side,
.sidebar .tool .side-format{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  flex:none!important;
  flex-basis:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  font:700 8px/1.2 Arial,sans-serif!important;
  letter-spacing:.04em!important;
  text-align:left!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
}
.sidebar .tool.active .ico,
.sidebar .tool.active .ico.file-format-side,
.sidebar .tool.active .side-format{
  background:transparent!important;
  border:0!important;
  color:inherit!important;
}
@media(max-width:920px){
  .sidebar .tool,
  .sidebar .tool.tool-link{grid-template-columns:max-content minmax(0,1fr)!important;column-gap:9px!important}
}
@media(max-width:760px){
  .sidebar .tool,
  .sidebar .tool.tool-link{grid-template-columns:max-content minmax(0,1fr)!important;column-gap:8px!important}
}


/* ==============================
   FilePat footer redesign v2
   Visual/layout only. Existing runtime JS is intentionally untouched.
   ============================== */
.fp-footer-v2{
  width:100%;
  margin:0;
  padding:0 0 24px;
  border-top:1px solid #dfe4e8;
  background:#f8f9fa;
  color:#3f4750;
  box-sizing:border-box;
}
.fp-footer-v2 .footer-inner{
  width:min(1180px,calc(100% - 48px));
  max-width:1180px;
  margin:0 auto;
  padding:42px 0 36px;
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(560px,2fr);
  gap:64px;
  align-items:start;
  box-sizing:border-box;
}
.fp-footer-v2 .footer-brand{
  min-width:0;
}
.fp-footer-v2 .footer-logo{
  display:inline-block;
  color:#111820;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.035em;
  text-decoration:none;
  line-height:1.1;
}
.fp-footer-v2 .footer-brand p{
  margin:12px 0 22px;
  color:#69737d;
  font-size:13px;
  line-height:1.8;
}
.fp-footer-v2 .footer-socials{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
.fp-footer-v2 .footer-socials a{
  color:#4f5963;
  font-size:12px;
  line-height:1.6;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.fp-footer-v2 .footer-socials a:hover{
  color:#111820;
  border-bottom-color:#9aa3ab;
}
.fp-footer-v2 .footer-socials a span{
  margin-left:4px;
  color:#7d8790;
}
.fp-footer-v2 .footer-links{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:30px 34px !important;
  min-width:0;
  margin:0 !important;
}
.fp-footer-v2 .footer-links>div{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:9px !important;
  min-width:0;
}
.fp-footer-v2 .footer-links b{
  margin:0 0 5px;
  color:#737d87 !important;
  font-size:11px !important;
  font-weight:700;
  letter-spacing:.12em;
}
.fp-footer-v2 .footer-links a{
  max-width:100%;
  color:#47515b !important;
  font-size:12px !important;
  line-height:1.55 !important;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.fp-footer-v2 .footer-links a:hover{
  color:#0f151b !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.fp-footer-v2 .copyright{
  width:min(1180px,calc(100% - 48px));
  max-width:1180px;
  margin:0 auto;
  padding:15px 0 0;
  border-top:1px solid #e3e7ea !important;
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#89929b !important;
  font-size:11px !important;
  line-height:1.5;
}

@media (max-width:900px){
  .fp-footer-v2 .footer-inner{
    grid-template-columns:1fr;
    gap:34px;
    padding-top:34px;
  }
  .fp-footer-v2 .footer-links{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 24px !important;
  }
}
@media (max-width:600px){
  .fp-footer-v2{padding-bottom:18px}
  .fp-footer-v2 .footer-inner,
  .fp-footer-v2 .copyright{
    width:calc(100% - 30px);
  }
  .fp-footer-v2 .footer-inner{
    padding:30px 0 28px;
    gap:30px;
  }
  .fp-footer-v2 .footer-links{
    grid-template-columns:1fr 1fr !important;
    gap:26px 18px !important;
  }
  .fp-footer-v2 .copyright{
    flex-direction:column;
    gap:5px;
  }
}
@media (max-width:390px){
  .fp-footer-v2 .footer-inner,
  .fp-footer-v2 .copyright{
    width:calc(100% - 24px);
  }
  .fp-footer-v2 .footer-links{
    gap:24px 14px !important;
  }
}

/* International locales */
html[lang="ar"], html[lang="ur"]{direction:rtl}
html[lang="ar"] body, html[lang="ur"] body{direction:rtl}
html[lang="ar"] .filepat-language-switch, html[lang="ur"] .filepat-language-switch{direction:ltr}
html[lang="ar"] .filepat-language-select, html[lang="ur"] .filepat-language-select{direction:ltr}
.filepat-language-select{min-width:7.5rem}


/* FILEPAT FINAL ACCESSIBILITY OVERRIDES — CSS-only, JS-API safe */
html[data-contrast="high"],html.fp-high-contrast{
  --fp-page:#fff!important;--fp-panel:#fff!important;--fp-text:#000!important;--fp-muted:#111!important;--fp-line:#000!important;--fp-focus:#000!important;
  background:#fff!important;color:#000!important;
  color-scheme:light!important;
}
html[data-contrast="high"] body,html[data-contrast="high"] body * ,html.fp-high-contrast body,html.fp-high-contrast body *{
  text-shadow:none!important;
}
html[data-contrast="high"] body,html.fp-high-contrast body{
  background:#fff!important;color:#000!important;
}
html[data-contrast="high"] body *:not(img):not(video):not(canvas):not(svg),html.fp-high-contrast body *:not(img):not(video):not(canvas):not(svg){
  border-color:#000!important;
  box-shadow:none!important;
}
html[data-contrast="high"] a,html.fp-high-contrast a{color:#000!important;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:2px!important}
html[data-contrast="high"] button,html[data-contrast="high"] input[type="button"],html[data-contrast="high"] input[type="submit"],html.fp-high-contrast button,html.fp-high-contrast input[type="button"],html.fp-high-contrast input[type="submit"]{
  background:#000!important;color:#fff!important;border:2px solid #000!important;
}
html[data-contrast="high"] input,html[data-contrast="high"] select,html[data-contrast="high"] textarea,html.fp-high-contrast input,html.fp-high-contrast select,html.fp-high-contrast textarea{
  background:#fff!important;color:#000!important;border:2px solid #000!important;
}
html[data-contrast="high"] .topbar,html[data-contrast="high"] .mainnav,html[data-contrast="high"] .sidebar,html[data-contrast="high"] .tool-layout,
html[data-contrast="high"] .panel,html[data-contrast="high"] .simple-page,html[data-contrast="high"] .simple-card,html[data-contrast="high"] .page,
html[data-contrast="high"] .directory,html[data-contrast="high"] .content,html[data-contrast="high"] main,html[data-contrast="high"] section,html[data-contrast="high"] article,
html[data-contrast="high"] footer,html[data-contrast="high"] header,html.fp-high-contrast .topbar,html.fp-high-contrast .mainnav,
html.fp-high-contrast .sidebar,html.fp-high-contrast .tool-layout,html.fp-high-contrast .panel,html.fp-high-contrast .simple-page,
html.fp-high-contrast .simple-card,html.fp-high-contrast .page,html.fp-high-contrast .directory,html.fp-high-contrast main,html.fp-high-contrast section,
html.fp-high-contrast article,html.fp-high-contrast footer,html.fp-high-contrast header{
  background:#fff!important;color:#000!important;
}
html[data-contrast="high"] .filepat-a11y,html.fp-high-contrast .filepat-a11y{color:#000!important;background:#fff!important;z-index:2000!important}
html[data-contrast="high"] .filepat-a11y__group,html[data-contrast="high"] .filepat-a11y__contrast,
html.fp-high-contrast .filepat-a11y__group,html.fp-high-contrast .filepat-a11y__contrast{background:#fff!important;color:#000!important;border:2px solid #000!important}
html[data-contrast="high"] .filepat-a11y__btn.active,html[data-contrast="high"] .filepat-a11y__contrast.active,
html.fp-high-contrast .filepat-a11y__btn.active,html.fp-high-contrast .filepat-a11y__contrast.active{background:#000!important;color:#fff!important}
html[data-contrast="high"] .dropzone,html[data-contrast="high"] .setting-card,html[data-contrast="high"] .queue,html[data-contrast="high"] .row,
html.fp-high-contrast .dropzone,html.fp-high-contrast .setting-card,html.fp-high-contrast .queue,html.fp-high-contrast .row{background:#fff!important;color:#000!important;border:2px solid #000!important}
html[data-contrast="high"] .tool.active,html.fp-high-contrast .tool.active{background:#000!important;color:#fff!important;border:2px solid #000!important}
html[data-contrast="high"] .tool,html.fp-high-contrast .tool{background:#fff!important;color:#000!important}
html[data-contrast="high"] .eyebrow,html[data-contrast="high"] .drop-sub,html[data-contrast="high"] .privacy,html[data-contrast="high"] .sub,html[data-contrast="high"] .result-size,
html.fp-high-contrast .eyebrow,html.fp-high-contrast .drop-sub,html.fp-high-contrast .privacy,html.fp-high-contrast .sub,html.fp-high-contrast .result-size{color:#111!important}
html[data-contrast="high"] img,html[data-contrast="high"] svg,html[data-contrast="high"] canvas,html[data-contrast="high"] video,
html.fp-high-contrast img,html.fp-high-contrast svg,html.fp-high-contrast canvas,html.fp-high-contrast video{filter:none!important}
html[data-contrast="high"] :focus-visible,html.fp-high-contrast :focus-visible{outline:3px solid #000!important;outline-offset:3px!important}

/* Accessibility control must stay visible on every header, including narrow screens. */
.filepat-a11y{flex:0 0 auto;min-width:max-content;margin-left:auto;position:relative;z-index:20}
.topbar .mainnav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
@media(max-width:1050px){.topbar .mainnav{gap:10px}.filepat-a11y{margin-left:auto}}
@media(max-width:760px){.topbar .mainnav{width:100%;align-items:stretch}.filepat-a11y{width:100%;justify-content:flex-end;margin-left:0}.filepat-a11y__contrast{font-size:11px;min-height:34px}}

/* RTL support for Arabic and Urdu without altering tool interaction order. */
html[dir="rtl"] .topbar .mainnav,html[dir="rtl"] .filepat-a11y{direction:rtl}


/* ================================================================
   FIXED GLOBAL HEADER + BACK TO TOP
   Visual/HTML-only enhancement. Existing JavaScript is intentionally untouched.
   ================================================================ */
header.topbar{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  z-index:5000!important;
}
body{
  padding-top:68px!important;
}
html{
  scroll-padding-top:84px!important;
}
.fp-back-to-top{
  position:fixed!important;
  right:22px!important;
  bottom:22px!important;
  z-index:4999!important;
  width:44px!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:1px solid #b8c1c9!important;
  border-radius:5px!important;
  background:#fff!important;
  color:#1d2329!important;
  text-decoration:none!important;
  font:700 18px/1 Arial,sans-serif!important;
  box-shadow:0 4px 14px rgba(24,33,43,.12)!important;
  opacity:.96!important;
}
.fp-back-to-top:hover{background:#f4f6f8!important;color:#0f4770!important}
.fp-back-to-top:focus-visible{outline:3px solid #24577f!important;outline-offset:2px!important}
html[data-contrast="high"] .fp-back-to-top,
html.fp-high-contrast .fp-back-to-top{
  background:#fff!important;
  color:#000!important;
  border:2px solid #000!important;
  box-shadow:none!important;
}
@media(max-width:760px){
  body{padding-top:94px!important}
  html{scroll-padding-top:108px!important}
  .fp-back-to-top{right:14px!important;bottom:14px!important;width:42px!important;height:42px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* ================================================================
   FILEPAT HIGH-CONTRAST MASTER OVERRIDE
   Final cascade: applies consistently to every page without touching JS.
   ================================================================ */
html[data-contrast="high"],
html.fp-high-contrast{
  --fp-page:#fff !important;
  --fp-panel:#fff !important;
  --fp-text:#000 !important;
  --fp-muted:#111 !important;
  --fp-line:#000 !important;
  --fp-focus:#000 !important;
  color-scheme: light !important;
}

html[data-contrast="high"] body,
html.fp-high-contrast body{
  background:#fff !important;
  color:#000 !important;
}

/* Remove low-contrast surfaces and decorative layers from all non-media UI. */
html[data-contrast="high"] body *:not(img):not(video):not(canvas),
html.fp-high-contrast body *:not(img):not(video):not(canvas){
  color:#000 !important;
  border-color:#000 !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

html[data-contrast="high"] body *:not(img):not(video):not(canvas),
html.fp-high-contrast body *:not(img):not(video):not(canvas){
  background-color:#fff !important;
}

/* Keep media assets themselves visually intact. */
html[data-contrast="high"] img,
html[data-contrast="high"] video,
html[data-contrast="high"] canvas,
html.fp-high-contrast img,
html.fp-high-contrast video,
html.fp-high-contrast canvas{
  background-color:transparent !important;
  box-shadow:none !important;
}

/* SVG icons become a single high-contrast ink tone. */
html[data-contrast="high"] svg,
html[data-contrast="high"] svg *:not(text),
html.fp-high-contrast svg,
html.fp-high-contrast svg *:not(text){
  color:#000 !important;
  fill:#000 !important;
  stroke:#000 !important;
}

/* Links: always clearly identifiable. */
html[data-contrast="high"] a,
html.fp-high-contrast a{
  color:#000 !important;
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:2px !important;
}

/* Form controls. */
html[data-contrast="high"] button,
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea,
html[data-contrast="high"] option,
html.fp-high-contrast button,
html.fp-high-contrast input,
html.fp-high-contrast select,
html.fp-high-contrast textarea,
html.fp-high-contrast option{
  background:#fff !important;
  color:#000 !important;
  border:2px solid #000 !important;
  text-shadow:none !important;
}

html[data-contrast="high"] input::placeholder,
html[data-contrast="high"] textarea::placeholder,
html.fp-high-contrast input::placeholder,
html.fp-high-contrast textarea::placeholder{
  color:#000 !important;
  opacity:1 !important;
}

/* Primary actions and selected states remain visually distinct. */
html[data-contrast="high"] button:hover,
html[data-contrast="high"] button:focus-visible,
html[data-contrast="high"] button[data-state="on"],
html[data-contrast="high"] button.active,
html.fp-high-contrast button:hover,
html.fp-high-contrast button:focus-visible,
html.fp-high-contrast button[data-state="on"],
html.fp-high-contrast button.active{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

html[data-contrast="high"] [aria-current="page"],
html[data-contrast="high"] [aria-selected="true"],
html[data-contrast="high"] [aria-pressed="true"],
html.fp-high-contrast [aria-current="page"],
html.fp-high-contrast [aria-selected="true"],
html.fp-high-contrast [aria-pressed="true"]{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

/* Tool-specific areas. */
html[data-contrast="high"] .dropzone,
html[data-contrast="high"] .setting-card,
html[data-contrast="high"] .queue,
html[data-contrast="high"] .row,
html[data-contrast="high"] .tool,
html[data-contrast="high"] .tool-link,
html[data-contrast="high"] .sidebar,
html[data-contrast="high"] .panel,
html[data-contrast="high"] .feature-card,
html[data-contrast="high"] .simple-card,
html[data-contrast="high"] .office-card,
html.fp-high-contrast .dropzone,
html.fp-high-contrast .setting-card,
html.fp-high-contrast .queue,
html.fp-high-contrast .row,
html.fp-high-contrast .tool,
html.fp-high-contrast .tool-link,
html.fp-high-contrast .sidebar,
html.fp-high-contrast .panel,
html.fp-high-contrast .feature-card,
html.fp-high-contrast .simple-card,
html.fp-high-contrast .office-card{
  background:#fff !important;
  color:#000 !important;
  border:2px solid #000 !important;
}

html[data-contrast="high"] .tool.active,
html[data-contrast="high"] .tool-link.active,
html.fp-high-contrast .tool.active,
html.fp-high-contrast .tool-link.active{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

/* Tables, code samples, notices and disclosure widgets. */
html[data-contrast="high"] table,
html[data-contrast="high"] th,
html[data-contrast="high"] td,
html[data-contrast="high"] pre,
html[data-contrast="high"] code,
html[data-contrast="high"] details,
html[data-contrast="high"] summary,
html[data-contrast="high"] .notice,
html[data-contrast="high"] .faq details,
html.fp-high-contrast table,
html.fp-high-contrast th,
html.fp-high-contrast td,
html.fp-high-contrast pre,
html.fp-high-contrast code,
html.fp-high-contrast details,
html.fp-high-contrast summary,
html.fp-high-contrast .notice,
html.fp-high-contrast .faq details{
  background:#fff !important;
  color:#000 !important;
  border-color:#000 !important;
}

/* Badges and low-emphasis labels: never fade below readable contrast. */
html[data-contrast="high"] .tag,
html[data-contrast="high"] .eyebrow,
html[data-contrast="high"] .sub,
html[data-contrast="high"] .muted,
html[data-contrast="high"] .privacy,
html[data-contrast="high"] .drop-sub,
html[data-contrast="high"] .result-size,
html[data-contrast="high"] .section-head p,
html[data-contrast="high"] .howto-list p,
html[data-contrast="high"] .articles p,
html.fp-high-contrast .tag,
html.fp-high-contrast .eyebrow,
html.fp-high-contrast .sub,
html.fp-high-contrast .muted,
html.fp-high-contrast .privacy,
html.fp-high-contrast .drop-sub,
html.fp-high-contrast .result-size,
html.fp-high-contrast .section-head p,
html.fp-high-contrast .howto-list p,
html.fp-high-contrast .articles p{
  color:#000 !important;
}

/* Fixed header, footer and back-to-top control. */
html[data-contrast="high"] header,
html[data-contrast="high"] footer,
html[data-contrast="high"] .topbar,
html[data-contrast="high"] .mainnav,
html[data-contrast="high"] .filepat-a11y,
html[data-contrast="high"] .filepat-a11y__group,
html[data-contrast="high"] .filepat-a11y__contrast,
html[data-contrast="high"] .filepat-a11y__btn,
html[data-contrast="high"] .fp-back-to-top,
html.fp-high-contrast header,
html.fp-high-contrast footer,
html.fp-high-contrast .topbar,
html.fp-high-contrast .mainnav,
html.fp-high-contrast .filepat-a11y,
html.fp-high-contrast .filepat-a11y__group,
html.fp-high-contrast .filepat-a11y__contrast,
html.fp-high-contrast .filepat-a11y__btn,
html.fp-high-contrast .fp-back-to-top{
  background:#fff !important;
  color:#000 !important;
  border-color:#000 !important;
}

html[data-contrast="high"] .filepat-a11y__contrast.active,
html[data-contrast="high"] .filepat-a11y__btn.active,
html[data-contrast="high"] .fp-back-to-top:hover,
html.fp-high-contrast .filepat-a11y__contrast.active,
html.fp-high-contrast .filepat-a11y__btn.active,
html.fp-high-contrast .fp-back-to-top:hover{
  background:#000 !important;
  color:#fff !important;
}

/* Strong, consistent keyboard focus. */
html[data-contrast="high"] :focus-visible,
html.fp-high-contrast :focus-visible{
  outline:3px solid #000 !important;
  outline-offset:3px !important;
}

/* Text-selection visibility. */
html[data-contrast="high"] ::selection,
html.fp-high-contrast ::selection{
  background:#000 !important;
  color:#fff !important;
}

/* RTL pages keep their document direction while retaining the same contrast treatment. */
html[dir="rtl"][data-contrast="high"],
html[dir="rtl"].fp-high-contrast{
  color-scheme:light !important;
}

/* Final specificity layer for page-embedded legacy CSS rules. */
html[data-contrast="high"] body [class][class][class][class][class],
html.fp-high-contrast body [class][class][class][class][class]{
  color:#000 !important;
  background-color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

html[data-contrast="high"] body [class][class][class][class][class] *:not(img):not(video):not(canvas),
html.fp-high-contrast body [class][class][class][class][class] *:not(img):not(video):not(canvas){
  color:#000 !important;
  background-color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Common legacy colored states. */
html[data-contrast="high"] body [class][class][class][class][class].active,
html[data-contrast="high"] body [class][class][class][class][class][aria-current="page"],
html[data-contrast="high"] body [class][class][class][class][class][aria-selected="true"],
html[data-contrast="high"] body [class][class][class][class][class][aria-pressed="true"],
html.fp-high-contrast body [class][class][class][class][class].active,
html.fp-high-contrast body [class][class][class][class][class][aria-current="page"],
html.fp-high-contrast body [class][class][class][class][class][aria-selected="true"],
html.fp-high-contrast body [class][class][class][class][class][aria-pressed="true"]{
  color:#fff !important;
  background-color:#000 !important;
  border-color:#000 !important;
}

html[data-contrast="high"] body *::before,
html[data-contrast="high"] body *::after,
html.fp-high-contrast body *::before,
html.fp-high-contrast body *::after{
  color:#000 !important;
  border-color:#000 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

html[data-contrast="high"] body *::before,
html[data-contrast="high"] body *::after,
html.fp-high-contrast body *::before,
html.fp-high-contrast body *::after{
  background-image:none !important;
}

html[data-contrast="high"] body :disabled,
html.fp-high-contrast body :disabled{
  color:#000 !important;
  border-color:#000 !important;
  opacity:1 !important;
}

/* ================================================================
   FILEPAT RESPONSIVE SYSTEM V3
   Final responsive cascade. HTML/CSS only; runtime JavaScript untouched.
   Goals: no accidental horizontal overflow, stable fixed header, readable
   tool UI, compact mobile navigation, and safe wrapping at every width.
   ================================================================ */

/* Global sizing and media safety */
html, body{
  max-width:100%;
  min-width:0;
}
body{
  overflow-x:clip!important;
  overflow-wrap:anywhere;
}
*, *::before, *::after{box-sizing:border-box;min-width:0;}
img,svg,video,canvas,iframe,embed,object{
  max-width:100%;
}
iframe,embed,object{border:0;}
pre,code{
  max-width:100%;
  overflow:auto;
  overflow-wrap:normal;
  word-break:normal;
}
button,input,select,textarea{max-width:100%;}

/* Fixed header: stable desktop proportions */
header.topbar{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  padding-inline:clamp(16px,3vw,42px)!important;
  box-sizing:border-box!important;
}
header.topbar > *{min-width:0!important;}
header.topbar .brand{min-width:0!important;white-space:nowrap;}
header.topbar .mainnav{min-width:0!important;}
header.topbar .mainnav a{white-space:nowrap;}
header.topbar .filepat-language-switch,
header.topbar .filepat-a11y{
  min-width:0!important;
  max-width:100%!important;
}

/* Main containers */
main, .page, .directory, .seo-main, .simple-page, .seo-page,
.filepat-runtime, .tool-main, .fp-tool-main, .tool-layout,
.runtime-panel, .panel, .hero-card, .panel-card, .fp-tool-card,
.filepat-seo-section, .seo-content, .info-section{
  min-width:0!important;
  max-width:100%!important;
}

/* Tool workspace: never let the right pane force page width */
.tool-layout,
.filepat-standalone-layout{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(180px,230px) minmax(0,1fr)!important;
}
.sidebar{min-width:0!important;max-width:100%!important;}
.tool-main,.panel,.filepat-runtime,.runtime-panel{min-width:0!important;max-width:100%!important;}
.tool-main > *, .panel > *, .runtime-panel > *{min-width:0!important;max-width:100%;}

/* Keep tool controls from overflowing their workspace */
.filepat-runtime .setting-card,
.setting-card,
.grid-2,
.grid-3,
.actions,
.actionbar,
.runtime-actionbar,
.files-head,
.runtime-files-head,
.runtime-results .result,
.queue-row,
.row{
  min-width:0!important;
  max-width:100%!important;
}
.setting-card > *, .grid-2 > *, .grid-3 > *,
.actions > *, .actionbar > *, .runtime-actionbar > *,
.files-head > *, .runtime-files-head > *, .result > *, .row > *{
  min-width:0!important;
}

/* Images / previews / canvases */
.preview, .fp-preview, .preview-wrap, .image-preview, .canvas-wrap{
  max-width:100%!important;
  min-width:0!important;
  overflow:auto!important;
}
.preview img,.fp-preview img,.image-preview img,
.preview canvas,.fp-preview canvas,.image-preview canvas,
.preview video,.fp-preview video,.image-preview video{
  display:block;
  width:auto;
  max-width:100%!important;
  height:auto!important;
}

/* Long text, filenames and translated strings */
.heading h1,.seo-main h1,.tool-main h1,.fp-tool-main h1,
.lead,.heading p,.runtime-desc,.runtime-drop-title,.runtime-drop-sub,
.tool,.tool-link,.sidebar-group-title,.sidebar-all,
.filepat-seo-section p,.seo-content p,.faq p,.articles p,
.footer-links a,.footer-social-link,.copyright{
  overflow-wrap:anywhere!important;
  word-break:normal;
}
.file-list .name,.queue-row .name,.result-name,.result-info,
.file-name,.filename,[class*="filename"],[class*="file-name"]{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* Tables: preserve readable cells while allowing narrow screens to scroll only the table */
table{
  width:100%;
  max-width:100%;
}
.table-wrap,.table-responsive,[class*="table-wrap"],[class*="table-responsive"]{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* ================================================================
   <= 1100px: tablet / small laptop
   ================================================================ */
@media (max-width:1100px){
  header.topbar{
    padding-inline:22px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  header.topbar .mainnav{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    justify-content:flex-start!important;
  }
  header.topbar .filepat-language-switch{
    grid-column:2!important;
    grid-row:1!important;
  }
  .page,.directory,.seo-main{padding-inline:22px!important;}
  .tool-layout,.filepat-standalone-layout{
    grid-template-columns:210px minmax(0,1fr)!important;
  }
  .filepat-main-with-side-ad{grid-template-columns:1fr!important;}
  .filepat-side-ad{padding-top:18px!important;}
  .fp-unified-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .footer-inner{width:min(100% - 44px,1180px)!important;}
}

/* ================================================================
   <= 900px: tablet portrait
   Sidebar moves above the tool; no horizontal page overflow.
   ================================================================ */
@media (max-width:900px){
  body{padding-top:96px!important;}
  html{scroll-padding-top:112px!important;}
  .tool-layout,.filepat-standalone-layout{
    grid-template-columns:1fr!important;
    overflow:visible!important;
  }
  .sidebar{
    position:static!important;
    width:100%!important;
    border-right:0!important;
    border-bottom:1px solid var(--fp-line,#d9dee4)!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .sidebar-group{min-width:0!important;}
  .tool-main,.panel{width:100%!important;}
  .panel{padding:28px 30px 34px!important;}
  .heading h1,.seo-main>h1{font-size:clamp(26px,5vw,32px)!important;}
  .runtime-top{display:block!important;}
  .runtime-note{white-space:normal!important;margin-top:6px!important;}
  .runtime-actionbar{display:grid!important;grid-template-columns:1fr!important;}
  .runtime-run,.run{width:100%!important;}
  .filepat-related-tools-list{flex-wrap:wrap!important;overflow:visible!important;}
  .footer-wrap{padding-inline:0!important;}
  .footer-inner{width:min(100% - 36px,1180px)!important;}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* ================================================================
   <= 760px: phone
   Header is a stable 3-row layout. Language buttons become compact
   language codes so all languages remain directly accessible without
   forcing a sideways page scroll.
   ================================================================ */
@media (max-width:760px){
  body{padding-top:132px!important;}
  html{scroll-padding-top:146px!important;}

  header.topbar{
    width:100vw!important;
    min-height:124px!important;
    height:auto!important;
    padding:9px 12px 10px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto auto!important;
    gap:6px 10px!important;
    align-items:center!important;
  }
  header.topbar .brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
  }
  header.topbar .filepat-a11y{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    margin:0!important;
    justify-content:flex-end!important;
  }
  header.topbar .mainnav{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    min-height:31px!important;
    overflow:visible!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:3px 12px!important;
  }
  header.topbar .mainnav a{
    font-size:11px!important;
    line-height:1.25!important;
    padding:4px 0!important;
  }
  header.topbar .filepat-language-switch,
  header.topbar .lang-switch,
  header.topbar .filekit-lang-switch{
    grid-column:1/-1!important;
    grid-row:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(9,minmax(0,1fr))!important;
    gap:3px!important;
    align-items:center!important;
    justify-content:stretch!important;
    overflow:visible!important;
  }
  header.topbar .filepat-language-switch .language-globe{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
  }
  header.topbar .filepat-language-switch button,
  header.topbar .lang-switch button,
  header.topbar .filekit-lang-switch button{
    width:100%!important;
    min-width:0!important;
    min-height:27px!important;
    height:27px!important;
    padding:3px 2px!important;
    margin:0!important;
    border-radius:4px!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  header.topbar .filepat-language-switch button::after,
  header.topbar .lang-switch button::after,
  header.topbar .filekit-lang-switch button::after{
    content:attr(data-lang-switch)!important;
    display:block!important;
    font:700 9px/1 Arial,sans-serif!important;
    letter-spacing:.02em!important;
  }
  header.topbar .filepat-language-switch button[data-lang-switch="zh-TW"]::after{
    content:"zh-TW"!important;
  }

  .page,.directory,.seo-main{padding:22px 14px 50px!important;}
  .directory{width:100%!important;}
  .fp-unified-grid{grid-template-columns:1fr!important;}
  .fp-unified-tool{width:100%!important;}

  .panel{padding:22px 16px 28px!important;}
  .tool-main,.fp-tool-main{padding-top:18px!important;}
  .heading{margin-bottom:18px!important;}
  .heading h1,.seo-main>h1,.tool-main h1,.fp-tool-main h1{
    font-size:clamp(24px,7vw,29px)!important;
    line-height:1.32!important;
    letter-spacing:-.015em!important;
  }
  .heading p,.seo-main>.lead,.lead{font-size:13px!important;line-height:1.8!important;}

  /* Mobile sidebar: compact category grids instead of horizontal scrolling. */
  .sidebar{
    display:block!important;
    padding:10px!important;
    overflow:visible!important;
    background:#fbfcfd!important;
  }
  .sidebar-group{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 6px!important;
    margin:0 0 10px!important;
  }
  .tools-label,
  .sidebar-group-title,
  .sidebar-all{
    grid-column:1/-1!important;
  }
  .tools-label{padding:2px 4px 8px!important;}
  .sidebar-group-title{margin:2px 4px 3px!important;}
  .sidebar .tool,
  .sidebar .tool.tool-link{
    width:100%!important;
    min-width:0!important;
    padding:8px 7px!important;
    margin:0!important;
    gap:7px!important;
  }
  .sidebar .tool .ico,
  .sidebar .tool .side-format{
    min-width:0!important;
    flex:none!important;
    font-size:8px!important;
  }
  .sidebar .tool > span:not(.ico):not(.side-format),
  .sidebar .tool > .lang-ja,
  .sidebar .tool > .lang-en{
    min-width:0!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
    line-height:1.35!important;
  }

  .tool-layout,.filepat-standalone-layout{border-radius:10px!important;}

  /* Tool controls */
  .dropzone,.runtime-drop{min-height:220px!important;padding:20px 14px!important;}
  .runtime-panel{padding:16px!important;}
  .runtime-settings .setting-card,.setting-card{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .setting,.field,.fp-control{width:100%!important;}
  .actions,.actionbar,.runtime-actionbar,.fp-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:9px!important;
  }
  .actions > *, .actionbar > *, .runtime-actionbar > *, .fp-actions > *{
    width:100%!important;
    max-width:100%!important;
  }
  .runtime-results .result,
  .result{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .runtime-results a,.save{width:100%!important;justify-content:center!important;text-align:center!important;}

  /* Tabs and related tools remain usable without pushing the page width. */
  .tabs,.filepat-related-tools-list{
    width:100%!important;
    min-width:0!important;
  }
  .tabs{overflow-x:auto!important;flex-wrap:nowrap!important;}
  .tabs button{flex:0 0 auto!important;}
  .filepat-related-tools-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;overflow:visible!important;}
  .filepat-related-tool{width:100%!important;min-width:0!important;}

  /* Content pages */
  .simple-card,.feature-card,.howto-list>div,.articles article,
  .filepat-seo-section,.seo-content,.info-section{max-width:100%!important;}
  .seo-content,.filepat-seo-section{padding-inline:0!important;}
  .seo-content h2,.filepat-seo-section h2{font-size:22px!important;line-height:1.4!important;}
  .faq details{width:100%!important;}

  /* Footer */
  .footer-inner{width:calc(100% - 28px)!important;margin:0 auto!important;}
  .footer-links{grid-template-columns:1fr 1fr!important;gap:18px 16px!important;}
  .footer-brand{min-width:0!important;}
  .footer-social{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}

  .fp-back-to-top{
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:42px!important;
    height:42px!important;
  }
}

/* ================================================================
   <= 560px: narrow phones
   ================================================================ */
@media (max-width:560px){
  body{padding-top:150px!important;}
  html{scroll-padding-top:164px!important;}
  header.topbar{
    min-height:142px!important;
    padding-inline:10px!important;
    gap:5px 8px!important;
  }
  header.topbar .filepat-language-switch,
  header.topbar .lang-switch,
  header.topbar .filekit-lang-switch{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  header.topbar .filepat-language-switch button,
  header.topbar .lang-switch button,
  header.topbar .filekit-lang-switch button{
    min-height:26px!important;
    height:26px!important;
  }
  header.topbar .filepat-language-switch button::after,
  header.topbar .lang-switch button::after,
  header.topbar .filekit-lang-switch button::after{
    font-size:8px!important;
  }
  .page,.directory,.seo-main{padding-inline:10px!important;}
  .panel{padding:18px 12px 24px!important;}
  .runtime-panel{padding:13px!important;}
  .sidebar-group{grid-template-columns:1fr 1fr!important;}
  .sidebar .tool,.sidebar .tool.tool-link{padding:7px 6px!important;font-size:10px!important;}
  .sidebar .tool .ico,.sidebar .tool .side-format{font-size:7px!important;}
  .filepat-related-tools-list{grid-template-columns:1fr!important;}
  .footer-links{grid-template-columns:1fr!important;gap:14px!important;}
  .footer-inner{width:calc(100% - 22px)!important;}
}

/* ================================================================
   <= 390px: very narrow devices
   ================================================================ */
@media (max-width:390px){
  body{padding-top:164px!important;}
  html{scroll-padding-top:178px!important;}
  header.topbar{
    min-height:156px!important;
    padding:8px 8px 9px!important;
  }
  header.topbar .mainnav{gap:2px 9px!important;}
  header.topbar .mainnav a{font-size:10px!important;}
  header.topbar .filepat-a11y__contrast,
  header.topbar .filepat-a11y__btn{font-size:10px!important;min-height:31px!important;padding-inline:7px!important;}
  header.topbar .filepat-language-switch,
  header.topbar .lang-switch,
  header.topbar .filekit-lang-switch{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:2px!important;}
  header.topbar .filepat-language-switch button,
  header.topbar .lang-switch button,
  header.topbar .filekit-lang-switch button{height:25px!important;min-height:25px!important;}
  .heading h1,.seo-main>h1,.tool-main h1,.fp-tool-main h1{font-size:23px!important;}
  .dropzone,.runtime-drop{min-height:190px!important;}
  .runtime-pick,.pick,.run,.runtime-run{min-height:44px!important;}
  .fp-back-to-top{width:40px!important;height:40px!important;right:10px!important;}
}

/* Extremely small screens: do not allow any fixed-width element to win. */
@media (max-width:340px){
  body{padding-top:166px!important;}
  html{scroll-padding-top:180px!important;}
  .directory,.page,.seo-main{padding-inline:8px!important;}
  .sidebar-group{grid-template-columns:1fr!important;}
  .sidebar-group-title,.tools-label,.sidebar-all{grid-column:1!important;}
  .filepat-related-tools-list{grid-template-columns:1fr!important;}
}

/* RTL: keep the same responsive geometry while mirroring alignment. */
html[dir="rtl"] .sidebar .tool,
html[dir="rtl"] .sidebar .tool.tool-link{
  text-align:right!important;
}
html[dir="rtl"] .sidebar .tool .ico,
html[dir="rtl"] .sidebar .tool .side-format{
  text-align:right!important;
}
html[dir="rtl"] .fp-back-to-top{right:auto!important;left:12px!important;}
@media(max-width:390px){html[dir="rtl"] .fp-back-to-top{left:10px!important;}}

/* Reduced motion remains respected across the responsive layer. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* FilePat: language selector belongs to the hamburger/navigation drawer on every page. */
header.topbar .mainnav > .filepat-language-switch{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:3px!important;
  border:1px solid #dfe3e7!important;
  border-radius:8px!important;
  background:#fafbfc!important;
  order:10!important;
}
header.topbar .mainnav > .filepat-language-switch .language-globe{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  font-size:14px!important;
  line-height:1!important;
  margin:0 2px!important;
}
@media (min-width:761px){
  header.topbar .mainnav > .filepat-language-switch{
    margin-left:6px!important;
  }
}
@media (max-width:760px){
  header.topbar .mainnav > .filepat-language-switch{
    width:100%!important;
    min-height:48px!important;
    box-sizing:border-box!important;
    margin:12px 0 0!important;
    padding:8px 10px!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  header.topbar .mainnav > .filepat-language-switch .filepat-language-select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:44px!important;
    box-sizing:border-box!important;
  }
  header.topbar .mainnav > .filepat-language-switch .language-globe{font-size:16px!important;}
}

/* =====================================================================
   FilePat responsive repair v13 — final cascade
   Scope: visual/layout only. No tool logic or JavaScript changes.
   ===================================================================== */
@media (max-width:900px){
  body{padding-top:0!important;}
  html{scroll-padding-top:76px!important;}
  header.topbar{position:sticky!important;top:0!important;z-index:2000!important;width:100%!important;min-height:64px!important;height:64px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 46px!important;grid-template-rows:64px!important;gap:0 10px!important;align-items:center!important;padding:8px 12px!important;margin:0!important;overflow:visible!important;}
  header.topbar .brand{grid-column:1!important;grid-row:1!important;align-self:center!important;min-width:0!important;max-width:calc(100% - 4px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  header.topbar .filepat-menu-toggle{grid-column:2!important;grid-row:1!important;display:block!important;position:relative!important;width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;margin:0!important;padding:0!important;border:1px solid #c7cdd3!important;border-radius:9px!important;background:#fff!important;color:#1b2229!important;z-index:2100!important;}
  header.topbar .mainnav{position:fixed!important;left:0!important;right:0!important;top:64px!important;bottom:auto!important;width:100%!important;max-width:none!important;max-height:calc(100dvh - 64px)!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:12px 14px 20px!important;margin:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;background:#fff!important;border-top:1px solid #dfe4e9!important;border-bottom:1px solid #dfe4e9!important;box-shadow:0 12px 28px rgba(16,28,40,.14)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-6px)!important;transition:opacity .15s ease,transform .15s ease,visibility .15s ease!important;}
  html.filepat-menu-open header.topbar .mainnav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;}
  header.topbar .mainnav>a{width:100%!important;min-height:48px!important;height:auto!important;padding:12px 10px!important;margin:0!important;border:0!important;border-bottom:1px solid #e4e7ea!important;font-size:14px!important;line-height:1.45!important;justify-content:flex-start!important;white-space:normal!important;}
  header.topbar .filepat-language-switch,header.topbar .lang-switch,header.topbar .filekit-lang-switch{display:none!important;width:100%!important;min-width:0!important;max-width:none!important;margin:14px 0 0!important;padding:10px 0 0!important;border:0!important;border-top:1px solid #dfe4e9!important;border-radius:0!important;background:transparent!important;overflow:visible!important;white-space:normal!important;}
  html.filepat-menu-open header.topbar .mainnav > .filepat-language-switch,html.filepat-menu-open header.topbar .mainnav > .lang-switch,html.filepat-menu-open header.topbar .mainnav > .filekit-lang-switch{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))!important;gap:6px!important;}
  header.topbar .mainnav > .filepat-language-switch .language-globe,header.topbar .mainnav > .lang-switch .language-globe{grid-column:1/-1!important;display:flex!important;align-items:center!important;min-height:28px!important;padding:0 2px!important;font-size:15px!important;line-height:1!important;}
  header.topbar .mainnav > .filepat-language-switch button,header.topbar .mainnav > .lang-switch button,header.topbar .mainnav > .filekit-lang-switch button{width:100%!important;min-width:0!important;min-height:42px!important;height:auto!important;margin:0!important;padding:8px 7px!important;border:1px solid #dfe4e9!important;border-radius:7px!important;background:#fff!important;color:#3f4a55!important;font-size:11px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  header.topbar .mainnav > .filepat-language-switch button.active,header.topbar .mainnav > .lang-switch button.active,header.topbar .mainnav > .filekit-lang-switch button.active{background:#1d4f73!important;color:#fff!important;border-color:#1d4f73!important;}
  header.topbar .mainnav .filepat-a11y{width:100%!important;min-width:0!important;margin:16px 0 0!important;padding:14px 0 0!important;border-top:1px solid #dfe4e9!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:stretch!important;justify-content:flex-start!important;overflow:visible!important;}
  header.topbar .mainnav .filepat-a11y__label{width:100%!important;font-size:12px!important;}
  header.topbar .mainnav .filepat-a11y__group{display:grid!important;grid-template-columns:auto repeat(3,minmax(0,1fr))!important;width:100%!important;gap:5px!important;}
  header.topbar .mainnav .filepat-a11y__sub{display:flex!important;align-items:center!important;padding:0 6px 0 0!important;font-size:11px!important;}
  header.topbar .mainnav .filepat-a11y__btn,header.topbar .mainnav .filepat-a11y__contrast{min-width:0!important;min-height:44px!important;width:100%!important;padding:8px 10px!important;border:1px solid #c6ced6!important;border-radius:7px!important;background:#fff!important;color:#20272e!important;font-size:12px!important;}
  main[style*="max-width:820px"],main[style*="max-width:900px"],main[style*="max-width:1000px"]{width:100%!important;max-width:none!important;margin:0 auto!important;padding-left:14px!important;padding-right:14px!important;}
  main[style*="max-width:820px"] h1,main[style*="max-width:900px"] h1,main[style*="max-width:1000px"] h1{font-size:clamp(24px,7vw,32px)!important;line-height:1.3!important;overflow-wrap:anywhere!important;}
  .article-wrap,.seo-page,.simple-page,.directory{width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:14px!important;padding-right:14px!important;box-sizing:border-box!important;}
  .article-wrap .article-nav,.article-wrap .article,.seo-page > *, .simple-page > *{min-width:0!important;max-width:100%!important;}
  .simple-card{width:100%!important;max-width:100%!important;padding:24px 18px!important;overflow-wrap:anywhere!important;}
  .simple-card h1{font-size:clamp(24px,7vw,31px)!important;line-height:1.35!important;}
  .simple-card h2{font-size:clamp(17px,4.8vw,21px)!important;line-height:1.5!important;}
  .simple-card p,.simple-card li{font-size:13px!important;line-height:1.9!important;overflow-wrap:anywhere!important;}
  .tool-page,.tool-main,.fp-tool-main,.seo-main{width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;}
  .tool-page{padding:0 14px 48px!important;}
  .tool-head,.seo-header{padding:14px 0!important;gap:10px!important;flex-wrap:wrap!important;}
  .tool-main,.fp-tool-main,.seo-main{padding-top:22px!important;}
  .tool-main h1,.fp-tool-main h1,.seo-main>h1{font-size:clamp(24px,7vw,32px)!important;line-height:1.3!important;overflow-wrap:anywhere!important;}
  .lead,.heading p,.runtime-desc{font-size:13px!important;line-height:1.85!important;overflow-wrap:anywhere!important;}
  .hero-card,.panel-card,.fp-tool-card{width:100%!important;max-width:100%!important;padding:16px!important;}
  .grid-2,.grid-3,.fp-controls{grid-template-columns:1fr!important;}
  .tabs{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;}
  .drop,.fp-drop{width:100%!important;min-height:190px!important;padding:22px 12px!important;}
  .preview,.fp-preview,.image-preview,.canvas-wrap{width:100%!important;min-height:150px!important;max-height:none!important;overflow:auto!important;}
  .preview img,.preview canvas,.fp-preview img,.fp-preview canvas,.image-preview img{max-width:100%!important;height:auto!important;}
  .tool-layout,.filepat-standalone-layout{width:100%!important;max-width:none!important;grid-template-columns:1fr!important;overflow:visible!important;}
  .sidebar{width:100%!important;max-width:none!important;display:block!important;padding:10px!important;overflow:visible!important;border-right:0!important;border-bottom:1px solid var(--fp-line,#dfe4e9)!important;}
  .sidebar-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px 6px!important;margin:0 0 10px!important;}
  .sidebar-group-title,.tools-label,.sidebar-all{grid-column:1/-1!important;}
  .sidebar .tool,.sidebar .tool.tool-link{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:8px 7px!important;min-height:42px!important;gap:7px!important;}
  .sidebar .tool > span:not(.ico):not(.side-format),.sidebar .tool > .lang-ja,.sidebar .tool > .lang-en{min-width:0!important;overflow-wrap:anywhere!important;white-space:normal!important;line-height:1.35!important;}
  .panel{width:100%!important;max-width:none!important;padding:20px 12px 26px!important;}
  .heading{display:block!important;min-width:0!important;margin-bottom:18px!important;}
  .heading h1{font-size:clamp(23px,7vw,31px)!important;line-height:1.3!important;overflow-wrap:anywhere!important;}
  .heading p{font-size:12px!important;}
  .dropzone,.runtime-drop{width:100%!important;min-height:210px!important;padding:22px 12px!important;}
  .setting-card,.runtime-settings .setting-card{grid-template-columns:1fr!important;gap:9px!important;}
  .setting input,.setting select,.setting textarea,.field input,.field select,.field textarea{width:100%!important;min-width:0!important;max-width:100%!important;}
  .actionbar,.runtime-actionbar,.actions,.fp-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;}
  .actionbar>*,.runtime-actionbar>*,.actions>*,.fp-actions>*{width:100%!important;max-width:100%!important;}
  .row,.result,.queue-row,.runtime-results .result{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;align-items:stretch!important;}
  .name,.result-name,.queue-row .name{white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;}
  .remove{margin-left:auto!important;}
  .fp-practical-guide-rail{width:calc(100% - 24px)!important;max-width:none!important;margin:40px auto 0!important;}
  .fp-practical-guide-article-final{width:100%!important;max-width:none!important;margin:0!important;padding:30px 0 40px!important;}
  .fp-practical-guide-article-final h2{font-size:clamp(23px,6.5vw,30px)!important;line-height:1.45!important;overflow-wrap:anywhere!important;}
  .fp-practical-guide-article-final__intro{font-size:13.5px!important;line-height:1.9!important;}
  .fp-practical-guide-article-final__section{padding:20px 0!important;}
  .fp-practical-guide-article-final h3{font-size:17px!important;line-height:1.55!important;overflow-wrap:anywhere!important;}
  .fp-practical-guide-article-final p{font-size:13px!important;line-height:1.95!important;overflow-wrap:anywhere!important;}
  .seo-content,.filepat-seo-section,.info-section{width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;}
  .seo-content h2,.filepat-seo-section h2{font-size:22px!important;line-height:1.45!important;overflow-wrap:anywhere!important;}
  .seo-content p,.filepat-seo-section p{font-size:13px!important;line-height:1.9!important;overflow-wrap:anywhere!important;}
  table{display:table!important;width:100%!important;max-width:none!important;font-size:12px!important;}
  .table-wrap,.table-responsive,[class*="table-wrap"],[class*="table-responsive"]{max-width:100%!important;overflow-x:auto!important;}
  pre{max-width:100%!important;overflow-x:auto!important;white-space:pre!important;}
  iframe{max-width:100%!important;}
  [style*="white-space:nowrap"]{white-space:normal!important;}
}
@media (max-width:560px){
  html{scroll-padding-top:68px!important;}
  header.topbar{min-height:60px!important;height:60px!important;grid-template-rows:60px!important;padding:7px 10px!important;}
  header.topbar .filepat-menu-toggle{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;}
  header.topbar .mainnav{top:60px!important;max-height:calc(100dvh - 60px)!important;padding:10px 12px 18px!important;}
  .directory,.page,.simple-page,.article-wrap,.seo-page,.tool-page{padding-left:10px!important;padding-right:10px!important;}
  .panel{padding-left:10px!important;padding-right:10px!important;}
  .simple-card{padding:20px 15px!important;}
  .sidebar-group{grid-template-columns:1fr 1fr!important;}
  .fp-practical-guide-rail{width:calc(100% - 18px)!important;}
  .footer-wrap{padding-left:10px!important;padding-right:10px!important;}
}
@media (max-width:390px){
  header.topbar .mainnav > .filepat-language-switch,header.topbar .mainnav > .lang-switch,header.topbar .mainnav > .filekit-lang-switch{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  header.topbar .mainnav > .filepat-language-switch button,header.topbar .mainnav > .lang-switch button,header.topbar .mainnav > .filekit-lang-switch button{font-size:10.5px!important;min-height:40px!important;}
  .sidebar-group{grid-template-columns:1fr!important;}
  .heading h1,.tool-main h1,.fp-tool-main h1,.seo-main>h1{font-size:23px!important;}
  .dropzone,.runtime-drop{min-height:180px!important;}
}
html[dir="rtl"] header.topbar .mainnav>a,html[dir="rtl"] header.topbar .mainnav .filepat-a11y,html[dir="rtl"] header.topbar .mainnav .filepat-language-switch{direction:rtl;text-align:right!important;}


/* ================================================================
   v18 — compact mobile hamburger menu
   Goal: header height only slightly larger than the 44px menu icon.
   Keep navigation readable without changing application JavaScript.
   ================================================================ */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-top:54px!important}

  .topbar{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:5px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    z-index:1000!important;
    background:#fff!important;
    border-bottom:1px solid #d9dde2!important;
    box-shadow:0 1px 6px rgba(20,26,34,.06)!important;
    backdrop-filter:none!important;
  }
  .brand{
    display:inline-flex!important;
    align-items:center!important;
    min-width:0!important;
    height:44px!important;
    font-size:15px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .brand .logo,.topbar .logo{
    width:30px!important;height:30px!important;
    min-width:30px!important;min-height:30px!important;
    margin-right:7px!important;
  }

  /* The existing accessibility.js creates and controls this button. */
  .filepat-menu-toggle{
    display:block!important;
    flex:0 0 44px!important;
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;
    margin:0!important;padding:0!important;
    border:1px solid #d6dbe0!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#20262c!important;
    box-shadow:none!important;
    position:relative!important;
    z-index:1002!important;
  }
  .filepat-menu-toggle span{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:20px!important;
    height:2px!important;
    margin:0!important;
    background:currentColor!important;
    border-radius:2px!important;
    transform-origin:center!important;
    transition:transform .12s ease,opacity .12s ease!important;
  }
  .filepat-menu-toggle span:nth-child(1){transform:translate(-50%,-7px)!important}
  .filepat-menu-toggle span:nth-child(2){transform:translate(-50%,-1px)!important}
  .filepat-menu-toggle span:nth-child(3){transform:translate(-50%,5px)!important}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(1){transform:translate(-50%,-1px) rotate(45deg)!important}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(2){opacity:0!important}
  html.filepat-menu-open .filepat-menu-toggle span:nth-child(3){transform:translate(-50%,-1px) rotate(-45deg)!important}

  /* Clean drawer: no oversized header, no horizontal navigation, no card grid. */
  .topbar .mainnav{
    position:fixed!important;
    left:0!important;right:0!important;top:54px!important;bottom:auto!important;
    width:100%!important;
    max-height:calc(100dvh - 54px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:0!important;
    padding:10px 14px 18px!important;
    margin:0!important;
    background:#fff!important;
    border-top:0!important;
    border-bottom:1px solid #d7dce1!important;
    box-shadow:0 10px 28px rgba(18,24,31,.14)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translateY(-8px)!important;
    transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
  }
  html.filepat-menu-open .topbar .mainnav{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:translateY(0)!important;
  }
  .topbar .mainnav>a{
    display:flex!important;align-items:center!important;
    width:100%!important;min-height:44px!important;height:auto!important;
    padding:10px 8px!important;margin:0!important;
    border:0!important;border-bottom:1px solid #e8ebee!important;
    border-radius:0!important;
    background:transparent!important;color:#20262c!important;
    font-size:14px!important;font-weight:650!important;line-height:1.35!important;
    white-space:normal!important;
  }
  .topbar .mainnav>a:hover,.topbar .mainnav>a:focus-visible{
    background:#f5f6f7!important;color:#111!important;text-decoration:none!important;
  }

  /* Language chooser: one compact row, fully visible and easy to operate. */
  .topbar .filepat-language-switch{
    order:20!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;min-height:44px!important;
    margin:10px 0 2px!important;padding:7px 0!important;
    border:0!important;border-top:1px solid #e2e6e9!important;border-bottom:1px solid #e2e6e9!important;
    border-radius:0!important;background:#fff!important;
    overflow:visible!important;
  }
  .topbar .filepat-language-switch .language-globe{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:30px!important;height:30px!important;
    font-size:17px!important;line-height:1!important;
  }
  .topbar .filepat-language-switch .filepat-language-select,
  .topbar .filepat-language-switch select{
    display:block!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    min-height:38px!important;height:38px!important;
    padding:6px 34px 6px 10px!important;
    border:1px solid #cfd5da!important;border-radius:7px!important;
    background:#fff!important;color:#20262c!important;
    font-size:13px!important;font-weight:600!important;line-height:1.2!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }

  /* Accessibility controls: compact and readable, never 100% height per button. */
  .topbar .filepat-a11y{
    order:30!important;
    width:100%!important;
    margin:10px 0 0!important;
    padding:10px 0 0!important;
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    gap:7px!important;
    border-top:1px solid #e2e6e9!important;
  }
  .topbar .filepat-a11y__label{
    width:100%!important;margin:0!important;
    font-size:11px!important;line-height:1.3!important;font-weight:700!important;color:#4a535c!important;
  }
  .topbar .filepat-a11y__group{
    width:auto!important;flex:1 1 auto!important;
    display:flex!important;align-items:center!important;gap:4px!important;
    min-width:0!important;
  }
  .topbar .filepat-a11y__sub{font-size:11px!important;padding:0 4px 0 0!important;white-space:nowrap!important}
  .topbar .filepat-a11y__btn{
    min-width:40px!important;width:40px!important;min-height:40px!important;height:40px!important;
    padding:6px!important;border:1px solid #cbd1d7!important;border-radius:7px!important;
    background:#fff!important;color:#20262c!important;font-size:14px!important;line-height:1!important;
  }
  .topbar .filepat-a11y__contrast{
    flex:1 1 150px!important;
    min-width:140px!important;min-height:40px!important;height:40px!important;
    padding:7px 10px!important;border:1px solid #cbd1d7!important;border-radius:7px!important;
    background:#fff!important;color:#20262c!important;font-size:11px!important;line-height:1.2!important;
  }
  .topbar .filepat-a11y__btn.active{background:#20262c!important;color:#fff!important;border-color:#20262c!important}
  .topbar .filepat-a11y__btn:focus-visible,.topbar .filepat-a11y__contrast:focus-visible,.filepat-menu-toggle:focus-visible,.topbar .filepat-language-switch select:focus-visible{
    outline:3px solid rgba(29,95,145,.35)!important;outline-offset:2px!important;
  }

  /* Keep the menu itself readable but not excessively tall. */
  .topbar .mainnav::-webkit-scrollbar{width:6px}
  .topbar .mainnav::-webkit-scrollbar-thumb{background:#cbd1d7;border-radius:6px}
}
@media(max-width:420px){
  .topbar{height:52px!important;min-height:52px!important;max-height:52px!important;padding:4px 8px!important}
  body{padding-top:52px!important}
  .topbar .mainnav{top:52px!important;max-height:calc(100dvh - 52px)!important;padding:8px 12px 14px!important}
  .topbar .mainnav>a{font-size:13px!important;min-height:42px!important;padding:9px 7px!important}
  .filepat-menu-toggle{width:43px!important;height:43px!important;min-width:43px!important;min-height:43px!important}
}
@media(prefers-reduced-motion:reduce){
  .filepat-menu-toggle span,.topbar .mainnav{transition:none!important}
}

/* ================================================================
   FilePat mobile header / hamburger final cleanup
   - compact fixed header with equal top/bottom breathing room
   - two-line hamburger icon (three-line visual removed)
   - language selector remains interactive inside the drawer
   - visible globe marker
   - fewer rules/lines; grouped navigation without a card wall
   ================================================================ */
@media (max-width:760px){
  html,body{overflow-x:hidden!important}
  html{scroll-padding-top:52px!important}
  body{padding-top:52px!important}

  header.topbar{
    position:fixed!important;
    inset:0 0 auto 0!important;
    z-index:5000!important;
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    box-sizing:border-box!important;
    padding:4px 8px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    background:#fff!important;
    border-bottom:1px solid #d9dde2!important;
    box-shadow:0 1px 5px rgba(20,26,34,.06)!important;
  }

  header.topbar .brand{
    display:inline-flex!important;
    align-items:center!important;
    min-width:0!important;
    max-width:calc(100% - 52px)!important;
    height:44px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:15px!important;
    line-height:1!important;
  }
  header.topbar .brand .logo,header.topbar .logo{
    width:30px!important;height:30px!important;
    min-width:30px!important;min-height:30px!important;
    margin-right:7px!important;
  }

  header.topbar .filepat-menu-toggle{
    display:block!important;
    flex:0 0 44px!important;
    width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    max-width:44px!important;max-height:44px!important;
    box-sizing:border-box!important;
    margin:0!important;padding:0!important;
    position:relative!important;
    z-index:5002!important;
    border:1px solid #cfd5da!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#20262c!important;
    box-shadow:none!important;
  }
  header.topbar .filepat-menu-toggle span{
    position:absolute!important;
    left:50%!important;top:50%!important;
    width:19px!important;height:2px!important;
    margin:0!important;
    background:currentColor!important;
    border-radius:2px!important;
    transform-origin:center!important;
    transition:transform .12s ease,opacity .12s ease!important;
  }
  header.topbar .filepat-menu-toggle span:nth-child(1){transform:translate(-50%,-5px)!important}
  header.topbar .filepat-menu-toggle span:nth-child(2){display:none!important}
  header.topbar .filepat-menu-toggle span:nth-child(3){transform:translate(-50%,5px)!important}
  html.filepat-menu-open header.topbar .filepat-menu-toggle span:nth-child(1){transform:translate(-50%,-1px) rotate(45deg)!important}
  html.filepat-menu-open header.topbar .filepat-menu-toggle span:nth-child(3){transform:translate(-50%,-1px) rotate(-45deg)!important}

  header.topbar .mainnav{
    position:fixed!important;
    left:0!important;right:0!important;top:52px!important;bottom:auto!important;
    width:100%!important;max-width:none!important;
    max-height:calc(100dvh - 52px)!important;
    min-height:0!important;
    box-sizing:border-box!important;
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    margin:0!important;
    padding:10px 12px 14px!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    background:#fff!important;
    border:0!important;
    box-shadow:0 10px 24px rgba(18,24,32,.10)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translateY(-4px)!important;
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease!important;
  }
  html.filepat-menu-open header.topbar .mainnav{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  header.topbar .mainnav>a{
    width:100%!important;
    min-height:42px!important;height:auto!important;
    box-sizing:border-box!important;
    margin:0!important;padding:9px 8px!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
    color:#20262c!important;
    font-size:14px!important;font-weight:650!important;line-height:1.35!important;
    text-decoration:none!important;
  }
  header.topbar .mainnav>a:hover,header.topbar .mainnav>a:focus-visible{
    background:#f4f6f7!important;color:#111!important;text-decoration:none!important;
  }

  /* Language: keep the globe visible even after lang.js replaces the buttons with a select. */
  header.topbar .mainnav > .filepat-language-switch{
    order:20!important;
    width:100%!important;min-width:0!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:8px!important;
    box-sizing:border-box!important;
    margin:8px 0 0!important;padding:9px 0!important;
    border:0!important;
    border-top:1px solid #e4e7ea!important;
    border-radius:0!important;
    background:#fff!important;
  }
  header.topbar .mainnav > .filepat-language-switch::before{
    content:'🌐'!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:28px!important;height:28px!important;
    font-size:17px!important;line-height:1!important;
  }
  header.topbar .mainnav > .filepat-language-switch .language-globe{display:none!important}
  header.topbar .mainnav > .filepat-language-switch .filepat-language-select,
  header.topbar .mainnav > .filepat-language-switch select{
    display:block!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    height:38px!important;min-height:38px!important;
    box-sizing:border-box!important;
    margin:0!important;padding:6px 34px 6px 10px!important;
    border:1px solid #cdd4da!important;border-radius:7px!important;
    background:#fff!important;color:#20262c!important;
    font-size:13px!important;font-weight:600!important;
    line-height:1.2!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }

  /* Accessibility controls: one compact group, not a stack of bordered rows. */
  header.topbar .mainnav .filepat-a11y{
    order:30!important;
    width:100%!important;min-width:0!important;
    box-sizing:border-box!important;
    margin:6px 0 0!important;padding:10px 0 0!important;
    border-top:1px solid #e4e7ea!important;
    display:flex!important;flex-wrap:wrap!important;
    align-items:center!important;gap:6px!important;
  }
  header.topbar .mainnav .filepat-a11y__label{
    width:100%!important;margin:0!important;
    font-size:11px!important;line-height:1.3!important;font-weight:700!important;color:#58626c!important;
  }
  header.topbar .mainnav .filepat-a11y__group{
    width:100%!important;min-width:0!important;
    display:grid!important;
    grid-template-columns:auto repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  header.topbar .mainnav .filepat-a11y__sub{
    display:flex!important;align-items:center!important;
    padding:0 3px 0 0!important;
    font-size:11px!important;white-space:nowrap!important;
  }
  header.topbar .mainnav .filepat-a11y__btn{
    width:100%!important;min-width:0!important;
    height:40px!important;min-height:40px!important;
    box-sizing:border-box!important;
    padding:6px!important;
    border:1px solid #cdd4da!important;border-radius:6px!important;
    background:#fff!important;color:#20262c!important;
    font-size:13px!important;line-height:1!important;
  }
  header.topbar .mainnav .filepat-a11y__contrast{
    width:100%!important;min-width:0!important;
    height:40px!important;min-height:40px!important;
    box-sizing:border-box!important;
    padding:7px 10px!important;
    border:1px solid #cdd4da!important;border-radius:6px!important;
    background:#fff!important;color:#20262c!important;
    font-size:12px!important;line-height:1.2!important;
  }
  header.topbar .mainnav .filepat-a11y__btn.active{
    background:#20262c!important;color:#fff!important;border-color:#20262c!important;
  }

  header.topbar .filepat-menu-toggle:focus-visible,
  header.topbar .mainnav a:focus-visible,
  header.topbar .mainnav select:focus-visible,
  header.topbar .mainnav button:focus-visible{
    outline:3px solid rgba(29,95,145,.32)!important;
    outline-offset:2px!important;
  }
}
@media(max-width:390px){
  header.topbar .mainnav{padding:9px 10px 13px!important}
  header.topbar .mainnav>a{min-height:40px!important;padding:8px 7px!important;font-size:13px!important}
  header.topbar .mainnav > .filepat-language-switch{grid-template-columns:26px minmax(0,1fr)!important}
  header.topbar .mainnav > .filepat-language-switch::before{width:26px!important;height:26px!important;font-size:16px!important}
  header.topbar .mainnav > .filepat-language-switch select{height:37px!important;min-height:37px!important;font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){
  header.topbar .filepat-menu-toggle span,header.topbar .mainnav{transition:none!important}
}