/* 社群頁專屬樣式 — 沿用 styles.css 的 JDM 變數 */

/* nav tabs use the same .tabs/.tab as the home page (styles.css);
   here they are <a> not <button>, so neutralise link defaults + add flex centering */
.tabs a.tab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.online-dot-inline {
  width: 7px; height: 7px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 8px var(--green); display: inline-block; animation: pulse-dot 2s infinite;
}

/* layout */
.cm-layout {
  display: grid; grid-template-columns: 230px 1fr 280px; gap: 20px;
  padding: 24px 28px; max-width: 1480px; margin: 0 auto; position: relative; z-index: 2;
}
.cm-notice {
  grid-column: 1 / -1; padding: 12px 16px;
  background: linear-gradient(90deg, rgba(255,0,64,.1), transparent);
  border: 1px solid var(--border); border-left: 3px solid var(--red);
  font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 10px;
}
.cm-notice b { color: var(--text); }

/* boards */
.cm-boards { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 130px; align-self: start; }
.cm-boards-title { font-family: var(--font-jp); font-weight: 900; font-size: 10px; letter-spacing: 4px; color: var(--cyan); padding: 6px 12px; }
.cm-board {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid transparent;
  cursor: pointer; color: var(--text-dim); background: transparent; text-align: left; width: 100%;
  font-family: inherit; font-size: 14px; transition: all .12s;
}
.cm-board:hover { color: var(--text); background: var(--panel); }
.cm-board.active { color: var(--text); background: var(--panel); border-color: var(--border-bright); border-left: 2px solid var(--red); }
.cm-board-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.cm-board.active .cm-board-count { color: var(--red); }

/* feed head */
.cm-feed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cm-feed-head h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: 3px; }
.cm-feed-head .jp { font-family: var(--font-jp); font-weight: 900; font-size: 10px; letter-spacing: 4px; color: var(--red); }
.cm-sort { margin-left: auto; display: flex; gap: 6px; }
.cm-sort-pill { font-family: var(--font-mono); font-size: 11px; padding: 5px 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; }
.cm-sort-pill.active { border-color: var(--red); color: var(--red); }

.cm-loading, .cm-empty { color: var(--text-dim); text-align: center; padding: 40px; font-family: var(--font-mono); font-size: 13px; }

/* === Rich empty state: SVG illustration + headline + sub + CTA === */
.cm-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 60px 24px;
  text-align: center; color: var(--text-dim);
  background: linear-gradient(180deg, transparent, rgba(255,0,64,.02));
  border: 1px dashed var(--border-bright); margin-top: 12px;
}
.cm-empty-state svg {
  width: 96px; height: 96px;
  fill: none; stroke: var(--text-faint); stroke-width: 1.2;
  stroke-linecap: square; stroke-linejoin: miter;
  opacity: 0.7;
}
.cm-empty-state .es-title {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 3px; color: var(--text);
}
.cm-empty-state .es-jp {
  font-family: var(--font-jp); font-weight: 900; font-size: 10px;
  letter-spacing: 4px; color: var(--red);
}
.cm-empty-state .es-sub {
  font-size: 13px; color: var(--text-dim); max-width: 420px; line-height: 1.7;
}
.cm-empty-state .es-cta {
  margin-top: 6px;
}

/* thread row */
.cm-thread {
  display: flex; gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--border);
  margin-bottom: 10px; cursor: pointer; transition: all .15s; position: relative;
}
.cm-thread:hover { border-color: var(--red); transform: translateX(2px); box-shadow: -4px 0 16px -4px var(--red-glow); }
.cm-thread.pinned { border-left: 2px solid var(--yellow); }
.cm-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 40px; }
.cm-vote button { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; box-shadow: none; clip-path: none; }
.cm-vote button:hover { color: var(--red); background: none; }
.cm-vote .score { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text); }
.cm-vote .up.on { color: var(--red); }
.cm-vote .down.on { color: var(--cyan); }
.cm-thread-main { flex: 1; min-width: 0; }
.cm-tags { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.cm-tag { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border: 1px solid var(--border-bright); color: var(--text-dim); letter-spacing: 1px; }
.cm-tag.pin { border-color: var(--yellow); color: var(--yellow); }
.cm-tag.car { border-color: var(--cyan); color: var(--cyan); }
.cm-thread-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cm-thread:hover .cm-thread-title { color: var(--red); }
.cm-thread-excerpt { font-size: 13px; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-thread-meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-faint); flex-wrap: wrap; }
.cm-author { color: var(--cyan); }
.cm-badge-v { font-size: 9px; padding: 1px 5px; border: 1px solid var(--green); color: var(--green); letter-spacing: 1px; }
.cm-badge-v.official { border-color: var(--red); color: var(--red); }
.cm-badge-v.kol { border-color: var(--cyan); color: var(--cyan); }

/* car chip */
.cm-car-chip { display: flex; gap: 10px; margin-top: 10px; padding: 8px; background: var(--bg-2); border: 1px solid var(--border); align-items: center; }
.cm-car-chip.cyan { border-color: var(--cyan); }
.cm-car-chip img { width: 64px; height: 42px; object-fit: cover; background: var(--panel-2); flex-shrink: 0; }
.cm-cc-info { flex: 1; min-width: 0; }
.cm-cc-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-cc-price { font-family: var(--font-mono); font-size: 14px; color: var(--red); font-weight: 700; }
.cm-cc-src { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }

/* right widgets */
.cm-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 130px; align-self: start; }
.cm-widget { background: var(--panel); border: 1px solid var(--border); padding: 16px; }
.cm-widget h3 { font-family: var(--font-display); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cm-widget h3 .jp { font-family: var(--font-jp); font-weight: 900; font-size: 9px; letter-spacing: 3px; color: var(--text-faint); }
.cm-stat-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cm-stat-row:last-child { border: none; }
.cm-stat-row .n { font-family: var(--font-mono); font-weight: 700; color: var(--cyan); }
.cm-trend-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.cm-trend-item:last-child { border: none; }
.cm-trend-item:hover .cm-trend-title { color: var(--red); }
.cm-trend-rank { font-family: var(--font-display); font-size: 18px; color: var(--red); width: 22px; flex-shrink: 0; }
.cm-trend-title { color: var(--text); }
.cm-trend-meta { font-size: 11px; color: var(--text-faint); }

/* detail view */
.cm-back { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); cursor: pointer; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; }
.cm-back:hover { color: var(--red); }
.cm-detail-title { font-size: 24px; font-weight: 700; margin: 8px 0 16px; }
.cm-post { display: flex; gap: 14px; padding: 18px; background: var(--panel); border: 1px solid var(--border); margin-bottom: 12px; }
.cm-post.op { border-left: 2px solid var(--red); }
.cm-post-body { flex: 1; min-width: 0; }
.cm-post-author { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cm-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #7a0020); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; color: white; flex-shrink: 0; }
.cm-post-author .name { font-weight: 700; color: var(--cyan); font-size: 14px; }
.cm-post-author .op-tag { font-size: 9px; padding: 1px 6px; background: var(--red); color: white; letter-spacing: 1px; }
.cm-post-author .time { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.cm-post-text { font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.cm-post-text a { color: var(--cyan); }
.cm-post-actions { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--text-faint); }
.cm-post-actions span { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cm-post-actions span:hover { color: var(--red); }

/* auto market data block */
.cm-auto-data { margin: 12px 0; padding: 12px; background: var(--bg-2); border: 1px solid var(--cyan); border-left-width: 3px; }
.cm-auto-data .ad-label { font-family: var(--font-jp); font-weight: 900; font-size: 9px; letter-spacing: 3px; color: var(--cyan); margin-bottom: 8px; }
.cm-auto-data .ad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cm-auto-data .ad-cell .l { font-size: 10px; color: var(--text-faint); }
.cm-auto-data .ad-cell .v { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text); }

/* reply box */
.cm-reply-box { display: flex; gap: 12px; padding: 16px; background: var(--panel); border: 1px solid var(--border-bright); margin-top: 16px; align-items: flex-start; }
.cm-reply-box textarea { flex: 1; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 10px; font-family: inherit; font-size: 13px; resize: vertical; min-height: 60px; }
.cm-reply-side { display: flex; flex-direction: column; gap: 8px; }
.cm-login-cta { padding: 16px; background: var(--panel); border: 1px dashed var(--border-bright); text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 16px; }
.cm-login-cta a { color: var(--red); cursor: pointer; text-decoration: underline; }

/* user chip in topbar */
.cm-user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); background: var(--panel); font-size: 13px; }
.cm-user-chip .cm-avatar { width: 26px; height: 26px; font-size: 13px; }
.cm-user-chip .lvl { color: var(--text-faint); font-size: 11px; }
.cm-logout { font-size: 11px; color: var(--text-faint); cursor: pointer; margin-left: 4px; }
.cm-logout:hover { color: var(--red); }

/* modal */
.cm-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cm-modal[hidden] { display: none; }
.cm-modal-inner { background: var(--panel); border: 1px solid var(--border-bright); width: min(440px, 100%); padding: 28px; position: relative; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
.cm-modal-inner.cm-compose { width: min(620px, 100%); }
.cm-modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; box-shadow: none; clip-path: none; padding: 4px 8px; }
.cm-modal-close:hover { color: var(--red); background: none; }
.cm-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.cm-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 10px; font-family: var(--font-display); font-size: 16px; letter-spacing: 2px; cursor: pointer; box-shadow: none; clip-path: none; }
.cm-tab.active { color: var(--red); border-bottom-color: var(--red); }
.cm-compose-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; margin-bottom: 18px; }
.cm-form { display: flex; flex-direction: column; gap: 14px; }
/* [hidden] must win over the flex display above, or both forms show at once */
.cm-form[hidden], [hidden] { display: none !important; }
.cm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); }
/* JDM telemetry-style inputs: dark transparent, bottom-only border, focus pulses cyan */
.cm-form input, .cm-form select, .cm-form textarea {
  background: rgba(8, 8, 12, 0.55);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-bright);
  color: var(--text);
  padding: 10px 4px;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-size: 14px;
  outline: none;
  border-radius: 0;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cm-form input[type="number"], .cm-form input[type="search"] { font-family: var(--font-mono); letter-spacing: 0.5px; }
.cm-form input::placeholder, .cm-form textarea::placeholder { color: var(--text-faint); }
.cm-form select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 32px;
}
.cm-form input:focus, .cm-form select:focus, .cm-form textarea:focus {
  border-bottom-color: var(--cyan);
  background: rgba(0, 240, 255, 0.045);
  box-shadow: 0 1px 0 var(--cyan), 0 8px 24px -10px rgba(0,240,255,.5);
}
.cm-form input:focus::placeholder { color: rgba(0, 240, 255, 0.35); }
.cm-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-jp); font-weight: 900;
  font-size: 10px; letter-spacing: 3px;
  color: var(--text-dim); text-transform: uppercase;
}
.cm-form-err { color: var(--red); font-size: 12px; min-height: 16px; }

/* compose attach */
.cm-attach { border: 1px solid var(--border); padding: 12px; background: var(--bg-2); }
.cm-attach-head { display: flex; flex-direction: column; gap: 8px; }
.cm-attach-head > span { font-size: 13px; color: var(--text-dim); }
.cm-attach-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 200px; overflow-y: auto; }
.cm-attach-opt { display: flex; gap: 8px; padding: 6px; cursor: pointer; align-items: center; border: 1px solid transparent; }
.cm-attach-opt:hover { border-color: var(--cyan); background: var(--panel); }
.cm-attach-opt img { width: 48px; height: 32px; object-fit: cover; background: var(--panel-2); }
.cm-attach-opt .t { font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-attach-opt .p { font-family: var(--font-mono); font-size: 12px; color: var(--red); }
.cm-attach-selected { margin-top: 8px; }
.cm-attach-clear { font-size: 11px; color: var(--text-faint); cursor: pointer; margin-left: 8px; }
.cm-attach-clear:hover { color: var(--red); }

/* author name hover */
.cm-author:hover, .cm-post-author .name:hover { color: var(--red); text-decoration: underline; }

/* delete action */
.cm-post-actions [data-del-thread]:hover, .cm-post-actions [data-del-post]:hover { color: var(--red); }

/* reply attach */
.cm-reply-attach-wrap { margin-top: 8px; }
.cm-reply-attach-wrap[hidden] { display: none; }
#reply-listing-search { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; font-family: inherit; font-size: 13px; }
#reply-listing-selected:not(:empty) { margin-top: 8px; }

/* profile head */
.cm-profile-head { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-left: 2px solid var(--red); }
.cm-profile-name { font-family: var(--font-display); font-size: 24px; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.cm-profile-meta { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-top: 4px; }

/* toast */
.cm-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--cyan); color: var(--text);
  padding: 12px 22px; font-size: 14px; z-index: 300; opacity: 0; pointer-events: none;
  box-shadow: 0 0 20px var(--cyan-glow); transition: opacity .2s, transform .2s;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cm-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cm-toast[data-kind="warn"] { border-color: var(--red); box-shadow: 0 0 20px var(--red-glow); }

/* report reasons */
.cm-report-reasons { display: flex; flex-direction: column; gap: 8px; }
.cm-report-reason {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 14px; text-align: left; font-family: inherit; font-size: 14px; cursor: pointer;
  box-shadow: none; clip-path: none; transition: all .12s;
}
.cm-report-reason:hover { border-color: var(--red); color: var(--red); background: var(--panel-2); }

/* sell-modal form grid */
.cm-sell { width: min(760px, 100%) !important; max-height: 90vh; overflow-y: auto; }
.cm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .cm-form-grid { grid-template-columns: 1fr; } }

/* photo preview tiles */
.cm-photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 4px; }
.cm-photo-tile { position: relative; aspect-ratio: 4/3; background: var(--bg-2) center/cover no-repeat; border: 1px solid var(--border); }
.cm-photo-tile button {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  background: rgba(8,8,12,.85); border: 1px solid var(--border-bright); color: white;
  font-size: 12px; padding: 0; cursor: pointer; clip-path: none; box-shadow: none;
}
.cm-photo-tile button:hover { background: var(--red); border-color: var(--red); box-shadow: 0 0 10px var(--red-glow); }

/* garage view */
.cm-garage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.cm-garage-card { background: var(--panel); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: all .15s; }
.cm-garage-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255,0,64,.2); }
.cm-garage-thumb { aspect-ratio: 16/10; background: var(--bg-2) center/cover no-repeat; position: relative; }
.cm-garage-thumb .status-badge {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; font-weight: 700;
  background: rgba(8,8,12,.85); backdrop-filter: blur(6px);
  border: 1px solid var(--border-bright); color: white;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.cm-garage-thumb .status-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.cm-garage-thumb .status-badge.for_sale { color: var(--green); border-color: var(--green); }
.cm-garage-thumb .status-badge.reserved { color: var(--yellow); border-color: var(--yellow); }
.cm-garage-thumb .status-badge.sold { color: var(--text-faint); border-color: var(--text-faint); }
.cm-garage-thumb .status-badge.sold::before { box-shadow: none; }

/* notifications bell */
.cm-notif-btn {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: none; transition: all .15s;
}
.cm-notif-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px var(--cyan-glow); }
.cm-notif-btn .btn-ic { margin: 0; width: 18px; height: 18px; }
.cm-notif-btn .notif-dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: white; border-radius: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px var(--red-glow);
}

.cm-notif-list { display: flex; flex-direction: column; gap: 8px; }
.cm-notif-item {
  display: flex; gap: 12px; padding: 12px; background: var(--bg-2);
  border: 1px solid var(--border); cursor: pointer; transition: all .12s;
}
.cm-notif-item:hover { border-color: var(--red); transform: translateX(2px); }
.cm-notif-item.unread { border-left: 2px solid var(--red); background: linear-gradient(90deg, rgba(255,0,64,.06), var(--bg-2)); }
.cm-notif-item img { width: 72px; height: 48px; object-fit: cover; background: var(--panel-2); flex-shrink: 0; }
.cm-notif-body { flex: 1; min-width: 0; }
.cm-notif-kind { font-family: var(--font-jp); font-weight: 900; font-size: 9px; letter-spacing: 3px; }
.cm-notif-kind.want { color: var(--cyan); }
.cm-notif-kind.sell { color: var(--red); }
.cm-notif-title { font-size: 13px; font-weight: 700; margin: 4px 0; }
.cm-notif-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* wants list */
.cm-want-card {
  background: var(--panel); border: 1px solid var(--border); padding: 14px;
  margin-bottom: 10px; transition: all .15s; cursor: pointer;
}
.cm-want-card:hover { border-color: var(--cyan); box-shadow: 0 4px 16px rgba(0,240,255,.18); }
.cm-want-card .cm-want-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cm-want-card .cm-want-head .who { color: var(--cyan); font-weight: 700; font-size: 14px; }
.cm-want-card .cm-want-criteria { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cm-want-card .cm-want-criteria .cri {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--border-bright); color: var(--text);
}
.cm-want-card .cm-want-criteria .cri.budget { color: var(--cyan); border-color: var(--cyan); }
.cm-want-card .cm-want-notes { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.cm-want-matches { font-family: var(--font-mono); font-size: 11px; color: var(--green); margin-top: 6px; }

/* === Topbar action buttons — calm unified base, accent only on icon + hover ===
   Earlier version assigned 4 different neon colors to 4 buttons → christmas tree.
   New approach: all dark panels with white-ish text, mini coloured icon hints at
   the action, full accent colour only appears on hover. */
.btn-sell, .btn-want, .btn-part,
#auth-slot .btn:not(.btn-sell):not(.btn-want):not(.btn-part):not(.btn-secondary) {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.45)) !important;
  border: 1px solid var(--border-bright) !important;
  color: var(--text) !important;
  text-shadow: none !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  padding: 9px 16px !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, color .15s, background .15s !important;
}
/* per-button icon hue (the *only* place each colour shows by default) */
.btn-sell .btn-ic { color: var(--cyan); }
.btn-want .btn-ic { color: var(--yellow); }
.btn-part .btn-ic { color: #c04cff; }
#auth-slot .btn:not(.btn-sell):not(.btn-want):not(.btn-part):not(.btn-secondary) .btn-ic { color: var(--red); }

/* shared hover: border + text lift to the button's accent colour */
.btn-sell:hover {
  border-color: var(--cyan) !important; color: var(--cyan) !important;
  background: linear-gradient(180deg, rgba(0,240,255,0.06), rgba(0,0,0,0.45)) !important;
  box-shadow: 0 0 18px rgba(0,240,255,.4) !important;
}
.btn-want:hover {
  border-color: var(--yellow) !important; color: var(--yellow) !important;
  background: linear-gradient(180deg, rgba(255,234,0,0.06), rgba(0,0,0,0.45)) !important;
  box-shadow: 0 0 18px rgba(255,234,0,.4) !important;
}
.btn-part:hover {
  border-color: #c04cff !important; color: #c04cff !important;
  background: linear-gradient(180deg, rgba(192,76,255,0.06), rgba(0,0,0,0.45)) !important;
  box-shadow: 0 0 18px rgba(192,76,255,.4) !important;
}
#auth-slot .btn:not(.btn-sell):not(.btn-want):not(.btn-part):not(.btn-secondary):hover {
  border-color: var(--red) !important; color: var(--red) !important;
  background: linear-gradient(180deg, rgba(255,0,64,0.06), rgba(0,0,0,0.45)) !important;
  box-shadow: 0 0 18px var(--red-glow) !important;
}

/* slim scan-line texture (unchanged — still good) */
.btn-sell::after, .btn-want::after, .btn-part::after,
#auth-slot .btn:not(.btn-sell):not(.btn-want):not(.btn-part):not(.btn-secondary)::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 4px);
  pointer-events: none;
}
.cm-garage-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cm-garage-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.cm-garage-price { font-family: var(--font-mono); font-size: 18px; color: var(--red); font-weight: 700; }
.cm-garage-meta { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.cm-garage-actions { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cm-garage-actions button { font-size: 11px; padding: 5px 10px; clip-path: none; }

/* listing detail (modal-style) */
.cm-listing-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; margin-bottom: 16px; }
.cm-listing-gallery .main { aspect-ratio: 16/10; background: var(--bg-2) center/cover no-repeat; cursor: pointer; }
.cm-listing-gallery .side { display: grid; grid-template-rows: repeat(2, 1fr); gap: 4px; }
.cm-listing-gallery .side > div { background: var(--bg-2) center/cover no-repeat; cursor: pointer; aspect-ratio: 16/10; }
.cm-listing-detail h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: 2px; }
.cm-listing-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 14px; background: var(--bg-2); border: 1px solid var(--border); margin: 14px 0; }
.cm-listing-specs .l { font-size: 10px; color: var(--text-faint); letter-spacing: 2px; font-family: var(--font-jp); font-weight: 900; }
.cm-listing-specs .v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); margin-top: 4px; }
.cm-listing-specs .v.price { color: var(--red); font-size: 18px; }
.cm-contact-cta { padding: 14px; background: linear-gradient(90deg, rgba(0,240,255,.08), transparent); border: 1px solid var(--cyan); border-left-width: 3px; margin: 16px 0; }
.cm-contact-cta .l { font-family: var(--font-jp); font-weight: 900; font-size: 10px; letter-spacing: 3px; color: var(--cyan); margin-bottom: 6px; }
.cm-contact-cta .v { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text); }

/* USER listing badge on radar */
.user-listing-badge {
  position: absolute; top: 8px; right: 50px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  background: var(--cyan); color: var(--bg); padding: 3px 8px;
  box-shadow: 0 0 10px var(--cyan-glow); z-index: 3;
}

/* "Sell my car" button — slight tone distinction from the red compose btn */
.btn-sell {
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 12px var(--cyan-glow) !important;
}
.btn-sell:hover { background: #66f5ff !important; box-shadow: 0 0 22px var(--cyan-glow) !important; }

/* ===== Mini gauge component (CP / 進口稅 / TCO etc.) =====
   Half-circle dial, tick marks, glowing needle, big mono value.
   Markup: <div class="cm-gauge" data-tone="cyan|red|green|yellow"> with
     .cm-gauge-svg (the dial), .cm-gauge-val, .cm-gauge-label */
.cm-gauge {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 12px 10px;
  background: rgba(8, 8, 12, 0.5);
  border: 1px solid var(--border);
  min-width: 110px;
}
.cm-gauge-svg { width: 100%; max-width: 130px; height: auto; display: block; }
.cm-gauge .arc-bg { stroke: var(--border-bright); stroke-width: 4; fill: none; stroke-linecap: butt; }
.cm-gauge .arc-fill {
  stroke: var(--cyan); stroke-width: 4; fill: none; stroke-linecap: butt;
  filter: drop-shadow(0 0 3px var(--cyan));
  transition: stroke-dashoffset .6s cubic-bezier(.6,.2,.3,1);
}
.cm-gauge .needle { stroke: var(--cyan); stroke-width: 1.6; filter: drop-shadow(0 0 3px var(--cyan)); transition: transform .6s cubic-bezier(.6,.2,.3,1); transform-origin: 50px 45px; }
.cm-gauge .hub { fill: var(--cyan); }
.cm-gauge .tick { stroke: var(--text-faint); stroke-width: 1; }
.cm-gauge-val {
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  margin-top: -8px; letter-spacing: -0.5px; color: var(--text);
}
.cm-gauge-label {
  font-family: var(--font-jp); font-weight: 900; font-size: 9px;
  letter-spacing: 3px; color: var(--text-dim); margin-top: 2px;
}
/* tone variants — swap the cyan accents */
.cm-gauge[data-tone="red"]    .arc-fill,
.cm-gauge[data-tone="red"]    .needle    { stroke: var(--red);    filter: drop-shadow(0 0 3px var(--red)); }
.cm-gauge[data-tone="red"]    .hub       { fill:   var(--red); }
.cm-gauge[data-tone="green"]  .arc-fill,
.cm-gauge[data-tone="green"]  .needle    { stroke: var(--green);  filter: drop-shadow(0 0 3px var(--green)); }
.cm-gauge[data-tone="green"]  .hub       { fill:   var(--green); }
.cm-gauge[data-tone="yellow"] .arc-fill,
.cm-gauge[data-tone="yellow"] .needle    { stroke: var(--yellow); filter: drop-shadow(0 0 3px var(--yellow)); }
.cm-gauge[data-tone="yellow"] .hub       { fill:   var(--yellow); }

.cm-gauge-row {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 14px 0;
}

/* ===== parts marketplace ===== */
.cm-parts-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cm-parts-search {
  flex: 1; min-width: 200px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; font-family: inherit; font-size: 14px;
}
.cm-parts-search:focus { outline: none; border-color: var(--cyan); }
.cm-cat-rail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cm-cat-chip {
  font-family: var(--font-mono); font-size: 12px; padding: 6px 12px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  cursor: pointer; transition: all .12s;
}
.cm-cat-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.cm-cat-chip.active { border-color: var(--red); color: var(--red); box-shadow: inset 0 0 12px rgba(255,0,64,.15); }
.cm-cat-chip .n { opacity: .55; margin-left: 4px; }

.cm-parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cm-part-card {
  background: var(--panel); border: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; transition: all .15s; position: relative;
}
.cm-part-card:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,240,255,.18); }
.cm-part-thumb { aspect-ratio: 4/3; background: var(--bg-2) center/cover no-repeat; position: relative; }
.cm-part-thumb .no-photo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-family: var(--font-jp); font-weight: 900; font-size: 11px; letter-spacing: 3px;
}
.cm-part-cond {
  position: absolute; top: 8px; left: 8px; padding: 3px 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; font-weight: 700;
  background: rgba(8,8,12,.85); backdrop-filter: blur(6px); border: 1px solid var(--border-bright);
}
.cm-part-cond.new { color: var(--green); border-color: var(--green); }
.cm-part-cond.used { color: var(--yellow); border-color: var(--yellow); }
.cm-part-cond.refurbished { color: var(--cyan); border-color: var(--cyan); }
.cm-part-sold { position:absolute; inset:0; background:rgba(8,8,12,.6); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; letter-spacing:4px; color:var(--text-dim); }
.cm-part-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cm-part-cat { font-family: var(--font-jp); font-weight: 900; font-size: 9px; letter-spacing: 2px; color: var(--cyan); }
.cm-part-title { font-size: 13px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-part-price { font-family: var(--font-mono); font-size: 17px; color: var(--red); font-weight: 700; }
.cm-part-meta { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.cm-part-card .cm-part-actions { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cm-part-card .cm-part-actions button { font-size: 11px; padding: 5px 9px; clip-path: none; }

/* part detail */
.cm-part-detail h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: 1px; }
.cm-part-spec-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cm-part-spec-row .cri { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border: 1px solid var(--border-bright); color: var(--text); }
.cm-part-spec-row .cri.cond-new { color: var(--green); border-color: var(--green); }
.cm-part-spec-row .cri.cond-used { color: var(--yellow); border-color: var(--yellow); }
.cm-part-spec-row .cri.cond-refurbished { color: var(--cyan); border-color: var(--cyan); }
.cm-part-spec-row .cri.price { color: var(--red); border-color: var(--red); font-weight: 700; font-size: 14px; }

/* "刊登零件" button — magenta-ish to separate from car (cyan) / want (yellow) */
.btn-part {
  border: 1px solid #c04cff !important; color: #c04cff !important;
  background: linear-gradient(180deg, rgba(192,76,255,0.04), rgba(0,0,0,0.4)) !important;
  text-shadow: 0 0 6px rgba(192,76,255,.6);
  box-shadow: inset 0 0 18px rgba(192,76,255,.12), 0 0 14px rgba(192,76,255,.35) !important;
}
.btn-part:hover { box-shadow: inset 0 0 26px rgba(192,76,255,.22), 0 0 24px rgba(192,76,255,.6) !important; }

@media (max-width: 1100px) {
  .cm-layout { grid-template-columns: 1fr; }
  .cm-boards, .cm-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .cm-board { width: auto; }
}