: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;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif;font-size:13px;line-height:1.5;min-height:100vh;overflow-x:hidden}
a{color:var(--link);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
.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:8px;padding:6px 12px;background:var(--topbar);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100;height:42px}
.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:3px;padding:5px 8px;font-size:12px;min-width:150px;cursor:pointer}
.icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--bdr);border-radius:3px;cursor:pointer;font-size:14px}
.icon-btn:hover{border-color:var(--gold)}
.topbar-center{flex:1;max-width:560px}
.search-bar{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--bdr);border-radius:3px;padding:0 8px}
.search-bar:focus-within{border-color:var(--goldd)}
.search-icon{font-size:14px;opacity:.5;margin-right:6px}
.search-bar input{flex:1;background:none;border:none;color:var(--txb);font-size:13px;padding:6px 0;outline:none}
.search-bar input::placeholder{color:var(--txd)}
.topbar-right{display:flex;align-items:center;gap:6px}
.btn-filter{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:3px;padding:5px 14px;font-size:12px;cursor:pointer}
.btn-filter:hover{border-color:var(--gold)}
.btn-search{background:var(--red);color:#fff;border:none;border-radius:3px;padding:6px 24px;font-size:13px;font-weight:700;cursor:pointer}
.btn-search:hover{background:var(--redb)}

.filter-panel{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:8px 12px 8px 220px}
.filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-row label{font-size:11px;color:var(--gold);font-weight:600}
.filter-opt{display:flex;align-items:center;gap:4px}
.filter-opt label{font-size:11px;color:var(--txd);font-weight:400}
.filter-opt select{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:3px;padding:3px 6px;font-size:12px}

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

/* ===== Sidebar with expandable tree ===== */
.sidebar{width:210px;min-width:210px;background:var(--sidebar);border-right:1px solid var(--bdr);overflow-y:auto;overflow-x:hidden;padding:4px 0;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}

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

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

.cat-sub-item{display:block;padding:3px 10px 3px 24px;font-size:12px;color:var(--txb);cursor:pointer;border-left:3px solid transparent;background:var(--bg3);border-top:1px solid var(--bdr);transition:background .08s}
.cat-sub-item:hover{background:var(--bg4)}
.cat-sub-item.selected{border-left-color:var(--cat-sel-border);background:var(--cat-sel)}

.cat-leaf{display:block;padding:2px 10px 2px 36px;font-size:11.5px;color:var(--link);cursor:pointer;transition:background .08s}
.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:var(--bdr);margin:6px 10px}

/* ===== Content ===== */
.content{flex:1;overflow-y:auto;min-height:calc(100vh - 42px)}
.view{display:none;padding:16px 20px}
.view.active{display:block}

.welcome{text-align:center;padding:50px 20px}
.welcome h1{font-family:Georgia,'Times New Roman',serif;font-size:2rem;color:var(--txb);margin-bottom:6px}
.welcome-sub{font-size:.95rem;color:var(--txd);margin-bottom:16px}
.welcome-desc{font-size:.82rem;color:var(--txd);margin-bottom:20px}
.welcome-stats{display:flex;justify-content:center;gap:16px;font-size:.78rem;color:var(--txd);margin-bottom:24px;flex-wrap:wrap}
.welcome-stats span{background:var(--bg3);padding:5px 14px;border-radius:3px;border:1px solid var(--bdr)}
.welcome-footer{font-size:.72rem;color:var(--txd);line-height:1.8}

.item-table{width:100%;border-collapse:collapse}
.item-table th{text-align:left;padding:5px 10px;font-size:10px;color:var(--txd);font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--bdr2);white-space:nowrap}
.item-table td{padding:4px 10px;border-bottom:1px solid var(--bdr);font-size:12.5px}
.item-table tbody tr{cursor:pointer;transition:background .08s}
.item-table tbody tr:hover td{background:var(--bg3)}
.col-r{text-align:right}
.result-header{padding:0 0 6px;font-size:12px;color:var(--txd);border-bottom:1px solid var(--bdr);margin-bottom:2px}
.meta{font-size:11px;color:var(--txd)}

.g{color:var(--gold)}.s{color:#c0c0c0}.c{color:#b87333}

.item-header{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--bdr);margin-bottom:14px}
.item-header h2{font-size:1.15rem;font-weight:700}
.section{margin-bottom:18px}
.section h3{font-size:12px;font-weight:600;color:var(--gold);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.table-wrap{overflow-x:auto}

.realm-table{width:100%;border-collapse:collapse;font-size:12px}
.realm-table th{text-align:left;padding:4px 8px;color:var(--txd);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--bdr2);white-space:nowrap}
.realm-table td{padding:3px 8px;border-bottom:1px solid var(--bdr);white-space:nowrap}
.realm-table tr:hover td{background:var(--bg3)}
.realm-table .cheapest td{background:#1a2818}
.realm-table .cheapest td:first-child{border-left:3px solid var(--green)}

.chart-opts{display:flex;gap:4px}
.chart-opts select{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:3px;padding:3px 6px;font-size:11px}
.chart-wrap{background:var(--bg2);border:1px solid var(--bdr);border-radius:4px;padding:10px;margin-bottom:6px}

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

.announce{position:fixed;bottom:0;left:0;right:0;padding:6px 20px;background:#2a2010;border-top:1px solid #4a3a18;font-size:12px;color:#e8c860;text-align:center;z-index:200}

.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
.modal-box{background:var(--bg2);border:1px solid var(--bdr2);border-radius:6px;padding:20px;width:90%;max-width:400px}
.modal-box h3{color:var(--gold);font-size:14px;margin-bottom:10px}
.modal-box textarea{width:100%;background:var(--bg);color:var(--txb);border:1px solid var(--bdr);border-radius:4px;padding:8px;font-family:inherit;font-size:13px;resize:vertical;outline:none}
.modal-box textarea:focus{border-color:var(--goldd)}
.modal-actions{display:flex;gap:8px;margin-top:8px}
.modal-actions button{padding:5px 14px;border-radius:3px;font-size:12px;cursor:pointer;border:1px solid var(--bdr)}
.modal-actions button:first-child{background:var(--red);color:#fff;border-color:var(--red)}
.btn-secondary{background:transparent;color:var(--tx)}
.fb-msg{font-size:12px;margin-top:5px}.fb-msg.ok{color:var(--green)}.fb-msg.err{color:var(--redb)}

.loading{text-align:center;padding:20px;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:6px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:768px){
  .sidebar{width:160px;min-width:160px}
  .cat-leaf{padding-left:28px}
  .topbar-left select{min-width:100px}
}
@media(max-width:520px){
  .sidebar{display:none}
  .topbar{flex-wrap:wrap;height:auto}
  .topbar-left,.topbar-center,.topbar-right{width:100%}
}