body{
font-family:Arial,Helvetica,sans-serif;
background:#f4f6fb;
margin:0;
}

.container{
max-width:1100px;
margin:auto;
padding:30px;
}

h1{
text-align:center;
}

.subtitle{
text-align:center;
color:#666;
margin-bottom:20px;
}

#search{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:0;
font-size:16px;
}

.search-wrap{
position:relative;
margin-bottom:16px;
}

.search-suggestions{
display:none;
position:absolute;
top:calc(100% + 6px);
left:0;
right:0;
z-index:20;
background:#fff;
border:1px solid #d1d5db;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
max-height:320px;
overflow:auto;
}

.search-suggestions.visible{
display:block;
}

.search-suggestion{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border:none;
background:none;
text-align:left;
padding:10px 14px;
cursor:pointer;
}

.search-suggestion:hover,
.search-suggestion.active{
background:#eff6ff;
}

.search-suggestion-name{
color:#111827;
font-size:0.95rem;
font-weight:500;
}

.search-suggestion-cat{
color:#6b7280;
font-size:0.8rem;
white-space:nowrap;
}

.favorites-section{margin-bottom:24px}
.favorites-section-title{font-size:0.9rem;color:#6b7280;margin:0 0 10px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.02em}
.favorites-grid{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;line-height:1.8}
.favorites-grid .tool-link-plain{color:#2563eb;text-decoration:none;font-size:0.95rem}
.favorites-grid .tool-link-plain:hover{text-decoration:underline}
.favorites-grid .tool-link-plain::after{content:" · ";color:#9ca3af;font-weight:400}
.favorites-grid .tool-link-plain:last-child::after{content:""}

.popular-tools{padding:0 0 24px}
.popular-tools-title{font-size:0.9rem;color:#6b7280;margin:0 0 10px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.02em}
.popular-tools-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;line-height:1.8}
.popular-tool-tag{color:#2563eb;text-decoration:none;font-size:0.95rem;padding:0;display:inline;border:none;background:none}
.popular-tool-tag:hover{text-decoration:underline}
.popular-tools-row .popular-tool-tag::after{content:" · ";color:#9ca3af;font-weight:400}
.popular-tools-row .popular-tool-tag:last-child::after{content:""}

.tool-breadcrumb-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.tool-breadcrumb{font-size:0.9rem;color:#6b7280;margin:0}
.tool-breadcrumb a{color:#2563eb;text-decoration:none}
.tool-breadcrumb a:hover{text-decoration:underline}
.tool-breadcrumb span{color:#374151}
.tool-page-fav-btn{padding:6px 12px;font-size:0.85rem;border:1px solid #e5e7eb;background:#fff;color:#6b7280;border-radius:6px;cursor:pointer}
.tool-page-fav-btn:hover{background:#f3f4f6;color:#374151}
.tool-page-fav-btn.active{background:#eef2ff;border-color:#c7d2fe;color:#2563eb}
.tool-category-list{list-style:none;padding:0;margin:16px 0}
.tool-category-list li{margin:8px 0}
.tool-category-list a{color:#2563eb;text-decoration:none}
.tool-category-list a:hover{text-decoration:underline}
.tool-related{margin-top:32px;padding-top:24px;border-top:1px solid #e5e7eb}
.tool-related h3{font-size:1rem;color:#374151;margin:0 0 12px 0}
.tool-related ul{margin:0;padding-left:20px}
.tool-related li{margin:6px 0}
.tool-related a{color:#2563eb;text-decoration:none}
.tool-related a:hover{text-decoration:underline}

.about-tools{
margin-top:48px;
padding-top:32px;
border-top:1px solid #e5e7eb;
}

.about-tools-title{
font-size:0.9rem;
color:#6b7280;
margin:0 0 12px 0;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.02em;
}

.about-tools-heading{
font-size:1.1rem;
color:#374151;
margin:0 0 8px 0;
font-weight:600;
}

.about-tools-text{
color:#6b7280;
line-height:1.6;
margin:0;
font-size:0.95rem;
}

.site-footer{
margin:36px auto 26px;
padding:0 30px;
max-width:1100px;
text-align:center;
}

.site-footer-links{
margin:0;
color:#6b7280;
line-height:1.8;
}

.site-footer-links a{
color:#2563eb;
text-decoration:none;
}

.site-footer-links a:hover{
text-decoration:underline;
}

.site-footer-copy{
margin:8px 0 0;
font-size:0.85rem;
color:#94a3b8;
}

.tool-seo{
margin-top:32px;
padding-top:20px;
border-top:1px solid #e5e7eb;
max-width:900px;
}

.tool-seo h3{
font-size:1rem;
color:#374151;
margin:0 0 10px 0;
}

.tool-seo p{
color:#6b7280;
line-height:1.7;
margin:0 0 12px 0;
}

.tool-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:12px 0 0;
}

.inline-status{
color:#6b7280;
margin-top:8px;
}

.pdf-file-input{
display:block;
margin:8px 0 0;
}

.pdf-helper{
font-size:13px;
color:#666;
margin:8px 0 12px;
}

.pdf-editor{
width:90%;
}

.pdf-editor-mono{
font-family:monospace;
}

.pdf-preview-box{
width:90%;
min-height:240px;
padding:16px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#fff;
color:#111827;
overflow:auto;
box-sizing:border-box;
}

.pdf-preview-wrap{
width:90%;
overflow:auto;
}

.pdf-preview-table{
display:inline-block;
min-width:100%;
background:#fff;
color:#111827;
}

.pdf-preview-grid{
display:flex;
flex-wrap:wrap;
gap:12px;
width:90%;
}

.pdf-thumb{
width:150px;
}

.pdf-thumb img{
width:100%;
border:1px solid #e5e7eb;
border-radius:6px;
display:block;
}

.pdf-thumb p{
font-size:12px;
color:#666;
margin:6px 0 0;
word-break:break-word;
}

.info-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
padding:16px 18px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.info-card + .info-card{
margin-top:14px;
}

.info-card-title{
font-size:0.9rem;
color:#6b7280;
margin:0 0 10px 0;
font-weight:600;
text-transform:uppercase;
letter-spacing:0.02em;
}

.info-card-value{
font-size:1rem;
color:#111827;
font-weight:600;
line-height:1.6;
}

.info-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:12px;
}

.info-item{
background:#fff;
border:1px solid #e5e7eb;
border-radius:8px;
padding:12px 14px;
}

.info-label{
display:block;
font-size:0.8rem;
color:#6b7280;
margin-bottom:6px;
text-transform:uppercase;
letter-spacing:0.02em;
}

.info-value{
display:block;
color:#111827;
font-weight:600;
word-break:break-word;
line-height:1.5;
}

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.tool-section{
margin-bottom:32px;
}

.tool-section:last-child{
margin-bottom:0;
}

.category-title{
font-size:1.1rem;
color:#374151;
margin-bottom:12px;
padding-bottom:6px;
border-bottom:2px solid #e5e7eb;
}
.category-title a{
color:#374151;
text-decoration:none;
}
.category-title a:hover{
color:#2563eb;
text-decoration:underline;
}

.category-description{
color:#6b7280;
font-size:0.95rem;
line-height:1.6;
margin:-4px 0 14px;
max-width:760px;
}

.no-results{
color:#6b7280;
text-align:center;
padding:40px 20px;
}

.tool-grid{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px 0;
line-height:1.8;
}

.tool-card{
display:inline;
padding:0;
background:none;
border:none;
border-radius:0;
box-shadow:none;
color:#2563eb;
text-decoration:none;
font-size:0.95rem;
}

.tool-card:hover{
transform:none;
box-shadow:none;
text-decoration:underline;
}

.tool-card::after{
content:" · ";
color:#9ca3af;
font-weight:400;
}

.tool-section .tool-grid .tool-card:last-child::after{
content:"";
}


@media(max-width:768px){

.search-suggestion{
display:block;
padding:10px 12px;
}

.search-suggestion-cat{
display:block;
margin-top:2px;
white-space:normal;
}

.info-grid{
grid-template-columns:1fr;
}

.site-footer{
padding:0 16px;
}

}

.back-to-top{
position:fixed;
bottom:24px;
right:24px;
width:44px;
height:44px;
border-radius:50%;
border:1px solid #c7d2fe;
background:#eef2ff;
color:#2563eb;
font-size:1.2rem;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:opacity 0.2s,visibility 0.2s;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.back-to-top:hover{
background:#c7d2fe;
}
.back-to-top.visible{
opacity:1;
visibility:visible;
}

/* How-to Use section */
.how-to-use{
margin-top:32px;
padding:20px 24px;
background:#f9fafb;
border-radius:10px;
border:1px solid #e5e7eb;
}

.how-to-use h3{
font-size:1rem;
color:#1f2937;
margin:0 0 16px 0;
font-weight:600;
}

.how-to-steps{
margin:0;
padding-left:20px;
}

.how-to-steps li{
margin:10px 0;
color:#374151;
line-height:1.6;
}

.how-to-steps li strong{
color:#1f2937;
font-weight:600;
}

/* FAQ section */
.faq{
margin-top:24px;
padding:20px 24px;
background:#f9fafb;
border-radius:10px;
border:1px solid #e5e7eb;
}

.faq h3{
font-size:1rem;
color:#1f2937;
margin:0 0 16px 0;
font-weight:600;
}

.faq-list{
margin:0;
}

.faq-list dt{
font-weight:600;
color:#1f2937;
margin:16px 0 6px 0;
font-size:0.95rem;
}

.faq-list dt:first-child{
margin-top:0;
}

.faq-list dd{
margin:0 0 12px 0;
color:#4b5563;
line-height:1.6;
font-size:0.95rem;
}

@media(max-width:768px){
.how-to-use,.faq{
padding:16px;
}
}