:root { --eco-ink:#10263b; --eco-muted:#647b90; --eco-line:#dbe7ed; --eco-blue:#1169d7; --eco-green:#128262; --eco-bg:#f5f9fc; }
* { box-sizing:border-box; }
body.eco-page { margin:0; background:var(--eco-bg); color:var(--eco-ink); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
.eco-page [hidden] { display:none !important; }
.eco-page button,.eco-page input,.eco-page textarea,.eco-page select { font:inherit; }
.eco-page button { cursor:pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eco-skip { position:fixed; top:7px; left:7px; z-index:100; transform:translateY(-160%); padding:8px 12px; background:#fff; color:var(--eco-blue); }
.eco-skip:focus { transform:translateY(0); }
.eco-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:80px; padding:5px max(24px,calc((100vw - 1280px)/2)); background:#fff; border-bottom:1px solid #e2ebf1; }
.eco-topbar nav { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.eco-topbar nav a { display:inline-flex; align-items:center; min-height:38px; padding:0 13px; color:#526b82; text-decoration:none; font-size:13px; font-weight:700; }
.eco-topbar nav a:hover { color:var(--eco-blue); }
.eco-topbar nav .eco-nav-primary { border:1px solid #8bb7f2; border-radius:9px; color:var(--eco-blue); }
#ecoMain { width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:28px 0 72px; }
.eco-hero { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:232px; overflow:hidden; padding:35px 52px; border:1px solid #cddfeb; border-radius:22px; background:radial-gradient(circle at 77% 18%,rgba(105,220,192,.23),transparent 33%),linear-gradient(112deg,#fff 0%,#eaf6ff 55%,#ebf9f5 100%); box-shadow:0 17px 46px rgba(48,97,129,.07); }
.eco-hero::after { content:""; position:absolute; right:-30px; bottom:-125px; width:420px; height:420px; border:1px solid rgba(18,130,98,.15); border-radius:50%; }
.eco-eyebrow { display:block; color:var(--eco-green); font-size:11px; font-weight:900; letter-spacing:.13em; }
.eco-hero h1 { margin:9px 0 13px; font-size:clamp(38px,4vw,57px); line-height:1.1; letter-spacing:.06em; }
.eco-hero p { max-width:670px; margin:0; color:#59748a; font-size:16px; line-height:1.8; }
.eco-hero-symbol { position:relative; z-index:1; flex:0 0 190px; height:150px; margin-right:30px; border:1px solid #a8d9d3; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 0 22px rgba(255,255,255,.25),0 0 0 46px rgba(155,219,211,.12); }
.eco-hero-symbol strong { position:absolute; inset:0; display:grid; place-content:center; color:#157b7b; text-align:center; font-size:23px; line-height:1.35; letter-spacing:.15em; }
.eco-hero-symbol i { position:absolute; width:19px; height:19px; border:3px solid #fff; border-radius:50%; background:#32b9aa; box-shadow:0 2px 12px rgba(16,117,111,.2); }
.eco-hero-symbol i:nth-child(1) { top:-5px; left:40px; } .eco-hero-symbol i:nth-child(2) { top:22px; right:-6px; background:#3d9df2; } .eco-hero-symbol i:nth-child(3) { bottom:9px; left:-5px; background:#3d9df2; } .eco-hero-symbol i:nth-child(4) { bottom:-7px; right:54px; }
.eco-channels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:20px 0 23px; }
.eco-channels button { display:flex; align-items:center; gap:12px; min-width:0; min-height:98px; padding:15px; border:1px solid var(--eco-line); border-radius:16px; background:#fff; text-align:left; box-shadow:0 8px 26px rgba(41,86,116,.04); transition:transform .18s,border-color .18s,box-shadow .18s; }
.eco-channels button:hover { transform:translateY(-2px); border-color:#91c8bb; }
.eco-channels button.is-active { border-color:#7dc9b1; background:linear-gradient(145deg,#fafffd,#edf9f5); box-shadow:0 9px 23px rgba(23,139,99,.1); }
.eco-channel-icon { display:grid; flex:0 0 43px; height:43px; place-content:center; border-radius:13px; background:#e9f4ff; color:var(--eco-blue); font-size:25px; font-weight:600; }
.eco-channels button.is-active .eco-channel-icon { background:#dff5eb; color:var(--eco-green); }
.eco-channels strong { display:block; font-size:16px; line-height:1.3; } .eco-channels small { display:block; margin-top:5px; color:#70889a; font-size:11px; line-height:1.45; }
.eco-layout { display:grid; grid-template-columns:minmax(0,1fr) 274px; gap:19px; align-items:start; }
.eco-main-panel,.eco-side section { min-width:0; border:1px solid var(--eco-line); border-radius:18px; background:#fff; box-shadow:0 12px 34px rgba(39,79,106,.045); }
.eco-main-panel { padding:29px; }
.eco-section-head,.eco-subhead { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.eco-section-head h2 { margin:5px 0 6px; font-size:27px; } .eco-section-head p { margin:0; color:var(--eco-muted); font-size:12px; line-height:1.6; }
.eco-button { display:inline-flex; align-items:center; justify-content:center; min-height:39px; padding:0 16px; border-radius:9px; font-size:12px !important; font-weight:800 !important; white-space:nowrap; }
.eco-button-primary { border:1px solid var(--eco-blue); background:var(--eco-blue); color:#fff; } .eco-button-primary:hover { background:#075ac2; }
.eco-button-quiet { border:1px solid #d0deeb; background:#fff; color:#31546e; } .eco-button-quiet:hover { border-color:#91b7d8; color:var(--eco-blue); }
.eco-text-button { padding:3px 0; border:0; background:none; color:var(--eco-blue); font-size:12px !important; font-weight:800 !important; }
.eco-text-button:hover { text-decoration:underline; }
.eco-toolbar { display:flex; align-items:center; gap:9px; margin:24px 0 14px; padding:11px; border-radius:12px; background:#f3f8fa; }
.eco-search { flex:1; min-width:140px; } .eco-toolbar input,.eco-toolbar select { width:100%; height:40px; padding:0 11px; border:1px solid #d3e0e8; border-radius:8px; outline:none; background:#fff; color:var(--eco-ink); font-size:12px; }
.eco-toolbar select { width:128px; }
.eco-page input:focus,.eco-page textarea:focus,.eco-page select:focus { border-color:#6eabea; box-shadow:0 0 0 3px rgba(17,105,215,.09); }
.eco-toolbar .eco-text-button { margin:0 6px; }
.eco-feed-summary { display:flex; align-items:center; justify-content:space-between; padding:0 3px 10px; color:#718598; font-size:12px; }
.eco-post-list { display:grid; gap:11px; }
.eco-post { padding:20px; border:1px solid #e0e9ee; border-radius:13px; background:#fff; transition:border-color .16s,box-shadow .16s; }
.eco-post:hover { border-color:#add5cb; box-shadow:0 8px 22px rgba(33,90,81,.07); }
.eco-post-top,.eco-post-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eco-tag-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.eco-post-tag { padding:5px 8px; border-radius:5px; background:#e8f5ef; color:var(--eco-green); font-size:10px; font-weight:800; }
.eco-post-tag.legacy { background:#edf2fb; color:#4c6eaa; }
.eco-tag-intent { background:#eaf3ff; color:#1462ae; }
.eco-tag-progress { background:#fff5e8; color:#925413; }
.eco-post time,.eco-post-foot { color:#8294a2; font-size:11px; }
.eco-post h3 { margin:11px 0 7px; font-size:17px; line-height:1.45; } .eco-post h3 button,.eco-post h3 a { padding:0; border:0; background:none; color:#18344a; font-size:inherit; font-weight:800; text-align:left; text-decoration:none; cursor:pointer; }
.eco-post h3 button:hover,.eco-post h3 a:hover { color:var(--eco-blue); }
.eco-post p { margin:0; overflow:hidden; color:#6e8190; font-size:12px; line-height:1.7; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.eco-post-foot { margin-top:15px; padding-top:11px; border-top:1px solid #edf2f4; }
.eco-post-foot span+span { margin-left:12px; } .eco-post-foot button,.eco-post-foot a { padding:0; border:0; background:none; color:var(--eco-blue); font-weight:800; text-decoration:none; }
.eco-empty { display:grid; min-height:215px; place-content:center; justify-items:center; gap:8px; padding:28px; border:1px dashed #c9ded8; border-radius:13px; background:#fbfefd; text-align:center; }
.eco-empty strong { font-size:17px; } .eco-empty span { color:var(--eco-muted); font-size:12px; line-height:1.6; }
.eco-pagination { display:flex; justify-content:center; gap:10px; padding-top:17px; }
.eco-side { display:grid; gap:13px; } .eco-side section { padding:22px; } .eco-side h3 { margin:8px 0 11px; font-size:17px; } .eco-side p { margin:0; color:var(--eco-muted); font-size:12px; line-height:1.75; }
.eco-guide-divider { height:1px; margin:16px 0; background:#e4edf0; } .eco-notice-button { width:100%; }
.eco-publish { margin:24px 0 0; padding:23px; border:1px solid #b9d9d1; border-radius:14px; background:#f9fffc; }
.eco-subhead h3 { margin:5px 0; font-size:19px; } .eco-icon-button { width:29px; height:29px; border:0; border-radius:7px; background:#edf4f5; color:#385e6e; font-size:21px !important; }
.eco-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:17px 0 13px; }
.eco-field { display:grid; gap:6px; margin-top:12px; color:#315069; font-size:12px; font-weight:800; }
.eco-field b { color:#db5353; } .eco-field input,.eco-field textarea,.eco-field select { width:100%; min-height:41px; padding:10px 12px; border:1px solid #cfdfe5; border-radius:8px; outline:none; background:#fff; color:var(--eco-ink); font-size:13px; font-weight:400; line-height:1.55; }
.eco-field textarea { resize:vertical; } .eco-form-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:17px; }
.eco-form-bottom p { margin:0; color:#789098; font-size:11px; line-height:1.5; } .eco-form-message { margin:11px 0 0; min-height:18px; color:#ba5828; font-size:12px; }
.eco-detail { margin-top:24px; border-top:1px solid #e7eff2; padding-top:18px; } .eco-detail article { margin-top:14px; } .eco-detail h2 { margin:9px 0 12px; font-size:26px; line-height:1.4; }
.eco-detail-meta { color:var(--eco-muted); font-size:11px; } .eco-detail-body { margin:19px 0; color:#334f63; font-size:14px; line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; }
.eco-detail-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; } .eco-detail-fields div { padding:11px 13px; border-radius:8px; background:#f4f8fa; } .eco-detail-fields small { display:block; color:#788d9b; font-size:10px; } .eco-detail-fields strong,.eco-detail-fields a { display:block; margin-top:3px; color:#2d4b60; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.eco-progress-control { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:17px 0; padding:10px 12px; border:1px solid #dce9e5; border-radius:9px; background:#f8fcfa; color:#315069; font-size:12px; font-weight:700; }
.eco-progress-control select,.eco-moderation-toolbar select { min-height:36px; margin-left:6px; padding:0 9px; border:1px solid #cfdfe5; border-radius:7px; background:#fff; color:var(--eco-ink); }
.eco-closed-note { padding:12px; border-radius:8px; background:#f5f8fa; color:#62798a; font-size:12px; }
.eco-discussion { border-top:1px solid #e7eef2; padding-top:18px; } .eco-discussion .eco-subhead span { color:#8294a2; font-size:12px; } #ecoCommentList { display:grid; gap:11px; margin:17px 0; }
.eco-comment { padding:14px; border:1px solid #e2eaee; border-radius:10px; } .eco-comment.is-reply { margin:8px 0 0 24px; border-color:#eaf0f2; background:#f7fafb; }
.eco-comment header { display:flex; align-items:center; gap:10px; color:#38586e; font-size:12px; } .eco-comment time { color:#9aabb5; font-size:10px; } .eco-comment p { margin:8px 0; color:#526b7c; font-size:12px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.eco-comment-form { margin-top:18px; padding:16px; border-radius:11px; background:#f6fafc; } .eco-comment-actions { display:flex; justify-content:flex-end; align-items:center; gap:15px; margin-top:11px; }
.eco-notice-item { display:block; width:100%; margin-top:8px; padding:10px; border:1px solid #e1ebef; border-radius:8px; background:#fff; color:#36546a; text-align:left; font-size:11px !important; line-height:1.5; } .eco-notice-item.is-unread { border-color:#abd9c9; background:#f2fbf6; }
.eco-report-dialog { width:min(500px,calc(100vw - 28px)); max-height:90vh; padding:24px; border:1px solid #d3e3e8; border-radius:15px; box-shadow:0 25px 70px rgba(18,45,67,.18); color:var(--eco-ink); }
.eco-report-dialog::backdrop { background:rgba(15,39,57,.45); }
.eco-report-dialog h2 { margin:0 0 8px; font-size:22px; }
.eco-report-dialog p { margin:0; color:var(--eco-muted); font-size:12px; line-height:1.65; }
.eco-moderation { margin:0 0 20px; padding:25px; border:1px solid var(--eco-line); border-radius:18px; background:#fff; }
.eco-moderation .eco-subhead h2 { margin:6px 0 0; font-size:23px; }
.eco-moderation-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0; color:#46667a; font-size:12px; }
.eco-report-meta { margin:11px 0 0; color:#74899a; font-size:11px; line-height:1.5; }
.eco-report-explanation { margin-top:9px !important; color:#3e6175 !important; -webkit-line-clamp:unset !important; }
.eco-report-note { width:100%; min-height:65px; margin-top:12px; padding:10px; border:1px solid #d1e0e8; border-radius:8px; resize:vertical; font-size:12px; }
.eco-report-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
@media(max-width:1030px) { .eco-layout { grid-template-columns:1fr; } .eco-side { grid-template-columns:1fr 1fr; } .eco-notice-button { grid-column:1/-1; } .eco-channels { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:880px) { .eco-toolbar { flex-wrap:wrap; } .eco-search { flex-basis:100%; } .eco-toolbar select { flex:1; width:auto; } }
@media(max-width:660px) { .eco-topbar { min-height:68px; padding:8px 14px; } .eco-topbar nav a:not(.eco-nav-primary) { display:none; } .eco-topbar nav .eco-nav-primary { padding:0 8px; font-size:11px; } #ecoMain { width:calc(100% - 24px); padding:14px 0 44px; } .eco-hero { min-height:170px; padding:24px; border-radius:16px; } .eco-hero h1 { font-size:37px; } .eco-hero p { font-size:13px; } .eco-hero-symbol { display:none; } .eco-channels { gap:8px; margin:12px 0; } .eco-channels button { min-height:79px; gap:8px; padding:10px; border-radius:11px; } .eco-channel-icon { flex-basis:30px; height:30px; font-size:19px; border-radius:8px; } .eco-channels strong { font-size:13px; } .eco-channels small { font-size:10px; } .eco-main-panel { padding:17px 13px; border-radius:13px; } .eco-section-head { align-items:flex-start; } .eco-section-head h2 { font-size:23px; } .eco-section-head .eco-button { min-height:35px; padding:0 9px; } .eco-toolbar { flex-wrap:wrap; padding:8px; gap:7px; } .eco-search { flex-basis:100%; } .eco-toolbar select { flex:1; width:auto; } .eco-toolbar .eco-text-button { margin-left:auto; } .eco-post { padding:15px; } .eco-post-foot { align-items:flex-start; } .eco-post-foot span+span { margin-left:5px; } .eco-side { grid-template-columns:1fr; } .eco-publish { padding:14px; } .eco-field-grid,.eco-detail-fields { grid-template-columns:1fr; gap:0; } .eco-form-bottom { align-items:stretch; flex-direction:column; } .eco-comment.is-reply { margin-left:13px; } .eco-moderation { padding:16px; } }