/* ext.css — giao diện của các phần thêm từ khảo sát bản offline (js/ext_*.js). Dùng biến màu của ui2.css. */

/* ô Shift (dash) trên khay phím */
.slot.dash { background: #2f3a52; }
.slot.dash .icon { font-size: 26px; }
.slot.dash .key { font-size: 12px; }

/* túi đồ: mũi tên so sánh, khoá, thanh công cụ */
.cell .cmp { position: absolute; left: 3px; bottom: 0; z-index: 2; font-size: 12px; font-weight: 900; line-height: 1; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
.cell .cmp.up { color: #6aff8a; } .cell .cmp.down { color: #ff7a6a; }
.cell .lk { position: absolute; left: 2px; top: 12px; z-index: 2; font-size: 10px; line-height: 1; }
.win .cell.locked { box-shadow: inset 0 0 0 2px #ffcf5a; }
.bag-tools { display: flex; gap: 6px; margin: 0 0 8px; }
.bag-tools input { flex: 1; min-width: 0; padding: 3px 8px; font: inherit; font-size: 12px; color: var(--ink, #2a2435); background: #fffaf0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.bag-tools select { padding: 3px 4px; font: inherit; font-size: 12px; color: var(--ink, #2a2435); background: #fff8e8; border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.bag-none { grid-column: 1 / -1; padding: 14px 0; text-align: center; font-size: 12px; color: var(--ink-soft, #6a5a48); }
#tooltip .cmp-box { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #6a5a78; }
#tooltip .cmp-up { color: #7aff9a; } #tooltip .cmp-down { color: #ff8a7a; }
#tooltip .cmp-rows { margin-top: 2px; font-size: 11px; line-height: 1.35; }

/* tự động đánh: lọc loài quái, báo cáo */
.mi { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; vertical-align: middle; }
.mi i { display: block; image-rendering: pixelated; }
.mi b { font-size: 18px; opacity: .6; }
.af-sec { margin-top: 10px; padding-top: 6px; border-top: 2px solid var(--ink, #2a2435); }
.af-sec h4 { margin: 4px 0 6px; font-size: 13px; } .af-sec h4 small { margin-left: 6px; font-weight: 400; color: var(--ink-soft, #6a5a48); }
.af-sp { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.af-tile { position: relative; width: 74px; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; gap: 1px; background: #e8dcc0; opacity: .5; filter: grayscale(.7); }
.af-tile.on { opacity: 1; filter: none; background: #fff8e8; box-shadow: inset 0 0 0 2px #6ad08a, 0 2px 0 var(--ink, #2a2435) !important; }
.af-tile small { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.af-tile em { font-style: normal; font-size: 9px; color: var(--ink-soft, #6a5a48); }
.af-ctl { display: flex; gap: 6px; margin: 6px 0; }
.win-report { width: 520px; left: calc(50% - 260px); }
.rp-head { margin: 0 0 8px; font-size: 13px; }
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.rp-grid > div { padding: 6px 4px; text-align: center; background: var(--cream-2, #ecdfc2); border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.rp-grid b { display: block; font-size: 18px; color: #a8620c; } .rp-grid small { font-size: 10px; color: var(--ink-soft, #6a5a48); }
.rp h4 { margin: 8px 0 4px; font-size: 12px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 2px; background: var(--cell, #3a3046); border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.rp-chip b { font-size: 11px; color: #fff; }
.rp-kills { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-kills span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; background: var(--cream-2, #ecdfc2); border: 2px solid var(--ink, #2a2435); border-radius: 8px; font-size: 11px; }
.rp-kills small { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sổ (B): sưu tập, sổ quái, quái & vật rơi */
.win-book { width: 720px; left: calc(50% - 360px); }
.bk-sum small { color: var(--ink-soft, #6a5a48); font-size: 11px; }
.bk-bar { position: relative; height: 18px; margin-bottom: 3px; overflow: hidden; background: #d8ccb0; border: 2px solid var(--ink, #2a2435); border-radius: 6px; }
.bk-bar div { height: 100%; background: linear-gradient(#ffe48a 0 40%, #f0b030 40%); }
.bk-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.bk-ms-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.bk-ms { padding: 1px 6px; font-size: 10px; background: #ecdfc2; border: 2px solid var(--ink, #2a2435); border-radius: 8px; opacity: .7; }
.bk-ms.on { opacity: 1; background: #d8f0c0; } .bk-ms b { color: #1a7a3a; }
.bk-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin: 4px 0 6px; }
.bk-tools .tabs { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.bk-tools input, .bk-tools select { padding: 3px 8px; font: inherit; font-size: 12px; color: var(--ink, #2a2435); background: #fffaf0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.bk-tools input { width: 190px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; max-height: 300px; overflow-y: auto; padding: 2px; }
.bk-card { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--cell, #3a3046); border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.bk-card:not(.on) b { font-size: 16px; color: #7a6a88; }
.bk-card i { position: absolute; left: 0; right: 0; bottom: -1px; text-align: center; font-style: normal; font-size: 8px; line-height: 1; color: #ffd35a; text-shadow: 0 1px 0 #000; }
.bk-card span { position: absolute; right: 2px; top: 0; font-size: 9px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000; }
.bk-card.r-rare { box-shadow: inset 0 0 0 2px #4a8ae8; } .bk-card.r-epic { box-shadow: inset 0 0 0 2px #9a6af0; } .bk-card.r-legend { box-shadow: inset 0 0 0 2px #ffb04a, inset 0 0 10px rgba(255, 170, 60, .4); }
.bk-none { grid-column: 1 / -1; padding: 14px 0; text-align: center; font-size: 12px; color: var(--ink-soft, #6a5a48); }
.bk-cols { display: flex; gap: 10px; }
.bk-mons { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; align-content: start; max-height: 400px; overflow-y: auto; padding: 2px; }
.bk-mon { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; background: #fff8e8; }
.bk-mon.unk { background: #d8ccb0; opacity: .75; } .bk-mon.on { box-shadow: inset 0 0 0 2px #4a8ae8, 0 2px 0 var(--ink, #2a2435) !important; }
.bk-mon small { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; } .bk-mon em { font-style: normal; font-size: 9px; color: var(--ink-soft, #6a5a48); }
.bk-detail { flex: 0 0 250px; max-height: 400px; overflow-y: auto; padding: 8px; font-size: 12px; background: var(--cream-2, #ecdfc2); border: 2px solid var(--ink, #2a2435); border-radius: 10px; }
.bk-detail h4 { margin: 8px 0 4px; font-size: 12px; } .bk-detail p { margin: 4px 0; }
.bk-d-head { display: flex; align-items: center; gap: 8px; }
.bk-m { display: inline-block; margin-left: 3px; padding: 0 5px; font-size: 10px; background: #d8ccb0; border: 2px solid var(--ink, #2a2435); border-radius: 7px; opacity: .6; } .bk-m.on { opacity: 1; background: #ffe48a; }
.bk-drops { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-drop { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 2px 8px; background: var(--cell, #3a3046); border: 2px solid var(--ink, #2a2435); border-radius: 8px; opacity: .55; }
.bk-drop.got { opacity: 1; box-shadow: inset 0 0 0 2px #6ad08a; }
.bk-drop b { color: #7a6a88; } .bk-drop em { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-style: normal; font-size: 8px; line-height: 9px; font-weight: 700; color: #ffe9a0; text-shadow: 0 1px 0 #000; }
.bk-bonus small { color: var(--ink-soft, #6a5a48); } .bk-title { color: #a8620c; font-weight: 800; }
.bk-maps { display: flex; gap: 3px; max-height: 76px; overflow-y: auto; flex-wrap: wrap; margin-bottom: 6px; }
.bk-maps .tab { padding: 1px 7px; font-size: 11px; }
.bk-mhead { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.bk-rows { max-height: 330px; overflow-y: auto; }
.bk-row { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 8px; margin-bottom: 4px; padding: 4px 6px; background: #fff8e8; border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.bk-row.boss { box-shadow: inset 3px 0 0 #ffb04a; }
.bk-r-l { display: flex; align-items: center; gap: 6px; font-size: 12px; } .bk-r-l small { color: var(--ink-soft, #6a5a48); }
.bk-r-r { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-src { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; font-size: 11px; }
.bk-src small { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* trang bị: hạng màu, dòng tuỳ chọn, lò rèn */
.gem { font-size: 10px; line-height: 1; text-shadow: 0 1px 0 #000; }
.gem.g0 { color: #9a96a4; } .gem.g1 { color: #e8e4dc; } .gem.g2 { color: #6ad08a; } .gem.g3 { color: #5ab0ff; } .gem.g4 { color: #c07aff; } .gem.g5 { color: #ffcf5a; }
.moon { color: #cfe4ff; text-shadow: 0 0 4px #8ab8ff; }
.cell .gem { position: absolute; right: 3px; top: 1px; z-index: 2; font-size: 11px; }
.cell .moon { position: absolute; right: 3px; bottom: 1px; z-index: 2; font-size: 10px; }
.eq .gem { margin-left: 3px; }
#tooltip .gr-tip { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #6a5a78; }
#tooltip .gr-row { font-size: 12px; } #tooltip .gr-row small { color: #9a90a8; }
.win-refine { width: 660px; left: calc(50% - 330px); }
.gr-wrap { display: flex; gap: 10px; }
.gr-list { flex: 0 0 240px; max-height: 420px; overflow-y: auto; }
.gr-item { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; padding: 3px 6px; font-size: 12px; color: #f4ead8; background: var(--cell, #3a3046); border: 2px solid var(--ink, #2a2435); border-radius: 8px; cursor: pointer; }
.gr-item.on { box-shadow: inset 0 0 0 2px #4a8ae8; } .gr-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-item small { color: #c8b898; font-size: 10px; }
.gr-panel { flex: 1; min-width: 0; padding: 8px; font-size: 12px; background: var(--cream-2, #ecdfc2); border: 2px solid var(--ink, #2a2435); border-radius: 10px; }
.gr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gr-rows { margin: 4px 0 8px; padding: 5px 8px; background: #2c2238; border-radius: 8px; line-height: 1.5; } .gr-line { color: #f4ead8; } .gr-line small { color: #9a90a8; }
.gr-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .gr-pick .tab { border-radius: 8px; }
.gr-panel select { padding: 2px 6px; font: inherit; border: 2px solid var(--ink, #2a2435); border-radius: 8px; background: #fff8e8; }
.gr-panel .big { width: 100%; padding: 6px 0; font-size: 14px; margin-top: 4px; }
.gr-track { display: flex; gap: 3px; margin: 4px 0 8px; }
.gr-track i { flex: 1; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 0; border: 2px solid var(--ink, #2a2435); border-radius: 6px; background: #e8dcc0; }
.gr-track i.safe { background: #cfeec0; } .gr-track i.warn { background: #ffe9a0; } .gr-track i.risk { background: #ffb8a8; }
.gr-track i.done { box-shadow: inset 0 0 0 2px #2a8a4a; } .gr-track i.next { outline: 2px solid #4a8ae8; }
.gr-stones { display: flex; gap: 8px; } .gr-stone { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; } .gr-stone b { color: var(--ink, #2a2435); }

/* ngã: màn hình "Hết sức" */
#death.fallen-on { background: radial-gradient(ellipse at center, rgba(18, 28, 70, .35) 0%, rgba(4, 6, 26, .88) 80%); }
#death .box.fallen { min-width: 360px; max-width: 440px; padding: 18px 26px 20px; background: rgba(20, 20, 46, .94); color: #e8eeff; border: 4px solid #0c0c20; border-radius: 18px; box-shadow: inset 0 0 0 3px #4a5aa8, 0 8px 0 rgba(0, 0, 0, .45); }
.fl-title { font-size: 34px; font-weight: 900; letter-spacing: 3px; color: #ffe9a0; text-shadow: 0 3px 0 #0c0c20, 0 0 18px #6a7aff; }
.fl-rib { margin: 6px auto 10px; padding: 3px 14px; display: inline-block; font-size: 13px; color: #fff; background: #3a4a9a; border: 2px solid #0c0c20; border-radius: 12px; }
.fl-card { margin: 6px 0; padding: 6px 10px; font-size: 13px; border-radius: 10px; border: 2px solid #0c0c20; }
.fl-card.ok { background: #1f4a3a; color: #bfffd8; } .fl-card.bad { background: #4a2430; color: #ffd0d0; } .fl-card small { color: #c8c0d8; }
.fl-tip { margin: 8px 0; padding: 6px 8px; font-size: 12px; color: #d8dcf8 !important; background: rgba(255, 255, 255, .07); border-radius: 8px; }
.fl-bar { height: 8px; margin: 8px 0 3px; overflow: hidden; background: #0c0c20; border-radius: 5px; } .fl-bar i { display: block; height: 100%; background: linear-gradient(#ffe48a, #f0b030); }
#death .box.fallen small { color: #aab4e8; }
#death .box.fallen button { margin-top: 8px; }

/* nghề sống (H): chặt gỗ · đào quặng · nấu ăn */
.win-life { width: 600px; left: calc(50% - 300px); }
.lf-head { margin: 6px 0 4px; } .lf-skill { font-size: 15px; } .lf-skill span { margin-left: 6px; padding: 0 8px; font-size: 11px; font-weight: 800; color: #fff; background: #6a5a78; border-radius: 9px; }
.lf-bar { position: relative; height: 18px; margin-top: 3px; overflow: hidden; background: #d8ccb0; border: 2px solid var(--ink, #2a2435); border-radius: 6px; }
.lf-bar div { height: 100%; } .lf-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.lf-tool { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px 8px; font-size: 13px; background: var(--cream-2, #ecdfc2); border: 2px solid var(--ink, #2a2435); border-radius: 10px; }
.lf-tool .lf-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #2c2238; border-radius: 8px; }
.lf-sub { color: var(--ink-soft, #6a5a48); } .lf-tool button { margin-left: auto; }
.win-life h4 { margin: 10px 0 4px; font-size: 13px; } .win-life h4 small { color: var(--ink-soft, #6a5a48); }
.lf-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.lf-perk { padding: 2px 6px; font-size: 12px; background: #ecdfc2; border: 2px solid var(--ink, #2a2435); border-radius: 8px; opacity: .6; } .lf-perk b { margin-right: 4px; }
.lf-perk.on { opacity: 1; background: #d8f0c0; } .lf-perk.on b { color: #1a7a3a; }
.lf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; max-height: 250px; overflow-y: auto; padding-right: 2px; }
.lf-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 70px; padding: 4px 3px; text-align: center; background: #2c2238; color: #f4ead8; border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.lf-card small { margin-top: 2px; font-size: 10px; line-height: 1.15; } .lf-card em { font-size: 9px; font-style: normal; color: #c8b898; }
.lf-card b { font-size: 22px; color: #6a5a78; line-height: 32px; }
.lf-card:not(.on) { background: #3a3046; opacity: .75; }
.lf-card.r-rare { box-shadow: inset 0 0 0 2px #4a8ae8; } .lf-card.r-epic { box-shadow: inset 0 0 0 2px #b060e8; } .lf-card.r-legend { box-shadow: inset 0 0 0 2px #ffb040; }
.lf-up { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; padding: 6px 8px; font-size: 12px; background: #f6ecd0; border: 2px dashed var(--ink, #2a2435); border-radius: 10px; }
.lf-up.done { justify-content: center; color: var(--ink-soft, #6a5a48); } .lf-up small { color: var(--ink-soft, #6a5a48); }
.lf-reqs { display: flex; flex-wrap: wrap; gap: 3px 4px; margin: 3px 0; }
.lf-req { padding: 0 6px; font-size: 11px; border: 2px solid var(--ink, #2a2435); border-radius: 8px; } .lf-req.ok { background: #d8f0c0; } .lf-req.no { background: #ffd8c8; }
.lf-up button:disabled { opacity: .5; cursor: not-allowed; }
.win-cook { width: 600px; left: calc(50% - 300px); }
.ck-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.ck-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #2c2238; color: #f4ead8; border: 2px solid var(--ink, #2a2435); border-radius: 10px; }
.ck-row.lock { opacity: .6; } .ck-info { flex: 1; min-width: 0; } .ck-info small { display: block; color: #c8b898; font-size: 11px; }
.ck-info .lf-req { color: var(--ink, #2a2435); } .ck-price { min-width: 64px; text-align: right; font-weight: 800; font-size: 12px; color: #ffe090; }
.ck-btns { display: flex; flex-direction: column; gap: 2px; } .ck-row button:disabled { opacity: .45; cursor: not-allowed; }
.ck-meal { margin: 4px 0; padding: 4px 8px; font-size: 12px; background: #fff3d0; border: 2px dashed var(--ink, #2a2435); border-radius: 8px; }

/* Lò rèn của Bác Moo: đánh bóng (điểm thợ, hạng, công tắc) và kết quả — docs/thiet-ke-trang-bi-che-tao.md */
.gr-panel .bad { color: #c0302a; }
.gr-panel .big:disabled { opacity: .45; cursor: var(--cur-normal); }
.gr-res { margin: 6px 0 0; padding: 4px 8px; border-radius: 8px; font-weight: 700; } .gr-res.ok { background: #d6f2c8; color: #1f6a2c; } .gr-res.bad { background: #ffe1d2; color: #a0301a; }
.gr-warn { margin: 4px 0; padding: 3px 8px; border-radius: 8px; background: #ffe9a0; color: #7a4a00; font-size: 12px; } .gr-warn.ok { background: #d6f2c8; color: #1f6a2c; }
.gr-cost { margin: 4px 0; } .gr-cost small { color: #7a6a58; }
.gr-pity { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; flex-wrap: wrap; }
.gr-pity i { flex: 1; min-width: 80px; height: 8px; border-radius: 5px; background: #d8c9a8; border: 2px solid var(--ink, #2a2435); overflow: hidden; } .gr-pity s { display: block; height: 100%; background: #4a8ae8; } .gr-pity small { flex-basis: 100%; color: #7a6a58; }
.gr-ladder { display: flex; gap: 3px; margin: 2px 0 8px; } .gr-ladder span { flex: 1; text-align: center; font-size: 10px; font-weight: 700; padding: 2px 0; border: 2px solid var(--ink, #2a2435); border-radius: 6px; background: #e8dcc0; color: #7a6a58; }
.gr-ladder span i { display: block; font-style: normal; font-size: 12px; color: var(--c); text-shadow: 0 1px 0 #0006; } .gr-ladder span.done { background: #f2e8cc; } .gr-ladder span.on { background: #fff4c8; box-shadow: inset 0 0 0 2px var(--c); color: var(--ink, #2a2435); }
.gr-tog { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; column-gap: 8px; width: 100%; margin: 3px 0; padding: 4px 8px; text-align: left; font: inherit; color: var(--ink, #2a2435); background: #f4ead0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; cursor: pointer; }
.gr-tog i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink, #2a2435); background: #fff; grid-row: 1 / 3; } .gr-tog.on i { background: #4a8ae8; box-shadow: inset 0 0 0 2px #fff; }
.gr-tog b { font-size: 12px; } .gr-tog small { grid-column: 2; font-size: 10px; color: #7a6a58; } .gr-tog em { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 11px; font-weight: 800; color: #7a6a58; } .gr-tog.on em { color: #1f6a2c; }

/* Cửa hàng của Mira: tab Nấu thuốc (js/ext_brew.js) */
.bw-note { margin: 0 0 6px; padding: 5px 8px; font-size: 12px; color: var(--ink, #2a2435); background: #f4ead0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; }
.bw-row { cursor: var(--cur-normal); align-items: center; } .bw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bw-name { font-weight: 700; }
.bw-row .bw-main small { display: block; margin: 0; color: #c8b898; font-size: 11px; line-height: 1.4; }
.bw-parts { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; } .bw-parts .ico { width: 18px; height: 18px; flex: none; } .bw-parts b { color: #f4ead8; font-size: 11px; margin: 0 4px 0 1px; }
.bw-row i { font-style: normal; font-weight: 700; } .bw-row i.good { color: #8ff08a; } .bw-row i.bad { color: #ff9a9a; }
.bw-btns { display: flex; gap: 4px; flex: none; } .bw-btn { padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink, #2a2435); background: #ffe9a0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; cursor: pointer; } .bw-btn:disabled { opacity: .4; cursor: var(--cur-normal); }

/* Lò rèn: tab Rèn vũ khí (js/ext_forge.js) + bán cho Bác Moo */
.fg-types { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; } .fg-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink, #2a2435); background: #f4ead0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; cursor: pointer; }
.fg-type .ico { width: 22px; height: 22px; } .fg-type.on { background: #ffe9a0; box-shadow: inset 0 0 0 2px #4a8ae8; } .fg-type.all { margin-left: auto; background: #e8dcc0; }
.fg-main { display: flex; gap: 10px; align-items: flex-start; } .fg-list { flex: 0 0 210px; display: flex; flex-direction: column; gap: 4px; }
.fg-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font: inherit; font-size: 12px; text-align: left; color: #f4ead8; background: var(--cell, #3a3046); border: 2px solid var(--ink, #2a2435); border-radius: 8px; cursor: pointer; }
.fg-row.on { box-shadow: inset 0 0 0 2px #4a8ae8; } .fg-row .ico { width: 28px; height: 28px; flex: none; } .fg-row span { flex: 1; min-width: 0; } .fg-row b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fg-row small { color: #c8b898; font-size: 10px; }
.fg-row em { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; } .fg-row em.ok { background: #d6f2c8; color: #1f6a2c; } .fg-row em.no { background: #ffe1d2; color: #a0301a; }
.fg-detail { flex: 1; min-width: 0; padding: 8px; font-size: 12px; background: var(--cream-2, #ecdfc2); border: 2px solid var(--ink, #2a2435); border-radius: 10px; color: var(--ink, #2a2435); }
.fg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .fg-head .ico { width: 44px; height: 44px; } .fg-head div { display: flex; flex-direction: column; } .fg-head small { color: #7a6a58; }
.fg-head small.bad, .fg-detail small.bad { color: #c0302a; }
.fg-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; margin: 4px 0; }
.fg-mat { display: grid; grid-template-columns: 22px 1fr; column-gap: 5px; align-items: center; padding: 3px 5px; border: 2px solid var(--ink, #2a2435); border-radius: 8px; background: #f4ead0; } .fg-mat .ico { width: 22px; height: 22px; grid-row: 1 / 3; }
.fg-mat b { font-size: 11px; line-height: 1.1; } .fg-mat em { font-style: normal; font-size: 11px; font-weight: 800; color: #1f6a2c; } .fg-mat.no { background: #ffe1d2; } .fg-mat.no em { color: #a0301a; } .fg-mat small { grid-column: 1 / 3; font-size: 9px; color: #7a6a58; }
.fg-mat:not(:has(.ico)) { grid-template-columns: 1fr; }
.fg-lock { display: block; margin: 6px 0; } .fg-lock select { padding: 2px 6px; font: inherit; border: 2px solid var(--ink, #2a2435); border-radius: 8px; background: #fff8e8; } .fg-lock small { color: #7a6a58; }
.fg-detail .big { width: 100%; padding: 6px 0; font-size: 14px; margin: 4px 0; } .fg-detail .big:disabled { opacity: .45; cursor: var(--cur-normal); }
.fg-made { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #d6f2c8; color: #1f6a2c; display: flex; flex-direction: column; gap: 3px; } .fg-made small { color: #3a6a2c; }
.fg-sell { margin-top: 8px; } .fg-sell .pri { width: 100%; padding: 5px 0; }
/* vũ khí tăng chiêu (js/ext_wskill.js) */
#tooltip .wsk-tip { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #6a5a78; color: #cdb8ff; font-size: 12px; } #tooltip .wsk-tip b { color: #e6d8ff; }
.wsk-mark { font-style: normal; font-size: 10px; font-weight: 800; color: #5a2ab8; background: #e6d8ff; border: 1px solid #8a5ad8; border-radius: 6px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
/* nội tại bộ (js/ext_setfx.js) */
#tooltip .sf-box { margin-top: 6px; padding: 4px 6px; border-radius: 6px; background: rgba(143,217,168,.1); border: 1px solid rgba(143,217,168,.3); font-size: 12px; color: #c9d6e8; } #tooltip .sf-box b { color: #bfeccb; } #tooltip .sf-box.on { border-color: rgba(143,240,138,.7); } #tooltip .sf-box span { color: #8ff08a; }
.win .sf-box { margin-top: 8px; padding: 5px 8px; border-radius: 8px; background: #ecf6e0; border: 2px solid #8fd9a8; font-size: 12px; color: var(--ink, #2a2435); } .win .sf-box b { color: #1f6a2c; } .win .sf-box div { margin-top: 2px; }
.win .fg-row { background: #3a3046 !important; color: #f4ead8 !important; } .win .fg-row.on { background: #4a3f5e !important; }
.fg-row b, .fg-head b { text-shadow: 1px 0 #2a2435, -1px 0 #2a2435, 0 1px #2a2435, 0 -1px #2a2435; }
.win .fg-type { background: #f4ead0; } .win .fg-type.on { background: #ffe9a0; }

/* Sổ: cổng cấp rơi đồ (js/ext_book.js) */
.bk-drop .bk-lv { display: block; font-size: 9px; font-style: normal; color: #c8b898; line-height: 1; } .bk-drop.gated { opacity: .5; }
/* chạy tới nhiệm vụ (js/ext_questgo.js) */
.qgo-btn { margin-left: 6px; padding: 1px 8px; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink, #2a2435); background: #ffe9a0; border: 2px solid var(--ink, #2a2435); border-radius: 8px; cursor: pointer; } .qgo-btn:hover { background: #fff4c8; }
#quest-track { cursor: pointer; }
/* thanh Nhiệt của Hoả Pháp Sư (js/ext_heat.js) */
#h-heatbar { background: #2a1408; }
#h-heat { background: linear-gradient(#ffc060, #ff5a1a); transition: width .12s; }
#h-heatbar .hv80 { position: absolute; left: 80%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .5); z-index: 1; }
#h-heatbar.hot { animation: hpLow .65s infinite alternate; }
/* nút ‹ › chuyển chiêu trong khung xem trước kỹ năng (js/ext_previewscene.js) */
.win-skpv .win-head .pvnav { flex: none; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; font: 900 20px/1 var(--f-head); color: var(--ink);
  background: #ffe58a; border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .45), var(--lift); }
.win-skpv .win-head .pvnav:hover { background: #fff0b0; transform: translateY(-1px); }
.pv-keys kbd { padding: 0 5px; border-radius: 5px; }