:root { --ink:#1f342b; --muted:#6b7e74; --line:#dce9e2; --brand:#338d6e; --wash:#f3faf6; --danger:#b64f4f; }
* { box-sizing:border-box; }
body { margin:0; background:#f7faf8; color:var(--ink); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 max(20px, calc((100vw - 1120px) / 2)); border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); position:sticky; top:0; z-index:5; }
.brand { color:var(--brand); font-size:18px; font-weight:700; white-space:nowrap; }
nav { display:flex; gap:18px; color:#496257; } nav a:hover { color:var(--brand); }
.shell { max-width:960px; margin:0 auto; padding:36px 20px 72px; }
.hero { padding:30px 32px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#287b60,#66b18d); box-shadow:0 14px 40px rgba(31,88,65,.18); }
.hero h1 { margin:0 0 8px; font-size:30px; }.hero p { margin:0; opacity:.92; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:40px; padding:8px 16px; border:1px solid transparent; border-radius:10px; background:var(--brand); color:#fff; font:inherit; cursor:pointer; }
.button:hover { filter:brightness(.96); }.button.secondary { background:#fff; color:var(--brand); }.button.ghost { background:transparent; color:var(--brand); border-color:var(--line); }.button.danger { background:var(--danger); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:34px 0 14px; }.section-head h2 { margin:0; font-size:21px; }
.hint,.meta { color:var(--muted); font-size:13px; }.notice { padding:12px 14px; border-radius:10px; background:#fff4dd; color:#72551b; }.error { color:#a43b3b; }
.list { display:grid; gap:12px; }.card { padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 5px 18px rgba(29,70,52,.035); }.card h3 { margin:5px 0 6px; font-size:18px; }.card p { margin:0; color:#51665c; }.card:hover { border-color:#a7cfbb; }
.editor { max-width:760px; margin:0 auto; padding:28px; border:1px solid var(--line); border-radius:18px; background:#fff; }.editor h1 { margin-top:0; }.field { display:grid; gap:6px; margin:18px 0; }.field label { font-weight:600; }.field input,.field textarea,.field select { width:100%; border:1px solid #c8d9d0; border-radius:10px; padding:10px 12px; color:var(--ink); background:#fff; font:inherit; }.field textarea { min-height:220px; resize:vertical; }.field .short { min-height:86px; }.status { min-height:22px; margin-top:12px; }.editor-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.empty { padding:32px; text-align:center; color:var(--muted); border:1px dashed #b7d1c3; border-radius:14px; }.content { max-width:760px; margin:0 auto; padding:32px; border:1px solid var(--line); border-radius:18px; background:#fff; }.content h1 { margin-top:8px; line-height:1.35; }.content .body { white-space:pre-wrap; word-break:break-word; color:#385044; }.content-actions { display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }.comments { max-width:760px; margin:24px auto 0; }.comments h2 { font-size:20px; }.comment-list { display:grid; gap:10px; }.comment { padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; }.comment p { margin:6px 0 0; white-space:pre-wrap; word-break:break-word; }.comment-editor { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; }.comment-editor textarea { width:100%; min-height:92px; resize:vertical; border:1px solid #c8d9d0; border-radius:10px; padding:10px 12px; color:var(--ink); font:inherit; }.comment-editor .editor-footer { margin-top:10px; }
.login-required { margin:0 auto; max-width:560px; padding:28px; border:1px solid var(--line); border-radius:16px; background:#fff; text-align:center; }
.composer { max-width:980px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; }.composer-head { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid var(--line); }.composer-head h1 { margin:0; font-size:22px; }.close-link { font-size:30px; color:var(--muted); }.editor-form { padding:28px; }.editor-form input { width:100%; border:0; border-bottom:1px solid var(--line); padding:12px 0 16px; font-size:28px; font-weight:600; outline:0; }.editor-form textarea { width:100%; min-height:360px; border:0; padding:22px 0; resize:vertical; outline:0; color:var(--ink); font:16px/1.8 inherit; }.post .editor-form textarea { min-height:180px; }.editor-toolbar { display:flex; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }.editor-toolbar button { min-width:38px; border:0; border-radius:6px; background:#f1f5f3; padding:7px 10px; cursor:pointer; }.image-uploader { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 0; }.image-add { border:1px dashed #87bba5; border-radius:10px; padding:12px; background:#f5fbf7; color:var(--brand); cursor:pointer; }.image-preview-list { display:flex; flex-wrap:wrap; gap:10px; }.image-preview { position:relative; width:92px; height:92px; margin:0; }.image-preview img { width:100%; height:100%; border-radius:9px; object-fit:cover; }.image-remove { position:absolute; right:-7px; top:-7px; width:22px; height:22px; border:0; border-radius:50%; background:#42564d; color:#fff; cursor:pointer; }.publish-settings { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 0; border-top:1px solid var(--line); }.publish-settings select { border:1px solid var(--line); border-radius:8px; padding:8px; }.composer-foot { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-top:18px; }.composer-foot .status { margin-right:auto; }
@media (max-width:640px) { .topbar { height:auto; align-items:flex-start; flex-direction:column; gap:7px; padding:13px 20px; } nav { width:100%; justify-content:space-between; gap:8px; font-size:13px; }.shell { padding:24px 16px 48px; }.hero,.editor,.content { padding:22px; }.hero h1 { font-size:25px; } }