/* ============ 吃瓜站 · 用户与评论 ============ */
:root{
  --cg-accent:#ff4d3d;
  --cg-accent2:#ff8a75;
  --cg-card:#101014;
  --cg-card2:#16161c;
  --cg-line:#ffffff14;
  --cg-line2:#ffffff24;
  --cg-text:#e8e8ef;
  --cg-muted:#8f8f9d;
  --cg-dim:#6b6b78;
}

/* ---------- 账户按钮 ---------- */
.cg-account{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px 0 7px;
  border-radius:999px;background:#ffffff0f;border:1px solid #ffffff1f;color:var(--cg-text);
  font-size:13px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;
  flex:0 0 auto;transition:background .18s,border-color .18s,transform .12s;
  font-family:inherit;-webkit-tap-highlight-color:transparent;margin-left:8px;
}
.cg-account:hover{background:#ffffff1c;border-color:#ff4d3d66}
.cg-account:active{transform:scale(.97)}
.cg-account .cg-av{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;letter-spacing:0;flex:0 0 auto;
  background:linear-gradient(135deg,#e01f2d,#ff8a75);overflow:hidden;
}
.cg-account .cg-av img{width:100%;height:100%;object-fit:cover;display:block}
.cg-account .cg-nm{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-account .cg-caret{font-size:9px;color:var(--cg-dim)}

/* 账户下拉 */
.cg-menu{
  position:fixed;z-index:9002;min-width:176px;padding:6px;border-radius:13px;
  background:#15151b;border:1px solid #ffffff1f;box-shadow:0 20px 50px #000c;
  display:none;flex-direction:column;gap:2px;
}
.cg-menu.on{display:flex}
.cg-menu .cg-mi{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  font-size:13px;color:#d8d8e2;cursor:pointer;background:none;border:0;text-align:left;
  font-family:inherit;width:100%;
}
.cg-menu .cg-mi:hover{background:#ffffff12;color:#fff}
.cg-menu .cg-mi.danger:hover{background:#ff4d3d1f;color:#ff8a75}

/* ---------- 登录 / 注册弹窗 ---------- */
.cg-overlay{
  position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;
  padding:16px;background:#000000c2;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.cg-overlay.on{display:flex;animation:cgFade .18s ease}
@keyframes cgFade{from{opacity:0}to{opacity:1}}
@keyframes cgUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.cg-card{
  width:100%;max-width:392px;max-height:92vh;overflow-y:auto;padding:22px 20px 20px;
  border-radius:19px;background:linear-gradient(180deg,#17171d,#101014);
  border:1px solid #ffffff1f;box-shadow:0 34px 90px #000d;position:relative;
  animation:cgUp .22s cubic-bezier(.2,.8,.3,1);
}
.cg-card .cg-x{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#ffffff0f;color:#9a9aa8;font-size:15px;
  cursor:pointer;border:0;font-family:inherit;line-height:1;
}
.cg-card .cg-x:hover{background:#ffffff1c;color:#fff}
.cg-card h2{margin:0 0 4px;font-size:19px;font-weight:800;color:#fff;letter-spacing:.01em}
.cg-card .cg-sub{margin:0 0 16px;font-size:12.5px;color:var(--cg-dim);line-height:1.6}
.cg-tabs{display:flex;gap:6px;padding:4px;border-radius:12px;background:#ffffff0a;margin-bottom:16px}
.cg-tabs button{
  flex:1;height:34px;border-radius:9px;border:0;background:none;color:#9a9aa8;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.16s;
}
.cg-tabs button.on{background:linear-gradient(135deg,#e01f2d,#ff4d3d);color:#fff;box-shadow:0 6px 18px #ff4d3d3d}
.cg-field{margin-bottom:11px}
.cg-field label{display:block;font-size:11.5px;font-weight:600;color:#9a9aa8;margin-bottom:5px;letter-spacing:.02em}
.cg-input{
  width:100%;height:43px;border-radius:11px;background:#0b0b0f;border:1px solid #ffffff1c;
  color:var(--cg-text);padding:0 12px;font-size:14px;outline:none;font-family:inherit;
  transition:border-color .16s,box-shadow .16s;
}
.cg-input::placeholder{color:#55555f}
.cg-input:focus{border-color:#ff4d3d99;box-shadow:0 0 0 3px #ff4d3d1a}
.cg-btn{
  width:100%;height:45px;border-radius:12px;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#e01f2d,#ff4d3d 60%,#ff8a75);color:#fff;
  font-size:14.5px;font-weight:800;letter-spacing:.02em;box-shadow:0 10px 26px #ff4d3d3d;
  transition:opacity .16s,transform .12s;
}
.cg-btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.cg-btn:active:not(:disabled){transform:scale(.985)}
.cg-msg{margin:10px 0 0;font-size:12.5px;line-height:1.6;min-height:16px;color:#ff8a75}
.cg-msg.ok{color:#6ee7a8}
.cg-foot-note{margin:12px 0 0;font-size:11px;color:#55555f;line-height:1.6;text-align:center}

/* ---------- 评论区 ---------- */
.cgc-wrap{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box;display:block}
.cgc{
  margin:26px 0 8px;padding:18px 16px 16px;border-radius:17px;
  background:linear-gradient(180deg,#121217,#0e0e12);border:1px solid var(--cg-line);
}
@media (min-width:640px){.cgc{padding:22px}}
.cgc-head{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
.cgc-head h3{margin:0;font-size:16.5px;font-weight:800;color:#fff;letter-spacing:.01em}
.cgc-head .cgc-num{font-size:12.5px;color:var(--cg-dim);font-weight:600}
.cgc-head .cgc-sort{margin-left:auto;display:flex;gap:4px}
.cgc-head .cgc-sort button{
  border:0;background:#ffffff0a;color:#8f8f9d;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:8px;cursor:pointer;font-family:inherit;
}
.cgc-head .cgc-sort button.on{background:#ff4d3d1f;color:#ff8a75}

.cgc-editor{display:flex;gap:10px;margin-bottom:16px}
.cgc-editor .cgc-av{flex:0 0 auto}
.cgc-editor-main{flex:1;min-width:0}
.cgc-ta{
  width:100%;min-height:74px;max-height:200px;resize:vertical;border-radius:12px;
  background:#0a0a0e;border:1px solid #ffffff1c;color:var(--cg-text);padding:11px 12px;
  font-size:14px;line-height:1.65;outline:none;font-family:inherit;transition:border-color .16s;
}
.cgc-ta:focus{border-color:#ff4d3d80;box-shadow:0 0 0 3px #ff4d3d14}
.cgc-ta::placeholder{color:#55555f}
.cgc-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
.cgc-bar .cgc-hint{font-size:11.5px;color:#55555f;line-height:1.4;flex:1;min-width:0}
.cgc-bar .cgc-send{
  height:34px;padding:0 16px;border-radius:9px;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#e01f2d,#ff4d3d);color:#fff;font-size:13px;font-weight:700;
  white-space:nowrap;transition:opacity .16s;
}
.cgc-bar .cgc-send:disabled{opacity:.45;cursor:default}
.cgc-bar .cgc-cancel{background:#ffffff0f;color:#9a9aa8}

.cgc-login{
  display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:12px;
  background:#ffffff08;border:1px solid #ffffff14;margin-bottom:16px;
}
.cgc-login p{margin:0;font-size:13px;color:#9a9aa8;flex:1;line-height:1.5}
.cgc-login button{
  height:33px;padding:0 14px;border-radius:9px;border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#e01f2d,#ff4d3d);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;
}

.cgc-list{display:flex;flex-direction:column;gap:2px}
.cgc-item{display:flex;gap:10px;padding:11px 2px;border-top:1px solid #ffffff0a}
.cgc-item:first-child{border-top:0}
.cgc-av{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;overflow:hidden;letter-spacing:0;
  background:linear-gradient(135deg,#e01f2d,#ff8a75);
}
.cgc-av img{width:100%;height:100%;object-fit:cover}
.cgc-main{flex:1;min-width:0}
.cgc-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.cgc-name{font-size:13px;font-weight:700;color:#eaeaF2;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgc-badge{font-size:10px;font-weight:700;color:#ffb020;background:#ffb0201f;border:1px solid #ffb0203d;border-radius:5px;padding:1px 5px}
.cgc-time{font-size:11px;color:#5f5f6b}
.cgc-txt{font-size:14px;line-height:1.72;color:#d5d5e0;word-break:break-word;white-space:pre-wrap}
.cgc-acts{display:flex;align-items:center;gap:14px;margin-top:6px}
.cgc-acts button{
  border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:12px;
  color:#6b6b78;display:inline-flex;align-items:center;gap:4px;transition:color .14s;
}
.cgc-acts button:hover{color:#c9c9d6}
.cgc-acts button.liked{color:#ff4d3d;font-weight:700}
.cgc-acts button.del:hover{color:#ff5454}
.cgc-replies{margin-top:8px;padding-left:2px;display:flex;flex-direction:column;gap:8px;border-left:2px solid #ffffff0f;padding-left:11px}
.cgc-reply{display:flex;gap:8px}
.cgc-reply .cgc-av{width:26px;height:26px;font-size:11px}
.cgc-reply .cgc-txt{font-size:13.2px}
.cgc-reply .cgc-name{font-size:12.5px}

.cgc-empty{text-align:center;padding:26px 10px;color:#55555f;font-size:13px;line-height:1.8}
.cgc-more{
  display:block;width:100%;height:40px;margin-top:12px;border-radius:11px;
  background:#ffffff0a;border:1px solid #ffffff14;color:#9a9aa8;font-size:13px;
  font-weight:600;cursor:pointer;font-family:inherit;transition:.16s;
}
.cgc-more:hover{background:#ffffff12;color:#fff}
.cgc-more:disabled{opacity:.5;cursor:default}
.cgc-loading{text-align:center;padding:22px;color:#55555f;font-size:12.5px}

/* 我的评论 */
.cg-mycmt-item{display:block;padding:10px 11px;border-radius:10px;background:#ffffff08;margin-bottom:7px;cursor:pointer;border:1px solid transparent}
.cg-mycmt-item:hover{border-color:#ff4d3d55;background:#ffffff0f}
.cg-mycmt-item .t{font-size:13px;color:#d5d5e0;line-height:1.6;margin-bottom:3px}
.cg-mycmt-item .s{font-size:11px;color:#5f5f6b}

@media (max-width:520px){
  .cg-account .cg-nm{max-width:60px}
  .cgc-editor .cgc-av{display:none}
  .cgc{padding:15px 13px 13px;border-radius:15px}
  .cgc-txt{font-size:13.5px}
}