/* ===== CSS Variables (Design Tokens) ===== */
:root {
  --c-accent: #0069cc;
  --c-accent-hover: #0056a8;
  --c-accent-light: #e8f4fd;
  --c-bg: #ffffff;
  --c-bg-alt: #f5f7fa;
  --c-card: #ffffff;
  --c-border: #e6e6e6;
  --c-text: #1a1a1a;
  --c-text-secondary: #595959;
  --c-text-muted: #999999;
  --c-tag: #0069cc;
  --c-tag-bg: #e8f4fd;
  --c-hot: #dc2626;
  --ff-heading: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --ff-body: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem; --fs-4xl: 2.25rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --header-h: 60px;
  --container-w: 1200px;
  --sidebar-w: 300px;
  --transition: 0.2s ease;
}

/* ===== Dark Mode ===== */
.fui-dark {
  --c-bg: #1a1a2e;
  --c-bg-alt: #16162b;
  --c-card: #1f1f3a;
  --c-border: #2a2a4a;
  --c-text: #e8e8f0;
  --c-text-secondary: #b0b0c0;
  --c-text-muted: #7a7a90;
  --c-accent-light: rgba(0,105,204,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #1a1a2e;
    --c-bg-alt: #16162b;
    --c-card: #1f1f3a;
    --c-border: #2a2a4a;
    --c-text: #e8e8f0;
    --c-text-secondary: #b0b0c0;
    --c-text-muted: #7a7a90;
    --c-accent-light: rgba(0,105,204,.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
  }
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--ff-body);color:var(--c-text);background:var(--c-bg-alt);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.container{width:min(100% - var(--sp-6), var(--container-w));margin-inline:auto}

/* ===== Header / Navigation ===== */
.site-header{position:sticky;top:0;z-index:100;background:var(--c-bg);border-bottom:1px solid var(--c-border);height:var(--header-h)}
.header-inner{display:flex;align-items:center;gap:var(--sp-5);height:var(--header-h);max-width:var(--container-w);margin:0 auto;padding:0 var(--sp-4)}
.header-logo{font-size:var(--fs-xl);font-weight:700;color:var(--c-accent);white-space:nowrap}
.header-logo img{max-height:36px;width:auto}
.header-nav{display:flex;gap:var(--sp-2);flex:1;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.header-nav::-webkit-scrollbar{display:none}
.header-nav a{padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-sm);font-size:var(--fs-sm);white-space:nowrap;transition:all var(--transition)}
.header-nav a:hover,.header-nav a.active{color:var(--c-accent);background:var(--c-accent-light)}
.header-actions{display:flex;align-items:center;gap:var(--sp-3)}
.btn-icon{width:36px;height:36px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--c-text-secondary);transition:all var(--transition);padding:0}
.btn-icon:hover{background:var(--c-bg-alt);color:var(--c-accent)}
.btn-icon svg{width:18px;height:18px}
.mobile-menu-btn{display:none;width:36px;height:36px;border:none;background:none;cursor:pointer;border-radius:var(--radius-sm);align-items:center;justify-content:center;color:var(--c-text);padding:0}

/* ===== Search Modal ===== */
.search-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);justify-content:center;padding-top:15vh}
.search-overlay.active{display:flex}
.search-box{background:var(--c-card);border-radius:var(--radius-lg);padding:var(--sp-6);width:min(100% - var(--sp-6), 600px);box-shadow:var(--shadow-lg)}
.search-box form{display:flex;gap:var(--sp-2)}
.search-box input{flex:1;padding:10px var(--sp-4);border:2px solid var(--c-border);border-radius:var(--radius-sm);font-size:var(--fs-base);font-family:inherit;background:var(--c-bg);color:var(--c-text);outline:none}
.search-box input:focus{border-color:var(--c-accent)}
.search-box button{padding:10px var(--sp-5);background:var(--c-accent);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-base);white-space:nowrap}
.search-box button:hover{background:var(--c-accent-hover)}

/* ===== Layout ===== */
.content-layout{display:flex;gap:var(--sp-5);margin-top:var(--sp-5)}
.content-main{flex:1;min-width:0}
.content-side{width:var(--sidebar-w);flex-shrink:0;align-self:flex-start;position:sticky;top:calc(var(--header-h) + var(--sp-4))}

/* ===== Hero Section ===== */
.hero-section{display:flex;gap:var(--sp-4);height:400px;background:var(--c-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.hero-left{flex:1.5;position:relative;overflow:hidden;background:var(--c-bg-alt)}
.hero-left img{width:100%;height:100%;object-fit:cover}
.hero-left a{display:block;width:100%;height:100%}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--sp-5);background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.hero-overlay h2{font-size:var(--fs-2xl);font-weight:700;margin-bottom:var(--sp-2);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-meta{font-size:var(--fs-xs);opacity:.85;display:flex;gap:var(--sp-3);align-items:center}
.hero-meta .cat-tag{background:var(--c-accent);color:#fff;padding:2px 8px;border-radius:var(--radius-sm)}
.hero-right{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-2)}
.hero-right li{padding:var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);border-left:3px solid transparent}
.hero-right li:hover,.hero-right li.active{background:var(--c-accent-light);border-left-color:var(--c-accent)}
.hero-right li a{display:block}
.hero-right li h3{font-size:var(--fs-sm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-right li .time{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:var(--sp-1)}

/* ===== Block Header ===== */
.block-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:2px solid var(--c-accent)}
.block-header h2{font-size:var(--fs-xl);font-weight:700;color:var(--c-text)}
.block-header a{font-size:var(--fs-sm);color:var(--c-text-muted);transition:color var(--transition)}
.block-header a:hover{color:var(--c-accent)}

/* ===== Card Grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4)}
.article-card{background:var(--c-card);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition);cursor:pointer}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-bg-alt)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.article-card:hover .card-img img{transform:scale(1.05)}
.card-badge{position:absolute;top:var(--sp-2);left:var(--sp-2);background:var(--c-accent);color:#fff;font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--radius-sm)}
.card-body{padding:var(--sp-3)}
.card-body h3{font-size:var(--fs-base);font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--sp-2);text-wrap:balance}
.card-body .desc{font-size:var(--fs-sm);color:var(--c-text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--sp-2)}
.card-footer{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--c-text-muted)}
.card-footer .cat{color:var(--c-accent)}

/* ===== List Mode ===== */
.list-item{display:flex;gap:var(--sp-4);padding:var(--sp-4);background:var(--c-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition);cursor:pointer}
.list-item:hover{box-shadow:var(--shadow-md)}
.list-item+.list-item{margin-top:var(--sp-3)}
.list-thumb{width:240px;flex-shrink:0;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-sm);background:var(--c-bg-alt)}
.list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.list-item:hover .list-thumb img{transform:scale(1.05)}
.list-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.list-body h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--sp-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-body .desc{font-size:var(--fs-sm);color:var(--c-text-secondary);margin-bottom:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-body .meta{font-size:var(--fs-xs);color:var(--c-text-muted);display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}

/* ===== Sidebar ===== */
.sidebar-widget,.function{background:var(--c-card);border-radius:var(--radius-md);padding:var(--sp-4);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4)}
.sidebar-widget h3,.function_t{font-size:var(--fs-base);font-weight:700;margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:2px solid var(--c-accent)}
.function_c{padding:0}
.function_c ul{list-style:none;padding:0;margin:0}
.sidebar-post{display:flex;gap:var(--sp-3);padding:var(--sp-2) 0}
.sidebar-post+.sidebar-post{border-top:1px solid var(--c-border)}
.sidebar-post .num{width:20px;height:20px;text-align:center;line-height:20px;font-size:var(--fs-xs);font-weight:700;border-radius:var(--radius-sm);background:var(--c-bg-alt);color:var(--c-text-muted);flex-shrink:0;margin-top:2px}
.sidebar-post:nth-child(2) .num,
.sidebar-post:nth-child(3) .num,
.sidebar-post:nth-child(4) .num{background:var(--c-hot);color:#fff}
.sidebar-post .info{flex:1;min-width:0}
.sidebar-post .info h4{font-size:var(--fs-sm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-post .info .time{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:var(--sp-1)}
.sidebar-ad{aspect-ratio:3/4;background:var(--c-bg-alt);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--c-text-muted);font-size:var(--fs-sm)}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:var(--fs-sm);color:var(--c-text-muted);padding:var(--sp-3) 0}
.breadcrumb a{color:var(--c-text-secondary);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb span{margin:0 var(--sp-1)}

/* ===== Article Detail ===== */
.article-header{background:var(--c-card);padding:var(--sp-6);border-radius:var(--radius-lg);margin-bottom:var(--sp-4);box-shadow:var(--shadow-sm)}
.article-header h1{font-size:var(--fs-4xl);font-weight:700;line-height:1.3;margin-bottom:var(--sp-4)}
.article-meta{display:flex;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--c-text-muted);flex-wrap:wrap;align-items:center}
.article-content{background:var(--c-card);padding:var(--sp-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);line-height:1.8;font-size:var(--fs-base);overflow-wrap:break-word}
.article-content p{margin-bottom:var(--sp-4);color:var(--c-text-secondary)}
.article-content img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:var(--sp-4) auto}
.article-content h2,.article-content h3{color:var(--c-text);margin:var(--sp-5) 0 var(--sp-3)}
.article-content blockquote{border-left:3px solid var(--c-accent);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0;background:var(--c-accent-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--c-text-secondary)}
.article-tags{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap}
.article-tags a{font-size:var(--fs-xs);color:var(--c-accent);background:var(--c-accent-light);padding:4px 12px;border-radius:20px;transition:all var(--transition)}
.article-tags a:hover{background:var(--c-accent);color:#fff}
.article-share{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--c-border);align-items:center}
.article-share-label{font-size:var(--fs-sm);color:var(--c-text-muted);margin-right:var(--sp-2)}
.share-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--c-bg);color:var(--c-text-secondary);transition:all var(--transition)}
.share-btn:hover{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-light)}

/* ===== Prev/Next Nav ===== */
.post-nav{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-4);font-size:var(--fs-sm)}
.post-nav a{flex:1;padding:var(--sp-3) var(--sp-4);background:var(--c-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.post-nav a:hover{box-shadow:var(--shadow-md);color:var(--c-accent)}
.post-nav .prev{text-align:left}
.post-nav .next{text-align:right}

/* ===== Related Section ===== */
.related-section{margin-top:var(--sp-5)}

/* ===== Comments ===== */
.comments-section{background:var(--c-card);padding:var(--sp-5);border-radius:var(--radius-lg);margin-top:var(--sp-4);box-shadow:var(--shadow-sm)}
.comments-section h3{font-size:var(--fs-lg);margin-bottom:var(--sp-4);font-weight:700}
.comment-form textarea{width:100%;height:80px;border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:var(--sp-3);font-family:inherit;font-size:var(--fs-sm);resize:vertical;background:var(--c-bg);color:var(--c-text)}
.comment-form textarea:focus{outline:none;border-color:var(--c-accent)}
.comment-form input[type="text"]{width:100%;padding:8px var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--fs-sm);background:var(--c-bg);color:var(--c-text);margin-bottom:var(--sp-2)}
.comment-form input[type="text"]:focus{outline:none;border-color:var(--c-accent)}
.comment-form button{margin-top:var(--sp-2);padding:8px 24px;background:var(--c-accent);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);transition:background var(--transition)}
.comment-form button:hover{background:var(--c-accent-hover)}
.comment-item{padding:var(--sp-3) 0;display:flex;gap:var(--sp-3)}
.comment-item+.comment-item{border-top:1px solid var(--c-border)}
.comment-avatar{width:36px;height:36px;border-radius:50%;background:var(--c-bg-alt);flex-shrink:0;overflow:hidden}
.comment-avatar img{width:100%;height:100%;object-fit:cover}
.comment-body{flex:1;min-width:0}
.comment-body .name{font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:var(--sp-2)}
.comment-body .text{font-size:var(--fs-sm);color:var(--c-text-secondary);margin-top:var(--sp-1);word-break:break-word}
.comment-body .time{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:var(--sp-1)}
.comment-reply{margin-left:var(--sp-6);margin-top:var(--sp-2)}

/* ===== Pagination ===== */
.pagination{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5);flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:var(--fs-sm);border:1px solid var(--c-border);background:var(--c-card);transition:all var(--transition);padding:0 var(--sp-2)}
.pagination span.current{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.pagination a:hover{border-color:var(--c-accent);color:var(--c-accent)}
.pagination .dots{border:none;background:none;min-width:auto}

/* ===== Footer ===== */
.site-footer{background:var(--c-card);border-top:1px solid var(--c-border);padding:var(--sp-6) 0;margin-top:var(--sp-8);text-align:center;font-size:var(--fs-sm);color:var(--c-text-muted)}
.site-footer a:hover{color:var(--c-accent)}
.site-footer p+p{margin-top:var(--sp-2)}

/* ===== Back to Top ===== */
.back-to-top{position:fixed;bottom:var(--sp-5);right:var(--sp-5);width:44px;height:44px;background:var(--c-accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);border:none;opacity:0;visibility:hidden;transition:all var(--transition);z-index:50}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--c-accent-hover);transform:translateY(-2px)}

/* ===== Tab Navigation (card/list switch) ===== */
.tab-nav{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.tab-btn{padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;cursor:pointer;background:var(--c-bg);border:1px solid var(--c-border);transition:all var(--transition);color:var(--c-text-secondary)}
.tab-btn.active,.tab-btn:hover{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}

/* ===== 404 Page ===== */
.error-page{text-align:center;padding:var(--sp-8) 0}
.error-page h1{font-size:6rem;color:var(--c-accent);line-height:1}
.error-page p{font-size:var(--fs-lg);color:var(--c-text-muted);margin:var(--sp-4) 0}
.error-page a{display:inline-block;padding:10px 24px;background:var(--c-accent);color:#fff;border-radius:var(--radius-sm);font-size:var(--fs-base);transition:background var(--transition)}
.error-page a:hover{background:var(--c-accent-hover)}

/* ===== Ad Banner ===== */
.ad-banner{text-align:center;padding:var(--sp-4) 0;overflow:hidden}
.ad-banner img,.ad-banner iframe{max-width:100%}

/* ===== Category Intro ===== */
.cate-intro{background:var(--c-card);padding:var(--sp-4);border-radius:var(--radius-md);margin-bottom:var(--sp-4);font-size:var(--fs-sm);color:var(--c-text-secondary);box-shadow:var(--shadow-sm)}

/* ===== Post Meta Row ===== */
.post-meta-row{display:flex;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--c-text-muted);flex-wrap:wrap;align-items:center}
.post-meta-row .author-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .content-layout{flex-direction:column}
  .content-side{width:100%;position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .hero-section{height:auto;flex-direction:column}
  .hero-left{aspect-ratio:16/9}
  .hero-right{flex-direction:row;gap:var(--sp-2);overflow-x:auto}
  .hero-right li{min-width:200px;flex-shrink:0}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .list-thumb{width:160px}
}
@media (max-width: 768px) {
  .header-nav{display:none}
  .mobile-menu-btn{display:flex}
  .header-nav.open{display:flex;position:absolute;top:var(--header-h);left:0;right:0;background:var(--c-bg);flex-direction:column;padding:var(--sp-4);border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-md)}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .list-item{flex-direction:column}
  .list-thumb{width:100%}
  .content-side{grid-template-columns:1fr}
  .article-header h1{font-size:var(--fs-2xl)}
}
@media (max-width: 480px) {
  .card-grid{grid-template-columns:1fr}
  .hero-left{aspect-ratio:4/3}
  .hero-overlay h2{font-size:var(--fs-lg)}
  .hero-right li{min-width:160px}
}

/* ===== Utility ===== */
.text-muted{color:var(--c-text-muted)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mb-4{margin-bottom:var(--sp-4)}