:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #e2e5ea;
  --text: #1c1f24;
  --muted: #66707d;
  --accent: #2f8f4e;
  --accent-text: #ffffff;
  --danger: #c0392b;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --panel: #1f2229;
    --line: #2e323b;
    --text: #e8eaee;
    --muted: #9aa1ad;
    --accent: #3ba55c;
    --danger: #e0645f;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.spacer { flex: 1; }

header { background: var(--panel); border-bottom: 1px solid var(--line); }
.head { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { font-weight: bold; font-size: 18px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
/* 標題前的 App 圖示（跟 App 頂部一樣大） */
.brand-logo { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.tagline { color: var(--muted); font-size: 14px; }

.btn { display: inline-block; padding: 8px 18px; border-radius: 6px; text-decoration: none; background: var(--line); color: var(--text); white-space: nowrap; }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.disabled { opacity: .5; }

.toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.toolbar h1 { margin: 0; font-size: 22px; flex: 1; }
input[type=search] { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; width: 100%; max-width: 320px; }
.hint { color: var(--muted); font-size: 14px; }

.rooms { display: grid; gap: 12px; margin: 16px 0; }
.room { display: flex; gap: 16px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.room-main { flex: 1; min-width: 0; }
.room h2 { margin: 0 0 4px; font-size: 17px; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.desc { margin: 8px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.room-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.count { color: var(--muted); font-size: 14px; }
.back { display: inline-block; margin: 24px 0 12px; color: var(--muted); }

footer { font-size: 12px; padding: 32px 16px; }

@media (max-width: 560px) {
  .tagline { display: none; }
  .room { flex-direction: column; align-items: stretch; }
  .room-side { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- 帳號 ---------- */
button.btn { border: 0; font: inherit; cursor: pointer; }
button.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 4px 12px; font-size: 14px; }
.btn.danger { background: var(--danger); color: #fff; }
.small { font-size: 13px; }
a { color: var(--accent); }
.notice { margin-top: 16px; padding: 10px 14px; border-radius: 6px; background: var(--panel); border: 1px solid var(--danger); color: var(--danger); }

.auth-area { position: relative; }
.dropdown { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-width: 200px; padding: 6px; z-index: 10; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--text); font: inherit; text-decoration: none; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--line); }
.me-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; padding: 4px; }
.me-name { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; color: #fff; font-weight: bold; flex: none; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin: 16px 0; }
.card h1, .card h2 { margin-top: 0; }
.card.narrow { max-width: 440px; margin: 40px auto; }
.card label { display: block; margin: 12px 0; }
.card label input:not([type=checkbox]):not([type=radio]):not([type=file]), .card textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.card label.check { display: flex; align-items: center; gap: 8px; }
.card label.btn { display: inline-block; margin: 0; cursor: pointer; }
.avatar-row { display: flex; align-items: center; gap: 16px; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.danger-zone { border-color: var(--danger); }

.profile-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.profile-names { flex: 1; min-width: 0; }
.profile-names h1 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--accent); color: var(--accent-text); }
.bio { white-space: pre-wrap; overflow-wrap: anywhere; }

.footer-links { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); }
.legal { max-width: 760px; }
.legal h1 { margin-top: 32px; }
.legal h2 { margin-top: 28px; font-size: 18px; }

@media (max-width: 560px) {
  .me-name { display: none; }
  #download { padding: 8px 12px; }
}

/* ---------- 好友、訊息 ---------- */
.head-link { color: var(--text); text-decoration: none; font-size: 14px; position: relative; white-space: nowrap; }
.auth-area { display: flex; align-items: center; gap: 14px; }
.badge-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.presence { font-size: 13px; }
.presence::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--muted); }
.presence.online::before { background: #3ba55c; }
.presence.playing::before { background: #e0a030; }
.presence.offline { color: var(--muted); }
.counts { margin: 12px 0 4px; font-size: 14px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.subtabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; padding: 8px 12px; cursor: pointer; }
.subtabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.user-row .spacer { text-align: right; }
.user-link { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-search { max-width: none; }

.dm { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-top: 24px; height: calc(100vh - 180px); min-height: 420px; }
.dm-list, .dm-thread { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: hidden; display: flex; flex-direction: column; }
.dm-list h1 { font-size: 20px; margin: 4px 0 8px; }
.conv-list { overflow-y: auto; }
.conv { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; border-bottom: 0 !important; justify-content: flex-start !important; }
.conv:hover, .conv.on { background: var(--line); }
.conv-text { flex: 1; min-width: 0; }
.conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); min-height: 40px; }
.thread-msgs { flex: 1; overflow-y: auto; padding: 12px 4px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 75%; align-self: flex-start; }
.msg.mine { align-self: flex-end; text-align: right; }
.msg-body { display: inline-block; text-align: left; padding: 8px 12px; border-radius: 12px; background: var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine .msg-body { background: var(--accent); color: var(--accent-text); }
.thread-form { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.thread-form textarea { flex: 1; resize: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.dm-back { display: none; }

@media (max-width: 560px) {
  .head-link { font-size: 13px; }
  .auth-area { gap: 10px; }
  .dm { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .dm .dm-thread { display: none; }
  .dm.thread-open .dm-list { display: none; }
  .dm.thread-open .dm-thread { display: flex; }
  .dm-back { display: inline-block; }
  .user-row { flex-wrap: wrap; }
}

/* ---------- @名稱 ---------- */
.handle-input { display: flex; align-items: center; margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); padding-left: 10px; }
.handle-input > span { color: var(--muted); }
.card label .handle-input input { border: 0 !important; margin: 0 !important; background: transparent !important; padding-left: 4px !important; }
.handle { font-size: 14px; }
.user-name .handle { font-size: 12px; }
p.ok { color: var(--accent); }

/* ---------- 管理後台 ---------- */
.admin { max-width: 1280px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.stat.card { margin: 0; padding: 14px; }
.stat-value { font-size: 22px; font-weight: bold; margin: 4px 0; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; padding: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; color: var(--muted); font-weight: normal; padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* 點表頭排序（admin.js 的 sortHead） */
.admin-table th[data-sort] { cursor: pointer; user-select: none; }
.admin-table th[data-sort]:hover, .admin-table th[aria-sort=ascending], .admin-table th[aria-sort=descending] { color: var(--text); }
/* 箭頭的位置一直留著（沒排序時看不到），點了出現箭頭時欄寬不會變 */
.admin-table th[data-sort]::after { content: ' ▲'; font-size: 10px; visibility: hidden; }
.admin-table th[aria-sort=ascending]::after { content: ' ▲'; visibility: visible; }
.admin-table th[aria-sort=descending]::after { content: ' ▼'; visibility: visible; }
#user-rows tr { cursor: pointer; }
#user-rows tr:hover, #user-rows tr.on { background: var(--line); }
.admin-split { display: grid; grid-template-columns: 1fr; gap: 16px; }
.admin-split:has(#user-detail:not(.hidden)) { grid-template-columns: minmax(0, 1fr) 380px; }
#user-detail { margin: 16px 0; align-self: start; }
#user-detail h3 { margin: 16px 0 6px; font-size: 15px; }
/* 名字：拿掉標題預設的下邊距，貼著下面的 @ID，整塊跟頭像垂直置中 */
#user-detail .profile-head h2 { margin: 0 0 2px; }
#user-detail input, #user-detail select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; margin: 4px 0; }
#user-detail .row { display: flex; gap: 6px; align-items: center; }
#user-detail .row select, #user-detail .row input { flex: 1; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
/* 管理區塊分三列：停權和刪除、禁言、角色 */
.admin-mute, .admin-roles { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-mute { order: 1; }
.admin-roles { order: 2; }
#user-detail .admin-mute select, #user-detail .admin-mute input { flex: 0 1 auto; width: auto; min-width: 0; margin: 0; }
.admin-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; margin: 12px 0; }
.admin-dl dt { color: var(--muted); }
.admin-dl dd { margin: 0; overflow-wrap: anywhere; }
.badge-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 4px; }
@media (max-width: 900px) {
  .admin-split:has(#user-detail:not(.hidden)) { grid-template-columns: 1fr; }
}

/* ---------- 貼文 ---------- */
.post-list { display: grid; gap: 0; }
.post { padding: 16px; }
.post-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.post-head .user-link { min-width: 0; }
.post-time { text-decoration: none; white-space: nowrap; }
.post-body, .comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; }
.post-hidden { margin: 10px 0 0; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--danger); color: var(--danger); }
.post-images { display: grid; gap: 4px; margin-top: 10px; border-radius: 8px; overflow: hidden; }
.post-images.n2, .post-images.n3, .post-images.n4 { grid-template-columns: 1fr 1fr; }
.post-images.n3 a:first-child { grid-row: span 2; }
.post-images a { display: block; background: var(--line); }
.post-images img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.post-images.n2 img, .post-images.n3 img, .post-images.n4 img { aspect-ratio: 1; max-height: none; }
.post-clip { display: block; width: 100%; max-height: 520px; margin-top: 10px; border-radius: 8px; background: #000; }
.yt { position: relative; margin-top: 10px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.yt iframe, .yt-thumb, .yt-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-thumb { padding: 0; cursor: pointer; background: #000; }
.yt-thumb img { object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 12px; background: rgba(0,0,0,.7); color: #fff; font-size: 22px; line-height: 48px; text-align: center; }
.post-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.post-act { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; padding: 4px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
.post-act:hover { background: var(--line); }
.post-act.on { color: var(--danger); }
.icon-btn { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.icon-btn:hover { background: var(--line); }
#post-more { display: block; margin: 0 auto 16px; }

.composer textarea { resize: vertical; }
.composer input[type=url] { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.composer input[type=url]:disabled { opacity: .5; }
.cmp-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cmp-bar label.btn.disabled { opacity: .5; pointer-events: none; }
.cmp-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-previews:not(:empty) { margin-top: 10px; }
.cmp-thumb { position: relative; width: 88px; height: 88px; border-radius: 6px; overflow: hidden; background: var(--line); }
.cmp-thumb img, .cmp-thumb video { width: 100%; height: 100%; object-fit: cover; }
.cmp-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 22px; padding: 0; }

.comment-list li.comment { display: block; }
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-body { margin-top: 4px; }
.comment-form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.comment-form textarea { flex: 1; resize: vertical; }
#comment-more { margin-top: 8px; }

.notify { justify-content: flex-start !important; }
.notify-link { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: 1; min-width: 0; }
.notify-text { overflow-wrap: anywhere; }
.notify.unread .notify-text { font-weight: bold; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { width: 100%; max-width: 420px; margin: 0; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal label.check { margin: 6px 0; }
.modal textarea { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (max-width: 560px) {
  .head { flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
  .post { padding: 12px; }
  .post-head .user-name .handle { display: none; }
}

/* ---------- 管理後台：檢舉 ---------- */
.report-case { margin: 12px 0; }
.report-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.report-target { margin: 10px 0; padding: 10px; border-radius: 6px; background: var(--bg); display: grid; gap: 6px; justify-items: start; }
.report-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12em; overflow-y: auto; justify-self: stretch; }
.report-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.report-thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.report-case input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; margin: 8px 0 0; }

/* ---------- 頭像裁切、備註、已完成的按鈕 ---------- */
.crop-modal { max-width: 340px; }
.crop-canvas { display: block; width: 280px; max-width: 100%; aspect-ratio: 1; margin: 8px auto; border-radius: 8px; background: #000; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 10px; }
.crop-zoom input { flex: 1; }
.btn.done, .btn.done:disabled { background: var(--line); color: var(--muted); opacity: 1; cursor: default; }
.note-box { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; display: grid; gap: 6px; justify-items: start; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-box textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.note-actions { display: flex; gap: 8px; align-items: center; }
.profile-actions .dropdown { display: inline-block; }

.mention-box { position: fixed; z-index: 60; list-style: none; margin: 0; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); max-width: 320px; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.mention-item.on { background: var(--line); }
.mention-name { overflow: hidden; text-overflow: ellipsis; }
.mention-handle { color: var(--muted); font-size: 13px; }

/* ---------- Addon 和地圖 ---------- */
.addon-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.addon-toolbar .subtabs { margin: 0; }
.addon-toolbar select, .addon-form select, .gains-filters select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.addon-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: inherit; text-decoration: none; }
.addon-card:hover { border-color: var(--accent); }
.addon-card img, .addon-card .addon-noshot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line); }
.addon-noshot { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--line); }
.addon-card-body { padding: 10px 12px 12px; display: grid; gap: 2px; }
.addon-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addon-page { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; margin-top: 16px; }
.addon-shot-main { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--line); }
.addon-thumbs { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.addon-thumbs img { width: 84px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: .6; border: 2px solid transparent; }
.addon-thumbs img.on { opacity: 1; border-color: var(--accent); }
.addon-info { margin: 0; }
.addon-info h1 { margin: 0 0 10px; font-size: 22px; overflow-wrap: anywhere; }
.addon-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0; }
.addon-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addon-actions .dropdown { margin-left: auto; }
.addon-hint { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: var(--bg); }
.addon-hint p { margin: 4px 0; }
.addon-form h1 { margin-top: 0; font-size: 22px; }
.af-row { display: flex; gap: 16px; flex-wrap: wrap; }
.af-row label { flex: 1; min-width: 180px; }
.af-row select { display: block; width: 100%; margin-top: 4px; }
.post-addon { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; background: var(--bg); }
.post-addon:hover { border-color: var(--accent); }
.post-addon img, .post-addon .addon-noshot { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; flex: none; }
.cmp-addon { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.cmp-addon .cmp-x { position: static; }
@media (max-width: 760px) { .addon-page { grid-template-columns: 1fr; } }

/* 留言的愛心與回覆 */
.c-actions { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.c-act { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.c-act:hover { color: var(--text); }
.c-act.on { color: var(--danger); }
.reply-toggle { color: var(--accent); }
.plain-list.reply-list { margin: 6px 0 0 36px; }
.plain-list .comment.reply { border-bottom: 0; padding: 6px 0; }
.reply-form { margin: 6px 0 0 36px; }
.reply-form-btns { display: flex; flex-direction: column; gap: 4px; }

/* 編輯貼文、留言 */
.edit-box { margin: 6px 0; }
.edit-box textarea { width: 100%; box-sizing: border-box; }
.edit-btns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

/* 群組聊天 */
.dm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 13px; flex: none; }
.thread-head .group-icon { width: 32px; height: 32px; }
.plain-list .group-invite { display: block; background: var(--line); border-radius: 6px; padding: 8px; margin-bottom: 6px; border-bottom: 0; }
.group-invite-btns { display: flex; gap: 8px; margin-top: 6px; }
.msg-system { align-self: center; text-align: center; }
.msg-from { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.group-modal { max-width: 460px; }
.group-modal h3 { margin: 14px 0 4px; font-size: 15px; }
.group-modal input:not([type]) { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.group-rename { display: flex; gap: 8px; align-items: center; }
.person-checks { max-height: 240px; overflow-y: auto; margin-top: 8px; }
.person-check, .person-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }

/* 首頁：每一類一橫列，左右捲動 */
#home-view { margin-top: 24px; }
.home-section { margin-bottom: 24px; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.home-head h2 { margin: 0; font-size: 19px; }
.hrow { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.hcard { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-decoration: none; position: relative; min-height: 120px; }
a.hcard:hover { border-color: var(--accent); }
.hcard-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.hcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.hthumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--line); display: flex; align-items: center; justify-content: center; }
.hauthor { display: flex; align-items: center; gap: 6px; }
.hbody { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.hbody.long { -webkit-line-clamp: 5; }
.hlabel { position: absolute; top: 6px; right: 6px; z-index: 1; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--accent); color: var(--accent-text); }
.hempty { margin: 8px 0; }
@media (max-width: 600px) { .hcard { flex-basis: 70vw; } }

/* 登入方式的品牌圖示 */
.brand-icon { display: inline-flex; flex: none; vertical-align: middle; }
.brand-icon svg { width: 100%; height: 100%; }
a.menu-item:has(> .brand-icon) { display: flex; align-items: center; gap: 10px; }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.announce-actions { gap: 8px; align-items: center; margin-top: 10px; }

/* 首頁公告 */
.announce { border: 1px solid var(--accent); border-left-width: 4px; border-radius: 8px; background: var(--panel); padding: 12px 14px; margin-bottom: 20px; }
.announce-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.announce-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 下載頁 */
.download-big { display: inline-block; font-size: 18px; padding: 14px 26px; margin: 8px 0; }
.download-page h3 { margin: 18px 0 6px; font-size: 16px; }

/* 沒有縮圖的卡片：標籤放在第一行右邊，不蓋住文字 */
.hlabel.inline { position: static; align-self: flex-end; margin-bottom: -2px; }

/* 群組：頭貼、@ 標記；對話列表名字固定一行；訊息之間多留空間 */
.mention { color: var(--accent); font-weight: 600; }
.msg.mine .mention { color: var(--accent-text); text-decoration: underline; }
.msg.at-me .msg-body { box-shadow: 0 0 0 2px var(--accent); }
.mention-flag { color: var(--danger, #e5534b); font-weight: 600; }
.group-avatar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.conv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-msgs { gap: 16px; }
.msg-time { margin-top: 4px; font-size: 11px; }

/* 個人頁：暱稱、ID，右邊是 Xbox 框 */
.profile-head .profile-names { flex: 1; min-width: 0; }
/* 後台使用者面板右上角的關閉 */
.profile-head > .user-detail-close { margin-left: auto; align-self: flex-start; }
.profile-names .handle { font-size: 17px; }
.xbox-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; white-space: nowrap; }
.xbox-chip .brand-icon { color: #107c10; }
.xbox-name { font-weight: 500; }
.toolbar .spacer { flex: 1; }

/* 法律頁面的語言切換 */
.lang-switch { margin: 0 0 8px; }

/* ---------- 管理後台：商店 ---------- */
.shop-split:has(#shop-detail:not(.hidden)) { grid-template-columns: minmax(0, 1fr) 460px; }
@media (max-width: 1000px) { .shop-split:has(#shop-detail:not(.hidden)) { grid-template-columns: 1fr; } }
#shop-detail { margin: 16px 0; align-self: start; }
/* 編輯面板跟著畫面走：往下捲清單時面板一直在右邊，太長的話面板自己捲 */
@media (min-width: 1001px) { #shop-detail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; } }
#shop-detail h3 { margin: 18px 0 8px; font-size: 15px; }
#shop-detail input:not([type=checkbox]):not([type=color]):not([type=range]), #shop-detail select, #shop-detail textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; box-sizing: border-box; }
.shop-detail-head h2 { margin: 0; }
.shop-bulk { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 8px; align-items: center; }
.shop-cell-prev { width: 64px; height: 48px; text-align: center; }
.shop-cell-prev .shop-prev-banner { width: 60px; height: 34px; border-radius: 4px; overflow: hidden; }
.shop-cell-prev .shop-prev-name { font-size: 13px; }
.shop-cell-prev .shop-prev-bubble { font-size: 11px; padding: 2px 6px; }
.shop-status { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--line); white-space: nowrap; }
.shop-status.on { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.shop-status.limited, .shop-status.wait { background: color-mix(in srgb, #e39a14 25%, transparent); }
.r-common { color: #8f98a8; } .r-rare { color: #3f9bf0; } .r-epic { color: #a86ef5; } .r-legend { color: #e39a14; }
/* 神話：紅到紫的漸層字 */
.r-mythic { color: #ff3d6e; background: linear-gradient(90deg, #ff4d6d, #c13dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shop-preview-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.shop-preview { height: 140px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; padding: 0; }
.shop-preview.dark { background: #16181d; color: #e9edf2; }
.shop-preview.light { background: #f3f4f6; color: #1d2025; }
.shop-preview .shop-prev-banner { width: 100%; height: 100%; }
.shop-prev-name { font-size: 22px; font-weight: 800; }
.shop-prev-bubble { display: inline-block; padding: 7px 12px; border-radius: 12px; background: #2f9150; color: #fff; }
.shop-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.shop-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-field.check { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; }
/* 裝飾品名稱：整列；各語言一行「語言名＋輸入框」（面板只有 460px 寬，兩欄的話輸入框太窄） */
.shop-names { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.name-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.shop-names label.name-cell, .card .shop-names label.name-cell { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; margin: 0; }
.card .shop-names label { margin: 0; }
.card .shop-names label input { margin-top: 0; }
.name-more summary { cursor: pointer; font-size: 14px; padding: 2px 0; }
.name-more[open] summary { margin-bottom: 6px; }
.style-editor { display: flex; flex-direction: column; gap: 10px; }
.style-fields { display: flex; flex-direction: column; gap: 10px; }
.style-field { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; align-items: center; }
.style-field.wide { grid-template-columns: 1fr; }
.style-label { color: var(--muted); font-size: 13px; }
.style-colors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.style-color-item { display: inline-flex; gap: 2px; align-items: center; }
.shop-color { display: inline-flex; align-items: center; gap: 4px; }
.shop-color input[type=color] { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
#shop-detail .shop-color input[type=text] { width: 92px; }
.style-numbox { display: flex; gap: 8px; align-items: center; }
.style-numbox input[type=range] { flex: 1; }
#shop-detail .style-num { width: 80px; }
.style-json { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.style-adv summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.pixel-editor { display: flex; flex-direction: column; gap: 8px; }
.pixel-editor label { display: inline-flex; align-items: center; gap: 4px; }
#shop-detail .pixel-editor input[type=number] { width: 60px; }
.pixel-wrap { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pixel-grid { display: grid; gap: 1px; background: var(--line); padding: 1px; touch-action: none; user-select: none; }
.pixel-cell { width: 20px; height: 20px; cursor: crosshair; }
.pixel-cell.empty { background: repeating-conic-gradient(#3a3f4a 0 25%, #2a2e36 0 50%) 0 0 / 10px 10px; }
.pixel-palette { display: flex; flex-direction: column; gap: 6px; }
.pixel-swatch-wrap { display: flex; align-items: center; gap: 6px; }
.pixel-swatch { width: 26px; height: 26px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pixel-swatch.on { border-color: var(--text); }
.pixel-swatch.empty { background: var(--line); color: var(--muted); }

.shop-detail-head { display: flex; align-items: center; gap: 8px; }
.shop-detail-head .spacer { flex: 1; }

/* 發放：打 @ 搜尋玩家 */
.user-picker { position: relative; }
.user-picker-list { position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 30; margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); max-height: 280px; overflow-y: auto; }
.user-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.user-picker-item.on, .user-picker-item:hover { background: var(--line); }
.user-picker-name { font-weight: 600; }
/* 方塊幣獎勵 */
.rewards-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; }
.rewards-toggle input { width: auto; }
.rewards-days { display: grid; grid-template-columns: repeat(7, minmax(70px, 1fr)); gap: 8px; }
.rewards-days label { display: flex; flex-direction: column; gap: 4px; }
.rewards-num { width: 100px; }
.rewards-days .rewards-num { width: 100%; }
@media (max-width: 700px) { .rewards-days { grid-template-columns: repeat(4, 1fr); } }
/* 後台的取得紀錄：篩選列 */
.gains-filters { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
/* 後台的意見回饋 */
.feedback-item { margin-bottom: 10px; }
.feedback-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.feedback-item.done { opacity: .6; }
.feedback-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }

/* 安裝統計：每日人數的長條圖、名單裡最近 14 天的格子 */
.install-daily { display: flex; align-items: stretch; gap: 3px; height: 140px; margin-top: 10px; }
.install-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.install-day-n { font-size: 11px; color: var(--muted); }
/* 長條的高度是「長條區」的百分比（上面留 16px 給人數）：人數和日期不算在裡面，最高那天剛好頂到，其他天照比例，底部都對齊 */
.install-track { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; padding-top: 16px; box-sizing: border-box; }
.install-bar { position: relative; width: 100%; max-width: 22px; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 85%, transparent); }
.install-day.today .install-bar { background: var(--accent); }
.install-bar > .install-day-n { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; line-height: 14px; }
/* 日期固定高度：有日期和沒有日期的那天，長條的底部才會對齊 */
.install-day-date { font-size: 11px; height: 14px; line-height: 14px; white-space: nowrap; }
.install-strip { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.install-strip i { width: 8px; height: 14px; border-radius: 2px; background: var(--line); }
.install-strip i.on { background: var(--accent); }
.install-strip > span { margin-left: 6px; }

/* 高級管理員：管理後台只能看（web/admin.js 的 viewOnly），修改用的按鈕不顯示 */
.view-only :is(#shop-new, #announce-save, #announce-clear) { display: none; }
/* 管理後台：開房狀態 */
.admin-room { margin-bottom: 12px; }
.admin-room-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.admin-room p { margin: 6px 0; }
/* 使用者分頁：勾選欄、批量發放方塊幣（admin.js drawBulk） */
.pick-col { width: 28px; }
.pick-col input { margin: 0; cursor: pointer; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.bulk-bar input { width: auto; flex: 0 1 220px; }
.bulk-bar .bulk-names { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 檢舉附的截圖：縮圖排一列（換到下一行），點了在新分頁開原圖 */
.report-case .plain-list li:has(> .report-shots) { flex-wrap: wrap; }
.report-shots { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.report-shots img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }

/* 使用者名單：官方認證的勾勾（暱稱後面，跟 App 一樣的綠色） */
.verified { color: var(--accent); margin-left: 4px; vertical-align: -3px; flex: none; }

/* 後台「分析」分頁的圖表：系列顏色固定照順序（色盲也分得開的一組），深色模式另外一組 */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; }
@media (prefers-color-scheme: dark) {
  :root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; }
}
.an-filters { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.an-card { margin-top: 16px; }
.an-card h3 { margin: 0 0 4px; }
.an-card > p { margin: 0 0 8px; }
.an-chart-wrap { position: relative; }
.an-chart { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.an-grid { stroke: var(--line); stroke-width: 1; }
.an-axis { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.an-tick { fill: var(--muted); font-size: 12px; }
.an-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.an-dot { stroke: var(--panel); stroke-width: 2; }
.an-chart .hidden { display: none; }
.an-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.15); white-space: nowrap; }
.an-tip-date { color: var(--muted); margin-bottom: 2px; }
.an-tip-row { display: flex; align-items: center; gap: 6px; }
.an-tip-row b { margin-left: auto; padding-left: 12px; font-weight: 600; }
.an-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.an-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-retention td, .an-retention th { text-align: center; }
.an-retention td:first-child, .an-retention th:first-child { text-align: left; white-space: nowrap; }
.an-cell { font-variant-numeric: tabular-nums; }
.an-cell-dark { color: #fff; }
.an-funnel { display: flex; flex-direction: column; gap: 8px; }
.an-funnel-row { display: grid; grid-template-columns: 9em 1fr 9em; align-items: center; gap: 12px; font-size: 14px; }
.an-funnel-track { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; }
.an-funnel-bar { display: block; height: 100%; border-radius: 6px; background: var(--series-1); }
.an-funnel-n { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .an-funnel-row { grid-template-columns: 7em 1fr; } .an-funnel-n { grid-column: 2; } }
.an-toggle { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; cursor: pointer; }
/* 操作後要不要通知玩家 */
label.notify-toggle, .card label.notify-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; cursor: pointer; }
.notify-toggle input, #user-detail .notify-toggle input { width: auto; }