/* jx-sys.css — cua so He thong (#t-more) + Thiet lap Auto (#t-auto) kieu JX1. Xem js/jx-sys.js */
:root { --jx-btn: linear-gradient(#4a3c22, #241c10); --jx-btn-on: linear-gradient(#6a5428, #33260f); --jx-edge: #8a7240; --jx-btn-text: #f3dfa2;
  --jx-well: #0c0a06; --jx-panel: rgba(0, 0, 0, .32);
  --jx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7.5' fill='none' stroke='%23ffd94e' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E"); }

/* ---------- chung: chu Tahoma, goc vuong ---------- */
:is(#t-more, #t-auto) { color: var(--jx-text); font: 13px/1.45 var(--jx-font); text-shadow: 1px 1px 0 #000; }
:is(#t-more, #t-auto), :is(#t-more, #t-auto) * { border-radius: 0 !important; }
:is(#t-more, #t-auto) .dim, :is(#t-more, #t-auto) small.dim { color: var(--jx-dim); }

/* tieu de muc: chu vang + gach chan nau vang */
:is(#t-more, #t-auto) * { font-family: var(--jx-font); }
:is(#t-more, #t-auto) h3, #t-auto .auto-section h4 { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 10px 0 6px; padding: 0 2px 3px;
  border-bottom: 1px solid var(--jx-line); color: var(--jx-gold); font: 700 13px/1.3 var(--jx-font); letter-spacing: .3px; text-shadow: 1px 1px 0 #000; }
:is(#t-more, #t-auto) h3::before, #t-auto .auto-section h4::before { content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--jx-gold); box-shadow: 0 0 3px #ffd24a88; }
#t-more > h3:first-child { margin-top: 0; }

/* the / khung con = bang JX toi */
#t-more .card, #t-auto .auto-section, #t-auto .loot-panel { margin: 0 0 8px; padding: 7px 9px 8px; border: 1px solid var(--jx-line); background: var(--jx-panel);
  box-shadow: inset 0 0 0 1px #00000080; }
#t-auto .auto-config { gap: 8px; max-width: none; }
#t-auto .auto-config > #autoLootPanel > .loot-panel { margin: 0; }

/* ---------- nut JX ---------- */
:is(#t-more, #t-auto) .btn { min-height: 32px; padding: 5px 12px; border: 1px solid var(--jx-edge); background: var(--jx-btn); color: var(--jx-btn-text);
  font: 12px/1.2 var(--jx-font); text-shadow: 1px 1px 0 #000; box-shadow: inset 0 1px 0 #ffffff1a, inset 0 -1px 0 #000; transform: none; }
:is(#t-more, #t-auto) .btn:hover:not(:disabled) { border-color: #c9a24e; color: #fff2c4; filter: brightness(1.15); transform: none; box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #000; }
:is(#t-more, #t-auto) .btn:active:not(:disabled) { transform: none; background: linear-gradient(#241c10, #3a2f1c); }
:is(#t-more, #t-auto) .btn.sm { min-height: 30px; padding: 4px 10px; font-size: 12px; }
:is(#t-more, #t-auto) .btn.red { border-color: #a0583a; background: linear-gradient(#5e2a1a, #2c120a); color: #ffd9c4; }
:is(#t-more, #t-auto) .btn.red:hover:not(:disabled) { border-color: #e08a62; }
:is(#t-more, #t-auto) .btn:focus-visible, :is(#t-more, #t-auto) button:focus-visible { outline: 1px solid var(--jx-gold); outline-offset: 1px; }

/* ---------- the phan doan (Hien thi / Dieu khien / ...) = hang nut the JX ---------- */
#t-more .setting-segment { display: flex; flex-wrap: wrap; gap: 3px; width: auto; margin: 0 0 6px; padding: 0 0 5px; border-bottom: 1px solid var(--jx-line); }
#t-more .setting-segment button, #t-auto .auto-range button, #t-auto .ground-loot-tabs button { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 4px 8px;
  border: 1px solid #5a4a2a; background: linear-gradient(#3a2f1c, #1c160c); color: #c8b480; font: 12px/1.2 var(--jx-font); text-shadow: 1px 1px 0 #000;
  box-shadow: inset 0 1px 0 #ffffff14, inset 0 -1px 0 #000; white-space: nowrap; cursor: pointer; }
#t-more .setting-segment button:hover, #t-auto .auto-range button:hover, #t-auto .ground-loot-tabs button:hover { filter: brightness(1.2); }
#t-more .setting-segment button.on, #t-auto .auto-range button[aria-pressed="true"], #t-auto .ground-loot-tabs button.on {
  border-color: #c9a24e; background: linear-gradient(#5a4520, #2a1f0e); color: var(--jx-gold); font-weight: 700; box-shadow: inset 0 0 6px #ffd24a55; }
#t-more .setting-pane { gap: 2px; }

/* ---------- cong tac iOS -> o vuong JX co dau tich vang (giu nguyen input + id) ---------- */
:is(#t-more, #t-auto) .ios-switch-row { justify-content: flex-start; gap: 8px; min-height: 32px; padding: 1px 2px; font-size: 13px; }
:is(#t-more, #t-auto) .ios-switch-row:hover { background: #ffffff08; }
:is(#t-more, #t-auto) .ios-switch-row > span:first-child { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
:is(#t-more, #t-auto) .ios-switch-row .ios-switch, #t-auto .auto-mini-switch { order: -1; flex: 0 0 16px; width: 16px; height: 16px;
  border: 1px solid var(--jx-edge); background: var(--jx-well) center / 14px 14px no-repeat; box-shadow: inset 1px 1px 2px #000; transition: none; }
:is(#t-more, #t-auto) .ios-switch-row .ios-switch::after, #t-auto .auto-mini-switch::after { content: none; }
:is(#t-more, #t-auto) .ios-switch-row input:checked + .ios-switch, #t-auto .auto-skill input:checked + .auto-mini-switch {
  border-color: #c9a24e; background-color: #241a08; background-image: var(--jx-check); box-shadow: inset 1px 1px 2px #000, 0 0 4px #ffd24a55; }
:is(#t-more, #t-auto) .ios-switch-row input:focus-visible + .ios-switch, #t-auto .auto-skill input:focus-visible + .auto-mini-switch { outline: 1px solid var(--jx-gold); outline-offset: 2px; }
:is(#t-more, #t-auto) .ios-switch-row:has(input:disabled) { color: var(--jx-dim); cursor: default; }
:is(#t-more, #t-auto) .ios-switch-row input:disabled + .ios-switch { opacity: .45; }

/* o tich goc (bang loc nhat do) -> o vuong JX */
#t-auto input[type="checkbox"]:not(.ios-switch-row input):not(.auto-skill input) { appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 0;
  border: 1px solid var(--jx-edge); background: var(--jx-well) center / 13px 13px no-repeat; box-shadow: inset 1px 1px 2px #000; cursor: pointer; vertical-align: middle; }
#t-auto input[type="checkbox"]:not(.ios-switch-row input):not(.auto-skill input):checked { border-color: #c9a24e; background-color: #241a08; background-image: var(--jx-check); }

/* ---------- thanh truot, o chon ---------- */
:is(#t-more, #t-auto) .row { gap: 10px; min-height: 32px; padding: 0 2px; }
:is(#t-more, #t-auto) input[type="range"] { height: 26px; }
:is(#t-more, #t-auto) input[type="range"]::-webkit-slider-runnable-track { height: 6px; border: 1px solid var(--jx-line); border-radius: 0; background: var(--jx-well); box-shadow: inset 1px 1px 2px #000; }
:is(#t-more, #t-auto) input[type="range"]::-webkit-slider-thumb { width: 12px; height: 20px; margin-top: -8px; border: 1px solid #c9a24e; border-radius: 0;
  background: linear-gradient(#e8c870, #8a6a2a); box-shadow: inset 0 1px 0 #fff6, 0 1px 2px #000; }
:is(#t-more, #t-auto) input[type="range"]::-moz-range-track { height: 6px; border: 1px solid var(--jx-line); border-radius: 0; background: var(--jx-well); }
:is(#t-more, #t-auto) input[type="range"]::-moz-range-progress { height: 6px; border-radius: 0; background: linear-gradient(90deg, #6a4e1c, #d8b050); }
:is(#t-more, #t-auto) input[type="range"]::-moz-range-thumb { width: 12px; height: 20px; border: 1px solid #c9a24e; border-radius: 0; background: linear-gradient(#e8c870, #8a6a2a); }
:is(#t-more, #t-auto) select, :is(#t-more, #t-auto) input:not([type="checkbox"]):not([type="range"]):not([type="file"]), #t-auto .ui-select-trigger {
  min-height: 30px; padding: 4px 26px 4px 8px; border: 1px solid var(--jx-edge); background-color: var(--jx-well); color: var(--jx-text);
  font: 12px/1.3 var(--jx-font); box-shadow: inset 1px 1px 3px #000; }
:is(#t-more, #t-auto) input:not([type="checkbox"]):not([type="range"]):not([type="file"]), #t-auto .ui-select-trigger { background-image: none; }
:is(#t-more, #t-auto) input:not([type="checkbox"]):not([type="range"]):not([type="file"]) { padding-right: 8px; }
#t-auto .ui-select-trigger { padding-right: 10px; }
#t-auto .ui-select-trigger i { border-color: var(--jx-gold); }
#t-auto .ui-select-option { border-radius: 0; color: var(--jx-text); }
#t-auto .ui-select-option:hover { background: #2a2010; color: var(--jx-gold); }
:is(#t-more, #t-auto) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3h8L5 8z' fill='%23ffd94e'/%3E%3C/svg%3E");
  background-position: right 8px center; background-size: 10px 10px; background-repeat: no-repeat; }
#t-auto .ui-select-menu { border: 1px solid var(--jx-edge); background: rgba(16, 13, 9, .98); }
#t-auto .ui-select-option.is-selected { border-color: var(--jx-line); background: #3a2d14; color: var(--jx-gold); box-shadow: none; }
#t-more .setting-font-row { min-height: 32px; padding: 0 2px; }
/* am luong: nhan cung be rong de hai thanh truot thang hang */
#t-more [data-setting-pane="audio"] .row { display: grid; grid-template-columns: 76px minmax(0, 1fr); }

/* ---------- Doi / Xoa nhan vat, Tro giup ---------- */
#t-more .character-actions { margin: 0 0 8px; }
#t-more .character-actions .btn { font-size: 12px; }
#t-more .card.lootf .btnrow { margin-top: 0; }
#t-more .card.lootf .btnrow .btn { flex: 1 1 0; }

/* ---------- cua so Auto ---------- */
/* tieu de cua so da ghi "Thiet lap Auto": an tieu de trong, nut quay lai = dong */
#t-auto .auto-panel-head { justify-content: flex-start; margin: 0 0 6px; padding: 0; border: 0; }
#t-auto .auto-panel-head h3 { display: none; }
#t-auto .auto-section h4 { margin: 0 0 4px; }
#t-auto .auto-section small { color: var(--jx-dim); font-size: 11px; }
#t-auto .auto-range { margin: 4px 2px; }
#t-auto .auto-range [role="group"] { gap: 3px; }
#t-auto .auto-threshold { min-height: 32px; }
#t-auto .auto-stepper { grid-template-columns: 30px minmax(36px, 1fr) 30px; border: 1px solid var(--jx-edge); background: var(--jx-well); box-shadow: inset 1px 1px 2px #000; }
#t-auto .auto-stepper button { height: 30px; border: 0; background: var(--jx-btn); color: var(--jx-btn-text); font: 16px/1 var(--jx-font); cursor: pointer; }
#t-auto .auto-stepper button:hover { filter: brightness(1.25); }
#t-auto .auto-stepper span { color: var(--jx-gold); font-weight: 700; }
/* o ky nang tu dung: khung vuong kieu o vo cong */
#t-auto .auto-skill { padding: 4px 2px; border: 1px solid transparent; }
#t-auto .auto-skill:hover:not(.empty) { border-color: var(--jx-line); background: #ffffff08; }
#t-auto .auto-skill > img, #t-auto .auto-skill-empty { width: 40px; height: 40px; border: 1px solid var(--jx-edge); background: #000; box-shadow: inset 0 0 0 1px #000, 0 1px 2px #000; color: var(--jx-dim); }
#t-auto .auto-skill > small { color: var(--jx-text); font-size: 11px; }
#t-auto .auto-footer { padding: 2px 2px 0; }

/* bang loc nhat do */
#t-auto .loot-panel-head h3 { margin: 0; padding: 0; border: 0; }
#t-auto .loot-panel-head small { color: var(--jx-dim); }
#t-auto .loot-bag-state, #t-auto .auto-loot-state, #t-auto .chip2 { border: 1px solid var(--jx-line); background: var(--jx-well); color: #e8d6a4; }
#t-auto .loot-mode button, #t-auto .loot-check, #t-auto .loot-summary, #t-auto .loot-advanced-body, #t-auto .ground-loot-row {
  border: 1px solid #4e4126; background: rgba(0, 0, 0, .35); }
#t-auto .loot-mode button { cursor: pointer; }
#t-auto .loot-mode button b { color: var(--jx-text); }
#t-auto .loot-mode button.on { border-color: #c9a24e; background: linear-gradient(#4a3a1a, #1e170b); box-shadow: inset 0 0 6px #ffd24a40; }
#t-auto .loot-mode button.on b { color: var(--jx-gold); }
#t-auto .loot-summary.has-match > span:first-child b { color: var(--jx-green); }
#t-auto .loot-advanced { border-top-color: var(--jx-line); }
#t-auto .loot-advanced > summary { color: var(--jx-gold); min-height: 28px; display: flex; align-items: center; }
#t-auto .ground-loot-row.is-target { border-color: #c9a24e; }
#t-auto .ground-loot-section { border-top-color: var(--jx-line); }
#t-auto .ground-loot-tabs button { flex: 0 0 auto; min-height: 28px; font-size: 11px; }
#t-auto .ground-loot-icon { background: #000; }
#t-auto .ground-loot-section > header b, #t-auto .loot-filter-field > span { color: var(--jx-gold); }
#t-auto .ground-loot-section > header span { color: var(--jx-dim); }
#t-auto .ground-loot-empty { border-color: var(--jx-line); background: rgba(0, 0, 0, .25); }
#t-auto .loot-mode button small { color: var(--jx-dim); }

/* ---------- dien thoai ---------- */
/* #app bi thu nho 0.8 tren dien thoai -> 40px CSS ~ 32px that */
@media (max-width: 640px), (orientation: portrait) {
  :is(#t-more, #t-auto) { font-size: 14px; }
  :is(#t-more, #t-auto) .ios-switch-row, #t-auto .auto-section .ios-switch-row { min-height: 40px; font-size: 14px; }
  :is(#t-more, #t-auto) .ios-switch-row .ios-switch { flex-basis: 20px; width: 20px; height: 20px; background-size: 18px 18px; }
  #t-more .setting-segment button { min-height: 40px; padding: 4px 3px; font-size: 13px; }
  :is(#t-more, #t-auto) .btn, :is(#t-more, #t-auto) .btn.sm { min-height: 40px; font-size: 13px; }
  :is(#t-more, #t-auto) select, :is(#t-more, #t-auto) input:not([type="checkbox"]):not([type="range"]):not([type="file"]), #t-auto .ui-select-trigger { min-height: 40px; font-size: 13px; }
  :is(#t-more, #t-auto) .row { min-height: 40px; }
  :is(#t-more, #t-auto) input[type="range"] { height: 40px; }
  #t-auto .auto-range button { min-height: 40px; font-size: 13px; }
  #t-auto .auto-stepper { grid-template-columns: 40px minmax(40px, 1fr) 40px; }
  #t-auto .auto-stepper button { height: 40px; }
  #t-auto .auto-threshold { grid-template-columns: minmax(0, 1fr) 128px; }
  #t-auto .auto-section small { font-size: 12px; }
  #t-auto .auto-skill > img, #t-auto .auto-skill-empty { width: 44px; height: 44px; }
  #t-auto .auto-skill > small { font-size: 12px; }
  #t-auto .auto-mini-switch { width: 20px; height: 20px; flex-basis: 20px; background-size: 18px 18px; }
  #t-auto .ground-loot-tabs button { min-height: 40px; font-size: 12px; }
  #t-auto .loot-check, #t-auto .chip2 { min-height: 40px; align-items: center; font-size: 12px; }
  #t-auto .loot-advanced > summary { min-height: 40px; }
  #t-auto .ground-pick { min-height: 40px; }
  #t-auto .ground-loot-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  #t-auto .ground-loot-icon { width: 40px; height: 40px; }
  #t-auto input[type="checkbox"]:not(.ios-switch-row input):not(.auto-skill input) { width: 18px; height: 18px; background-size: 16px 16px; }
}