/* 伊甸园社区 · 圈子页面样式（深绿终端风） */
:root{
  --bg:#0a0e07; --panel:#0e1409; --panel-2:#111a0c; --line:#233016; --line-2:#2c3a20;
  --text:#eaf1e2; --text-2:#b9c9ab; --dim:#6d86a3;
  --green:#8ce22a; --green-2:#5fc21a; --lime:#c9f08c; --warn:#ff8a6e;
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background-color:var(--bg); color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  line-height:1.65; min-height:100vh;
  background-image:
    linear-gradient(180deg, rgba(10,14,7,.93), rgba(10,14,7,.90) 40%, rgba(10,14,7,.96)),
    radial-gradient(60% 40% at 50% -10%, rgba(140,226,42,.08), transparent 70%),
    url("/assets/eden-bg.jpg");
  background-size:cover, cover, cover; background-position:center, center, center top;
  background-attachment:fixed, fixed, fixed;
}
.wrap{max-width:800px;margin:0 auto;padding:0 16px}
a{color:inherit;text-decoration:none}

/* 顶部进度条 */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,#5fc21a,#8ce22a,#c9f08c);box-shadow:0 0 14px rgba(140,226,42,.7)}

/* 导航 */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:rgba(10,14,7,.82);border-bottom:1px solid rgba(35,48,22,.9)}
.nav-inner{display:flex;align-items:center;gap:18px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px}
.logo img{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2)}
.links{display:flex;gap:16px;font-size:13.5px;color:var(--text-2)}
.links a:hover,.links a.on{color:var(--green)}
.right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-2)}
.right .who{display:inline-flex;align-items:center;gap:7px;color:var(--text)}
.right .who i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:800;color:#0a0e07}
.right a:hover{color:var(--green)}

.main{padding:26px 16px 80px;display:flex;flex-direction:column;gap:16px}

/* 签到卡 */
.checkin-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(140,226,42,.10),rgba(14,20,9,.9) 55%);position:relative;overflow:hidden}
.checkin-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 120% at 100% 0%, rgba(140,226,42,.14), transparent 70%)}
.ck-title{font-size:16px;font-weight:800;color:var(--green)}
.ck-sub{font-size:12.5px;color:var(--text-2);margin-top:2px}
.ck-mid{display:flex;gap:22px;margin-left:auto}
.ck-stat{text-align:center}
.ck-stat b{display:block;font-size:20px;color:var(--lime);font-family:ui-monospace,Consolas,monospace}
.ck-stat span{font-size:11.5px;color:var(--dim)}
#ckBtn{min-width:104px}
#ckBtn.done{background:#1a2410;color:var(--dim);border-color:var(--line-2);box-shadow:none;cursor:default}

/* 按钮 */
.btn{border-radius:10px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);
  padding:9px 16px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.2s var(--ease);font-family:inherit}
.btn:hover{border-color:var(--green);color:var(--green)}
.btn.primary{background:linear-gradient(135deg,#8ce22a,#5fc21a);color:#08120a;border-color:transparent;
  box-shadow:0 6px 18px rgba(140,226,42,.22);position:relative;overflow:hidden}
.btn.primary:hover{box-shadow:0 10px 26px rgba(140,226,42,.34);color:#08120a}
.btn.primary:disabled{opacity:.7;cursor:default}
.btn.primary::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);pointer-events:none}
.btn.primary:hover::after{animation:shine .85s var(--ease)}
@keyframes shine{to{left:150%}}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.ghost{background:transparent}
.btn.wide{width:100%;padding:12px}

/* 发帖 */
.composer{display:flex;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.cp-avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#0a0e07;background:var(--line-2)}
.cp-body{flex:1;min-width:0}
#cpText{width:100%;min-height:76px;resize:vertical;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:.2s}
#cpText:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(140,226,42,.10)}
#cpText::placeholder{color:#5d6b55}
.cp-bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.cp-upload{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;transition:.2s}
.cp-upload:hover{border-color:var(--green);color:var(--green)}
.cp-upload svg{width:15px;height:15px}
.cp-count{margin-left:auto;font-size:11.5px;color:var(--dim);font-family:ui-monospace,monospace}
.cp-img{position:relative;margin-top:10px;width:fit-content}
.cp-img img{max-width:240px;max-height:180px;border-radius:10px;border:1px solid var(--line-2);display:block}
.cp-img-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:11px}

/* 动态 */
.feed{display:flex;flex-direction:column;gap:12px}
.post{display:flex;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--line);
  background:var(--panel);transition:.25s var(--ease);position:relative;overflow:hidden}
.post::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(140,226,42,.55),transparent);
  transform:scaleX(0);transition:transform .3s var(--ease)}
.post:hover{border-color:#33531f;transform:translateY(-2px)}
.post:hover::before{transform:scaleX(1)}
.p-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#0a0e07}
.p-main{flex:1;min-width:0}
.p-head{display:flex;align-items:center;gap:10px;font-size:13px}
.p-head b{color:var(--text)}
.p-head span{color:var(--dim);font-size:11.5px}
.p-del{margin-left:auto;background:none;border:none;color:#6b4a4a;font-size:11.5px;cursor:pointer}
.p-del:hover{color:var(--warn)}
.p-text{margin-top:8px;font-size:14px;color:#dbe7d3;white-space:pre-wrap;word-break:break-word}
.p-img{margin-top:10px;max-width:100%;border-radius:10px;border:1px solid var(--line-2)}
.p-acts{display:flex;gap:16px;margin-top:10px}
.act{background:none;border:none;color:var(--dim);font-size:12.5px;cursor:pointer;transition:.2s;font-family:inherit}
.act:hover{color:var(--green)}
.act.on{color:var(--green)}
.p-cmts{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.cmt{display:flex;gap:8px;font-size:12.5px;color:var(--text-2)}
.cmt i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:9px;font-weight:800;color:#0a0e07}
.cmt b{color:var(--text);margin-right:4px}
.cmt-time{color:var(--dim);font-size:10.5px;margin-left:6px}
.p-input{display:flex;gap:8px;margin-top:10px}
.p-input input{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
.p-input input:focus{border-color:var(--green)}
.empty{text-align:center;color:var(--dim);font-size:13px;padding:36px 0}
.more{text-align:center;margin-top:6px}

/* 分类筛选 */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.fl{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--text-2);font-size:13px;cursor:pointer;transition:.2s var(--ease);font-family:inherit}
.fl:hover{border-color:var(--green);color:var(--green)}
.fl.on{background:linear-gradient(135deg,#8ce22a,#5fc21a);color:#08120a;border-color:transparent;font-weight:800}

/* 帖子类型选择 */
.cp-types{display:flex;gap:6px;margin-bottom:8px}
.ty{padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--text-2);font-size:12.5px;cursor:pointer;transition:.2s;font-family:inherit}
.ty:hover{border-color:var(--green);color:var(--green)}
.ty.on{background:rgba(140,226,42,.14);border-color:var(--green);color:var(--green);font-weight:700}

/* 徽章 */
.badge{font-size:10.5px;padding:2px 7px;border-radius:5px;font-weight:700;letter-spacing:.02em}
.badge.pin{background:#3a2a08;color:#ffd66b;border:1px solid #6b5a1e}
.badge.ess{background:#22103a;color:#c9a6ff;border:1px solid #4a2f6b}
.badge.type.talk{background:#12200f;color:#8ce22a;border:1px solid #2c4a18}
.badge.type.ask{background:#0d1e2e;color:#7fb6ff;border:1px solid #24506f}
.badge.type.battle{background:#2a1210;color:#ff9d8a;border:1px solid #6b2a1a}

/* 每日任务 */
.tasks{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.tk-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.tk-head b{font-size:14px;color:var(--green)}
.tk-head span{font-size:11.5px;color:var(--dim)}
.tk-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2)}
.tk-main{flex:1;min-width:0}
.tk-name{font-size:12.5px;color:var(--text)}
.tk-bar{height:4px;border-radius:3px;background:#1b2713;margin-top:6px;overflow:hidden}
.tk-bar i{display:block;height:100%;background:linear-gradient(90deg,#5fc21a,#8ce22a);transition:width .4s var(--ease)}
.tk-prog{font-size:11.5px;color:var(--dim);font-family:ui-monospace,monospace}
.tk-ok{font-size:11.5px;color:var(--dim)}
.tk.ready{border-color:#3d5c22}
.tk.done{opacity:.6}

/* 积分兑换 */
.redeem{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.rd-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rd-head b{font-size:14px;color:var(--green)}
.rd-head span{font-size:11.5px;color:var(--dim)}
.rd-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rd-tier{display:flex;flex-direction:column;gap:2px;align-items:center;padding:12px 8px;
  border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer;
  transition:.22s var(--ease);font-family:inherit}
.rd-tier:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 8px 22px rgba(140,226,42,.12)}
.rd-tier b{font-size:17px;color:var(--lime)}
.rd-tier span{font-size:11.5px;color:var(--dim)}
.rd-mine{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rd-code{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  border:1px dashed var(--line-2);background:#0f180c;font-size:12.5px}
.rd-code code{font-family:ui-monospace,Consolas,monospace;color:var(--green);letter-spacing:.5px}
.rd-code span{color:var(--dim);font-size:11.5px}
.rd-code .copy{margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:7px;
  color:var(--text-2);font-size:11.5px;padding:4px 10px;cursor:pointer;font-family:inherit}
.rd-code .copy:hover{border-color:var(--green);color:var(--green)}
.rd-code.used{opacity:.5}
.rd-code.used code{text-decoration:line-through}

@media (max-width:640px){
  .tk-list{grid-template-columns:1fr}
  .rd-tiers{grid-template-columns:1fr}
}

/* ---------- 两栏布局 ---------- */
.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start;
  max-width:1180px;margin:0 auto;padding:22px 16px 80px}
.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px}
.content{display:flex;flex-direction:column;gap:14px;min-width:0}

/* 用户卡 */
.user-card{padding:16px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(140,226,42,.10),var(--panel) 60%);position:relative;overflow:hidden}
.uc-top{display:flex;align-items:center;gap:11px}
.uc-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#0a0e07;border:1px solid var(--line-2);object-fit:cover;flex:none}
img.uc-avatar{color:transparent}
.uc-info{flex:1;min-width:0}
.uc-info b{display:block;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-info span{font-size:11.5px;color:var(--lime)}
.uc-edit{background:none;border:1px solid var(--line-2);border-radius:8px;color:var(--text-2);
  font-size:11.5px;padding:4px 9px;cursor:pointer;font-family:inherit;white-space:nowrap}
.uc-edit:hover{border-color:var(--green);color:var(--green)}
.uc-stats{display:flex;gap:8px;margin:13px 0 10px}
.uc-stats > div{flex:1;text-align:center;background:#0f180c;border:1px solid var(--line);border-radius:10px;padding:7px 2px}
.uc-stats b{display:block;font-size:16px;color:var(--lime);font-family:ui-monospace,monospace}
.uc-stats span{font-size:10.5px;color:var(--dim)}

/* 侧栏面板 */
.panel{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.pn-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.pn-head b{font-size:13px;color:var(--green)}
.pn-head span{font-size:11px;color:var(--dim)}

/* 留言流 */
.cmt-feed{display:flex;flex-direction:column;gap:9px;max-height:280px;overflow:auto}
.cmt-item{display:flex;gap:8px;padding:7px;border-radius:9px;transition:background .18s;color:inherit}
.cmt-item:hover{background:#121d0e}
.cmt-item i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:9.5px;font-weight:800;color:#0a0e07}
.cmt-item div{font-size:12px;color:var(--text-2);line-height:1.5;min-width:0}
.cmt-item b{color:var(--text);margin-right:5px}
.cmt-item em{display:block;font-style:normal;font-size:10.5px;color:var(--dim);margin-top:2px}
.empty.small{padding:18px 0;font-size:12px}

/* 个人中心 */
.pf-row{display:flex;gap:14px;align-items:center;margin-top:16px}
.pf-avatar{width:60px;height:60px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  border:1px solid var(--line-2);flex:none}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-avatar span{width:100%;height:100%;display:grid;place-items:center;font-weight:800;color:#0a0e07}
.pf-upload{display:inline-block;margin-top:8px;font-size:12px;color:var(--green);cursor:pointer;
  border:1px solid var(--line-2);border-radius:8px;padding:4px 10px}
.pf-upload:hover{border-color:var(--green)}
.pf-sec{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.pf-title{font-size:12.5px;color:var(--text-2);margin-bottom:8px}
.pf-sec input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
.pf-sec input:focus{border-color:var(--green)}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;padding:16px 12px 70px}
  .side{position:static;order:2}
  .content{order:1}
  .cmt-feed{max-height:none}
}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(5,8,3,.78);display:none;align-items:center;
  justify-content:center;z-index:70;padding:16px;backdrop-filter:blur(3px)}
.mask.on{display:flex}
.modal{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:16px;padding:22px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal h3{font-size:19px;margin-bottom:4px}
.modal .close{position:absolute;right:16px;top:13px;cursor:pointer;color:var(--dim);font-size:17px}
.modal .close:hover{color:var(--green)}
.modal label{display:block;font-size:12.5px;color:var(--text-2);margin:14px 0 6px}
.modal input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--text);font-size:14px;outline:none;font-family:inherit}
.modal input:focus{border-color:var(--green)}
.modal .wide{margin-top:16px}
.hint{font-size:12px;color:var(--dim);margin-top:6px}
.modal a{color:var(--green)}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);
  background:#14200f;border:1px solid #3d5c22;color:var(--lime);padding:10px 18px;border-radius:10px;
  font-size:13px;opacity:0;pointer-events:none;transition:.25s var(--ease);z-index:80}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  .nav-inner{height:54px;gap:10px}
  .links{gap:11px;font-size:12.5px}
  .logo{font-size:14px}
  .ck-mid{gap:14px;margin-left:0;width:100%;justify-content:space-around}
  #ckBtn{width:100%}
  .main{padding:18px 12px 70px}
  .right .who span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}