/* ==========================================================================
   虛寶交易所 — 亮色系、簡潔、RWD
   斷點：< 640 手機一欄 / 640–1023 平板兩欄 / ≥ 1024 桌機兩欄 + 側欄
   ========================================================================== */

:root {
  color-scheme: light;   /* 即使系統是深色，表單元件也維持亮色 */

  /* 底色與表面 */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border: #e7ebef;
  --border-strong: #d5dce3;

  /* 文字 */
  --text: #1a1d21;
  --text-dim: #5f6b76;
  --text-faint: #98a4b0;

  /* 主色（LINE 綠） */
  --accent: #06c755;
  --accent-dark: #05a948;
  --accent-soft: #e8f9f0;
  --accent-ink: #ffffff;

  /* 買賣別 */
  --sell: #0b8a48;
  --sell-soft: #e8f6ee;
  --buy: #1660d0;
  --buy-soft: #e8f0fd;
  --swap: #7a45e0;
  --swap-soft: #f0e9fd;

  /* 競標。橘色是為了跟買賣別的三個顏色都拉開 —— 競標是「模式」不是「買賣別」，
     兩者會同時出現在同一張卡的標頭上，顏色撞在一起就分不出誰是誰 */
  --auction: #c2600a;
  --auction-soft: #fdefe0;
  --auction-bg: #fffaf4;
  --auction-border: #f3d9bc;

  --danger: #d02f26;
  --danger-soft: #fdecea;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 40, .05);
  --shadow-md: 0 2px 10px rgba(20, 30, 40, .07);
  --shadow-lg: 0 12px 36px rgba(20, 30, 40, .18);

  --topbar-h: 56px;
  --container: 1200px;
  --side-w: 300px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

.hidden { display: none !important; }

/*
 * hidden 屬性的預設值是 display:none，但那只是 UA 樣式 ——
 * 任何自訂的 display(例如 .btn 的 inline-flex)都會蓋過它。
 * 沒有這一行的話 <button hidden> 根本藏不住。
 */
[hidden] { display: none !important; }

/* ============================================================ 版面骨架 */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 14px;
}

@media (min-width: 1024px) {
  .container { padding: 0 24px; }
}

/**
 * 主欄 + 側欄。
 * 側欄只在「桌機」而且「真的有側欄廣告」時才出現 —— 沒廣告時不該白白吃掉 300px。
 * has-side 這個 class 由 ads.js 在掛載側欄版位時加上。
 */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-bottom: 40px;
}

.layout-side { display: none; }

@media (min-width: 1024px) {
  .layout.has-side {
    grid-template-columns: minmax(0, 1fr) var(--side-w);
    gap: 24px;
  }
  .layout.has-side .layout-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
  }
}

/* 白色內容區塊 */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ================================================================ 頂列 */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
}

.brand .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.brand .tagline {
  display: none;
  margin-left: 10px;
  padding-left: 11px;
  border-left: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
}

@media (min-width: 768px) {
  .brand .tagline { display: inline; }
}

.spacer { flex: 1; }

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-left: -8px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--text-dim);
}
.back:hover { background: var(--surface-2); }

/* ============================================================== 按鈕 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-primary:disabled:hover { background: var(--accent); }

.btn-ghost { background: var(--surface-2); border-color: var(--border); }
.btn-danger { color: var(--danger); border-color: #f0c4c1; background: var(--surface); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; padding: 13px; border-radius: var(--radius-sm); font-size: 16px; }

.link-btn {
  border: 0;
  background: none;
  padding: 4px 6px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.link-btn:hover { color: var(--text); }

/* ============================================================== 篩選 */

.filters {
  padding: 10px 12px;
  margin: 14px 0 0;
}

/* 手機把篩選列黏在頂列下方，桌機不需要 */
@media (max-width: 1023px) {
  .filters {
    position: sticky;
    top: var(--topbar-h);
    z-index: 30;
  }
}

@media (min-width: 1024px) {
  .filters { padding: 14px 16px; }
}

.filter-row {
  display: flex;
  gap: 6px;
  padding: 3px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }

/* 桌機空間夠，改成換行，不再橫向捲動 */
@media (min-width: 1024px) {
  .filter-row { flex-wrap: wrap; overflow-x: visible; }
}

.chip {
  flex: 0 0 auto;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* 競標篩選跟交易方式不是同一個維度，用一道細線隔開 */
.chip-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: var(--border);
}
.chip[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.chip[aria-pressed="true"]:hover { background: var(--text); }

.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.seg button {
  flex: 1;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* 買賣別與搜尋框在桌機併成一列，省下一整行高度 */
.filter-top { display: flex; flex-direction: column; gap: 6px; }

@media (min-width: 768px) {
  .filter-top { flex-direction: row; align-items: center; gap: 10px; }
  .filter-top .seg { flex: 0 0 auto; width: 300px; }
  .filter-top .search { flex: 1; margin: 0; }
}

.search {
  width: 100%;
  padding: 10px 13px;
  margin: 2px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.search:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search::placeholder { color: var(--text-faint); }

.result-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 10px;
  font-size: 13px;
  color: var(--text-dim);
}

/* ============================================================== 卡片 */

/*
 * 一列一則。
 *
 * 試過多欄的網格，結果是每一格都變成一小團字 —— 眼睛不知道要先看哪裡。
 * 一欄的橫列反而更好讀：標題全部對齊在左邊同一條線上、價格全部對齊在右邊
 * 同一條線上，往下掃的時候只要跟著兩條隱形的直線走。
 * 版面寬度本來就有上限，多欄擠出來的那點密度並不划算。
 */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * 每一列固定高度。
 *
 * 高度不一的話往下掃時會一直被迫重新對焦。等高之後整頁像一份目錄，
 * 掃過去很快；想知道細節就點開浮層。
 */
.card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 96px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}

.card[role="button"] { cursor: pointer; }
.card[role="button"]:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card[role="button"]:active { transform: scale(.994); }
.card[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card.is-dim { opacity: .58; }

/* 競標在左緣留一道細線 —— 不必再多一個標籤就分得出來 */
.card.is-auction { border-left: 3px solid var(--auction); padding-left: 12px; }

/* ---- 左半：次要資訊一行、標題、物品 ---- */

.card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 伺服器、賣家、時間全部壓成一行小字。它們是「順便看到」的，不是要讀的 */
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-dim);
}
.card-meta .meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-meta .meta-server { font-weight: 700; color: var(--text); }
.card-meta .meta-sep { opacity: .45; margin: 0 1px; }

.badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.badge-sell { background: var(--sell-soft); color: var(--sell); }
.badge-buy  { background: var(--buy-soft);  color: var(--buy); }
.badge-swap { background: var(--swap-soft); color: var(--swap); }
.badge-auction { background: var(--auction-soft); color: var(--auction); }
.badge-sold {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}

/* 落點一：整列最大的一行。只給一行，截掉也不能把版面撐開 */
.card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-items {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 右半：落點二 ---- */

.card-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.card-price .price-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: .02em;
}
.card-price strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 「以物易物」「流標」這種不是數字的，字級要收斂 —— 撐到 22px 會很吵 */
.card-price .price-text { font-size: 15px; letter-spacing: 0; }
.card-price .price-sub { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.card-price .price-sub.is-live {
  color: var(--auction);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.card.is-auction .card-price strong { color: var(--auction); }

/* 右緣那個小箭頭：告訴玩家這一列點得下去 */
.card-go {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-left: 2px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform .16s ease, border-color .16s ease;
}
.card[role="button"]:hover .card-go {
  border-color: var(--accent);
  transform: rotate(-45deg) translate(2px, 2px);
}

@media (max-width: 560px) {
  .card { height: 92px; gap: 10px; padding: 0 12px; }
  .card-title { font-size: 15.5px; }
  .card-price strong { font-size: 19px; }
  .card-go { display: none; }
}

/* ============================================================== 浮層 */

/*
 * 刊登詳情。
 *
 * 桌機置中、手機從底部升起 —— 手機上那是拇指構得到的方向，
 * 而且往下滑關掉的手勢跟系統一致。
 */
.modal-backdrop,
.modal-leaving {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 18, 24, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop.is-in { opacity: 1; }
.modal-leaving { pointer-events: none; }

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  /* 進場：往上浮一點點並且放大一點點。就是那個「點開的小動畫」 */
  transform: translateY(10px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
  outline: none;
}
.modal-backdrop.is-in .modal { transform: none; }

.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  .modal-backdrop, .modal-leaving { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    /* 手機從底部升起，所以進場的位移要大一些才看得出方向 */
    transform: translateY(28px);
  }
}

/* ========================================================== 刊登詳情 */

.detail-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
}
.detail-head .card-meta { margin-bottom: 8px; padding-right: 34px; }

.detail-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.detail-seller {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.seller { font-size: 13.5px; font-weight: 700; }

.detail-body { padding: 4px 18px 18px; }

.detail-section { margin-top: 16px; }

.detail-label {
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-faint);
}

.detail-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.detail-total span { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.detail-total strong {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

.detail-foot-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.detail-actions,
.detail-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.detail-actions .btn { flex: 1 1 auto; }
.detail-cta { position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 16px 16px; }
.detail-cta .btn { flex: 1 1 auto; }
.detail-cta .btn-primary { flex: 2 1 auto; }

/* 物品清單 */
.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.item .spacer { flex: 1; }

.item .name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.item .qty { font-size: 13px; font-weight: 700; color: var(--text-dim); }

.item .unit-price {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}
.item .unit-price .sub { font-size: 11.5px; opacity: .75; }

.pays { display: flex; flex-wrap: wrap; gap: 6px; }

.pay {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

/* 內文：貼文結構的一部分，不是附註，所以給正常的內文樣式 */
.note {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 發布頁的預覽：列表上長什麼樣、點開之後長什麼樣，兩段都給 */
.preview-label {
  margin: 20px 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.preview-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.preview-stage .card { cursor: default; }

/* 不喜歡動畫的人就直接出現，不要有過場 */
@media (prefers-reduced-motion: reduce) {
  .card, .card-go, .modal-backdrop, .modal-leaving, .modal { transition: none; }
  .modal { transform: none; }
}

/* ========================================================== 廣告版位 */

/* 預設完全不佔空間。啟用或預覽時才顯示，尺寸先保留好避免版面跳動 */
.ad-slot { display: none; }
.ad-slot.is-on { display: block; }

.ad-slot--top {
  margin: 14px 0 0;
  min-height: 100px;              /* 手機 320x100 */
}
@media (min-width: 768px) {
  .ad-slot--top { min-height: 90px; }   /* 728x90 / 970x90 */
}

/* 列表內嵌版位在兩欄格線中要橫跨整列 */
.ad-slot--feed {
  grid-column: 1 / -1;
  min-height: 100px;
}

.ad-slot--side { min-height: 250px; }
.ad-slot--side.ad-slot--tall { min-height: 600px; }

/* 手機底部吸附式版位。只放在列表頁，避免蓋到表單的送出列 */
.ad-slot--bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  min-height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .ad-slot--bottom { display: none !important; }
}

/* 底部版位開啟時，把頁面撐高避免蓋住最後一張卡 */
body.has-bottom-ad { padding-bottom: 62px; }
@media (min-width: 1024px) {
  body.has-bottom-ad { padding-bottom: 0; }
}

/* 預覽模式的佔位框，讓你先確認版位位置與大小 */
.ad-slot.is-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg,
      var(--surface) 0, var(--surface) 9px,
      var(--surface-2) 9px, var(--surface-2) 18px);
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
}
.ad-slot--bottom.is-preview { border-radius: 0; border-width: 1px 0 0; }

/* ============================================================== 頁尾 */

.site-footer {
  margin-top: 8px;
  padding: 26px 0 34px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}

.footer-inner { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 768px) {
  .footer-inner { flex-direction: row; align-items: center; }
  .footer-inner .spacer { flex: 1; }
}

.footer-note { max-width: 620px; line-height: 1.7; }
.footer-note strong { color: var(--text); font-weight: 700; }

.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-links a { font-weight: 600; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }

/* ========================================================== 狀態畫面 */

.state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 20px;
  color: var(--text-dim);
}
.state .emoji { display: block; font-size: 40px; margin-bottom: 10px; }
.state .title { font-weight: 700; color: var(--text); margin-bottom: 5px; }
.state .desc { font-size: 14px; }
.state .btn { margin-top: 16px; }

.skeleton {
  height: 150px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
}
@keyframes shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ================================================================ 表單 */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px 22px;
  margin: 14px 0 0;
}

@media (min-width: 768px) {
  .form { padding: 24px; }
  .form-wrap { max-width: 680px; margin: 0 auto; }
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field > label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
}
.field > label .req { margin-left: 2px; color: var(--danger); }

.field .hint { font-size: 12.5px; color: var(--text-faint); }

.input, .textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 88px; resize: vertical; }

.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }

.ratio-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 13.5px;
  font-weight: 600;
}
.ratio-box .input {
  width: 84px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-color: #b9e8cd;
}

.submit-bar {
  position: sticky;
  bottom: 0;
  z-index: 35;
  padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, rgba(244, 246, 248, 0));
}

@media (min-width: 768px) {
  .submit-bar .container { max-width: 680px; }
}

/* ============================================================ 底部彈窗 */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 22, 30, .45);
}

@media (min-width: 640px) {
  .sheet-backdrop { align-items: center; }
}

.sheet {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheetIn .18s ease;
}

@media (min-width: 640px) {
  .sheet {
    border-radius: 18px;
    padding-bottom: 20px;
  }
}

@keyframes sheetIn {
  from { transform: translateY(16px); opacity: .5; }
  to   { transform: translateY(0); opacity: 1; }
}

.sheet h3 { margin: 0 0 14px; font-size: 17px; }

.sheet-row {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.sheet-row .k { flex: 0 0 76px; color: var(--text-dim); font-weight: 600; }
.sheet-row .v { flex: 1; overflow-wrap: anywhere; }

.sheet .msg {
  margin: 14px 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ============================================================== 提示條 */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(90vw, 440px);
  padding: 11px 18px;
  border-radius: 999px;
  background: #1a1d21;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: toastIn .18s ease;
}
.toast.is-error { background: var(--danger); }

@keyframes toastIn {
  from { transform: translate(-50%, 10px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}

/* ================================================================ 其他 */

.notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-dim);
}
.notice.is-warn {
  border-color: #f3cfcc;
  background: var(--danger-soft);
  color: #a3241c;
}

.me-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px 4px;
}
.me-bar .avatar { width: 38px; height: 38px; }
.me-bar span.avatar { font-size: 16px; }
.me-bar .name { font-weight: 700; font-size: 16px; }

/* 靜態內容頁（隱私權政策等） */
.doc {
  padding: 22px 18px 30px;
  margin: 14px 0 30px;
}
@media (min-width: 768px) {
  .doc { padding: 34px 40px 40px; }
}
.doc h1 { margin: 0 0 6px; font-size: 24px; }
.doc h2 { margin: 26px 0 8px; font-size: 17px; }
.doc p, .doc li { color: var(--text-dim); line-height: 1.75; }
.doc ul { padding-left: 20px; }
.doc .updated { color: var(--text-faint); font-size: 13px; }

/* ============================================================== 站內信 */

.chat {
  display: grid;
  grid-template-columns: 1fr;
  margin: 14px 0 22px;
  height: calc(100vh - var(--topbar-h) - 40px);
  height: calc(100dvh - var(--topbar-h) - 40px);
  min-height: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

@media (min-width: 900px) {
  .chat { grid-template-columns: 320px minmax(0, 1fr); }
}

/* 手機是「列表 ↔ 對話」二選一，桌機才左右並排。
   選擇器刻意用兩層 class，權重要高過後面 .chat-panel 的基本樣式 */
@media (max-width: 899px) {
  .chat .chat-panel { display: none; }
  .chat.is-open .chat-list { display: none; }
  .chat.is-open .chat-panel { display: flex; }
}

/* ---- 對話列表 ---- */

.chat-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

.thread-item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.thread-item:hover { background: var(--surface-2); }
.thread-item[aria-selected="true"] { background: var(--accent-soft); }

.thread-item .avatar { width: 38px; height: 38px; }

.thread-body { flex: 1; min-width: 0; }

.thread-body > .thread-top,
.thread-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.thread-top .name {
  font-weight: 700;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-top .time {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-faint);
}

.thread-item .subject {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-item .preview {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-item.is-unread .preview { color: var(--text); font-weight: 600; }

.unread-dot {
  flex: 0 0 auto;
  align-self: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/* ---- 對話內容 ---- */

.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-head .avatar { width: 34px; height: 34px; }
.chat-head .who { min-width: 0; }
.chat-head .name { font-weight: 700; font-size: 15px; }
.chat-head .subject { font-size: 12.5px; color: var(--text-dim); }
.chat-head .spacer { flex: 1; }

.chat-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-left: -6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 21px;
  cursor: pointer;
}
.chat-back:hover { background: var(--surface-2); }
@media (min-width: 900px) { .chat-back { display: none; } }

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 13px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble-row { display: flex; }
.bubble-row.is-mine { justify-content: flex-end; }

.bubble {
  max-width: 78%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble-row.is-mine .bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.bubble-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
}
.bubble-row.is-mine .bubble-meta { color: rgba(255, 255, 255, .8); }

/*
 * 已讀標示。
 * 只出現在自己送出的訊息上，而「已送出」比「未讀」好 ——
 * 對方還沒看到不是一種失敗狀態，不需要用負面的字眼提醒。
 */
.receipt { font-weight: 700; opacity: .7; }
.receipt.is-read { opacity: 1; }
.bubble-row.is-mine .receipt.is-read { color: #fff; }

.chat-day {
  align-self: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.chat-compose {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-compose textarea {
  flex: 1;
  min-height: 42px;
  max-height: 130px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface);
  resize: none;
  font-size: 15px;      /* iOS 低於 16px 會自動放大，15px 是可接受的折衷 */
  line-height: 1.4;
}
.chat-compose textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chat-compose .btn { flex: 0 0 auto; border-radius: 999px; padding: 10px 18px; }

/* ---- 輪詢狀態 ---- */

.poll-state {
  font-size: 12px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}
.poll-state .live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

.poll-state button {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.poll-state button:hover { background: var(--surface-2); }

/* ---- 導覽列上的未讀紅點 ---- */

.nav-link { position: relative; }

.nav-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* ---- 層級標記 ---- */

.tier-badge {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
}
.tier-badge.is-plus { background: var(--buy-soft); border-color: transparent; color: var(--buy); }
.tier-badge.is-pro  { background: var(--swap-soft); border-color: transparent; color: var(--swap); }

/* 導覽列在窄螢幕只留圖示與短標籤 */
.nav-label-full { display: none; }
@media (max-width: 479px) {
  .nav-link .nav-label { display: none; }
}
@media (min-width: 640px) {
  .nav-label-full { display: inline; }
}

/* 預覽環境的視覺標記 —— 避免把預覽站誤當成正式站 */
.env-badge {
  padding: 3px 9px;
  border-radius: 6px;
  background: #fff4d6;
  border: 1px solid #f0d489;
  color: #8a6100;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* ============================================================ 遊戲切換 */

.game-picker { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* 只有一款遊戲時的靜態標籤 */
.game-tag {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* 兩款以上才變成下拉選單 */
.game-select {
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.game-select:hover { background: var(--surface-2); }
.game-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ========================================================== 會員中心 */

.account, .account-guest { margin-bottom: 14px; }

.account-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-head .spacer { flex: 1; }
.account-head .avatar { width: 40px; height: 40px; font-size: 16px; }

.account-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.account-id .name {
  font-size: 17px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-hint { font-size: 12px; color: var(--text-faint); }

.account-row { margin-top: 12px; }

.account-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px 0 0;
  padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 560px) {
  .account-stats { grid-template-columns: repeat(4, 1fr); }
}
.account-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  background: var(--surface);
}
.account-stats dt { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.account-stats dd { margin: 0; font-size: 15px; font-weight: 800; }

.account-fineprint {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-faint);
}
.account-fineprint a { color: var(--text-dim); }

/* ---- 未綁定 LINE 的註冊引導 ---- */

.account-guest-head { display: flex; gap: 12px; align-items: flex-start; }
.account-guest-emoji { font-size: 32px; line-height: 1.1; }
.account-guest h2 { margin: 0 0 3px; font-size: 19px; font-weight: 800; }
.account-guest p { margin: 0; font-size: 14px; color: var(--text-dim); }

.account-perks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.account-perks li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-dim);
}
.account-perks strong {
  flex: 0 0 4.5em;
  color: var(--text);
  font-weight: 800;
}

.account-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
@media (min-width: 560px) {
  .account-actions { flex-direction: row; }
  .account-actions .btn { flex: 1; }
}

/* ========================================================== 發布頁 */

/* ==================================================== 發布頁的物品列 */

/*
 * 五個欄位：分類、名稱、數量、價格、移除。
 *
 * 名稱是唯一需要彈性的 —— 分類是固定的六個選項、數量與價格是數字，
 * 只有物品名稱長度沒有上限（「海盜船長帽」比「星瞳」長一倍）。
 * 之前把 1fr 留在第一欄，結果分類佔了 260px 而名稱只剩 116px。
 */
.item-row {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  grid-template-columns: 100px minmax(0, 1fr) 92px 108px auto;
  align-items: center;
}

/* 沒有價格欄時（整批 / 競標 / 換），空出來的寬度還給名稱 */
.item-row:not(:has(.item-price)):not(:has(.item-ratio)) {
  grid-template-columns: 100px minmax(0, 1fr) 92px auto;
}

/* 手機：名稱獨佔一整行，下面一行放分類、數量、價格 */
@media (max-width: 559px) {
  .item-row {
    grid-template-columns: minmax(0, 1fr) 84px 96px;
    grid-template-areas:
      "name name remove"
      "cat  qty  price";
  }
  .item-row > .item-cat        { grid-area: cat; min-width: 0; }
  .item-row > .item-name,
  .item-row > .item-fixed-name { grid-area: name; min-width: 0; }
  .item-row > .item-qty        { grid-area: qty; }
  .item-row > .item-price,
  .item-row > .item-ratio      { grid-area: price; }
  .item-row > .item-remove     { grid-area: remove; justify-self: end; }

  .item-row:not(:has(.item-price)):not(:has(.item-ratio)) {
    grid-template-columns: minmax(0, 1fr) 96px 30px;
    grid-template-areas:
      "name name remove"
      "cat  qty  .";
  }
}

.item-row .input,
.item-row .item-num input { padding: 8px 10px; font-size: 14px; }

.item-row .item-cat { min-width: 0; }

/*
 * 數量與價格：單位符號永遠在，填了數字也分得出哪一格是哪一格。
 * placeholder 一輸入就消失，光靠它是不夠的。
 */
.item-num {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.item-num:focus-within { border-color: var(--accent); }

.item-num .unit {
  flex: 0 0 auto;
  padding-left: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-faint);
  user-select: none;
}

.item-num input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  padding-left: 4px !important;
}
.item-num input:focus { outline: none; }

/* 喵果的固定名稱：看得出來是不能改的 */
.item-fixed-name {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
}

.item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.item-remove:hover { color: var(--danger); border-color: #f0c4c1; background: var(--danger-soft); }
.item-remove.is-placeholder { border: 0; background: none; cursor: default; }

/* ---- 自填伺服器 ---- */

.new-server {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.new-server .input { flex: 1; }

/* ---- 競標時長提示 ---- */

.hint.is-bad { color: var(--danger); font-weight: 600; }

/* ---- 預覽階段 ---- */

.preview-stage { margin-top: 14px; }

.preview-head { margin-bottom: 12px; }
.preview-head h2 { margin: 0 0 3px; font-size: 19px; font-weight: 800; }
.preview-head p { margin: 0; font-size: 13.5px; color: var(--text-dim); }

/* 預覽的卡片不要有 hover 效果，它不是可以點的東西 */
.preview-stage .card:hover { box-shadow: var(--shadow); border-color: var(--border); }

.submit-bar-inner {
  display: flex;
  gap: 8px;
  align-items: center;
}
.submit-bar-inner .btn-ghost { flex: 0 0 auto; padding: 13px 16px; border-radius: var(--radius-sm); }

/* ======================================================== 以物易物 */

/*
 * 換沒有價格，只有「我出什麼」與「我要什麼」。
 * 手機一上一下、桌機左右並排，中間那個箭頭在兩種版面下都要指對方向。
 */
.swap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
}

.swap-side {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.swap-label {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-faint);
}

.swap-arrow {
  justify-self: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--swap);
  line-height: 1;
  transform: rotate(90deg);
}

@media (min-width: 560px) {
  .swap { grid-template-columns: 1fr auto 1fr; }
  .swap-arrow { align-self: center; transform: none; }
}

/* ========================================================== 競標區塊 */

/*
 * 尚未開始 / 競標中 / 已結標，三種狀態要看的東西不一樣。
 * 共用外框，裡面各自長各自的。
 */
.auction {
  padding: 12px 14px;
  border: 1px solid var(--auction-border);
  border-radius: var(--radius-sm);
  background: var(--auction-bg);
}

.auction-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 14px;
}
.auction-row .k {
  flex: 0 0 72px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
}
.auction-row .v { flex: 1; font-weight: 600; }
.auction-row .v.strong { font-weight: 800; }

/* 競標中：目前多少、還剩多久 —— 這兩個數字是玩家唯一在意的 */
.auction-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.auction-price,
.auction-clock {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.auction-clock { align-items: flex-end; text-align: right; }

.auction-price .k,
.auction-clock .k {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.auction-price strong {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--auction);
  font-variant-numeric: tabular-nums;
}
.auction-price .sub { font-size: 12px; font-weight: 600; color: var(--text-dim); }

.auction-clock strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--auction);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 出價規則：不是每次都要讀，但出價前一定得看得到 */
.auction-rules {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--auction-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.auction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}
.auction-actions .btn { flex: 1 1 auto; }

/* 已結標的沒有動作可做，橘色收掉 —— 那個顏色的意思是「還來得及」 */
.auction.is-ended {
  border-color: var(--border);
  background: var(--surface-2);
}

@media (max-width: 420px) {
  .auction-main { flex-direction: column; align-items: stretch; gap: 8px; }
  .auction-clock { align-items: flex-start; text-align: left; }
}

/* ======================================================== 出價紀錄 */

.bid-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}

.bid-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.bid-row:last-child { border-bottom: 0; }

.bid-who {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.bid-tag {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}
.bid-tag.is-buyout {
  background: var(--auction-soft);
  border-color: transparent;
  color: var(--auction);
}

.bid-amount {
  flex: 0 0 auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.bid-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-faint);
}

/* 目前最高的那一筆 */
.bid-row.is-top .bid-amount { color: var(--auction); font-size: 15.5px; }
.bid-row.is-mine { background: var(--accent-soft); border-radius: 6px; }


/* ========================================================== 排序與分頁 */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sort-picker { display: inline-flex; align-items: center; }

.sort-picker select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sort-picker select:hover { border-color: var(--border-strong); }

.load-more { margin-top: 4px; }

/* ======================================================== 下拉重整 */

/*
 * 只有手機會掛事件（見 list.js 的 enablePullToRefresh），
 * 桌機永遠是 hidden，所以這段樣式在桌機不會有任何影響。
 */
.pull-hint {
  position: fixed;
  top: 0; left: 50%;
  z-index: 60;
  margin-left: -60px;
  width: 120px;
  padding: 7px 0;
  border-radius: 0 0 999px 999px;
  background: var(--text);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

/* ======================================================== 分享面板 */

.share-preview {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.share-preview-title {
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.share-preview-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.share-preview-url {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* ============================================ 貼文詳情（伺服器渲染） */

/*
 * /l/<id> 那一頁。
 *
 * 它同時服務三種讀者：LINE 的預覽爬蟲、搜尋引擎與 AI、以及點連結進來的人。
 * 前兩種讀 HTML 與 JSON-LD，第三種要能一眼看懂 —— 所以這一頁刻意
 * **重用刊登浮層的那一組 class**（detail-head / detail-body / detail-section /
 * items / pays / note）。從社群點進來看到的東西，跟在站上點開看到的一樣。
 *
 * 這裡只補「獨立頁面才需要的外框」，內容的樣式都在上面的浮層那一段。
 */
.detail { max-width: 620px; padding-top: 20px; padding-bottom: 48px; }

.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 獨立頁面上這是 h1，字要比浮層裡的 h2 再大一點 */
.detail-card h1.detail-title { font-size: 23px; }

.detail-lead {
  margin: 0;
  padding: 14px 18px 0;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* 事實成對列出。用 dl 是為了讓機器讀得到「這個詞對應這個值」 */
.detail-facts {
  margin: 0;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 7px 12px;
  font-size: 14px;
}
.detail-facts dt { color: var(--text-dim); font-weight: 600; }
.detail-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* 獨立頁面沒有浮層的圓角底，貼齊就好 */
.detail-card .detail-cta { border-radius: 0; position: static; }

.detail-disclaimer {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-faint);
}

/* 隱私權頁的客服信箱：要一眼看得到，那是玩家唯一的求助管道 */
.contact-box {
  margin: 10px 0 14px;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.contact-box a {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-box a:hover { text-decoration: underline; }