:root {
  color-scheme: dark;
  --bg: #121923;
  --panel: #1a2430;
  --line: #354657;
  --text: #d9e1ea;
  --muted: #9eacb8;
  --accent: #8bc7b0;
  --gold: #d9c58f;
}* { box-sizing:border-box; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: radial-gradient(circle at 20% -15%, #26384b 0, transparent 35%), var(--bg);
  font: 16px/1.55 Inter, system-ui, sans-serif;
}

main {
  max-width: 1250px;
  margin: auto;
  padding: 48px 34px;
}header { max-width:740px; margin-bottom:42px; } .eyebrow { color:var(--accent); font-size:.75rem; letter-spacing:.11em; font-weight:700; } h1 { font:700 clamp(2.2rem,5vw,3.7rem)/1.05 Georgia,serif; margin:8px 0 20px; color:#e8e1d2; } header p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; margin:0; }
.workspace { display:grid; grid-template-columns:1.45fr .95fr; gap:24px; align-items:start; } .panel { border:1px solid var(--line); border-radius:16px; background:rgba(26,36,48,.94); box-shadow:0 12px 32px #0002; } .search-panel { padding:29px 30px; } label { display:block; color:var(--muted); font-weight:700; margin:0 0 7px; } input,select { width:100%; color:var(--text); background:#0c1410; border:1px solid #32493a; border-radius:11px; font:inherit; padding:13px 15px; margin:0 0 18px; outline:0; } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #72ddad2b; } .result-note { color:#778b7e; margin:2px 0 18px; font-size:.92rem; }
table { width:100%; border-collapse:collapse; } th { text-align:left; font-size:.75rem; letter-spacing:.07em; color:#799589; padding:10px 13px; border-bottom:1px solid var(--line); } td { padding:13px; border-bottom:1px solid #26382d; vertical-align:top; } tbody tr { cursor:pointer; } tbody tr:hover {
    background: #223442;
}

tbody tr.selected {
    background: #2d4b5a;
    box-shadow: inset 4px 0 0 #8bc7b0;
}

tbody tr.selected td {
    border-bottom-color: #527485;
}
} button { font:inherit; cursor:pointer; } .id-button,.name-button { border:0; background:transparent; padding:0; text-align:left; } .binding { display:inline-block; margin-left:7px; padding:1px 6px; border-radius:5px; font-size:.72rem; font-weight:800; vertical-align:middle; } .binding.bound { color:#ffd58b; background:#5a42201f; border:1px solid #74562b; } .binding.unbound { color:#9be8c2; background:#1c4c3624; border:1px solid #387054; }
.id-button { color:var(--accent); font-family:ui-monospace,monospace; font-weight:700; } .name-button { color:#fff5d7; font-weight:700; } small { display:block; color:#89998c; margin-top:3px; } .pill { display:inline-block; padding:3px 8px; border:1px solid #31493a; border-radius:7px; color:#b8c9b7; font-size:.78rem; white-space:nowrap; } .empty { color:var(--muted); text-align:center; padding:30px; }
.details { position:sticky; top:22px; min-height:154px; padding:30px; color:var(--muted); } .details h2 { color:#fff5d7; font:700 1.65rem/1.2 Georgia,serif; margin:14px 0 24px; } .details h3 { color:var(--gold); font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; margin-top:28px; } dl { display:grid; grid-template-columns:120px 1fr; gap:9px; margin:0; } dt { color:#84968a; } dd { margin:0; color:#dae5d3; } .copy-id { color:var(--accent); background:0; border:0; padding:0; font-family:ui-monospace,monospace; font-weight:bold; } .command { width:100%; margin-top:24px; padding:11px; border:1px solid #509574; border-radius:9px; background:#183e2c; color:#a9f1cd; font-weight:700; } .description { white-space:normal; color:#b4c3b4; }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; background:#dff7df; color:#163523; border-radius:10px; padding:9px 16px; transition:.2s; font-weight:700; pointer-events:none; } .toast.show { opacity:1; transform:translate(-50%,0); } @media(max-width:850px) { main { padding:30px 16px; } .workspace { grid-template-columns:1fr; } .details { position:static; } .search-panel { padding:20px 15px; } th,td { padding:11px 8px; } }

.item-name { display:flex; align-items:center; gap:11px; } .item-icon,.detail-icon { width:44px; height:44px; flex:0 0 44px; border:1px solid #6a592e; border-radius:5px; background-color:#0a0e0b; background-size:500% 500%; background-repeat:no-repeat; image-rendering:auto; } .detail-icon { width:58px; height:58px; vertical-align:middle; margin-right:12px; }


/* Font Windows cho ti?ng Vi?t: tr?nh l?i kerning c?a Georgia trong WebView. */
body, input, select, button { font-family: "Segoe UI", Arial, sans-serif; }
.details h2 { font-family: "Segoe UI", Arial, sans-serif; letter-spacing: normal; word-spacing: normal; font-weight: 700; }

/* Trạng thái có ô riêng như danh mục. */
td .binding { margin-left: 0; }

/* Khung danh sách cuộn độc lập: bộ lọc và bố cục chính luôn đứng yên. */
html, body { height: 100%; overflow: hidden; }
main { height: 100vh; max-width: 1250px; padding: 30px 34px; display: flex; flex-direction: column; }
header { flex: 0 0 auto; margin-bottom: 20px; }
.workspace { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.search-panel { min-height: 0; display: flex; flex-direction: column; }
.table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
thead th { position: sticky; top: 0; z-index: 1; background: #152019; }
.details { position: static; min-height: 0; overflow: auto; }
@media(max-width:850px) {
  html, body { height: auto; overflow: auto; }
  main { height: auto; min-height: 100vh; display: block; padding: 30px 16px; }
  .workspace { display: grid; }
  .search-panel { display: block; }
  .table-wrap { max-height: 58vh; }
  .details { overflow: visible; }
}

body.locked main, body.locked .toast { display:none !important; }
.login-screen { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 35% 0,#213e2d 0,transparent 42%),var(--bg); }
.login-card { width:min(100%,430px); padding:34px; border:1px solid var(--line); border-radius:18px; background:rgba(21,32,25,.97); box-shadow:0 24px 60px #0008; }
.login-card h1 { font-size:2.05rem; margin:8px 0 12px; }
.login-card > p:not(.eyebrow):not(.login-error) { color:var(--muted); margin:0 0 24px; }
.login-card input { margin-bottom:16px; }
.login-error { min-height:24px; margin:0 0 10px; color:#ffad9a; font-size:.92rem; }
.login-button { width:100%; padding:13px 16px; color:#0c1911; background:var(--accent); border:0; border-radius:10px; font-weight:800; }
.login-button:disabled { opacity:.7; cursor:wait; }

.module-nav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.module-button{border:1px solid #335a43;background:#102117;color:#d8eddc;border-radius:10px;padding:10px 13px;font:inherit;font-weight:700;cursor:pointer}.module-button:hover,.module-button.active{background:#2d4b5a;border-color:#6ae0ae;color:#fff1d1}.module-button.active{box-shadow:0 0 0 4px #6ae0ae55}
.pet-filters,.gem-filters,.item-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:14px}.pet-filters label,.gem-filters label,.item-filters label{margin:0}@media(max-width:640px){.pet-filters,.gem-filters,.item-filters{grid-template-columns:1fr}}
[hidden]{display:none!important}
.map-filters{display:grid;grid-template-columns:auto 120px auto 120px;align-items:center;gap:10px 12px;margin-top:14px}.map-filters label{margin:0}@media(max-width:640px){.map-filters{grid-template-columns:1fr 1fr}.map-filters label{grid-column:span 1}}.map-selected{margin-top:14px;padding:12px 14px;border:1px solid #315a42;border-radius:10px;background:#102117;display:flex;align-items:center;justify-content:space-between;gap:16px}.map-selected strong{display:block;color:#fff1d1}.map-selected small{display:block;color:#a7b7a6;margin-top:3px}.map-mode{grid-template-columns:minmax(0,1fr)}.map-mode #details{display:none}.map-selected>div{min-width:0;flex:1}.map-selected strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.map-selected .command{width:auto;flex:0 0 auto;margin:0;padding:8px 14px;font-size:.86rem;white-space:nowrap}.gm-panel{padding:26px;margin-top:4px}.gm-heading h2{margin:0;color:#fff5d7;font:700 1.7rem/1.2 Georgia,serif}.gm-heading p{color:#a7b7a6}.gm-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:22px;margin-top:22px}.gm-menu{display:flex;flex-direction:column;gap:8px}.gm-tab{border:1px solid #315a42;background:#102117;color:#d8eddc;text-align:left;border-radius:9px;padding:11px 13px;font:inherit;font-weight:700;cursor:pointer}.gm-tab.active,.gm-tab:hover{background:#2d4b5a;border-color:#6ae0ae;color:#fff1d1}.gm-form{border-left:1px solid #294533;padding-left:22px}.gm-section label{display:block;margin:0 0 8px;color:#c8d6c5;font-weight:700}.gm-section input,.gm-section select,.gm-section textarea{width:100%;max-width:520px}.gm-section textarea{resize:vertical;background:#0a100c;color:#fff1d1;border:1px solid #315a42;border-radius:9px;padding:11px;font:inherit}.gm-section small{display:block;color:#92a791;margin-top:6px}.gm-output{margin-top:24px;max-width:720px}.gm-output code{display:block;overflow:auto;background:#09120d;border:1px solid #315a42;border-radius:9px;padding:13px;color:#a9f1cd;font:600 1rem ui-monospace,Consolas,monospace}.gm-output .command{width:auto;margin-top:12px;padding:10px 16px}@media(max-width:750px){.gm-layout{grid-template-columns:1fr}.gm-menu{flex-direction:row;flex-wrap:wrap}.gm-tab{flex:1 1 180px}.gm-form{border-left:0;border-top:1px solid #294533;padding:20px 0 0}}
.gm-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px}.gm-two-cols input{max-width:none}@media(max-width:640px){.gm-two-cols{grid-template-columns:1fr}}

/* PC WebView: giữ bố cục giống bản web dù DPI làm viewport CSS bị hẹp. */
body.desktop-app main { height:100vh; max-width:1250px; padding:30px 34px; display:flex; flex-direction:column; }
body.desktop-app .workspace { display:grid; grid-template-columns:1.45fr .95fr; gap:24px; flex:1 1 auto; min-height:0; align-items:stretch; }
body.desktop-app .search-panel { min-height:0; display:flex; flex-direction:column; }
body.desktop-app .table-wrap { flex:1 1 auto; min-height:0; overflow:auto; }button {
    background-color: #2d4b5a !important;
    border-color: #527485 !important;
    color: #e7f2f5 !important;
}

button:hover,
button.active {
    background-color: #3b6576 !important;
    border-color: #8bc7b0 !important;
}
body.desktop-app .details { position:static; min-height:0; overflow:auto; }
body.desktop-app .module-nav { flex-wrap:nowrap; }
.id-button,
.name-button {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
}

.id-button:hover,
.name-button:hover {
    background: transparent !important;
    border-color: transparent !important;
}button {
    background-color: #2d4b5a !important;
    border-color: #527485 !important;
    color: #e7f2f5 !important;
}

button:hover,
button.active {
    background-color: #3b6576 !important;
    border-color: #8bc7b0 !important;
}
.remember-login{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--muted);font-weight:400;cursor:pointer}.remember-login input{width:auto;margin:0;padding:0;accent-color:var(--accent)}
/* Bố cục tra cứu gọn hơn: ưu tiên vùng danh sách kết quả. */
.search-panel { padding: 22px 24px; }
.search-panel > label { margin-bottom: 5px; }
.search-panel > input,
.search-panel > select { padding: 10px 12px; margin-bottom: 11px; }
.search-panel .item-filters,
.search-panel .gem-filters,
.search-panel .pet-filters { grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.search-panel .item-filters label,
.search-panel .gem-filters label,
.search-panel .pet-filters label { margin: 0; }
.search-panel .item-filters select,
.search-panel .gem-filters select,
.search-panel .pet-filters select { margin: 0; padding: 10px 12px; }
.search-panel .result-note { margin: 7px 0 10px; }
.search-panel .table-wrap { min-height: 0; }

@media (max-width: 640px) {
  .search-panel { padding: 18px 16px; }
  .search-panel .item-filters,
  .search-panel .gem-filters,
  .search-panel .pet-filters { grid-template-columns: 1fr; gap: 5px; }
}
/* Bộ lọc gọn: mọi danh mục có các điều kiện trên một hàng. */
.filter-row { display:grid; align-items:center; gap:10px 14px; margin:0 0 10px; }
.filter-row .filter-control,
.filter-row .item-filters,
.filter-row .gem-filters,
.filter-row .pet-filters,
.filter-row .feature-filters,
.filter-row .feature-binding-filters,
.filter-row .artifact-filters,
.filter-row .artifact-tier-control { display:contents; }
.filter-row label { margin:0; white-space:nowrap; }
.filter-row select { margin:0; padding:10px 12px; min-width:0; }
.filter-row.item-layout,
.filter-row.pet-layout,
.filter-row.feature-layout { grid-template-columns:100px minmax(0,1fr) 100px minmax(0,1fr); }
.filter-row.gem-layout { grid-template-columns:90px minmax(0,1fr) 82px minmax(0,1fr) 100px minmax(0,1fr); }
@media (max-width:640px) {
  .filter-row.item-layout,
  .filter-row.pet-layout,
  .filter-row.gem-layout { grid-template-columns:1fr; gap:5px; }
}
.filter-row.artifact-layout { grid-template-columns:90px minmax(0,1fr) 90px minmax(0,1fr); }
@media (max-width:640px) {
  .filter-row.feature-layout,
  .filter-row.artifact-layout { grid-template-columns:1fr; gap:5px; }
}
/* Giữ Phái + Cấp độ trên một hàng, đồng thời dành đủ rộng cho phần mô tả. */
@media (min-width:851px) {
  .workspace,
  body.desktop-app .workspace {
    grid-template-columns:minmax(0,1.35fr) minmax(400px,.9fr);
  }
  .details { min-width:0; }
  .details h2,
  .details dd,
  .description { overflow-wrap:anywhere; }
}
/* Menu tra cứu dọc bên trái; vùng nội dung độc lập ở bên phải. */
@media (min-width:851px) {
  .app-layout { display:grid; grid-template-columns:218px minmax(0,1fr); gap:22px; flex:1 1 auto; min-height:0; }
  .app-content { min-width:0; min-height:0; display:flex; flex-direction:column; }
  .app-content > .workspace { flex:1 1 auto; min-height:0; }
  .module-nav,
  body.desktop-app .module-nav { display:flex; flex-direction:column; flex-wrap:nowrap; align-self:stretch; gap:10px; margin:0; }
  .module-button { width:100%; text-align:left; }
  .module-nav .reset-button { margin-top:auto; }
}
@media (max-width:850px) {
  .app-layout { display:block; }
  .module-nav { flex-direction:row; flex-wrap:wrap; }
  .module-nav .reset-button { margin-top:0; }
}
/* Trên PC: menu sát viền trái, ưu tiên toàn bộ chiều rộng cho nội dung tra cứu. */
@media (min-width:851px) {
  main { max-width:none; margin:0; padding:26px 28px; }
  header { max-width:none; margin-left:240px; }
}
/* PC cửa sổ dọc: danh sách ở trên, mô tả luôn nằm ngay bên dưới.
   Giới hạn bảng vừa khoảng sáu dòng để không bị danh sách chiếm hết màn hình. */
@media (orientation: portrait) {
  html, body { height:auto; overflow:auto; }
  body.desktop-app main { height:auto; min-height:100vh; display:block; max-width:none; padding:24px 20px; }
  body.desktop-app header { margin:0 0 20px; }
  body.desktop-app .app-layout { display:block; }
  body.desktop-app .app-content { display:block; }
  body.desktop-app .module-nav { display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
  body.desktop-app .module-button { width:auto; flex:1 1 190px; text-align:center; }
  body.desktop-app .module-nav .reset-button { margin-top:0; }
  body.desktop-app .workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
  body.desktop-app .search-panel { display:block; padding:22px 20px; }
  body.desktop-app .table-wrap { height:460px; min-height:0; flex:none; }
  body.desktop-app .details { min-height:0; overflow:visible; }
}
/* Trang bị: lọc Full môn phái theo Môn phái và Cấp độ trên một hàng riêng. */
.filter-row .equipment-filters { display:contents; }
.filter-row.equipment-layout { grid-template-columns:100px minmax(0,1fr) 100px minmax(0,1fr); }
.filter-row .full-faction-filters { grid-column:1 / -1; display:grid; grid-template-columns:100px minmax(0,1fr) 90px minmax(0,1fr); align-items:center; gap:10px 14px; }
.filter-row .full-faction-filters label { margin:0; }
.filter-row .full-faction-filters select,
.filter-row .full-faction-filters input { width:100%; min-width:0; margin:0; padding:10px 12px; }
@media (max-width:640px) {
  .filter-row.equipment-layout,
  .filter-row .full-faction-filters { grid-template-columns:1fr; gap:5px; }
}
/* Thiên Giám: thay ô Môn phái bằng Tư chất, giữ cùng bố cục với Full môn phái. */
.filter-row .thien-giam-filters { grid-column:1 / -1; display:grid; grid-template-columns:100px minmax(0,1fr) 90px minmax(0,1fr); align-items:center; gap:10px 14px; }
.filter-row .thien-giam-filters label { margin:0; }
.filter-row .thien-giam-filters select { width:100%; min-width:0; margin:0; padding:10px 12px; }
.filter-row .thien-giam-attribute-control { display:contents; }
.filter-row .thien-giam-attribute-control label { margin:0; }
.filter-row .thien-giam-attribute-control select { width:100%; min-width:0; margin:0; padding:10px 12px; }
@media (max-width:640px) { .filter-row .thien-giam-filters { grid-template-columns:1fr; gap:5px; } }
/* Ma · Yêu · Nhân: lọc loại trang bị và nhóm cấp 6x–9x. */
.filter-row .ma-yeu-nhan-filters { grid-column:1 / -1; display:grid; grid-template-columns:100px minmax(0,1fr) 90px minmax(0,1fr); align-items:center; gap:10px 14px; }
.filter-row .ma-yeu-nhan-filters label { margin:0; }
.filter-row .ma-yeu-nhan-filters select { width:100%; min-width:0; margin:0; padding:10px 12px; }
@media (max-width:640px) { .filter-row .ma-yeu-nhan-filters { grid-template-columns:1fr; gap:5px; } }
/* Cửa sổ PC hẹp: thu menu, giữ bảng và phần mô tả đều đủ rộng.
   Không để khu vực bộ lọc bị ép thành các ô nhỏ như khi dùng màn hình dọc. */
@media (min-width:851px) and (max-width:1180px) {
  body.desktop-app main { padding:20px 18px; }
  body.desktop-app header { margin-left:176px; margin-bottom:16px; }
  body.desktop-app .app-layout { grid-template-columns:160px minmax(0,1fr); gap:16px; }
  body.desktop-app .module-nav { gap:8px; }
  body.desktop-app .module-button { padding:9px 10px; font-size:.92rem; }
  body.desktop-app .workspace { grid-template-columns:minmax(430px,1.2fr) minmax(300px,.8fr); gap:16px; }
  body.desktop-app .search-panel { padding:18px 16px; }
  body.desktop-app .details { padding:20px; }
  body.desktop-app .details h2 { font-size:1.45rem; margin:12px 0 18px; }
  body.desktop-app .filter-row.feature-layout,
  body.desktop-app .filter-row.item-layout,
  body.desktop-app .filter-row.pet-layout,
  body.desktop-app .filter-row.equipment-layout,
  body.desktop-app .filter-row.artifact-layout {
    grid-template-columns:76px minmax(120px,1fr) 76px minmax(120px,1fr);
    gap:8px;
  }
  body.desktop-app .filter-row.gem-layout {
    grid-template-columns:68px minmax(105px,1fr) 64px minmax(105px,1fr) 72px minmax(105px,1fr);
    gap:7px;
  }
  body.desktop-app .filter-row .full-faction-filters,
  body.desktop-app .filter-row .thien-giam-filters,
  body.desktop-app .filter-row .ma-yeu-nhan-filters {
    grid-template-columns:76px minmax(120px,1fr) 70px minmax(120px,1fr);
    gap:8px;
  }
}

/* Nếu chiều rộng không đủ cho ba vùng, chuyển mô tả xuống dưới thay vì cắt bảng. */
@media (min-width:641px) and (max-width:980px) {
  html, body { height:auto; overflow:auto; }
  body.desktop-app main { height:auto; min-height:100vh; display:block; padding:18px 14px; }
  body.desktop-app header { margin:0 0 16px; }
  body.desktop-app .app-layout { display:block; }
  body.desktop-app .module-nav { flex-direction:row; flex-wrap:wrap; margin:0 0 14px; }
  body.desktop-app .module-button { width:auto; flex:1 1 160px; text-align:center; }
  body.desktop-app .module-nav .reset-button { margin-top:0; }
  body.desktop-app .workspace { grid-template-columns:1fr; gap:16px; }
  body.desktop-app .search-panel { padding:18px 16px; }
  body.desktop-app .table-wrap { height:430px; min-height:0; flex:none; }
  body.desktop-app .details { overflow:visible; }
}
.row-command { display:block; margin-top:7px; padding:5px 8px; border:1px solid #527485; border-radius:7px; background:#2d4b5a; color:#e7f2f5; font-size:.72rem; font-weight:700; white-space:nowrap; width:96px; box-sizing:border-box; text-align:center; }

#results td:nth-child(3) .pill { min-width:96px; box-sizing:border-box; text-align:center; }