/*
Theme Name: 拾趣导航
Author: 拾趣导航
Version: 1.0.0
*/

/* =======================【公共样式类开始】========================= */

:root{ --topbar-height: 36px; }
*{margin:0;padding:0;box-sizing:border-box;}
html { font-size:16px; } /* 1rem = 16px */
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; background:#f5f5f5; font-size:1rem; line-height:1.6; font-weight:300; color:#333; }
body.body-no-scroll { overflow: hidden; }
.top-container { position: sticky; top: 0; z-index: 200; width: 100%; background: #fff; }
.top-bar{ background:linear-gradient(135deg,#26d0ce 0%,#1a9a9f 100%); color:#fff;padding:8px 0;font-size:0.875rem;font-weight:200; min-height:var(--topbar-height); }
.top-bar-content{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;align-items:center;}
.top-bar-left a{color:#fff;text-decoration:none;font-weight:200;margin-right:12px;}
.top-bar-right{display:flex;align-items:center;font-weight:200;}
.top-bar-right span:first-child::after{content:"";display:inline-block;width:1px;height:12px;background:white;margin:0 5px;vertical-align:middle;}
.header{ background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); border-bottom: 1px solid #03030326; }
.header-content{ max-width:1200px; margin:0 auto; padding:25px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.logo svg{height:50px; width:auto;}
.search-box{ display:flex; align-items:center; height:48px; border:2px solid #26d0ce; border-radius:8px; overflow:hidden; background:#26d0ce; flex: 1 1 clamp(420px, 42%, 720px); min-width:360px; max-width:760px; box-sizing:border-box; }
.engine-wrap{ display:flex; align-items:center; padding:0 16px 0 12px; background:#f7f7f7; position:relative; min-width:120px; height:100%; box-sizing:border-box; flex-shrink: 0; }
.engine-select{ -webkit-appearance:none; appearance:none; border:none; outline:none; background:transparent; font-size:0.9375rem; color:#333; height:100%; cursor:pointer; padding:0; padding-right:22px; line-height:48px; display:flex; align-items:center; line-height:35px; font-weight:300; }
.engine-arrow{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:10px; height:6px; pointer-events:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%23888" d="M5 6L0 0h10z"/></svg>'); background-repeat:no-repeat; background-size:10px 6px; }
.search-input{flex:1;border:none;outline:none;padding:0 14px;font-size:1rem;height:100%;background:#fff;min-width: 50px; font-weight:300;}
.search-btn{height:100%;border:none;background:#26d0ce;color:#fff;padding:0 22px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink: 0; font-weight:300;}
.header-right{display:flex;gap:20px;align-items:center;flex:0 0 auto;}
.header-right a{text-decoration:none;color:#666;font-size:0.9375rem;display:flex;align-items:center;gap:5px; font-weight:300;}
.sidebar-nav{list-style:none;}
.sidebar-nav li{margin-bottom:8px;}
.sidebar-nav a{text-decoration:none;color:#666;font-size:1rem;display:block;padding:5px 0;border-radius:4px;transition:all .3s; font-weight:300;}
.sidebar-nav a:hover{background:#f0f0f0;color:#26d0ce;padding-left:10px;}
.right-panel{width:230px;flex-shrink:0;}
.panel-section{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;}
.panel-title{font-size:1.125rem;color:#333;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #f0f0f0; font-weight:500;}
.hot-item{display:flex;align-items:center;padding:4px 5px;border-radius:4px;cursor:pointer;transition:all .3s;}
.hot-item:hover{background:#f8f8f8;}
.hot-rank{width:25px;font-weight:600;color:#999;font-size:1rem;}
.hot-rank.top{color:#ff4757;}
.hot-content{flex:1;color:#666;font-size:0.96875rem; font-weight:300;}
/* 右侧栏链接样式（公共） */
.right-panel .panel-section .hot-item a { color: #666; text-decoration: none; }
.right-panel .panel-section .hot-item a:hover { color: #26d0ce; text-decoration: none; }
.footer{background:#3a434e;color:#999;padding:40px 0 20px;margin-top:50px;}
.footer-content{max-width:1200px;margin:0 auto;padding:0 20px;}
.footer-top{display:grid;grid-template-columns:2fr 1.5fr 1.5fr 1.5fr;gap:40px;margin-bottom:30px;}
.footer-column h4{color:#fff;font-size:1.03125rem;margin-bottom:15px; font-weight:600;}
.footer-column a{color:#999;text-decoration:none;display:inline-block;margin:0 10px 10px 0;font-size:0.90625rem; font-weight:300;}
.footer-column a:hover{color:#26d0ce;}
.qr-codes{display:flex;gap:20px;}
.qr-item{text-align:center;}
.qr-item img{width:100px;height:100px;background:#fff;padding:10px;border-radius:4px;}
.qr-item .qr-item-placeholder { width: 100px; height: 100px; background: #f5f5f5; border: 1px dashed #ddd; border-radius: 4px; box-sizing: border-box; }
.qr-item p{margin-top:8px;font-size:0.75rem; color:#999;}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #f9f9f912;font-size:0.875rem;word-wrap: break-word;}
.footer-bottom a{color:#999;text-decoration:none;margin:0 10px;}
.back-to-top{position:fixed;bottom:50px;right:30px;width:50px;height:50px;background:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.1);cursor:pointer;transition:all .3s;z-index:250; font-size:1.125rem; font-weight:400;}
.back-to-top:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,0.15);}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.overlay.is-active{opacity:1;pointer-events:auto;}
.mobile-sidebar {display: none;}
.mobile-fab-container{display:none;}

/* 公共辅助文字类 */
/* 侧边栏说明文字（你要求用 200 字重） */
.text-muted-200 { font-size:0.9375rem; color:#666; line-height:1.6; font-weight:200; }
/* 页脚"关于我们"正文，按网页1视觉：颜色 #999，小号段落，正常轻字重（300，继承 body 也可） */
.footer-text { font-size:0.9375rem; color:#999; line-height:1.6; font-weight:300; }
.footer-links { margin-top:10px; }

@media (max-width: 991px){
    .top-bar-right span:nth-child(2),
    .top-bar-right span:first-child::after { display: none; }
    .logo, .header-right { display: none; }
    .header-content{ padding: 16px 15px; justify-content: center; }
    .search-box{ flex: 1 1 auto !important; max-width: 100%; min-width: 0; }
    .engine-wrap{ min-width: auto; padding: 0 12px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
    .search-input{ padding: 0 10px; }
    .search-btn { padding: 0 16px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
    .mobile-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 250px; height: 100vh; background: #fff; z-index: 1000; transform: translateX(-100%); transition: transform .3s ease; }
    .mobile-sidebar.is-active { transform: translateX(0); }
    .mobile-sidebar-header { height: 170px; background: #03B247; flex-shrink: 0; color: white; padding: 20px; position: relative; overflow: hidden; }
    .mobile-sidebar-header::before { content: ''; position: absolute; top: -150px; left: -150px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 255, 220, 0.2) 0%, rgba(255, 255, 220, 0) 70%); z-index: 1; }
    .sidebar-sun-icon { position: relative; z-index: 2; }
    .warm-sentence { position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); text-align: center; color: white; font-weight: 200; font-size: 0.875rem; line-height: 1.5; z-index: 2; padding: 0px 35px; margin-top: 5px; }
    .mobile-sidebar-content { flex: 1; overflow-y: auto; padding: 20px; }
    .mobile-sidebar-footer { height: 40px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; padding: 0 20px; display: flex; align-items: center; }
    .mobile-sidebar .sidebar-nav li { margin-bottom: 2px; }
    .mobile-sidebar .sidebar-nav a { font-size: 1rem; font-weight: 300; padding: 6px 0; }
    .right-panel { display: none; }
    .footer-top { grid-template-columns: 1fr; }
    .back-to-top { display: none !important; }
    .mobile-fab-container { display: flex; flex-direction: column; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 250; background: #fff; border-radius: 8px 0 0 8px; box-shadow: 0 2px 10px rgb(0 0 0 / 27%); overflow: hidden; }
    .fab-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #666; }
    .fab-btn:nth-child(2) { border-top: 1px solid #f0f0f0; }
}
/* =======================【公共样式类结束】========================= */

/* =======================【首页样式类开始】========================= */

.main-container{max-width:1200px;margin:20px auto;padding:0 20px;display:flex;gap:20px;}
.sidebar{width:200px;background:#fff;border-radius:8px;padding:20px;height:fit-content;flex-shrink:0;}
.sidebar h3{font-size:1.0625rem;margin-bottom:15px;color:#333;font-weight:400;}
.content{flex:1;overflow:visible;height:auto;-ms-overflow-style:none;scrollbar-width:none;}
.section{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;scroll-margin-top: 140px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #f0f0f0;}
.section-title{font-size:1.25rem;color:#333;font-weight:600;}
.section-more{color:#999;text-decoration:none;font-size:0.9375rem;font-weight:300;}
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px;}
.site-item{text-decoration:none;display:flex;align-items:center;padding:10px;border-radius:6px;transition:all .3s;border:1px solid transparent;}
.site-item:hover{background:#f8f8f8;border-color:#e0e0e0;}
.site-icon{width:40px;height:40px;border-radius:8px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:bold;flex-shrink:0;}
.site-icon img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: inherit; }
.site-icon img.lazy-load { opacity: 0; transition: opacity 0.3s ease-in-out; }
.site-icon img.loaded { opacity: 1; }
.site-info{overflow:hidden;flex: 1;}
.site-name{color:#333;font-size:0.96875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-desc{color:#999;font-size:0.84375rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width: 991px){
    .main-container { padding: 0 15px; display: block; }
    .section { padding: 1rem; }
    .sidebar { display: none; }
    .site-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .site-item { width: calc(50% - 5px); flex-grow: 0; }
    .section-title { font-size:1.1875rem; }
    .site-name { font-size:0.9375rem; }
    .site-desc { font-size:0.8125rem; }
}
/* =======================【首页样式类结束】========================= */

/* =======================【文章页样式类开始】========================= */

.article-container{ max-width:1200px; margin:20px auto; padding:0 20px; display:flex; gap:20px; align-items: flex-start; }
.article-content{ flex: 1; background: #fff; border-radius: 8px; padding: 30px; }
.breadcrumb { margin-bottom: 25px; font-size:0.875rem; color: #999; }
.breadcrumb a { color: #666; text-decoration: none; }
.breadcrumb a:hover { color: #26d0ce; }
.breadcrumb span { margin: 0 8px; }
.article-header { margin-bottom: 30px; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; }
.article-header h1 { font-size: 1.75rem; color: #333; margin-bottom: 15px; line-height: 1.4; font-weight: 600; }
.article-meta { font-size: 0.8125rem; color: #999; }
.article-meta span { margin-right: 15px; }
.article-meta a { color:#666; text-decoration:none; }
.article-meta a:hover { color:#26d0ce; }
.article-body { font-size: 1rem; line-height: 1.8; color: #444; font-weight:300; }
.article-body p { margin-bottom: 20px; }
.article-body h2 { font-size: 1.375rem; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; font-weight:600; color:#333; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0 20px; }
.article-body blockquote { margin: 20px 0; padding: 20px; background: #f9f9f9; border-left: 4px solid #26d0ce; color: #666; font-style: italic; font-size:0.9375rem; }
.article-tags { margin-top: 40px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.article-tags span { display: inline-block; background: #f0f0f0; color: #888; padding: 5px 12px; border-radius: 4px; font-size: 0.8125rem; margin-right: 10px; margin-bottom: 10px; }

@media (max-width: 991px){
    .article-container { display: block; padding: 0 15px; }
    .article-content { padding: 20px; }
    .article-header h1 { font-size: 1.5rem; }
}
/* =======================【文章页样式类结束】========================= */v