.home-articles { max-width:1280px; margin:35px auto 0; }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.section-more { color:#6f8979; font-size:11px; }.section-more:hover { color:#24785c; text-decoration:none; }
.article-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:22px; color:#83948a; font-size:11px; }.article-pagination a { padding:8px 12px; color:#527565; border:1px solid #dce6df; border-radius:7px; }.article-pagination a:hover { color:#24785c; border-color:#b9cfc0; text-decoration:none; }
.article-card { display:flex; flex-direction:column; min-height:125px; padding:18px 20px; background:#fff; border:1px solid #e4eae6; border-radius:11px; color:#30463b; transition:transform .18s,box-shadow .18s,border-color .18s; }
.article-card:hover { color:#30463b; text-decoration:none; transform:translateY(-3px); border-color:#b9cfc0; box-shadow:0 9px 22px #203e3210; }
.article-card small { color:#7d9786; font-size:9px; letter-spacing:1.4px; text-transform:uppercase; }
.article-card h3 { margin:2px 0 7px; font-size:16px; line-height:1.5; font-weight:600; }
.article-card p { color:#7c8b82; font-size:11px; line-height:1.8; margin:0 0 10px; }
.article-card > span { margin-top:auto; color:#24785c; font-size:10px; }
.article-empty { grid-column:1/-1; padding:30px; color:#8b9991; text-align:center; background:#fff; border:1px dashed #dce5df; border-radius:11px; }
.help-section { margin-top:35px; }
.help-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.help-tabs button { padding:7px 14px; color:#718279; background:#fff; border:1px solid #dce6df; border-radius:999px; font-size:12px; line-height:1.3; cursor:pointer; transition:color .18s,background .18s,border-color .18s; }
.help-tabs button:hover { color:#24785c; border-color:#b9cfc0; }
.help-tabs button.active { color:#fff; background:#24785c; border-color:#24785c; }
.help-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.help-card { display:flex; align-items:center; gap:15px; min-width:0; padding:18px 20px; color:#30463b; background:#fff; border:1px solid #e4eae6; border-radius:10px; transition:transform .18s,border-color .18s; }
.help-card[hidden] { display:none; }
.help-card:hover { color:#30463b; text-decoration:none; transform:translateY(-2px); border-color:#b9cfc0; }
.help-number { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; color:#24785c; background:#e9f3ec; border-radius:9px; font-weight:700; }
.help-card > div { min-width:0; flex:1; }
.help-card h3 { margin:0; font-size:14px; font-weight:600; }
.help-card p { margin:0; color:#87948d; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.help-card b { color:#7e9888; font-size:12px; }
.friend-links { max-width:1280px; margin:30px auto 0; padding-top:18px; border-top:1px solid #e3ebe5; }.friend-links > div { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; }.friend-links a { color:#71877a; font-size:11px; }.friend-links a:hover { color:#24785c; }
.workspace #side-menu .sidebar-article-heading { padding:18px 14px 7px; color:#9aa69f; font-size:11px; letter-spacing:2px; }
.workspace #side-menu .sidebar-article-link { padding-top:9px; padding-bottom:9px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.article-page { color:#263d34; background:#f5f7f6; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.article-page #page-wrapper { padding:0 40px 145px; min-height:100vh; }
.article-topline { max-width:1280px; margin:auto; height:82px; display:flex; align-items:center; gap:12px; color:#9aa69f; font-size:12px; }
.article-list-page .home-articles { margin-top:0; }
.article-topline a { color:#708178; }
.article-shell { max-width:1280px; margin:auto; padding:52px 68px 70px; background:#fff; border:1px solid #e4eae6; border-radius:16px; box-shadow:0 14px 35px #203e3208; }
.article-shell header { padding-bottom:30px; margin-bottom:34px; border-bottom:1px solid #edf1ee; }
.article-shell h1 { margin:12px 0 15px; font-size:34px; line-height:1.35; font-weight:650; }
.article-meta { margin:0; color:#99a59e; font-size:11px; }
.article-content { color:#405249; font-size:15px; line-height:1.95; overflow-wrap:anywhere; }
.article-content h2,.article-content h3 { color:#263d34; margin:1.7em 0 .7em; line-height:1.45; }
.article-content p { margin:0 0 1.25em; }
.article-content img { display:block; max-width:100%; height:auto; margin:25px auto; border-radius:10px; }
.article-content a { color:#24785c; text-decoration:underline; text-underline-offset:3px; }
.article-content blockquote { margin:25px 0; padding:14px 20px; color:#62766a; background:#f3f7f4; border-left:4px solid #77a188; }
.article-back { max-width:1280px; margin:24px auto 0; }
.article-back a { color:#6f8478; font-size:12px; }
.article-app-download { position:fixed; z-index:20; left:calc(230px + (100vw - 230px) / 2); bottom:20px; width:min(1280px,calc(100vw - 270px)); margin:0; padding:17px 20px; display:flex; align-items:center; gap:15px; color:#365348; background:#fbfdfb; border:1px solid #dce8e0; border-radius:13px; box-shadow:0 12px 30px #234b3826; transform:translateX(-50%); }
.article-app-download:hover { color:#365348; text-decoration:none; border-color:#bdd2c5; }
.article-app-download img { width:48px; height:48px; border-radius:11px; }
.article-app-download > span { display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; }
.article-app-download strong { font-size:13px; }.article-app-download small { color:#688072; font-size:11px; }
.article-app-download > b { padding:11px 18px; color:#fff; background:#24785c; border-radius:8px; font-size:12px; white-space:nowrap; }
.article-related { max-width:1280px; margin:36px auto 0; }
.related-heading { margin-bottom:16px; }
.related-heading h2 { margin:7px 0 0; font-size:20px; font-weight:600; }
.related-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.related-tool { --accent:#388569; display:block; min-width:0; padding:20px; color:#34483e; background:#fff; border:1px solid #e2e9e4; border-radius:11px; }
.related-tool:hover { color:#34483e; text-decoration:none; border-color:#b9cfc0; transform:translateY(-2px); }
.related-tool > span { color:var(--accent); font-size:9px; letter-spacing:1px; }
.related-tool h3 { margin:10px 0 7px; font-size:14px; }
.related-tool p { min-height:36px; margin:0 0 14px; color:#84928a; font-size:10px; line-height:1.8; }
.related-tool b { color:var(--accent); font-size:10px; font-weight:500; }
.related-tool.amber { --accent:#a78348; }.related-tool.rose { --accent:#b96e6e; }.related-tool.sky { --accent:#6389ad; }.related-tool.teal { --accent:#4f9189; }.related-tool.violet { --accent:#846fa8; }
.related-help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.related-help-grid > a { display:flex; align-items:center; gap:12px; min-width:0; padding:15px 17px; color:#34483e; background:#fff; border:1px solid #e2e9e4; border-radius:9px; }
.related-help-grid > a:hover { color:#24785c; text-decoration:none; border-color:#b9cfc0; }
.related-help-grid > a > span { display:grid; place-items:center; width:29px; height:29px; flex:0 0 29px; color:#24785c; background:#e9f3ec; border-radius:8px; font-weight:700; }
.related-help-grid div { min-width:0; flex:1; }
.related-help-grid h3 { margin:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.related-help-grid p { margin:0; color:#8c9992; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.related-help-grid b { color:#82968a; font-size:10px; }
@media(max-width:1100px) { .help-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .article-grid,.help-grid,.related-tool-grid,.related-help-grid { grid-template-columns:1fr; } .article-page #page-wrapper { padding:0 16px 130px; } .article-topline { height:55px; } .article-shell { padding:30px 22px 42px; border-radius:12px; } .article-shell h1 { font-size:27px; } .article-app-download { left:50%; bottom:12px; width:calc(100vw - 24px); padding:13px 14px; gap:11px; } .article-app-download img { width:44px; height:44px; } .article-app-download strong { font-size:12px; } .article-app-download small { font-size:10px; } .article-app-download > b { padding:10px 13px; font-size:11px; } }