:root{
  --x5-bg:#0a0a0a; --x5-fg:#fff; --x5-muted:#bdbdbd;
  --x5-card:rgba(255,255,255,0.06); --x5-border:rgba(255,255,255,0.12);
  --x5-accent:#8a7dff; --x5-green:#3ee1a1; --x5-red:#ff6b6b; --x5-yellow:#ffd166;
  color-scheme: dark; /* 修深色原生控件 */
}
*{box-sizing:border-box}
body{ margin:0; background:var(--x5-bg); color:var(--x5-fg); }
/* ✅ Navbar：不覆蓋首頁的對齊，讓 styles.css 接管（space-between + padding）
   若要微調文字透明度，只補色，不動 layout */
.navbar a{ color:#ccc; text-decoration:none; }
.navbar a.active{ color:#fff; font-weight:700; }

/* Glow */
.glow{ position:absolute; top:0; width:200px; height:100vh; filter:blur(80px); z-index:0; }
.left-glow{ left:-120px; background: radial-gradient(circle, rgba(252, 252, 252, 0.3), transparent); }
.right-glow{ right:-120px; background: radial-gradient(circle, rgba(247, 248, 248, 0.3), transparent); }

/* Divider（沿用首頁命名） */
.divider, .divider1 { width:100%; height:1px; background:linear-gradient(to right, transparent, rgba(255,255,255,.2), transparent); }
.divider { margin:0; }
.divider1 { margin:40px 0; }

/* Hero */
.market-hero{ padding:32px 60px 12px; max-width:1200px; margin:0 auto; }
.market-title{ font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:.5px; }
.market-sub{ margin-top:10px; color:var(--x5-muted); font-size:15px; }

/* Toolbar + 修正 select 下拉白底白字 */
.toolbar{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.tool-input,.tool-select{
  background:var(--x5-card); border:1px solid var(--x5-border); color:var(--x5-fg);
  border-radius:12px; padding:10px 12px; outline:none; backdrop-filter:blur(8px);
}
.tool-input{ flex:1 1 220px; }
.tool-select{ flex:0 0 160px; appearance:none; -webkit-appearance:none; }
.tool-select option{ background:#0a0a0a; color:#fff; }
.tool-select:focus{ outline:2px solid rgba(138,125,255,.6); outline-offset:2px; }
.actions{ margin-left:auto; display:flex; gap:10px; }

/* Grid */
.market{ max-width:1200px; margin:16px auto 80px; padding:0 60px; }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.card{ grid-column:span 12; background:var(--x5-card); border:1px solid var(--x5-border); border-radius:18px; overflow:hidden; position:relative; backdrop-filter:blur(10px); }
@media (min-width:560px){ .card{ grid-column:span 6; } }
@media (min-width:960px){ .card{ grid-column:span 4; } }

.thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
.badge-wrap{ position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.badge{ font-size:12px; padding:6px 8px; border-radius:999px; border:1px solid var(--x5-border); background:rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.badge.sol{ border-color: rgba(62,225,161,.5); }
.badge.eth{ border-color: rgba(138,125,255,.6); }

.content{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.title{ font-weight:700; font-size:16px; line-height:1.25; }
.desc{ color:var(--x5-muted); font-size:13px; }
.meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price{ font-weight:800; letter-spacing:.3px; }
.add{ padding:8px 12px; border-radius:10px; border:1px solid var(--x5-border); cursor:pointer; background:rgba(255,255,255,.06); }
.add:hover{ border-color: rgba(255,255,255,.25); }

/* Cart Drawer */
.drawer{ position:fixed; top:0; right:-420px; width:360px; max-width:90vw; height:100vh; background:rgba(16,16,16,.9); backdrop-filter:blur(10px); border-left:1px solid var(--x5-border); transition:right .25s ease; z-index:50; display:flex; flex-direction:column; }
.drawer.open{ right:0; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--x5-border); }
.drawer-title{ font-weight:800; }
.drawer-body{ flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
.drawer-item{ display:flex; gap:10px; border:1px solid var(--x5-border); border-radius:12px; padding:10px; background:rgba(255,255,255,.04); }
.it-thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; border:1px solid var(--x5-border); }
.it-thumb img{ width:100%; height:100%; object-fit:cover; }
.it-meta{ flex:1; }
.it-title{ font-size:14px; font-weight:700; }
.it-sub{ color:var(--x5-muted); font-size:12px; }
.it-act{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.qty{ display:flex; border:1px solid var(--x5-border); border-radius:10px; overflow:hidden; }
.qty button{ background:none; color:var(--x5-fg); border:none; padding:6px 10px; cursor:pointer; }
.qty span{ padding:6px 12px; min-width:26px; text-align:center; }

.drawer-foot{ border-top:1px solid var(--x5-border); padding:14px; display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; justify-content:space-between; color:var(--x5-muted); font-size:14px; }
.total{ font-weight:900; font-size:18px; letter-spacing:.4px; }

.drawer .btn {
  border-radius: 9999px;
  padding: .45rem .9rem;
  border: 1px solid var(--x5-border, #2a2a2a);
  background: rgba(255,255,255,.04);
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.drawer .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.07); }
.drawer .btn:active { transform: translateY(0); }
.drawer .btn.primary { border-color: #3b82f6; color: #cde2ff; background: rgba(59,130,246,.12); }
.drawer .btn.warn    { border-color: #f59e0b; color: #ffe3b0; background: rgba(245,158,11,.12); }

/* Payment Modal */
.modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; place-items:center; z-index:60; }
.modal{ width:560px; max-width:92vw; background:rgba(15,15,15,.92); border:1px solid var(--x5-border); border-radius:18px; overflow:hidden; }
.modal-head{ padding:14px; border-bottom:1px solid var(--x5-border); font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.modal-body{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.chain-row{ display:flex; gap:8px; flex-wrap:wrap; }
.label{ font-size:14px; color:var(--x5-muted); margin-bottom:6px; }
.chip{ border:1px solid var(--x5-border); padding:8px 12px; border-radius:999px; cursor:pointer; }
.chip.active{ border-color:var(--x5-accent); box-shadow:0 0 0 3px rgba(138,125,255,.15); }
.addr-box{ border:1px dashed var(--x5-border); border-radius:12px; padding:10px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
.addr-hint{ font-size:13px; color:var(--x5-muted); }
.addr-text{ word-break: break-all; margin-top:6px; }
.hint{ font-size:13px; color:var(--x5-muted); }

.modal-foot{ padding:14px; border-top:1px solid var(--x5-border); display:flex; gap:10px; justify-content:flex-end; }

/* Toast */
.toast{ position:fixed; bottom:20px; right:20px; background:rgba(30,30,30,.95); color:var(--x5-fg); border:1px solid var(--x5-border); border-radius:12px; padding:12px 14px; opacity:0; transform:translateY(8px); transition:.25s ease; z-index:70; }
.toast.show{ opacity:1; transform:translateY(0); }

/* RWD */
@media (max-width: 960px){
  .market{ padding:0 24px; }
  .market-hero{ padding:32px 24px 12px; }
}
@media (max-width: 768px){
  .navbar{ padding:16px 20px; } /* 小螢幕沿用首頁節奏 */
}

.order-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--x5-border);
}
.order-line:last-child {
  border-bottom: none;
}

/* 狀態徽章樣式 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.badge-green {
  background: #10b98122; /* 半透明底色 */
  color: #10b981;        /* 綠字 */
}

.badge-yellow {
  background: #f59e0b22;
  color: #f59e0b;
}

.badge-red {
  background: #ef444422;
  color: #ef4444;
}

.badge-gray {
  background: #6b728022;
  color: #6b7280;

}

#orderViewTx a {
  color: #3b82f6;
  text-decoration: underline;
}

/* --- Skeleton Loading --- */
.card.skeleton .thumb{height:160px;background:#111;border-radius:12px;}
.card.skeleton .line{height:12px;margin-top:10px;background:#111;border-radius:6px;}
.shimmer{position:relative;overflow:hidden;}
.shimmer::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:sk 1.2s infinite;
}
@keyframes sk{to{transform:translateX(100%)}}