:root{color-scheme:dark;
  --bg:#14110d; --panel:#1d1912; --panel2:#262017; --line:#3a3123; --text:#e8dfcc; --dim:#9a8f78;
  --gold:#e0b95a; --sell:#e0645a; --buy:#5aa0e0; --ok:#6fbf73;
  /* 以下由主色自動推算(使用者自訂顏色時,theme.js 會重新計算,確保文字讀得清楚) */
  --on-accent:#241b08; --on-sell:#ffffff; --accent-soft:#3a2c0e; --ok-soft:#1f3a24;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,"Noto Sans TC","Microsoft JhengHei",sans-serif}
h1,h2,h3{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);border-radius:6px;padding:7px 14px}
button:hover{border-color:var(--gold)}
button.primary{background:var(--gold);color:var(--on-accent);border-color:var(--gold);font-weight:600}
button.ghost{background:transparent}

.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.top h1{font-size:20px;color:var(--gold)}
.hint{margin:0;color:var(--dim);font-size:13px;flex:1;min-width:240px}
.who{display:flex;gap:8px;align-items:center}

.layout{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:18px 20px;max-width:1280px;margin:0 auto}
.filters{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;align-self:start;position:sticky;top:12px;display:flex;flex-direction:column;gap:16px}
.filters h2{font-size:12px;letter-spacing:.08em;color:var(--dim);margin-bottom:6px}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;border-radius:0;background:transparent;padding:7px 4px}
.seg button.on{background:var(--gold);color:var(--on-accent);font-weight:600}
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cats li button{width:100%;display:flex;justify-content:space-between;gap:6px;padding:5px 8px;font-size:13px;background:transparent}
.cats li:first-child{grid-column:1/-1}
.cats li button.on{background:var(--panel2);border-color:var(--gold);color:var(--gold)}
.cats li button .n{color:var(--dim)}
.cats li button.zero{opacity:.45}
.pair{display:flex;align-items:center;gap:6px}

.bar{display:flex;gap:8px;flex-wrap:wrap}
.bar .grow{flex:1;min-width:180px}
.ac{position:relative}
.suggest{position:absolute;left:0;right:0;top:100%;z-index:20;margin:2px 0 0;padding:4px;list-style:none;background:var(--panel2);border:1px solid var(--gold);border-radius:8px;box-shadow:0 8px 20px #000a;max-height:280px;overflow-y:auto}
.suggest li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:5px;cursor:pointer;font-size:14px;color:var(--text)}
.suggest li.on,.suggest li:hover{background:var(--bg)}
.suggest li small{color:var(--dim);white-space:nowrap}
.suggest mark{background:transparent;color:var(--gold);font-weight:700}
.hintline{font-size:12px;color:var(--dim)}
.hintline.ok{color:var(--ok)}
.hintline.warn{color:var(--gold)}
.bar select{width:auto}
.meta{color:var(--dim);font-size:13px;margin:10px 2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.card .head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.card .name{font-weight:600}
.tag{font-size:12px;padding:1px 8px;border-radius:99px;border:1px solid;white-space:nowrap}
.tag.sell{color:var(--sell);border-color:var(--sell)}
.tag.buy{color:var(--buy);border-color:var(--buy)}
.price{color:var(--gold);font-size:18px;font-weight:700}
.price small{color:var(--dim);font-weight:400;font-size:12px}
.sub{color:var(--dim);font-size:13px}
.contact{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding-top:8px;border-top:1px dashed var(--line)}
.contact b{color:var(--text)}
.contact button{padding:3px 10px;font-size:12px}
.note{font-size:13px;word-break:break-word}
.foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.acts{display:flex;gap:4px}
button.link{border:0;background:transparent;padding:2px 6px;font-size:12px;color:var(--dim);text-decoration:underline}
button.link:hover{color:var(--gold)}
button.link.danger:hover{color:var(--sell)}
a.btnlink{color:var(--gold);border:1px solid var(--line);border-radius:6px;padding:6px 12px;text-decoration:none}
a.btnlink:hover{border-color:var(--gold)}
.empty{grid-column:1/-1;text-align:center;color:var(--dim);padding:48px 0}
.more{display:block;margin:16px auto}
.more[hidden]{display:none}

dialog{background:var(--panel);color:var(--text);border:1px solid var(--gold);border-radius:12px;padding:20px;width:min(440px,94vw)}
dialog::backdrop{background:#000a}
dialog form{display:flex;flex-direction:column;gap:10px}
dialog label,dialog .field{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--dim)}
dialog h3{color:var(--gold)}
.trip{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.err{color:var(--sell);margin:0;min-height:1.2em;font-size:13px}
.mywrap{display:flex;flex-direction:column;gap:10px}
.myitem{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.myitem .st{font-size:12px;color:var(--dim)}
.myitem.closed{opacity:.55}
.myitem button{padding:3px 10px;font-size:12px}

.admin{max-width:900px;margin:0 auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.admin[hidden],.admin section[hidden]{display:none}
.tabs{align-self:flex-start}
.tabs button{padding:7px 16px;white-space:nowrap}
.admin section{display:flex;flex-direction:column;gap:12px}
.list{display:flex;flex-direction:column;gap:8px}
.card.rep{gap:8px}
.replist{margin:0;padding-left:18px;font-size:13px}
.replist li{margin:2px 0}
button.ghost.danger{color:var(--sell);border-color:var(--sell)}
.admin .empty{padding:32px 0}

@media(max-width:760px){
  .layout{grid-template-columns:1fr;padding:12px}
  .filters{position:static}
}
.seg[hidden]{display:none}

.hint a,.hintline a{color:var(--gold)}
.doc{max-width:760px;margin:0 auto;padding:18px 20px 48px;display:flex;flex-direction:column;gap:18px}
.doc section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.doc h2{font-size:16px;color:var(--gold);margin-bottom:8px}
.doc ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.doc ul ul{margin-top:6px;font-size:14px;color:var(--dim)}
.doc b{color:var(--text)}

/* Email 驗證橫幅 / 徽章 / 小按鈕 */
.banner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 20px;background:var(--accent-soft);border-bottom:1px solid var(--gold);color:var(--text);font-size:14px}
.banner[hidden]{display:none}
.qchips{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:8px;vertical-align:middle}
.qchip{font-size:12px;padding:0 8px;border-radius:99px;border:1px solid var(--dim);color:var(--dim);line-height:20px;white-space:nowrap}
.qchip.done{border-color:var(--ok);color:var(--ok)}
button.small{padding:3px 10px;font-size:12px}
.badge{display:inline-block;min-width:18px;padding:0 6px;margin-left:6px;border-radius:99px;background:var(--sell);color:var(--on-sell);font-size:11px;line-height:18px;text-align:center}
.resetform{display:flex;flex-direction:column;gap:10px;max-width:380px}
.resetform label,.doc .resetform label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--dim)}
#emailField[hidden],#forgotLink[hidden]{display:none}

/* 私訊視窗 */
dialog.wide{width:min(860px,96vw)}
.dm{display:grid;grid-template-columns:250px 1fr;gap:12px;height:min(560px,70vh)}
.dm-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);padding-right:10px}
.dm-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
#dmConvs{list-style:none;margin:0;padding:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
#dmConvs li button{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;gap:2px 6px;padding:8px;background:transparent}
#dmConvs li.on button{background:var(--panel2);border-color:var(--gold)}
#dmConvs .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dmConvs .pv{grid-column:1/-1;color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-none{color:var(--dim);font-size:13px;padding:8px}
.dm-thread{display:flex;flex-direction:column;min-height:0;gap:8px}
.dm-empty{margin:auto;color:var(--dim);text-align:center;padding:20px}
.dm-empty[hidden],.dm-thead[hidden],.dm-msgs[hidden],.dm-form[hidden],.dm-ctx[hidden],#dmSupport[hidden]{display:none}
.dm-thead{display:flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.dm-thead .acts{margin-left:auto}
.dm-back{display:none}
.dm-ctx{font-size:12px;color:var(--gold);background:var(--panel2);border:1px dashed var(--gold);border-radius:6px;padding:6px 10px}
.dm-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px 4px}
.dm-msg{max-width:78%;padding:7px 11px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.dm-msg.mine{align-self:flex-end;background:var(--accent-soft);border-color:var(--gold)}
.dm-msg.theirs{align-self:flex-start}
.dm-body{white-space:pre-wrap;word-break:break-word}
.dm-tag{font-size:11px;color:var(--gold);margin-bottom:3px}
.dm-time{font-size:11px;color:var(--dim);margin-top:3px;text-align:right}
.dm-form{display:flex;gap:8px;align-items:flex-end}
.dm-form textarea{flex:1;resize:none}

@media(max-width:760px){
  .dm{grid-template-columns:1fr;height:72vh}
  .dm-list{border-right:0;padding-right:0}
  .dm-thread{display:none}
  .dm.show-thread .dm-list{display:none}
  .dm.show-thread .dm-thread{display:flex}
  .dm-back{display:inline-block}
}
.dm-msgs.snap{max-height:260px;flex:none;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg)}
button.primary.danger{background:var(--sell);border-color:var(--sell);color:var(--on-sell)}
.myitem .row{margin:0;flex-wrap:nowrap}

/* LINE 按鈕 / 驗證視窗 / 卡片上的驗證標記 */
.linebtn{display:block;text-align:center;text-decoration:none;background:#06c755;color:#fff;font-weight:700;border-radius:6px;padding:9px 14px}
.linebtn:hover{background:#05b34c}
.linebtn[hidden],.or[hidden],.vmethod[hidden]{display:none}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.vwrap{display:flex;flex-direction:column;gap:10px}
.vmethod{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.vhead{display:flex;justify-content:space-between;align-items:center}
.vstate{font-size:12px;color:var(--dim)}
.vstate.ok{color:var(--ok);font-weight:700}
.vrow{display:flex;gap:8px}
.vrow input{flex:1}
.warnline{border-left:3px solid var(--gold);padding-left:8px}
.vbadges{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.vb{font-size:11px;padding:0 6px;border-radius:99px;border:1px solid var(--ok);color:var(--ok);line-height:16px;white-space:nowrap}
.vb.line{border-color:#06c755;color:#06c755}
.flash{position:sticky;top:0;z-index:50;text-align:center;padding:10px 20px;background:var(--ok-soft);border-bottom:1px solid var(--ok);color:var(--text);font-size:14px;cursor:pointer}
.flash.warn{background:var(--accent-soft);border-bottom-color:var(--gold)}
.flash[hidden]{display:none}

/* 設定選單 */
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:250px;max-width:92vw;z-index:60;background:var(--panel);border:1px solid var(--gold);border-radius:10px;padding:6px;box-shadow:0 10px 28px #000a}
.menu[hidden]{display:none}
.menu h4{margin:8px 10px 4px;font-size:12px;letter-spacing:.08em;color:var(--dim);font-weight:600}
.menu button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:6px;color:var(--text)}
.menu button:hover:not([aria-disabled="true"]){background:var(--panel2)}
.menu button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.menu .st{font-size:12px;color:var(--dim);white-space:nowrap}
.menu .st.ok{color:var(--ok);font-weight:700}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu button.out{color:var(--sell)}
.vmethod.soon{opacity:.55}

/* 顏色設定視窗 */
.themewrap{display:flex;flex-direction:column;gap:10px}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button.on{border-color:var(--gold);color:var(--gold)}
.schemerow{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--dim)}
.colors{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;max-height:46vh;overflow-y:auto;padding-right:4px}
.crow{display:flex;align-items:center;gap:8px;font-size:13px}
.crow span{flex:1;min-width:0}
.crow input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer;flex:none}
.crow code{font-size:11px;color:var(--dim);width:58px;flex:none}
@media(max-width:560px){.colors{grid-template-columns:1fr}}
dialog .crow{flex-direction:row;align-items:center;color:var(--text)}

.discordbtn{display:block;text-align:center;text-decoration:none;background:#5865f2;color:#fff;font-weight:700;border-radius:6px;padding:9px 14px}
.discordbtn:hover{background:#4752c4}
.discordbtn[hidden]{display:none}
.vb.discord{border-color:#7983f5;color:#7983f5}

.dangerTitle{color:var(--sell)}
.dellist{margin:0;padding-left:20px;font-size:13px;display:flex;flex-direction:column;gap:4px;color:var(--dim)}
.dellist b{color:var(--text)}
#delPwField[hidden]{display:none}

.allsv{color:var(--gold);font-weight:600}

/* 卡片底下的按鈕 / 可議價標記 */
.cardbtns{display:flex;gap:8px;margin-top:4px}
.cardbtns button{flex:1;padding:8px 10px;white-space:nowrap}
.neg{font-size:12px;font-weight:400;border-radius:99px;padding:0 8px;border:1px solid;margin-left:8px;vertical-align:middle;line-height:18px;display:inline-block}
.neg.yes{color:var(--ok);border-color:var(--ok)}
.neg.no{color:var(--dim);border-color:var(--line)}