diff --git a/loot.html b/loot.html
index ed570f7..601ed5f 100644
--- a/loot.html
+++ b/loot.html
@@ -3,150 +3,482 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>d2web · 掉落模拟器与精确概率表（Issue #110）</title>
+    <title>暗黑破坏神 2 · 掉落模拟器与精确概率计算器 (Maxroll 风格)</title>
     <style>
       :root {
         color-scheme: dark;
-        --bg-main: #0b0906;
-        --bg-panel: rgba(22, 18, 14, 0.94);
-        --border-color: #382d22;
+        --bg-void: #080604;
+        --bg-main: #0e0a07;
+        --bg-panel: rgba(20, 15, 11, 0.95);
+        --bg-card: #15110c;
+        --bg-card-hover: #211a13;
+        --border-dim: #2b2219;
+        --border-gold: #73572d;
+        --border-gold-glow: #c8a15a;
         --gold-primary: #c8a15a;
-        --gold-light: #e8dcc8;
-        --text-dim: #9c8d78;
-        --btn-bg: #221c15;
-        --btn-hover: #3a2f24;
+        --gold-bright: #eecf87;
+        --gold-light: #f5eedc;
+        --text-dim: #998772;
+        --text-muted: #6e5e4d;
+        --btn-bg: #1c1611;
+        --btn-hover: #33271c;
+        --pill-bg: #1b150f;
+
+        /* Diablo Item Quality Colors */
+        --q-unique: #c8a15a;
+        --q-unique-bg: rgba(200, 161, 90, 0.08);
+        --q-unique-border: rgba(200, 161, 90, 0.35);
+        --q-set: #00e600;
+        --q-set-bg: rgba(0, 230, 0, 0.08);
+        --q-set-border: rgba(0, 230, 0, 0.35);
+        --q-rune: #ff8c00;
+        --q-rune-bg: rgba(255, 140, 0, 0.08);
+        --q-rune-border: rgba(255, 140, 0, 0.35);
+        --q-rare: #ffff60;
+        --q-rare-bg: rgba(255, 255, 96, 0.08);
+        --q-magic: #4880ff;
+        --q-magic-bg: rgba(72, 128, 255, 0.08);
+        --q-base: #e0d5c1;
+        --q-gem: #d880ff;
+        --q-gem-bg: rgba(216, 128, 255, 0.08);
+        --q-misc: #ffd700;
       }
+
       * { box-sizing: border-box; }
       html, body {
         margin: 0;
         padding: 0;
         height: 100%;
-        background: var(--bg-main);
+        background: var(--bg-void);
         color: var(--gold-light);
-        font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
         overflow: hidden;
       }
 
-      /* 顶部导航 */
+      /* Custom Scrollbar */
+      ::-webkit-scrollbar { width: 6px; height: 6px; }
+      ::-webkit-scrollbar-track { background: #0c0907; }
+      ::-webkit-scrollbar-thumb { background: #2f251c; border-radius: 3px; }
+      ::-webkit-scrollbar-thumb:hover { background: #523f2f; }
+
+      /* 顶部导航 Header */
       header {
-        height: 42px;
-        background: #14100c;
-        border-bottom: 1px solid var(--border-color);
+        height: 44px;
+        background: linear-gradient(180deg, #18120d 0%, #100c09 100%);
+        border-bottom: 1px solid var(--border-gold);
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 16px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
+        z-index: 100;
+        position: relative;
       }
       header h1 {
         margin: 0;
         font-size: 14px;
-        color: var(--gold-primary);
+        font-weight: 700;
+        color: var(--gold-bright);
         letter-spacing: 0.06em;
         display: flex;
         align-items: center;
         gap: 8px;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
       }
-      header a {
+      .brand-badge {
+        background: linear-gradient(135deg, #421200 0%, #7d2900 100%);
+        color: #ffb17a;
+        font-size: 10px;
+        font-weight: 800;
+        padding: 2px 6px;
+        border-radius: 3px;
+        border: 1px solid #b84300;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      header nav a {
         color: var(--gold-primary);
         text-decoration: none;
-        margin-left: 12px;
+        margin-left: 14px;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: all 0.15s ease;
+      }
+      header nav a:hover {
+        background: rgba(200, 161, 90, 0.12);
+        color: #fff;
       }
-      header a:hover { text-decoration: underline; }
 
-      /* 双栏主容器 */
+      /* 页面双栏主容器 */
       #app-container {
         display: grid;
-        grid-template-columns: 320px 1fr;
-        height: calc(100vh - 42px);
+        grid-template-columns: 390px 1fr;
+        height: calc(100vh - 44px);
         overflow: hidden;
       }
 
-      /* 侧边控制栏 */
+      /* 左侧控制器栏 Sidebar */
       .sidebar {
         background: var(--bg-panel);
-        border-right: 1px solid var(--border-color);
+        border-right: 1px solid var(--border-dim);
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow-y: auto;
       }
 
-      .panel-header {
-        padding: 10px 14px;
-        background: #1a1510;
-        border-bottom: 1px solid var(--border-color);
+      .sidebar-section {
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--border-dim);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .section-headline {
+        font-size: 11px;
+        font-weight: 700;
         color: var(--gold-primary);
-        font-weight: bold;
-        font-size: 13px;
+        text-transform: uppercase;
+        letter-spacing: 0.07em;
         display: flex;
         align-items: center;
         justify-content: space-between;
       }
 
-      .panel-content {
-        padding: 12px 14px;
+      /* 难度切换按钮组 */
+      .diff-segmented-control {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 4px;
+        background: #0d0a07;
+        padding: 3px;
+        border-radius: 5px;
+        border: 1px solid var(--border-dim);
+      }
+      .diff-btn {
+        background: transparent;
+        border: none;
+        color: var(--text-dim);
+        padding: 6px 4px;
+        font-size: 11px;
+        font-weight: 600;
+        border-radius: 4px;
+        cursor: pointer;
         display: flex;
-        flex-direction: column;
-        gap: 10px;
-        overflow-y: auto;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        transition: all 0.15s ease;
+      }
+      .diff-btn:hover {
+        color: var(--gold-light);
+        background: rgba(200, 161, 90, 0.08);
+      }
+      .diff-btn.active {
+        background: linear-gradient(180deg, #382718 0%, #24190f 100%);
+        color: var(--gold-bright);
+        border: 1px solid var(--border-gold);
+        box-shadow: 0 1px 4px rgba(0,0,0,0.5);
       }
 
-      /* 表单元素 */
-      .form-group {
+      /* 怪物分类 Chips */
+      .monster-cat-row {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
+      .monster-cat-chip {
+        background: #14100c;
+        border: 1px solid var(--border-dim);
+        color: var(--text-dim);
+        font-size: 11px;
+        padding: 4px 8px;
+        border-radius: 12px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+      .monster-cat-chip:hover {
+        border-color: var(--border-gold);
+        color: var(--gold-light);
+      }
+      .monster-cat-chip.active {
+        background: #302315;
+        border-color: var(--gold-primary);
+        color: var(--gold-bright);
+        font-weight: 600;
+      }
+
+      /* 怪物搜索框 */
+      .search-box-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+      .search-box-wrapper input {
+        width: 100%;
+        background: #0d0a07;
+        border: 1px solid var(--border-dim);
+        color: var(--gold-light);
+        padding: 6px 10px 6px 28px;
+        border-radius: 4px;
+        font-size: 11px;
+      }
+      .search-box-wrapper input:focus {
+        outline: none;
+        border-color: var(--gold-primary);
+        background: #130f0a;
+      }
+      .search-box-icon {
+        position: absolute;
+        left: 8px;
+        color: var(--text-muted);
+        font-size: 12px;
+        pointer-events: none;
+      }
+
+      /* 怪物列表滚动区 */
+      .monster-list-container {
         display: flex;
         flex-direction: column;
         gap: 4px;
+        max-height: 220px;
+        overflow-y: auto;
+        padding-right: 2px;
       }
-      .form-row {
+      .monster-item-card {
+        background: #14100c;
+        border: 1px solid var(--border-dim);
+        border-radius: 4px;
+        padding: 6px 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        transition: all 0.12s ease;
+      }
+      .monster-item-card:hover {
+        background: #1e1711;
+        border-color: #4a3826;
+      }
+      .monster-item-card.selected {
+        background: linear-gradient(90deg, #2b1f13 0%, #1c150e 100%);
+        border: 1px solid var(--gold-primary);
+        box-shadow: 0 0 8px rgba(200, 161, 90, 0.2);
+      }
+      .mon-icon {
+        font-size: 16px;
+        width: 24px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+      .mon-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .mon-name-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+      }
+      .mon-name {
+        font-weight: 600;
+        font-size: 12px;
+        color: var(--gold-light);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .monster-item-card.selected .mon-name {
+        color: var(--gold-bright);
+      }
+      .mon-cat-badge {
+        font-size: 9px;
+        padding: 1px 4px;
+        border-radius: 3px;
+        font-weight: 600;
+        flex-shrink: 0;
+      }
+      .badge-boss { background: #5c1818; color: #ff9999; border: 1px solid #802020; }
+      .badge-superunique { background: #473210; color: #f0c674; border: 1px solid #6b4d1b; }
+      .badge-farm { background: #1a3d24; color: #85e89d; border: 1px solid #285e37; }
+      .badge-chest { background: #2f274a; color: #b392f0; border: 1px solid #4a3d75; }
+      .badge-normal { background: #222222; color: #cccccc; border: 1px solid #444444; }
+      .mon-meta {
+        font-size: 10px;
+        color: var(--text-dim);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* 选定怪物规格看板 (Monster Spec Card) */
+      .monster-spec-card {
+        background: linear-gradient(180deg, #1d1610 0%, #120e0a 100%);
+        border: 1px solid var(--border-gold);
+        border-radius: 6px;
+        padding: 10px 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+      }
+      .spec-header-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .spec-header-icon {
+        font-size: 24px;
+        width: 32px;
+        height: 32px;
+        background: #0d0a07;
+        border: 1px solid var(--border-dim);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .spec-title-box {
+        flex: 1;
+        min-width: 0;
+      }
+      .spec-title {
+        font-size: 13px;
+        font-weight: 700;
+        color: var(--gold-bright);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .spec-sub {
+        font-size: 10px;
+        color: var(--text-dim);
+      }
+      .spec-grid-4 {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 6px;
+        background: #0b0906;
+        padding: 6px 8px;
+        border-radius: 4px;
+        border: 1px solid var(--border-dim);
+      }
+      .spec-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+      }
+      .spec-item-label {
+        font-size: 9px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+      }
+      .spec-item-val {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--gold-light);
+        font-variant-numeric: tabular-nums;
+      }
+      .quest-drop-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: #14100c;
+        border: 1px solid var(--border-dim);
+        border-radius: 4px;
+        padding: 6px 10px;
+      }
+      .quest-drop-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--gold-light);
+        cursor: pointer;
+      }
+      .quest-banner {
+        background: linear-gradient(90deg, #473210 0%, #261b0a 100%);
+        border: 1px solid var(--gold-primary);
+        color: #ffe49e;
+        padding: 5px 8px;
+        border-radius: 4px;
+        font-size: 10px;
+        display: none;
+        align-items: center;
+        gap: 6px;
+      }
+
+      /* 快速筹码 Chips (Players / MF) */
+      .chips-row {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
+      .chip-btn {
+        background: #120e0a;
+        border: 1px solid var(--border-dim);
+        color: var(--text-dim);
+        font-size: 11px;
+        padding: 3px 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.12s ease;
+      }
+      .chip-btn:hover {
+        border-color: var(--border-gold);
+        color: var(--gold-light);
+      }
+      .chip-btn.active {
+        background: #352617;
+        border-color: var(--gold-primary);
+        color: var(--gold-bright);
+        font-weight: 700;
+      }
+
+      .form-grid-2 {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 8px;
       }
-      label {
-        font-size: 11px;
+      .form-field {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+      .form-field label {
+        font-size: 10px;
         color: var(--text-dim);
       }
-      input, select {
-        background: #18140f;
-        border: 1px solid var(--border-color);
+      .form-field input, .form-field select {
+        background: #0d0a07;
+        border: 1px solid var(--border-dim);
         color: var(--gold-light);
         padding: 5px 8px;
         border-radius: 4px;
-        font: inherit;
-        font-size: 12px;
+        font-size: 11px;
       }
-      input[type="number"] {
-        font-variant-numeric: tabular-nums;
-      }
-      input:focus, select:focus {
+      .form-field input:focus, .form-field select:focus {
         outline: none;
         border-color: var(--gold-primary);
       }
 
-      .badge-section {
-        border-top: 1px dashed var(--border-color);
-        padding-top: 10px;
-        margin-top: 4px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .section-title {
-        font-size: 11px;
-        color: var(--gold-primary);
-        font-weight: 600;
-      }
-
-      /* 按钮组 */
+      /* 按钮系统 */
       .btn {
         background: var(--btn-bg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-dim);
         color: var(--gold-light);
         padding: 6px 12px;
         border-radius: 4px;
+        font-size: 11px;
+        font-weight: 600;
         cursor: pointer;
-        font: inherit;
-        font-size: 12px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -162,450 +494,837 @@
         opacity: 0.4;
         cursor: not-allowed;
       }
-      .btn.primary {
-        background: #3d2b18;
-        border-color: #8c6a38;
-        color: #ffdfa9;
-        font-weight: bold;
+      .btn-gold {
+        background: linear-gradient(180deg, #45321d 0%, #2a1e12 100%);
+        border: 1px solid var(--gold-primary);
+        color: var(--gold-bright);
+        box-shadow: 0 1px 4px rgba(0,0,0,0.5);
       }
-      .btn.primary:hover:not(:disabled) {
-        background: #543b20;
-        border-color: var(--gold-primary);
+      .btn-gold:hover:not(:disabled) {
+        background: linear-gradient(180deg, #574026 0%, #3a2a19 100%);
+        color: #fff;
       }
-      .btn.danger { color: #ff6b6b; }
-      .btn.danger:hover:not(:disabled) { border-color: #ff6b6b; }
+      .btn-danger { color: #ff7777; border-color: #662222; }
+      .btn-danger:hover:not(:disabled) { background: #3b1111; border-color: #aa3333; color: #fff; }
 
-      /* 右侧主视口区 */
+      /* 右侧主视口 Main Area */
       #main-area {
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow: hidden;
+        background: var(--bg-main);
       }
 
-      /* Tab 切换导航 */
-      .tabs-nav {
+      /* 顶层视图切换 Tabs (Maxroll Style) */
+      .view-tabs-header {
+        height: 40px;
+        background: #110d0a;
+        border-bottom: 1px solid var(--border-dim);
         display: flex;
-        background: #14100c;
-        border-bottom: 1px solid var(--border-color);
+        align-items: stretch;
+        padding: 0 16px;
+        gap: 8px;
       }
-      .tab-btn {
+      .view-tab-btn {
         background: transparent;
         border: none;
-        border-right: 1px solid var(--border-color);
+        border-bottom: 2px solid transparent;
         color: var(--text-dim);
-        padding: 10px 18px;
-        font: inherit;
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 600;
+        padding: 0 14px;
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 6px;
         transition: all 0.15s ease;
       }
-      .tab-btn:hover {
+      .view-tab-btn:hover {
         color: var(--gold-light);
-        background: #1c1813;
+        background: rgba(200, 161, 90, 0.05);
       }
-      .tab-btn.active {
-        color: var(--gold-primary);
-        background: #1f1913;
+      .view-tab-btn.active {
+        color: var(--gold-bright);
         border-bottom: 2px solid var(--gold-primary);
+        background: rgba(200, 161, 90, 0.09);
       }
 
-      .tab-content {
+      /* 核心统计横幅 Status Bar */
+      .target-status-bar {
+        background: #16110c;
+        border-bottom: 1px solid var(--border-dim);
+        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .target-status-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .status-target-pill {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        background: #0d0a07;
+        padding: 3px 8px;
+        border-radius: 4px;
+        border: 1px solid var(--border-gold);
+      }
+      .status-label {
+        font-size: 10px;
+        color: var(--text-muted);
+      }
+      .status-value {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--gold-bright);
+      }
+      .target-metrics-group {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+      }
+      .metric-mini {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .metric-mini-label {
+        font-size: 9px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+      }
+      .metric-mini-val {
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--gold-light);
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* 掉落分类 Tabs 导航 (Maxroll Category Chips) */
+      .category-nav-bar {
+        background: #130f0a;
+        border-bottom: 1px solid var(--border-dim);
+        padding: 6px 16px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        overflow-x: auto;
+      }
+      .item-cat-tab {
+        background: #1a140f;
+        border: 1px solid var(--border-dim);
+        color: var(--text-dim);
+        padding: 4px 10px;
+        border-radius: 14px;
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        white-space: nowrap;
+        transition: all 0.12s ease;
+      }
+      .item-cat-tab:hover {
+        border-color: var(--border-gold);
+        color: var(--gold-light);
+      }
+      .item-cat-tab.active {
+        background: #3a2a19;
+        border-color: var(--gold-primary);
+        color: var(--gold-bright);
+      }
+      .cat-count {
+        background: #0d0a07;
+        padding: 1px 5px;
+        border-radius: 8px;
+        font-size: 10px;
+        font-weight: 700;
+        color: var(--gold-light);
+        font-variant-numeric: tabular-nums;
+      }
+      .item-cat-tab.active .cat-count {
+        background: #14100c;
+        color: var(--gold-bright);
+        border: 1px solid var(--border-gold);
+      }
+
+      /* 工具栏 Toolbar (搜索 / 排序 / 导出) */
+      .drop-toolbar {
+        padding: 8px 16px;
+        background: #110d09;
+        border-bottom: 1px solid var(--border-dim);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+      .toolbar-search {
         flex: 1;
-        overflow-y: auto;
+        max-width: 420px;
         position: relative;
       }
-      .tab-pane {
-        display: none;
-        padding: 16px;
-        height: 100%;
-        overflow-y: auto;
+      .toolbar-search input {
+        width: 100%;
+        background: #0a0805;
+        border: 1px solid var(--border-dim);
+        color: var(--gold-light);
+        padding: 6px 12px 6px 28px;
+        border-radius: 4px;
+        font-size: 11px;
       }
-      .tab-pane.active {
+      .toolbar-search input:focus {
+        outline: none;
+        border-color: var(--gold-primary);
+      }
+      .toolbar-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      /* 视口内容容器 */
+      .view-pane {
+        display: none;
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px 16px;
+      }
+      .view-pane.active {
         display: block;
       }
 
-      /* 统计卡片网格 */
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 12px;
-        margin-bottom: 16px;
+      /* Maxroll 风格掉落卡片 (Maxroll Item Drop Cards) */
+      .cards-list-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding-bottom: 40px;
       }
-      .stat-card {
-        background: #14100c;
-        border: 1px solid var(--border-color);
-        border-radius: 4px;
-        padding: 10px 14px;
+      .maxroll-item-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-dim);
+        border-radius: 5px;
+        padding: 8px 14px;
+        display: grid;
+        grid-template-columns: 280px 1fr 180px;
+        align-items: center;
+        gap: 16px;
+        transition: all 0.15s ease;
+      }
+      .maxroll-item-card:hover {
+        background: var(--bg-card-hover);
+        border-color: #4a3a2a;
+        transform: translateY(-1px);
+        box-shadow: 0 3px 8px rgba(0,0,0,0.4);
+      }
+
+      /* 品质特定边框与背景 */
+      .maxroll-item-card.tag-unique {
+        border-left: 3px solid var(--q-unique);
+        background: linear-gradient(90deg, var(--q-unique-bg) 0%, var(--bg-card) 40%);
+      }
+      .maxroll-item-card.tag-set {
+        border-left: 3px solid var(--q-set);
+        background: linear-gradient(90deg, var(--q-set-bg) 0%, var(--bg-card) 40%);
+      }
+      .maxroll-item-card.tag-rune {
+        border-left: 3px solid var(--q-rune);
+        background: linear-gradient(90deg, var(--q-rune-bg) 0%, var(--bg-card) 40%);
+      }
+      .maxroll-item-card.tag-gem {
+        border-left: 3px solid var(--q-gem);
+        background: linear-gradient(90deg, var(--q-gem-bg) 0%, var(--bg-card) 40%);
+      }
+      .maxroll-item-card.tag-misc {
+        border-left: 3px solid #ffd700;
+      }
+      .maxroll-item-card.tag-base {
+        border-left: 3px solid #8c8273;
+      }
+
+      /* 卡片左部：Rank、品质徽章、名称、代码 */
+      .card-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 0;
+      }
+      .card-rank {
+        font-size: 11px;
+        font-weight: 700;
+        color: var(--text-muted);
+        width: 24px;
+        text-align: center;
+        font-variant-numeric: tabular-nums;
+      }
+      .card-quality-tag {
+        font-size: 9px;
+        font-weight: 700;
+        padding: 2px 5px;
+        border-radius: 3px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        flex-shrink: 0;
+      }
+      .card-quality-tag.tag-unique { background: #4a3416; color: var(--q-unique); border: 1px solid #7a5420; }
+      .card-quality-tag.tag-set { background: #164019; color: var(--q-set); border: 1px solid #236928; }
+      .card-quality-tag.tag-rune { background: #4d2600; color: var(--q-rune); border: 1px solid #804000; }
+      .card-quality-tag.tag-gem { background: #3d1c47; color: var(--q-gem); border: 1px solid #6b327d; }
+      .card-quality-tag.tag-misc { background: #383116; color: #ffd700; border: 1px solid #635724; }
+      .card-quality-tag.tag-base { background: #26211c; color: var(--text-dim); border: 1px solid #423b33; }
+
+      .card-title-group {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+      .card-main-title {
+        font-size: 13px;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .card-sub-meta {
+        font-size: 10px;
+        color: var(--text-dim);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .item-code-badge {
+        background: #0b0906;
+        padding: 1px 4px;
+        border-radius: 3px;
+        border: 1px solid var(--border-dim);
+        font-family: ui-monospace, SFMono-Regular, monospace;
+        color: var(--gold-primary);
+      }
+
+      /* 卡片中部：相对几率视觉条 */
+      .card-center {
         display: flex;
         flex-direction: column;
         gap: 4px;
       }
-      .stat-title {
-        font-size: 11px;
+      .odds-bar-track {
+        background: #0a0805;
+        border: 1px solid var(--border-dim);
+        border-radius: 3px;
+        height: 8px;
+        overflow: hidden;
+      }
+      .odds-bar-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #6e5428 0%, #c8a15a 100%);
+        border-radius: 2px;
+        transition: width 0.2s ease;
+      }
+      .odds-bar-fill.tag-unique { background: linear-gradient(90deg, #7a5522 0%, #c8a15a 100%); }
+      .odds-bar-fill.tag-set { background: linear-gradient(90deg, #1e5924 0%, #00e600 100%); }
+      .odds-bar-fill.tag-rune { background: linear-gradient(90deg, #733a00 0%, #ff8c00 100%); }
+      .odds-bar-fill.tag-gem { background: linear-gradient(90deg, #572566 0%, #d880ff 100%); }
+      .odds-bar-fill.tag-misc { background: linear-gradient(90deg, #594d19 0%, #ffd700 100%); }
+
+      .odds-bar-labels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 10px;
         color: var(--text-dim);
       }
-      .stat-value {
-        font-size: 18px;
-        font-weight: bold;
-        color: var(--gold-primary);
+      .odds-pct {
+        font-weight: 700;
+        color: var(--gold-light);
+        font-variant-numeric: tabular-nums;
+      }
+      .odds-expected {
+        color: var(--text-muted);
         font-variant-numeric: tabular-nums;
       }
 
-      /* 进度条 */
-      .progress-container {
-        background: #14100c;
-        border: 1px solid var(--border-color);
-        border-radius: 4px;
+      /* 卡片右部：大号几率比药丸与平均轮数 */
+      .card-right {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 3px;
+      }
+      .odds-ratio-pill {
+        background: #1a140f;
+        border: 1px solid var(--border-gold);
+        color: var(--gold-bright);
+        font-size: 12px;
+        font-weight: 800;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-variant-numeric: tabular-nums;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+      .odds-ratio-pill.tag-unique { border-color: var(--q-unique); color: #ffdca3; }
+      .odds-ratio-pill.tag-set { border-color: var(--q-set); color: #99ff99; }
+      .odds-ratio-pill.tag-rune { border-color: var(--q-rune); color: #ffbe80; }
+      .odds-ratio-pill.tag-gem { border-color: var(--q-gem); color: #f0beff; }
+      .runs-estimate {
+        font-size: 10px;
+        color: var(--text-dim);
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* 模拟进度条 */
+      .sim-progress-box {
+        background: #15110c;
+        border: 1px solid var(--border-gold);
+        border-radius: 6px;
         padding: 10px 14px;
-        margin-bottom: 16px;
+        margin-bottom: 14px;
         display: flex;
         flex-direction: column;
         gap: 6px;
       }
-      .progress-bar-track {
-        background: #1c1813;
-        border: 1px solid #382d22;
-        border-radius: 3px;
+      .sim-progress-header {
+        display: flex;
+        justify-content: space-between;
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .progress-track {
+        background: #0a0805;
+        border: 1px solid var(--border-dim);
         height: 10px;
+        border-radius: 4px;
         overflow: hidden;
       }
-      .progress-bar-fill {
-        background: linear-gradient(90deg, #8c6a38, #c8a15a);
+      .progress-fill {
         height: 100%;
+        background: linear-gradient(90deg, #7a5420 0%, #eecf87 100%);
         width: 0%;
         transition: width 0.1s linear;
       }
-      .progress-info {
-        display: flex;
-        justify-content: space-between;
-        font-size: 11px;
-        color: var(--text-dim);
-      }
 
-      /* 表格样式 */
-      .data-table-container {
+      /* 模拟统计表格 (品质直方图) */
+      .quality-table-box {
         background: #14100c;
-        border: 1px solid var(--border-color);
-        border-radius: 4px;
+        border: 1px solid var(--border-dim);
+        border-radius: 6px;
         overflow: hidden;
         margin-bottom: 16px;
       }
-      .table-header-bar {
-        padding: 8px 12px;
-        background: #1c1813;
-        border-bottom: 1px solid var(--border-color);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-weight: bold;
-        font-size: 12px;
-        color: var(--gold-primary);
-      }
-      table {
+      .quality-table-box table {
         width: 100%;
         border-collapse: collapse;
-        font-size: 12px;
-        text-align: left;
-      }
-      th {
-        background: #17130e;
-        color: var(--text-dim);
-        padding: 8px 10px;
-        border-bottom: 1px solid var(--border-color);
-        font-weight: 600;
         font-size: 11px;
       }
-      td {
+      .quality-table-box th {
+        background: #1a140f;
         padding: 6px 10px;
-        border-bottom: 1px solid #1f1913;
+        text-align: left;
+        color: var(--text-dim);
+        border-bottom: 1px solid var(--border-dim);
       }
-      tr:hover td {
-        background: rgba(200, 161, 90, 0.04);
+      .quality-table-box td {
+        padding: 5px 10px;
+        border-bottom: 1px solid #1c1712;
       }
 
-      /* 品质颜色标识 */
-      .q-normal { color: #c8c8c8; }
-      .q-superior { color: #e8e8e8; }
-      .q-magic { color: #4880ff; }
-      .q-rare { color: #ffff60; }
-      .q-set { color: #00ff00; }
-      .q-unique { color: #c8a15a; }
-      .q-rune { color: #ff8000; }
-      .q-gold { color: #ffd700; }
-
-      .tag {
-        display: inline-block;
-        padding: 1px 5px;
-        border-radius: 3px;
-        font-size: 10px;
-        font-weight: bold;
+      /* 反查视图表格 */
+      .reverse-table-box {
+        background: #14100c;
+        border: 1px solid var(--border-dim);
+        border-radius: 6px;
+        overflow: hidden;
+      }
+      .reverse-table-box table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 11px;
+      }
+      .reverse-table-box th {
+        background: #1c1611;
+        padding: 8px 10px;
+        color: var(--text-dim);
+        border-bottom: 1px solid var(--border-dim);
+        text-align: left;
+      }
+      .reverse-table-box td {
+        padding: 6px 10px;
+        border-bottom: 1px solid #1c1712;
+      }
+      .reverse-table-box tr:hover td {
+        background: rgba(200, 161, 90, 0.05);
       }
     </style>
   </head>
   <body>
+    <!-- 顶部导航 Header -->
     <header>
       <h1>
         <span>💎</span>
-        <span>暗黑破坏神 2 · 掉落模拟器与精确概率表 (Drop Simulator & Exact Odds)</span>
-        <span style="font-size: 11px; color: var(--text-dim); font-weight: normal;">(Issue #110)</span>
+        <span>暗黑破坏神 2 · 掉落计算器与精确概率表</span>
+        <span class="brand-badge">Maxroll 风格</span>
       </h1>
-      <div>
+      <nav>
         <a href="/acts.html">🎮 战役漫步 (acts.html)</a>
         <a href="/arena.html">⚔️ 战斗竞技场 (arena.html)</a>
-      </div>
+      </nav>
     </header>
 
     <div id="app-container">
-      <!-- 左栏：掉落参数与控制 -->
-      <aside class="sidebar" id="control-sidebar">
-        <div class="panel-header">
-          <span>🎮 掉落参数设定 (Drop Config)</span>
+      <!-- 左侧栏：怪物选择器与全局参数 (Maxroll Monster Selector) -->
+      <aside class="sidebar">
+        <!-- 1. 难度切换 -->
+        <div class="sidebar-section">
+          <div class="section-headline">
+            <span>🗺️ 游戏难度 (Difficulty)</span>
+          </div>
+          <div class="diff-segmented-control">
+            <button class="diff-btn" data-diff="normal">🌱 普通 (Normal)</button>
+            <button class="diff-btn" data-diff="nightmare">⚡ 噩梦 (Nightmare)</button>
+            <button class="diff-btn active" data-diff="hell">🔥 地狱 (Hell)</button>
+          </div>
+          <!-- 隐藏的原生 select 保持同步 -->
+          <select id="difficulty" style="display: none;">
+            <option value="normal">普通 (Normal)</option>
+            <option value="nightmare">噩梦 (Nightmare)</option>
+            <option value="hell" selected>地狱 (Hell)</option>
+          </select>
         </div>
-        <div class="panel-content">
-          <div class="form-group">
-            <label>怪物 / 预设 TC (Monster / TC Preset)</label>
-            <select id="tc-preset">
-              <option value="Act 1 H2H A">Act 1 H2H A (第一幕 近战小怪)</option>
-              <option value="Cow (H)">Cow (H) (秘密牛关 母牛)</option>
-              <option value="Cow King (H)">Cow King (H) (秘密牛关 牛王)</option>
-              <option value="Andariel (H)">Andariel (H) (第一幕 安达利尔)</option>
-              <option value="Countess (H)">Countess (H) (第一幕 女伯爵)</option>
-              <option value="Duriel (H)">Duriel (H) (第二幕 督瑞尔)</option>
-              <option value="Mephisto (H)">Mephisto (H) (第三幕 墨菲斯托)</option>
-              <option value="Council (H)">Council (H) (第三幕 议会成员/瘸子)</option>
-              <option value="Diablo (H)">Diablo (H) (第四幕 暗黑破坏神)</option>
-              <option value="Baal (H)">Baal (H) (第五幕 巴尔)</option>
-              <option value="Nihlathak (H)">Nihlathak (H) (第五幕 尼拉塞克)</option>
-            </select>
+
+        <!-- 2. 怪物选择器 -->
+        <div class="sidebar-section">
+          <div class="section-headline">
+            <span>👾 怪物选择器 (Monster Selector)</span>
           </div>
 
-          <div class="form-group">
-            <label>自定义 TC 名称 (Custom TC Input)</label>
-            <input type="text" id="tc-input" value="Act 1 H2H A" placeholder="例如 Act 1 H2H A, Cow (H), Baal (H)" />
+          <!-- 怪物分类 Chips -->
+          <div class="monster-cat-row">
+            <button class="monster-cat-chip active" data-cat="all">🌟 全部</button>
+            <button class="monster-cat-chip" data-cat="boss">👑 幕首领</button>
+            <button class="monster-cat-chip" data-cat="superunique">⭐ 固定暗金</button>
+            <button class="monster-cat-chip" data-cat="farm">🌾 刷宝圣地</button>
+            <button class="monster-cat-chip" data-cat="chest">📦 超级宝箱</button>
+            <button class="monster-cat-chip" data-cat="normal">⚔️ 常规怪物</button>
           </div>
 
-          <div class="form-group" style="margin-top: 2px;">
-            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--gold-light); font-size: 11px;">
-              <input type="checkbox" id="quest-drop" style="cursor: pointer;" />
-              <span>👑 Boss 首次击杀 / Bug 首杀 (Quest Drop)</span>
-            </label>
+          <!-- 实时怪物搜索框 -->
+          <div class="search-box-wrapper">
+            <span class="search-box-icon">🔍</span>
+            <input type="search" id="monster-search-input" placeholder="输入怪物名称、首领或场景 (如 巴尔, 皮叔, 牛关)..." />
           </div>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label>游戏难度 (Difficulty)</label>
-              <select id="difficulty">
-                <option value="normal">普通 (Normal)</option>
-                <option value="nightmare">噩梦 (Nightmare)</option>
-                <option value="hell" selected>地狱 (Hell)</option>
+          <!-- 怪物滚动列表 -->
+          <div class="monster-list-container" id="monster-list">
+            <!-- 由 renderMonsterList() 动态填充 -->
+          </div>
+
+          <!-- 兼容旧版的下拉框与输入框 (默认折叠) -->
+          <details style="font-size: 11px; color: var(--text-dim); margin-top: 4px;">
+            <summary style="cursor: pointer; padding: 2px 0;">⚙️ 高级自定义 TC (Custom TC)</summary>
+            <div style="display: flex; flex-direction: column; gap: 6px; padding-top: 6px;">
+              <select id="tc-preset" style="width: 100%; display: none;">
+                <option value="Baal (H)" selected>Baal (H)</option>
               </select>
+              <div style="display: flex; gap: 6px;">
+                <input type="text" id="tc-input" value="Baal (H)" placeholder="直接输入 TC 名称，例如 Baal (H)" style="flex: 1;" />
+                <button class="btn" id="btn-apply-custom-tc">应用</button>
+              </div>
             </div>
-            <div class="form-group">
-              <label>寻宝率 MF % (Magic Find)</label>
-              <input type="number" id="magic-find" min="0" max="2000" value="0" />
+          </details>
+        </div>
+
+        <!-- 3. 选定怪物规格面板 (Monster Spec Card) -->
+        <div class="sidebar-section">
+          <div class="section-headline">
+            <span>📋 怪物规格与掉落属性 (Monster Spec)</span>
+          </div>
+
+          <div class="monster-spec-card">
+            <div class="spec-header-row">
+              <div class="spec-header-icon" id="monster-card-icon">👿</div>
+              <div class="spec-title-box">
+                <div class="spec-title" id="monster-card-title">巴尔 (Baal)</div>
+                <div class="spec-sub">
+                  <span id="monster-card-badge">第 5 幕 · 幕关底首领</span> · <span id="monster-card-area">毁灭王座 / 世界之石要塞</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="spec-grid-4">
+              <div class="spec-item">
+                <span class="spec-item-label">mlvl 等级</span>
+                <span class="spec-item-val" id="monster-card-mlvl">99</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-item-label">Picks 次数</span>
+                <span class="spec-item-val" id="monster-card-picks">7 次</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-item-label">NoDrop 率</span>
+                <span class="spec-item-val" id="monster-card-nodrop">24.3%</span>
+              </div>
+              <div class="spec-item">
+                <span class="spec-item-label">当前 TC</span>
+                <span class="spec-item-val" id="monster-card-tc" style="font-size: 10px;">Baal (H)</span>
+              </div>
+            </div>
+
+            <!-- Boss 首杀 / Bug 首杀开关 -->
+            <div class="quest-drop-box">
+              <label class="quest-drop-label">
+                <input type="checkbox" id="quest-drop-toggle" />
+                <span>👑 Boss 首次击杀 / Bug 首杀 (Quest Drop)</span>
+              </label>
+              <!-- 兼容旧版 ID -->
+              <input type="checkbox" id="quest-drop" style="display: none;" />
+            </div>
+
+            <div class="quest-banner" id="quest-drop-banner">
+              <span>✨</span>
+              <span><strong>首杀已激活</strong>：NoDrop 已清零，必定掉落高品质装备！</span>
+            </div>
+
+            <div style="font-size: 10px; color: var(--text-dim); line-height: 1.4;" id="monster-card-desc">
+              第五幕终极世界之石关底首领，极高品质装备与大号符文产出。
+            </div>
+          </div>
+        </div>
+
+        <!-- 4. 掉落人数与寻宝率 MF -->
+        <div class="sidebar-section">
+          <div class="section-headline">
+            <span>👥 掉落人数与魔法寻宝率 (MF)</span>
+          </div>
+
+          <div class="form-field">
+            <label>游戏总人数 (/players N)</label>
+            <div class="chips-row">
+              <button class="chip-btn player-chip active" data-players="1">1P (单人)</button>
+              <button class="chip-btn player-chip" data-players="3">3P</button>
+              <button class="chip-btn player-chip" data-players="5">5P</button>
+              <button class="chip-btn player-chip" data-players="7">7P</button>
+              <button class="chip-btn player-chip" data-players="8">8P (满人)</button>
             </div>
           </div>
 
-          <div class="form-row">
-            <div class="form-group">
-              <label>游戏总人数 (Game /players)</label>
+          <div class="form-grid-2">
+            <div class="form-field">
+              <label>游戏房间人数</label>
               <input type="number" id="game-players" min="1" max="8" value="1" />
             </div>
-            <div class="form-group">
-              <label>同队附近人数 (Party Players)</label>
+            <div class="form-field">
+              <label>同队附近人数</label>
               <input type="number" id="party-players" min="1" max="8" value="1" />
             </div>
           </div>
 
-          <div class="badge-section">
-            <div class="section-title">🎲 蒙特卡洛模拟配置 (Simulation)</div>
-            <div class="form-row">
-              <div class="form-group">
-                <label>模拟轮数 (Runs N)</label>
-                <select id="sim-runs">
-                  <option value="1000">1,000 轮</option>
-                  <option value="10000" selected>10,000 轮</option>
-                  <option value="100000">100,000 轮</option>
-                  <option value="1000000">1,000,000 轮 (百万)</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label>随机种子 (Seed, 可选)</label>
-                <input type="number" id="sim-seed" placeholder="随机 (留空)" />
-              </div>
-            </div>
+          <div style="font-size: 10px; color: var(--gold-primary);" id="effective-players-hint">
+            当前有效掉落人数: 1 人 (NoDrop 缩减已生效)
+          </div>
 
-            <div style="display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;">
-              <button class="btn primary" id="btn-start" style="flex: 1;">▶ 开始模拟</button>
-              <button class="btn" id="btn-pause" disabled>⏸ 暂停</button>
-              <button class="btn danger" id="btn-stop" disabled>⏹ 停止</button>
+          <div class="form-field" style="margin-top: 4px;">
+            <label>魔法寻宝率 MF % (Magic Find)</label>
+            <div class="chips-row">
+              <button class="chip-btn mf-chip active" data-mf="0">0%</button>
+              <button class="chip-btn mf-chip" data-mf="100">100%</button>
+              <button class="chip-btn mf-chip" data-mf="200">200%</button>
+              <button class="chip-btn mf-chip" data-mf="300">300%</button>
+              <button class="chip-btn mf-chip" data-mf="500">500%</button>
             </div>
+            <input type="number" id="magic-find" min="0" max="2000" value="0" style="margin-top: 4px;" />
+          </div>
+        </div>
 
-            <div style="margin-top: 4px;">
-              <button class="btn" id="btn-calc-exact" style="width: 100%;">📐 计算精确概率表</button>
+        <!-- 5. 蒙特卡洛抽样模拟配置 -->
+        <div class="sidebar-section">
+          <div class="section-headline">
+            <span>🎲 蒙特卡洛掉落模拟器 (Simulation)</span>
+          </div>
+
+          <div class="form-grid-2">
+            <div class="form-field">
+              <label>模拟轮数 (Runs N)</label>
+              <select id="sim-runs">
+                <option value="1000">1,000 轮</option>
+                <option value="10000" selected>10,000 轮</option>
+                <option value="100000">100,000 轮</option>
+                <option value="1000000">1,000,000 轮 (百万)</option>
+              </select>
+            </div>
+            <div class="form-field">
+              <label>随机种子 (Seed, 可选)</label>
+              <input type="number" id="sim-seed" placeholder="随机 (留空)" />
             </div>
           </div>
 
-          <div class="badge-section" style="font-size: 11px; color: var(--text-dim); line-height: 1.6;">
-            <div><strong>💡 核心数学机制:</strong></div>
-            <div>• 真实 1.13c <code>rollTreasureClass</code> 递归展开</div>
-            <div>• NoDrop 动态双精度人数缩放</div>
-            <div>• 负数 Picks 确定性枚举，正数 Picks 独立抽取</div>
-            <div>• 多次抽取独立复合概率 <code>1 - (1 - p)^picks</code></div>
-            <div>• 真实 ItemRatio 魔法寻宝递减与品质掷骰</div>
+          <div style="display: flex; gap: 6px; margin-top: 4px;">
+            <button class="btn btn-gold" id="btn-start" style="flex: 1;">▶ 开始模拟抽样</button>
+            <button class="btn" id="btn-pause" disabled>⏸ 暂停</button>
+            <button class="btn btn-danger" id="btn-stop" disabled>⏹ 停止</button>
           </div>
+
+          <button class="btn" id="btn-calc-exact" style="width: 100%; margin-top: 2px;">📐 刷新精确理论概率表</button>
         </div>
       </aside>
 
-      <!-- 右栏：双 Tab 主展示区 -->
+      <!-- 右侧主区域：Maxroll 风格掉落列表与全景分析 -->
       <main id="main-area">
-        <div class="tabs-nav">
-          <button class="tab-btn active" data-tab="tab-sim">🎲 蒙特卡洛掉落模拟器 (Drop Simulator)</button>
-          <button class="tab-btn" data-tab="tab-exact">📐 精确掉落概率表与反查 (Exact Odds & Search)</button>
+        <!-- 顶层视图切换 Tabs (Maxroll Style) -->
+        <div class="view-tabs-header">
+          <button class="view-tab-btn active" data-view="exact">📐 精确掉落几率表 (Exact Odds)</button>
+          <button class="view-tab-btn" data-view="sim">🎲 蒙特卡洛实测模拟 (Monte Carlo Sim)</button>
+          <button class="view-tab-btn" data-view="reverse">🔍 全局物品掉落反查 (Reverse TC Lookup)</button>
         </div>
 
-        <div class="tab-content">
-          <!-- Tab 1: 蒙特卡洛掉落模拟器 -->
-          <div class="tab-pane active" id="tab-sim">
-            <!-- 运行进度条 -->
-            <div class="progress-container">
-              <div class="progress-info">
-                <span id="sim-progress-text">就绪：点击「开始模拟」运行 Monte Carlo 掉落抽样</span>
-                <span>Chunked non-blocking async loop</span>
-              </div>
-              <div class="progress-bar-track">
-                <div class="progress-bar-fill" id="sim-progress-bar"></div>
-              </div>
+        <!-- 目标与状态实时横幅 -->
+        <div class="target-status-bar">
+          <div class="target-status-left">
+            <div class="status-target-pill">
+              <span class="status-label">目标:</span>
+              <span class="status-value" id="stat-target-name">巴尔 (Baal)</span>
             </div>
-
-            <!-- 统计指标网格 -->
-            <div class="stats-grid">
-              <div class="stat-card">
-                <span class="stat-title">总模拟轮数 (Total Runs)</span>
-                <span class="stat-value" id="stat-total-runs">0</span>
-              </div>
-              <div class="stat-card">
-                <span class="stat-title">总掉落物品数 (Items Dropped)</span>
-                <span class="stat-value" id="stat-total-drops">0</span>
-              </div>
-              <div class="stat-card">
-                <span class="stat-title">平均每轮掉落 (Avg Drops/Run)</span>
-                <span class="stat-value" id="stat-avg-drops">0.00</span>
-              </div>
-              <div class="stat-card">
-                <span class="stat-title">空轮 NoDrop 占比 (Empty Runs)</span>
-                <span class="stat-value" id="stat-nodrop-runs">0 (0.00%)</span>
-              </div>
+            <div class="status-target-pill">
+              <span class="status-label">TC:</span>
+              <span class="status-value" id="stat-current-tc">Baal (H)</span>
             </div>
-
-            <!-- 品质分布直方图 -->
-            <div class="data-table-container">
-              <div class="table-header-bar">
-                <span>📊 物品品质分布统计 (Quality Distribution & Histogram)</span>
-              </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th style="width: 180px;">品质类别 (Quality Tier)</th>
-                    <th style="width: 110px;">掉落件数 (Count)</th>
-                    <th style="width: 100px;">占比 (Percentage)</th>
-                    <th>分布直方图 (Histogram)</th>
-                  </tr>
-                </thead>
-                <tbody id="quality-tbody">
-                  <tr><td colspan="4" style="text-align: center; color: var(--text-dim);">暂无模拟数据</td></tr>
-                </tbody>
-              </table>
-            </div>
-
-            <!-- 详细掉落物列表 -->
-            <div class="data-table-container">
-              <div class="table-header-bar">
-                <span>📦 模拟掉落物品汇总清单 (Dropped Items Summary)</span>
-                <input type="search" id="items-filter" placeholder="筛选物品代码或名称..." style="padding: 2px 8px; font-size: 11px; width: 180px;" />
-              </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th style="width: 100px;">物品代码 (Code)</th>
-                    <th style="width: 240px;">物品名称 (Name)</th>
-                    <th style="width: 110px;">品质 (Quality)</th>
-                    <th style="width: 120px;">掉落总数 (Count)</th>
-                    <th style="width: 120px;">每轮期望掉落率 (%/Run)</th>
-                  </tr>
-                </thead>
-                <tbody id="items-tbody">
-                  <tr><td colspan="5" style="text-align: center; color: var(--text-dim);">暂无掉落物记录</td></tr>
-                </tbody>
-              </table>
+            <div class="status-target-pill">
+              <span class="status-label">有效人数:</span>
+              <span class="status-value" id="stat-eff-players">1 P</span>
             </div>
           </div>
 
-          <!-- Tab 2: 精确掉落概率表与反查 -->
-          <div class="tab-pane" id="tab-exact">
-            <!-- 概要指标条 -->
-            <div class="stat-card" style="margin-bottom: 16px;" id="exact-tc-info">
-              正在加载 TreasureClass 树形解析数据...
+          <div class="target-metrics-group">
+            <div class="metric-mini">
+              <span class="metric-mini-label">可掉落叶子</span>
+              <span class="metric-mini-val" id="stat-total-items">0 种</span>
             </div>
+            <div class="metric-mini">
+              <span class="metric-mini-label">NoDrop 概率</span>
+              <span class="metric-mini-val" id="stat-nodrop-pct">0.0%</span>
+            </div>
+            <div class="metric-mini">
+              <span class="metric-mini-label">期望件数/击杀</span>
+              <span class="metric-mini-val" id="stat-avg-drops">0.00</span>
+            </div>
+          </div>
+        </div>
 
-            <!-- 物品反查搜索栏 -->
-            <div class="data-table-container">
-              <div class="table-header-bar">
-                <span>🔍 物品全局掉落源反查 (Reverse TC Lookup: type Shako, uap, r33, cap...)</span>
-                <span id="reverse-match-count" style="font-size: 11px; color: var(--text-dim); font-weight: normal;"></span>
-              </div>
-              <div style="padding: 10px 14px; background: #16120d; border-bottom: 1px solid var(--border-color);">
-                <input type="search" id="reverse-search-input" placeholder="输入物品代码或名称，例如 Shako, uap, r33, cap..." style="width: 100%; padding: 7px 10px; font-size: 13px;" />
-              </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th style="width: 220px;">所属掉落表 (Treasure Class)</th>
-                    <th style="width: 200px;">匹配物品 (Matched Item)</th>
-                    <th style="width: 70px;">挑选次数</th>
-                    <th style="width: 110px;">单次概率 (Single)</th>
-                    <th style="width: 120px;">综合概率 (Compound)</th>
-                    <th style="width: 140px;">掉落几率比 (1 in X Odds)</th>
-                  </tr>
-                </thead>
-                <tbody id="reverse-tbody">
-                  <tr><td colspan="6" style="text-align: center; color: var(--text-dim); padding: 18px;">在上方搜索框输入物品代码或名称（例如 Shako、uap、r33、cap）以反查可掉落的 TC 列表</td></tr>
-                </tbody>
-              </table>
-            </div>
+        <!-- 掉落多维分类 Tabs 导航 (Maxroll Category Chips with Live Counts) -->
+        <div class="category-nav-bar">
+          <button class="item-cat-tab active" data-cat="all">🌟 全部 <span class="cat-count">0</span></button>
+          <button class="item-cat-tab" data-cat="unique">⭐ 暗金装备 <span class="cat-count">0</span></button>
+          <button class="item-cat-tab" data-cat="set">🌿 绿色套装 <span class="cat-count">0</span></button>
+          <button class="item-cat-tab" data-cat="rune">🔥 符文宝石 <span class="cat-count">0</span></button>
+          <button class="item-cat-tab" data-cat="base">🛡️ 装备底模 <span class="cat-count">0</span></button>
+          <button class="item-cat-tab" data-cat="charm_gem">💎 护身符/珠宝 <span class="cat-count">0</span></button>
+          <button class="item-cat-tab" data-cat="misc">🧪 杂项/钥匙/精华 <span class="cat-count">0</span></button>
+        </div>
 
-            <!-- 当前 TC 全叶子节点精确概率表 -->
-            <div class="data-table-container">
-              <div class="table-header-bar">
-                <span>📐 当前 TC 叶子物品精确概率表 (Exact Analytic Drop Table)</span>
-              </div>
-              <table>
-                <thead>
-                  <tr>
-                    <th style="width: 50px;">排名</th>
-                    <th style="width: 100px;">物品代码</th>
-                    <th style="width: 240px;">物品名称</th>
-                    <th style="width: 120px;">单次掉落概率</th>
-                    <th style="width: 120px;">综合概率 1-(1-p)^picks</th>
-                    <th style="width: 120px;">每轮期望掉落数</th>
-                    <th style="width: 140px;">几率比 (1 in X Odds)</th>
-                  </tr>
-                </thead>
-                <tbody id="exact-tbody">
-                  <tr><td colspan="7" style="text-align: center; color: var(--text-dim);">正在计算...</td></tr>
-                </tbody>
-              </table>
+        <!-- 检索与排序工具栏 -->
+        <div class="drop-toolbar">
+          <div class="toolbar-search">
+            <span class="search-box-icon" style="top: 8px;">🔍</span>
+            <input type="search" id="item-search-input" placeholder="搜索物品名称、代码或底模 (如 军帽, uap, 贝, 30#, 幻化, 权冠)..." />
+          </div>
+
+          <div class="toolbar-actions">
+            <label style="font-size: 11px; color: var(--text-dim);">排序依据:</label>
+            <select id="item-sort-select" style="background: #0d0a07; border: 1px solid var(--border-dim); color: var(--gold-light); padding: 4px 8px; border-radius: 4px; font-size: 11px;">
+              <option value="odds-desc" selected>概率从高到低 (Highest Odds)</option>
+              <option value="odds-asc">概率从低到高 (Rarest First)</option>
+              <option value="qlvl">底模 qlvl 等级 (Item Level)</option>
+              <option value="quality">物品品质类别 (Quality Tier)</option>
+              <option value="name">物品名称拼音 (Name A-Z)</option>
+            </select>
+            <button class="btn" id="btn-export-csv">📥 导出 CSV 报表</button>
+          </div>
+        </div>
+
+        <!-- 视口 1: 精确掉落几率表 (Maxroll Drop Card List) -->
+        <div class="view-pane active" id="view-exact">
+          <div id="exact-tc-info" style="display: none;"></div>
+          <div class="cards-list-container" id="exact-items-container">
+            <!-- 由 renderExactDropCards() 渲染高质感 Maxroll 风格掉落卡片 -->
+          </div>
+        </div>
+
+        <!-- 视口 2: 蒙特卡洛实测模拟 (Simulated Drops & Quality Histogram) -->
+        <div class="view-pane" id="view-sim">
+          <!-- 模拟进度条 -->
+          <div class="sim-progress-box">
+            <div class="sim-progress-header">
+              <span id="sim-progress-text">就绪：点击左侧「开始模拟抽样」运行 Monte Carlo 模拟</span>
+              <span style="color: var(--text-muted);">Non-blocking chunked loop</span>
             </div>
+            <div class="progress-track">
+              <div class="progress-fill" id="sim-progress-bar"></div>
+            </div>
+          </div>
+
+          <!-- 品质分布直方图 -->
+          <div class="quality-table-box">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 200px;">品质类别 (Quality Tier)</th>
+                  <th style="width: 120px;">实测掉落件数 (Count)</th>
+                  <th style="width: 100px;">掉落占比 (%)</th>
+                  <th>分布直方图 (Histogram)</th>
+                </tr>
+              </thead>
+              <tbody id="quality-tbody">
+                <tr><td colspan="4" style="text-align: center; color: var(--text-dim); padding: 16px;">暂无模拟数据</td></tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- 模拟掉落卡片列表 -->
+          <div class="cards-list-container" id="sim-items-container">
+            <div style="text-align: center; color: var(--text-dim); padding: 40px;">暂无模拟结果，请点击左侧「开始模拟抽样」运行抽样</div>
+          </div>
+        </div>
+
+        <!-- 视口 3: 全局物品掉落反查 (Reverse TC Lookup) -->
+        <div class="view-pane" id="view-reverse">
+          <div class="search-box-wrapper" style="margin-bottom: 12px;">
+            <span class="search-box-icon">🔍</span>
+            <input type="search" id="reverse-search-input" placeholder="输入物品代码或名称反查全暗黑2掉落源 (例如 Shako, uap, r33, cap, ber)..." style="font-size: 13px; padding: 8px 12px 8px 30px;" />
+          </div>
+
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+            <span style="font-size: 11px; color: var(--gold-primary); font-weight: 600;">反查匹配的 TreasureClass 掉落源</span>
+            <span id="reverse-match-count" style="font-size: 11px; color: var(--text-dim);">0 项匹配</span>
+          </div>
+
+          <div class="reverse-table-box">
+            <table>
+              <thead>
+                <tr>
+                  <th style="width: 220px;">所属掉落表 (Treasure Class)</th>
+                  <th style="width: 200px;">匹配物品 (Matched Item)</th>
+                  <th style="width: 70px;">挑选次数</th>
+                  <th style="width: 110px;">单次概率 (Single)</th>
+                  <th style="width: 120px;">综合概率 (Compound)</th>
+                  <th style="width: 140px;">掉落几率比 (1 in X Odds)</th>
+                </tr>
+              </thead>
+              <tbody id="reverse-tbody">
+                <tr><td colspan="6" style="text-align: center; color: var(--text-dim); padding: 24px;">在上方搜索框输入物品代码或名称（例如 Shako、uap、r33、cap）反查可掉落的 TC 列表</td></tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </main>
     </div>
 
+    <!-- 逻辑脚本加载 -->
     <script type="module" src="/src/loot.ts"></script>
   </body>
 </html>
diff --git a/scripts/verify-maxroll-loot.ts b/scripts/verify-maxroll-loot.ts
new file mode 100644
index 0000000..a98b2dc
--- /dev/null
+++ b/scripts/verify-maxroll-loot.ts
@@ -0,0 +1,140 @@
+import {
+  MONSTER_PRESETS,
+  FAMOUS_ITEMS_META,
+  classifyItemCategory,
+  loadCanonicalTreasureClasses,
+  calculateAnalyticProbabilities,
+  runMonteCarloSimulation,
+  buildReverseLookupIndex,
+  reverseLookup,
+} from '../src/loot';
+
+async function main() {
+  console.log('=== [1] 验证 MONSTER_PRESETS 与 TC 完整性 ===');
+  const { tcTable, autoTcs } = loadCanonicalTreasureClasses();
+  console.log(`载入系统 TC 节点数: ${tcTable.all.length}, 自动生成 TC 节点数: ${autoTcs.size}`);
+
+  let missingTcCount = 0;
+  for (const mon of MONSTER_PRESETS) {
+    for (const diff of ['normal', 'nightmare', 'hell'] as const) {
+      const tcName = mon.tc[diff];
+      if (!tcTable.get(tcName) && !autoTcs.has(tcName)) {
+        console.error(`❌ [缺失] 怪物 ${mon.nameCn} 在 ${diff} 难度的 TC 不存在: ${tcName}`);
+        missingTcCount++;
+      }
+      if (mon.questTc) {
+        const questTcName = mon.questTc[diff];
+        if (!tcTable.get(questTcName) && !autoTcs.has(questTcName)) {
+          console.error(`❌ [缺失] 怪物 ${mon.nameCn} 在 ${diff} 难度的 首杀TC 不存在: ${questTcName}`);
+          missingTcCount++;
+        }
+      }
+    }
+  }
+
+  if (missingTcCount === 0) {
+    console.log(`✅ 所有 ${MONSTER_PRESETS.length} 个怪物预设在全难度的基础 TC 与首杀 TC 校验 100% 存在！`);
+  } else {
+    throw new Error(`存在 ${missingTcCount} 个无效的 TC 引用`);
+  }
+
+  console.log('\n=== [2] 验证 FAMOUS_ITEMS_META 与物品分类器 ===');
+  const famousCount = Object.keys(FAMOUS_ITEMS_META).length;
+  console.log(`已收录核心暗金与极品底模元数据条目: ${famousCount} 条`);
+
+  // Test classifyItemCategory
+  const r30Cat = classifyItemCategory('r30');
+  const shakoCat = classifyItemCategory('uap', 'unique');
+  const phaseBladeCat = classifyItemCategory('7cr');
+  const sojCat = classifyItemCategory('rin', 'unique');
+  const tokenCat = classifyItemCategory('tes');
+
+  console.log(`- 30# 贝 (r30) 分类: ${r30Cat} (期望: rune)`);
+  console.log(`- 军帽 (uap, unique) 分类: ${shakoCat} (期望: unique)`);
+  console.log(`- 幻化之刃 (7cr) 分类: ${phaseBladeCat} (期望: base)`);
+  console.log(`- 戒指/护身符 (rin) 分类: ${sojCat} (期望: charm_gem)`);
+  console.log(`- 洗点徽章 (tes) 分类: ${tokenCat} (期望: misc)`);
+
+  if (r30Cat !== 'rune' || shakoCat !== 'unique' || phaseBladeCat !== 'base' || sojCat !== 'charm_gem' || tokenCat !== 'misc') {
+    throw new Error('分类器逻辑测试失败');
+  }
+  console.log('✅ 物品多维分类器运行正确！');
+
+  console.log('\n=== [3] 验证精确概率表解析 (Baal H 与 Andariel H) ===');
+  const baalOdds = calculateAnalyticProbabilities('Baal (H)', { tcTable, autoTcs, gamePlayers: 1, partyPlayers: 1 });
+  console.log(`Baal (H) - 叶子节点数: ${baalOdds.leaves.length}, Picks: ${baalOdds.picks}, NoDrop: ${(baalOdds.noDropCompoundProb * 100).toFixed(2)}%`);
+
+  // Verify Shako / uap odds for Baal
+  const uapLeaf = baalOdds.leaves.find(l => l.item === 'uap');
+  if (uapLeaf) {
+    console.log(`- 军帽底模 (uap) 单次概率: ${(uapLeaf.singleProbability * 100).toFixed(4)}%, 综合概率: ${(uapLeaf.compoundProbability * 100).toFixed(4)}%, 几率比: 1 : ${uapLeaf.oneInOdds.toFixed(1)}`);
+  }
+
+  // Verify Quest Drop for Andariel
+  const andyNormalOdds = calculateAnalyticProbabilities('Andariel (H)', { tcTable, autoTcs, gamePlayers: 1, partyPlayers: 1 });
+  const andyQuestOdds = calculateAnalyticProbabilities('Andarielq (H)', { tcTable, autoTcs, gamePlayers: 1, partyPlayers: 1 });
+  console.log(`Andariel (H)  普通杀 NoDrop: ${(andyNormalOdds.noDropCompoundProb * 100).toFixed(2)}%`);
+  console.log(`Andarielq (H) Bug首杀 NoDrop: ${(andyQuestOdds.noDropCompoundProb * 100).toFixed(2)}%`);
+
+  const andyNormalUap = andyNormalOdds.leaves.find(l => l.item === 'uap')?.compoundProbability || 0;
+  const andyQuestUap = andyQuestOdds.leaves.find(l => l.item === 'uap')?.compoundProbability || 0;
+  console.log(`- 安姐普通杀 军帽(uap) 几率: ${(andyNormalUap * 100).toFixed(4)}%`);
+  console.log(`- 安姐Bug首杀 军帽(uap) 几率: ${(andyQuestUap * 100).toFixed(4)}% (提升 +${(((andyQuestUap - andyNormalUap) / andyNormalUap) * 100).toFixed(1)}%)`);
+
+  const andyQuestHasJunk = andyQuestOdds.leaves.some(l => l.item === 'tsc' || l.item === 'isc' || l.item === 'gld');
+  if (andyQuestHasJunk) {
+    throw new Error('安姐首杀 TC 不应包含卷轴或金币等垃圾杂项！');
+  }
+  if (andyQuestUap <= andyNormalUap) {
+    throw new Error('安姐首杀装备出货率应当显著高于普通击杀！');
+  }
+  console.log('✅ 安姐首杀剔除杂质与装备出货率暴增验证通过！');
+
+  console.log('\n=== [4] 验证 1,000 次蒙特卡洛掉落模拟 (实测出货与品质分布) ===');
+  const simRes = await runMonteCarloSimulation({
+    tcName: 'Baal (H)',
+    runs: 1000,
+    gamePlayers: 3,
+    partyPlayers: 1,
+    magicFind: 250,
+    difficulty: 'hell',
+    tcTable,
+    autoTcs,
+  });
+
+  console.log(`模拟总轮数: ${simRes.totalRuns}`);
+  console.log(`掉落总件数: ${simRes.itemsDropped} 件 (平均每轮 ${(simRes.itemsDropped / simRes.totalRuns).toFixed(2)} 件)`);
+  console.log(`品质分布:`);
+  console.log(`  - Unique (暗金): ${simRes.qualityCounts.unique} 件`);
+  console.log(`  - Set (套装): ${simRes.qualityCounts.set} 件`);
+  console.log(`  - Rare (稀有): ${simRes.qualityCounts.rare} 件`);
+  console.log(`  - Magic (魔法): ${simRes.qualityCounts.magic} 件`);
+  console.log(`  - Rune (符文): ${simRes.qualityCounts.rune} 件`);
+  console.log(`  - Normal/Sup (底模): ${simRes.qualityCounts.normal + simRes.qualityCounts.superior} 件`);
+  console.log(`  - Gold (金币): ${simRes.qualityCounts.gold} 堆`);
+
+  if (simRes.itemsDropped === 0) {
+    throw new Error('1000次模拟依然为0件掉落！');
+  }
+  console.log(`✅ 1,000 次模拟正常出货，共 ${simRes.itemSummaries.length} 种不同物品！`);
+
+  console.log('\n=== [5] 验证反查索引 (Reverse Lookup) ===');
+  const revIndex = buildReverseLookupIndex(tcTable, autoTcs);
+  const shakoRev = reverseLookup(revIndex, 'shako');
+  console.log(`搜索 "shako" 匹配到的掉落源数量: ${shakoRev[0]?.entries.length || 0} 个 TC`);
+  if (shakoRev.length > 0 && shakoRev[0]!.entries.length > 0) {
+    console.log(`- 最佳掉落源 TOP 1: ${shakoRev[0]!.entries[0]!.tcName}, 综合几率: ${(shakoRev[0]!.entries[0]!.compoundProbability * 100).toFixed(4)}%`);
+  } else {
+    throw new Error('反查 shako 失败');
+  }
+  console.log('✅ 反查索引测试通过！');
+
+  console.log('\n========================================');
+  console.log('🎉 全部 Maxroll 怪物选择器与掉落列表核心功能实测 100% 成功！');
+  console.log('========================================');
+}
+
+main().catch(err => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/src/loot.ts b/src/loot.ts
index 9550d11..dd4bc1a 100644
--- a/src/loot.ts
+++ b/src/loot.ts
@@ -688,6 +688,463 @@ export async function runMonteCarloSimulation(
   };
 }
 
+// --- Maxroll-Inspired Monster Selector & Rich Item Presentation --------------
+
+export type MonsterCategory = 'boss' | 'superunique' | 'farm' | 'chest' | 'normal';
+
+export interface MonsterPreset {
+  readonly id: string;
+  readonly nameCn: string;
+  readonly nameEn: string;
+  readonly category: MonsterCategory;
+  readonly act: 1 | 2 | 3 | 4 | 5;
+  readonly areaCn: string;
+  readonly areaEn: string;
+  readonly mlvl: { normal: number; nightmare: number; hell: number };
+  readonly tc: { normal: string; nightmare: string; hell: string };
+  readonly questTc?: { normal: string; nightmare: string; hell: string };
+  readonly picks: number;
+  readonly baseNoDrop: number;
+  readonly icon: string;
+  readonly descCn: string;
+}
+
+export const MONSTER_PRESETS: readonly MonsterPreset[] = [
+  // --- Act Bosses ---
+  {
+    id: 'andariel',
+    nameCn: '安达利尔 (Andariel)',
+    nameEn: 'Maiden of Anguish',
+    category: 'boss',
+    act: 1,
+    areaCn: '地下墓穴第四层 (Catacombs L4)',
+    areaEn: 'Catacombs Level 4',
+    mlvl: { normal: 12, nightmare: 49, hell: 75 },
+    tc: { normal: 'Andariel', nightmare: 'Andariel (N)', hell: 'Andariel (H)' },
+    questTc: { normal: 'Andarielq', nightmare: 'Andarielq (N)', hell: 'Andarielq (H)' },
+    picks: 7,
+    baseNoDrop: 19,
+    icon: '🕷️',
+    descCn: '第一幕关底首领，弱火（-50%火抗），Bug首杀热门目标，乔丹之石 (SOJ) 与暗金首饰核心掉落源。',
+  },
+  {
+    id: 'duriel',
+    nameCn: '督瑞尔 (Duriel)',
+    nameEn: 'Lord of Pain',
+    category: 'boss',
+    act: 2,
+    areaCn: '塔·拉夏的古墓 (Tal Rasha Chamber)',
+    areaEn: "Tal Rasha's Chamber",
+    mlvl: { normal: 22, nightmare: 55, hell: 88 },
+    tc: { normal: 'Duriel', nightmare: 'Duriel (N)', hell: 'Duriel (H)' },
+    questTc: { normal: 'Durielq', nightmare: 'Durielq (N)', hell: 'Durielq (H)' },
+    picks: 7,
+    baseNoDrop: 19,
+    icon: '🐛',
+    descCn: '第二幕关底首领，神圣冰冻光环，回城卷轴与日用品暗金出处。',
+  },
+  {
+    id: 'mephisto',
+    nameCn: '墨菲斯托 (Mephisto)',
+    nameEn: 'Lord of Hatred',
+    category: 'boss',
+    act: 3,
+    areaCn: '憎恨囚牢第三层 (Durance of Hate L3)',
+    areaEn: 'Durance of Hate Level 3',
+    mlvl: { normal: 26, nightmare: 59, hell: 87 },
+    tc: { normal: 'Mephisto', nightmare: 'Mephisto (N)', hell: 'Mephisto (H)' },
+    questTc: { normal: 'Mephistoq', nightmare: 'Mephistoq (N)', hell: 'Mephistoq (H)' },
+    picks: 7,
+    baseNoDrop: 15,
+    icon: '💀',
+    descCn: '第三幕关底首领，全游戏刷军帽、暴风之盾、眼球、海蛇皮等中高级暗金最高效目标。',
+  },
+  {
+    id: 'diablo',
+    nameCn: '暗黑破坏神 (Diablo)',
+    nameEn: 'Lord of Terror',
+    category: 'boss',
+    act: 4,
+    areaCn: '混沌避难所 (Chaos Sanctuary)',
+    areaEn: 'Chaos Sanctuary',
+    mlvl: { normal: 40, nightmare: 62, hell: 94 },
+    tc: { normal: 'Diablo', nightmare: 'Diablo (N)', hell: 'Diablo (H)' },
+    questTc: { normal: 'Diabloq', nightmare: 'Diabloq (N)', hell: 'Diabloq (H)' },
+    picks: 7,
+    baseNoDrop: 15,
+    icon: '👹',
+    descCn: '第四幕关底首领，红色闪电地狱火，mlvl高达94，掉落大君之怒、马拉等顶级首饰。',
+  },
+  {
+    id: 'baal',
+    nameCn: '巴尔 (Baal)',
+    nameEn: 'Lord of Destruction',
+    category: 'boss',
+    act: 5,
+    areaCn: '世界之石大厅 (Worldstone Chamber)',
+    areaEn: 'Worldstone Chamber',
+    mlvl: { normal: 60, nightmare: 75, hell: 99 },
+    tc: { normal: 'Baal', nightmare: 'Baal (N)', hell: 'Baal (H)' },
+    questTc: { normal: 'Baalq', nightmare: 'Baalq (N)', hell: 'Baalq (H)' },
+    picks: 7,
+    baseNoDrop: 15,
+    icon: '👿',
+    descCn: '第五幕关底终极首领，全游戏最高等级（mlvl 99），TC 87全解锁，可掉落全游戏所有暗金底模。',
+  },
+
+  // --- Superuniques ---
+  {
+    id: 'countess',
+    nameCn: '女伯爵 (The Countess)',
+    nameEn: 'The Countess',
+    category: 'superunique',
+    act: 1,
+    areaCn: '遗忘之塔第五层 (Tower Cellar L5)',
+    areaEn: 'Tower Cellar Level 5',
+    mlvl: { normal: 12, nightmare: 45, hell: 82 },
+    tc: { normal: 'Countess', nightmare: 'Countess (N)', hell: 'Countess (H)' },
+    picks: 5,
+    baseNoDrop: 19,
+    icon: '🏰',
+    descCn: '符文之王，拥有独立符文特殊掉落池（最高掉落28#罗），掉落1#恐惧之钥 (Key of Terror)。',
+  },
+  {
+    id: 'summoner',
+    nameCn: '召唤者 (The Summoner)',
+    nameEn: 'The Summoner',
+    category: 'superunique',
+    act: 2,
+    areaCn: '神秘避难所 (Arcane Sanctuary)',
+    areaEn: 'Arcane Sanctuary',
+    mlvl: { normal: 18, nightmare: 55, hell: 80 },
+    tc: { normal: 'Summoner', nightmare: 'Summoner (N)', hell: 'Summoner (H)' },
+    picks: 5,
+    baseNoDrop: 19,
+    icon: '🔮',
+    descCn: '神秘避难所尽头守护者，赫拉迪克真理追寻者，掉落2#憎恨之钥 (Key of Hate)。',
+  },
+  {
+    id: 'nihlathak',
+    nameCn: '尼拉塞克 (Nihlathak)',
+    nameEn: 'Nihlathak',
+    category: 'superunique',
+    act: 5,
+    areaCn: '瓦特之厅 (Halls of Vaught)',
+    areaEn: 'Halls of Vaught',
+    mlvl: { normal: 65, nightmare: 70, hell: 95 },
+    tc: { normal: 'Nihlathak', nightmare: 'Nihlathak (N)', hell: 'Nihlathak (H)' },
+    picks: 5,
+    baseNoDrop: 19,
+    icon: '☠️',
+    descCn: '哈洛加斯背叛者，极速尸体爆炸致命，mlvl高达95，掉落3#毁灭之钥 (Key of Destruction)。',
+  },
+  {
+    id: 'pindleskin',
+    nameCn: '暴躁外皮 / 皮叔 (Pindleskin)',
+    nameEn: 'Pindleskin',
+    category: 'superunique',
+    act: 5,
+    areaCn: '尼拉塞克神殿红门 (Nihlathak Temple)',
+    areaEn: "Nihlathak's Temple",
+    mlvl: { normal: 68, nightmare: 73, hell: 86 },
+    tc: { normal: 'Act 5 Super Ax', nightmare: 'Act 5 (N) Super Ax', hell: 'Act 5 (H) Super Cx' },
+    picks: 2,
+    baseNoDrop: 0,
+    icon: '🧟',
+    descCn: '红门十五秒速刷首选，除了泰瑞尔之力、蜘蛛之网等少数外可出几乎一切暗金。',
+  },
+  {
+    id: 'council',
+    nameCn: '崔凡克最高议会 (Travincal Council)',
+    nameEn: 'High Council',
+    category: 'superunique',
+    act: 3,
+    areaCn: '崔凡克神殿 (Travincal)',
+    areaEn: 'Travincal',
+    mlvl: { normal: 28, nightmare: 57, hell: 85 },
+    tc: { normal: 'Council', nightmare: 'Council (N)', hell: 'Council (H)' },
+    picks: 3,
+    baseNoDrop: 19,
+    icon: '🪙',
+    descCn: '瘸子群，打钱野蛮人圣地，极高的高级符文（最高至33#萨德）产出率。',
+  },
+  {
+    id: 'shenk_eldritch',
+    nameCn: '督军山克与亚瑞克 (Shenk & Eldritch)',
+    nameEn: 'Shenk & Eldritch',
+    category: 'superunique',
+    act: 5,
+    areaCn: '冰冻高地小站 (Frigid Highlands)',
+    areaEn: 'Frigid Highlands',
+    mlvl: { normal: 65, nightmare: 71, hell: 84 },
+    tc: { normal: 'Act 5 Super A', nightmare: 'Act 5 (N) Super A', hell: 'Act 5 (H) Super Cx' },
+    picks: 2,
+    baseNoDrop: 0,
+    icon: '⚔️',
+    descCn: '冰冻高地小站上下两侧，出门即打，起步速刷固定暗金怪双雄。',
+  },
+  {
+    id: 'cow_king',
+    nameCn: '母牛之王 / 牛王 (Cow King)',
+    nameEn: 'The Cow King',
+    category: 'superunique',
+    act: 1,
+    areaCn: '秘密母牛关 (Secret Cow Level)',
+    areaEn: 'The Secret Cow Level',
+    mlvl: { normal: 31, nightmare: 67, hell: 84 },
+    tc: { normal: 'Cow King', nightmare: 'Cow King (N)', hell: 'Cow King (H)' },
+    picks: 5,
+    baseNoDrop: 19,
+    icon: '🐮',
+    descCn: '母牛之王，掉落牛王皮靴、牛王生皮、牛王之角专属套装。',
+  },
+  {
+    id: 'radament',
+    nameCn: '罗达门特 (Radament)',
+    nameEn: 'Radament',
+    category: 'superunique',
+    act: 2,
+    areaCn: '下水道第三层 (Sewers L3)',
+    areaEn: 'Sewers Level 3',
+    mlvl: { normal: 16, nightmare: 49, hell: 83 },
+    tc: { normal: 'Radament', nightmare: 'Radament (N)', hell: 'Radament (H)' },
+    picks: 5,
+    baseNoDrop: 19,
+    icon: '📜',
+    descCn: '复活木乃伊群首领，技能之书任务目标。',
+  },
+  {
+    id: 'izual',
+    nameCn: '衣卒尔 (Izual)',
+    nameEn: 'Izual',
+    category: 'superunique',
+    act: 4,
+    areaCn: '绝望平原 (Plains of Despair)',
+    areaEn: 'Plains of Despair',
+    mlvl: { normal: 29, nightmare: 60, hell: 86 },
+    tc: { normal: 'Izual', nightmare: 'Izual (N)', hell: 'Izual (H)' },
+    picks: 5,
+    baseNoDrop: 19,
+    icon: '👼',
+    descCn: '被诅咒的堕落天使，击杀奖励2点珍贵技能点。',
+  },
+  {
+    id: 'hephasto',
+    nameCn: '海法斯特盔甲制作者 (Hephasto)',
+    nameEn: 'Hephasto the Armorer',
+    category: 'superunique',
+    act: 4,
+    areaCn: '地狱熔炉 (River of Flame)',
+    areaEn: 'River of Flame',
+    mlvl: { normal: 28, nightmare: 59, hell: 88 },
+    tc: { normal: 'Act 4 Super C', nightmare: 'Act 4 (N) Super C', hell: 'Act 4 (H) Super C' },
+    picks: 2,
+    baseNoDrop: 0,
+    icon: '⚒️',
+    descCn: '地狱熔炉铁锤守护者，极高物理攻击与狂热灵气。',
+  },
+
+  // --- Farming Areas ---
+  {
+    id: 'cows',
+    nameCn: '秘密母牛关 母牛群 (Hell Bovine)',
+    nameEn: 'Hell Bovine',
+    category: 'farm',
+    act: 1,
+    areaCn: '秘密母牛关 (Secret Cow Level)',
+    areaEn: 'The Secret Cow Level',
+    mlvl: { normal: 28, nightmare: 64, hell: 81 },
+    tc: { normal: 'Cow', nightmare: 'Cow (N)', hell: 'Cow (H)' },
+    picks: 1,
+    baseNoDrop: 100,
+    icon: '🐄',
+    descCn: '超大密度怪物群，标马与尸爆死灵最爱，极佳的符文之语白色底模与高级符文出产地。',
+  },
+  {
+    id: 'wraith_farm',
+    nameCn: '幽灵怪 / 恶灵 / 鬼火 (Ghosts & Wraiths)',
+    nameEn: 'Ghosts & Wraiths',
+    category: 'farm',
+    act: 2,
+    areaCn: '神秘避难所 / 世界之石要塞',
+    areaEn: 'Arcane Sanctuary & Worldstone',
+    mlvl: { normal: 15, nightmare: 45, hell: 83 },
+    tc: { normal: 'Act 1 Wraith A', nightmare: 'Act 3 (N) Wraith C', hell: 'Act 5 (H) Wraith C' },
+    picks: 1,
+    baseNoDrop: 100,
+    icon: '👻',
+    descCn: '物理免疫浮空怪，剔除了绝大部分普通装备杂质，高级符文产出期望比常规小怪高约3.5倍！',
+  },
+  {
+    id: 'pit_unique',
+    nameCn: '85级场景 随机暗金首领 (Level 85 Area Unique)',
+    nameEn: 'Level 85 Area Boss',
+    category: 'farm',
+    act: 1,
+    areaCn: '地穴 / 古代通道 / 混沌避难所',
+    areaEn: 'The Pit, Ancient Tunnels, Chaos',
+    mlvl: { normal: 20, nightmare: 60, hell: 88 },
+    tc: { normal: 'Act 5 Unique A', nightmare: 'Act 5 (N) Unique A', hell: 'Act 5 (H) Unique C' },
+    picks: 2,
+    baseNoDrop: 0,
+    icon: '👑',
+    descCn: 'TC 87 全解锁，mlvl 88，可以掉落全游戏包括风之力、格利风之眼在内的所有暗金神器。',
+  },
+  {
+    id: 'pit_champion',
+    nameCn: '85级场景 冠军蓝怪 (Level 85 Area Champion)',
+    nameEn: 'Level 85 Area Champion',
+    category: 'farm',
+    act: 1,
+    areaCn: '地穴 / 古代通道 / 混沌避难所',
+    areaEn: 'Level 85 Zones',
+    mlvl: { normal: 19, nightmare: 59, hell: 87 },
+    tc: { normal: 'Act 5 Champ A', nightmare: 'Act 5 (N) Champ A', hell: 'Act 5 (H) Champ C' },
+    picks: -2,
+    baseNoDrop: 0,
+    icon: '🔷',
+    descCn: '85场景蓝怪小队，确定性掉落2次，丰厚经验值与高级底模出产地。',
+  },
+
+  // --- Chests ---
+  {
+    id: 'lk_superchests',
+    nameCn: '库拉斯特下层 超级宝箱 (LK Superchests)',
+    nameEn: 'LK Superchests',
+    category: 'chest',
+    act: 3,
+    areaCn: '库拉斯特下层 (Lower Kurast)',
+    areaEn: 'Lower Kurast',
+    mlvl: { normal: 22, nightmare: 52, hell: 80 },
+    tc: { normal: 'Act 3 Chest A', nightmare: 'Act 3 (N) Chest C', hell: 'Act 3 (H) Chest C' },
+    picks: 4,
+    baseNoDrop: 100,
+    icon: '📦',
+    descCn: '著名LK双营火6箱子速开，单人模式下高级符文（最高至30#贝）与技能大板的最高效出处。',
+  },
+
+  // --- Normal Mobs ---
+  {
+    id: 'act1_h2h',
+    nameCn: '第一幕 近战小怪 (Act 1 Melee)',
+    nameEn: 'Act 1 Fallen / Zombie',
+    category: 'normal',
+    act: 1,
+    areaCn: '鲜血荒地至修道院',
+    areaEn: 'Blood Moor to Monastery',
+    mlvl: { normal: 3, nightmare: 38, hell: 68 },
+    tc: { normal: 'Act 1 H2H A', nightmare: 'Act 1 (N) H2H A', hell: 'Act 1 (H) H2H A' },
+    picks: 1,
+    baseNoDrop: 100,
+    icon: '🗡️',
+    descCn: '沉沦魔、僵尸等第一幕近战小怪基准掉落。',
+  },
+  {
+    id: 'act5_h2h',
+    nameCn: '第五幕 近战小怪 (Act 5 Melee)',
+    nameEn: 'Act 5 Minions',
+    category: 'normal',
+    act: 5,
+    areaCn: '毁灭王座与世界之石要塞',
+    areaEn: 'Worldstone Keep',
+    mlvl: { normal: 36, nightmare: 62, hell: 85 },
+    tc: { normal: 'Act 5 H2H C', nightmare: 'Act 5 (N) H2H C', hell: 'Act 5 (H) H2H C' },
+    picks: 1,
+    baseNoDrop: 100,
+    icon: '🛡️',
+    descCn: '第五幕毁灭王座强力近战小怪基准掉落。',
+  },
+];
+
+export type ItemCategoryFilter = 'all' | 'unique' | 'set' | 'rune' | 'base' | 'charm_gem' | 'misc';
+
+export const FAMOUS_ITEMS_META: Readonly<Record<string, { famousTitle: string; itemTypeCn: string; qlvl?: number }>> = {
+  uap: { famousTitle: '谐角之冠 (Harlequin Crest) · 军帽', itemTypeCn: '防具 · 头盔', qlvl: 69 },
+  uit: { famousTitle: '暴风之盾 (Stormshield) · 统御者大盾', itemTypeCn: '防具 · 盾牌', qlvl: 77 },
+  ci3: { famousTitle: "格利风之眼 (Griffon's Eye) · 权冠", itemTypeCn: '防具 · 头环', qlvl: 85 },
+  ci2: { famousTitle: "奇拉的守护 (Kira's Guardian) · 头饰", itemTypeCn: '防具 · 头环', qlvl: 77 },
+  utp: { famousTitle: '执政官铠甲 · 极品谜团/刚毅轻甲底模', itemTypeCn: '防具 · 铠甲', qlvl: 84 },
+  xtp: { famousTitle: '法师铠甲 · 主流3孔谜团底模', itemTypeCn: '防具 · 铠甲', qlvl: 60 },
+  uar: { famousTitle: "泰瑞尔之力 (Tyrael's Might) · 最稀有暗金", itemTypeCn: '防具 · 重甲', qlvl: 87 },
+  xea: { famousTitle: '蛇魔法师之皮 (Skin of the Vipermagi) · 海蛇皮', itemTypeCn: '防具 · 铠甲', qlvl: 37 },
+  xsk: { famousTitle: "塔·拉夏的赫拉迪克纹章 · 死亡面具", itemTypeCn: '防具 · 头盔', qlvl: 42 },
+  xui: { famousTitle: "诗寇蒂的愤怒 (Skullder's Ire) · 幽灵战甲", itemTypeCn: '防具 · 铠甲', qlvl: 50 },
+  urn: { famousTitle: '年纪之冠 (Crown of Ages) · 日冕之冠', itemTypeCn: '防具 · 头盔', qlvl: 86 },
+  ulc: { famousTitle: '蜘蛛之网 (Arachnid Mesh) · 蛛网腰带 (技能腰)', itemTypeCn: '防具 · 腰带', qlvl: 87 },
+  umc: { famousTitle: "维尔登戈的心结 (Verdungo's Hearty Cord) · 秘银腰带", itemTypeCn: '防具 · 腰带', qlvl: 71 },
+  xtb: { famousTitle: '战争之旅 (War Traveler) · 战旅50MF打宝靴', itemTypeCn: '防具 · 靴子', qlvl: 50 },
+  xhb: { famousTitle: '蚀肉骑士 (Gore Rider) · 骑士靴 (CB/DS/OW)', itemTypeCn: '防具 · 靴子', qlvl: 55 },
+  uvb: { famousTitle: '沙暴之旅 (Sandstorm Trek) · 蛛网之靴', itemTypeCn: '防具 · 靴子', qlvl: 74 },
+  umb: { famousTitle: '骨髓行走 (Marrowwalk) · 骸骨之靴', itemTypeCn: '防具 · 靴子', qlvl: 74 },
+  tgl: { famousTitle: '法师之拳 (Magefist) · 轻型铁手套 (20FCR)', itemTypeCn: '防具 · 手套', qlvl: 31 },
+  '7cr': { famousTitle: '碧蓝怒火 / 悔恨/最后希望 极品幻化之刃底模', itemTypeCn: '武器 · 单手剑', qlvl: 73 },
+  '7wa': { famousTitle: '狂战士斧 · 死亡之刀 / 悔恨/野兽顶级底模', itemTypeCn: '武器 · 单手斧', qlvl: 86 },
+  '7pa': { famousTitle: '神秘之斧 · 佣兵眼光/无限 极品长柄底模', itemTypeCn: '武器 · 长柄武器', qlvl: 79 },
+  '7vo': { famousTitle: '巨神之斧 · 必出4孔 佣兵眼光/无限底模', itemTypeCn: '武器 · 长柄武器', qlvl: 84 },
+  '7s8': { famousTitle: "死神的丧钟 (The Reaper's Toll) · 锐利之斧", itemTypeCn: '武器 · 长柄武器', qlvl: 71 },
+  '7wc': { famousTitle: '巨神长柄斧 · 攻速底模', itemTypeCn: '武器 · 长柄武器', qlvl: 86 },
+  amc: { famousTitle: '大院长之弓 · +3技能 信心 (Faith) 毕业底模', itemTypeCn: '武器 · 亚马逊弓', qlvl: 78 },
+  '6lw': { famousTitle: '风之力 (Windforce) · 九头蛇弓', itemTypeCn: '武器 · 弓', qlvl: 85 },
+  oba: { famousTitle: '眼球 (The Oculus) · 涡流水晶', itemTypeCn: '武器 · 法师球', qlvl: 50 },
+  obf: { famousTitle: "死亡深度 (Death's Fathom) · 次元碎片", itemTypeCn: '武器 · 法师球', qlvl: 85 },
+  '7gw': { famousTitle: "破隐一击 (Death's Web) · 破隐法杖", itemTypeCn: '武器 · 死灵法杖', qlvl: 86 },
+  baa: { famousTitle: "亚瑞特的面容 (Arreat's Face) · 飞机头", itemTypeCn: '野蛮人专属', qlvl: 50 },
+  dra: { famousTitle: "加尔的长发 (Jalal's Mane) · 狼头", itemTypeCn: '德鲁伊专属', qlvl: 50 },
+  pa9: { famousTitle: '撒卡兰姆使者 (Herald of Zakarum) · 饰金盾', itemTypeCn: '圣骑士专属', qlvl: 50 },
+  pab: { famousTitle: '神圣小盾 · 极品45全抗 流亡/精神底模', itemTypeCn: '圣骑士专属', qlvl: 63 },
+  ne9: { famousTitle: '侏儒 (Homunculus) · 圣堂总管之颅', itemTypeCn: '死灵法师专属', qlvl: 50 },
+  rin: { famousTitle: '乔丹之石 (SOJ) / 乌鸦之霜 / 婚戒', itemTypeCn: '珠宝首饰 · 戒指', qlvl: 1 },
+  amu: { famousTitle: '马拉的万花筒 / 大君之怒 / 塔拉夏护身符', itemTypeCn: '珠宝首饰 · 护身符', qlvl: 1 },
+  jew: { famousTitle: '彩虹刻面 (Rainbow Facet) / 40增伤15攻速宝珠', itemTypeCn: '珠宝首饰 · 珠宝', qlvl: 1 },
+  cm1: { famousTitle: '小护身符 · 20生命5全抗 / 毁灭 (Annihilus)', itemTypeCn: '护身符 · 小护身符', qlvl: 1 },
+  cm2: { famousTitle: '中护身符 · 地狱火炬 (Hellfire Torch)', itemTypeCn: '护身符 · 中护身符', qlvl: 1 },
+  cm3: { famousTitle: '超大护身符 · 职业+1技能板 / 吉黑德的运气', itemTypeCn: '护身符 · 超大护身符', qlvl: 1 },
+  pk1: { famousTitle: '恐惧之钥 (Key of Terror) · 女伯爵掉落', itemTypeCn: '任务道具 · 钥匙', qlvl: 80 },
+  pk2: { famousTitle: '憎恨之钥 (Key of Hate) · 召唤者掉落', itemTypeCn: '任务道具 · 钥匙', qlvl: 80 },
+  pk3: { famousTitle: '毁灭之钥 (Key of Destruction) · 尼拉塞克掉落', itemTypeCn: '任务道具 · 钥匙', qlvl: 80 },
+  mbr: { famousTitle: '痛苦之精华 · 安姐/督瑞尔掉落', itemTypeCn: '洗点材料 · 精华', qlvl: 80 },
+  dhn: { famousTitle: '憎恨之精华 · 劳模掉落', itemTypeCn: '洗点材料 · 精华', qlvl: 80 },
+  bet: { famousTitle: '恐惧之精华 · 大菠萝掉落', itemTypeCn: '洗点材料 · 精华', qlvl: 80 },
+  fed: { famousTitle: '毁灭之精华 · 巴尔掉落', itemTypeCn: '洗点材料 · 精华', qlvl: 80 },
+  tes: { famousTitle: '赦免徽章 (Token of Absolution) · 4色精华洗点水', itemTypeCn: '重置道具', qlvl: 80 },
+  r20: { famousTitle: '20# 蓝姆 (Lem) · 财富/打钱蛮子', itemTypeCn: '高级符文 · 20#', qlvl: 43 },
+  r21: { famousTitle: '21# 普尔 (Pul) · 誓约/石块', itemTypeCn: '高级符文 · 21#', qlvl: 45 },
+  r22: { famousTitle: '22# 乌姆 (Um) · 强制/盔甲镶嵌22全抗', itemTypeCn: '高级符文 · 22#', qlvl: 47 },
+  r23: { famousTitle: '23# 马尔 (Mal) · 战争召唤/弑君者', itemTypeCn: '高级符文 · 23#', qlvl: 49 },
+  r24: { famousTitle: '24# 伊司特 (Ist) · 战争召唤/25MF打宝神珠', itemTypeCn: '高级符文 · 24#', qlvl: 51 },
+  r25: { famousTitle: '25# 古尔 (Gul) · 死亡之呼吸/橡树之心', itemTypeCn: '高级符文 · 25#', qlvl: 53 },
+  r26: { famousTitle: '26# 伐克斯 (Vex) · 橡树之心 (HOTO)/凤凰', itemTypeCn: '大号符文 · 26#', qlvl: 55 },
+  r27: { famousTitle: '27# 欧姆 (Ohm) · 战争召唤 (CTA)/混沌', itemTypeCn: '大号符文 · 27#', qlvl: 57 },
+  r28: { famousTitle: '28# 罗 (Lo) · 刚毅 (Fortitude)/悔恨 (Grief)', itemTypeCn: '大号符文 · 28#', qlvl: 59 },
+  r29: { famousTitle: '29# 瑟 (Sur) · 双瑟合贝/最后希望', itemTypeCn: '大号符文 · 29#', qlvl: 61 },
+  r30: { famousTitle: '30# 贝 (Ber) · 谜团 (Enigma)/无限 (Infinity)/野兽', itemTypeCn: '核心神级符文 · 30#', qlvl: 63 },
+  r31: { famousTitle: '31# 乔 (Jah) · 谜团 (Enigma)/最后希望/信仰', itemTypeCn: '核心神级符文 · 31#', qlvl: 65 },
+  r32: { famousTitle: '32# 查姆 (Cham) · 傲慢/末日/不灭神珠', itemTypeCn: '大号符文 · 32#', qlvl: 67 },
+  r33: { famousTitle: '33# 萨德 (Zod) · 死亡之呼吸 (BOTD)/无法破坏', itemTypeCn: '终极符文 · 33#', qlvl: 69 },
+};
+
+export function classifyItemCategory(code: string, quality?: string): ItemCategoryFilter {
+  if (code.startsWith('r') && /^r(?:0[1-9]|[12]\d|3[0-3])$/.test(code)) {
+    return 'rune';
+  }
+  if (['jew', 'cm1', 'cm2', 'cm3', 'rin', 'amu'].includes(code)) {
+    return 'charm_gem';
+  }
+  if (/^g[cfszpy][vrbygw]$/.test(code) || /^sk[cfulz]$/.test(code)) {
+    return 'charm_gem';
+  }
+  if (
+    ['pk1', 'pk2', 'pk3', 'dhn', 'mbr', 'bet', 'fed', 'tes', 'ceh', 'std', 'gld', 'key', 'tsc', 'isc'].includes(code) ||
+    /^[hm]p[1-5]$/.test(code) ||
+    ['rvs', 'rvl', 'vps', 'yps', 'wms'].includes(code)
+  ) {
+    return 'misc';
+  }
+  if (quality === 'unique') return 'unique';
+  if (quality === 'set') return 'set';
+  return 'base';
+}
+
 // --- Browser DOM Controller --------------------------------------------------
 
 if (typeof document !== 'undefined') {
@@ -699,121 +1156,323 @@ if (typeof document !== 'undefined') {
 export function initLootUi(): void {
   const { tcTable, autoTcs } = loadCanonicalTreasureClasses();
 
-  const presetSelect = document.getElementById('tc-preset') as HTMLSelectElement | null;
-  const tcInput = document.getElementById('tc-input') as HTMLInputElement | null;
-  const questDropCheckbox = document.getElementById('quest-drop') as HTMLInputElement | null;
+  // State
+  let currentDifficulty: 'normal' | 'nightmare' | 'hell' = 'hell';
+  let currentMonster: MonsterPreset = MONSTER_PRESETS.find(m => m.id === 'baal') ?? MONSTER_PRESETS[0]!;
+  let isQuestDrop = false;
+  let activeMonsterCategory: MonsterCategory | 'all' = 'all';
+  let activeItemCategory: ItemCategoryFilter = 'all';
+  let currentSortOrder: 'odds-desc' | 'odds-asc' | 'quality' | 'name' | 'qlvl' = 'odds-desc';
+  let activeViewTab: 'exact' | 'sim' | 'reverse' = 'exact';
+  let itemSearchQuery = '';
+
+  let isSimRunning = false;
+  let isSimPaused = false;
+  let abortRequested = false;
+
+  let currentAnalyticResult: AnalyticTcResult | null = null;
+  let currentSimResult: SimulationResult | null = null;
+  let latestSummaries: DroppedItemSummary[] = [];
+
+  // DOM Elements - Navigation & Difficulty
+  const diffButtons = document.querySelectorAll<HTMLButtonElement>('.diff-btn');
   const difficultySelect = document.getElementById('difficulty') as HTMLSelectElement | null;
+
+  // Monster Selector Elements
+  const monsterSearchInput = document.getElementById('monster-search-input') as HTMLInputElement | null;
+  const monsterCatChips = document.querySelectorAll<HTMLButtonElement>('.monster-cat-chip');
+  const monsterListContainer = document.getElementById('monster-list');
+  const presetSelect = document.getElementById('tc-preset') as HTMLSelectElement | null;
+
+  // Monster Spec Card Elements
+  const monsterCardIcon = document.getElementById('monster-card-icon');
+  const monsterCardTitle = document.getElementById('monster-card-title');
+  const monsterCardBadge = document.getElementById('monster-card-badge');
+  const monsterCardArea = document.getElementById('monster-card-area');
+  const monsterCardMlvl = document.getElementById('monster-card-mlvl');
+  const monsterCardPicks = document.getElementById('monster-card-picks');
+  const monsterCardNodrop = document.getElementById('monster-card-nodrop');
+  const monsterCardTc = document.getElementById('monster-card-tc');
+  const monsterCardDesc = document.getElementById('monster-card-desc');
+  const questDropToggle = document.getElementById('quest-drop-toggle') as HTMLInputElement | null;
+  const questDropCheckbox = document.getElementById('quest-drop') as HTMLInputElement | null;
+  const questDropBanner = document.getElementById('quest-drop-banner');
+  const tcInput = document.getElementById('tc-input') as HTMLInputElement | null;
+  const btnApplyCustomTc = document.getElementById('btn-apply-custom-tc') as HTMLButtonElement | null;
+
+  // Settings
   const gamePlayersInput = document.getElementById('game-players') as HTMLInputElement | null;
   const partyPlayersInput = document.getElementById('party-players') as HTMLInputElement | null;
+  const playerChips = document.querySelectorAll<HTMLButtonElement>('.player-chip');
   const mfInput = document.getElementById('magic-find') as HTMLInputElement | null;
+  const mfChips = document.querySelectorAll<HTMLButtonElement>('.mf-chip');
+  const effectivePlayersHint = document.getElementById('effective-players-hint');
+
+  // Simulation Controls
   const runsSelect = document.getElementById('sim-runs') as HTMLSelectElement | null;
   const seedInput = document.getElementById('sim-seed') as HTMLInputElement | null;
-
-  function getEffectiveTcName(): string {
-    let name = tcInput?.value.trim() || 'Act 1 H2H A';
-    if (questDropCheckbox?.checked) {
-      const questTc = name.replace(/^(Andariel|Duriel|Mephisto|Diablo|Baal)(.*)$/, '$1q$2');
-      if (tcTable.get(questTc)) {
-        return questTc;
-      }
-    }
-    return name;
-  }
-
   const btnStart = document.getElementById('btn-start') as HTMLButtonElement | null;
   const btnPause = document.getElementById('btn-pause') as HTMLButtonElement | null;
   const btnStop = document.getElementById('btn-stop') as HTMLButtonElement | null;
   const btnCalcExact = document.getElementById('btn-calc-exact') as HTMLButtonElement | null;
-
   const progressBar = document.getElementById('sim-progress-bar') as HTMLElement | null;
   const progressText = document.getElementById('sim-progress-text') as HTMLElement | null;
 
-  const statTotalRuns = document.getElementById('stat-total-runs');
-  const statTotalDrops = document.getElementById('stat-total-drops');
+  // View Switcher & Toolbar
+  const viewTabButtons = document.querySelectorAll<HTMLButtonElement>('.view-tab-btn');
+  const viewPanes = document.querySelectorAll<HTMLElement>('.view-pane');
+  const itemCatTabs = document.querySelectorAll<HTMLButtonElement>('.item-cat-tab');
+  const itemSearchInput = document.getElementById('item-search-input') as HTMLInputElement | null;
+  const itemSortSelect = document.getElementById('item-sort-select') as HTMLSelectElement | null;
+  const btnExportCsv = document.getElementById('btn-export-csv') as HTMLButtonElement | null;
+
+  // Stats Bar Elements
+  const statTargetName = document.getElementById('stat-target-name');
+  const statCurrentTc = document.getElementById('stat-current-tc');
+  const statEffPlayers = document.getElementById('stat-eff-players');
+  const statTotalItems = document.getElementById('stat-total-items');
+  const statNoDropPct = document.getElementById('stat-nodrop-pct');
   const statAvgDrops = document.getElementById('stat-avg-drops');
-  const statNoDropRuns = document.getElementById('stat-nodrop-runs');
-
-  const qualityTbody = document.getElementById('quality-tbody');
-  const itemsTbody = document.getElementById('items-tbody');
-  const itemsFilter = document.getElementById('items-filter') as HTMLInputElement | null;
 
+  // Results Containers
+  const exactContainer = document.getElementById('exact-items-container');
+  const simContainer = document.getElementById('sim-items-container');
   const exactTbody = document.getElementById('exact-tbody');
+  const itemsTbody = document.getElementById('items-tbody');
+  const qualityTbody = document.getElementById('quality-tbody');
   const exactTcInfo = document.getElementById('exact-tc-info');
+
+  // Reverse Search Elements
   const reverseInput = document.getElementById('reverse-search-input') as HTMLInputElement | null;
   const reverseTbody = document.getElementById('reverse-tbody');
   const reverseMatchCount = document.getElementById('reverse-match-count');
 
-  const tabButtons = document.querySelectorAll('.tab-btn');
-  const tabPanes = document.querySelectorAll('.tab-pane');
+  function getEffectiveTcName(): string {
+    if (tcInput && tcInput.value.trim() && tcInput.value.trim() !== currentMonster.tc[currentDifficulty]) {
+      return tcInput.value.trim();
+    }
+    if (isQuestDrop && currentMonster.questTc) {
+      return currentMonster.questTc[currentDifficulty];
+    }
+    return currentMonster.tc[currentDifficulty];
+  }
 
-  tabButtons.forEach(btn => {
+  function getEffectivePlayers(): number {
+    const g = parseInt(gamePlayersInput?.value || '1', 10) || 1;
+    const p = parseInt(partyPlayersInput?.value || '1', 10) || 1;
+    return computeEffectivePlayers(g, p);
+  }
+
+  // --- Render Monster List ----------------------------------------------------
+
+  function renderMonsterList() {
+    if (!monsterListContainer) return;
+    const query = monsterSearchInput?.value.trim().toLowerCase() || '';
+
+    const filtered = MONSTER_PRESETS.filter(m => {
+      if (activeMonsterCategory !== 'all' && m.category !== activeMonsterCategory) {
+        return false;
+      }
+      if (!query) return true;
+      return (
+        m.nameCn.toLowerCase().includes(query) ||
+        m.nameEn.toLowerCase().includes(query) ||
+        m.areaCn.toLowerCase().includes(query) ||
+        m.areaEn.toLowerCase().includes(query) ||
+        m.id.toLowerCase().includes(query)
+      );
+    });
+
+    if (filtered.length === 0) {
+      monsterListContainer.innerHTML = `<div style="padding: 14px; text-align: center; color: var(--text-dim); font-size: 11px;">无匹配的怪物</div>`;
+      return;
+    }
+
+    const html = filtered
+      .map(m => {
+        const isSelected = m.id === currentMonster.id;
+        const currentMlvl = m.mlvl[currentDifficulty];
+        const categoryBadge = m.category === 'boss' ? '幕首领' : m.category === 'superunique' ? '固定暗金' : m.category === 'chest' ? '宝箱' : m.category === 'farm' ? '刷宝' : '常规';
+
+        return `
+          <div class="monster-item-card ${isSelected ? 'selected' : ''}" data-mon-id="${m.id}">
+            <div class="mon-icon">${m.icon}</div>
+            <div class="mon-info">
+              <div class="mon-name-row">
+                <span class="mon-name">${m.nameCn}</span>
+                <span class="mon-cat-badge badge-${m.category}">${categoryBadge}</span>
+              </div>
+              <div class="mon-meta">${m.areaCn} · mlvl ${currentMlvl} · ${m.picks} picks</div>
+            </div>
+          </div>
+        `;
+      })
+      .join('');
+
+    monsterListContainer.innerHTML = html;
+
+    monsterListContainer.querySelectorAll('.monster-item-card').forEach(el => {
+      el.addEventListener('click', () => {
+        const id = el.getAttribute('data-mon-id');
+        const m = MONSTER_PRESETS.find(x => x.id === id);
+        if (m) {
+          currentMonster = m;
+          if (tcInput) tcInput.value = getEffectiveTcName();
+          renderMonsterList();
+          updateMonsterSpecCard();
+          updateExactTable();
+        }
+      });
+    });
+  }
+
+  function updateMonsterSpecCard() {
+    const mlvl = currentMonster.mlvl[currentDifficulty];
+    const tc = getEffectiveTcName();
+    const hasQuestDrop = Boolean(currentMonster.questTc);
+
+    if (monsterCardIcon) monsterCardIcon.textContent = currentMonster.icon;
+    if (monsterCardTitle) monsterCardTitle.textContent = currentMonster.nameCn;
+    if (monsterCardBadge) {
+      monsterCardBadge.textContent =
+        currentMonster.category === 'boss'
+          ? `第 ${currentMonster.act} 幕 · 幕关底首领`
+          : currentMonster.category === 'superunique'
+          ? `第 ${currentMonster.act} 幕 · 固定暗金怪`
+          : currentMonster.category === 'chest'
+          ? `第 ${currentMonster.act} 幕 · 超级宝箱`
+          : currentMonster.category === 'farm'
+          ? `高收益刷宝圣地`
+          : `普通怪物`;
+    }
+    if (monsterCardArea) monsterCardArea.textContent = currentMonster.areaCn;
+    if (monsterCardMlvl) monsterCardMlvl.textContent = String(mlvl);
+    if (monsterCardPicks) monsterCardPicks.textContent = `${currentMonster.picks} 次`;
+    if (monsterCardNodrop) {
+      const g = parseInt(gamePlayersInput?.value || '1', 10) || 1;
+      const p = parseInt(partyPlayersInput?.value || '1', 10) || 1;
+      const eff = computeEffectivePlayers(g, p);
+      const node = tcTable.get(tc);
+      if (node && node.noDrop > 0) {
+        const totalProb = node.totalProbExpansion;
+        const scaledNoDrop = computeScaledNoDrop(node.noDrop, totalProb, eff);
+        const singleNoDrop = scaledNoDrop / (scaledNoDrop + totalProb);
+        const compoundNoDrop = node.picks > 0 ? Math.pow(singleNoDrop, node.picks) : 0;
+        monsterCardNodrop.textContent = `${(compoundNoDrop * 100).toFixed(2)}%`;
+      } else {
+        monsterCardNodrop.textContent = '0.00%';
+      }
+    }
+    if (monsterCardTc) monsterCardTc.textContent = tc;
+    if (monsterCardDesc) monsterCardDesc.textContent = currentMonster.descCn;
+
+    if (questDropToggle) {
+      questDropToggle.checked = isQuestDrop;
+      questDropToggle.disabled = !hasQuestDrop;
+    }
+    if (questDropCheckbox) {
+      questDropCheckbox.checked = isQuestDrop;
+      questDropCheckbox.disabled = !hasQuestDrop;
+    }
+    if (questDropBanner) {
+      questDropBanner.style.display = isQuestDrop && hasQuestDrop ? 'flex' : 'none';
+    }
+
+    if (effectivePlayersHint) {
+      const eff = getEffectivePlayers();
+      effectivePlayersHint.textContent = `当前有效掉落人数: ${eff} 人 (NoDrop 缩减已生效)`;
+    }
+
+    if (statTargetName) statTargetName.textContent = currentMonster.nameCn;
+    if (statCurrentTc) statCurrentTc.textContent = tc;
+    if (statEffPlayers) statEffPlayers.textContent = `${getEffectivePlayers()} P`;
+  }
+
+  // --- Difficulty Switcher ----------------------------------------------------
+
+  function setDifficulty(diff: 'normal' | 'nightmare' | 'hell') {
+    currentDifficulty = diff;
+    diffButtons.forEach(btn => {
+      btn.classList.toggle('active', btn.getAttribute('data-diff') === diff);
+    });
+    if (difficultySelect) {
+      difficultySelect.value = diff;
+    }
+    if (tcInput) tcInput.value = getEffectiveTcName();
+    renderMonsterList();
+    updateMonsterSpecCard();
+    updateExactTable();
+  }
+
+  diffButtons.forEach(btn => {
     btn.addEventListener('click', () => {
-      tabButtons.forEach(b => b.classList.remove('active'));
-      tabPanes.forEach(p => p.classList.remove('active'));
-      btn.classList.add('active');
-      const tabId = btn.getAttribute('data-tab');
-      if (tabId) {
-        document.getElementById(tabId)?.classList.add('active');
+      const diff = btn.getAttribute('data-diff') as any;
+      if (diff === 'normal' || diff === 'nightmare' || diff === 'hell') {
+        setDifficulty(diff);
       }
     });
   });
 
-  presetSelect?.addEventListener('change', () => {
-    if (presetSelect.value && tcInput) {
-      tcInput.value = presetSelect.value;
-      if (questDropCheckbox) {
-        questDropCheckbox.checked = presetSelect.value.includes('q');
-      }
+  difficultySelect?.addEventListener('change', () => {
+    setDifficulty(difficultySelect.value as any);
+  });
+
+  // --- Monster Filters --------------------------------------------------------
+
+  monsterCatChips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      monsterCatChips.forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+      activeMonsterCategory = chip.getAttribute('data-cat') as any;
+      renderMonsterList();
+    });
+  });
+
+  monsterSearchInput?.addEventListener('input', () => {
+    renderMonsterList();
+  });
+
+  // Quest Drop toggle
+  function setQuestDrop(val: boolean) {
+    isQuestDrop = val;
+    if (questDropToggle) questDropToggle.checked = val;
+    if (questDropCheckbox) questDropCheckbox.checked = val;
+    if (tcInput) tcInput.value = getEffectiveTcName();
+    updateMonsterSpecCard();
+    updateExactTable();
+  }
+
+  questDropToggle?.addEventListener('change', () => {
+    setQuestDrop(questDropToggle.checked);
+  });
+  questDropCheckbox?.addEventListener('change', () => {
+    setQuestDrop(questDropCheckbox.checked);
+  });
+
+  // Custom TC input
+  btnApplyCustomTc?.addEventListener('click', () => {
+    if (tcInput?.value.trim()) {
+      updateMonsterSpecCard();
       updateExactTable();
     }
   });
 
-  tcInput?.addEventListener('change', () => {
-    updateExactTable();
-  });
-
-  questDropCheckbox?.addEventListener('change', () => {
-    if (tcInput) {
-      let val = tcInput.value.trim();
-      if (questDropCheckbox.checked) {
-        val = val.replace(/^(Andariel|Duriel|Mephisto|Diablo|Baal)(.*)$/, '$1q$2');
-      } else {
-        val = val.replace(/^(Andariel|Duriel|Mephisto|Diablo|Baal)q(.*)$/, '$1$2');
-      }
-      if (tcTable.get(val)) {
-        tcInput.value = val;
-      }
+  presetSelect?.addEventListener('change', () => {
+    const val = presetSelect.value;
+    if (val && tcInput) {
+      tcInput.value = val;
+      updateExactTable();
     }
-    updateExactTable();
-  });
-
-  difficultySelect?.addEventListener('change', () => {
-    if (tcInput) {
-      const diff = difficultySelect.value;
-      let val = tcInput.value.trim();
-      if (diff === 'hell') {
-        if (val.includes(' (N)')) val = val.replace(' (N)', ' (H)');
-        else if (!val.includes(' (H)') && tcTable.get(val + ' (H)')) val = val + ' (H)';
-      } else if (diff === 'nightmare') {
-        if (val.includes(' (H)')) val = val.replace(' (H)', ' (N)');
-        else if (!val.includes(' (N)') && tcTable.get(val + ' (N)')) val = val + ' (N)';
-      } else if (diff === 'normal') {
-        const normVal = val.replace(/ \([NH]\)/g, '');
-        if (tcTable.get(normVal)) val = normVal;
-      }
-      if (tcTable.get(val)) {
-        tcInput.value = val;
-      }
-    }
-    updateExactTable();
   });
 
+  // Player counts & MF
   gamePlayersInput?.addEventListener('change', () => {
     if (gamePlayersInput && partyPlayersInput) {
       const g = parseInt(gamePlayersInput.value, 10) || 1;
       const p = parseInt(partyPlayersInput.value, 10) || 1;
       if (p > g) partyPlayersInput.value = String(g);
     }
+    updateMonsterSpecCard();
     updateExactTable();
   });
 
@@ -823,69 +1482,109 @@ export function initLootUi(): void {
       const p = parseInt(partyPlayersInput.value, 10) || 1;
       if (p > g) partyPlayersInput.value = String(g);
     }
+    updateMonsterSpecCard();
     updateExactTable();
   });
 
-  btnCalcExact?.addEventListener('click', () => {
-    updateExactTable();
+  playerChips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      playerChips.forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+      const p = chip.getAttribute('data-players');
+      if (p && gamePlayersInput) {
+        gamePlayersInput.value = p;
+        if (partyPlayersInput) partyPlayersInput.value = '1';
+        updateMonsterSpecCard();
+        updateExactTable();
+      }
+    });
   });
 
-  let reverseIndex: Map<string, ReverseLookupEntry[]> | undefined;
-  function getReverseIndex(): Map<string, ReverseLookupEntry[]> {
-    if (!reverseIndex) {
-      reverseIndex = buildReverseLookupIndex(tcTable, autoTcs);
-    }
-    return reverseIndex;
-  }
+  mfChips.forEach(chip => {
+    chip.addEventListener('click', () => {
+      mfChips.forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+      const mf = chip.getAttribute('data-mf');
+      if (mf && mfInput) {
+        mfInput.value = mf;
+        updateExactTable();
+      }
+    });
+  });
 
-  reverseInput?.addEventListener('input', () => {
-    const query = reverseInput.value.trim();
-    if (!query) {
-      if (reverseTbody) reverseTbody.innerHTML = '';
-      if (reverseMatchCount) reverseMatchCount.textContent = '0 项匹配';
+  // --- Category Tabs & View Switching ----------------------------------------
+
+  viewTabButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      viewTabButtons.forEach(b => b.classList.remove('active'));
+      viewPanes.forEach(p => p.classList.remove('active'));
+      btn.classList.add('active');
+      const view = btn.getAttribute('data-view') as 'exact' | 'sim' | 'reverse';
+      activeViewTab = view;
+      document.getElementById(`view-${view}`)?.classList.add('active');
+      renderDropList();
+    });
+  });
+
+  itemCatTabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      itemCatTabs.forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      activeItemCategory = tab.getAttribute('data-cat') as ItemCategoryFilter;
+      renderDropList();
+    });
+  });
+
+  itemSearchInput?.addEventListener('input', () => {
+    itemSearchQuery = itemSearchInput.value.trim().toLowerCase();
+    renderDropList();
+  });
+
+  itemSortSelect?.addEventListener('change', () => {
+    currentSortOrder = itemSortSelect.value as any;
+    renderDropList();
+  });
+
+  // --- CSV Export ------------------------------------------------------------
+
+  btnExportCsv?.addEventListener('click', () => {
+    exportCurrentDataCsv();
+  });
+
+  function exportCurrentDataCsv() {
+    const tcName = getEffectiveTcName();
+    let csv = '\uFEFF'; // UTF-8 BOM
+
+    if (activeViewTab === 'sim' && currentSimResult) {
+      csv += '物品代码,物品名称,掉落品质,实测掉落数,每轮占比(%)\n';
+      for (const s of latestSummaries) {
+        csv += `"${s.code}","${s.name.replace(/"/g, '""')}","${s.quality}",${s.count},${s.percentage.toFixed(4)}\n`;
+      }
+    } else if (currentAnalyticResult) {
+      csv += '排名,物品代码,物品名称,分类,单次概率(%),综合概率(%),掉落几率比(1 in X),每轮期望掉落数\n';
+      currentAnalyticResult.leaves.forEach((l, idx) => {
+        const cat = classifyItemCategory(l.item);
+        const singlePct = (l.singleProbability * 100).toFixed(6);
+        const compPct = (l.compoundProbability * 100).toFixed(6);
+        const odds = l.oneInOdds < 1000000 ? l.oneInOdds.toFixed(1) : Math.round(l.oneInOdds);
+        csv += `${idx + 1},"${l.item}","${l.name.replace(/"/g, '""')}","${cat}",${singlePct},${compPct},"1 in ${odds}",${l.expectedDrops.toFixed(6)}\n`;
+      });
+    } else {
+      alert('暂无数据可导出');
       return;
     }
-    const results = reverseLookup(getReverseIndex(), query);
-    renderReverseLookupResults(results);
-  });
 
-  function renderReverseLookupResults(results: ReverseLookupResult[]) {
-    if (!reverseTbody) return;
-    let totalMatches = 0;
-    const rows: string[] = [];
-
-    const allMatches: { res: ReverseLookupResult; entry: ReverseLookupEntry }[] = [];
-    for (const res of results) {
-      for (const entry of res.entries) {
-        allMatches.push({ res, entry });
-      }
-    }
-    allMatches.sort((a, b) => b.entry.compoundProbability - a.entry.compoundProbability);
-
-    for (const m of allMatches) {
-      totalMatches++;
-      const res = m.res;
-      const entry = m.entry;
-      const pct = (entry.compoundProbability * 100).toFixed(4) + '%';
-      const odds = entry.oneInOdds < 1000000 ? '1 in ' + entry.oneInOdds.toFixed(1) : '1 in ' + Math.round(entry.oneInOdds).toLocaleString();
-      rows.push(`
-        <tr>
-          <td style="color: var(--gold-primary); font-weight: bold;">${entry.tcName}</td>
-          <td>${res.matchedCode} (${res.matchedName})</td>
-          <td>${entry.picks}</td>
-          <td>${(entry.singleProbability * 100).toFixed(4)}%</td>
-          <td style="color: #a5d6a7; font-weight: bold;">${pct}</td>
-          <td style="color: var(--gold-light); font-variant-numeric: tabular-nums;">${odds}</td>
-        </tr>
-      `);
-    }
-
-    reverseTbody.innerHTML = rows.slice(0, 200).join('');
-    if (reverseMatchCount) {
-      reverseMatchCount.textContent = `找到 ${totalMatches} 条掉落记录${totalMatches > 200 ? ' (展示前 200 条)' : ''}`;
-    }
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `d2_drop_${tcName.replace(/[^a-zA-Z0-9_-]/g, '_')}_${Date.now()}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
   }
 
+  // --- Calculate & Update Exact Odds -----------------------------------------
+
   function updateExactTable() {
     const tcName = getEffectiveTcName();
     const g = parseInt(gamePlayersInput?.value || '1', 10) || 1;
@@ -898,56 +1597,288 @@ export function initLootUi(): void {
       partyPlayers: p,
     });
 
+    currentAnalyticResult = result;
+
     if (result.leaves.length === 0 && !tcTable.get(tcName) && !autoTcs.has(tcName)) {
       if (exactTcInfo) {
         exactTcInfo.innerHTML = `<span style="color: #ff8080;">⚠️ 未找到名为 "<strong>${tcName}</strong>" 的 TreasureClass。请检查名称拼写或从左侧预设选择。</span>`;
       }
-      if (exactTbody) {
-        exactTbody.innerHTML = `<tr><td colspan="7" style="text-align: center; color: #ff8080; padding: 20px;">未找到名为 "${tcName}" 的 TreasureClass，请检查拼写</td></tr>`;
+      if (exactContainer) {
+        exactContainer.innerHTML = `<div style="text-align: center; color: #ff8080; padding: 40px;">未找到名为 "${tcName}" 的 TreasureClass，请检查拼写</div>`;
       }
       return;
     }
 
-    if (exactTcInfo) {
-      const isQuest = tcName.includes('q');
-      exactTcInfo.innerHTML = `
-        <strong>TC:</strong> ${result.tcName}${isQuest ? ' <span style="color: #ffd700; font-weight: bold;">(👑首杀)</span>' : ''} |
-        <strong>Picks:</strong> ${result.picks} |
-        <strong>有效人数 (Effective Players):</strong> ${result.effectivePlayers} |
-        <strong>综合 NoDrop:</strong> ${(result.noDropCompoundProb * 100).toFixed(2)}% |
-        <strong>叶子物品总数:</strong> ${result.leaves.length}
-      `;
+    if (statTotalItems) statTotalItems.textContent = String(result.leaves.length);
+    if (statNoDropPct) statNoDropPct.textContent = `${(result.noDropCompoundProb * 100).toFixed(1)}%`;
+    if (statAvgDrops) statAvgDrops.textContent = `${(result.picks * (1 - result.noDropSingleProb)).toFixed(2)}`;
+
+    updateCategoryCounts();
+    renderDropList();
+  }
+
+  function updateCategoryCounts() {
+    if (!currentAnalyticResult) return;
+    const counts: Record<ItemCategoryFilter, number> = {
+      all: 0,
+      unique: 0,
+      set: 0,
+      rune: 0,
+      base: 0,
+      charm_gem: 0,
+      misc: 0,
+    };
+
+    if (activeViewTab === 'sim' && currentSimResult) {
+      counts.all = latestSummaries.length;
+      for (const s of latestSummaries) {
+        const cat = classifyItemCategory(s.code, s.quality);
+        counts[cat]++;
+      }
+    } else {
+      counts.all = currentAnalyticResult.leaves.length;
+      for (const l of currentAnalyticResult.leaves) {
+        const cat = classifyItemCategory(l.item);
+        counts[cat]++;
+        // If has famous unique meta, increment unique count
+        if (FAMOUS_ITEMS_META[l.item]) {
+          counts.unique++;
+        }
+      }
     }
 
-    if (exactTbody) {
-      const rows = result.leaves.map((leaf, index) => {
-        const pct = (leaf.compoundProbability * 100).toFixed(4) + '%';
-        const singlePct = (leaf.singleProbability * 100).toFixed(4) + '%';
-        const odds = leaf.oneInOdds < 1000000 ? '1 in ' + leaf.oneInOdds.toFixed(1) : '1 in ' + Math.round(leaf.oneInOdds).toLocaleString();
-        let color = '#dcdcdc';
-        if (leaf.isGold) color = '#ffd700';
-        else if (leaf.isRune) color = '#ff8000';
+    itemCatTabs.forEach(tab => {
+      const cat = tab.getAttribute('data-cat') as ItemCategoryFilter;
+      const badge = tab.querySelector('.cat-count');
+      if (badge) {
+        badge.textContent = String(counts[cat] || 0);
+      }
+    });
+  }
 
-        return `
-          <tr>
-            <td style="color: var(--text-dim);">${index + 1}</td>
-            <td style="font-weight: bold; color: ${color};">${leaf.item}</td>
-            <td style="color: ${color};">${leaf.name}</td>
-            <td>${singlePct}</td>
-            <td style="color: #81c784; font-weight: bold;">${pct}</td>
-            <td>${leaf.expectedDrops.toFixed(4)}</td>
-            <td style="font-variant-numeric: tabular-nums;">${odds}</td>
-          </tr>
-        `;
-      });
-      exactTbody.innerHTML = rows.join('');
+  // --- Render Maxroll-Style Drop List ----------------------------------------
+
+  function renderDropList() {
+    if (activeViewTab === 'exact') {
+      renderExactDropCards();
+    } else if (activeViewTab === 'sim') {
+      renderSimDropCards();
     }
   }
 
-  let isSimRunning = false;
-  let isSimPaused = false;
-  let abortRequested = false;
-  let latestSummaries: DroppedItemSummary[] = [];
+  function renderExactDropCards() {
+    if (!exactContainer || !currentAnalyticResult) return;
+    const leaves = currentAnalyticResult.leaves;
+    if (leaves.length === 0) {
+      exactContainer.innerHTML = `<div style="text-align: center; color: var(--text-dim); padding: 40px;">暂无掉落数据</div>`;
+      return;
+    }
+
+    // Maximum compound probability for relative bar width
+    const maxProb = Math.max(...leaves.map(l => l.compoundProbability), 0.0001);
+
+    // Filter
+    let filtered = leaves.filter(l => {
+      const cat = classifyItemCategory(l.item);
+      const isFamousUnique = Boolean(FAMOUS_ITEMS_META[l.item]);
+
+      if (activeItemCategory !== 'all') {
+        if (activeItemCategory === 'unique' && !isFamousUnique) return false;
+        if (activeItemCategory !== 'unique' && cat !== activeItemCategory) return false;
+      }
+
+      if (!itemSearchQuery) return true;
+      const meta = FAMOUS_ITEMS_META[l.item];
+      const matchText = `${l.item} ${l.name} ${meta?.famousTitle || ''} ${meta?.itemTypeCn || ''}`.toLowerCase();
+      return matchText.includes(itemSearchQuery);
+    });
+
+    // Sort
+    filtered = [...filtered].sort((a, b) => {
+      if (currentSortOrder === 'odds-desc') return b.compoundProbability - a.compoundProbability;
+      if (currentSortOrder === 'odds-asc') return a.compoundProbability - b.compoundProbability;
+      if (currentSortOrder === 'name') return a.name.localeCompare(b.name);
+      if (currentSortOrder === 'qlvl') {
+        const qA = FAMOUS_ITEMS_META[a.item]?.qlvl || 0;
+        const qB = FAMOUS_ITEMS_META[b.item]?.qlvl || 0;
+        return qB - qA;
+      }
+      if (currentSortOrder === 'quality') {
+        const catA = classifyItemCategory(a.item);
+        const catB = classifyItemCategory(b.item);
+        return catA.localeCompare(catB);
+      }
+      return 0;
+    });
+
+    if (filtered.length === 0) {
+      exactContainer.innerHTML = `<div style="text-align: center; color: var(--text-dim); padding: 40px;">没有符合条件的物品</div>`;
+      return;
+    }
+
+    const cardsHtml = filtered.slice(0, 250).map((l, index) => {
+      const meta = FAMOUS_ITEMS_META[l.item];
+      const cat = classifyItemCategory(l.item);
+      const pct = (l.compoundProbability * 100).toFixed(4);
+      const odds = l.oneInOdds < 1000000 ? l.oneInOdds.toFixed(1) : Math.round(l.oneInOdds).toLocaleString();
+      const barWidth = Math.max(2, Math.min(100, (l.compoundProbability / maxProb) * 100));
+
+      let qualityTagClass = 'tag-base';
+      let qualityTagName = '装备底模';
+      let qualityColor = '#e8dcc8';
+
+      if (l.isRune) {
+        qualityTagClass = 'tag-rune';
+        qualityTagName = '符文';
+        qualityColor = '#ff8000';
+      } else if (l.isGold) {
+        qualityTagClass = 'tag-gold';
+        qualityTagName = '金币';
+        qualityColor = '#ffd700';
+      } else if (cat === 'charm_gem') {
+        qualityTagClass = 'tag-gem';
+        qualityTagName = '护身符/珠宝';
+        qualityColor = '#d880ff';
+      } else if (cat === 'misc') {
+        qualityTagClass = 'tag-misc';
+        qualityTagName = '杂项/材料';
+        qualityColor = '#ffd700';
+      } else if (meta?.famousTitle) {
+        qualityTagClass = 'tag-unique';
+        qualityTagName = '暗金底模';
+        qualityColor = '#c8a15a';
+      }
+
+      return `
+        <div class="maxroll-item-card ${qualityTagClass}">
+          <div class="card-left">
+            <span class="card-rank">#${index + 1}</span>
+            <span class="card-quality-tag ${qualityTagClass}">${qualityTagName}</span>
+            <div class="card-title-group">
+              <div class="card-main-title" style="color: ${qualityColor};">
+                ${meta?.famousTitle || l.name}
+              </div>
+              <div class="card-sub-meta">
+                <span class="item-code-badge">${l.item}</span>
+                <span>${meta?.itemTypeCn || (l.isRune ? '符文' : '物品底模')}</span>
+                ${meta?.qlvl ? `<span>· qlvl ${meta.qlvl}</span>` : ''}
+              </div>
+            </div>
+          </div>
+
+          <div class="card-center">
+            <div class="odds-bar-track">
+              <div class="odds-bar-fill ${qualityTagClass}" style="width: ${barWidth}%;"></div>
+            </div>
+            <div class="odds-bar-labels">
+              <span class="odds-pct">${pct}%</span>
+              <span class="odds-expected">单次: ${(l.singleProbability * 100).toFixed(4)}%</span>
+            </div>
+          </div>
+
+          <div class="card-right">
+            <div class="odds-ratio-pill ${qualityTagClass}">1 : ${odds}</div>
+            <div class="runs-estimate">平均 ~${odds} 轮 / 件</div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    exactContainer.innerHTML = cardsHtml;
+  }
+
+  function renderSimDropCards() {
+    if (!simContainer) return;
+    if (!currentSimResult || latestSummaries.length === 0) {
+      simContainer.innerHTML = `<div style="text-align: center; color: var(--text-dim); padding: 40px;">暂无模拟结果，请点击左侧「开始模拟」运行 Monte Carlo 抽样</div>`;
+      return;
+    }
+
+    const totalRuns = currentSimResult.totalRuns;
+    const maxCount = Math.max(...latestSummaries.map(s => s.count), 1);
+
+    // Filter
+    let filtered = latestSummaries.filter(s => {
+      const cat = classifyItemCategory(s.code, s.quality);
+      if (activeItemCategory !== 'all' && cat !== activeItemCategory) return false;
+      if (!itemSearchQuery) return true;
+      const meta = FAMOUS_ITEMS_META[s.code];
+      const matchText = `${s.code} ${s.name} ${meta?.famousTitle || ''} ${s.quality}`.toLowerCase();
+      return matchText.includes(itemSearchQuery);
+    });
+
+    if (filtered.length === 0) {
+      simContainer.innerHTML = `<div style="text-align: center; color: var(--text-dim); padding: 40px;">没有符合条件的模拟物品</div>`;
+      return;
+    }
+
+    const cardsHtml = filtered.slice(0, 250).map((s, index) => {
+      const meta = FAMOUS_ITEMS_META[s.code];
+      const barWidth = Math.max(2, Math.min(100, (s.count / maxCount) * 100));
+      const pct = s.percentage.toFixed(4);
+      const expectedOdds = s.count > 0 ? (totalRuns / s.count).toFixed(1) : '∞';
+
+      let qualityTagClass = 'tag-base';
+      let qualityColor = '#e8dcc8';
+
+      if (s.quality === 'unique') {
+        qualityTagClass = 'tag-unique';
+        qualityColor = '#c8a15a';
+      } else if (s.quality === 'set') {
+        qualityTagClass = 'tag-set';
+        qualityColor = '#00ff00';
+      } else if (s.quality === 'rare') {
+        qualityTagClass = 'tag-rare';
+        qualityColor = '#ffff60';
+      } else if (s.quality === 'magic') {
+        qualityTagClass = 'tag-magic';
+        qualityColor = '#4880ff';
+      } else if (s.quality === 'rune') {
+        qualityTagClass = 'tag-rune';
+        qualityColor = '#ff8000';
+      } else if (s.quality === 'gold') {
+        qualityTagClass = 'tag-gold';
+        qualityColor = '#ffd700';
+      }
+
+      return `
+        <div class="maxroll-item-card ${qualityTagClass}">
+          <div class="card-left">
+            <span class="card-rank">#${index + 1}</span>
+            <span class="card-quality-tag ${qualityTagClass}">${s.quality.toUpperCase()}</span>
+            <div class="card-title-group">
+              <div class="card-main-title" style="color: ${qualityColor};">
+                ${meta?.famousTitle || s.name}
+              </div>
+              <div class="card-sub-meta">
+                <span class="item-code-badge">${s.code}</span>
+                <span>${meta?.itemTypeCn || '掉落物'}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="card-center">
+            <div class="odds-bar-track">
+              <div class="odds-bar-fill ${qualityTagClass}" style="width: ${barWidth}%;"></div>
+            </div>
+            <div class="odds-bar-labels">
+              <span class="odds-pct">${pct}% / 轮</span>
+              <span class="odds-expected">实测掉落: ${s.count.toLocaleString()} 件</span>
+            </div>
+          </div>
+
+          <div class="card-right">
+            <div class="odds-ratio-pill ${qualityTagClass}">实测 1 : ${expectedOdds}</div>
+            <div class="runs-estimate">${s.count.toLocaleString()} 件 / ${totalRuns.toLocaleString()} 轮</div>
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    simContainer.innerHTML = cardsHtml;
+  }
+
+  // --- Simulation Execution --------------------------------------------------
 
   btnStart?.addEventListener('click', async () => {
     if (isSimRunning) return;
@@ -962,7 +1893,7 @@ export function initLootUi(): void {
     const g = parseInt(gamePlayersInput?.value || '1', 10) || 1;
     const p = parseInt(partyPlayersInput?.value || '1', 10) || 1;
     const mf = parseInt(mfInput?.value || '0', 10) || 0;
-    const diff = (difficultySelect?.value as any) || 'hell';
+    const diff = currentDifficulty;
     const seedVal = seedInput?.value.trim() ? parseInt(seedInput.value, 10) : undefined;
 
     isSimRunning = true;
@@ -976,6 +1907,11 @@ export function initLootUi(): void {
     }
     if (btnStop) btnStop.disabled = false;
 
+    // Switch to simulation view automatically
+    viewTabButtons.forEach(b => b.classList.toggle('active', b.getAttribute('data-view') === 'sim'));
+    viewPanes.forEach(pane => pane.classList.toggle('active', pane.id === 'view-sim'));
+    activeViewTab = 'sim';
+
     try {
       const result = await runMonteCarloSimulation(
         {
@@ -1002,7 +1938,9 @@ export function initLootUi(): void {
         },
       );
 
+      currentSimResult = result;
       latestSummaries = [...result.itemSummaries];
+      updateCategoryCounts();
       renderFinalResults(result);
     } catch (err: any) {
       if (err.message === 'Simulation aborted') {
@@ -1036,27 +1974,16 @@ export function initLootUi(): void {
     abortRequested = true;
   });
 
-  itemsFilter?.addEventListener('input', () => {
-    renderFilteredItems(itemsFilter.value.trim().toLowerCase());
+  btnCalcExact?.addEventListener('click', () => {
+    updateExactTable();
   });
 
   function renderProgress(p: SimulationProgress) {
     const pct = ((p.completedRuns / p.totalRuns) * 100).toFixed(1);
     if (progressBar) progressBar.style.width = `${pct}%`;
     if (progressText) {
-      progressText.textContent = `已完成: ${p.completedRuns.toLocaleString()} / ${p.totalRuns.toLocaleString()} (${pct}%)`;
+      progressText.textContent = `模拟进度: ${p.completedRuns.toLocaleString()} / ${p.totalRuns.toLocaleString()} (${pct}%) · 掉落 ${p.itemsDropped.toLocaleString()} 件`;
     }
-
-    if (statTotalRuns) statTotalRuns.textContent = p.completedRuns.toLocaleString();
-    if (statTotalDrops) statTotalDrops.textContent = p.itemsDropped.toLocaleString();
-    if (statAvgDrops) {
-      statAvgDrops.textContent = p.completedRuns > 0 ? (p.itemsDropped / p.completedRuns).toFixed(2) : '0.00';
-    }
-    if (statNoDropRuns) {
-      const noDropPct = p.completedRuns > 0 ? ((p.qualityCounts.noDrop / p.completedRuns) * 100).toFixed(2) : '0.00';
-      statNoDropRuns.textContent = `${p.qualityCounts.noDrop.toLocaleString()} (${noDropPct}%)`;
-    }
-
     renderQualityTable(p.qualityCounts, p.completedRuns, p.itemsDropped);
   }
 
@@ -1069,19 +1996,18 @@ export function initLootUi(): void {
       isFinished: true,
       isPaused: false,
     });
-    renderFilteredItems(itemsFilter?.value.trim().toLowerCase() || '');
+    renderSimDropCards();
   }
 
   function renderQualityTable(q: QualityCounts, runs: number, totalDrops: number) {
     if (!qualityTbody) return;
     const items = [
-      { name: 'Normal (普通)', count: q.normal, color: '#c8c8c8' },
-      { name: 'Superior (超强)', count: q.superior, color: '#e8e8e8' },
-      { name: 'Magic (魔法)', count: q.magic, color: '#4880ff' },
-      { name: 'Rare (稀有)', count: q.rare, color: '#ffff60' },
-      { name: 'Set (套装)', count: q.set, color: '#00ff00' },
       { name: 'Unique (暗金)', count: q.unique, color: '#c8a15a' },
+      { name: 'Set (套装)', count: q.set, color: '#00ff00' },
+      { name: 'Rare (稀有)', count: q.rare, color: '#ffff60' },
+      { name: 'Magic (魔法)', count: q.magic, color: '#4880ff' },
       { name: 'Rune (符文)', count: q.rune, color: '#ff8000' },
+      { name: 'Normal / Sup (底模)', count: q.normal + q.superior, color: '#e8e8e8' },
       { name: 'Gold (金币)', count: q.gold, color: '#ffd700' },
       { name: 'NoDrop (空掉落轮数)', count: q.noDrop, color: '#666666' },
     ];
@@ -1106,40 +2032,66 @@ export function initLootUi(): void {
     qualityTbody.innerHTML = rows.join('');
   }
 
-  function renderFilteredItems(filter: string) {
-    if (!itemsTbody) return;
-    const filtered = latestSummaries.filter(s => {
-      if (!filter) return true;
-      return s.code.toLowerCase().includes(filter) || s.name.toLowerCase().includes(filter) || s.quality.toLowerCase().includes(filter);
-    });
+  // --- Reverse Lookup --------------------------------------------------------
 
-    if (filtered.length === 0) {
-      itemsTbody.innerHTML = `<tr><td colspan="5" style="text-align: center; color: var(--text-dim); padding: 16px;">无匹配的掉落物记录</td></tr>`;
-      return;
+  let reverseIndex: Map<string, ReverseLookupEntry[]> | undefined;
+  function getReverseIndex(): Map<string, ReverseLookupEntry[]> {
+    if (!reverseIndex) {
+      reverseIndex = buildReverseLookupIndex(tcTable, autoTcs);
     }
-
-    const rows = filtered.slice(0, 200).map(it => {
-      let color = '#c8c8c8';
-      if (it.quality === 'magic') color = '#4880ff';
-      else if (it.quality === 'rare') color = '#ffff60';
-      else if (it.quality === 'set') color = '#00ff00';
-      else if (it.quality === 'unique') color = '#c8a15a';
-      else if (it.quality === 'rune') color = '#ff8000';
-      else if (it.quality === 'gold') color = '#ffd700';
-
-      return `
-        <tr>
-          <td style="color: ${color}; font-weight: bold;">${it.code}</td>
-          <td style="color: ${color};">${it.name}</td>
-          <td style="color: ${color}; text-transform: capitalize;">${it.quality}</td>
-          <td style="font-variant-numeric: tabular-nums;">${it.count.toLocaleString()}</td>
-          <td style="font-variant-numeric: tabular-nums;">${it.percentage.toFixed(3)}%</td>
-        </tr>
-      `;
-    });
-
-    itemsTbody.innerHTML = rows.join('');
+    return reverseIndex;
   }
 
+  reverseInput?.addEventListener('input', () => {
+    const query = reverseInput.value.trim();
+    if (!query) {
+      if (reverseTbody) reverseTbody.innerHTML = '';
+      if (reverseMatchCount) reverseMatchCount.textContent = '0 项匹配';
+      return;
+    }
+    const results = reverseLookup(getReverseIndex(), query);
+    renderReverseLookupResults(results);
+  });
+
+  function renderReverseLookupResults(results: ReverseLookupResult[]) {
+    if (!reverseTbody) return;
+    let totalMatches = 0;
+    const allMatches: { res: ReverseLookupResult; entry: ReverseLookupEntry }[] = [];
+    for (const res of results) {
+      for (const entry of res.entries) {
+        allMatches.push({ res, entry });
+      }
+    }
+    allMatches.sort((a, b) => b.entry.compoundProbability - a.entry.compoundProbability);
+
+    const rows: string[] = [];
+    for (const m of allMatches) {
+      totalMatches++;
+      const res = m.res;
+      const entry = m.entry;
+      const pct = (entry.compoundProbability * 100).toFixed(4) + '%';
+      const odds = entry.oneInOdds < 1000000 ? '1 in ' + entry.oneInOdds.toFixed(1) : '1 in ' + Math.round(entry.oneInOdds).toLocaleString();
+      rows.push(`
+        <tr>
+          <td style="color: var(--gold-primary); font-weight: bold;">${entry.tcName}</td>
+          <td>${res.matchedCode} (${res.matchedName})</td>
+          <td>${entry.picks}</td>
+          <td>${(entry.singleProbability * 100).toFixed(4)}%</td>
+          <td style="color: #a5d6a7; font-weight: bold;">${pct}</td>
+          <td style="color: var(--gold-light); font-variant-numeric: tabular-nums;">${odds}</td>
+        </tr>
+      `);
+    }
+
+    reverseTbody.innerHTML = rows.slice(0, 200).join('');
+    if (reverseMatchCount) {
+      reverseMatchCount.textContent = `找到 ${totalMatches} 条掉落记录${totalMatches > 200 ? ' (展示前 200 条)' : ''}`;
+    }
+  }
+
+  // Initial render
+  renderMonsterList();
+  updateMonsterSpecCard();
   updateExactTable();
 }
+
