:root{
  --bg1:#07080a;
  --card:#081014;
  --accent1:#7c5cff;
  --accent2:#2da6ff;
  --text:#e6f9ff;
  --muted:#9fb6c4;
}
*{box-sizing:border-box}
body{ margin:0; background: linear-gradient(135deg,#071018,#071b2a); color:var(--text); font-family:"Microsoft YaHei",sans-serif; padding:20px; }
.wrap{ max-width:900px; margin:0 auto; }
.site-header{ text-align:center; margin-bottom:12px; }
.site-header h1{ font-size:26px; color:var(--text); text-shadow:0 0 10px rgba(45,166,255,0.08); }
.card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04)); border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 8px 20px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.02); }
.announcement{ padding:10px 12px; border-radius:8px; background:linear-gradient(90deg,#082a31,#071b25); color:#cfffff; margin-bottom:12px; border:1px solid rgba(45,166,255,0.08); text-align:center; }
.field{ display:block; width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background:rgba(255,255,255,0.02); color:var(--text); margin-bottom:8px; }
textarea{ width:100%; min-height:80px; border-radius:8px; padding:10px; background:rgba(255,255,255,0.02); color:var(--text); border:1px solid rgba(255,255,255,0.03); resize:vertical; }
.upload-btn{ background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; display:inline-block; }
.image-preview{ display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
.image-preview img{ width:70px; height:70px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,0.03); transition:transform .15s; }
.image-preview img:hover{ transform:scale(1.06); box-shadow:0 8px 20px rgba(45,166,255,0.12); }
.post-row{ display:flex; gap:12px; align-items:center; justify-content:flex-end; }
.primary-btn{ background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; border:none; padding:8px 14px; border-radius:8px; cursor:pointer; }
.small-muted{ color:var(--muted); font-size:13px; margin-top:6px; }

/* filter */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); color:var(--muted); padding:6px 10px; border-radius:8px; cursor:pointer; }
.filter.active{ background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; box-shadow:0 8px 20px rgba(124,92,255,0.06); }

/* message list */
.message-list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.message-item{ background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.04)); padding:12px; border-radius:10px; border:1px solid rgba(45,166,255,0.04); transition:transform .15s; position:relative; }
.message-item:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(45,92,255,0.05); }
.message-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.message-info{ text-align:left; }
.message-info .meta{ color:var(--muted); font-size:13px; margin-bottom:6px; font-weight:600; }
.message-content{ margin-top:6px; color:#eaf7ff; white-space:pre-wrap; line-height:1.6; }
/* images */
.image-list{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.image-list img{ width:110px; height:80px; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform .12s; }
.image-list img:hover{ transform:scale(1.04); box-shadow:0 12px 30px rgba(45,166,255,0.08); }

/* actions - same line right */
.message-actions{ display:flex; gap:12px; align-items:center; color:var(--muted); font-weight:600; }
.message-actions button{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:6px 8px; border-radius:6px; }
.message-actions button:hover{ color:#fff; transform:scale(1.05); }

/* reply */
.reply-row{ margin-top:10px; }
.reply-btn{ background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted); padding:6px 8px; border-radius:8px; cursor:pointer; }
.reply-box{ margin-top:8px; border-left:3px solid rgba(45,166,255,0.12); padding-left:10px; color:#cfefff; background:rgba(0,0,0,0.03); border-radius:6px; padding:8px; }

.img-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); z-index:9999; }
.img-overlay img{ max-width:92%; max-height:92%; border-radius:12px; box-shadow:0 20px 60px rgba(45,166,255,0.08); transform:scale(.95); animation:zoomIn .28s forwards; }
@keyframes zoomIn{ to{ transform:scale(1); } }
.footer{ text-align:center; margin-top:20px; color:var(--muted); font-size:13px; }