:root{
    --bg:#f6f8fa;
    --card:#ffffff;
    --text:#222;
    --text2:#666;
    --border:#e5e7eb;
    --primary:#2563eb;
    --hover:#eff6ff;
}
[data-theme="dark"]{
    --bg:#111827;
    --card:#1f2937;
    --text:#f3f4f6;
    --text2:#9ca3af;
    --border:#374151;
    --primary:#3b82f6;
    --hover:#253b5b;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;}
body{background-color:var(--bg);color:var(--text);transition:0.25s ease;}
.container{max-width:1200px;margin:0 auto;padding:16px;}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:16px;flex-wrap:wrap;}
.logo{font-size:24px;font-weight:bold;color:var(--primary);text-decoration:none;}
.theme-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:18px;}
.icon-sun{display:none;}
.icon-moon{display:inline;}
[data-theme="dark"] .icon-sun{display:inline;}
[data-theme="dark"] .icon-moon{display:none;}

.search-box{width:100%;max-width:460px;margin:12px auto 24px;display:block;}
.search-box input{width:100%;padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);outline:none;font-size:15px;}


.ad-bottom{width:100%;min-height:80px;background:var(--card);border-radius:10px;border:1px solid var(--border);margin:30px 0 20px;display:flex;align-items:center;justify-content:center;color:var(--text2);}

.cate-title{font-size:18px;font-weight:600;margin:30px 0 14px;display:flex;align-items:center;gap:8px;}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));
    gap:14px;margin-bottom:10px;
}
.grid > * {min-width:0;}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 12px;text-align:center;text-decoration:none;color:var(--text);transition:0.2s;}
.tool-card:hover{transform:translateY(-3px);background:var(--hover);border-color:var(--primary);}
.tool-card .icon{font-size:26px;margin-bottom:8px;}
.tool-card .name{font-size:14px;font-weight:500;}
footer{padding:30px 0;text-align:center;color:var(--text2);font-size:13px;border-top:1px solid var(--border);}


.back-top{
    position:fixed;
    right:20px;
    bottom:20px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:0.25s;
    z-index:99;
}
.back-top.show{
    opacity:1;
    visibility:visible;
}
.back-top:hover{
    background:var(--hover);
}


.tool-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;margin:20px 0;}
.tool-wrap h1{font-size:20px;margin-bottom:12px;}
.tool-input,.tool-output{width:100%;min-height:140px;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;font-size:14px;}
.btn{padding:10px 18px;border-radius:8px;border:none;background:var(--primary);color:#fff;cursor:pointer;margin:4px;}
.recommend-title{font-size:17px;font-weight:600;margin:30px 0 12px;}

.seo-info{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:24px;
    margin:20px 0;
    line-height:1.8;
    color:var(--text2);
}
.seo-info h2{
    font-size:18px;
    color:var(--text);
    margin-bottom:12px;
}
.seo-info h3{
    font-size:16px;
    color:var(--text);
    margin:14px 0 8px;
}
.seo-info p{
    margin-bottom:10px;
}
.seo-info ul{
    padding-left:20px;
    margin-bottom:10px;
}

@media (max-width:640px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr));gap:10px;}
    header{flex-direction:column;align-items:flex-start;}
    .back-top{right:12px;bottom:12px;width:40px;height:40px;}
}
footer {
    margin-top: 40px;
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: #666;
}
footer a {
    color: #666;
    text-decoration: none;
}
footer a:hover {
    color: #2563eb;
}
.dark footer {
    color: #aaa;
}
.dark footer a {
    color: #aaa;
}
.dark footer a:hover {
    color: #60a5fa;
}