/* 個人頁社交層(2026-09-06):發文框 / 貼文卡 / 留言 / 追蹤 / 好友牆 / 背景挑選 / 快速入口 */
.quickbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.qk { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, #1a2338, #121a2a); color: var(--txt); cursor: pointer; font-weight: 700; font-size: 13px; }
.qk i { font-style: normal; font-size: 26px; }
.qk:hover { border-color: var(--gold); }

.mo-compose { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.02); margin-bottom: 14px; }
.mo-moods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mo-mood { font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.mo-mood.on { border-color: var(--gold); background: rgba(240,192,90,.15); }
.mo-compose textarea { width: 100%; resize: vertical; min-height: 68px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); padding: 10px; font: inherit; }
.mo-previews { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.mo-pv { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.mo-pv img, .mo-pv video { width: 100%; height: 100%; object-fit: cover; }
.mo-pv-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 12px; }
.mo-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mo-tools .spacer { flex: 1; }
.mo-vis { border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--txt); padding: 8px 10px; font: inherit; font-size: 13px; }

.mo-card { border-top: 1px solid var(--line); padding: 14px 0; }
.mo-card:first-child { border-top: 0; }
.mo-card header { display: flex; align-items: center; gap: 10px; }
.mo-card header a { text-decoration: none; color: var(--txt); }
.mo-who { flex: 1; line-height: 1.3; }
.mo-who .dim { color: var(--dim); font-size: 12px; }
.mo-moodtag { margin-left: 8px; font-size: 18px; }
.mo-x { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; padding: 4px; }
.mo-x:hover { color: var(--red); }
.mo-body { margin: 10px 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.mo-grid { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; margin: 10px 0; }
.mo-grid a { display: block; aspect-ratio: 1; background: #000; }
.mo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-grid.n1 { grid-template-columns: 1fr; }
.mo-grid.n1 a { aspect-ratio: 16 / 10; }
.mo-grid.n2, .mo-grid.n4 { grid-template-columns: 1fr 1fr; }
.mo-grid.n3, .mo-grid.n5, .mo-grid.n6, .mo-grid.n7, .mo-grid.n8, .mo-grid.n9 { grid-template-columns: 1fr 1fr 1fr; }
.mo-video { width: 100%; max-height: 420px; border-radius: 12px; background: #000; margin: 10px 0; }
.mo-card footer { display: flex; gap: 8px; margin-top: 6px; }
.mo-act { border: 1px solid var(--line); background: transparent; color: var(--dim); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 700; font-size: 13px; }
.mo-act.on { color: #ff6b8a; border-color: #ff6b8a; background: rgba(255,107,138,.12); }
.mo-act:hover { color: var(--txt); }
.mo-comments { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.03); }
.mo-cmt { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; }
.mo-cmt > div { flex: 1; }
.mo-cmt .dim { color: var(--dim); font-size: 11px; margin-left: 6px; }
.mo-cmt-new { display: flex; gap: 8px; margin-top: 8px; }
.mo-cmt-new input { flex: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); padding: 8px 10px; font: inherit; font-size: 13px; }
.mo-empty { padding: 12px 0; font-size: 13px; }
.mo-more { width: 100%; margin-top: 10px; }

.pfollow { margin: -6px 0 0; font-size: 13px; }
.fw-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 6px; }
.fw-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; text-decoration: none; color: var(--dim); font-size: 12px; }
.fw-item span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-on { position: absolute; top: 40px; left: calc(50% + 14px); width: 12px; height: 12px; border-radius: 50%; background: var(--green); border: 2px solid var(--card); }

.pubhead.bgimg { background-size: cover; background-position: center; position: relative; }
.pubhead.bgimg::before { content: ''; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(8,10,16,.25), rgba(8,10,16,.72)); }
.pubhead.bgimg > * { position: relative; }
.pbg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pbg { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px solid var(--line); background: #0e1320 center / cover; cursor: pointer; overflow: hidden; color: #fff; padding: 0; }
.pbg b { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); text-align: left; }
.pbg.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,192,90,.35); }
.pbg-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--dim); }

@media (max-width: 640px) {
  .quickbar { grid-template-columns: repeat(2, 1fr); }
  .mo-grid.n1 a { aspect-ratio: 4 / 3; }
}