:root{ --p:#1677ff; --bg:#f7f9ff; --card:#fff; --text:#222; --tag:#e8f3ff; --footer:#1677ff; --link-bg:#ffffff; --code-bg:#282c34; --code-text:#abb2bf;}.green{ --p:#00b42a; --bg:#f0fff4; --card:#fff; --tag:#e8ffe8; --footer:#00b42a; --link-bg:#f8fff9;}.orange{ --p:#ff7d00; --bg:#fff7f0; --card:#fff; --tag:#ffe8d0; --footer:#ff7d00; --link-bg:#fff9f5;}*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei"}html{height:100%;scroll-behavior:smooth;scroll-padding-top:80px;}body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);line-height:1.8;}h1:first-child{ scroll-margin-top: 300px;}h1, h2, h3, h4, h5 { scroll-margin-top: 15px;}.container{max-width:1200px;margin:0 auto;padding:0 15px;width:100%;}@media (min-width: 1500px) { .container{max-width:1350px;}}@media (min-width: 1920px) { .container{max-width:1800px;}}.flex{display:flex;justify-content:space-between;align-items:center;}.main{flex:1;padding:20px 15px;}.header{background:var(--p);color:#fff;padding:18px 0;position:sticky;top:0;z-index:99;}.logo{font-size:22px;font-weight:600;white-space:nowrap;}.search-input{padding:8px 12px;border-radius:6px;border:none;width:220px;}.tbtn{padding:6px 12px;background:rgba(255,255,255,.2);color:#fff;border:none;border-radius:6px;margin-left:6px;cursor:pointer;white-space:nowrap;}.article-detail .header .container.flex { justify-content: space-between; align-items: center;}@media (max-width: 768px) { .article-detail .header { padding: 14px 0; } .article-detail .header .container.flex { flex-direction: column; gap: 12px; justify-content: center; } .article-detail .header .logo { font-size: 20px; text-align: center; } .article-detail .header .btn { font-size: 13px; padding: 5px 12px; }}@media (max-width: 480px) { .article-detail .header { padding: 12px 0; } .article-detail .header .logo { font-size: 19px; }}.tag-nav{padding:15px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}.tag-nav span{font-size:15px;color:#666;}.tag-nav a{ padding:5px 14px; background:#fff; border:1px solid #ddd; border-radius:20px; text-decoration:none; color:#333; font-size:14px; transition:all 0.2s ease; cursor:pointer;}.tag-nav a.active{ background:var(--p); color:#fff; border-color:var(--p);}.tag-nav a:hover:not(.active){ border-color:var(--p); color:var(--p);}.card{background:var(--card);padding:20px;border-radius:12px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,.05);width:100%;}.title{color:var(--p);font-size:18px;margin-bottom:8px;text-decoration:none;display:inline-block;}.meta{color:#666;font-size:14px;margin-bottom:8px;}.summary{margin-bottom:10px;}.tag-box{margin-bottom:10px;}.tag{background:var(--tag);color:var(--p);padding:3px 8px;border-radius:6px;margin-right:6px;font-size:12px;}.btn{display:inline-block;background:var(--p);color:#fff;padding:6px 12px;border-radius:6px;text-decoration:none;font-size:14px;}.links{padding:15px;text-align:center;background:var(--link-bg);margin:15px 0;border-radius:12px;}.links a{margin:0 8px;color:var(--p);text-decoration:none;}.footer{background:var(--footer);color:#fff;padding:20px 0;text-align:center;margin-top:auto;flex-shrink:0;}.footer a { text-decoration: none; color: #fff;}.empty-tip{text-align:center;padding:40px 0;color:#999;font-size:16px;}.pagination{margin:30px 0;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;}.pagination a{ display:inline-block; padding:6px 12px; border:1px solid #ddd; border-radius:4px; color:#333; text-decoration:none; font-size:14px; cursor:pointer;}.pagination span{ display:inline-block; padding:6px 4px; color:#666; font-size:14px;}.pagination a:hover{ background:#f5f5f5;}.pagination a.active{ background:var(--p); color:#fff; border-color:var(--p); cursor:default;}.pagination a.disabled{ color:#ccc; cursor:not-allowed; pointer-events:none;}.jump-page{ display:inline-flex; align-items:center; margin-left:12px; gap:4px;}.jump-page input{ width:60px; padding:6px; border:1px solid #ddd; border-radius:4px; font-size:14px; text-align:center; outline:none;}.jump-page button{ padding:6px 10px; background:var(--p); color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:14px;}.jump-page button:hover{ opacity:0.9;}#backTop{ position:fixed; right:25px; bottom:35px; background:var(--p); color:#fff; padding:12px 16px; border-radius:24px; cursor:pointer; display:none; z-index:999; box-shadow:0 3px 10px rgba(0,0,0,0.15); transition:all 0.3s ease; font-size:14px;}#backTop:hover{ transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,0.2); opacity:0.95;}#mdContainer{margin-top:20px;border-top: 1px solid rgb(238, 238, 238);}#mdContainer h1{font-weight:600;margin:16px 0 12px;padding-bottom:8px;}#mdContainer h2{font-size:22px;margin:14px 0 10px;}#mdContainer h3{font-size:20px;margin:12px 0 8px;}#mdContainer p{margin:10px 0;font-size:15px;}#mdContainer ul,#mdContainer ol{margin:10px 0 10px 24px;}#mdContainer li{margin:6px 0;}#mdContainer blockquote{ margin:10px 0; padding:10px 14px; background:#f8f9fa; border-left:4px solid var(--p); color:#666;}#mdContainer pre{ padding:12px; border-radius:6px; overflow-x:auto; margin:10px 0;}#mdContainer code{ background: none; color: #bca9a0; padding:2px 6px; border-radius:3px; font-family:Consolas,monospace;}.code-wrap { position: relative; margin: 16px 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.15);}.code-block { padding: 45px 15px 15px 15px !important; background: var(--code-bg) !important; color: var(--code-text) !important; overflow-x: auto; margin: 0 !important; border-radius: 0 !important;}.copy-code-btn { position: absolute; top: 10px; right: 10px; z-index: 10; padding: 5px 12px; background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; user-select: none;}.copy-code-btn:hover { background: rgba(255,255,255,0.35);}.copy-tips { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #f0fdf4; color: #00b42a; padding: 12px 24px; border-radius: 8px; font-size: 14px; box-shadow: 0 2px 12px rgba(0, 180, 42, 0.2); border: 1px solid #d1fae5; z-index: 1100;}#mdContainer img{ max-width: 568px; height: auto; margin: 0 auto; display: block;}@media (max-width: 768px) { .header { padding: 14px 0; } .header .container.flex { flex-direction: column; align-items: center; gap: 12px; } .header .container.flex > div:nth-child(2), .header .container.flex > div:nth-child(3) { display: inline-block; } .logo { font-size: 20px; } .search-input { width: 180px; } .search-input::placeholder { text-align: center; color:#666; } .search-input::-moz-placeholder { text-align: center; color:#666; } .search-input::-webkit-input-placeholder { text-align: center; color:#666; } .tbtn { font-size: 13px; padding: 5px 10px; margin-left: 4px; } .tag-nav { gap: 8px; } .tag-nav a { padding: 4px 10px; font-size: 13px; } .card { padding: 15px; } .pagination a { padding: 5px 10px; font-size: 13px; } .jump-page input { width: 50px; } #backTop { right: 15px; bottom: 20px; padding: 10px 12px; font-size: 13px; } #mdContainer img{ max-width: 100%; height: auto; margin: 0 auto; display: block; }}@media (max-width: 480px) { .search-input { width: 150px; } .jump-page { margin-left: 6px; }}.article-toc { position: fixed; top: 105px; right: 15px; width: 300px; max-width: 300px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 15px; max-height: 70vh; overflow-y: auto; z-index: 900;}.toc-title { font-size: 16px; font-weight: bold; color: var(--p); padding-bottom: 8px; border-bottom: 1px solid #eee; margin-bottom: 10px;}#tocList a { display: block; font-size: 14px; color: #333; line-height: 2; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s;}#tocList a:hover { color: var(--p);}@media (min-width: 1024px) { .article-detail .container.main { padding-right: 340px; }}@media (max-width: 1023px) { .article-toc { display: none; }}.article-img { max-width: 100%; height: auto; cursor: zoom-in; border-radius: 6px; margin: 10px 0;}.img-preview { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 1000; align-items: center; justify-content: center; padding: 20px;}.img-preview img { max-width: 90%; max-height: 90%; object-fit: contain;}.preview-close { position: absolute; top: 20px; right: 30px; font-size: 36px; color: #fff; cursor: pointer; user-select: none;}@media (max-width: 768px) { .preview-close { font-size: 28px; right: 20px; }}