*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#A31F34;--primary-rgb:163,31,52;
  --bg:#fafafa;--bg-card:rgba(255,255,255,.75);--bg-solid:#fff;--bg-footer:#f5f5f5;
  --text:#2c2c2c;--text2:#555;--text3:#888;
  --border:#e5e5e5;--border-light:rgba(229,231,235,.4);
  --content-w:100%;--sidebar-w:280px;--nav-h:60px;
  --glass-bg:rgba(255,255,255,.55);--glass-blur:20px;--glass-border:rgba(229,231,235,.35);
  --shadow-card:0 1px 4px rgba(0,0,0,.06),0 0 0 1px rgba(229,231,235,.08);
  --shadow-hover:0 8px 24px rgba(0,0,0,.12);
  --radius:14px;--radius-sm:8px;--radius-md:12px;--radius-full:9999px;
  --fs-xs:.78rem;--fs-sm:.82rem;
  --transition-fast:.2s ease;--transition-base:.35s ease;
  --max-content-width:1400px;
  --content-padding:24px
}
@media(min-width:768px){:root{--content-padding:48px}}
@media(min-width:1200px){:root{--content-padding:64px}}
.dark-mode{
  --bg:#1a1a1a;--bg-card:rgba(38,38,38,.8);--bg-solid:#1a1a1a;--bg-footer:#141414;
  --text:#e8e8e8;--text2:#b0b0b0;--text3:#777;
  --border:#333;--border-light:rgba(107,114,128,.3);
  --glass-bg:rgba(28,28,28,.6);--glass-border:rgba(107,114,128,.25)
}
body{font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary)}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* Preloader */
.preloader{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;inset:0;background:var(--bg-solid);z-index:100010;transition:opacity .6s cubic-bezier(.4,0,.2,1),visibility .6s}
.preloader.hide{opacity:0;visibility:hidden;pointer-events:none}
.preloader-logo{font-family:'Chillax Variable',system-ui,sans-serif;font-size:2.8rem;font-weight:600;letter-spacing:-1px;color:var(--text);opacity:0;transform:translateY(20px);animation:preIn .7s .15s cubic-bezier(.4,0,.2,1) forwards}
.preloader-bar{width:100px;height:3px;background:var(--border);border-radius:3px;margin-top:18px;overflow:hidden;opacity:0;animation:preIn .4s .4s ease forwards}
.preloader-bar span{display:block;width:0;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),#f78736,#367df7);animation:preBar 1.1s .5s ease forwards}
@keyframes preIn{to{opacity:1;transform:translateY(0)}}
@keyframes preBar{0%{width:0}55%{width:75%}100%{width:100%}}

/* Scroll Progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100012;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f78736,#367df7);transition:width .12s linear}

/* Navbar */
.navbar-container{position:fixed;top:0;left:0;right:0;z-index:100008;height:var(--nav-h);padding:0 var(--content-padding);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent;box-shadow:none;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
.navbar-content{max-width:var(--max-content-width);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.navbar-left{display:flex;align-items:center}
.logo-title{font-family:'Chillax Variable',system-ui,sans-serif;font-size:1.55rem;font-weight:600;letter-spacing:.5px;cursor:pointer;color:var(--text);text-shadow:none;transition:color .35s,text-shadow .35s;display:flex;align-items:center;line-height:1}
.dark-mode .logo-title{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.logo-title h1{font-size:inherit;font-weight:inherit;line-height:1;color:inherit;margin:0;padding:0}
.navbar-right{display:flex;align-items:center}
.navbar-list{display:flex;gap:4px;align-items:center}
.navbar-item{position:relative}
.navbar-item a{display:flex;align-items:center;gap:6px;padding:7px 13px;font-size:.9rem;font-weight:500;border-radius:6px;white-space:nowrap;cursor:pointer;color:var(--text2);transition:all var(--transition-fast);line-height:1}
.dark-mode .navbar-item a{color:rgba(255,255,255,.88)}
.navbar-item a i.fa-fw{font-size:.8rem;display:flex;align-items:center;justify-content:center;height:1em;line-height:1}
.navbar-item a:hover{color:var(--primary);background:rgba(0,0,0,.05)}
.dark-mode .navbar-item a:hover{color:#fff;background:rgba(255,255,255,.13)}
.nav-tools{display:flex;align-items:center;gap:2px;margin-left:16px}
.nav-tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;border:none;background:transparent;font-size:1rem;color:var(--text2);transition:all var(--transition-fast)}
.dark-mode .nav-tool-btn{color:rgba(255,255,255,.88)}
.nav-tool-btn:hover{background:rgba(0,0,0,.05);color:var(--primary)}
.dark-mode .nav-tool-btn:hover{background:rgba(255,255,255,.13);color:#fff}

/* Navbar glass state */
.navbar-container.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);border-bottom:1px solid var(--glass-border);box-shadow:0 1px 8px rgba(0,0,0,.05)}
.navbar-container.glass .logo-title{color:var(--primary);text-shadow:none}
.navbar-container.glass .navbar-item a{color:var(--text2)}
.navbar-container.glass .navbar-item a:hover{color:var(--primary);background:rgba(var(--primary-rgb),.07)}
.navbar-container.glass .nav-tool-btn{color:var(--text2)}
.navbar-container.glass .nav-tool-btn:hover{background:rgba(0,0,0,.04);color:var(--primary)}
.dark-mode .navbar-container.glass .nav-tool-btn:hover{background:rgba(255,255,255,.06)}

/* Mobile hamburger */
.navbar-bar{display:none;cursor:pointer;width:20px;height:18px;position:relative;margin-left:12px;color:inherit;background:none;border:none;padding:0}
.navbar-bar span{display:block;position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:all .35s ease}
.navbar-bar span:nth-child(1){top:0}
.navbar-bar span:nth-child(2){top:50%;transform:translateY(-50%)}
.navbar-bar span:nth-child(3){bottom:0}
body.drawer-open .navbar-bar span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
body.drawer-open .navbar-bar span:nth-child(2){opacity:0}
body.drawer-open .navbar-bar span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

/* Mobile drawer */
.navbar-drawer{position:fixed;top:var(--nav-h);right:0;bottom:0;width:280px;max-width:80vw;z-index:100007;background:var(--glass-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-left:1px solid var(--glass-border);padding:16px 0;overflow-y:auto;transform:translateX(100%);transition:transform .38s ease}
body.drawer-open .navbar-drawer{transform:translateX(0)}
.drawer-item{display:flex;align-items:center;gap:10px;padding:13px 24px;font-size:.95rem;color:var(--text);cursor:pointer;transition:all var(--transition-fast)}
.drawer-item:hover{color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.drawer-item i{width:18px;text-align:center;font-size:.85rem}
.window-mask{position:fixed;inset:0;z-index:100006;background:rgba(0,0,0,.35);visibility:hidden;opacity:0;transition:opacity .38s ease,visibility .38s ease}
body.drawer-open .window-mask{visibility:visible;opacity:1}

/* Home Banner */
.home-banner-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:0;transform:scale(1.12);transition:filter .5s ease}
@media(max-width:639px){.home-banner-bg{transform:scale(1.22)}}
.home-banner-bg img{width:100%;height:100%;object-fit:cover}
.home-banner-bg .dark{display:none}
.dark-mode .home-banner-bg .light{display:none}
.dark-mode .home-banner-bg .dark{display:block}
.home-banner{position:relative;height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1;overflow:hidden;padding:var(--nav-h) var(--content-padding) 80px}
.banner-content{text-align:center;color:#fff;width:100%;max-width:900px;padding:0 var(--content-padding)}
.banner-title{font-family:'Chillax Variable',system-ui,sans-serif;font-size:clamp(1.5rem,6vw,2.5rem);font-weight:700;letter-spacing:1px;text-shadow:0 2px 16px rgba(0,0,0,.25);opacity:0;transform:translateY(28px);animation:fadeUp .8s .2s cubic-bezier(.4,0,.2,1) forwards;line-height:1.2}
.banner-subtitle{font-size:clamp(1.25rem,5vw,2rem);font-weight:350;margin-top:16px;text-shadow:0 1px 8px rgba(0,0,0,.25);min-height:2em;opacity:0;animation:fadeUp .8s .5s cubic-bezier(.4,0,.2,1) forwards}
.banner-subtitle .typed-cursor{animation:blink .75s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fadeUp{to{opacity:.95;transform:translateY(0)}}
.banner-bottom{position:absolute;bottom:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:20px;width:100%;max-width:var(--max-content-width);margin:0 auto;padding:0 var(--content-padding);opacity:0;animation:fadeUp .7s .8s cubic-bezier(.4,0,.2,1) forwards;flex-wrap:wrap}
@media(max-width:639px){.banner-bottom{bottom:30px;flex-direction:column;gap:16px}}
.scroll-down-btn{width:42px;height:42px;background:rgba(209,213,219,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all var(--transition-base);font-size:.95rem}
.dark-mode .scroll-down-btn{background:rgba(107,114,128,.35);border-color:rgba(107,114,128,.25)}
.scroll-down-btn:hover{background:rgba(156,163,175,.55)}
.scroll-down-btn:hover i{transform:translateY(3px)}
.scroll-down-btn i{transition:transform .3s}
.social-links{display:flex;gap:11px;align-items:center;padding:9px 18px;background:rgba(209,213,219,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-full)}
.dark-mode .social-links{background:rgba(107,114,128,.35);border-color:rgba(107,114,128,.25)}
.social-links .social-link{color:#fff;font-size:1.05rem;transition:all var(--transition-fast);display:flex;align-items:center}
.social-links .social-link:hover{transform:scale(1.18)}

/* Main Content */
.main-content-container{position:relative;z-index:2;background:transparent}
body:not(.is-home):not(.is-demo) .main-content-container{background:var(--bg);min-height:80vh;padding-top:calc(var(--nav-h) + 20px)}
.main-content{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:80px var(--content-padding) 40px;display:flex;gap:32px}
body.is-home .main-content,body.is-demo .main-content{padding-top:90px}
@media(max-width:1023px){.main-content{flex-direction:column;padding-top:40px;gap:24px}}
.content-area{flex:1;min-width:0}
.sidebar-area{width:var(--sidebar-w);flex-shrink:0}
.sidebar-sticky{position:sticky;top:80px;height:fit-content}
@media(max-width:1023px){.sidebar-area{width:100%;order:2}.sidebar-sticky{position:static}}

/* Article Cards */
.article-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
@media(max-width:639px){.article-list{grid-template-columns:1fr;gap:20px}}
.article-card{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transition:all var(--transition-base)}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card-cover{position:relative;height:155px;overflow:hidden}
.card-cover a{display:block;height:100%}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dark-mode .card-cover img{filter:brightness(.78)}
.article-card:hover .card-cover img{transform:scale(1.06)}
.card-body{display:flex;flex-direction:column;gap:18px;padding:18px 24px 24px}
.card-title{font-size:1.05rem;font-weight:600;line-height:1.4}
.card-title a{color:var(--text)}
.card-title a:hover{color:var(--primary)}
.card-excerpt{font-size:.9rem;color:var(--text2);line-height:1.65}
.card-excerpt p{text-indent:2em}
.card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:var(--fs-xs);color:var(--text3)}
.card-meta span{display:flex;align-items:center;gap:4px}
.card-meta i{font-size:.72rem}
.card-meta a{color:var(--text3)}
.card-meta a:hover{color:var(--primary)}
.read-more-btn{display:flex;align-items:center;gap:5px;font-size:var(--fs-sm);color:var(--primary);font-weight:500;white-space:nowrap}
.read-more-btn i{transition:transform var(--transition-fast)}
.read-more-btn:hover i{transform:translateX(3px)}

/* Pagination */
.pagination{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pagination .page-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:var(--radius-sm);font-size:.9rem;background:var(--bg-card);color:var(--text);border:1px solid var(--border);transition:all var(--transition-fast);cursor:pointer;text-decoration:none}
.pagination .page-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .page-btn.disabled{opacity:.5;cursor:not-allowed;background:var(--bg-footer);color:var(--text3)}
.pagination .page-btn.disabled:hover{background:var(--bg-footer);color:var(--text3);border-color:var(--border)}
.pagination .page-numbers{display:flex;align-items:center;gap:6px}
.pagination .page-num{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:var(--radius-sm);font-size:.9rem;background:var(--bg-card);color:var(--text);border:1px solid var(--border);transition:all var(--transition-fast);cursor:pointer;text-decoration:none}
.pagination .page-num:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination .page-num.current{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600}
.pagination .page-ellipsis{color:var(--text3);padding:0 4px}

/* Sidebar */
.glass-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}
.sidebar-widget{margin-bottom:18px}
.sidebar-widget.popular-posts-widget{margin-top:20px}
.widget-header{padding:13px 18px;border-bottom:1px solid rgba(0,0,0,.04)}
.dark-mode .widget-header{border-bottom-color:rgba(255,255,255,.04)}
.widget-header h4{font-size:var(--fs-sm);font-weight:600;color:var(--text2)}
.widget-link{display:flex;align-items:center;gap:8px;padding:11px 18px;font-size:.8rem;color:var(--text2);transition:all var(--transition-fast);border-bottom:1px solid rgba(0,0,0,.025)}
.widget-link:last-child{border-bottom:none}
.widget-link:hover{background:var(--primary);color:#fff}
.widget-link i{font-size:var(--fs-xs);flex-shrink:0}
.author-widget{padding:22px 0;text-align:center}
.author-widget .avatar{width:82px;height:82px;border-radius:50%;object-fit:cover;margin:0 auto 10px}
.author-widget .name{font-size:1.15rem;font-weight:600;margin-bottom:6px}
.author-widget .bio{font-size:var(--fs-xs);color:var(--text2);line-height:1.55;padding:0 18px}
.author-stats{display:flex;justify-content:space-around;margin-top:10px}
.author-stats a{display:flex;flex-direction:column;align-items:center;text-decoration:none;min-width:55px}
.author-stats .num{font-size:1.25rem;font-weight:600;color:var(--text2)}
.author-stats .label{font-size:.7rem;color:var(--text3);margin-top:3px}

/* Footer */
.site-footer{background:var(--bg-footer);border-top:2px solid var(--border);padding:40px 24px;margin-top:50px;position:relative;z-index:2}
body.is-home .site-footer,body.is-demo .site-footer{background:var(--bg-footer)}
.footer-inner{width:100%;max-width:var(--max-content-width);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 var(--content-padding)}

/* 左侧：技术信息 */
.footer-left{text-align:left;font-size:var(--fs-xs);color:var(--text3)}
.footer-left a{color:var(--text2)}
.footer-left a:hover{color:var(--primary)}
.footer-tech{margin-bottom:6px}
.footer-sponsor{margin-top:6px}
.footer-sponsor .cdn-logo{display:inline-flex;align-items:center}
.footer-sponsor .cdn-logo img{height:18px;width:auto;vertical-align:middle}

/* 中间：版权信息 */
.footer-center{text-align:center}
.footer-center .copyright{font-size:.9rem;color:var(--text3);margin-bottom:8px}
.footer-center .copyright a{color:var(--text2)}
.footer-center .copyright a:hover{color:var(--primary)}
.footer-icp{font-size:.72rem;margin:8px 0}
.footer-icp a{color:var(--text3);margin:0 6px}
.footer-icp a:hover{color:var(--primary)}
.footer-social{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--text3);font-size:1rem;transition:all var(--transition-fast)}
.footer-social a:hover{color:var(--primary);background:rgba(var(--primary-rgb),.08)}

/* 右侧：统计数据 */
.footer-right{text-align:right;font-size:var(--fs-xs);color:var(--text3)}
.footer-stats-row{margin-bottom:6px}
.footer-stat{margin-left:12px}
.footer-stat:first-child{margin-left:0}
.footer-visitor-row{margin-bottom:6px}
.footer-visitor-row strong{color:var(--text2);font-weight:600}
.footer-visitor-row .visitor-divider{margin:0 8px;color:var(--border)}
.footer-runtime{color:var(--text2)}
.footer-runtime span{font-weight:600;color:var(--primary);margin:0 2px}

/* 移动端适配 */
@media(max-width:767px){
.footer-inner{grid-template-columns:1fr;text-align:center;gap:16px}
.footer-left,.footer-right{text-align:center}
.footer-stat{margin:0 6px}
}

/* Side Tools */
.side-tools-container{position:fixed;right:18px;bottom:36px;display:flex;flex-direction:column;gap:6px;z-index:100005;opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.side-tools-container.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* Search Modal */
.search-modal{position:fixed;inset:0;z-index:100009;display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.search-modal.active{opacity:1;visibility:visible}
.search-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.search-container{position:relative;width:90%;max-width:600px;background:var(--bg-solid);border-radius:var(--radius-md);box-shadow:var(--shadow-hover);overflow:hidden;transform:translateY(-20px);transition:transform .3s ease}
.search-modal.active .search-container{transform:translateY(0)}
.search-box{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.search-box .search-icon{color:var(--text3);font-size:1.1rem}
.search-box input{flex:1;border:none;background:none;font-size:1rem;color:var(--text);outline:none}
.search-box input::placeholder{color:var(--text3)}
.search-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:transparent;color:var(--text3);cursor:pointer;transition:all .2s ease}
.search-close:hover{background:var(--border);color:var(--text)}
.search-results{max-height:400px;overflow-y:auto;padding:8px 0}
.search-result-item{display:flex;flex-direction:column;gap:4px;padding:12px 20px;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-light)}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--bg-footer)}
.search-result-title{font-size:.95rem;font-weight:600;color:var(--text)}
.search-result-excerpt{font-size:.85rem;color:var(--text3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-result-meta{font-size:.75rem;color:var(--text3)}
.search-no-results{padding:60px 20px;text-align:center;color:var(--text3)}
.search-no-results i{font-size:3rem;margin-bottom:16px;opacity:.5}
.search-no-results p{font-size:1rem}
.search-loading{padding:60px 20px;text-align:center;color:var(--text3)}
.search-loading i{margin-right:8px}
.search-hint{padding:40px 20px;text-align:center;color:var(--text3);font-size:.9rem}
.search-results-count{padding:12px 20px;font-size:.85rem;color:var(--text3);border-bottom:1px solid var(--border-light);background:var(--bg-footer)}
.search-results-list{padding:8px 0}
.search-result-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.search-result-type{font-size:.7rem;padding:2px 8px;border-radius:4px;background:rgba(var(--primary-rgb),.1);color:var(--primary);font-weight:500}
.search-result-date{font-size:.75rem;color:var(--text3)}
.search-result-item{display:block;padding:16px 20px;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-light)}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--bg-footer)}
.search-result-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:8px;line-height:1.4}
.search-result-title mark{background:rgba(var(--primary-rgb),.2);color:var(--text);padding:0 2px;border-radius:2px}
.search-result-excerpt{font-size:.85rem;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-result-excerpt mark{background:rgba(var(--primary-rgb),.2);color:var(--text);padding:0 2px;border-radius:2px}
.right-bottom-tools{width:42px;height:42px;background:var(--bg-solid);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;box-shadow:var(--shadow-card);transition:all var(--transition-fast);border:none;font-size:1.15rem}
.right-bottom-tools:hover{background:var(--primary);color:#fff;box-shadow:var(--shadow-hover)}
.right-bottom-tools.scroll-percent{font-size:.72rem;font-weight:600;cursor:default;color:var(--text3);line-height:42px;text-align:center;padding:0}

/* Single Post */
.post-container{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:30px var(--content-padding) 40px;display:flex;gap:32px;transition:all .3s ease}
.post-container.no-toc{max-width:var(--max-content-width);margin:0 auto;padding:20px var(--content-padding) 40px}
.post-container.no-toc .post-main{max-width:100%}
@media(max-width:1023px){.post-container{flex-direction:column;gap:24px}}
.post-main{flex:1;min-width:0}
.post-toc-area{width:var(--sidebar-w);flex-shrink:0}
@media(max-width:1023px){.post-toc-area{width:100%;order:2}}

/* TOC Toggle Button */
.toc-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.toc-header h4{font-size:.9rem;font-weight:600;color:var(--text2);margin:0}
.toc-toggle-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text3);cursor:pointer;transition:all .2s ease}
.toc-toggle-btn:hover{background:var(--border);color:var(--text)}
.toc-toggle-btn i{transition:transform .3s ease}
.post-toc-area.collapsed .toc-toggle-btn i{transform:rotate(180deg)}
.toc-content{padding:12px}
.post-toc-area.collapsed .toc-content{display:none}
.post-cover{position:relative;width:100%;height:260px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
@media(min-width:640px){.post-cover{height:300px}}
@media(min-width:768px){.post-cover{height:340px}}
.post-cover img{width:100%;height:100%;object-fit:cover}
.dark-mode .post-cover img{filter:brightness(.78)}
.post-cover-title{position:absolute;bottom:0;left:0;right:0;padding:22px}
.post-cover-title h1{font-size:1.4rem;font-weight:700;color:var(--text);background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:12px 16px;border-radius:var(--radius-md);border:1px solid var(--glass-border);line-height:1.4;max-width:92%;box-shadow:var(--shadow-card);display:inline-block}
@media(min-width:640px){.post-cover-title h1{font-size:1.65rem}}
@media(min-width:768px){.post-cover-title h1{font-size:1.9rem}}
.post-author-bar{display:flex;gap:12px;align-items:center;padding:22px;border-bottom:1px solid var(--border)}
.post-author-bar .avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--border-light)}
.post-author-bar .info{display:flex;flex-direction:column;gap:3px}
.post-author-bar .name-row{display:flex;align-items:center;gap:7px}
.post-author-bar .name-row .name{font-size:1.05rem;font-weight:600}
.post-author-bar .name-row .lv{font-size:.65rem;padding:1px 7px;border-radius:3px;color:var(--text3);border:1px solid var(--border-light);background:rgba(255,255,255,.4)}
.dark-mode .post-author-bar .name-row .lv{background:rgba(50,50,50,.4)}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-xs);color:var(--text3)}
.post-meta span{display:flex;align-items:center;gap:3px}
.post-meta i{font-size:.75rem}
.post-meta a{color:var(--text3)}
.post-meta a:hover{color:var(--primary)}
.post-body{padding:22px;font-size:1rem;line-height:1.8;color:var(--text)}
.post-body p{text-indent:2em;margin-bottom:18px}
.post-body h2{font-size:1.4rem;font-weight:600;margin:30px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.post-body h3{font-size:1.18rem;font-weight:600;margin:22px 0 10px}
.post-body blockquote{border-left:4px solid var(--primary);background:rgba(0,0,0,.02);padding:14px 18px;margin:18px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text2)}
.dark-mode .post-body blockquote{background:rgba(255,255,255,.03)}
.post-body blockquote p{text-indent:0;margin:0}
.post-body ul,.post-body ol{margin:14px 0;padding-left:22px;list-style:revert}
.post-body li{margin:6px 0}
.post-body code{background:rgba(0,0,0,.04);padding:1px 5px;border-radius:3px;font-family:'Geist Mono',Consolas,monospace;font-size:.88rem;border:1px solid rgba(0,0,0,.06)}
.dark-mode .post-body code{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.post-body strong{font-weight:600}
.post-copyright{margin:28px 22px;padding:18px;background:rgba(0,0,0,.02);border-radius:var(--radius-sm);border:1px solid var(--border)}
.dark-mode .post-copyright{background:rgba(255,255,255,.02)}
.post-copyright li{font-size:var(--fs-sm);color:var(--text2);margin:5px 0;line-height:1.5}
.post-copyright li strong{color:var(--text)}
.post-tags{display:flex;flex-wrap:wrap;gap:7px;padding:14px 22px}
.post-tags a{padding:3px 12px;background:rgba(0,0,0,.03);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--text2);transition:all var(--transition-fast)}
.dark-mode .post-tags a{background:rgba(255,255,255,.04)}
.post-tags a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.post-nav{display:flex;gap:14px;padding:14px 22px 22px}
.post-nav-item{flex:1;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);transition:all var(--transition-fast);cursor:pointer;display:block}
.post-nav-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}
.post-nav-item .label{font-size:.7rem;color:var(--text3);margin-bottom:3px}
.post-nav-item .title{font-size:.88rem;color:var(--text);font-weight:500}
.post-nav-item:hover .title{color:var(--primary)}
.post-nav-next{text-align:right}

/* Comments (Twikoo) */
.post-comments{padding:22px;border-top:1px solid var(--border)}
.comments-header{margin-bottom:18px}
.comments-header h3{font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--text)}
.comments-header h3 i{color:var(--primary);font-size:1rem}
.comments-header h3{justify-content:flex-start}
.comment-count-badge{margin-left:8px;padding:2px 10px;background:var(--primary);color:#fff;font-size:.75rem;font-weight:600;border-radius:12px;min-width:20px;text-align:center;line-height:1.4}
#tcomment{min-height:100px}

/* Comments Page */
.comments-page-container{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:40px 20px;box-sizing:border-box}
@media(max-width:768px){.comments-page-container{padding:20px 15px}}

/* Bookmarks / Links Page */
.bookmarks-page{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:40px 20px;box-sizing:border-box}
.bookmarks-header{text-align:center;margin-bottom:40px;padding:30px 20px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.08),rgba(var(--primary-rgb),.03));border-radius:var(--radius-lg);border:1px solid rgba(var(--primary-rgb),.15)}
.bookmarks-header h1{font-size:1.8rem;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:12px}
.bookmarks-header h1 i{color:var(--primary)}
.bookmarks-desc{font-size:1rem;color:var(--text2);margin:0}
.bookmarks-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px;padding:16px;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.bookmark-nav-item{padding:8px 16px;border-radius:20px;font-size:.9rem;color:var(--text2);text-decoration:none;transition:all .3s ease;border:1px solid var(--border-light)}
.bookmark-nav-item:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.bookmark-category{font-size:1.3rem;font-weight:600;color:var(--text);margin:40px 0 20px;padding-bottom:12px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px}
.bookmark-category i{color:var(--primary);font-size:1.1rem}
.bookmarks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px}
.bookmark-card{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);transition:all .3s ease;text-decoration:none}
.bookmark-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--primary)}
.bookmark-thumb{width:60px;height:60px;border-radius:var(--radius);overflow:hidden;flex-shrink:0;background:var(--bg-footer)}
.bookmark-thumb img{width:100%;height:100%;object-fit:cover}
.bookmark-content{flex:1;min-width:0}
.bookmark-content h3{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bookmark-content p{font-size:.8rem;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
@media(max-width:768px){.bookmarks-page{padding:20px 15px}.bookmarks-header h1{font-size:1.5rem}.bookmarks-nav{gap:8px;padding:12px}.bookmark-nav-item{padding:6px 12px;font-size:.85rem}.bookmark-category{font-size:1.1rem}.bookmarks-grid{grid-template-columns:1fr}}
.comments-hero{text-align:center;margin-bottom:40px;padding:40px 20px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.08),rgba(var(--primary-rgb),.03));border-radius:var(--radius-lg);border:1px solid rgba(var(--primary-rgb),.15)}
.comments-hero-icon{font-size:3.5rem;color:var(--primary);margin-bottom:16px;opacity:.9}
.comments-hero-title{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:12px}
.comments-hero-desc{font-size:1.05rem;color:var(--text2);max-width:500px;margin:0 auto;line-height:1.6}
.comments-content-wrapper{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.comments-intro{padding:30px;border-bottom:1px solid var(--border)}
.comments-intro h2{font-size:1.3rem;font-weight:600;margin-bottom:16px;color:var(--text);display:flex;align-items:center;gap:8px}
.comments-intro h2:before{content:"💬"}
.comments-intro ul{list-style:none;padding:0}
.comments-intro li{padding:8px 0;padding-left:28px;position:relative;color:var(--text2);font-size:.95rem}
.comments-intro li:before{position:absolute;left:0;top:8px;font-size:1.1rem}
.comments-intro li:nth-child(1):before{content:"💬"}
.comments-intro li:nth-child(2):before{content:"❓"}
.comments-intro li:nth-child(3):before{content:"🤝"}
.comments-intro li:nth-child(4):before{content:"📝"}
.comments-content-wrapper .post-comments{border-top:none;padding:30px}
.page-body{padding:0}
.toc-sticky{position:sticky;top:calc(var(--nav-h) + 18px);height:fit-content}
.toc-widget{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:18px;max-height:calc(100vh - 110px);overflow-y:auto}
.toc-widget h4{font-size:.95rem;font-weight:600;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.toc-widget ol{list-style:none}
.toc-widget li{margin:5px 0}
.toc-widget li a{font-size:var(--fs-xs);color:var(--text2);display:block;padding:3px 0 3px 8px;border-left:2px solid transparent;transition:all var(--transition-fast)}
.toc-widget li a:hover{color:var(--primary);border-left-color:var(--primary)}
.toc-widget li ol{padding-left:12px}

/* Archive / Taxonomy */
.archive-page{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:20px var(--content-padding) 40px;min-height:60vh}
.archive-page-title{font-size:1.8rem;font-weight:700;margin-bottom:30px;display:flex;align-items:center;gap:10px}
.archive-page-title i{color:var(--primary)}

/* Card Layout - Posts/Notes Grid */
.archive-page.card-layout{max-width:1200px}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:24px}
@media(max-width:768px){.posts-grid{grid-template-columns:1fr;gap:20px}}

.post-card{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light);overflow:hidden;transition:all .3s ease;box-shadow:var(--shadow-card)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--primary)}
.post-card-link{display:block;padding:20px;color:var(--text);text-decoration:none}
.post-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.post-card-category span{display:inline-block;padding:4px 12px;background:rgba(var(--primary-rgb),.1);border-radius:20px;font-size:.75rem;font-weight:500;color:var(--primary)}
.post-card-category.default span{background:var(--border);color:var(--text3)}
.post-card-date{font-size:.8rem;color:var(--text3);flex-shrink:0}
.post-card-title{font-size:1.15rem;font-weight:600;color:var(--text);margin-bottom:12px;line-height:1.4;transition:color .2s}
.post-card:hover .post-card-title{color:var(--primary)}
.post-card-summary{font-size:.9rem;color:var(--text2);line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.post-card-read{font-size:.85rem;font-weight:500;color:var(--primary);display:flex;align-items:center;gap:6px;transition:gap .2s}
.post-card:hover .post-card-read{gap:10px}
.post-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.post-card-tags .tag{font-size:.75rem;color:var(--text3);background:var(--bg-footer);padding:2px 8px;border-radius:4px}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3);font-size:1rem}
.category-tabs{display:flex;gap:7px;margin-bottom:28px;flex-wrap:wrap}
.category-tab{padding:5px 14px;border-radius:18px;font-size:var(--fs-sm);cursor:pointer;border:1px solid var(--border);color:var(--text2);transition:all var(--transition-fast);display:inline-block}
.category-tab:hover,.category-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.archive-year-section{margin-bottom:28px}
.archive-year-header{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.archive-year-header .year{font-size:1.6rem;font-weight:700}
.archive-year-header .count{font-size:.7rem;font-weight:600;padding:1px 8px;border-radius:3px;background:rgba(0,0,0,.03);border:1px solid var(--border);color:var(--text3)}
.archive-timeline{padding-left:18px;border-left:2px solid var(--border)}
.archive-entry{position:relative;padding:14px 0 14px 22px}
.archive-entry::before{content:'';position:absolute;left:-7px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--bg)}
.archive-entry .date{font-size:var(--fs-xs);color:var(--text3);margin-bottom:3px}
.archive-entry .title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.archive-entry .title a{font-size:1.05rem;font-weight:500;color:var(--text);transition:color var(--transition-fast)}
.archive-entry .title a:hover{color:var(--primary)}
.archive-type-badge{font-size:.7rem;padding:2px 8px;border-radius:4px;background:var(--bg-footer);color:var(--text3);white-space:nowrap}
.archive-type-badge.type-posts{background:rgba(var(--primary-rgb),.1);color:var(--primary)}
.archive-type-badge.type-notes{background:rgba(6,182,212,.15);color:#0891b2}
.archive-type-badge.type-docs{background:rgba(245,158,11,.15);color:#d97706}
.archive-type-badge.type-good-things{background:rgba(236,72,153,.15);color:#db2777}
.archive-type-badge.type-investing{background:rgba(16,185,129,.15);color:#059669}

/* Archives Page V2 */
.archive-stats{text-align:center;color:var(--text2);margin-bottom:20px;font-size:.95rem}
.archive-stats strong{color:var(--primary);font-size:1.2rem}
.archive-year-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.year-tab{padding:6px 16px;border-radius:20px;border:1px solid var(--border-light);background:var(--bg-card);color:var(--text2);font-size:.85rem;cursor:pointer;transition:all .3s ease}
.year-tab:hover{border-color:var(--primary);color:var(--primary)}
.year-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.archive-list-container{margin-bottom:30px}
.archive-two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.archive-entry-v2{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);transition:all .3s ease}
.archive-entry-v2:hover{border-color:var(--primary);box-shadow:var(--shadow-hover)}
.archive-entry-date{font-size:.8rem;color:var(--text3);font-family:monospace;min-width:45px}
.archive-entry-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.archive-entry-title{font-size:.9rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.archive-entry-title:hover{color:var(--primary)}
.archive-empty{text-align:center;padding:40px;color:var(--text3);grid-column:1/-1}
.archive-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px}
.archive-pagination .page-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;border:1px solid var(--border-light);background:var(--bg-card);color:var(--text2);font-size:.85rem;cursor:pointer;transition:all .3s ease}
.archive-pagination .page-btn:hover{border-color:var(--primary);color:var(--primary)}
.archive-pagination .page-numbers{display:flex;gap:6px}
.archive-pagination .page-num{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--border-light);background:var(--bg-card);color:var(--text2);font-size:.85rem;cursor:pointer;transition:all .3s ease}
.archive-pagination .page-num:hover{border-color:var(--primary);color:var(--primary)}
.archive-pagination .page-num.current{background:var(--primary);color:#fff;border-color:var(--primary)}
.archive-pagination .page-ellipsis{padding:0 8px;color:var(--text3)}
@media(max-width:768px){.archive-two-col{grid-template-columns:1fr}.archive-year-tabs{gap:6px}.year-tab{padding:5px 12px;font-size:.8rem}}

/* About Page */
.about-page-container{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:40px 20px;box-sizing:border-box}
.about-hero{text-align:center;margin-bottom:40px;padding:40px 20px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.08),rgba(var(--primary-rgb),.03));border-radius:var(--radius-lg);border:1px solid rgba(var(--primary-rgb),.15)}
.about-avatar{width:120px;height:120px;margin:0 auto 20px;border-radius:50%;overflow:hidden;border:4px solid var(--bg-card);box-shadow:var(--shadow-card)}
.about-avatar img{width:100%;height:100%;object-fit:cover}
.about-name{font-size:1.8rem;font-weight:700;color:var(--text);margin-bottom:12px}
.about-bio{font-size:1rem;color:var(--text2);max-width:400px;margin:0 auto;line-height:1.6}
.about-content-wrapper{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.about-content{padding:40px}
.about-content h2{font-size:1.3rem;font-weight:600;margin:30px 0 16px;color:var(--text);display:flex;align-items:center;gap:10px}
.about-content h2:first-child{margin-top:0}
.about-content h2 i{color:var(--primary)}
.about-content p{margin-bottom:16px;line-height:1.8;color:var(--text2)}
.about-content ul{list-style:none;padding:0;margin-bottom:16px}
.about-content li{padding:8px 0 8px 28px;position:relative;color:var(--text2)}
.about-content li:before{position:absolute;left:0;top:8px;font-size:1.1rem}
.about-content blockquote{margin:20px 0;padding:16px 20px;border-left:4px solid var(--primary);background:rgba(var(--primary-rgb),.05);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--text2)}
.about-content-wrapper .post-comments{border-top:1px solid var(--border);padding:30px 40px}
@media(max-width:768px){.about-page-container{padding:20px 15px}.about-hero{padding:30px 15px}.about-avatar{width:100px;height:100px}.about-name{font-size:1.5rem}.about-content{padding:24px}.about-content-wrapper .post-comments{padding:24px}}

/* Archive Row - 单行显示日期、标题、分类 */
.archive-row{display:flex;align-items:center;gap:16px}
.archive-row .date{flex-shrink:0;width:50px;font-size:var(--fs-sm);color:var(--text3);font-family:'Geist Mono',monospace;opacity:.8}
.archive-row .title{flex:1;min-width:0}
.archive-row .title a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archive-row .category{flex-shrink:0}
.archive-row .category a{display:inline-block;padding:2px 10px;background:rgba(var(--primary-rgb),.08);border-radius:4px;font-size:var(--fs-xs);color:var(--primary);transition:all var(--transition-fast)}
.archive-row .category a:hover{background:var(--primary);color:#fff}

/* ========== 优化的列表样式 - 时间、标题、分类并排 ========== */
.archive-list{display:flex;flex-direction:column;gap:8px}
.archive-item{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light);transition:all .25s ease}
.archive-item:hover{background:var(--bg-solid);border-color:var(--primary);transform:translateX(4px);box-shadow:var(--shadow-card)}

/* 日期样式 */
.archive-item-date{flex-shrink:0;width:60px;font-size:.85rem;color:var(--text3);font-family:'Geist Mono',monospace;font-weight:500}

/* 标题样式 - 自适应宽度 */
.archive-item-title{flex:1;min-width:0;font-size:1rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.archive-item:hover .archive-item-title{color:var(--primary)}

/* 分类样式 */
.archive-item-category{flex-shrink:0;max-width:120px}
.archive-item-category a{display:inline-block;padding:4px 12px;background:rgba(var(--primary-rgb),.1);border-radius:20px;font-size:.75rem;font-weight:500;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:all .2s}
.archive-item-category a:hover{background:var(--primary);color:#fff}

/* 无分类时的占位 */
.archive-item-category:empty{display:none}

/* ========== 分类页面样式 ========== */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:40px}
@media(max-width:640px){.categories-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:480px){.categories-grid{grid-template-columns:1fr}}

.category-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:var(--text);transition:all var(--transition-base);box-shadow:var(--shadow-card)}
.category-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.category-card .category-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-rgb),.1);border-radius:50%;transition:all .2s ease}
.category-card .category-icon i{font-size:1.4rem;color:var(--primary);transition:all .2s ease}
.category-card:hover .category-icon{background:var(--primary)}
.category-card:hover .category-icon i{color:#fff}
.category-card .category-name{font-size:1.1rem;font-weight:600;color:var(--text);margin:0;transition:color .2s}
.category-card:hover .category-name{color:var(--primary)}
.category-card .category-count{font-size:.85rem;color:var(--text3);transition:color .2s}
.category-card:hover .category-count{color:var(--text2)}
.category-card:hover .fa-chevron-right{color:var(--primary);transform:translateX(4px)}

/* 紧凑分类卡片（笔记页面） */
.categories-grid--compact{display:flex;flex-wrap:wrap;gap:10px}
.category-card--compact{flex-direction:row;align-items:center;gap:8px;padding:10px 16px;border-radius:20px;box-shadow:none}
.category-card--compact .category-name{font-size:.9rem;font-weight:500;margin:0}
.category-card--compact .category-count{font-size:.75rem;background:rgba(var(--primary-rgb),.1);color:var(--primary);padding:2px 8px;border-radius:10px;min-width:20px;text-align:center}
.category-card--compact i{font-size:.85rem;color:var(--primary)}
.category-card--compact:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 2px 8px rgba(var(--primary-rgb),.12)}
.category-card--compact:hover .category-count{background:var(--primary);color:#fff}

/* 分类分组样式 */
.category-section{margin-bottom:40px}
.category-section-title{font-size:1.2rem;font-weight:600;color:var(--text);margin:0 0 16px 0;padding-bottom:12px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px}
.category-section-title i{color:var(--primary);font-size:1.1rem}
.category-section-count{font-size:.85rem;font-weight:400;color:var(--text3);margin-left:auto}
.category-card--notes .category-icon{background:rgba(34,197,94,.1)}
.category-card--notes .category-icon i{color:#22c55e}
.category-card--notes:hover .category-icon{background:#22c55e}
.category-card--notes:hover .category-name{color:#22c55e}
.category-card--goodthings .category-icon{background:rgba(245,158,11,.1)}
.category-card--goodthings .category-icon i{color:#f59e0b}
.category-card--goodthings:hover .category-icon{background:#f59e0b}
.category-card--goodthings:hover .category-name{color:#f59e0b}
.category-card--other .category-icon{background:rgba(148,163,184,.1)}
.category-card--other .category-icon i{color:#94a3b8}
.category-card--other:hover .category-icon{background:#94a3b8}
.category-card--other:hover .category-name{color:#94a3b8}
.archive-section-group{margin-bottom:32px}
.archive-section-label{font-size:1.05rem;font-weight:600;color:var(--text2);margin:0 0 16px 0;padding:8px 16px;background:rgba(var(--primary-rgb),.06);border-radius:var(--radius);display:inline-flex;align-items:center;gap:8px}
.archive-section-label i{color:var(--primary);font-size:.95rem}

/* 标签云样式 */
.category-tab:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.category-tab:hover i{color:#fff}

/* 分类页面返回按钮 */
.archive-back:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 空状态 */
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}

/* 响应式 - 移动端调整 */
@media(max-width:640px){
  .archive-item{gap:12px;padding:10px 12px}
  .archive-item-date{width:50px;font-size:.8rem}
  .archive-item-title{font-size:.95rem}
  .archive-item-category{max-width:80px}
  .archive-item-category a{padding:3px 8px;font-size:.7rem}
}

/* Empty state */
.empty-state{color:var(--text3);text-align:center;padding:40px 0}

/* Responsive - Mobile First */
@media(max-width:767px){
  :root{--content-padding:16px}
  .navbar-list{display:none}
  .navbar-bar{display:block}
  .home-banner{min-height:100svh;padding-top:calc(var(--nav-h) + 20px);padding-bottom:100px}
  .banner-content{padding:0 var(--content-padding)}
  .banner-title{font-size:clamp(1.25rem,8vw,1.75rem);line-height:1.15}
  .banner-subtitle{font-size:clamp(1.1rem,5vw,1.5rem);margin-top:12px}
  .banner-bottom{bottom:20px;flex-direction:column;gap:12px}
  .scroll-down-btn{width:44px;height:44px}
  .social-links{padding:8px 16px;gap:8px}
  .social-links .social-link{font-size:1rem}
  .main-content{padding:40px var(--content-padding) 30px}
  body.is-home .main-content,body.is-demo .main-content{padding-top:70px}
  .article-list{grid-template-columns:1fr;gap:16px}
  .article-card{border-radius:12px}
  .card-cover{height:180px}
  .card-body{padding:16px 20px 20px;gap:14px}
  .card-title{font-size:1.1rem}
  .card-excerpt{font-size:0.85rem}
  .card-meta{gap:10px;font-size:0.75rem}
  .sidebar-area{width:100%}
  .author-widget .avatar{width:70px;height:70px}
  .footer-inner{padding:0 var(--content-padding)}
  .footer-runtime{font-size:0.75rem}
  .post-container{padding:20px var(--content-padding) 30px}
  .post-cover{height:200px;border-radius:12px 12px 0 0}
  .post-cover-title{padding:16px}
  .post-cover-title h1{font-size:1.1rem;padding:10px 14px}
  .post-author-bar{padding:16px;gap:10px}
  .post-author-bar .avatar{width:38px;height:38px}
  .post-author-bar .name{font-size:1rem}
  .post-body{padding:16px;font-size:0.95rem}
  .post-body p{text-indent:1.5em}
  .post-nav{flex-direction:column;gap:12px;padding:12px 16px 16px}
  .side-tools-container{right:12px;bottom:20px;gap:8px}
  .right-bottom-tools{width:40px;height:40px;font-size:1.1rem;border-radius:10px}
  .right-bottom-tools.scroll-percent{font-size:0.7rem;line-height:40px}
}
@media(min-width:768px) and (max-width:1023px){
  .navbar-list{display:none}
  .navbar-bar{display:block}
}
@media(min-width:1024px){
  .navbar-bar{display:none}
  .navbar-drawer,.window-mask{display:none}
}

/* ========================================
   Documentation Styles
   ======================================== */

/* Doc Variables */
:root{
  --doc-sidebar-width:280px;
  --doc-toc-width:240px;
  --doc-content-max:800px;
  --doc-nav-bg:var(--bg-card);
  --doc-nav-border:var(--border);
  --doc-sidebar-bg:var(--bg-solid);
  --doc-active-color:var(--primary);
}

/* Doc Page Layout */
.doc-page{min-height:calc(100vh - var(--nav-h));padding-top:var(--nav-h)}
.doc-container{display:flex;max-width:1400px;margin:0 auto;min-height:calc(100vh - var(--nav-h))}

/* Mobile Doc Header */
.doc-mobile-header{display:none;align-items:center;gap:12px;padding:12px var(--content-padding);background:var(--bg-solid);border-bottom:1px solid var(--border);position:sticky;top:var(--nav-h);z-index:100}
.doc-menu-toggle{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);cursor:pointer;transition:all var(--transition-fast)}
.doc-menu-toggle:hover{border-color:var(--primary);color:var(--primary)}
.doc-mobile-title{font-size:1rem;font-weight:600;color:var(--text);flex:1;text-align:center}

/* Left Sidebar */
.doc-sidebar{width:var(--doc-sidebar-width);flex-shrink:0;background:var(--doc-sidebar-bg);border-right:1px solid var(--border);position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;z-index:99}
.doc-sidebar-header{padding:20px}
.doc-section-title{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;color:var(--text);transition:color var(--transition-fast);text-decoration:none}
.doc-section-title i{color:var(--primary);font-size:1rem}
.doc-section-title:hover{color:var(--primary)}

.doc-nav{padding:12px 0;border-top:1px solid var(--border-light,var(--border))}

/* Tree-style Navigation */
.doc-nav-folder{margin:2px 0}
.doc-nav-folder.level-0{margin-left:12px}
.doc-nav-folder.level-1{margin-left:24px}
.doc-nav-folder.level-2{margin-left:36px}

.doc-nav-folder-header{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:.9rem;color:var(--text2);cursor:pointer;border-radius:6px;transition:all var(--transition-fast);user-select:none}
.doc-nav-folder-header:hover{color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.doc-nav-folder.open>.doc-nav-folder-header{color:var(--primary);font-weight:500}

.doc-nav-toggle{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s ease}
.doc-nav-toggle i{font-size:.7rem;color:var(--text3)}
.doc-nav-toggle .rotate-90{transform:rotate(90deg)}

.doc-nav-folder-icon{width:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-nav-folder-icon i{font-size:.9rem;color:var(--primary)}

.doc-nav-folder-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit}
a.doc-nav-folder-title:hover{color:var(--primary)}
a.doc-nav-folder-title.active{color:var(--primary);font-weight:600}

.doc-nav-folder-content{display:none;padding:2px 0}
.doc-nav-folder.open>.doc-nav-folder-content{display:block}

/* Nav Items (Leaf nodes) */
.doc-nav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.9rem;color:var(--text2);transition:all var(--transition-fast);border-radius:6px;margin:2px 0}
.doc-nav-item:hover{color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.doc-nav-item.active{color:var(--primary);background:rgba(var(--primary-rgb),.1);font-weight:500}

.doc-nav-item.level-0{margin-left:12px}
.doc-nav-item.level-1{margin-left:36px}
.doc-nav-item.level-2{margin-left:60px}

.doc-nav-icon{width:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text3)}
.doc-nav-item.active .doc-nav-icon{color:var(--primary)}
.doc-nav-icon i{font-size:.85rem}

.doc-nav-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.doc-sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);margin-top:auto}
.doc-back-link{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text3);transition:color var(--transition-fast)}
.doc-back-link:hover{color:var(--primary)}

/* Inline Breadcrumb */
.doc-breadcrumb-inline{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text3);flex-wrap:wrap}
.doc-breadcrumb-inline a{color:var(--text2);transition:color var(--transition-fast)}
.doc-breadcrumb-inline a:hover{color:var(--primary)}
.doc-breadcrumb-inline .separator{color:var(--border)}
.doc-breadcrumb-inline .current{color:var(--text);font-weight:500}

/* Mobile Sidebar Mask */
.doc-sidebar-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:98;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.doc-sidebar-mask.show{opacity:1;visibility:visible}

/* Center Content */
.doc-content{flex:1;min-width:0;padding:40px;max-width:var(--doc-content-max);margin:0 auto}
.doc-content-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.doc-title{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:12px;line-height:1.3}
.doc-description{font-size:1.1rem;color:var(--text2);line-height:1.6}

/* Mobile TOC Toggle */
.doc-mobile-toc-toggle{display:none;margin-bottom:20px}
.doc-mobile-toc-toggle button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);cursor:pointer;width:100%;justify-content:center;transition:all var(--transition-fast)}
.doc-mobile-toc-toggle button:hover{border-color:var(--primary);color:var(--primary)}
.doc-mobile-toc{display:none;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:20px}
.doc-mobile-toc.open{display:block}
.doc-mobile-toc ul,.doc-mobile-toc ol{list-style:none;padding-left:0}
.doc-mobile-toc li{margin:8px 0}
.doc-mobile-toc a{display:block;padding:6px 0;color:var(--text2);font-size:.9rem;transition:color var(--transition-fast)}
.doc-mobile-toc a:hover{color:var(--primary)}
.doc-mobile-toc ul ul,.doc-mobile-toc ol ol{padding-left:16px}

/* Doc Content Body */
.doc-content-body{font-size:1rem;line-height:1.8;color:var(--text)}
.doc-content-body h2{font-size:1.5rem;font-weight:600;margin:40px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border);color:var(--text)}
.doc-content-body h3{font-size:1.25rem;font-weight:600;margin:28px 0 12px;color:var(--text)}
.doc-content-body h4{font-size:1.1rem;font-weight:600;margin:20px 0 10px;color:var(--text)}
.doc-content-body p{margin-bottom:16px}
.doc-content-body ul,.doc-content-body ol{margin:16px 0;padding-left:24px}
.doc-content-body li{margin:8px 0}
.doc-content-body ul{list-style:disc}
.doc-content-body ol{list-style:decimal}
.doc-content-body code{background:rgba(0,0,0,.05);padding:2px 6px;border-radius:4px;font-family:'Geist Mono',Consolas,monospace;font-size:.9rem;color:var(--primary)}
.dark-mode .doc-content-body code{background:rgba(255,255,255,.08)}
.doc-content-body pre{background:#1e1e1e;border-radius:var(--radius-md);padding:16px;overflow-x:auto;margin:20px 0}
.doc-content-body pre code{background:none;padding:0;color:#d4d4d4;font-size:.85rem}
.doc-content-body blockquote{border-left:4px solid var(--primary);background:rgba(var(--primary-rgb),.03);padding:16px 20px;margin:20px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.doc-content-body blockquote p{margin:0}
.doc-content-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.9rem}
.doc-content-body th,.doc-content-body td{padding:12px 16px;border:1px solid var(--border);text-align:left}
.doc-content-body th{background:var(--bg-footer);font-weight:600}
.doc-content-body tr:nth-child(even){background:rgba(0,0,0,.02)}
.doc-content-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.doc-content-body a:hover{opacity:.8}

/* Doc Page Navigation */
.doc-page-nav{display:flex;gap:16px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.doc-page-nav-prev,.doc-page-nav-next{flex:1;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.doc-page-nav-prev:hover,.doc-page-nav-next:hover{border-color:var(--primary);box-shadow:var(--shadow-hover)}
.doc-page-nav-prev{ text-align:left}
.doc-page-nav-next{text-align:right}
.doc-page-nav-label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text3);margin-bottom:8px}
.doc-page-nav-prev .doc-page-nav-label{justify-content:flex-start}
.doc-page-nav-next .doc-page-nav-label{justify-content:flex-end}
.doc-page-nav-title{font-size:1rem;font-weight:600;color:var(--text)}
.doc-page-nav-prev:hover .doc-page-nav-title,.doc-page-nav-next:hover .doc-page-nav-title{color:var(--primary)}
.doc-page-nav-placeholder{flex:1}

/* Doc Comments */
.doc-comments{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}

/* Right TOC Sidebar */
.doc-toc-sidebar{width:var(--doc-toc-width);flex-shrink:0;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;padding:24px 16px}
.doc-toc-wrapper{position:sticky;top:24px}
.doc-toc-title{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.doc-toc-title i{color:var(--primary);font-size:.85rem}
.doc-toc-nav{font-size:.85rem}
.doc-toc-nav ul,.doc-toc-nav ol{list-style:none;padding-left:0}
.doc-toc-nav li{margin:6px 0}
.doc-toc-nav a{display:block;padding:6px 10px;color:var(--text2);border-radius:4px;transition:all var(--transition-fast);border-left:2px solid transparent}
.doc-toc-nav a:hover{color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.doc-toc-nav a.active{color:var(--primary);background:rgba(var(--primary-rgb),.08);border-left-color:var(--primary);font-weight:500}
.doc-toc-nav ul ul,.doc-toc-nav ol ol{padding-left:12px}

/* ========================================
   Doc List Page Styles
   ======================================== */
.doc-list-page{min-height:calc(100vh - var(--nav-h));padding-top:var(--nav-h)}
.doc-list-container{max-width:var(--max-content-width);margin:0 auto;padding:40px var(--content-padding)}
.doc-list-header{text-align:center;margin-bottom:40px}
.doc-list-title{font-size:2.5rem;font-weight:700;color:var(--text);margin-bottom:12px}
.doc-list-description{font-size:1.1rem;color:var(--text2)}

.doc-breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:32px;font-size:.9rem;color:var(--text3)}
.doc-breadcrumb a{color:var(--text2);transition:color var(--transition-fast)}
.doc-breadcrumb a:hover{color:var(--primary)}
.doc-breadcrumb .separator{color:var(--border)}
.doc-breadcrumb .current{color:var(--text)}

.doc-list-content{margin-bottom:40px}

/* Doc Categories Grid */
.doc-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:40px}
.doc-category-card{display:flex;align-items:center;gap:16px;padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-base)}
.doc-category-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.doc-category-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-rgb),.1);border-radius:var(--radius-md);flex-shrink:0}
.doc-category-icon i{font-size:1.5rem;color:var(--primary)}
.doc-category-info{flex:1;min-width:0}
.doc-category-title{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:6px}
.doc-category-desc{font-size:.85rem;color:var(--text2);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-category-meta{font-size:.8rem;color:var(--text3)}
.doc-category-meta i{margin-right:4px}
.doc-category-arrow{color:var(--text3);transition:all var(--transition-fast)}
.doc-category-card:hover .doc-category-arrow{color:var(--primary);transform:translateX(4px)}

/* Doc Pages List */
.doc-section-pages,.doc-orphan-pages{margin-bottom:40px}
.doc-section-pages .doc-section-title,.doc-orphan-title{font-size:1.4rem;font-weight:600;color:var(--text);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.doc-pages-list{display:flex;flex-direction:column;gap:12px}
.doc-page-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.doc-page-item:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),.02)}
.doc-page-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--border);border-radius:6px;font-size:.8rem;font-weight:600;color:var(--text3);flex-shrink:0}
.doc-page-item:hover .doc-page-number{background:var(--primary);color:#fff}
.doc-page-title{flex:1;font-size:1rem;font-weight:500;color:var(--text)}
.doc-page-item:hover .doc-page-title{color:var(--primary)}
.doc-page-desc{font-size:.85rem;color:var(--text2);flex-shrink:0}
.doc-page-item>i{color:var(--text3);font-size:.8rem;transition:all var(--transition-fast)}
.doc-page-item:hover>i{color:var(--primary);transform:translateX(4px)}

/* Doc All Sections Grid (Homepage) */
.doc-all-sections{margin-bottom:40px}
.doc-sections-title{font-size:1.5rem;font-weight:600;color:var(--text);margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.doc-sections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.doc-section-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-base)}
.doc-section-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover)}
.doc-section-card-link{display:block;padding:20px;text-decoration:none}
.doc-section-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.doc-section-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-rgb),.1);border-radius:var(--radius-md);flex-shrink:0}
.doc-section-card-icon i{font-size:1.2rem;color:var(--primary)}
.doc-section-card-title{font-size:1.15rem;font-weight:600;color:var(--text);flex:1}
.doc-section-card-desc{font-size:.9rem;color:var(--text2);line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doc-section-card-meta{display:flex;gap:16px;font-size:.85rem;color:var(--text3)}
.doc-section-card-meta i{margin-right:4px;color:var(--primary)}
.doc-section-preview{padding:0 20px 16px;display:flex;flex-wrap:wrap;gap:8px}
.doc-preview-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(var(--primary-rgb),.06);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text2);transition:all var(--transition-fast)}
.doc-preview-item:hover{background:var(--primary);color:#fff}
.doc-preview-item i{font-size:.7rem;color:var(--primary)}
.doc-preview-item:hover i{color:#fff}

/* ========================================
   Blog List Page Styles
   ======================================== */
.blog-list-page{min-height:calc(100vh - var(--nav-h));padding-top:var(--nav-h)}
.blog-list-container{max-width:var(--max-content-width);margin:0 auto;padding:40px var(--content-padding)}
.blog-list-header{text-align:center;margin-bottom:40px}
.blog-list-title{font-size:2.5rem;font-weight:700;color:var(--text);margin-bottom:12px}
.blog-list-description{font-size:1.1rem;color:var(--text2)}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin-bottom:40px}
.blog-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-base)}
.blog-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.blog-card-link{display:block;padding:24px}
.blog-card-header{margin-bottom:16px}
.blog-card-title{font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:12px;line-height:1.4;transition:color var(--transition-fast)}
.blog-card:hover .blog-card-title{color:var(--primary)}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--text3)}
.blog-card-meta i{margin-right:4px}
.blog-card-excerpt{font-size:.95rem;color:var(--text2);line-height:1.7;margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between}
.blog-card-tags{display:flex;gap:8px}
.blog-tag{padding:4px 10px;background:rgba(var(--primary-rgb),.08);border-radius:var(--radius-sm);font-size:.75rem;color:var(--primary);font-weight:500}
.blog-card-readmore{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--primary);font-weight:500}
.blog-card-readmore i{transition:transform var(--transition-fast)}
.blog-card:hover .blog-card-readmore i{transform:translateX(4px)}

.blog-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px}
.pagination-prev,.pagination-next{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.9rem;color:var(--text);transition:all var(--transition-fast)}
.pagination-prev:hover,.pagination-next:hover{border-color:var(--primary);color:var(--primary)}
.pagination-info{font-size:.9rem;color:var(--text3)}

/* ========================================
   Blog Single Page Styles
   ======================================== */
.blog-single-page{display:flex;gap:32px;max-width:1200px;margin:0 auto;padding:40px var(--content-padding);min-height:calc(100vh - var(--nav-h))}

/* Notes Page Styles - No header image version */
.blog-page{max-width:900px;margin:0 auto;padding:40px var(--content-padding);min-height:calc(100vh - var(--nav-h))}
.blog-container{width:100%}
.blog-container .doc-breadcrumb-inline{margin-bottom:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;font-size:.85rem}
.blog-article{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.blog-article-header{padding:40px 40px 24px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.03) 0%,transparent 100%);border-bottom:1px solid var(--border)}
.blog-article-title{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.3}
.blog-article-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.9rem;color:var(--text3)}
.blog-meta-item{display:flex;align-items:center;gap:6px}
.blog-meta-item i{font-size:.85rem;color:var(--primary)}
.blog-meta-separator{color:var(--border)}
.blog-article-content{padding:40px;font-size:1.05rem;line-height:1.9;color:var(--text)}
.blog-article-footer{padding:0 40px 40px}
.blog-article{flex:1;min-width:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.blog-article-header{padding:32px 32px 24px;border-bottom:1px solid var(--border)}
.blog-article-title{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.3}
.blog-article-meta{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:16px;font-size:.9rem;color:var(--text3)}
.blog-meta-item{display:flex;align-items:center;gap:6px}
.blog-meta-item i{font-size:.85rem}
.blog-meta-category{padding:2px 8px;background:rgba(var(--primary-rgb),.1);border-radius:4px;font-size:.75rem;color:var(--primary);font-weight:500}
.blog-article-tags{display:flex;flex-wrap:wrap;gap:8px}

.blog-article-content{padding:32px;font-size:1.05rem;line-height:1.9;color:var(--text)}
.blog-article-content h2{font-size:1.6rem;font-weight:600;margin:40px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.blog-article-content h3{font-size:1.3rem;font-weight:600;margin:28px 0 14px}
.blog-article-content p{margin-bottom:20px}
.blog-article-content ul,.blog-article-content ol{margin:20px 0;padding-left:28px}
.blog-article-content li{margin:10px 0}
.blog-article-content code{background:rgba(0,0,0,.05);padding:2px 8px;border-radius:4px;font-family:'Geist Mono',Consolas,monospace;font-size:.9rem;color:var(--primary)}
.blog-article-content pre{background:#1e1e1e;border-radius:var(--radius-md);padding:20px;overflow-x:auto;margin:24px 0}
.blog-article-content pre code{background:none;padding:0;color:#d4d4d4;font-size:.9rem}
.blog-article-content blockquote{border-left:4px solid var(--primary);background:rgba(var(--primary-rgb),.03);padding:20px 24px;margin:24px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.blog-article-content img{max-width:100%;border-radius:var(--radius-sm);margin:20px 0}
.blog-article-content a,.post-body a,.investing-content a,.detail-content a,.about-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--primary-rgb),.4);transition:text-decoration-color .2s}
.blog-article-content a:hover,.post-body a:hover,.investing-content a:hover,.detail-content a:hover,.about-content a:hover{text-decoration-color:var(--primary)}

.blog-article-footer{padding:0 32px 32px}
.blog-article-nav{display:flex;gap:16px;margin-bottom:32px;padding-top:24px;border-top:1px solid var(--border)}
.blog-nav-prev,.blog-nav-next{flex:1;padding:20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.blog-nav-prev:hover,.blog-nav-next:hover{border-color:var(--primary)}
.blog-nav-prev{text-align:left}
.blog-nav-next{text-align:right}
.blog-nav-label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text3);margin-bottom:8px}
.blog-nav-prev .blog-nav-label{justify-content:flex-start}
.blog-nav-next .blog-nav-label{justify-content:flex-end}
.blog-nav-title{font-size:1rem;font-weight:500;color:var(--text)}
.blog-nav-prev:hover .blog-nav-title,.blog-nav-next:hover .blog-nav-title{color:var(--primary)}
.blog-nav-placeholder{flex:1}

.blog-comments{padding-top:24px}

/* Blog TOC Sidebar */
.blog-toc-sidebar{width:260px;flex-shrink:0}
.blog-toc-wrapper{position:sticky;top:calc(var(--nav-h) + 24px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto}
.blog-toc-title{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.blog-toc-title i{color:var(--primary)}
.blog-toc-nav{font-size:.85rem}
.blog-toc-nav ul,.blog-toc-nav ol{list-style:none;padding-left:0}
.blog-toc-nav li{margin:8px 0}
.blog-toc-nav a{display:block;padding:6px 10px;color:var(--text2);border-radius:4px;transition:all var(--transition-fast);border-left:2px solid transparent}
.blog-toc-nav a:hover{color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.blog-toc-nav a.active{color:var(--primary);background:rgba(var(--primary-rgb),.08);border-left-color:var(--primary);font-weight:500}
.blog-toc-nav ul ul,.blog-toc-nav ol ol{padding-left:12px}

/* ========================================
   Responsive Styles for Doc & Blog
   ======================================== */
@media(max-width:1200px){
  .doc-toc-sidebar{display:none}
  .blog-toc-sidebar{display:none}
}

@media(max-width:1023px){
  .doc-sidebar{position:fixed;left:0;top:var(--nav-h);height:calc(100vh - var(--nav-h));transform:translateX(-100%);transition:transform .3s ease;z-index:100}
  .doc-sidebar.open{transform:translateX(0)}
  .doc-sidebar-mask{display:block}
  body.doc-sidebar-open{overflow:hidden}
  .doc-content{padding:24px var(--content-padding)}
  .doc-title{font-size:1.6rem}
  .doc-mobile-header{display:flex}
  .doc-mobile-toc-toggle{display:block}
}

@media(max-width:767px){
  .doc-container{display:block}
  .doc-content{padding:20px var(--content-padding)}
  .doc-title{font-size:1.4rem}
  .doc-description{font-size:1rem}
  .doc-content-body{font-size:.95rem}
  .doc-content-body h2{font-size:1.3rem}
  .doc-content-body h3{font-size:1.1rem}
  .doc-page-nav{flex-direction:column;gap:12px}
  .doc-page-nav-prev,.doc-page-nav-next{text-align:center}
  .doc-page-nav-prev .doc-page-nav-label,.doc-page-nav-next .doc-page-nav-label{justify-content:center}
  
  .doc-list-title{font-size:1.8rem}
  .doc-categories{grid-template-columns:1fr}
  .doc-category-card{padding:20px}
  
  .blog-list-title{font-size:1.8rem}
  .blog-grid{grid-template-columns:1fr;gap:16px}
  .blog-card-link{padding:20px}
  .blog-article-title{font-size:1.5rem}
  .blog-article-header,.blog-article-content,.blog-article-footer{padding-left:20px;padding-right:20px}
  .blog-article-nav{flex-direction:column;gap:12px}
  .blog-nav-prev,.blog-nav-next{text-align:center}
  .blog-nav-prev .blog-nav-label,.blog-nav-next .blog-nav-label{justify-content:center}
  
  /* Notes page responsive */
  .blog-page{padding:20px var(--content-padding)}
  .blog-article-header{padding:24px 24px 16px}
  .blog-article-title{font-size:1.6rem}
  .blog-article-content{padding:24px}
  .blog-article-footer{padding:0 24px 24px}
  .blog-article-meta{gap:12px;font-size:.85rem}
}

/* ========== 好物样式 ========== */
.good-things-page{max-width:1400px;margin:0 auto;padding:20px var(--content-padding) 40px}

/* 好物头部 */
.good-things-header{text-align:center;margin-bottom:30px}
.good-things-title{font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.good-things-title i{color:var(--primary)}
.good-things-description{color:var(--text2);font-size:1.05rem}

/* 分类导航 */
.good-things-categories{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:35px}
.good-things-cat-item{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-full);font-size:.95rem;font-weight:500;transition:all .25s ease;cursor:pointer;color:var(--text-primary);font-family:inherit;text-decoration:none}
.good-things-cat-item:hover,.good-things-cat-item.active{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-2px)}
.good-things-cat-item i{font-size:.9rem}
.good-things-cat-count{background:rgba(255,255,255,.15);padding:1px 8px;border-radius:10px;font-size:.8rem;min-width:20px;text-align:center}
.good-things-cat-item:hover .good-things-cat-count{background:rgba(255,255,255,.3)}

/* 精选推荐 */
.good-things-featured{margin-bottom:45px}
.good-things-section-title{font-size:1.4rem;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:20px}
.good-things-section-title i{color:var(--primary)}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.featured-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);overflow:hidden;transition:all .3s ease}
.featured-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.featured-link{display:block}
.featured-image{position:relative;height:180px;background:var(--bg-footer);display:flex;align-items:center;justify-content:center;overflow:hidden}
.featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.featured-card:hover .featured-image img{transform:scale(1.05)}
.featured-placeholder{color:var(--text3);font-size:3rem}
.featured-badge{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:600}
.featured-info{padding:16px}
.featured-name{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured-desc{font-size:.85rem;color:var(--text2);margin-bottom:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.featured-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.featured-price{font-size:1.2rem;font-weight:700;color:var(--primary)}
.featured-rating{display:flex;gap:2px}
.featured-rating i{font-size:.8rem;color:#ffc107}
.featured-original{font-size:.9rem;color:var(--text3);text-decoration:line-through}

/* 好物列表 */
.good-things-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.things-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}
.thing-card{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);overflow:hidden;transition:all .3s ease}
.thing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--primary)}
.thing-card.hot{border-color:rgba(255,107,107,.5)}
.thing-link{display:block}
.thing-image{position:relative;height:180px;background:var(--bg-footer);display:flex;align-items:center;justify-content:center;overflow:hidden}
.thing-image img{width:100%;height:100%;object-fit:cover}
.thing-placeholder{color:var(--text3);font-size:2.5rem}
.thing-tag{position:absolute;padding:4px 10px;border-radius:4px;font-size:.75rem;font-weight:600}
.thing-tag.hot{top:10px;left:10px;background:#ff6b6b;color:#fff}
.thing-tag.usage{bottom:10px;right:10px;background:var(--primary);color:#fff}
.thing-info{padding:15px}
.thing-price-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.thing-price{font-size:1.25rem;font-weight:700;color:var(--primary)}
.thing-original{font-size:.85rem;color:var(--text3);text-decoration:line-through}
.thing-channel{font-size:.75rem;color:var(--text3);background:var(--bg-footer);padding:2px 8px;border-radius:4px}
.thing-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.thing-rating{display:flex;gap:3px;margin-bottom:8px}
.thing-rating i{font-size:.8rem;color:#ffc107}
.thing-rating i.fa-regular{color:var(--border)}
.thing-summary{font-size:.85rem;color:var(--text2);font-style:italic;margin-bottom:10px;padding:8px;background:rgba(var(--primary-rgb),.05);border-radius:6px}
.thing-summary i{color:var(--primary);margin-right:4px}
.thing-categories{display:flex;gap:6px;flex-wrap:wrap}
.thing-date{display:block;font-size:.8rem;color:var(--text3);margin-top:8px}
.thing-date i{margin-right:4px}
.category-tag{font-size:.75rem;color:var(--text2);background:rgba(0,0,0,.05);padding:3px 8px;border-radius:4px}
.dark-mode .category-tag{background:rgba(255,255,255,.08)}

/* 好物详情页 */
.good-thing-detail-page{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:20px var(--content-padding) 40px;box-sizing:border-box}
.good-thing-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:25px;font-size:.9rem;color:var(--text2)}
.good-thing-breadcrumb a:hover{color:var(--primary)}
.good-thing-breadcrumb .current{color:var(--text);font-weight:500}
.good-thing-detail-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:40px}
.detail-gallery{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light)}
.detail-main-image{width:100%;height:100%;object-fit:cover;min-height:400px}
.detail-image-placeholder{height:400px;display:flex;align-items:center;justify-content:center;background:var(--bg-footer);color:var(--text3);font-size:5rem}
.detail-info{display:flex;flex-direction:column;gap:18px}
.detail-title{font-size:1.8rem;font-weight:700;line-height:1.3}
.detail-subtitle{font-size:1.05rem;color:var(--text2)}
.detail-date{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text3)}
.detail-date i{color:var(--text3)}
.detail-rating{display:flex;align-items:center;gap:10px}
.stars{color:#ffc107}
.rating-text{font-size:.9rem;color:var(--text2)}

/* 入手信息 */
.detail-buy-info{background:var(--bg-card);padding:20px;border-radius:var(--radius);border:1px solid var(--border-light)}
.buy-info-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.buy-info-row:last-child{margin-bottom:0}
.buy-label{width:80px;font-size:.9rem;color:var(--text2)}
.buy-price{font-size:1.8rem;font-weight:700;color:var(--primary)}
.buy-original{font-size:.9rem;color:var(--text3);text-decoration:line-through}
.buy-channel,.buy-time{font-size:.95rem;color:var(--text)}

/* 购买链接 */
.detail-links{margin-top:10px}
.links-title{font-size:1rem;font-weight:600;margin-bottom:12px}
.links-list{display:flex;flex-direction:column;gap:10px}
.link-option{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:all .2s}
.link-option:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.link-info{display:flex;align-items:center;gap:15px}
.link-name{font-weight:500}
.link-price{font-size:1.1rem;font-weight:700;color:var(--primary)}
.link-btn{padding:8px 16px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500}
.link-btn i{margin-left:4px}

/* 核心卖点 */
.detail-specs{display:flex;flex-wrap:wrap;gap:10px}
.spec-item{display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(var(--primary-rgb),.08);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text)}
.spec-item i{color:var(--primary)}

/* 推荐理由 */
.detail-reason{margin-bottom:40px}
.reason-box{display:flex;gap:15px;padding:20px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(var(--primary-rgb),.05));border:1px solid rgba(var(--primary-rgb),.3);border-radius:var(--radius)}
.reason-box>i{font-size:2rem;color:var(--primary)}
.reason-content h3{font-size:1.1rem;font-weight:600;margin-bottom:6px}
.reason-content p{color:var(--text2);line-height:1.6}

/* 优缺点 */
.detail-pros-cons{margin-bottom:40px}
.pros-cons-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pros-box,.cons-box{padding:20px;border-radius:var(--radius)}
.pros-box{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3)}
.cons-box{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3)}
.pros-box h3,.cons-box h3{font-size:1.1rem;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pros-box h3{color:#10b981}
.cons-box h3{color:#ff6b6b}
.pros-box ul,.cons-box ul{list-style:none}
.pros-box li,.cons-box li{padding:6px 0;padding-left:20px;position:relative;color:var(--text)}
.pros-box li::before{content:"✓";position:absolute;left:0;color:#10b981;font-weight:700}
.cons-box li::before{content:"✗";position:absolute;left:0;color:#ff6b6b;font-weight:700}

/* 适合人群 */
.detail-suitable{margin-bottom:40px}
.suitable-title{font-size:1.2rem;font-weight:600;margin-bottom:15px;display:flex;align-items:center;gap:8px}
.suitable-title i{color:var(--primary)}
.suitable-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.suitable-yes,.suitable-no{padding:20px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border-light)}
.suitable-yes h4,.suitable-no h4{font-size:1rem;font-weight:600;margin-bottom:12px}
.suitable-yes h4{color:#10b981}
.suitable-no h4{color:#ff6b6b}
.suitable-yes ul,.suitable-no ul{list-style:none}
.suitable-yes li,.suitable-no li{padding:6px 0;color:var(--text2)}

/* 详情内容区 */
.detail-content-wrapper{display:grid;grid-template-columns:1fr 320px;gap:30px}
.detail-content{background:var(--bg-card);padding:30px;border-radius:var(--radius);border:1px solid var(--border-light)}
.detail-sidebar{display:flex;flex-direction:column;gap:20px}
.sidebar-box{background:var(--bg-card);padding:20px;border-radius:var(--radius);border:1px solid var(--border-light)}
.sidebar-title{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:15px}
.sidebar-title i{color:var(--primary)}
.related-list{display:flex;flex-direction:column;gap:12px}
.related-item{display:flex;gap:12px;align-items:center;padding:10px;background:var(--bg-footer);border-radius:var(--radius-sm);transition:all .2s}
.related-item:hover{background:rgba(var(--primary-rgb),.08)}
.related-item img{width:60px;height:60px;object-fit:cover;border-radius:6px}
.related-placeholder{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-radius:6px;color:var(--text3)}
.related-info{flex:1;min-width:0}
.related-name{display:block;font-size:.9rem;font-weight:500;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-price{color:var(--primary);font-weight:600}

/* 好物响应式 */
@media(max-width:1024px){
  .featured-grid{grid-template-columns:repeat(2,1fr)}
  .things-grid{grid-template-columns:repeat(3,1fr)}
  .good-thing-detail-header{grid-template-columns:1fr;gap:25px}
  .detail-content-wrapper{grid-template-columns:1fr}
  .detail-sidebar{order:-1}
  .pros-cons-grid,.suitable-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .good-things-title{font-size:1.6rem}
  .good-things-categories{gap:8px}
  .good-things-cat-item{padding:8px 14px;font-size:.85rem}
  .featured-grid{grid-template-columns:1fr}
  .things-grid{grid-template-columns:repeat(2,1fr);gap:15px}
  .thing-image{height:150px}
  .good-things-section-header{flex-direction:column;align-items:flex-start;gap:12px}
  .detail-title{font-size:1.4rem}
  .buy-price{font-size:1.5rem}
}
@media(max-width:480px){
  .things-grid{grid-template-columns:1fr}
}

/* ========== 投资笔记样式 ========== */
.investing-page{max-width:var(--max-content-width);margin:0 auto;padding:20px var(--content-padding) 40px}

/* 头部 */
.investing-header{text-align:center;margin-bottom:30px}
.investing-title{font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}
.investing-title i{color:var(--primary)}
.investing-description{color:var(--text2);font-size:1.05rem}
.investing-tip{display:inline-block;margin-top:8px;padding:4px 14px;background:rgba(99,102,241,.08);color:var(--primary);font-size:.82rem;border-radius:var(--radius-full);border:1px solid rgba(99,102,241,.15)}

/* 统计卡片 */
.investing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:25px}
.stat-card{display:flex;align-items:center;gap:14px;padding:20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);transition:all .25s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.stat-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:1.3rem;color:#fff;background:var(--primary)}
.stat-icon.up{background:linear-gradient(135deg,#ef4444,#f87171)}
.stat-icon.down{background:linear-gradient(135deg,#10b981,#34d399)}
.stat-icon.warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.stat-info{display:flex;flex-direction:column}
.stat-label{font-size:.85rem;color:var(--text2);margin-bottom:3px}
.stat-value{font-size:1.4rem;font-weight:700;color:var(--text)}
.stat-value.up{color:#ef4444}
.stat-value.down{color:#10b981}

/* 免责声明 */
.investing-disclaimer{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius);margin-bottom:30px;font-size:.9rem;color:var(--text2)}
.investing-disclaimer i{color:#f59e0b;font-size:1.1rem}

/* 笔记列表 */
.investing-notes{margin-bottom:30px}
.investing-section-title{font-size:1.4rem;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:20px}
.investing-section-title i{color:var(--primary)}

/* 按月分组 */
.month-section{margin-bottom:30px}
.month-title{font-size:1.1rem;font-weight:600;color:var(--text2);margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}

/* 两栏布局 */
.notes-two-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:768px){.notes-two-cols{grid-template-columns:1fr}}

/* 按天分组的两栏布局 */
.notes-by-day{display:flex;flex-direction:column;gap:16px}
.day-row{display:grid;grid-template-columns:80px 1fr;gap:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);padding:16px;transition:all .25s ease}
.day-row:hover{border-color:var(--primary)}
.day-date{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid var(--border-light);padding-right:16px}
.day-month{font-size:.85rem;color:var(--text3);margin-bottom:2px}
.day-num{font-size:1.8rem;font-weight:700;color:var(--text);line-height:1}
.day-week{font-size:.75rem;color:var(--text3);margin-top:2px}
.day-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* 笔记卡片 */
.note-card{background:var(--bg);border-radius:var(--radius-sm);border:1px solid var(--border-light);overflow:hidden;transition:all .25s ease}
.note-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.note-card.pre-market{border-left:3px solid #f59e0b}
.note-card.post-market{border-left:3px solid #6366f1}
.note-link{display:flex;gap:12px;padding:14px}
.note-marker{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);flex-shrink:0}
.note-card.pre-market .note-marker{background:rgba(245,158,11,.1);color:#f59e0b}
.note-card.post-market .note-marker{background:rgba(99,102,241,.1);color:#6366f1}
.note-marker i{font-size:1.1rem}
.note-content{flex:1;min-width:0}
.note-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.note-type{padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600}
.note-type.pre-market{background:rgba(245,158,11,.1);color:#f59e0b}
.note-type.post-market{background:rgba(99,102,241,.1);color:#6366f1}
.note-pnl{font-size:.85rem;font-weight:600}
.note-pnl.profit{color:#ef4444}
.note-pnl.loss{color:#10b981}

/* 列表预览项颜色 - 盈利红色，亏损绿色 */
.preview-item.profit{color:#ef4444}
.preview-item.loss{color:#10b981}

/* 笔记列表预览样式 */
.note-preview{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.preview-row{display:flex;align-items:center;gap:4px;margin-bottom:4px;font-size:.85rem}
.preview-row:last-child{margin-bottom:0}
.preview-label{color:var(--text3);font-weight:500;white-space:nowrap}
.preview-stocks{color:var(--text);font-weight:500}
.preview-value{font-weight:600}
.preview-value.profit{color:#ef4444}
.preview-value.loss{color:#10b981}
.preview-empty{color:var(--text3);font-style:italic}

.note-title{font-size:1rem;font-weight:600;margin-bottom:4px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-summary{font-size:.85rem;color:var(--text2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 分页 */
.investing-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border-light)}
.page-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem;transition:all .25s ease}
.page-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-btn i{font-size:.8rem}
.page-numbers{display:flex;align-items:center;gap:8px}
.page-num{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);background:var(--bg-card);border:1px solid var(--border-light);transition:all .25s ease}
.page-num:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-num.active{background:var(--primary);color:#fff;border-color:var(--primary)}

@media(max-width:768px){
  .day-row{grid-template-columns:60px 1fr}
  .day-date{padding-right:12px}
  .day-num{font-size:1.4rem}
  .day-notes{grid-template-columns:1fr}
  .investing-pagination{flex-wrap:wrap}
}

/* 详情页 */
.investing-detail-page{max-width:900px;margin:0 auto;padding:20px var(--content-padding) 40px}
.investing-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:25px;font-size:.9rem;color:var(--text2)}
.investing-breadcrumb a:hover{color:var(--primary)}
.investing-breadcrumb .current{color:var(--text);font-weight:500}
.investing-note-header{text-align:center;margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid var(--border-light)}
.note-type-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--radius-full);font-size:.9rem;font-weight:600;margin-bottom:15px}
.note-type-badge.pre-market{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.note-type-badge.post-market{background:rgba(99,102,241,.1);color:#6366f1;border:1px solid rgba(99,102,241,.3)}
.investing-note-title{font-size:1.8rem;font-weight:700;margin-bottom:12px}
.investing-note-date{color:var(--text2);font-size:.95rem}
.investing-note-date i{margin-right:6px}

/* 区块标题 */
.section-title{font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-title i{color:var(--primary)}

/* 市场环境 */
.market-env-section,.market-summary-section{margin-bottom:25px}
.env-grid,.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.env-item,.summary-item{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light)}
.env-label,.summary-label{font-size:.85rem;color:var(--text2)}
.env-value,.summary-value{font-size:1.1rem;font-weight:600;color:var(--text)}
.env-value.sentiment{padding:3px 10px;border-radius:4px;font-size:.9rem;display:inline-block;width:fit-content}
.env-value.sentiment.偏多{background:rgba(16,185,129,.1);color:#10b981}
.env-value.sentiment.偏空{background:rgba(239,68,68,.1);color:#ef4444}
.env-value.sentiment.震荡{background:rgba(245,158,11,.1);color:#f59e0b}

/* 关注列表 */
.watchlist-section{margin-bottom:25px}
.watchlist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.watchlist-item{padding:16px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light);transition:all .2s}
.watchlist-item:hover{border-color:var(--primary)}
.stock-code{font-size:.85rem;color:var(--text3);font-family:'Geist Mono',monospace;margin-bottom:4px}
.stock-name{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.stock-reason{font-size:.9rem;color:var(--text2)}

/* 持仓计划 */
.holdings-plan-section{margin-bottom:25px}
.plan-list{display:flex;flex-direction:column;gap:10px}
.plan-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light)}
.plan-stock{display:flex;align-items:center;gap:12px}
.plan-code{font-size:.85rem;color:var(--text3);font-family:'Geist Mono',monospace}
.plan-name{font-weight:500}
.plan-action{color:var(--text2);font-size:.9rem}

/* 交易计划 */
.trading-plan-section{margin-bottom:25px}
.plan-box{padding:18px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light)}
.plan-row{display:flex;gap:20px;padding:10px 0;border-bottom:1px solid var(--border-light)}
.plan-row:last-child{border-bottom:none;padding-bottom:0}
.plan-row:first-child{padding-top:0}
.plan-label{width:100px;font-size:.9rem;color:var(--text2);flex-shrink:0}
.plan-value{font-weight:500}

/* 交易记录 */
.trades-section{margin-bottom:25px}
.trades-list{display:flex;flex-direction:column;gap:12px}
.trade-item{padding:18px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light);border-left:4px solid var(--border)}
.trade-item.买入{border-left-color:#10b981}
.trade-item.卖出{border-left-color:#ef4444}
.trade-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.trade-stock{font-weight:600}
.trade-action{padding:3px 10px;border-radius:4px;font-size:.8rem;font-weight:600}
.trade-action.买入{background:rgba(16,185,129,.1);color:#10b981}
.trade-action.卖出{background:rgba(239,68,68,.1);color:#ef4444}
.trade-details{display:flex;gap:20px;margin-bottom:10px;font-size:.9rem;color:var(--text2)}
.trade-reason{font-size:.9rem;color:var(--text2);font-style:italic;padding:10px;background:rgba(var(--primary-rgb),.05);border-radius:6px;margin-bottom:8px}
.trade-reason i{margin-right:6px;color:var(--primary)}
.trade-result{font-size:.9rem;font-weight:500}

/* 持仓表格 */
.holdings-section{margin-bottom:25px}
.holdings-table{background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light);overflow:hidden}
.table-header,.table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;padding:12px 16px;align-items:center}
.table-header{background:var(--bg-footer);font-size:.85rem;font-weight:600;color:var(--text2)}
.table-row{border-top:1px solid var(--border-light)}
.holding-name{font-weight:500}
.holding-cost,.holding-current{color:var(--text2)}
.holding-pnl{font-weight:600}
.holding-pnl.up{color:#ef4444}
.holding-pnl.down{color:#10b981}

/* 当日盈亏 */
.daily-pnl-section{margin-bottom:25px}
.pnl-box{text-align:center;padding:30px;border-radius:var(--radius);border:2px solid}
.pnl-box.profit{background:rgba(239,68,68,.05);border-color:#ef4444}
.pnl-box.loss{background:rgba(16,185,129,.05);border-color:#10b981}
.pnl-amount{font-size:2.5rem;font-weight:700}
.pnl-box.profit .pnl-amount{color:#10b981}
.pnl-box.loss .pnl-amount{color:#ef4444}
.pnl-percentage{font-size:1.2rem;margin-top:8px}
.pnl-benchmark{font-size:.9rem;color:var(--text2);margin-top:6px}

/* 风险提示 */
.risk-section{margin-bottom:25px}
.risk-box{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);color:var(--text)}
.risk-box i{color:#ef4444;font-size:1.2rem}

/* ========== 新版投资笔记详情页样式 ========== */
.investing-single{max-width:var(--max-content-width);margin:0 auto;padding:20px var(--content-padding) 40px}

/* 顶部导航 */
.investing-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.back-link{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-card);border-radius:var(--radius-full);border:1px solid var(--border-light);font-size:.9rem;color:var(--text2);transition:all .2s}
.back-link:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.note-type-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);font-size:.9rem;font-weight:600}
.note-type-badge.pre-market{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.note-type-badge.post-market{background:rgba(99,102,241,.1);color:#6366f1;border:1px solid rgba(99,102,241,.3)}

/* 标题区 */
.investing-header{text-align:center;margin-bottom:32px;padding-bottom:24px;border-bottom:2px solid var(--border-light)}
.investing-title{font-size:1.6rem;font-weight:700;margin-bottom:16px;color:var(--text)}
.investing-meta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.meta-item{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text2)}
.meta-item i{font-size:.85rem}
.meta-item.sentiment{padding:4px 12px;border-radius:var(--radius-full);font-weight:500}
.meta-item.sentiment.偏多{background:rgba(16,185,129,.1);color:#10b981}
.meta-item.sentiment.偏空{background:rgba(239,68,68,.1);color:#ef4444}
.meta-item.sentiment.震荡{background:rgba(245,158,11,.1);color:#f59e0b}

/* 数据区块通用样式 */
.data-section{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);padding:24px;margin-bottom:24px}
.section-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-light)}
.section-header i{color:var(--primary);font-size:1.1rem}
.section-header h2{font-size:1.1rem;font-weight:600;color:var(--text);margin:0}

/* 数据卡片网格 */
.data-cards{display:grid;gap:16px;margin-bottom:16px}
.data-cards.four-cols{grid-template-columns:repeat(4,1fr)}
.data-cards.three-cols{grid-template-columns:repeat(3,1fr)}
.data-card{background:var(--bg-solid);border-radius:var(--radius-sm);padding:16px;text-align:center;border:1px solid var(--border-light);transition:all .2s}
.data-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.data-card.highlight{background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(var(--primary-rgb),.05));border-color:rgba(var(--primary-rgb),.3)}
.data-card.up{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.data-card.down{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3)}
.card-label{font-size:.8rem;color:var(--text2);margin-bottom:6px}
.card-value{font-size:1.3rem;font-weight:700;color:var(--text)}
.data-card.up .card-value{color:#ef4444}
.data-card.down .card-value{color:#10b981}
.card-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:.85rem;font-weight:600}
.card-badge.偏多{background:rgba(16,185,129,.1);color:#10b981}
.card-badge.偏空{background:rgba(239,68,68,.1);color:#ef4444}
.card-badge.震荡{background:rgba(245,158,11,.1);color:#f59e0b}

/* 摘要框 */
.summary-box{display:flex;gap:12px;padding:16px;background:var(--bg-footer);border-radius:var(--radius-sm);margin-top:16px}
.summary-box i{color:var(--primary);font-size:1.2rem;flex-shrink:0;margin-top:2px}
.summary-box p{margin:0;font-size:.9rem;color:var(--text2);line-height:1.6}

/* 股票网格 */
.stock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.stock-card{background:var(--bg-solid);border-radius:var(--radius-sm);padding:16px;border:1px solid var(--border-light);transition:all .2s}
.stock-card:hover{border-color:var(--primary);transform:translateX(4px)}
.stock-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.stock-name{font-size:1.1rem;font-weight:600;color:var(--text)}
.stock-code{font-size:.85rem;color:var(--text3);font-family:'Geist Mono',monospace;background:var(--bg-footer);padding:2px 8px;border-radius:4px}
.stock-reason{display:flex;gap:8px;font-size:.9rem;color:var(--text2)}
.stock-reason i{color:#f59e0b;flex-shrink:0;margin-top:2px}

/* 计划表格 */
.plan-table{background:var(--bg-solid);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-light)}
.plan-table .table-header{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:12px 16px;background:var(--bg-footer);font-size:.85rem;font-weight:600;color:var(--text2)}
.plan-table .table-row{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:14px 16px;border-top:1px solid var(--border-light);align-items:center}
.plan-table .stock-info{display:flex;flex-direction:column;gap:2px}
.plan-table .stock-info .name{font-weight:500}
.plan-table .stock-info .code{font-size:.8rem;color:var(--text3)}
.plan-text{color:var(--text2);font-size:.9rem}

/* 交易计划网格 */
.trading-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.plan-item{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-solid);border-radius:var(--radius-sm);border:1px solid var(--border-light);transition:all .2s}
.plan-item:hover{border-color:var(--primary)}
.plan-item i{font-size:1.5rem;color:var(--primary)}
.plan-item.warning i{color:#f59e0b}
.plan-item.success i{color:#10b981}
.plan-content{display:flex;flex-direction:column;gap:2px}
.plan-content .label{font-size:.8rem;color:var(--text2)}
.plan-content .value{font-weight:600;color:var(--text)}
.plan-notes{display:flex;gap:10px;padding:14px 16px;background:rgba(var(--primary-rgb),.05);border-radius:var(--radius-sm);border-left:3px solid var(--primary)}
.plan-notes i{color:var(--primary);flex-shrink:0}
.plan-notes p{margin:0;font-size:.9rem;color:var(--text2)}

/* 盈亏展示 */
.pnl-display{text-align:center;padding:32px;border-radius:var(--radius);border:2px solid;margin-bottom:16px}
.pnl-display.profit{background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.03));border-color:#ef4444}
.pnl-display.loss{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.03));border-color:#10b981}
.pnl-main{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.pnl-label{font-size:.9rem;color:var(--text2)}
.pnl-amount{font-size:2.5rem;font-weight:700}
.pnl-display.profit .pnl-amount{color:#ef4444}
.pnl-display.loss .pnl-amount{color:#10b981}
.pnl-percent{font-size:1.2rem;font-weight:600;margin-bottom:8px}
.pnl-display.profit .pnl-percent{color:#ef4444}
.pnl-display.loss .pnl-percent{color:#10b981}
.pnl-benchmark{font-size:.85rem;color:var(--text2)}

/* 交易记录列表 */
.trades-list{display:flex;flex-direction:column;gap:12px}
.trades-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.trade-record{background:var(--bg-solid);border-radius:var(--radius-sm);padding:16px;border:1px solid var(--border-light);border-left:4px solid}
.trade-record.profit{border-left-color:#ef4444}
.trade-record.loss{border-left-color:#10b981}
.trade-record.zero{border-left-color:#6b7280}
.trade-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.trade-stock-info{display:flex;align-items:center;gap:10px}
.trade-name{font-weight:600;color:var(--text)}
.trade-code{font-size:.8rem;color:var(--text3);background:var(--bg-footer);padding:2px 8px;border-radius:4px}
.trade-action-badge{padding:4px 12px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600}
.trade-action-badge.profit{background:rgba(239,68,68,.1);color:#ef4444}
.trade-action-badge.loss{background:rgba(16,185,129,.1);color:#10b981}
.trade-action-badge.zero{background:rgba(107,114,128,.1);color:#6b7280}
.trade-details{display:flex;gap:16px;margin-bottom:12px}
.trades-grid .trade-details{gap:12px;justify-content:space-between}
.trades-grid .detail-item{flex:1;text-align:center}
.trades-grid .detail-item.note-full{flex-basis:100%;text-align:left}
.detail-item{display:flex;flex-direction:column;gap:2px}
.detail-item .label{font-size:.75rem;color:var(--text2)}
.detail-item .value{font-weight:500;font-size:.9rem}
.detail-item .value.profit{color:#ef4444}
.detail-item .value.loss{color:#10b981}
.trade-reason,.trade-result{display:flex;gap:8px;padding:10px 12px;background:var(--bg-footer);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text2)}
.trade-reason i,.trade-result i{color:var(--primary);flex-shrink:0;margin-top:2px}

/* 持仓卡片 */
.holdings-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.holding-card{background:var(--bg-solid);border-radius:var(--radius-sm);padding:16px;border:1px solid var(--border-light);position:relative;transition:all .2s}
.holding-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.holding-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.stock-title{display:flex;align-items:center;gap:8px}
.stock-title .name{font-weight:600;color:var(--text)}
.stock-title .code{font-size:.75rem;color:var(--text3)}
.holding-pnl{padding:4px 10px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600}
.holding-pnl.up{background:rgba(16,185,129,.1);color:#10b981}
.holding-pnl.down{background:rgba(239,68,68,.1);color:#ef4444}
.holding-details{display:flex;flex-direction:column;gap:8px}
.detail-row{display:flex;justify-content:space-between;font-size:.85rem}
.detail-row .label{color:var(--text2)}

/* 市场情报 */
.intelligence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}
.intel-card{background:var(--bg-solid);border-radius:var(--radius-sm);padding:16px;border:1px solid var(--border-light)}
.intel-title{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:var(--text)}
.intel-title i{color:var(--primary)}
.intel-content{display:flex;flex-direction:column;gap:10px}
.intel-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-light)}
.intel-row:last-child{border-bottom:none}
.expert-info{display:flex;flex-direction:column;gap:2px}
.expert-name{font-weight:500;font-size:.9rem}
.expert-action{font-size:.8rem;color:var(--text2)}
.expert-pnl{font-size:.9rem;font-weight:600}
.expert-pnl.up{color:#10b981}
.expert-pnl.down{color:#ef4444}

/* 资金流向 */
.flow-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.flow-name{width:80px;font-size:.85rem;color:var(--text2)}
.flow-bar-container{flex:1;height:8px;background:var(--bg-footer);border-radius:var(--radius-full);overflow:hidden}
.flow-bar{height:100%;border-radius:var(--radius-full)}
.flow-bar.in{background:#10b981}
.flow-bar.out{background:#ef4444}
.flow-value{width:70px;text-align:right;font-size:.85rem;font-weight:600}
.flow-value.in{color:#10b981}
.flow-value.out{color:#ef4444}

/* 消息列表 */
.news-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-light)}
.news-list{display:flex;flex-direction:column;gap:10px}
.news-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg-solid);border-radius:var(--radius-sm)}
.news-time{font-size:.75rem;color:var(--text3);background:var(--bg-footer);padding:2px 8px;border-radius:4px;flex-shrink:0}
.news-text{flex:1;font-size:.85rem;color:var(--text);line-height:1.5}
.news-tag{font-size:.7rem;padding:2px 8px;border-radius:var(--radius-full);font-weight:500;flex-shrink:0}
.news-tag.policy{background:rgba(59,130,246,.1);color:#3b82f6}
.news-tag.industry{background:rgba(16,185,129,.1);color:#10b981}
.news-tag.company{background:rgba(245,158,11,.1);color:#f59e0b}
.news-tag.global{background:rgba(139,92,246,.1);color:#8b5cf6}

/* 经验总结 */
.lessons-list{display:flex;flex-direction:column;gap:10px}
.lesson-item{display:flex;gap:10px;padding:12px 16px;background:var(--bg-solid);border-radius:var(--radius-sm);border-left:3px solid #f59e0b}
.lesson-item i{color:#f59e0b;margin-top:2px}
.lesson-item span{flex:1;font-size:.9rem;color:var(--text);line-height:1.5}

/* 风险提示 */
.risk-section{margin-bottom:24px}
.risk-alert{display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);color:var(--text)}
.risk-alert i{color:#ef4444;font-size:1.3rem}

/* 内容区 */
.content-section{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);padding:24px;margin-bottom:24px}
.investing-content{font-size:1rem;line-height:1.8;color:var(--text)}
.investing-content h2{font-size:1.2rem;font-weight:600;margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}
.investing-content h3{font-size:1.1rem;font-weight:600;margin:20px 0 10px}
.investing-content p{margin-bottom:16px}
.investing-content ul{margin:12px 0;padding-left:20px}
.investing-content li{margin:8px 0}

/* 评论区 */
.comments-section{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);padding:24px;margin-bottom:24px}

/* 底部导航 */
.post-navigation{display:flex;gap:16px;margin-top:32px}
.nav-prev,.nav-next{flex:1;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);transition:all .2s}
.nav-prev:hover,.nav-next:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.nav-prev{justify-content:flex-start}
.nav-next{justify-content:flex-end}
.nav-prev.disabled,.nav-next.disabled{opacity:.5;cursor:not-allowed}
.nav-prev.disabled:hover,.nav-next.disabled:hover{border-color:var(--border-light);background:var(--bg-card)}
.nav-info{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:.75rem;color:var(--text2)}
.nav-title{font-size:.9rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* 响应式 */
@media(max-width:768px){
  .investing-single{padding:16px}
  .investing-nav{flex-direction:column;gap:12px;align-items:flex-start}
  .investing-title{font-size:1.3rem}
  .investing-meta{flex-direction:column;gap:8px}
  .data-cards.four-cols,.data-cards.three-cols{grid-template-columns:repeat(2,1fr)}
  .stock-grid,.holdings-cards{grid-template-columns:1fr}
  .trading-plan-grid{grid-template-columns:1fr}
  .intelligence-grid{grid-template-columns:1fr}
  .trade-details{flex-direction:column;gap:8px}
  .plan-table .table-header{display:none}
  .plan-table .table-row{grid-template-columns:1fr;gap:8px}
  .post-navigation{flex-direction:column}
  .nav-title{max-width:100%}
}

@media(max-width:480px){
  .data-cards.four-cols,.data-cards.three-cols{grid-template-columns:1fr}
  .data-section{padding:16px}
}

.investing-detail-page{max-width:800px;margin:0 auto;padding:20px var(--content-padding) 40px}

/* 顶部导航 */
.investing-top-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.nav-back{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-card);border-radius:var(--radius-full);border:1px solid var(--border-light);font-size:.9rem;transition:all .2s}
.nav-back:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.nav-type-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);font-size:.9rem;font-weight:600}
.nav-type-badge.pre-market{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.nav-type-badge.post-market{background:rgba(99,102,241,.1);color:#6366f1;border:1px solid rgba(99,102,241,.3)}

/* 标题区 */
.investing-header{text-align:center;margin-bottom:35px;padding-bottom:25px;border-bottom:2px solid var(--border-light)}
.investing-title{font-size:1.8rem;font-weight:700;margin-bottom:10px}
.investing-date{color:var(--text2);font-size:.95rem}

/* 数据区块 */
.data-section{margin-bottom:30px}
.section-title{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--text)}
.section-title i{color:var(--primary)}

/* 数据网格 */
.data-grid{display:grid;gap:12px}
.data-grid.four-cols{grid-template-columns:repeat(4,1fr)}
.data-grid.three-cols{grid-template-columns:repeat(3,1fr)}
.data-card{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);text-align:center}
.data-label{font-size:.85rem;color:var(--text2)}
.data-value{font-size:1.2rem;font-weight:700;color:var(--text)}
.data-value.up{color:#ef4444}
.data-value.down{color:#10b981}
.data-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:.85rem;font-weight:600;width:fit-content;margin:0 auto}
.data-badge.偏多{background:rgba(16,185,129,.1);color:#10b981}
.data-badge.偏空{background:rgba(239,68,68,.1);color:#ef4444}
.data-badge.震荡{background:rgba(245,158,11,.1);color:#f59e0b}

/* 股票列表 */
.stock-list{display:flex;flex-direction:column;gap:12px}
.stock-item{padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);border-left:4px solid var(--primary)}
.stock-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stock-name{font-size:1.1rem;font-weight:600}
.stock-code{font-size:.85rem;color:var(--text3);font-family:'Geist Mono',monospace}
.stock-reason{font-size:.9rem;color:var(--text2)}

/* 计划表格 */
.plan-table{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);overflow:hidden}
.plan-table .table-row{display:grid;grid-template-columns:1fr 2fr;gap:16px;padding:14px 16px;align-items:center;border-bottom:1px solid var(--border-light)}
.plan-table .table-row:last-child{border-bottom:none}
.plan-table .table-row.header{background:var(--bg-footer);font-weight:600;color:var(--text2);font-size:.9rem}
.plan-table .stock-info{display:flex;flex-direction:column;gap:2px}
.plan-table .stock-info .name{font-weight:500}
.plan-table .stock-info .code{font-size:.8rem;color:var(--text3)}
.plan-table .plan{color:var(--text2);font-size:.9rem}

/* 计划卡片 */
.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plan-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);text-align:center}
.plan-card i{font-size:1.5rem;color:var(--primary)}
.plan-card.warning i{color:#f59e0b}
.plan-card.success i{color:#10b981}
.plan-card .label{font-size:.8rem;color:var(--text2)}
.plan-card .value{font-size:.9rem;font-weight:500}

/* 风险提示 */
.risk-alert{display:flex;align-items:center;gap:12px;padding:16px 20px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);color:var(--text)}
.risk-alert i{color:#ef4444;font-size:1.3rem}

/* 盈亏高亮 */
.pnl-highlight{text-align:center;padding:35px 30px;border-radius:var(--radius);border:2px solid}
.pnl-highlight.profit{background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.03));border-color:#ef4444}
.pnl-highlight.loss{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.03));border-color:#10b981}
.pnl-main{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.pnl-label{font-size:.9rem;color:var(--text2)}
.pnl-amount{font-size:3rem;font-weight:700}
.pnl-highlight.profit .pnl-amount{color:#10b981}
.pnl-highlight.loss .pnl-amount{color:#ef4444}
.pnl-percent{font-size:1.3rem;font-weight:600}
.pnl-benchmark{font-size:.9rem;color:var(--text2)}

/* 交易卡片 */
.trade-list{display:flex;flex-direction:column;gap:12px}
.trade-card{padding:18px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);border-left:4px solid}
.trade-card.买入{border-left-color:#10b981}
.trade-card.卖出{border-left-color:#ef4444}
.trade-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.trade-stock{display:flex;align-items:center;gap:10px}
.trade-stock .name{font-weight:600}
.trade-stock .code{font-size:.85rem;color:var(--text3);font-family:'Geist Mono',monospace}
.trade-badge{padding:4px 12px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600}
.trade-badge.买入{background:rgba(16,185,129,.1);color:#10b981}
.trade-badge.卖出{background:rgba(239,68,68,.1);color:#ef4444}
.trade-body{display:flex;gap:24px;margin-bottom:12px}
.trade-detail{display:flex;flex-direction:column;gap:2px}
.trade-detail .label{font-size:.8rem;color:var(--text2)}
.trade-detail .value{font-weight:500}
.trade-reason{display:flex;align-items:flex-start;gap:8px;padding:12px;background:rgba(var(--primary-rgb),.05);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text2);margin-bottom:10px}
.trade-reason i{color:var(--primary);margin-top:3px}
.trade-result{font-size:.9rem;font-weight:500;color:var(--text)}

/* 持仓网格 */
.holdings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.holding-card{padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);position:relative}
.holding-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.holding-header .name{font-weight:600}
.holding-header .code{font-size:.8rem;color:var(--text3)}
.holding-body{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.holding-row{display:flex;justify-content:space-between;font-size:.9rem}
.holding-row .label{color:var(--text2)}
.holding-pnl{position:absolute;top:16px;right:16px;padding:4px 10px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600}
.holding-pnl.up{background:rgba(16,185,129,.1);color:#10b981}
.holding-pnl.down{background:rgba(239,68,68,.1);color:#ef4444}

/* 经验列表 */
.lessons-list{display:flex;flex-direction:column;gap:10px}
.lesson-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light)}
.lesson-item i{color:#f59e0b;font-size:1.1rem;margin-top:2px}
.lesson-item span{flex:1;font-size:.95rem}

/* 正文内容 */
.investing-content{background:var(--bg-card);padding:30px;border-radius:var(--radius);border:1px solid var(--border-light);margin-bottom:30px;line-height:1.8}
.data-section .investing-content{background:none;padding:0;border:none;margin-bottom:0}
.investing-content h2{font-size:1.25rem;font-weight:600;margin:25px 0 15px;padding-bottom:10px;border-bottom:1px solid var(--border-light)}
.investing-content h3{font-size:1.1rem;font-weight:600;margin:20px 0 12px}
.investing-content ul{margin:12px 0;padding-left:20px}
.investing-content li{margin:8px 0}
.investing-content strong{color:var(--primary)}

/* 底部导航 */
.investing-bottom-nav{display:flex;justify-content:space-between;gap:16px;margin-top:30px}
.nav-btn{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);flex:1;transition:all .2s}
.nav-btn:hover{border-color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.nav-btn.prev{justify-content:flex-start}
.nav-btn.next{justify-content:flex-end}
.nav-btn.disabled{opacity:.5;cursor:not-allowed}
.nav-btn.disabled:hover{border-color:var(--border-light);background:var(--bg-card)}
.nav-text{display:flex;flex-direction:column}
.nav-text .label{font-size:.8rem;color:var(--text2)}
.nav-text .title{font-size:.95rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* ========================================
   收益率统计面板样式
   ======================================== */
.returns-dashboard{
  background:var(--bg-card);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  padding:24px;
  margin-bottom:30px
}

.dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:16px
}

.dashboard-title{
  font-size:1.2rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0
}

.dashboard-title i{color:var(--primary)}

.dashboard-tabs{
  display:flex;
  gap:8px;
  background:var(--bg-footer);
  padding:4px;
  border-radius:var(--radius-full)
}

.tab-btn{
  padding:8px 20px;
  border-radius:var(--radius-full);
  border:none;
  background:transparent;
  color:var(--text2);
  font-size:.9rem;
  font-weight:500;
  cursor:pointer;
  transition:all .25s ease
}

.tab-btn:hover{color:var(--text)}

.tab-btn.active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 2px 8px rgba(var(--primary-rgb),.3)
}

.tab-content{display:none}

.tab-content.active{display:block}

/* 收益率卡片 */
.return-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px
}

.return-card{
  background:var(--bg-solid);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
  border:1px solid var(--border-light);
  transition:all .25s ease
}

.return-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card)
}

.return-card.primary{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(var(--primary-rgb),.05));
  border-color:rgba(var(--primary-rgb),.3)
}

.return-label{
  font-size:.85rem;
  color:var(--text2);
  margin-bottom:8px
}

.return-value{
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px
}

.return-value.up{color:#ef4444}

.return-value.down{color:#10b981}

/* 收益率卡片颜色 - 盈利红色，亏损绿色 */
.return-value.profit{color:#ef4444}
.return-value.loss{color:#10b981}

.return-sub{
  font-size:.75rem;
  color:var(--text3)
}

/* 日历热力图 */
.calendar-section{margin-bottom:24px}

.section-subtitle{
  font-size:1rem;
  font-weight:600;
  margin-bottom:16px;
  color:var(--text)
}

.calendar-heatmap{
  background:var(--bg-solid);
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--border-light)
}

.calendar-header{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-bottom:4px;
  text-align:center
}

.calendar-header span{
  font-size:.75rem;
  color:var(--text3);
  font-weight:500
}

.calendar-body{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px
}

.calendar-day{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  font-size:.8rem;
  font-weight:500;
  cursor:pointer;
  transition:all .2s ease;
  background:var(--bg-footer);
  color:var(--text2);
  line-height:1.2;
  padding:2px
}

.calendar-heatmap .calendar-day .day-pnl{
  font-size:.65rem;
  font-weight:600;
  margin-top:1px
}

.calendar-heatmap .calendar-day .day-pnl.profit{color:#dc2626!important}
.calendar-heatmap .calendar-day .day-pnl.loss{color:#059669!important}

.calendar-day:hover{
  transform:scale(1.05);
  box-shadow:var(--shadow-card)
}

.calendar-day.empty{background:transparent;cursor:default}

.calendar-day.empty:hover{transform:none;box-shadow:none}

/* 盈亏颜色等级 - 盈利浅红背景深红文字，亏损浅绿背景深绿文字，不亏不赚白背景黑文字 */
.calendar-heatmap .calendar-day.profit-1{background:rgba(254,226,226,1)!important;color:#dc2626!important}
.calendar-heatmap .calendar-day.profit-2{background:rgba(254,202,202,1)!important;color:#dc2626!important}
.calendar-heatmap .calendar-day.profit-3{background:rgba(252,165,165,1)!important;color:#b91c1c!important}
.calendar-heatmap .calendar-day.profit-4{background:rgba(248,113,113,1)!important;color:#fff!important}

.calendar-heatmap .calendar-day.loss-1{background:rgba(209,250,229,1)!important;color:#059669!important}
.calendar-heatmap .calendar-day.loss-2{background:rgba(167,243,208,1)!important;color:#059669!important}
.calendar-heatmap .calendar-day.loss-3{background:rgba(110,231,183,1)!important;color:#047857!important}
.calendar-heatmap .calendar-day.loss-4{background:rgba(52,211,153,1)!important;color:#fff!important}

.calendar-heatmap .calendar-day:not(.profit-1):not(.profit-2):not(.profit-3):not(.profit-4):not(.loss-1):not(.loss-2):not(.loss-3):not(.loss-4):not(.empty){
  background:#fff!important;
  color:var(--text)!important;
  border:1px solid var(--border-light)!important
}

/* 月度图表 */
.chart-section{margin-bottom:24px}

.monthly-chart{
  background:var(--bg-solid);
  border-radius:var(--radius);
  padding:24px;
  border:1px solid var(--border-light);
  min-height:200px
}

.chart-bars{
  display:flex;
  align-items:flex-end;
  justify-content:space-around;
  gap:16px;
  height:180px;
  padding-bottom:30px;
  position:relative
}

.chart-bar-wrapper{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  max-width:60px
}

.chart-bar{
  width:100%;
  min-height:4px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  position:relative;
  transition:all .3s ease
}

.chart-bar.profit{background:#ef4444}
.chart-bar.loss{background:#10b981}

.chart-value{
  position:absolute;
  top:-24px;
  left:50%;
  transform:translateX(-50%);
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap
}

.chart-bar.profit .chart-value{color:#ef4444}
.chart-bar.loss .chart-value{color:#10b981}

.chart-label{
  font-size:.8rem;
  color:var(--text2);
  position:absolute;
  bottom:-30px
}

/* 历史列表 */
.history-list{
  display:flex;
  flex-direction:column;
  gap:12px
}

.history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:var(--bg-solid);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  transition:all .2s ease
}

.history-item:hover{
  border-color:var(--primary);
  transform:translateX(4px)
}

.history-year{
  font-size:1.1rem;
  font-weight:600;
  color:var(--text)
}

.history-return{
  font-size:1.3rem;
  font-weight:700
}

.history-return.up{color:#ef4444}
.history-return.down{color:#10b981}

/* 历史列表颜色 - 盈利红色，亏损绿色 */
.history-return.profit{color:#ef4444}
.history-return.loss{color:#10b981}
.history-benchmark.profit{color:#ef4444}
.history-benchmark.loss{color:#10b981}

.history-pnl{
  font-size:.95rem;
  color:var(--text2)
}

.history-days{
  font-size:.85rem;
  color:var(--text3);
  background:var(--bg-footer);
  padding:4px 12px;
  border-radius:var(--radius-full)
}

/* ========================================
   市场情报样式
   ======================================== */
.market-intelligence{
  margin-bottom:30px
}

.market-intelligence .section-title{
  font-size:1.3rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  color:var(--text)
}

.market-intelligence .section-title i{color:var(--primary)}

.intel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.intel-card{
  background:var(--bg-card);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  overflow:hidden;
  transition:all .25s ease
}

.intel-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
  border-color:var(--primary)
}

.intel-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 20px;
  background:var(--bg-footer);
  border-bottom:1px solid var(--border-light);
  font-weight:600;
  color:var(--text)
}

.intel-header i{color:var(--primary)}

.intel-content{
  padding:16px
}

/* 高手动向 */
.intel-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light)
}

.intel-item:last-child{
  border-bottom:none;
  padding-bottom:0
}

.intel-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#f78736);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  font-size:.9rem;
  flex-shrink:0
}

.intel-info{flex:1;min-width:0}

.intel-name{
  font-weight:600;
  font-size:.9rem;
  margin-bottom:2px
}

.intel-action{
  font-size:.8rem;
  color:var(--text2)
}

.intel-action .stock-code{
  color:var(--primary);
  font-weight:500;
  font-family:'Geist Mono',monospace
}

.intel-pnl{
  font-size:.9rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:var(--radius-sm)
}

.intel-pnl.up{
  background:rgba(239,68,68,.1);
  color:#ef4444
}

.intel-pnl.down{
  background:rgba(16,185,129,.1);
  color:#10b981
}

/* 资金流向 */
.flow-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light)
}

.flow-item:last-child{
  border-bottom:none;
  padding-bottom:0
}

.flow-name{
  width:80px;
  font-size:.85rem;
  color:var(--text2);
  flex-shrink:0
}

.flow-bar{
  flex:1;
  height:8px;
  background:var(--bg-footer);
  border-radius:var(--radius-full);
  overflow:hidden
}

.flow-progress{
  height:100%;
  border-radius:var(--radius-full);
  transition:width .5s ease
}

.flow-progress.in{background:#10b981}
.flow-progress.out{background:#ef4444}

.flow-value{
  width:70px;
  text-align:right;
  font-size:.85rem;
  font-weight:600;
  flex-shrink:0
}

.flow-value.in{color:#10b981}
.flow-value.out{color:#ef4444}

/* 重要消息 */
.news-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border-light)
}

.news-item:last-child{
  border-bottom:none;
  padding-bottom:0
}

.news-time{
  font-size:.75rem;
  color:var(--text3);
  background:var(--bg-footer);
  padding:2px 8px;
  border-radius:4px;
  flex-shrink:0
}

.news-text{
  flex:1;
  font-size:.85rem;
  color:var(--text);
  line-height:1.5
}

.news-tag{
  font-size:.7rem;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-weight:500;
  flex-shrink:0
}

.news-tag.policy{
  background:rgba(59,130,246,.1);
  color:#3b82f6
}

.news-tag.industry{
  background:rgba(16,185,129,.1);
  color:#10b981
}

.news-tag.company{
  background:rgba(245,158,11,.1);
  color:#f59e0b
}

.news-tag.global{
  background:rgba(139,92,246,.1);
  color:#8b5cf6
}

/* 详情页市场情报 */
.intel-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.intel-detail-card{
  background:var(--bg-card);
  border-radius:var(--radius);
  border:1px solid var(--border-light);
  padding:20px
}

.intel-detail-card.full-width{
  grid-column:1/-1
}

.intel-detail-card h3{
  font-size:1rem;
  font-weight:600;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text)
}

.intel-detail-card h3 i{color:var(--primary)}

.intel-list,.flow-list,.news-list{
  display:flex;
  flex-direction:column;
  gap:12px
}

.intel-row,.flow-row,.news-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border-light)
}

.intel-row:last-child,.flow-row:last-child,.news-row:last-child{
  border-bottom:none
}

.news-row{
  align-items:flex-start
}

/* 响应式 */
@media(max-width:1024px){
  .investing-stats{grid-template-columns:repeat(2,1fr)}
  .data-grid.four-cols{grid-template-columns:repeat(2,1fr)}
  .plan-cards{grid-template-columns:1fr}
  .holdings-grid{grid-template-columns:repeat(2,1fr)}
  .trade-body{gap:16px}
  .return-cards{grid-template-columns:repeat(2,1fr)}
  .intel-grid{grid-template-columns:1fr}
  .dashboard-header{flex-direction:column;align-items:flex-start}
  .intel-detail-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .investing-title{font-size:1.5rem}
  .data-grid.four-cols{grid-template-columns:1fr}
  .plan-table .table-row{grid-template-columns:1fr;gap:8px}
  .plan-table .table-row.header{display:none}
  .trade-header{flex-direction:column;align-items:flex-start;gap:8px}
  .trade-body{flex-direction:column;gap:8px}
  .holdings-grid{grid-template-columns:1fr}
  .investing-bottom-nav{flex-direction:column}
  .nav-btn.prev,.nav-btn.next{justify-content:center}
  .nav-text{text-align:center}
  .nav-text .title{max-width:100%}
  .returns-dashboard{padding:16px}
  .return-cards{grid-template-columns:1fr}
  .return-card.primary{grid-column:1/-1}
  .calendar-day{font-size:.7rem}
  .calendar-day .day-pnl{font-size:.55rem}
  .chart-bars{height:150px}
  .history-item{flex-wrap:wrap;gap:8px}
  .history-days{width:100%;text-align:center;margin-top:8px}
  .intel-grid{grid-template-columns:1fr}
  .flow-item{flex-wrap:wrap}
  .flow-bar{width:100%;order:3;margin-top:4px}
}

@media(max-width:480px){
  .tab-btn{padding:6px 14px;font-size:.8rem}
  .return-value{font-size:1.3rem}
  .chart-bar-wrapper{max-width:40px}
  .chart-value{font-size:.65rem}
  .chart-label{font-size:.7rem}
}

/* ========== 首页信息展示栏 ========== */
.home-info-bar{
  margin-bottom:32px;
  padding:16px 0;
  border-bottom:1px solid var(--border-light)
}

.info-bar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.info-bar-item{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--border-light);
  transition:all .25s ease
}

.info-bar-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
  border-color:var(--primary)
}

.info-bar-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  color:var(--text);
  text-decoration:none
}

.info-bar-icon{
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:var(--icon-bg,#f5f5f5);
  color:var(--icon-color,var(--primary));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  flex-shrink:0
}

.info-bar-content{
  flex:1;
  min-width:0
}

.info-bar-content h4{
  font-size:.85rem;
  font-weight:600;
  color:var(--text2);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.5px
}

.info-bar-text{
  font-size:.95rem;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.info-pnl{
  font-weight:600;
  margin-left:4px
}

.info-pnl.up{color:#ef4444}
.info-pnl.down{color:#10b981}

/* 首页投资笔记收益率显示 */
.info-returns-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.info-return,.info-return-month{font-size:.8rem;color:var(--text2);white-space:nowrap}
.info-return-sep{color:var(--border);font-size:.8rem}

.info-bar-arrow{
  color:var(--text3);
  font-size:.8rem;
  transition:transform .25s ease
}

.info-bar-item:hover .info-bar-arrow{
  transform:translateX(4px);
  color:var(--primary)
}

@media(max-width:1024px){
  .info-bar-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .info-bar-grid{grid-template-columns:1fr}
  .home-info-bar{margin-bottom:24px;padding:12px 0}
}

/* Photos Page */
.photos-page{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:40px 20px;box-sizing:border-box}
.photos-header{text-align:center;margin-bottom:40px}
.photos-title{font-size:2rem;font-weight:600;margin-bottom:12px;color:var(--text)}
.photos-desc{color:var(--text2);font-size:1rem;max-width:600px;margin:0 auto}

/* Albums Grid */
.albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.album-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--bg-card);border:1px solid var(--border-light);transition:all .3s ease}
.album-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.15)}
.album-cover{position:relative;aspect-ratio:16/10;overflow:hidden}
.album-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.album-card:hover .album-cover img{transform:scale(1.06)}
.album-count{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;padding:4px 10px;border-radius:var(--radius-full);display:flex;align-items:center;gap:5px;backdrop-filter:blur(4px)}
.album-info{padding:16px}
.album-title{display:block;font-size:1rem;font-weight:600;color:var(--text);margin-bottom:4px}
.album-desc{display:block;font-size:.85rem;color:var(--text2);line-height:1.4}

/* Album Detail View */
.album-detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.album-back{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius);border:1px solid var(--border-light);background:var(--bg-card);color:var(--text);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s}
.album-back:hover{border-color:var(--primary);color:var(--primary);background:rgba(var(--primary-rgb),.05)}
.album-detail-count{font-size:.9rem;color:var(--text2)}

/* Photos Grid */
.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.photo-item{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--bg-card)}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.photo-item:hover img{transform:scale(1.08)}
.photo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:16px}
.photo-item:hover .photo-overlay{opacity:1}
.photo-title{color:#fff;font-size:.95rem;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.3)}

/* Lightbox */
.photo-lightbox{position:fixed;inset:0;z-index:100030;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.photo-lightbox.active{visibility:visible;opacity:1}
.lightbox-content{position:relative;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;align-items:center}
.lightbox-content img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:4px;transition:opacity .2s}
.lightbox-caption{color:#fff;margin-top:16px;font-size:1rem;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;cursor:pointer;transition:background .2s;z-index:10}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:1.2rem;cursor:pointer;transition:background .2s;z-index:10}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.2)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:.9rem;padding:8px 16px;border-radius:var(--radius-full);background:rgba(0,0,0,.5)}
@media(max-width:767px){
  .photos-page{padding:24px 16px}
  .photos-title{font-size:1.6rem}
  .albums-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .album-info{padding:12px}
  .album-title{font-size:.9rem}
  .album-desc{font-size:.78rem}
  .album-count{font-size:.72rem;padding:3px 8px}
  .photos-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .photo-item{aspect-ratio:1}
  .photo-overlay{opacity:1;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.5))}
  .lightbox-prev,.lightbox-next{width:40px;height:40px;font-size:1rem}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .album-detail-header{flex-direction:column;gap:8px;align-items:flex-start}
}

/* ========================================
   Bookmarks Page - New Style
   ======================================== */
.bookmarks-container{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:40px 20px;box-sizing:border-box}
.bookmarks-header{text-align:center;margin-bottom:40px}
.bookmarks-title{font-size:2rem;font-weight:600;margin-bottom:12px;color:var(--text)}
.bookmarks-desc{color:var(--text2);font-size:1rem;max-width:600px;margin:0 auto}
.bookmarks-categories{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:40px;padding:16px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light)}
.bookmark-cat-item{padding:8px 20px;border-radius:var(--radius-full);font-size:.9rem;font-weight:500;color:var(--text2);background:transparent;border:1px solid transparent;transition:all .2s;cursor:pointer;text-decoration:none}
.bookmark-cat-item:hover{color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.bookmark-cat-item.active{color:var(--primary);background:rgba(var(--primary-rgb),.1);border-color:rgba(var(--primary-rgb),.2)}
.bookmarks-content{display:flex;flex-direction:column;gap:50px}
.bookmark-group{display:block}
.bookmark-group-title{display:flex;align-items:center;gap:12px;font-size:1.3rem;font-weight:600;color:var(--text);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--border-light)}
.bookmark-group-icon{color:var(--primary);font-size:1.1rem}
.bookmark-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.bookmark-link-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);transition:all .3s ease;text-decoration:none}
.bookmark-link-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(var(--primary-rgb),.15)}
.bookmark-card-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--bg-footer);flex-shrink:0;overflow:hidden}
.bookmark-card-icon img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}
.bookmark-card-content{flex:1;min-width:0}
.bookmark-card-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.bookmark-link-card:hover .bookmark-card-title{color:var(--primary)}
.bookmark-card-desc{font-size:.85rem;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
@media(max-width:767px){
  .bookmarks-container{padding:24px 16px}
  .bookmarks-title{font-size:1.6rem}
  .bookmarks-categories{gap:8px;padding:12px}
  .bookmark-cat-item{padding:6px 14px;font-size:.85rem}
  .bookmark-cards{grid-template-columns:1fr;gap:12px}
  .bookmark-link-card{padding:16px}
  .bookmark-card-icon{width:40px;height:40px}
}

/* ========================================
   Friends Page - Clean & Compact Design
   ======================================== */
.friends-page{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:30px 20px;box-sizing:border-box}

/* Header */
.friends-header{text-align:center;margin-bottom:24px}
.friends-title{font-size:1.8rem;font-weight:700;color:var(--text);margin:0 0 8px 0}
.friends-desc{font-size:.95rem;color:var(--text3);margin:0}

/* Quick Nav */
.friends-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:32px;padding:12px;background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light)}
.friends-nav-item{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);font-size:.85rem;font-weight:500;color:var(--text2);background:transparent;border:1px solid transparent;transition:all .2s ease;text-decoration:none}
.friends-nav-item:hover{color:var(--primary);background:rgba(var(--primary-rgb),.08);border-color:rgba(var(--primary-rgb),.2)}
.friends-nav-item i{font-size:.8rem}

/* Section */
.friends-section{margin-bottom:28px}
.friends-section-title{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;color:var(--text);margin:0 0 14px 0;padding-bottom:10px;border-bottom:1px solid var(--border-light)}
.friends-section-title .section-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-rgb),.1);border-radius:var(--radius-sm);color:var(--primary);font-size:.85rem}
.friends-section-title .section-count{font-size:.75rem;font-weight:500;color:var(--text3);background:var(--bg-footer);padding:2px 8px;border-radius:var(--radius-full);margin-left:auto}

/* Friends List - Compact Grid */
.friends-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* Friend Item */
.friend-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light);transition:all .2s ease;text-decoration:none}
.friend-item:hover{border-color:var(--primary);background:var(--bg-solid);transform:translateX(4px)}
.friend-avatar{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--bg-footer);flex-shrink:0}
.friend-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.friend-name{font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}
.friend-item:hover .friend-name{color:var(--primary)}
.friend-desc{font-size:.75rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Apply Section */
.friends-apply{margin-top:40px;padding-top:24px;border-top:2px solid var(--border-light)}
.apply-content{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-light);padding:20px}
.apply-content>p{margin:0 0 16px 0;font-size:.9rem;color:var(--text2)}
.apply-format{display:flex;flex-direction:column;gap:8px}
.format-item{display:flex;gap:8px;font-size:.85rem}
.format-label{color:var(--text3);font-weight:500;flex-shrink:0;width:70px}
.format-value{color:var(--text);font-family:'Geist Mono',monospace;background:var(--bg-footer);padding:2px 8px;border-radius:4px;flex:1}

/* Responsive */
@media(max-width:640px){
  .friends-page{padding:20px 16px}
  .friends-title{font-size:1.5rem}
  .friends-nav{gap:6px;padding:10px}
  .friends-nav-item{padding:5px 12px;font-size:.8rem}
  .friends-section{margin-bottom:24px}
  .friends-section-title{font-size:1rem;margin-bottom:12px}
  .friends-list{grid-template-columns:1fr}
  .friend-item{padding:10px 12px}
  .friend-avatar{width:32px;height:32px}
  .friend-name{font-size:.85rem}
  .friend-desc{font-size:.7rem}
  .apply-content{padding:16px}
  .format-item{flex-direction:column;gap:4px}
  .format-label{width:auto}
}

@media(min-width:641px) and (max-width:1024px){
  .friends-list{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1025px){
  .friends-list{grid-template-columns:repeat(3,1fr)}
}

/* ========================================
   Homepage Style: Minimal (简洁笔记风格)
   ======================================== */
.home-minimal{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:90px var(--content-padding) 40px}
.minimal-year-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--border-light)}
.minimal-year{padding:6px 14px;border:none;background:transparent;color:var(--text3);font-size:.85rem;cursor:pointer;border-radius:var(--radius-full);transition:all .2s;font-weight:500}
.minimal-year:hover{color:var(--text)}
.minimal-year.active{color:var(--primary);background:rgba(var(--primary-rgb),.08)}
@media(max-width:640px){
  .home-minimal{padding:70px 16px 32px}
  .minimal-year-nav{gap:4px;margin-bottom:20px}
  .minimal-year{padding:5px 10px;font-size:.8rem}
}

/* ========================================
   Homepage Style: Tech (技术博客风格)
   ======================================== */
.tech-featured{margin-bottom:32px}
.tech-featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tech-featured-card{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light);transition:all .3s}
.tech-featured-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.tech-featured-main{grid-column:1/-1}
.tech-featured-main .tech-featured-link{display:grid;grid-template-columns:1.2fr 1fr;gap:0}
.tech-featured-main .tech-featured-img{height:260px}
.tech-featured-link{display:block}
.tech-featured-img{height:160px;background:var(--bg-footer);overflow:hidden}
.tech-featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tech-featured-card:hover .tech-featured-img img{transform:scale(1.05)}
.tech-featured-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:2.5rem}
.tech-featured-body{padding:18px}
.tech-featured-main .tech-featured-body{display:flex;flex-direction:column;justify-content:center}
.tech-category-badge{display:inline-block;font-size:.72rem;font-weight:600;color:var(--primary);background:rgba(var(--primary-rgb),.1);padding:3px 10px;border-radius:var(--radius-full);margin-bottom:8px}
.tech-featured-title{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:8px;line-height:1.4}
.tech-featured-main .tech-featured-title{font-size:1.4rem}
.tech-featured-excerpt{font-size:.85rem;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tech-featured-meta{font-size:.8rem;color:var(--text3);margin-top:8px}
.tech-section-title{font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:20px;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:2px solid var(--primary)}
.tech-section-title i{color:var(--primary)}
.tech-list{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}
.tech-article{display:flex;gap:20px;padding:20px;background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border-light);transition:all .2s}
.tech-article:hover{border-color:rgba(var(--primary-rgb),.2);box-shadow:var(--shadow-card)}
.tech-article-body{flex:1;min-width:0}
.tech-article-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tech-category-label{font-size:.72rem;font-weight:600;color:var(--primary);background:rgba(var(--primary-rgb),.08);padding:2px 8px;border-radius:var(--radius-full)}
.tech-article-date{font-size:.8rem;color:var(--text3)}
.tech-article-title{font-size:1.1rem;font-weight:600;margin-bottom:8px;line-height:1.4}
.tech-article-title a{color:var(--text);text-decoration:none;transition:color .2s}
.tech-article-title a:hover{color:var(--primary)}
.tech-article-excerpt{font-size:.9rem;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.tech-article-footer{display:flex;align-items:center;justify-content:space-between}
.tech-article-tags{display:flex;gap:8px;flex-wrap:wrap}
.tech-tag{font-size:.78rem;color:var(--text3);text-decoration:none;transition:color .2s}
.tech-tag:hover{color:var(--primary)}
.tech-read-more{font-size:.85rem;color:var(--primary);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:4px;transition:gap .2s}
.tech-read-more:hover{gap:8px}
.tech-article-cover{width:180px;height:130px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
.tech-article-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tech-article:hover .tech-article-cover img{transform:scale(1.04)}
@media(max-width:768px){
  .tech-featured-grid{grid-template-columns:1fr}
  .tech-featured-main .tech-featured-link{grid-template-columns:1fr}
  .tech-featured-main .tech-featured-img{height:180px}
  .tech-article{flex-direction:column-reverse;gap:12px}
  .tech-article-cover{width:100%;height:160px}
  .tech-article-footer{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ========================================
   Homepage Style: Studio (工作室风格)
   ======================================== */
.home-studio{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:90px 20px 40px;box-sizing:border-box}
.studio-hero{padding:40px 0 32px;margin-bottom:32px;border-bottom:1px solid var(--border-light)}
.studio-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.studio-hero-text h1{font-size:2rem;font-weight:700;color:var(--text);margin:0 0 8px}
.studio-hero-text p{font-size:1rem;color:var(--text2);margin:0}
.studio-hero-avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--border-light)}
.studio-section{margin-bottom:36px}
.studio-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border-light)}
.studio-section-header h2{font-size:1.2rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;margin:0}
.studio-section-header h2 i{color:var(--primary);font-size:1rem}
.studio-more{font-size:.85rem;color:var(--primary);text-decoration:none;display:flex;align-items:center;gap:4px;transition:gap .2s}
.studio-more:hover{gap:8px}

/* Studio Posts Grid */
.studio-posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.studio-post-card{background:var(--bg-card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light);transition:all .3s}
.studio-post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.studio-post-card a{text-decoration:none;display:block}
.studio-post-cover{height:120px;background:var(--bg-footer);overflow:hidden}
.studio-post-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.studio-post-card:hover .studio-post-cover img{transform:scale(1.06)}
.studio-post-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:1.8rem}
.studio-post-info{padding:12px}
.studio-post-info h3{font-size:.9rem;font-weight:600;color:var(--text);margin:0 0 6px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.studio-post-info time{font-size:.75rem;color:var(--text3)}

/* Studio Two Column */
.studio-two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:36px}
.studio-col{margin-bottom:0}

/* Studio Note List */
.studio-note-list{display:flex;flex-direction:column;gap:0}
.studio-note-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border-light);text-decoration:none;transition:background .2s}
.studio-note-item:hover{background:rgba(var(--primary-rgb),.03)}
.studio-note-item:last-child{border-bottom:none}
.studio-note-title{font-size:.9rem;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-note-item:hover .studio-note-title{color:var(--primary)}
.studio-note-item time{font-size:.78rem;color:var(--text3);flex-shrink:0;margin-left:12px}
.studio-badge{font-size:.68rem;font-weight:600;padding:2px 6px;border-radius:3px;margin-right:6px}
.studio-badge.pre{background:#e8f5e9;color:#2e7d32}
.studio-badge.post{background:#fff3e0;color:#e65100}
.dark-mode .studio-badge.pre{background:rgba(46,125,50,.15);color:#66bb6a}
.dark-mode .studio-badge.post{background:rgba(230,81,0,.15);color:#ffa726}

/* Studio Things Grid */
.studio-things-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.studio-thing-card{display:flex;flex-direction:column;align-items:center;padding:12px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border-light);text-decoration:none;transition:all .2s}
.studio-thing-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.studio-thing-img{width:60px;height:60px;border-radius:8px;overflow:hidden;margin-bottom:8px;background:var(--bg-footer)}
.studio-thing-img img{width:100%;height:100%;object-fit:cover}
.studio-thing-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3)}
.studio-thing-name{font-size:.8rem;color:var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.studio-thing-card:hover .studio-thing-name{color:var(--primary)}

/* Studio Docs List */
.studio-docs-list{display:flex;flex-direction:column;gap:0}
.studio-doc-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border-light);text-decoration:none;transition:background .2s}
.studio-doc-item:hover{background:rgba(var(--primary-rgb),.03)}
.studio-doc-item:last-child{border-bottom:none}
.studio-doc-item i{color:var(--primary);font-size:.9rem;flex-shrink:0}
.studio-doc-info{flex:1;min-width:0}
.studio-doc-title{display:block;font-size:.9rem;font-weight:500;color:var(--text)}
.studio-doc-item:hover .studio-doc-title{color:var(--primary)}
.studio-doc-desc{display:block;font-size:.78rem;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:768px){
  .home-studio{padding:70px 16px 32px}
  .studio-hero{padding:24px 0}
  .studio-hero-text h1{font-size:1.5rem}
  .studio-posts-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .studio-two-col{grid-template-columns:1fr;gap:16px}
  .studio-things-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .studio-posts-grid{grid-template-columns:1fr}
  .studio-hero-avatar img{width:48px;height:48px}
}

/* ==================== 演示页面样式 ==================== */
.demo-index{padding:40px 20px;}
.demo-container{max-width:900px;margin:0 auto;}
.demo-title{font-size:28px;font-weight:600;text-align:center;margin-bottom:12px;}
.demo-desc{text-align:center;color:var(--text-muted);margin-bottom:36px;font-size:15px;}
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:30px;}
.demo-card{display:flex;flex-direction:column;align-items:center;padding:32px 20px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;text-decoration:none;color:var(--text-color);transition:all .2s ease;}
.demo-card:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08);}
.demo-card-icon{font-size:32px;color:var(--accent-color);margin-bottom:14px;}
.demo-card-title{font-size:16px;font-weight:500;margin-bottom:8px;}
.demo-card-tag{font-size:12px;padding:3px 10px;background:var(--accent-color);color:#fff;border-radius:20px;opacity:.85;}
.demo-tip{text-align:center;color:var(--text-muted);font-size:13px;padding:16px;background:var(--card-bg);border-radius:8px;border:1px dashed var(--border-color);}
.demo-tip i{margin-right:6px;color:var(--accent-color);}
.demo-tip code{background:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:12px;}
.demo-bar{position:sticky;top:60px;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--card-bg);border-bottom:1px solid var(--border-color);backdrop-filter:blur(10px);font-size:13px;}
.demo-bar-back{color:var(--accent-color);text-decoration:none;font-weight:500;display:flex;align-items:center;gap:6px;}
.demo-bar-back:hover{opacity:.8;}
.demo-bar-label{color:var(--text-color);}
.demo-bar-hint{margin-left:auto;color:var(--text-muted);}
.demo-bar-hint code{background:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:12px;}
@media(max-width:768px){
  .demo-grid{grid-template-columns:1fr;}
  .demo-bar{flex-wrap:wrap;gap:8px;}
  .demo-bar-hint{margin-left:0;width:100%;}
}

/* ========================================
   Homepage Style: Grid (多栏风格)
   ======================================== */
.home-grid{width:100%;max-width:var(--max-content-width);margin:0 auto;padding:90px var(--content-padding) 40px}
.grid-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.grid-main{min-width:0}
.grid-posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-card{background:var(--card-bg,var(--bg));border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light);transition:transform .2s,box-shadow .2s}
.grid-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.grid-card-link{display:block;text-decoration:none;color:inherit}
.grid-card-cover{width:100%;height:160px;overflow:hidden;background:var(--bg-code)}
.grid-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.grid-card:hover .grid-card-cover img{transform:scale(1.05)}
.grid-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:2rem}
.grid-card-body{padding:16px}
.grid-card-title{font-size:.95rem;font-weight:600;color:var(--text);line-height:1.5;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid-card:hover .grid-card-title{color:var(--primary)}
.grid-card-excerpt{font-size:.82rem;color:var(--text2);line-height:1.6;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid-card-meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--text3)}
.grid-card-cat{background:rgba(var(--primary-rgb),.08);color:var(--primary);padding:2px 8px;border-radius:var(--radius-full);font-size:.72rem}
.grid-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.grid-page-btn{min-width:36px;height:36px;border:1px solid var(--border-light);background:var(--bg);border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--text2);transition:all .2s}
.grid-page-btn:hover{border-color:var(--primary);color:var(--primary)}
.grid-page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.grid-page-dots{color:var(--text3);font-size:.85rem}
/* Grid Sidebar */
.grid-sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:20px}
.grid-widget{background:var(--card-bg,var(--bg));border:1px solid var(--border-light);border-radius:var(--radius);padding:20px;transition:box-shadow .2s}
.grid-widget:hover{box-shadow:0 4px 12px rgba(0,0,0,.05)}
.grid-widget-title{font-size:.9rem;font-weight:600;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.grid-widget-title i{color:var(--primary);font-size:.85rem}
.grid-author-widget{text-align:center}
.grid-author-avatar{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;overflow:hidden;border:3px solid rgba(var(--primary-rgb),.2)}
.grid-author-avatar img{width:100%;height:100%;object-fit:cover}
.grid-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-code);color:var(--text3);font-size:1.5rem}
.grid-author-name{font-size:1.05rem;font-weight:600;color:var(--text);margin:0 0 6px}
.grid-author-bio{font-size:.82rem;color:var(--text2);margin:0 0 16px;line-height:1.5}
.grid-author-stats{display:flex;justify-content:center;gap:24px;padding-top:14px;border-top:1px solid var(--border-light)}
.grid-stat-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.grid-stat-num{font-size:1.1rem;font-weight:700;color:var(--primary)}
.grid-stat-label{font-size:.72rem;color:var(--text3)}
.grid-hot-list{display:flex;flex-direction:column;gap:0}
.grid-hot-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-light);text-decoration:none;transition:color .2s}
.grid-hot-item:last-child{border-bottom:none}
.grid-hot-title{font-size:.83rem;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-hot-item:hover .grid-hot-title{color:var(--primary)}
.grid-hot-item time{font-size:.75rem;color:var(--text3);flex-shrink:0}
.grid-tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.grid-tag-item{font-size:.78rem;color:var(--text2);background:var(--bg-code);padding:4px 10px;border-radius:var(--radius-full);text-decoration:none;transition:all .2s}
.grid-tag-item:hover{background:rgba(var(--primary-rgb),.1);color:var(--primary)}
.grid-tag-item span{color:var(--text3);margin-left:3px;font-size:.7rem}
.grid-tag-item.tag{background:rgba(var(--primary-rgb),.05)}
@media(max-width:1023px){
  .grid-layout{grid-template-columns:1fr;gap:24px}
  .grid-sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .grid-author-widget{grid-column:1/-1}
}
@media(max-width:768px){
  .home-grid{padding:70px 16px 32px}
  .grid-posts{grid-template-columns:1fr}
  .grid-sidebar{grid-template-columns:1fr}
  .grid-card-cover{height:140px}
}