/* ════════════════════════════════════════════
   Arm View (裝備管理)
   ════════════════════════════════════════════ */
.arm-view { padding: 4px 0; }

.arm-slot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.arm-slot-tab {
  flex: 0 0 auto;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  color: var(--c-text-dim);
  font-size: 0.72em;
  font-family: var(--font);
  cursor: pointer;
}
.arm-slot-tab.active {
  background: rgba(200,160,60,0.12);
  border-color: var(--c-gold-dim);
  color: var(--c-gold);
}

.arm-equipped {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px;
  margin-bottom: 8px;
}
.arm-eq-name {
  font-size: 0.82em;
  color: var(--c-text);
  margin-bottom: 5px;
}
.arm-eq-name b { color: var(--c-gold); }
.arm-eq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.72em;
  color: var(--c-text-dim);
  margin-bottom: 8px;
}
.arm-eq-stats b { color: var(--c-text); font-weight: normal; }

.arm-bag-info {
  font-size: 0.72em;
  color: var(--c-text-faint);
  text-align: right;
  margin-bottom: 6px;
}

.arm-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  max-height: 280px;
  overflow-y: auto;
}
.arm-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 7px 9px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.arm-item:active { background: var(--c-surface2); }
.arm-item.selected {
  border-color: var(--c-gold);
  background: rgba(200,160,60,0.08);
  box-shadow: 0 0 0 1px var(--c-gold-dim);
}
.arm-item-name {
  font-size: 0.82em;
  color: var(--c-gold);
  margin-bottom: 3px;
  font-weight: bold;
}
.arm-item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  font-size: 0.7em;
  color: var(--c-text-dim);
  margin-bottom: 2px;
}
.arm-item-stats b { color: var(--c-text); font-weight: normal; }
.arm-item-req {
  font-size: 0.68em;
  color: var(--c-text-faint);
  margin-top: 2px;
}
.arm-item-att {
  font-size: 0.72em;
  color: #ffd380;
  margin-top: 3px;
  padding: 3px 6px;
  background: rgba(255, 200, 100, 0.08);
  border-left: 2px solid #ffb84d;
  border-radius: 3px;
  line-height: 1.4;
}
/* 已綁定標示（裝備物品 d_send=1）*/
.arm-item-bound {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 0.7em;
  background: rgba(120, 120, 120, 0.25);
  border: 1px solid rgba(180, 180, 180, 0.3);
  border-radius: 3px;
  color: #ccc;
  font-weight: normal;
  vertical-align: middle;
}
.arm-item[data-bound="1"] .arm-item-name {
  color: var(--c-gold-dim, #ccaa66);
}

/* 能力不足標示 — 對齊原版 wog_act_arm.php 標紅邏輯 */
.arm-item-lack {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7em;
  background: rgba(220, 50, 50, 0.18);
  border: 1px solid rgba(255, 100, 100, 0.4);
  border-radius: 3px;
  color: #ff7070;
  font-weight: bold;
  vertical-align: middle;
}
/* 整張卡片有能力不足 → 加紅色左邊框 */
.arm-item[data-lack="1"] {
  border-left: 3px solid rgba(255, 80, 80, 0.6);
  background: rgba(80, 20, 20, 0.08);
}
/* 個別不足的數字標紅 */
.arm-req-lack {
  color: #ff7070;
  font-weight: bold;
}
.arm-req-lack b {
  color: #ff5050;
}
/* 限定職業行 */
.arm-item-ch {
  font-size: 0.7em;
  color: var(--c-text-dim);
  margin-top: 2px;
}
.arm-item-ch b {
  color: var(--c-text);
}

.arm-actions { padding: 4px 0; }
.arm-num-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  color: var(--c-text-dim);
  margin-bottom: 6px;
}
.arm-num-row input {
  width: 70px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font);
  padding: 4px 6px;
  font-size: 0.85em;
}
.arm-num-hint {
  font-size: 0.66em;
  color: var(--c-text-faint);
  margin-left: 6px;
}
.arm-item-qty {
  color: #80d880;
  font-weight: bold;
  font-size: 0.85em;
}
.arm-item-dup {
  color: var(--c-text-faint);
  font-weight: normal;
  font-size: 0.75em;
}
.arm-action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.arm-action-btn {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 0.78em;
  font-family: var(--font);
  padding: 8px 4px;
  cursor: pointer;
}
.arm-action-btn:active {
  background: var(--c-surface3);
  border-color: var(--c-gold-dim);
}
.arm-action-btn.arm-demount-btn {
  margin-top: 6px;
  width: 100%;
  background: linear-gradient(135deg, #4a2010, #843020);
  color: #f0c0a0;
  border-color: rgba(160, 80, 40, 0.5);
}
.arm-action-btn.arm-setup-btn {
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  color: #fff;
  border: none;
}
.arm-action-btn.arm-unset-all-btn {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(135deg, #5a1010, #a02020);
  color: #ffd0d0;
  border-color: rgba(180, 60, 60, 0.5);
}
/* 一鍵穿戴 + 全卸：左右各半一行 */
.arm-dual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.arm-dual-row .arm-action-btn {
  width: 100%;
  margin-top: 0;
  padding: 10px 4px;
  font-weight: bold;
}
.arm-action-btn.arm-suit-equip-btn {
  background: linear-gradient(135deg, #105a3a, #20a060);
  color: #d0ffe0;
  border-color: rgba(60, 180, 120, 0.5);
}

.arm-move-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.arm-move-row input {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font);
  padding: 6px 8px;
  font-size: 0.78em;
}

/* ════════════════════════════════════════════
   Syn / Forge (精鍊系統, v3.10)
   ════════════════════════════════════════════ */
.arm-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  background: var(--c-surface3);
  padding: 3px;
  border-radius: var(--r-md);
}
.arm-mode-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--c-text-dim);
  font-size: 0.8em;
  font-family: var(--font);
  padding: 7px 0;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.arm-mode-tab.active {
  background: var(--c-surface2);
  color: var(--c-gold);
  font-weight: bold;
  box-shadow: 0 0 0 1px var(--c-gold-dim);
}

.syn-help {
  background: var(--c-surface);
  border: 1px solid rgba(200,160,60,0.3);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 0.74em;
  color: var(--c-text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}
.syn-help b { color: var(--c-gold); }
.syn-help-warn {
  margin-top: 6px;
  font-size: 0.92em;
  color: #d8a060;
}
.syn-help-warn a {
  color: var(--c-gold);
  text-decoration: underline;
  margin-left: 6px;
}

.syn-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.syn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 7px 10px;
  cursor: pointer;
  transition: all var(--t-fast);
}

.syn-item--ok:active { background: var(--c-surface2); }
.syn-item--ok.selected,
.syn-item--ok:has(input:checked) {
  border-color: var(--c-green);
  background: rgba(50,160,80,0.08);
  box-shadow: 0 0 0 1px rgba(50,160,80,0.4);
}
.syn-item--no {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}

.syn-item-cb {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--c-gold);
  cursor: pointer;
}
.syn-item--no .syn-item-cb { cursor: not-allowed; }

.syn-item-body { flex: 1; min-width: 0; }
.syn-item-name {
  font-size: 0.82em;
  color: var(--c-gold);
  margin-bottom: 3px;
  font-weight: bold;
}
.syn-item-flag {
  display: inline-block;
  font-size: 0.78em;
  font-weight: normal;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.syn-item--ok .syn-item-flag {
  background: rgba(50,160,80,0.18);
  color: #80d880;
}
.syn-item--no .syn-item-flag {
  background: rgba(160,50,50,0.18);
  color: #e08080;
}
.syn-item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  font-size: 0.7em;
  color: var(--c-text-dim);
}
.syn-item-stats b { color: var(--c-text); font-weight: normal; }

.syn-controls {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px;
  margin-top: 8px;
  /* sticky 在 scroll container（modal-body 或 #spa-content）底部，
     讓「精鍊方式 + 已選清單 + ⚒ 交給工匠」永遠可見，避免 user 不知道下面有 CTA */
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
}
.syn-way-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.syn-way-row label {
  font-size: 0.78em;
  color: var(--c-text-dim);
  flex-shrink: 0;
}
.syn-way-row select {
  flex: 1;
  background: var(--c-surface3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font);
  padding: 6px 8px;
  font-size: 0.82em;
}
.syn-selected-info {
  text-align: center;
  font-size: 0.75em;
  color: var(--c-text-dim);
  margin-bottom: 8px;
}
.syn-selected-info b { font-size: 1.2em; font-weight: bold; color: var(--c-gold); }

.syn-purify-btn {
  width: 100%;
  background: linear-gradient(135deg, #6a3010, #d06030);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-size: 0.92em;
  font-weight: bold;
  font-family: var(--font);
  padding: 11px;
  cursor: pointer;
  letter-spacing: 3px;
}
.syn-purify-btn:active { opacity: 0.85; }

/* 精鍊動畫鐵砧 */
.syn-anim .syn-anvil {
  animation: synShake 0.18s linear infinite;
  color: #c98a3a;
  filter: drop-shadow(0 0 12px rgba(255,140,40,0.6));
}
@keyframes synShake {
  0%   { transform: rotate(-8deg) translateY(0); }
  25%  { transform: rotate(8deg)  translateY(-2px); }
  50%  { transform: rotate(-6deg) translateY(0); }
  75%  { transform: rotate(6deg)  translateY(2px); }
  100% { transform: rotate(-8deg) translateY(0); }
}

/* ════════════════════════════════════════════
   Syn stepper (v3.15) — 同 ID 可多選 + 已選清單
   ════════════════════════════════════════════ */
.syn-step {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.syn-step-btn {
  width: 28px;
  height: 28px;
  background: var(--c-surface3);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text);
  font-size: 1.1em;
  font-weight: bold;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.syn-step-btn:active:not(:disabled) {
  background: var(--c-surface2);
  border-color: var(--c-gold-dim);
}
.syn-step-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.syn-step-val {
  min-width: 22px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  color: var(--c-gold);
}

.syn-selected-list {
  background: rgba(50,160,80,0.06);
  border: 1px dashed rgba(50,160,80,0.4);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin-bottom: 8px;
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.syn-sel-label {
  width: 100%;
  font-size: 0.7em;
  color: var(--c-text-dim);
  margin-bottom: 2px;
}
.syn-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(50,160,80,0.18);
  border: 1px solid rgba(80,200,110,0.5);
  border-radius: 10px;
  padding: 3px 4px 3px 10px;
  font-size: 0.75em;
  color: var(--c-text);
}
.syn-sel-chip b { color: #80d880; font-weight: bold; margin-left: 2px; }
.syn-sel-remove {
  width: 18px;
  height: 18px;
  background: rgba(160,50,50,0.3);
  border: none;
  border-radius: 50%;
  color: #ff8080;
  font-size: 0.95em;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.syn-sel-remove:active { background: rgba(180,60,60,0.5); }

/* 護符防爆狀態（v3.16） */
.syn-ca-status {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  font-size: 0.78em;
  border: 1px solid transparent;
}
.syn-ca-status b { color: var(--c-gold); }
.syn-ca-ok { color: #80d880; font-weight: bold; }
.syn-ca-warn { color: #f0c060; font-weight: bold; }
.syn-ca--ok {
  background: rgba(50,160,80,0.10);
  border-color: rgba(50,160,80,0.35);
}
.syn-ca--noprotect,
.syn-ca--none {
  background: rgba(200,120,40,0.10);
  border-color: rgba(200,120,40,0.35);
}
.syn-ca--unknown {
  background: var(--c-surface3);
  border-color: var(--c-border);
  color: var(--c-text-faint);
}

/* ════════════════════════════════════════════
   Synth Master 合成大師 (v3.18)
   ════════════════════════════════════════════ */
.synth-master { padding: 4px 0; }

.synth-help {
  background: var(--c-surface);
  border: 1px solid rgba(200,160,60,0.3);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 0.74em;
  color: var(--c-text-dim);
  line-height: 1.55;
  margin-bottom: 8px;
}
.synth-help b { color: var(--c-gold); }

.synth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.synth-tab {
  flex: 0 0 auto;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  color: var(--c-text-dim);
  font-size: 0.74em;
  font-family: var(--font);
  cursor: pointer;
}
.synth-tab.active {
  background: rgba(200,160,60,0.12);
  border-color: var(--c-gold-dim);
  color: var(--c-gold);
  font-weight: bold;
}

.synth-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.synth-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 9px 11px;
}
.synth-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.synth-item-name {
  font-size: 0.86em;
  color: var(--c-gold);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
}
.synth-attr {
  font-size: 0.78em;
  color: #c080ff;
  background: rgba(80,30,120,0.3);
  border: 1px solid rgba(140,80,200,0.5);
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: normal;
}
.synth-item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-size: 0.7em;
  color: var(--c-text-dim);
  margin-bottom: 3px;
}
.synth-item-stats b { color: var(--c-text); font-weight: normal; }
.synth-item-req {
  font-size: 0.68em;
  color: var(--c-text-faint);
  margin-top: 2px;
}
.synth-pro {
  margin-left: 6px;
  color: var(--c-gold-dim);
}

.synth-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.synth-detail-btn,
.synth-make-btn {
  flex: 1;
  border-radius: var(--r-sm);
  padding: 7px 4px;
  font-size: 0.78em;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid var(--c-border);
}
.synth-detail-btn {
  background: var(--c-surface2);
  color: var(--c-text);
}
.synth-detail-btn:active { background: var(--c-surface3); }
.synth-make-btn {
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  color: #fff;
  border: none;
  font-weight: bold;
}
.synth-make-btn:active { opacity: 0.85; }

.synth-detail-slot { margin-top: 8px; }
.synth-detail-loading {
  text-align: center;
  padding: 10px;
  color: var(--c-text-faint);
  font-size: 0.75em;
}
.synth-detail-err {
  background: rgba(180,60,60,0.15);
  border: 1px solid rgba(180,60,60,0.4);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  color: #f08080;
  font-size: 0.75em;
}
.synth-detail-box {
  background: rgba(50,160,80,0.06);
  border: 1px dashed rgba(50,160,80,0.4);
  border-radius: var(--r-md);
  padding: 8px 11px;
}
.synth-detail-title {
  font-size: 0.78em;
  color: var(--c-gold);
  font-weight: bold;
  margin-bottom: 5px;
}
.synth-detail-list {
  list-style: none;
  padding-left: 8px;
  margin: 0;
}
.synth-detail-list li {
  font-size: 0.78em;
  padding: 2px 0;
  color: var(--c-text);
}
.synth-detail-list b { color: #80d880; font-weight: bold; }
.synth-detail-fee {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(50,160,80,0.2);
  font-size: 0.74em;
  color: var(--c-text-dim);
}
.synth-detail-fee b { color: var(--c-gold); font-weight: bold; }

/* v3.74c: 材料對比 chip */
.synth-mat-chip {
  display: inline-block;
  font-size: 0.72em;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  font-weight: bold;
  vertical-align: middle;
}
.synth-mat-chip--ok {
  background: rgba(80,200,100,0.18);
  color: #80ff80;
  border: 1px solid rgba(80,200,100,0.5);
}
.synth-mat-chip--lack {
  background: rgba(220,80,80,0.18);
  color: #ff9090;
  border: 1px solid rgba(220,80,80,0.5);
}
.synth-mat-chip--unknown {
  background: var(--c-surface2);
  color: var(--c-text-faint);
  border: 1px solid var(--c-border);
}

.synth-pg-btn {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text-dim);
  font-size: 0.75em;
  font-family: var(--font);
  padding: 6px 10px;
  cursor: pointer;
}
.synth-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }