:root {
  --ink: #151816; --muted: #717773; --paper: #eef2ec; --card: #f8faf7;
  --green: #087c50; --lime: #c9ff78; --line: rgba(16,32,23,.1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing: antialiased; }
button,input,textarea,select { font: inherit; } button { cursor: pointer; }
.cursor-glow { position: fixed; z-index: -1; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; opacity: .18; filter: blur(35px); background: radial-gradient(circle,#a6ee79,transparent 68%); transform: translate(-50%,-50%); transition: opacity .3s; }
.community-header { position: sticky; top: 12px; z-index: 20; width: min(1180px,calc(100% - 28px)); height: 62px; margin: 12px auto 0; padding: 0 12px 0 17px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; background: rgba(248,250,247,.78); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 12px 35px rgba(31,55,40,.08); }
.community-logo { display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:700; }
.community-logo i { width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:#173524;background:var(--lime);font-style:normal;font-weight:850;box-shadow:0 7px 18px rgba(81,139,57,.18); }
.community-logo b { color:var(--muted);font-weight:500; }
.community-header nav { display:flex;gap:4px;padding:4px;border-radius:99px;background:#e7ebe5; }
.nav-pill { border:0;border-radius:99px;padding:8px 17px;color:var(--muted);background:transparent;font-size:11px;font-weight:650; }
.nav-pill.active { color:var(--ink);background:white;box-shadow:0 3px 12px rgba(0,0,0,.06); }
.header-user { display:flex;align-items:center;gap:7px; }
.quick-publish { border:0;border-radius:99px;padding:10px 14px;color:white;background:var(--ink);font-size:11px;font-weight:650; }
.mini-profile { max-width:135px;padding:4px 9px 4px 4px;display:flex;align-items:center;gap:7px;border:0;border-radius:99px;background:#e9eee7; }
.mini-profile span { width:29px;height:29px;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:white;background:var(--green);font-size:10px; }
.mini-profile span img,.avatar-editor span img,.comment-avatar img,.post-avatar img { width:100%;height:100%;object-fit:cover; }
.mini-profile b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; }
main { width:min(1180px,calc(100% - 28px));margin:0 auto; }
.app-view { display:none;padding:70px 0 120px; }.app-view.active { display:block; }
.community-hero { min-height:360px;padding:58px 65px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative;border-radius:38px;color:white;background:radial-gradient(circle at 83% 18%,rgba(203,255,125,.5),transparent 25%),linear-gradient(135deg,#071b14,#07583b 58%,#15915f);box-shadow:0 30px 80px rgba(17,75,47,.16); }
.community-hero::after { content:"";position:absolute;width:520px;height:520px;right:-190px;bottom:-340px;border:1px solid rgba(207,255,151,.2);border-radius:50%;box-shadow:0 0 0 80px rgba(207,255,151,.04),0 0 0 160px rgba(207,255,151,.03); }
.hero-label,.section-title span,.page-heading>span,.profile-copy>span,.dialog-top span { color:var(--lime);font-size:10px;font-weight:750;letter-spacing:1.9px; }
.community-hero h1 { margin:18px 0 15px;font-size:clamp(45px,5.5vw,76px);line-height:1.02;letter-spacing:-.065em; }
.community-hero h1 em { color:var(--lime);font-style:normal; }.community-hero p { margin:0;color:rgba(255,255,255,.6);font-size:15px; }
.level-orb { position:relative;z-index:2;width:185px;height:185px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(15px);box-shadow:inset 0 0 45px rgba(205,255,139,.07),0 25px 60px rgba(0,0,0,.18);animation:float 5s ease-in-out infinite; }
.level-orb span,.level-orb small { color:rgba(255,255,255,.62);font-size:9px;letter-spacing:1.3px; }.level-orb strong { margin:5px 0;color:var(--lime);font-size:65px;line-height:1;letter-spacing:-.08em; }
.board-section,.timeline-section { padding-top:105px; }
.section-title { display:flex;align-items:end;justify-content:space-between;margin-bottom:32px; }
.section-title span,.page-heading>span,.profile-copy>span { color:var(--green); }.section-title h2 { margin:8px 0 0;font-size:42px;letter-spacing:-.05em; }.section-title p { margin:0;color:var(--muted);font-size:12px; }
.board-bento { display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:235px;gap:15px; }
.board-card { position:relative;padding:27px;display:flex;flex-direction:column;border:0;border-radius:29px;text-align:left;overflow:hidden;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px rgba(17,42,26,.04);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s; }
.board-card:hover { transform:translateY(-8px) scale(1.012);box-shadow:0 28px 55px rgba(30,57,40,.13); }
.board-card:nth-child(1) { grid-column:span 2;grid-row:span 2;color:white;background:linear-gradient(145deg,#101412,#29302c); }
.board-card:nth-child(2) { grid-column:span 2;background:linear-gradient(135deg,#dcecfb,#c4ddf3); }
.board-card:nth-child(3) { background:linear-gradient(135deg,#dff4bd,#c9ec91); }
.board-card:nth-child(4) { background:linear-gradient(145deg,#ffe4c3,#f8c88e); }
.board-card:nth-child(5) { background:linear-gradient(145deg,#e7dcf5,#d4bfed); }
.board-card:nth-child(6) { background:#0b704b;color:white; }
.board-icon { width:43px;height:43px;display:grid;place-items:center;border-radius:14px;color:var(--green);background:rgba(255,255,255,.72);font-size:17px; }
.board-card:nth-child(1) .board-icon,.board-card:nth-child(6) .board-icon { color:#193524;background:var(--lime); }
.board-card h3 { margin:auto 0 8px;font-size:25px;letter-spacing:-.04em; }.board-card:nth-child(1) h3 { font-size:43px; }
.board-card p { margin:0;color:var(--muted);font-size:11px; }.board-card:nth-child(1) p,.board-card:nth-child(6) p { color:rgba(255,255,255,.6); }
.board-meta { position:absolute;right:25px;top:27px;color:var(--muted);font-size:9px; }.board-card:nth-child(1) .board-meta,.board-card:nth-child(6) .board-meta { color:rgba(255,255,255,.55); }
.board-latest { margin-top:17px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650; }.board-card:nth-child(1) .board-latest,.board-card:nth-child(6) .board-latest { border-color:rgba(255,255,255,.13); }
.feed-list,.board-feed { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }
.feed-card { padding:25px;border:1px solid var(--line);border-radius:25px;background:rgba(249,251,248,.85);transition:transform .3s,box-shadow .3s;cursor:pointer; }
.feed-card:hover { transform:translateY(-4px);box-shadow:0 20px 42px rgba(30,57,40,.1); }
.feed-author { display:flex;align-items:center;gap:9px; }.post-avatar,.comment-avatar { width:35px;height:35px;display:grid;place-items:center;overflow:hidden;border-radius:12px;color:white;background:var(--green);font-size:10px; }
.feed-author div { display:flex;flex-direction:column; }.feed-author b { font-size:11px; }.feed-author small { margin-top:3px;color:var(--muted);font-size:9px; }
.feed-tag { margin-left:auto;padding:5px 8px;border-radius:99px;color:var(--green);background:#e5f2db;font-size:9px;font-weight:700; }
.feed-card h3 { margin:21px 0 10px;font-size:21px;letter-spacing:-.035em; }.feed-card>p { margin:0;color:var(--muted);font-size:12px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.feed-photo-grid { margin-top:17px;display:grid;gap:5px;overflow:hidden;border-radius:17px; }.feed-photo-grid.one { grid-template-columns:1fr;height:210px; }.feed-photo-grid.two { grid-template-columns:1fr 1fr;height:175px; }.feed-photo-grid.three { grid-template-columns:1.25fr .75fr;grid-template-rows:1fr 1fr;height:190px; }.feed-photo-grid.three img:first-child { grid-row:span 2; }.feed-photo-grid img { width:100%;height:100%;object-fit:cover;background:#dfe5dc;transition:transform .45s; }.feed-card:hover .feed-photo-grid img { transform:scale(1.025); }
.feed-actions { margin-top:20px;padding-top:15px;display:flex;gap:17px;border-top:1px solid var(--line);color:var(--muted);font-size:10px; }.feed-actions span:last-child { margin-left:auto; }
.quiet-button,.back-button { border:1px solid var(--line);border-radius:99px;padding:9px 14px;color:var(--muted);background:transparent;font-size:10px; }
.board-banner { margin:28px 0 35px;padding:48px;border-radius:32px;color:white;background:#111512; }.board-banner span { color:var(--lime);font-size:10px;letter-spacing:1.5px; }.board-banner h1 { margin:13px 0 8px;font-size:55px;letter-spacing:-.06em; }.board-banner p { margin:0;color:rgba(255,255,255,.62); }
.page-heading { padding:45px 0 40px; }.page-heading h1 { margin:11px 0 8px;font-size:58px;letter-spacing:-.06em; }.page-heading p { color:var(--muted); }
.profile-hero { margin-top:20px;padding:45px;display:flex;align-items:center;gap:28px;border-radius:34px;background:#f8faf7; }
.avatar-editor { position:relative;cursor:pointer; }.avatar-editor input { display:none; }.avatar-editor span { width:120px;height:120px;display:grid;place-items:center;overflow:hidden;border-radius:36px;color:white;background:linear-gradient(145deg,#10a36b,#065b3d);font-size:38px;font-weight:750;box-shadow:0 20px 40px rgba(8,125,80,.2); }
.avatar-editor i { position:absolute;left:50%;bottom:-10px;padding:6px 9px;border-radius:99px;transform:translateX(-50%);white-space:nowrap;color:var(--green);background:white;font-size:9px;font-style:normal;box-shadow:0 5px 15px rgba(0,0,0,.1); }
.profile-copy { flex:1; }.profile-copy h1 { margin:8px 0;font-size:43px;letter-spacing:-.055em; }.profile-copy p { color:var(--muted); }.profile-buttons { display:flex;flex-wrap:wrap;gap:7px; }.profile-copy button { border:0;border-radius:99px;padding:9px 13px;color:white;background:var(--green);font-size:10px; }.profile-copy button:nth-child(n+2) { color:var(--green);background:#e5f1de; }
.profile-level { width:150px;height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;color:white;background:#121613; }.profile-level small,.profile-level span { color:rgba(255,255,255,.55);font-size:9px; }.profile-level b { margin:6px 0;color:var(--lime);font-size:32px; }
.activity-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:18px; }.activity-card { padding:24px;border-radius:23px;background:#f8faf7; }.activity-card span { color:var(--muted);font-size:10px; }.activity-card b { display:block;margin-top:8px;font-size:34px;letter-spacing:-.06em; }
.growth-card { margin-top:18px;padding:38px;display:flex;align-items:end;justify-content:space-between;border-radius:29px;color:white;background:linear-gradient(135deg,#07583c,#0a8b5a); }.growth-card span { color:var(--lime);font-size:10px; }.growth-card h2 { max-width:500px;margin:10px 0 0;font-size:30px; }.growth-card ul { margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px;color:rgba(255,255,255,.65);font-size:10px; }.growth-card b { color:var(--lime); }
dialog { padding:0;border:0;border-radius:30px;background:#f6f8f5;box-shadow:0 35px 100px rgba(8,30,18,.3); }.detail-dialog { width:min(920px,calc(100% - 24px));max-height:calc(100vh - 24px); }.detail-dialog::backdrop,.composer-dialog::backdrop,.editor-dialog::backdrop { background:rgba(8,18,12,.55);backdrop-filter:blur(15px); }
.detail-shell { display:grid;grid-template-columns:1.12fr .88fr;min-height:650px; }.detail-content { padding:42px;overflow-y:auto; }.detail-comments { padding:32px;background:#edf1eb;display:flex;flex-direction:column;max-height:780px; }
.dialog-close { float:right;width:35px;height:35px;border:0;border-radius:50%;background:#e7eae6;font-size:19px; }.detail-kicker { color:var(--green);font-size:10px;font-weight:700; }.detail-content h1 { margin:25px 0 15px;font-size:39px;line-height:1.15;letter-spacing:-.05em; }.detail-body { color:#555d58;font-size:14px;line-height:1.85;white-space:pre-wrap; }
.detail-gallery { margin:25px 0 5px;display:grid;gap:7px; }.detail-gallery.one { grid-template-columns:1fr; }.detail-gallery.two,.detail-gallery.three { grid-template-columns:1fr 1fr; }.detail-gallery.three img:first-child { grid-column:span 2;max-height:360px; }.detail-gallery img { width:100%;max-height:310px;object-fit:cover;border-radius:17px;background:#dfe5dc;cursor:zoom-in; }
.detail-metrics { margin-top:30px;display:flex;gap:8px; }.metric-button { border:1px solid var(--line);border-radius:99px;padding:9px 13px;background:white;font-size:10px; }.metric-button.active { color:white;border-color:var(--green);background:var(--green); }
.comments-head { display:flex;justify-content:space-between;align-items:center; }.comments-head h3 { margin:0;font-size:21px; }.comments-list { flex:1;margin:20px 0;overflow-y:auto; }
.comment-item { padding:13px 0;display:flex;gap:10px;border-bottom:1px solid var(--line); }.comment-main { flex:1; }.comment-main b { font-size:10px; }.comment-main small { float:right;color:var(--muted);font-size:8px; }.comment-main p { margin:7px 0 0;font-size:11px;line-height:1.5; }
.sticker-display { width:105px;margin-top:8px;padding:12px;border-radius:17px;text-align:center;background:linear-gradient(145deg,#d9f3bb,#bee686);font-size:26px; }.comment-compose textarea { width:100%;padding:12px;border:1px solid var(--line);border-radius:14px;resize:none;outline:0; }
.emoji-row { display:flex;gap:5px;margin:8px 0;overflow-x:auto; }.emoji-row button { flex:0 0 auto;border:0;border-radius:9px;padding:6px 8px;background:white; }.sticker-row { display:none;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px; }.sticker-row.open { display:grid; }.sticker-row button { border:0;border-radius:11px;padding:9px;background:#dff0cb;font-size:20px; }
.comment-send { width:100%;padding:11px;border:0;border-radius:12px;color:white;background:var(--green);font-weight:650; }
.composer-dialog,.editor-dialog { width:min(600px,calc(100% - 24px)); }.composer-dialog form,.editor-dialog form { padding:31px; }.dialog-top { display:flex;justify-content:space-between;align-items:start;margin-bottom:25px; }.dialog-top span { color:var(--green); }.dialog-top h2 { margin:7px 0 0;font-size:27px; }.dialog-top button { width:35px;height:35px;border:0;border-radius:50%;background:#e5e8e4;font-size:18px; }
.composer-dialog label,.editor-dialog label { display:flex;flex-direction:column;gap:7px;margin-bottom:14px;color:#555;font-size:10px;font-weight:650; }.composer-dialog input,.composer-dialog textarea,.composer-dialog select,.editor-dialog input,.editor-dialog textarea { width:100%;padding:12px;border:1px solid #dce1da;border-radius:12px;background:white;outline:0;resize:vertical; }.security-hint { margin:-10px 0 16px;color:var(--muted);font-size:10px;line-height:1.6; }.security-item { margin-bottom:10px;padding:11px;border:1px solid #dce1da;border-radius:13px;background:white; }.security-item b { display:block;margin-bottom:8px;color:#4e5651;font-size:10px; }.security-item input { margin:0!important;padding:10px!important;border-radius:9px!important; }
.photo-uploader { margin:2px 0 15px;padding:15px;border:1px dashed #cbd4c7;border-radius:16px;background:#f0f4ee; }.photo-uploader-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:11px; }.photo-uploader-head>div { display:flex;flex-direction:column;gap:3px; }.photo-uploader-head b { font-size:11px; }.photo-uploader-head span,.photo-uploader-head small { color:var(--muted);font-size:9px; }.photo-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.photo-action { margin:0!important;padding:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;gap:7px!important;border:1px solid #dbe1d8;border-radius:12px;background:white;cursor:pointer;transition:transform .2s,border-color .2s; }.photo-action:hover { transform:translateY(-2px);border-color:var(--green); }.photo-action input { display:none; }.photo-action span { color:var(--green);font-size:16px; }.photo-action b { font-size:10px; }.photo-preview { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px; }.photo-preview:empty { display:none; }.photo-preview-item { position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#dce3d9; }.photo-preview-item img { width:100%;height:100%;object-fit:cover; }.photo-preview-item button { position:absolute;right:5px;top:5px;width:24px!important;height:24px!important;display:grid;place-items:center;border:0;border-radius:50%;color:white;background:rgba(15,19,16,.75);font-size:14px; }.photo-loading { display:grid;place-items:center;aspect-ratio:1;border-radius:12px;color:var(--muted);background:#e3e9e0;font-size:9px; }.image-lightbox { position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,7,5,.88);backdrop-filter:blur(12px); }.image-lightbox.open { display:flex; }.image-lightbox img { max-width:95vw;max-height:92vh;object-fit:contain;border-radius:12px; }.image-lightbox button { position:absolute;right:22px;top:20px;width:40px;height:40px;border:0;border-radius:50%;color:white;background:rgba(255,255,255,.16);font-size:24px; }
.composer-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.solid-submit { width:100%;padding:13px;border:0;border-radius:13px;color:white;background:var(--green);font-weight:650; }.form-status { min-height:15px;color:#ca4a3e;text-align:center;font-size:10px; }
.toast { position:fixed;z-index:50;left:50%;bottom:26px;padding:11px 17px;border-radius:99px;opacity:0;transform:translate(-50%,20px);color:white;background:#111512;font-size:11px;transition:.3s; }.toast.show { opacity:1;transform:translate(-50%,0); }
.entrance { opacity:0;transform:translateY(35px);animation:enter .85s cubic-bezier(.2,.8,.2,1) forwards; }.board-card { opacity:0;transform:translateY(28px);animation:enter .65s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.07s); }
@keyframes enter { to { opacity:1;transform:none; } } @keyframes float { 50% { transform:translateY(-10px); } }
@media(max-width:850px){.board-bento{grid-template-columns:1fr 1fr}.board-card:nth-child(1),.board-card:nth-child(2){grid-column:span 2}.feed-list,.board-feed{grid-template-columns:1fr}.detail-shell{grid-template-columns:1fr}.detail-comments{max-height:none}.community-header nav{display:none}}
@media(max-width:600px){.community-header{top:7px;margin-top:7px}.community-logo span,.mini-profile b{display:none}.quick-publish{padding:9px 11px}main{width:calc(100% - 20px)}.app-view{padding-top:35px}.community-hero{min-height:440px;padding:36px 27px;display:block}.community-hero h1{font-size:48px}.level-orb{width:120px;height:120px;margin-top:38px}.level-orb strong{font-size:43px}.board-section,.timeline-section{padding-top:70px}.section-title{display:block}.section-title p{margin-top:8px}.board-bento{grid-template-columns:1fr;grid-auto-rows:215px}.board-card:nth-child(1),.board-card:nth-child(2){grid-column:auto;grid-row:auto}.board-card:nth-child(1) h3{font-size:31px}.profile-hero{padding:28px;display:block}.profile-copy{margin-top:28px}.profile-level{position:absolute;right:35px;margin-top:-125px;width:100px;height:100px}.activity-grid{grid-template-columns:1fr 1fr}.growth-card{display:block}.growth-card ul{margin-top:25px}.detail-content{padding:28px}.detail-comments{padding:23px}.composer-row{grid-template-columns:1fr}.photo-actions{grid-template-columns:1fr}.feed-photo-grid.one{height:190px}.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}