/* 攻略（js/guide.js）：蓋住整個遊戲畫面的文件頁；顏色沿用遊戲的皮革金色 */
#guide {
  position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  background: #120e09; color: var(--text); user-select: text; -webkit-user-select: text;
  padding: var(--st, 0) var(--sr, 0) 0 var(--sl, 0);
}
html.guide-open #btn-full, html.guide-open #btn-unzoom, html.guide-open #screen-tip { display: none !important; }
/* 頁首（老闆 11-03：沒有目錄、沒有側欄）：第一排 上一頁・名稱・搜尋・回到遊戲；第二排 六個分頁，現在這頁底下一條金線。內容和頁首都對齊置中的一欄 */
#guide .g-head { position: relative; z-index: 2; background: linear-gradient(180deg, #33261a 0%, #1f170f 100%); border-bottom: 1px solid #4a3820;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
#guide .g-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 196, 110, 0.45), transparent); }
#guide .g-bar, #guide .g-tabs { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
#guide .g-bar { display: flex; align-items: center; gap: 14px; height: 58px; }
#guide .g-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: bold; color: var(--gold); letter-spacing: 4px; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(201, 162, 74, 0.25); }
#guide .g-gem { width: 10px; height: 10px; transform: rotate(45deg); background: linear-gradient(135deg, #ffe7a0, #b8862e); box-shadow: 0 0 8px rgba(255, 210, 120, 0.55); flex: none; }
#guide .g-search { position: relative; flex: 1; max-width: 420px; margin-left: auto; display: flex; align-items: center; }
#guide .g-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: #9a8662; pointer-events: none; }
#guide #guide-q { width: 100%; height: 36px; padding: 0 14px 0 36px; background: rgba(10, 8, 5, 0.75); color: var(--text); border: 1px solid #4a3a22; border-radius: 18px;
  font: inherit; font-size: 14px; outline: 0; transition: border-color 0.15s, box-shadow 0.15s; }
#guide #guide-q::placeholder { color: #85745a; }
#guide #guide-q:focus { border-color: #c9a24a; box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.15); }
#guide #guide-close { flex: none; height: 36px; padding: 0 18px; border-radius: 18px; font-size: 14px; white-space: nowrap; }
/* 分頁：字＋底下一條金線（現在這頁）；滑過變亮；有新東西右上紅點 */
#guide .g-tabs { display: flex; gap: 2px; }
#guide .g-tabs a { position: relative; padding: 10px 18px 13px; color: #c8b48a; font-size: 15px; font-weight: bold; letter-spacing: 2px; text-decoration: none; white-space: nowrap;
  border-radius: 8px 8px 0 0; transition: color 0.15s, background 0.15s; }
#guide .g-tabs a:hover { color: #fff1c8; background: rgba(255, 220, 140, 0.06); }
#guide .g-tabs a.on { color: #ffe8a8; }
#guide .g-tabs a.on::before { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #a87c2c, #ffe08a, #a87c2c); box-shadow: 0 0 10px rgba(255, 214, 120, 0.5); }
#guide .g-tabs a.new::after { content: ''; position: absolute; top: 8px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 0 2px #2a2015; }
/* 回上一頁（js/guide.js back）：看過別的頁才出現；手機要好按，至少 36 × 32 */
#guide .g-back { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; color: var(--gold); border-radius: 18px; }
#guide .g-back.hidden { display: none; }
#guide-body { min-height: 0; }
/* 捲軸：細、深色的軌道、皮革金色的把手 */
#guide ::-webkit-scrollbar { width: 10px; height: 10px; }
#guide ::-webkit-scrollbar-track { background: #120e09; }
#guide ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #6e5530, #4a3820); border: 2px solid transparent; background-clip: padding-box; border-radius: 6px; }
#guide ::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #a8843c, #6e5530); border: 2px solid transparent; background-clip: padding-box; }
#guide ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { #guide-body, #guide .g-scroll { scrollbar-width: thin; scrollbar-color: #6e5530 #120e09; } }
#guide-body { overflow-y: auto; padding: 28px 24px 80px; font-size: 15px; line-height: 1.75; -webkit-overflow-scrolling: touch; }
.g-page { max-width: 992px; margin: 0 auto; }   /* 和頁首同一欄（1040 - 左右 24） */
/* 攻略百科（原本的側欄目錄）：群組標題＋一格一格的文章 */
.g-wiki-group { margin-bottom: 22px; }
.g-wiki-group h3 { margin-top: 18px !important; }
.g-wiki-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
#guide-body .g-wiki-item { position: relative; display: flex; align-items: center; min-height: 46px; padding: 8px 14px; border-radius: 8px; background: #1c160e; border: 1px solid #33281a;
  color: #f0e2bd; font-size: 15px; text-decoration: none; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
#guide-body .g-wiki-item:hover { border-color: #a8873a; background: #241b11; text-decoration: none; transform: translateY(-1px); }
#guide-body .g-wiki-item.new::after { content: ''; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ff4a3a; }
.g-wiki-upd .g-wiki-item { border-color: #6a2a20; background: #2a1612; }
#guide-body h1 { margin: 0 0 16px; font-size: 24px; color: var(--gold); letter-spacing: 2px; padding-bottom: 12px;
  border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--border-hi), rgba(201, 162, 74, 0.15) 60%, transparent) 1; }
#guide-body h2 { margin: 0 0 8px; font-size: 21px; color: var(--gold); }
#guide-body h3 { margin: 28px 0 10px; font-size: 17px; color: #f0d890; display: flex; align-items: center; gap: 8px; }
#guide-body h3::before { content: ''; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; opacity: 0.85; }
#guide-body .g-box h3, #guide-body .g-mon-head h3 { margin-top: 4px; }
#guide-body p { margin: 8px 0; }
#guide-body ul { margin: 8px 0; padding-left: 22px; }
#guide-body li { margin: 4px 0; }
#guide-body a { color: #8fc3ff; text-decoration: none; }
#guide-body a:hover { text-decoration: underline; }
#guide-body .g-lead { font-size: 16px; color: #f3e8d0; }
#guide-body .bad { color: #ff8a6b; }

/* 插圖 */
.g-figs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.g-fig { margin: 0; display: flex; flex-direction: column; align-items: center; background: radial-gradient(ellipse at 50% 80%, #3a3020 0%, #1c160e 70%); border: 1px solid #3a2c1a; border-radius: 6px; padding: 4px 4px 6px; }
.g-fig figcaption { font-size: 12px; color: var(--dim); text-align: center; max-width: 120px; }
.g-fig figcaption:empty { display: none; }
.g-map { margin: 12px 0; }
.g-map canvas { width: 100%; max-width: 900px; height: auto; border: 1px solid #3a2c1a; border-radius: 6px; }
.g-map figcaption { font-size: 12px; color: var(--dim); margin-top: 4px; }
.g-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: #f3e8d0; }
.g-item img { width: 32px; height: 32px; vertical-align: middle; }   /* 原本的大小（圖示都是 32 × 32，js/icons.js；老闆：不要縮小） */
.g-skill { width: 20px; height: 20px; vertical-align: middle; }

/* 表格、提示 */
.g-scroll { overflow-x: auto; margin: 12px 0; border: 1px solid #2e2418; border-radius: 8px; }
.g-scroll .g-table tr:last-child td { border-bottom: 0; }
.g-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.g-table th { text-align: left; color: var(--gold); font-weight: normal; background: #2a2014; padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.g-table td { padding: 7px 10px; border-bottom: 1px solid #2e2418; vertical-align: top; }
.g-table tr:hover td { background: #1c160e; }
.g-table.num td:not(:first-child) { text-align: center; }
.g-tip { margin: 14px 0; padding: 10px 14px; background: #1f2a1a; border-left: 3px solid #7fd17f; border-radius: 3px; }
.g-tip b:first-child { display: block; color: #9fe39f; font-size: 13px; }
.g-tip.warn { background: #2e1c14; border-left-color: #ff8a6b; }
.g-tip.warn b:first-child { color: #ff9f7f; }
.g-box { background: #1a140d; border: 1px solid #3a2c1a; border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.g-box h3 { margin-top: 0; }
.g-tips li { margin: 8px 0; }

/* 圖鑑 */
.g-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.g-filter input, .g-filter select {
  background: #0f0c08; color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 6px 8px; font: inherit; font-size: 14px;
}
.g-filter input { flex: 1; min-width: 160px; max-width: 320px; }
.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.g-card { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; background: #1a140d; border: 1px solid #3a2c1a; border-radius: 6px; color: var(--text) !important; text-decoration: none !important; }
.g-card:hover { border-color: var(--border); background: #221a10; }
.g-card .g-fig { flex: none; padding: 0; }
.g-card .g-fig canvas { width: 80px !important; height: 80px !important; }
.g-card .dim { font-size: 12px; line-height: 1.5; }
.g-card > div { min-width: 0; }
/* 怪物卡片右邊的「詳細資料 ›」：讓大家知道整張可以點（老闆）；圖鑑、推薦地點、搜尋的怪物卡片都有 */
.g-card::after { content: "詳細資料 ›"; flex: none; margin-left: auto; padding: 4px 8px; font-size: 12px; font-weight: bold; color: #f2d48a; white-space: nowrap;
  background: linear-gradient(#3a2c1a, #261c11); border: 1px solid #5a4528; border-radius: 4px; }
.g-card:hover::after { border-color: var(--gold); color: #fff4cc; }
.g-tag { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; line-height: 18px; border-radius: 9px; background: #5a2a1e; color: #ffb8a0; vertical-align: middle; }
.g-tag.boss { background: #5a4a14; color: #ffe066; }
.g-mon-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.g-mon-head > div { flex: 1; min-width: 260px; }

/* 討論版：頁首、一行的發問欄、全部／待回答、問題卡片（頭像、標題、時間、回答數），展開是有頭像的對話 */
.g-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--border-hi), rgba(201, 162, 74, 0.15) 60%, transparent) 1; }
#guide-body .qa-hero h1 { margin: 0; padding: 0; border: 0; font-size: 26px; letter-spacing: 3px; }
.qa-hero p { margin: 4px 0 0; color: var(--dim); }
.qa-stats { display: flex; gap: 18px; color: var(--dim); font-size: 13px; }
.qa-stats b { display: block; color: #f3e8d0; font-size: 22px; line-height: 1.1; font-weight: normal; text-align: right; }
.qa-ask { background: #1c160e; border: 1px solid #3a2c1a; border-radius: 10px; padding: 10px; transition: border-color 0.2s, box-shadow 0.2s; }
.qa-ask.open, .qa-ask:focus-within { border-color: var(--border); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.08); }
.qa-ask-row { display: flex; gap: 8px; }
.qa-ask-row input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 16px; padding: 6px 4px; }
.qa-ask-row input::placeholder { color: #8a7a5c; }
.qa-ask-row button { flex: none; padding: 6px 18px; border-radius: 6px; }
.qa-ask textarea { display: none; width: 100%; min-height: 70px; margin-top: 8px; resize: vertical; background: #120e09; color: var(--text); border: 1px solid #3a2c1a; border-radius: 6px; padding: 8px; font: inherit; font-size: 14px; }
.qa-ask.open textarea { display: block; }
.qa-ask-hint { display: none; margin: 6px 2px 0 !important; font-size: 12px; color: var(--dim); }
.qa-ask.open .qa-ask-hint { display: block; }
/* 自己的文章、回覆：5 分鐘內可以修改、刪除（剩幾分） */
.qa-own { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 8px; padding: 4px 10px; border-radius: 6px; background: #241c10; border: 1px dashed #5a4824; font-size: 12px; color: #d8c08a; }
.qa-own a { color: #ffd870 !important; font-weight: bold; }
.qa-bubble .qa-own { margin: 6px 0 0; }
.qa-edit input, .qa-edit textarea { width: 100%; background: #120e09; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 14px; margin-bottom: 6px; }
.qa-edit textarea { min-height: 60px; resize: vertical; }
/* @點名 */
.qa-at { color: #9ad0ff; font-weight: bold; }
.qa-at-btn { margin-left: auto; font-size: 12px; color: #9ad0ff !important; }
.qa-tabs { display: flex; gap: 4px; margin: 18px 0 10px; border-bottom: 1px solid #2e2418; }
.qa-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: 6px 12px; color: var(--dim); font-size: 14px; }
.qa-tabs button:hover { background: none; color: var(--text); }
.qa-tabs button.on { color: #fff3cf; border-bottom-color: var(--gold); }
.qa-tabs i { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #5a2a1e; color: #ffb8a0; font-size: 11px; }
.qa-item { border-bottom: 1px solid #2a2016; }
.qa-q { display: flex; align-items: center; gap: 12px; padding: 12px 6px; color: var(--text) !important; text-decoration: none !important; border-radius: 8px; transition: background 0.15s; }
.qa-q:hover { background: #1c160e; }
.qa-main { flex: 1; min-width: 0; }
.qa-title { font-size: 15px; color: #f3e8d0; line-height: 1.45; }
.qa-item.open .qa-title { color: var(--gold); }
.qa-meta { font-size: 12px; color: var(--dim); margin-top: 2px; }
.qa-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: bold;
  color: hsl(var(--h), 60%, 88%); background: hsl(var(--h), 32%, 28%); border: 1px solid hsl(var(--h), 35%, 42%); }
.qa-av.sm { width: 28px; height: 28px; font-size: 12px; }
.qa-n { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 3px 8px; border-radius: 8px; background: #2a2014; color: var(--dim); font-size: 11px; line-height: 1.3; }
.qa-n b { color: var(--gold); font-size: 17px; font-weight: bold; }
.qa-n.none { flex-direction: row; background: none; border: 1px dashed #5a4a30; color: #c9a86a; padding: 6px 8px; }
.qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.qa-item.open .qa-body { grid-template-rows: 1fr; }
.qa-body > div { overflow: hidden; padding: 0 6px 0 54px; }
.qa-item.open .qa-body > div { padding-bottom: 14px; }
.qa-text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.qa-ask-text { margin: 0 0 12px; color: #e6dcc6; }
.qa-r { display: flex; gap: 10px; margin: 10px 0; }
.qa-bubble { flex: 1; min-width: 0; background: #1c160e; border: 1px solid #2e2418; border-radius: 4px 12px 12px 12px; padding: 8px 12px; }
.qa-r-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: 13px; }
.qa-r-head b { color: #f0d890; }
.qa-r-head span { color: var(--dim); font-size: 11px; }
.qa-reply-form { margin-top: 12px; }
.qa-reply-form textarea { width: 100%; min-height: 56px; resize: vertical; background: #120e09; color: var(--text); border: 1px solid #3a2c1a; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; margin-bottom: 6px; }
.qa-reply-form textarea:focus { outline: 0; border-color: var(--border); }
/* 置頂公告：金色的底與左邊的線 */
.qa-item.qa-pin { background: linear-gradient(90deg, rgba(201, 162, 74, 0.12), rgba(201, 162, 74, 0.02) 70%); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; margin-bottom: 6px; }
.qa-av-pin { color: #2a1e0a; background: linear-gradient(#f0d070, #b8892e); border-color: #ffe9a8; }
.qa-tag { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 4px; background: var(--gold); color: #2a1e0a; font-size: 12px; font-weight: bold; line-height: 20px; vertical-align: 2px; }
.qa-empty { text-align: center; color: var(--dim); padding: 30px 0; }
/* 紅點：新的文章、新回覆（頁首分頁的紅點在上面 .g-tabs） */
.qa-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 6px rgba(255, 74, 58, 0.7); vertical-align: 2px; }
.qa-item.new .qa-title { color: #fff; font-weight: bold; }
.qa-fresh { margin-left: 8px; padding: 0 6px; border-radius: 8px; background: #5a1e16; color: #ffb0a0; font-size: 11px; }
.qa-r-new { font-style: normal; padding: 0 5px; border-radius: 4px; background: #c8392a; color: #fff; font-size: 11px; line-height: 16px; }
/* 有更新的文章：打開時最上面寫改了什麼 */
.g-upd { display: flex; align-items: baseline; gap: 8px; margin: -4px 0 16px; padding: 8px 12px; border-radius: 6px; background: #2e1612; border: 1px solid #6a2a20; color: #ffd8cc; font-size: 14px; }
.g-upd b { flex: none; padding: 0 6px; border-radius: 4px; background: #c8392a; color: #fff; font-size: 12px; }
.g-upd span { flex: none; color: #ff9f8a; font-size: 12px; }
.g-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 20px 0 8px; }
.g-pager button { min-width: 36px; height: 34px; border-radius: 17px; padding: 0 10px; }
.g-pager button.on { background: linear-gradient(#9a7430, #5c4416); color: #fff3cf; border-color: var(--border-hi); }
@media (max-width: 759px) {
  .qa-body > div { padding-left: 6px; }
  .qa-stats b { font-size: 18px; }
}

/* 窄螢幕（手機）：第一排 上一頁・名稱・回到遊戲，第二排搜尋，第三排六個分頁平均排開（不用左右滑） */
@media (max-width: 759px) {
  #guide .g-bar { flex-wrap: wrap; gap: 8px 10px; height: auto; padding: 8px 12px; }
  #guide .g-title { font-size: 17px; letter-spacing: 2px; }
  #guide #guide-close { margin-left: auto; height: 34px; padding: 0 14px; }
  #guide .g-search { order: 5; flex-basis: 100%; max-width: none; margin: 0; }
  #guide .g-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0 4px; }
  #guide .g-tabs a { padding: 9px 0 11px; text-align: center; font-size: clamp(12px, 3.6vw, 14px); letter-spacing: 0; border-radius: 6px 6px 0 0; }
  #guide .g-tabs a.on::before { left: 6px; right: 6px; }
  #guide .g-tabs a.new::after { top: 5px; right: 3px; }
  .g-wiki-list { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  #guide-body .g-wiki-item { min-height: 44px; padding: 8px 10px; font-size: 14px; }
  #guide-body { padding: 14px 14px 80px; font-size: 15px; }
  #guide-body h1 { font-size: 20px; }
  .g-fig canvas { width: 96px !important; height: 96px !important; }
  .g-fig canvas[data-doll] { height: 120px !important; }
  .g-cards { grid-template-columns: 1fr; }
}

/* ── 交易版（js/market.js）：免責說明、我的信用、發帖表單、帖子卡片（賣紅、收藍）、信用徽章、在線上、評價、行情 ── */
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.mk-warn { flex: 1 1 260px; margin: 0 !important; font-size: 13px; line-height: 1.5; color: #c8b088; }
.mk-warn p { margin: 0 !important; }
.mk-ban { margin-top: 2px !important; color: #ff9a80; font-weight: bold; }
.mk-fee { margin: 4px 0 0 !important; font-size: 13px; }
.mk-bar .mk-new { margin-bottom: 0; }
.mk-me { padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: #1c160e; border: 1px solid #3a2c1a; }
.mk-me-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
.mk-me-name { color: var(--gold); font-weight: bold; }
.mk-me input, .mk-form input:not([type=radio]):not([type=checkbox]), .mk-form select, .mk-filter input, .mk-filter select, .mk-note {
  padding: 6px 8px; background: #120e09; color: var(--text); border: 1px solid #3a2c1a; border-radius: 6px; font: inherit; font-size: 15px; min-width: 0; }
.mk-me button, .mk-form button, .mk-card button, .mk-filter button { padding: 6px 14px; border-radius: 6px; }
.mk-hint { flex-basis: 100%; font-size: 12px; }
.mk-rule { margin: 6px 0 0 !important; font-size: 13px; }
.mk-rule summary { cursor: pointer; width: fit-content; }
.mk-rule summary:hover { color: var(--text); }
.mk-new { margin-bottom: 12px; padding: 8px 22px !important; font-size: 16px; border-radius: 8px; }
.mk-form { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: #1c160e; border: 1px solid var(--border); }
.mk-form h3 { margin-top: 0 !important; }
.mk-kind, .mk-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.mk-line > span:first-child { width: 3em; color: var(--dim); }
.mk-line input { flex: 1; }
.mk-line input[type=number] { flex: 0 1 140px; }
.mk-form textarea { width: 100%; min-height: 64px; margin: 8px 0; resize: vertical; background: #120e09; color: var(--text); border: 1px solid #3a2c1a; border-radius: 6px; padding: 8px; font: inherit; font-size: 15px; }
.mk-chk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mk-unit { margin: -4px 0 4px 3.6em; }
.mk-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.mk-filter input[type=search] { flex: 1 1 200px; }
/* 帖子 */
.mk-card { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: #1a140d; border: 1px solid #33281a; border-left: 4px solid #8a3a2a; }
.mk-card.buy { border-left-color: #2e6a9a; }
.mk-card.deal { border-left-color: #d0a030; background: linear-gradient(90deg, rgba(208, 160, 48, 0.08), #1a140d 60%); }
.mk-card.rate { border-left-color: #4a9a4a; }
.mk-card.off { opacity: 0.72; }
.mk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-icon { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex: none; }
.mk-kindtag { flex: none; padding: 1px 8px; border-radius: 4px; font-size: 13px; font-weight: bold; color: #fff; background: #b04a32; }
.mk-kindtag.buy { background: #2e6a9a; }
.mk-title { flex: 1; min-width: 8em; font-size: 17px; color: #f8ecd0; word-break: break-word; }
.mk-money { margin-left: auto; font-size: 20px; font-weight: bold; color: #ffd870; white-space: nowrap; text-align: right; }
.mk-money small { display: block; font-size: 12px; font-weight: normal; color: #d8c08a; }
.mk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.mk-tag { padding: 0 7px; border-radius: 9px; font-size: 12px; line-height: 20px; background: #2a2014; color: #d8c8a0; border: 1px solid #3a2c1a; }
.mk-tag.nego { background: #24361e; color: #b8e8a0; border-color: #3a5a2e; }
.mk-tag.pay { background: #1c2632; color: #b8d4f0; border-color: #2e4058; }
.mk-poster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; }
.mk-who { font-weight: bold; color: #f3e4b8 !important; }
.mk-lv { font-size: 12px; color: var(--dim); }
/* 信用徽章：盾牌＋「信用」＋分數（數字最大最醒目）。分數越高越亮：0 灰、1～9 綠、10～49 藍、50 以上金色發光；負的紅色。大的放在自己的信用和個人頁 */
.mk-cred { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: 7px; font-size: 12px; line-height: 20px; white-space: nowrap;
  border: 1px solid; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5); }
.mk-cred b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.mk-cred-l { opacity: 0.85; letter-spacing: 0.08em; }
.mk-shield { width: 13px; height: 15px; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); flex: none; }
.mk-cred.t0 { background: linear-gradient(#332d27, #221d19); color: #c8bca8; border-color: #4f453a; }
.mk-cred.t1 { background: linear-gradient(#2a5230, #17301b); color: #b4f5a8; border-color: #4a9450; }
.mk-cred.t2 { background: linear-gradient(#264a78, #162a48); color: #b8deff; border-color: #5288c4; }
.mk-cred.t3 { background: linear-gradient(#7a5f1c, #3a2c0a); color: #ffe27a; border-color: #d8b054; box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.3), 0 0 10px rgba(255, 210, 90, 0.4); }
.mk-cred.neg { background: linear-gradient(#64231a, #3a120e); color: #ffb4a4; border-color: #b84c3c; }
.mk-cred.big { gap: 6px; padding: 4px 14px 4px 10px; border-radius: 10px; font-size: 14px; line-height: 28px; }
.mk-cred.big b { font-size: 26px; }
.mk-cred.big .mk-shield { width: 20px; height: 23px; }
/* 關注關鍵字 */
.mk-kw { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; border-radius: 12px; background: #2a2414; border: 1px solid #6a5424; color: #ffe08a; font-size: 14px; line-height: 24px; }
.mk-kw-x { padding: 0 6px !important; background: none !important; border: 0 !important; box-shadow: none !important; color: #c8b088; font-size: 12px; }
.mk-kw-x:hover { color: #fff; }
.mk-kw-add { display: inline-flex; gap: 6px; }
.mk-kw-add input { width: 9em; }
.mk-st.watch { background: #4a3a10; color: #ffe08a; }
.mk-watchq button { padding: 6px 12px; white-space: nowrap; }
.mk-cnt { font-size: 13px; color: var(--dim); }
.mk-cnt b { font-weight: normal; }
.mk-cnt b.bad { color: #ff8a6b; font-weight: bold; }
.mk-ver { display: inline-block; padding: 1px 8px; border-radius: 11px; font-size: 12px; line-height: 20px; background: #163a2a; color: #8ff0c0; border: 1px solid #2e7a5a; white-space: nowrap; }
.mk-ver.big { font-size: 15px; padding: 2px 12px; }
.mk-on, .mk-off { display: inline-block; padding: 0 8px; border-radius: 9px; font-size: 12px; line-height: 20px; white-space: nowrap; border: 1px solid; }
.mk-on { color: #8fe88f; background: #16301a; border-color: #2e6a36; }
.mk-off { color: #a89c88; background: #221d18; border-color: #3a3228; }
.mk-name { font-weight: bold; color: #f3e4b8; }
.mk-sum { cursor: pointer; }
.mk-sum:hover .mk-title { color: #fff6dc; }
.mk-chev { margin-left: auto; color: #c8b088; font-size: 16px; line-height: 1; transition: transform 0.15s; }
.mk-card.open .mk-chev { transform: rotate(180deg); }
.mk-detail { display: none; margin-top: 10px; padding-top: 8px; border-top: 1px solid #2e2418; }
.mk-card.open .mk-detail { display: block; }
.mk-rates-link { font-size: 13px; color: #9ad0ff !important; }
.mk-st.req { background: #5a2a1e; color: #ffc0a8; }
.mk-tip { margin: 6px 0 0 !important; font-size: 13px; }
.mk-wb { padding: 2px 10px !important; font-size: 13px; border-radius: 12px !important; }
.mk-badnote { margin: 6px 0 0; padding: 4px 10px; border-radius: 6px; background: #3a1612; color: #ffb0a0; font-size: 13px; }
.mk-body { margin: 8px 0 4px !important; white-space: pre-wrap; word-break: break-word; color: #e6dcc6; }
.mk-st { padding: 0 8px; border-radius: 9px; font-size: 12px; line-height: 20px; background: #3a2c1a; color: #f0d27a; }
.mk-st.deal { background: #5a4410; color: #ffe08a; }
.mk-st.done { background: #2a2420; color: var(--dim); }
.mk-reqs { margin: 10px 0 6px; padding: 8px 10px; border-radius: 8px; background: #221a10; border: 1px solid #3a2c1a; }
.mk-req { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0; border-top: 1px solid #2e2418; }
.mk-req:first-of-type { border-top: 0; }
.mk-req > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-note-q { flex-basis: 100%; color: #f0e0b8; font-size: 14px; }
.mk-askrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mk-askrow .mk-note { flex: 1 1 200px; }
.mk-card .g-row { margin-top: 8px; }
.mk-foot { margin-top: 6px; text-align: right; font-size: 12px; display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.mk-foot a { color: var(--dim) !important; }
.mk-foot .mk-note { flex: 1 1 200px; font-size: 13px; }
.mk-stars { display: flex; gap: 14px; margin: 8px 0; font-size: 15px; }
.mk-stars .good { color: #9fe39f; } .mk-stars .bad { color: #ff8a6b; }
.mk-card.rate .mk-note { width: 100%; }
.mk-more { display: block; width: 100%; margin: 10px 0; padding: 10px !important; }
/* 最近成交（行情） */
.mk-recent { display: flex; flex-direction: column; gap: 2px; }
.mk-rec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid #241c12; font-size: 14px; }
.mk-rec .mk-icon { width: 24px; height: 24px; }
.mk-rec-t { flex: 1; min-width: 8em; }
.mk-rec b { color: #ffd870; }
/* 個人頁（點名字）：蓋在交易版上面 */
.mk-prof { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); padding: 16px; }
.mk-prof.hidden { display: none; }
.mk-prof-in { position: relative; width: min(520px, 100%); max-height: 80vh; overflow-y: auto; padding: 16px 18px; border-radius: 12px; background: #1a140d; border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); }
.mk-prof-in h3 { margin-top: 0 !important; font-size: 20px !important; }
.mk-x { position: absolute; right: 10px; top: 10px; padding: 2px 10px !important; }
.mk-rates { list-style: none; padding: 0 !important; }
.mk-rates li { padding: 8px 0; border-bottom: 1px solid #2a2016; }
.mk-rates b.good { color: #9fe39f; } .mk-rates b.bad { color: #ff8a6b; }
@media (max-width: 759px) {
  .mk-money { font-size: 18px; }
  .mk-title { font-size: 16px; }
  .mk-line > span:first-child { width: 100%; }
  .mk-unit { margin-left: 0; }
  .mk-filter { gap: 6px; }
  .mk-filter input[type=search] { flex-basis: 100%; }
  .mk-filter select { flex: 1 1 0; min-width: 0; padding-left: 6px !important; padding-right: 2px !important; }   /* 分類、排序、只看在線上排一行，帖子不要被擠到下面 */
  .mk-filter .mk-chk { flex: none; font-size: 14px; }
}