/* =========================================================================
   UI/UX polish pass — responsive tokens, help popovers, stash columns,
   quick sell, system groups, compact HUD and portrait cards.
   Loaded after jx2.css / jx_win.css; purely presentational.
   ========================================================================= */

:root{
  --ux-title:14px;
  --ux-label:13px;
  --ux-value:13.5px;
  --ux-note:12.5px;
  --ux-lh:1.45;
  --ux-card-pad:6px 8px;
  --ux-gap:6px;
  --ux-radius:0;
  --ux-pop-bg:rgba(5,17,11,.97);
  --ux-pop-line:#3b6a50;
}

/* Readability: the stone window art is translucent on purpose, but text
   panels need a quiet backing so long Vietnamese labels stay legible. */
#mBody{background:linear-gradient(rgba(4,14,9,.82),rgba(4,14,9,.9))}
#panel .tab{background:linear-gradient(rgba(4,14,9,.42),rgba(4,14,9,.56))}
#mBody p.desc:not(.notice):not(.reqbad){color:#cfe3d6}

/* Long text must wrap inside its column, never push the panel wider. */
#panel .tab,#mBody,.stats,.attr,.slotrow,.qrow,.shoprow,.skl,.card{
  overflow-wrap:break-word;
  word-break:normal;
}
.stats{
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px;
  row-gap:4px;
  font-size:var(--ux-value);
  line-height:var(--ux-lh);
}
.stats>span:nth-child(odd){min-width:0;white-space:normal;overflow-wrap:break-word}
.stats>span:nth-child(even){min-width:0;text-align:right;font-size:var(--ux-value);line-height:var(--ux-lh)}
.attr{
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:var(--ux-gap);
  font-size:var(--ux-label);
  line-height:var(--ux-lh);
  padding:4px 0;
}
.attr>span:first-child{min-width:0;overflow-wrap:break-word}
.attr b{font-size:var(--ux-value);line-height:var(--ux-lh)}

/* -------------------------------------------------------------------------
   Help pattern: a small ? keeps long explanations out of the layout.
   ------------------------------------------------------------------------- */
.uihelp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  min-width:18px;
  margin:0 4px;
  padding:0;
  border:0;
  border-radius:50%;
  background:url(v3/i_help.png) 0 0/54px 18px no-repeat;
  image-rendering:pixelated;
  color:transparent;
  font-size:0;
  line-height:0;
  vertical-align:-3px;
  cursor:pointer;
  flex:none;
}
.uihelp:hover{background-position:-18px 0}
.uihelp:active{background-position:-36px 0}
.uihelp:focus-visible{outline:2px solid var(--jx-gold);outline-offset:2px}
@media (pointer:coarse){
  .uihelp{position:relative}
  .uihelp::after{content:"";position:absolute;inset:-10px}
}
.uihelp-wrap{display:inline-flex;align-items:center;gap:4px;max-width:100%;vertical-align:middle}
.uihelp-label{color:var(--jx-label);font-size:var(--ux-label);line-height:var(--ux-lh)}
.uihelp-src{display:none!important}
.uipop{
  position:fixed;
  z-index:95;
  box-sizing:border-box;
  max-width:min(340px,calc(100vw - 16px));
  max-height:min(60vh,320px);
  overflow:auto;
  padding:8px 10px;
  border:1px solid var(--ux-pop-line);
  background:var(--ux-pop-bg);
  color:#dceee2;
  font:var(--ux-label)/var(--ux-lh) var(--font);
  box-shadow:0 4px 18px #000b;
  pointer-events:auto;
}
.uipop.pinned{
  border-color:var(--jx-gold);
  box-shadow:0 4px 20px rgba(0,0,0,.9), 0 0 10px rgba(216,188,124,.35);
}
.uipop.hidden{display:none}
.uipop b{color:var(--jx-cream)}
.uipop:focus{outline:2px solid var(--jx-gold);outline-offset:1px}

/* Short status labels must never break awkwardly */
.empty, p.empty, .slotrow.empty small, .stashCol small.dim {
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Stash: inventory and common storage side by side on desktop/tablet.
   Expand modal width to 560px on desktop for generous breathing room.
   ------------------------------------------------------------------------- */
@media (min-width:768px){
  .mbox:has(.stashCols),
  .mbox:has(#stInv),
  .mbox.ux-wide{
    width:min(100%,560px)!important;
  }
}
.stashCols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start;margin-top:4px}
.stashCol{min-width:0;display:flex;flex-direction:column;gap:3px;border:1px solid rgba(59,106,80,.55);background:rgba(0,0,0,.18);padding:6px 7px 8px}
.stashCol>h3{margin-top:0}
.stashCol .invgrid{max-height:min(45vh,350px);overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:#3b6a50 transparent}
.stashCol .invgrid::-webkit-scrollbar{width:10px}
.stashCol .invgrid::-webkit-scrollbar-thumb{background:#3b6a50}
.stashMobileTabs{display:none;gap:4px;margin:4px 0 6px}
.stashMobileTabs button{flex:1 1 0;min-width:0}
@media (max-width:700px){
  .stashCols{grid-template-columns:minmax(0,1fr)}
  .stashMobileTabs{display:flex}
  .stashCols .stashCol{display:none}
  .stashCols.ux-st-inv .stashCol.inv,
  .stashCols.ux-st-box .stashCol.box{display:flex}
  .stashCol .invgrid{max-height:min(46vh,360px)}
}

/* -------------------------------------------------------------------------
   Quick sell
   ------------------------------------------------------------------------- */
.ux-quickbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0;padding:5px 6px;border:1px solid rgba(59,106,80,.55);background:rgba(0,0,0,.24)}
.ux-quickbar .ux-count{flex:1 1 140px;min-width:0;color:#cfe3d6;font-size:var(--ux-note);line-height:1.35}
.ux-quickbar .ux-count b{color:var(--jx-cream)}
.ux-quickbar .btn{flex:0 0 auto}
.ux-quicklist{max-height:180px;overflow:auto;margin:6px 0;border:1px solid rgba(59,106,80,.45)}
.ux-quicklist .qrow{margin:0;border-width:0 0 1px 0;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;font-size:var(--ux-note)}
.ux-quicklist .qrow>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-quicklist .qrow:last-child{border-bottom:0}

/* Unify sell stream: hide legacy unconfirmed buttons, use safe quick sell modal */
#bSellAll, #bSellBad { display: none !important; }

/* -------------------------------------------------------------------------
   Character / attributes
   ------------------------------------------------------------------------- */
#t-char .eqgrid{grid-template-columns:repeat(auto-fit,minmax(52px,1fr))}
#t-char .slot{min-width:0;min-height:48px;overflow-wrap:normal;word-break:normal}
#t-char .slot span{font-size:var(--ux-note);line-height:1.2;text-align:center}
#t-char .card.stats{margin-bottom:8px}
#t-char .element-gear-tips p{margin:0 0 4px}
@media (min-width:900px){
  #panel.pw #t-char,
  #panel.land #t-char{display:block}
  #panel.pw #t-char .eqgrid{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
}

/* On Desktop JX, the stone window on the left already has full attributes & + buttons.
   Hide the duplicate potential points card on the right column to avoid clutter. */
html.jxo #t-char .jxx-r .ux-dup-attr,
html.jxo #t-char .jxx-r h3:has(+ .card:has(.attr)),
html.jxo #t-char .jxx-r .card:has(.attr){
  display:none!important;
}

/* -------------------------------------------------------------------------
   System panel groups
   ------------------------------------------------------------------------- */
#t-more .mgrp{margin:4px 0;border-color:rgba(59,106,80,.6);background:rgba(0,0,0,.2)}
#t-more .mgrp>summary{padding:8px 10px;font-size:var(--ux-label);line-height:1.3}
#t-more .mgrp>*:not(summary){margin-left:6px;margin-right:6px}
#t-more .mgrp>*:last-child{margin-bottom:6px}
#t-more .card{margin-bottom:4px;padding:var(--ux-card-pad)}
#t-more h3{margin:7px 0 4px}
#t-more .btnrow{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:5px}
#t-more .btnrow.qtg{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))!important}
#t-more .qtg .btn{min-height:28px}
#t-more label{line-height:1.35}
#t-more .lootf .row{margin-top:4px}
#t-more .mgrp:focus-within>summary{color:var(--jx-over)}
#t-more summary:focus-visible{outline:2px solid var(--jx-gold);outline-offset:-2px}

/* -------------------------------------------------------------------------
   Navigation rail: all icons moved to bottom HUD (D1 / M1), hide jxR.
   ------------------------------------------------------------------------- */
#jxR{display:none!important}

/* -------------------------------------------------------------------------
   Faction / character portraits
   ------------------------------------------------------------------------- */
.facpick button{min-height:76px;grid-template-columns:58px minmax(0,1fr)}
.facpick .facboss{grid-row:1/3;width:58px;height:64px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 82%,rgba(124,255,125,.16),transparent 62%)}
.facpick button:focus-visible{outline:2px solid var(--jx-gold);outline-offset:-2px}
.ux-preview{display:flex;align-items:center;gap:8px;margin:6px 0 2px;padding:5px 6px;border:1px solid rgba(59,106,80,.55);background:rgba(0,0,0,.22)}
.ux-preview canvas{width:56px;height:64px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 82%,rgba(124,255,125,.15),transparent 62%)}
.ux-preview small{min-width:0;color:var(--jx-label);line-height:1.35}
.ux-preview b{color:var(--jx-cream)}
.ux-portrait{image-rendering:auto;background:radial-gradient(ellipse at 50% 82%,rgba(124,255,125,.14),transparent 62%)}
.jxf-char [data-c="Face"] img.ux-portrait{width:100%;height:100%;object-fit:contain}
.slotrow img.ux-portrait{width:44px;height:52px;object-fit:contain;flex:none}

/* -------------------------------------------------------------------------
   Offline / report tables
   ------------------------------------------------------------------------- */
#mBody .card.stats{grid-template-columns:minmax(7.5em,40%) minmax(0,1fr);column-gap:10px}
#mBody .card.stats>span:nth-child(odd){white-space:normal;overflow-wrap:break-word}
#mBody .card.stats>span:nth-child(even){white-space:normal;overflow-wrap:anywhere}
#mBody .weekly-return-guide p{font-size:var(--ux-note);line-height:1.4;margin:3px 0}
#mBody details.dsc,#mBody details.card{background:rgba(0,0,0,.2)}
#mBody details>summary{cursor:pointer;min-height:26px;padding:4px 2px;color:var(--jx-gold)}

/* -------------------------------------------------------------------------
   Classic JX HUD: D1 Desktop 1024px centered + M1 Mobile dual-tier touchbar
   ------------------------------------------------------------------------- */
#bb{
  position:fixed!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  height:92px!important;
  z-index:40!important;
  padding:0!important;
  margin:0!important;
  pointer-events:none;
}
#bb canvas#bbc{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:92px;
}
#bb #pad,#bb #tabs{
  position:absolute;
  inset:0;
  pointer-events:none;
}
#bb .pbtn,#bb #tabs .tray,#bb #bBaoVat{
  pointer-events:auto;
}

/* Hotbar items: 36x36 square */
#bb #pad .pbtn{
  width:36px;
  height:36px;
  box-sizing:border-box;
}
#bb #pad .pbtn.pot{
  background-size:28px 28px;
}
#bb #pad .pbtn.hbtn{
  position:absolute;
  width:36px;
  height:36px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
}
#bb #pad .pbtn.hbtn:hover{
  background:rgba(255,215,0,.08);
}
#bb #pad .pbtn.hbtn.on{
  box-shadow:inset 0 0 0 1px var(--jx-gold), inset 0 0 6px rgba(255,215,0,.45);
  background:rgba(255,215,0,.12);
}
#bb #pad .pbtn.hbtn i{
  display:block;
  width:20px;
  height:20px;
  background:var(--ic) 0 0/auto 100% no-repeat;
  image-rendering:pixelated;
  pointer-events:none;
}
#bb #pad .pbtn.hbtn:hover i{
  background-position:50% 0;
}
#bb #pad .pbtn.hbtn.on i{
  background-position:100% 0;
}
#bb #pad .pbtn.hbtn b{
  position:absolute;
  right:2px;
  bottom:1px;
  font-size:11px;
  line-height:1;
  font-weight:700;
  color:#e6dfc8;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  pointer-events:none;
}

/* Center Console Skills: 36x36 */
#bb #pad .pbtn.sk.center{
  width:36px;
  height:36px;
}

/* Right Trays: 28x28 */
#bb #tabs .tray{
  width:28px;
  height:28px;
  box-sizing:border-box;
  padding:0;
  background:transparent;
  border:0;
}
#bb #tabs .tray i{
  width:20px;
  height:20px;
  background:var(--ic) 0 0/auto 100% no-repeat;
  image-rendering:pixelated;
}
#bb #tabs .tray:hover i{
  background-position:50% 0;
}
#bb #tabs .tray.on i{
  background-position:100% 0;
}

/* Bao Vat / Ky Tran Cac emblem button: 48x48 round */
#bb #bBaoVat{
  position:absolute;
  width:48px;
  height:48px;
  border-radius:50%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:10;
  pointer-events:auto;
}
#bb #bBaoVat:hover{
  box-shadow:0 0 14px rgba(255,215,0,.7);
}

/* Mobile M1: Dual-Tier Touchbar (< 768px) */
#bMobMore{display:none!important}
@media (max-width:767px){
  #bb{
    height:calc(86px + var(--safe-b,0px))!important;
  }
  #bb canvas#bbc{
    height:calc(86px + var(--safe-b,0px))!important;
  }
  #bMobMore{
    display:flex!important;
    align-items:center;
    justify-content:center;
    background:rgba(10,24,16,.85)!important;
    border:1px solid #3b6a50!important;
    border-radius:2px;
    font-size:20px!important;
    color:var(--jx-gold)!important;
  }
  #bMobMore i{display:none!important}
  #bMobMore span{
    display:block!important;
    font-size:20px!important;
    line-height:20px!important;
    color:#e5cf8e!important;
    pointer-events:none;
  }
}

/* Mobile More Bottom Sheet Modal */
.mob-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(86px + var(--safe-b,0px));
  background:rgba(5,17,11,.96);
  border-top:1px solid #3b6a50;
  box-shadow:0 -4px 20px rgba(0,0,0,.8);
  padding:12px 14px;
  z-index:90;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.mob-sheet.hidden{display:none}
.mob-sheet-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:rgba(15,35,24,.7);
  border:1px solid #28523a;
  padding:8px 4px;
  color:#cfe3d6;
  font-size:12px;
  cursor:pointer;
  border-radius:2px;
}
.mob-sheet-item:hover,.mob-sheet-item:active{
  border-color:var(--jx-gold);
  background:rgba(255,215,0,.12);
  color:#fff;
}
.mob-sheet-item i{
  width:20px;
  height:20px;
  background:var(--ic) 0 0/auto 100% no-repeat;
  image-rendering:pixelated;
}

/* -------------------------------------------------------------------------
   Báo cáo offline 2 cột nhãn / giá trị (Mục 8)
   ------------------------------------------------------------------------- */
.card.stats.ux-kv-table{
  display:grid!important;
  grid-template-columns:minmax(140px,auto) 1fr!important;
  row-gap:6px!important;
  column-gap:14px!important;
  align-items:baseline!important;
  padding:8px 10px!important;
}
.ux-kv-table .stat-k{
  color:var(--jx-label)!important;
  font-size:13px!important;
  white-space:nowrap!important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ux-kv-table .stat-v{
  color:var(--jx-gold)!important;
  font-size:13.5px!important;
  text-align:right!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.ux-rare-card{
  border-left:3px solid var(--jx-gold)!important;
  padding:6px 10px!important;
  margin-top:6px!important;
}

/* -------------------------------------------------------------------------
   Nút Lên / Xuống ngựa (Mount / Dismount)
   ------------------------------------------------------------------------- */
#bMountToggle{
  margin-left:6px;
  vertical-align:middle;
}
#bMountToggle.on,#bHudMount.on{
  border-color:var(--jx-gold)!important;
  color:var(--jx-gold)!important;
  box-shadow:0 0 8px rgba(255,217,78,.4)!important;
}

/* -------------------------------------------------------------------------
   Vòng sáng chạy quanh viền khung trang bị theo màu sắc quy định (Chasing Glow Border)
   ------------------------------------------------------------------------- */
@keyframes jxGlowRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.it{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* Màu sắc viền sáng theo phẩm chất (trừ đồ trắng r0; r5 bạch kim là màu trắng sáng) */
.it.r1, .it[class*=" r1"], .pic.r1, .jxi.r1, .jxs.r1 { --glow-c: #6464ff; }
.it.r2, .it[class*=" r2"], .pic.r2, .jxi.r2, .jxs.r2 { --glow-c: #ffd24a; }
.it.r3, .it[class*=" r3"], .pic.r3, .jxi.r3, .jxs.r3 { --glow-c: #bb44ff; }
.it.r4, .it[class*=" r4"], .pic.r4, .jxi.r4, .jxs.r4 { --glow-c: #ffe135; }
.it.r5, .it[class*=" r5"], .pic.r5, .jxi.r5, .jxs.r5 { --glow-c: #ffffff; }

/* Desktop JX fallback: nếu phần tử có class rr */
.jxi.rr, .jxs.rr {
  --glow-c: var(--rc, #ffd24a);
}

/* Áp dụng khung viền sáng cho mọi trường hợp trang bị có phẩm chất (trừ đồ trắng) */
.it.r1, .it.r2, .it.r3, .it.r4, .it.r5,
.it[class*=" r1"], .it[class*=" r2"], .it[class*=" r3"], .it[class*=" r4"], .it[class*=" r5"],
.idet .pic.r1, .idet .pic.r2, .idet .pic.r3, .idet .pic.r4, .idet .pic.r5,
.jxi.rr, .jxs.rr {
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  border-image: none !important;
  border-radius: 2px !important;
  box-shadow: 0 0 5px color-mix(in srgb, var(--glow-c, #6464ff) 55%, transparent) !important;
}

.it.r1::before, .it.r2::before, .it.r3::before, .it.r4::before, .it.r5::before,
.it[class*=" r1"]::before, .it[class*=" r2"]::before, .it[class*=" r3"]::before, .it[class*=" r4"]::before, .it[class*=" r5"]::before,
.idet .pic.r1::before, .idet .pic.r2::before, .idet .pic.r3::before, .idet .pic.r4::before, .idet .pic.r5::before,
.jxi.rr::before, .jxs.rr::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(from 0deg, var(--glow-c, #6464ff) 0deg, rgba(255, 255, 255, 0.98) 16deg, transparent 75deg, transparent 360deg) !important;
  animation: jxGlowRotate 3.5s linear infinite !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.it.r1::after, .it.r2::after, .it.r3::after, .it.r4::after, .it.r5::after,
.it[class*=" r1"]::after, .it[class*=" r2"]::after, .it[class*=" r3"]::after, .it[class*=" r4"]::after, .it[class*=" r5"]::after,
.idet .pic.r1::after, .idet .pic.r2::after, .idet .pic.r3::after, .idet .pic.r4::after, .idet .pic.r5::after,
.jxi.rr::after, .jxs.rr::after {
  content: "" !important;
  position: absolute !important;
  inset: 1.5px !important;
  background: rgba(10, 16, 12, 0.95) !important;
  border-radius: 1px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.it > *, .idet .pic > *, .jxi.rr > *, .jxs.rr > * {
  position: relative !important;
  z-index: 3 !important;
}

.mbox:has(.kytrancac-tabs),
.mbox:has(.kytrancac-grid),
.mbox:has(.baovat-list),
.mbox:has(.zone-grid){
  width: min(96vw, 760px) !important;
}

/* -------------------------------------------------------------------------
   Chuyển map nhanh từ Mini Map (#jxZone)
   ------------------------------------------------------------------------- */
.stg, #jxZone{
  pointer-events:auto!important;
}
#jxZone{
  cursor:pointer;
  transition:all .18s ease;
  border-bottom:1px dotted rgba(216,188,124,.6);
  user-select:none;
}
#jxZone:hover{
  color:#fff!important;
  text-shadow:0 0 8px rgba(255,215,0,.8);
  border-bottom-color:var(--jx-gold);
}

/* -------------------------------------------------------------------------
   Kỳ Trân Các (Shop KNB) & Chuyển Map Nhanh
   ------------------------------------------------------------------------- */
.kytrancac-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  padding:6px 10px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(59,106,80,.55);
}
.kytrancac-knb{
  color:var(--jx-gold);
  font-weight:700;
  font-size:13.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.kytrancac-tabs{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}
.kytrancac-tabs button{
  flex:1;
  padding:6px 8px;
  font-size:13px;
}
.kytrancac-tabs button.on{
  border-color:var(--jx-gold);
  color:var(--jx-gold);
}
.kytrancac-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:8px;
  max-height:min(58vh,440px);
  overflow-y:auto;
  padding-right:4px;
}
@media (max-width:680px){
  .kytrancac-grid{
    grid-template-columns:1fr;
  }
}
.kytrancac-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 10px;
  border:1px solid rgba(59,106,80,.55);
  background:rgba(0,0,0,.32);
  transition:border-color .15s ease, background .15s ease;
}
.kytrancac-item:hover{
  border-color:var(--jx-gold);
  background:rgba(255,215,0,.06);
}
.ktc-top{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.ktc-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
.ktc-info b{
  font-size:13.5px;
  color:#6464ff;
  white-space:normal;
  line-height:1.25;
}
.ktc-info small{
  color:var(--jx-label);
  font-size:12px;
}
.ktc-affix-box{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:5px 8px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(59,106,80,.4);
  font-size:11.5px;
  line-height:1.35;
  cursor:pointer;
  border-radius:2px;
  min-height:44px;
}
.ktc-line.b{
  color:var(--jx-label);
}
.ktc-line.m{
  color:var(--jx-blue,#6464ff);
}
.ktc-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:2px;
}
.ktc-badge{
  font-size:10.5px;
  padding:2px 6px;
  background:rgba(100,100,255,.18);
  border:1px solid rgba(100,100,255,.45);
  color:#8fa8ff;
  border-radius:2px;
  flex:none;
}
.ktc-footer .btn{
  flex:0 0 auto;
  min-width:96px;
  white-space:nowrap;
  font-size:12px;
}
.kytrancac-pages{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin-top:10px;
}
.kytrancac-pages button{
  min-width:34px;
  padding:4px 8px;
  font-size:12px;
}
.kytrancac-pages button.on{
  border-color:var(--jx-gold);
  color:var(--jx-gold);
  box-shadow:inset 0 0 6px rgba(255,215,0,.35);
}

/* -------------------------------------------------------------------------
   Bảo Vật & Hoạt Động (Chống rớt chữ triệt để)
   ------------------------------------------------------------------------- */
.baovat-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:min(58vh,440px);
  overflow-y:auto;
  padding-right:4px;
}
.baovat-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 14px;
  border:1px solid rgba(59,106,80,.55);
  background:rgba(0,0,0,.32);
  transition:border-color .15s ease, background .15s ease;
}
.baovat-card:hover{
  border-color:var(--jx-gold);
  background:rgba(255,215,0,.06);
}
.baovat-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1 1 auto;
  min-width:0;
}
.baovat-info b{
  font-size:13.5px;
  color:var(--jx-cream);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.baovat-info small{
  font-size:12px;
  color:var(--jx-label);
  line-height:1.4;
  white-space:normal;
  overflow-wrap:break-word;
}
.baovat-card .btn{
  flex:0 0 auto;
  min-width:96px;
  white-space:nowrap;
}
.zone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px;
  max-height:min(55vh,420px);
  overflow-y:auto;
  padding-right:4px;
}
.zone-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(59,106,80,.55);
  background:rgba(0,0,0,.25);
}
.zone-card.current{
  border-color:var(--jx-gold);
  background:rgba(255,215,0,.08);
}
.zone-card.locked{
  opacity:.5;
}
.zone-card b{
  display:block;
  font-size:13px;
  color:var(--jx-cream);
}
.zone-card small{
  color:var(--jx-label);
  font-size:11.5px;
}

/* -------------------------------------------------------------------------
   Focus / touch safety
   ------------------------------------------------------------------------- */
#mBody button:focus-visible,#panel button:focus-visible,#mBody summary:focus-visible{
  outline:2px solid var(--jx-gold);outline-offset:2px;
}
@media (pointer:coarse){
  #mBody .btn,#mBody button:not(.uihelp):not(.mx):not(.wx){min-height:32px}
  #mBody .stashMobileTabs button{min-height:34px}
}


/* Every native KTC option remains visible, including inactive elemental lines. */
.ktc-line.h{color:var(--jx-label);opacity:.72;overflow-wrap:anywhere}
.ktc-line.h.on{color:var(--jx-blue,#6464ff);opacity:1}

/* Auto panel: bind each preset to a saved build profile. */
.auto-builds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 8px}
.auto-builds label{display:flex;flex-direction:column;gap:4px;min-width:0}
.auto-builds label small{color:var(--jx-label);font-size:11px}
.auto-builds select{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:560px){.auto-builds{grid-template-columns:1fr}}

/* Independent game signature, above the bottom HUD and outside the minimap. */
#battle>#vnidleBrand{position:absolute;left:8px;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:96px;height:auto;z-index:5;pointer-events:none;user-select:none;filter:drop-shadow(0 2px 2px #0009)}
@media(max-width:600px){#battle>#vnidleBrand{width:78px;bottom:calc(100px + env(safe-area-inset-bottom,0px))}}