:root{
  --bg:#1a1410;--bg2:#211c16;--bg3:#2a231b;--bg4:#342b21;
  --sidebar:#1e1914;--topbar:#151210;
  --bdr:#3a3028;--bdr2:#4a3d30;
  --gold:#c8a24e;--goldb:#e8c060;--goldd:#8a6d2b;
  --red:#c03030;--redb:#e04040;
  --tx:#c0b8a8;--txd:#7a7060;--txb:#e8e0d0;
  --q0:#9d9d9d;--q1:#fff;--q2:#1eff00;--q3:#0070dd;--q4:#a335ee;--q5:#ff8000;
  --green:#40b840;--blue:#4090d4;
  --link:#40b840;
  --cat-hl:#a0903020;--cat-sel:#e8c86018;--cat-sel-border:#e8c860;
  --r:6px;--r-sm:4px;--r-lg:10px;
  --shadow:0 2px 8px rgba(0,0,0,.25)
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:'PingFang SC','Microsoft YaHei UI','Microsoft YaHei','Hiragino Sans GB','Source Han Sans SC','Noto Sans SC',system-ui,sans-serif;font-size:13px;line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;cursor:pointer;transition:color .15s}
a:hover{color:var(--goldb);text-decoration:none}
.hidden{display:none!important}
.q0{color:var(--q0)}.q1{color:var(--q1)}.q2{color:var(--q2)}.q3{color:var(--q3)}.q4{color:var(--q4)}.q5{color:var(--q5)}

/* ===== 顶栏 ===== */
.topbar{display:flex;align-items:center;gap:10px;padding:7px 14px;background:linear-gradient(180deg,#1a1510,var(--topbar));border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100;height:46px;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:180px}
.topbar-left select{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:var(--r);padding:6px 10px;font-size:12px;min-width:150px;cursor:pointer;transition:border-color .15s;font-family:inherit}
.topbar-left select:hover{border-color:var(--goldd)}
.icon-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);cursor:pointer;font-size:14px;transition:all .15s}
.icon-btn:hover{border-color:var(--gold);background:var(--bg4)}
.topbar-center{flex:1;max-width:560px}
.search-bar{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:0 12px;transition:all .2s}
.search-bar:focus-within{border-color:var(--goldd);box-shadow:0 0 0 2px rgba(200,162,78,.12)}
.search-icon{font-size:14px;opacity:.4;margin-right:8px}
.search-bar input{flex:1;background:none;border:none;color:var(--txb);font-size:13px;padding:7px 0;outline:none;font-family:inherit}
.search-bar input::placeholder{color:var(--txd)}
.topbar-right{display:flex;align-items:center;gap:8px}
.btn-filter{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:var(--r);padding:6px 16px;font-size:12px;cursor:pointer;transition:all .15s;font-family:inherit}
.btn-filter:hover{border-color:var(--gold);background:var(--bg4)}
.btn-search{background:linear-gradient(180deg,#d03535,#b02828);color:#fff;border:none;border-radius:var(--r);padding:7px 26px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;box-shadow:0 2px 6px rgba(192,48,48,.3);font-family:inherit;letter-spacing:.5px}
.btn-search:hover{background:linear-gradient(180deg,#e04040,#c03030);box-shadow:0 3px 10px rgba(192,48,48,.4)}

/* ===== 筛选面板 ===== */
.filter-panel{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:14px 18px 14px 228px}
.filter-grid{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-start}
.filter-group{display:flex;flex-direction:column;gap:6px}
.filter-label{font-size:10.5px;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.filter-range{display:flex;align-items:center;gap:6px}
.filter-sep{color:var(--txd);font-size:12px}
.filter-input-num{width:54px;background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:var(--r);padding:5px 6px;font-size:12px;text-align:center;outline:none;transition:border-color .15s;font-family:inherit}
.filter-input-num:focus{border-color:var(--goldd)}
.filter-opt{display:flex;align-items:center;gap:4px}
.filter-opt label{font-size:11px;color:var(--txd)}
.filter-opt select,.filter-select-era{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:var(--r);padding:5px 8px;font-size:12px;transition:border-color .15s;font-family:inherit}
.filter-opt select:hover,.filter-select-era:hover{border-color:var(--goldd)}
.filter-select-era{min-width:120px;padding:5px 10px}
.filter-checks{display:flex;flex-direction:column;gap:5px}
.filter-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx);cursor:pointer}
.filter-check input[type="checkbox"]{accent-color:var(--gold);width:14px;height:14px;cursor:pointer}
.filter-actions{flex-direction:row;align-items:flex-end;gap:8px;margin-left:auto}
.btn-filter-apply{background:linear-gradient(180deg,#d03535,#b02828);color:#fff;border:none;border-radius:var(--r);padding:6px 18px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.btn-filter-apply:hover{background:linear-gradient(180deg,#e04040,#c03030)}
.btn-filter-reset{background:var(--bg3);color:var(--txd);border:1px solid var(--bdr);border-radius:var(--r);padding:6px 14px;font-size:12px;cursor:pointer;transition:all .15s;font-family:inherit}
.btn-filter-reset:hover{color:var(--tx);border-color:var(--bdr2)}

.main-wrap{display:flex;min-height:calc(100vh - 46px)}

/* ===== 侧边栏 ===== */
.sidebar{width:214px;min-width:214px;background:var(--sidebar);border-right:1px solid var(--bdr);overflow-y:auto;overflow-x:hidden;padding:6px 0;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}

.cat-item{user-select:none}
.cat-main{display:flex;align-items:center;padding:6px 12px;font-size:12.5px;color:var(--link);cursor:pointer;border-left:3px solid transparent;border-top:1px solid rgba(58,48,40,.4);transition:all .12s}
.cat-main:hover{background:var(--cat-hl)}
.cat-main.selected,.cat-main.expanded{border-left-color:var(--cat-sel-border);background:var(--bg3)}

.cat-sub{display:none;background:var(--bg2)}
.cat-sub.open{display:block}

.cat-leaf{display:block;padding:4px 12px 4px 36px;font-size:11.5px;color:var(--link);cursor:pointer;transition:all .1s}
.cat-leaf:hover{background:var(--bg4);text-decoration:none}
.cat-leaf.selected{color:var(--goldb)}
.cat-leaf::before{content:'└ ';color:var(--txd);font-size:10px}

.cat-special{color:var(--q5)!important;font-weight:600}
.sidebar-divider{height:1px;background:linear-gradient(90deg,transparent,var(--bdr),transparent);margin:8px 14px}

/* ===== 内容区 ===== */
.content{flex:1;overflow-y:auto;min-height:calc(100vh - 46px)}
.view{display:none;padding:18px 22px}
.view.active{display:block}

.welcome{text-align:center;padding:60px 20px}
.welcome h1{font-size:2.1rem;color:var(--txb);margin-bottom:8px;font-weight:700}
.welcome-sub{font-size:.95rem;color:var(--txd);margin-bottom:18px}
.welcome-desc{font-size:.82rem;color:var(--txd);margin-bottom:24px}
.welcome-stats{display:flex;justify-content:center;gap:14px;font-size:.78rem;color:var(--txd);margin-bottom:28px;flex-wrap:wrap}
.welcome-stats span{background:var(--bg3);padding:6px 16px;border-radius:var(--r-lg);border:1px solid var(--bdr);transition:all .15s}
.welcome-stats span:hover{border-color:var(--goldd)}
.welcome-footer{font-size:.72rem;color:var(--txd);line-height:1.9}

/* ===== 表格 ===== */
.item-table{width:100%;border-collapse:separate;border-spacing:0}
.item-table th{text-align:left;padding:6px 12px;font-size:10px;color:var(--txd);font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--bdr2);white-space:nowrap}
.item-table td{padding:5px 12px;border-bottom:1px solid rgba(58,48,40,.4);font-size:12.5px}
.item-table tbody tr{cursor:pointer;transition:background .1s}
.item-table tbody tr:hover td{background:rgba(42,35,27,.7)}
.col-r{text-align:right}
.result-header{padding:0 0 8px;font-size:12px;color:var(--txd);border-bottom:1px solid var(--bdr);margin-bottom:4px}
.meta{font-size:11px;color:var(--txd)}
.g{color:var(--gold)}.s{color:#c0c0c0}.c{color:#b87333}

/* ===== 物品详情 ===== */
.item-header{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--bdr);margin-bottom:16px}
.item-header h2{font-size:1.2rem;font-weight:700}
.section{margin-bottom:20px}
.section h3{font-size:11px;font-weight:600;color:var(--gold);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.table-wrap{overflow-x:auto}

.realm-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.realm-table th{text-align:left;padding:5px 10px;color:var(--txd);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--bdr2);white-space:nowrap}
.realm-table td{padding:4px 10px;border-bottom:1px solid rgba(58,48,40,.4);white-space:nowrap}
.realm-table tr{transition:background .1s}
.realm-table tr:hover td{background:rgba(42,35,27,.6)}
.realm-table .cheapest td{background:rgba(26,40,24,.6)}
.realm-table .cheapest td:first-child{border-left:3px solid var(--green)}

.chart-opts{display:flex;gap:6px}
.chart-opts select{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:var(--r);padding:4px 8px;font-size:11px;font-family:inherit;transition:border-color .15s}
.chart-opts select:hover{border-color:var(--goldd)}
.chart-wrap{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:12px;margin-bottom:8px}

.deal-discount{display:inline-block;background:#2a1a1a;color:var(--redb);padding:2px 8px;border-radius:var(--r);font-weight:700;font-size:11px}

/* ===== 分页 ===== */
.pagination{display:flex;justify-content:center;gap:4px;padding:12px 0}
.pagination button{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:var(--r);padding:5px 12px;font-size:12px;cursor:pointer;transition:all .15s;font-family:inherit}
.pagination button:hover{border-color:var(--gold);background:var(--bg4)}
.pagination button.active{background:var(--bg4);border-color:var(--gold);color:var(--goldb);font-weight:600}
.pagination button:disabled{opacity:.35;cursor:default}

.out-of-stock td{opacity:.45}
.out-of-stock:hover td{opacity:.75}
.median-col{transition:all .15s}

/* ===== 装等变体 ===== */
.ilvl-summary{padding:4px 0 8px;font-size:12px;color:var(--txd)}
.ilvl-badge{display:inline-block;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r);padding:1px 8px;font-size:11px;color:var(--txb);margin:0 2px}
.ilvl-tags{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end}
.ilvl-tag{display:inline-block;background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:0 5px;font-size:10.5px;color:var(--txb);cursor:default;transition:all .15s;line-height:1.6}
.ilvl-tag:hover{border-color:var(--goldd);color:var(--goldb);background:var(--bg4)}

/* ===== 收藏 ===== */
.icon-fav{color:var(--gold);font-size:16px}
.icon-fav:hover{color:var(--goldb)}
.fav-star{font-size:20px;color:var(--txd);cursor:pointer;transition:all .2s;line-height:1}
.fav-star:hover{color:var(--goldb);transform:scale(1.15)}
.fav-star.active{color:var(--gold)}
.fav-star-sm{font-size:14px;color:var(--txd);cursor:pointer;transition:all .15s;padding:0 3px}
.fav-star-sm:hover{color:var(--goldb);transform:scale(1.2)}
.fav-star-sm.active{color:var(--gold)}
.fav-empty{text-align:center;padding:50px 20px;color:var(--txd)}
.fav-empty p:first-child{font-size:14px;margin-bottom:8px}
.fav-remove{background:none;border:1px solid var(--bdr);color:var(--txd);padding:3px 10px;border-radius:var(--r);font-size:11px;cursor:pointer;transition:all .15s;font-family:inherit}
.fav-remove:hover{border-color:var(--redb);color:var(--redb);background:rgba(192,48,48,.08)}

/* ===== 其他 ===== */
.announce{position:fixed;bottom:0;left:0;right:0;padding:8px 20px;background:linear-gradient(180deg,#2a2010,#221a0c);border-top:1px solid #4a3a18;font-size:12px;color:#e8c860;z-index:200;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .2s}
.announce-text{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.6}
.announce.expanded .announce-text{white-space:normal;overflow:visible}
.announce-expand{font-size:10px;color:#e8c86080;white-space:nowrap}
.announce.expanded .announce-expand{display:none}
.announce-close{cursor:pointer;font-size:14px;opacity:.6;transition:opacity .15s;padding:0 4px;flex-shrink:0}
.announce-close:hover{opacity:1}
.fb-char-count{text-align:right;font-size:11px;color:var(--txd);margin-top:2px}

.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-box{background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--r-lg);padding:24px;width:90%;max-width:420px;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.modal-box h3{color:var(--gold);font-size:14px;margin-bottom:12px;font-weight:600}
.modal-box textarea{width:100%;background:var(--bg);color:var(--txb);border:1px solid var(--bdr);border-radius:var(--r);padding:10px;font-family:inherit;font-size:13px;resize:vertical;outline:none;transition:border-color .15s}
.modal-box textarea:focus{border-color:var(--goldd)}
.modal-actions{display:flex;gap:8px;margin-top:10px}
.modal-actions button{padding:6px 16px;border-radius:var(--r);font-size:12px;cursor:pointer;border:1px solid var(--bdr);transition:all .15s;font-family:inherit}
.modal-actions button:first-child{background:linear-gradient(180deg,#d03535,#b02828);color:#fff;border-color:transparent}
.modal-actions button:first-child:hover{background:linear-gradient(180deg,#e04040,#c03030)}
.btn-secondary{background:transparent;color:var(--tx)}
.btn-secondary:hover{background:var(--bg3)}
.fb-msg{font-size:12px;margin-top:6px}.fb-msg.ok{color:var(--green)}.fb-msg.err{color:var(--redb)}

.loading{text-align:center;padding:24px;color:var(--txd);font-size:12px}
.loading::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid var(--bdr);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;margin-left:8px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:768px){
  .sidebar{width:165px;min-width:165px}
  .cat-leaf{padding-left:28px}
  .topbar-left select{min-width:100px}
  .filter-panel{padding-left:16px}
  .filter-grid{gap:10px 16px}
}
@media(max-width:520px){
  .sidebar{display:none}
  .topbar{flex-wrap:wrap;height:auto;padding:8px}
  .topbar-left,.topbar-center,.topbar-right{width:100%}
  .filter-panel{padding:10px}
  .filter-grid{flex-direction:column;gap:10px}
}