:root{
  --green:#25a85c; --green-d:#1c8a4a; --ink:#2b2b2b; --muted:#888;
  --line:#e6e6e6; --bg:#f7f8f9; --card:#fff; --radius:8px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;font-size:15px;}
a{color:var(--green-d);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px;}
img{max-width:100%;}

/* 顶部 */
.topbar{background:#fff;border-bottom:3px solid var(--green);position:sticky;top:0;z-index:50;}
.top-inner{display:flex;align-items:center;gap:18px;height:60px;flex-wrap:wrap;}
.logo{font-size:24px;font-weight:800;color:var(--green-d);white-space:nowrap;}
.slogan{color:var(--muted);font-size:13px;white-space:nowrap;}
.topnav{display:flex;gap:16px;}
.topnav a{color:var(--ink);font-weight:600;}
.topnav a.active,.topnav a:hover{color:var(--green-d);}
.search{margin-left:auto;display:flex;}
.search input{border:1px solid var(--line);border-right:none;padding:7px 10px;border-radius:6px 0 0 6px;width:180px;outline:none;}
.search button{background:var(--green);color:#fff;border:none;padding:0 14px;border-radius:0 6px 6px 0;cursor:pointer;}

/* 首页 */
.home{display:flex;gap:24px;padding:24px 16px;align-items:flex-start;}
.home-main{flex:1;min-width:0;}
.home-side{width:300px;flex:none;}
.group{margin-bottom:28px;}
.group>h2{font-size:19px;border-left:4px solid var(--green);padding-left:10px;margin:0 0 14px;}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.gcard h3{margin:0 0 8px;font-size:16px;}
.gcard h3 a{color:var(--ink);}
.gcard ul{margin:0;padding-left:18px;}
.gcard ul li{margin:3px 0;}
.more{display:inline-block;margin-top:8px;font-size:13px;color:var(--green-d);}

/* 教程列表页 */
.tutpage{display:flex;gap:24px;padding:24px 16px;align-items:flex-start;}
.layout{display:flex;gap:24px;width:100%;align-items:flex-start;}
.sidebar{width:230px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;position:sticky;top:76px;}
.sb-title{font-weight:700;margin-bottom:8px;color:var(--muted);font-size:13px;}
.sb-cat{margin:6px 0;}
.sb-cat>a{font-weight:600;color:var(--ink);}
.sb-cat-active>a{color:var(--green-d);}
.sb-list{list-style:none;margin:4px 0 6px;padding-left:14px;}
.sb-list li{margin:3px 0;}
.sb-list li.cur a{color:var(--green-d);font-weight:700;}
.content{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;}
.page-title{font-size:26px;margin:0 0 12px;}
.cat-desc{color:var(--muted);margin-bottom:16px;}
.tut-list{list-style:none;padding:0;margin:0;}
.tut-list.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.tut-list.cards li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.tut-list.cards li a{font-weight:700;font-size:16px;color:var(--ink);}
.tut-list.cards li p{margin:6px 0 0;color:var(--muted);font-size:13px;}
.tut-list:not(.cards) li{border-bottom:1px dashed var(--line);padding:10px 0;}
.empty{color:var(--muted);}

/* 教程正文 */
.tut h1{font-size:28px;margin:0 0 12px;}
.tut .lead{color:var(--muted);font-size:16px;margin-bottom:18px;}
.tut h2{border-left:4px solid var(--green);padding-left:10px;margin-top:28px;}
.tut h3{margin-top:20px;}
.tut pre{background:#2d2d2d;color:#f8f8f2;padding:14px;border-radius:6px;overflow:auto;font-size:13px;}
.tut code{background:#eef3ee;padding:2px 5px;border-radius:4px;font-family:Consolas,Menlo,monospace;font-size:13px;}
.tut pre code{background:none;padding:0;color:inherit;}
.tut blockquote{border-left:4px solid var(--green);background:#f1f8f3;margin:14px 0;padding:8px 14px;color:#555;}
.tut table.md-table{border-collapse:collapse;margin:14px 0;width:100%;}
.tut table.md-table th,.tut table.md-table td{border:1px solid var(--line);padding:6px 10px;}
.tut table.md-table th{background:#f3f7f4;}
.tut ul,.tut ol{padding-left:22px;}
.in-ad{margin:18px 0;}
.tut-meta{margin-top:24px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:12px;}

/* 广告位 */
.ad-box{background:#fff;border:1px dashed #cfd8d0;border-radius:6px;padding:16px;text-align:center;color:var(--muted);font-size:13px;margin-bottom:16px;}
.ad-top{border:none;background:#eef7f1;color:var(--green-d);}

/* 打赏 */
.donate-fab{position:fixed;right:22px;bottom:28px;background:var(--green);color:#fff;border:none;border-radius:30px;padding:12px 22px;font-size:15px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:80;}
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:90;}
.modal-box{background:#fff;border-radius:12px;padding:26px 30px;max-width:460px;width:90%;position:relative;text-align:center;}
.modal-close{position:absolute;right:12px;top:8px;border:none;background:none;font-size:24px;cursor:pointer;color:#aaa;}
.qr-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.qr img{width:160px;height:160px;object-fit:contain;border:1px solid var(--line);border-radius:8px;}
.qr h4{margin:8px 0 0;font-size:14px;}
.pp{margin-top:14px;}

/* 页脚 */
.site-foot{background:#fff;border-top:1px solid var(--line);margin-top:30px;padding:22px 0;color:var(--muted);font-size:13px;text-align:center;}
.foot-links a{color:var(--muted);margin:0 4px;}

@media(max-width:860px){
  .home,.tutpage{flex-direction:column;}
  .home-side,.sidebar{width:100%;position:static;}
  .layout{flex-direction:column;}
  .slogan{display:none;}
}