/* ==================== 夜間模式：核心色彩變數 ====================
   淺色（預設）在 :root，深色在 :root[data-theme="dark"]。
   目前先覆蓋佔面積最大的：頁面底色/文字、對話框、面板/狀態框、輸入框、下拉選單、表格。
   還有零星角落顏色沒轉（例如各種強調色 goldbox/obsidianbox），之後發現刺眼的地方再逐步補。
   由 settings.theme（見 index.html Vue methods）切換，存在 localStorage 裡跟著其他設定一起記住。 */
:root {
    --page-bg: #ffffff;
    --text-color: #303133;
    --dialog-bg: #ffffff;
    --dialog-header-bg: #82868d;
    --dialog-header-text: #ffffff;
    --panel-bg: #e5e9f2;
    --panel-bg2: #e2f4ff;
    --panel-accent: #d3dce6;
    --panel-accent-dark: #305079;
    --border-color: #d7dae2;
    --subtitle-bg: #dcdfe6;
    --input-bg: #ffffff;
    --input-text: #606266;
    --skilllist-bg: #ffffff;
    --row-bg: #f9fafc;
    --skill-4th-bg: #fffea7;
    --preview-stat-bg: #b3dcec;
    --skill-arg-bg: #c9e9d7;
    --enemy-group-color: #305079;
}
:root[data-theme="dark"] {
    --page-bg: #1e1f22;
    --text-color: #e4e6eb;
    --dialog-bg: #2b2d31;
    --dialog-header-bg: #4c525b;
    --dialog-header-text: #e4e6eb;
    --panel-bg: #33363c;
    --panel-bg2: #223038;
    --panel-accent: #3a3f47;
    --panel-accent-dark: #4a6fa5;
    --border-color: #454952;
    --subtitle-bg: #3a3f47;
    --input-bg: #26282c;
    --input-text: #e4e6eb;
    --skilllist-bg: #26282c;
    --row-bg: #26282c;
    --skill-4th-bg: #4d4326;
    --preview-stat-bg: #22333e;
    --skill-arg-bg: #263a2f;
    --enemy-group-color: #6b717b;
}

body {
    background: var(--page-bg) !important;
    color: var(--text-color) !important;
}

.el-dialog {
    background: var(--dialog-bg) !important;
    color: var(--text-color) !important;
}
.el-dialog__title,
.el-dialog__body {
    color: var(--text-color) !important;
}

.bg-purple-dark {
    background: var(--panel-accent-dark) !important;
}
.bg-purple {
    background: var(--panel-accent) !important;
}
.bg-purple-light {
    background: var(--panel-bg) !important;
}
.bg-purple-light2 {
    background: var(--panel-bg2) !important;
}
.bg-4thskill-light {
    background: var(--skill-4th-bg) !important;
}
.row-bg {
    background-color: var(--row-bg) !important;
}
.statusbox {
    border-color: var(--border-color) !important;
}
.statussavebox {
    border-color: var(--border-color) !important;
    background: var(--row-bg) !important;
}
.optionbox {
    border-color: var(--border-color) !important;
}
.titlebox {
    border-color: var(--border-color) !important;
    background: var(--dialog-header-bg) !important;
    color: var(--dialog-header-text) !important;
}
.aboutbox {
    background: var(--dialog-bg) !important;
    color: var(--text-color) !important;
}
.subtitlebox {
    border-color: var(--border-color) !important;
    background: var(--subtitle-bg) !important;
}
.previeweffectbox3 {
    background: var(--dialog-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--border-color) !important;
}
.SkillList-container {
    background-color: var(--skilllist-bg) !important;
    border-color: var(--border-color) !important;
}
.boxborder {
    border-color: var(--border-color) !important;
}

/* Element UI 表單元件深色模式（CDN 內建樣式預設是白底黑字，優先權比自訂 class 高，需要 !important） */
.el-input__inner,
.el-textarea__inner {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
.el-select-dropdown,
.el-popper {
    background-color: var(--dialog-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
.el-select-dropdown__item {
    color: var(--text-color) !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: var(--panel-bg) !important;
}
.el-table,
.el-table th,
.el-table tr,
.el-table td {
    background-color: var(--dialog-bg) !important;
    color: var(--text-color) !important;
}
.el-scrollbar,
.el-card {
    background: transparent;
    color: var(--text-color);
}
.el-tabs__header,
.el-tabs--border-card {
    background: var(--dialog-bg) !important;
    border-color: var(--border-color) !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    background: var(--panel-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background: var(--dialog-bg) !important;
}
.el-tabs__content {
    background: transparent;
    color: var(--text-color);
}
.el-collapse,
.el-collapse-item__wrap,
.el-collapse-item__header {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* "plain" 按鈕（例如裝備欄位的「編輯」）在淺色模式下是白底+淡色邊框，很正常；
   但深色模式下 Element UI 預設的淡色底（例如淡綠色）會變成一塊刺眼的亮色方塊、對比也很差，
   所以深色模式下改成「深色半透明底 + 亮色文字/邊框」的outline風格，其餘（非plain）按鈕維持原本樣式不變 */
:root[data-theme="dark"] .el-button.is-plain {
    background: transparent;
}
:root[data-theme="dark"] .el-button--success.is-plain {
    color: #67c23a !important;
    border-color: #4d8a2a !important;
    background-color: rgba(103, 194, 58, 0.12) !important;
}
:root[data-theme="dark"] .el-button--primary.is-plain {
    color: #66b1ff !important;
    border-color: #3a7bc8 !important;
    background-color: rgba(64, 158, 255, 0.12) !important;
}
:root[data-theme="dark"] .el-button--warning.is-plain {
    color: #ebb563 !important;
    border-color: #c78a3d !important;
    background-color: rgba(230, 162, 60, 0.12) !important;
}
:root[data-theme="dark"] .el-button--danger.is-plain {
    color: #f78989 !important;
    border-color: #c85555 !important;
    background-color: rgba(245, 108, 108, 0.12) !important;
}
:root[data-theme="dark"] .el-button--info.is-plain {
    color: #b1b3b8 !important;
    border-color: #6b6d70 !important;
    background-color: rgba(144, 147, 153, 0.12) !important;
}

/* 沒有指定 type（或 type="default"）的按鈕，例如輔助技能 dialog 左側的職業篩選鈕，
   Element UI 預設是白底深字，深色模式下沒套用過會刺眼；有顏色的 type
   （primary/success/warning/danger/info/text）維持原本樣式，這裡排除掉不動它們。 */
:root[data-theme="dark"] .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.el-button--text) {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* el-switch 的圓形把手在 Element UI 預設是白色，深色模式下改成黑色 */
:root[data-theme="dark"] .el-switch__core:after {
    background-color: #1e1f22 !important;
}

/* 超連結在深色模式下：瀏覽器預設沒點過/點過都是深藍/深紫，在深色背景幾乎看不出來是可以點的，
   改成統一的綠色（跟按鈕的success綠一致），不分點過沒點過。只影響沒有自己指定顏色的連結
   （例如巴哈連結用inline style寫死steelblue的還是維持原樣，這裡沒加!important不會蓋過它）。 */
:root[data-theme="dark"] a,
:root[data-theme="dark"] a:visited {
    color: #67c23a;
}

/* 消耗品 Dialog 分頁：跟左邊留一點距離，不要貼齊面板邊緣 */
.consumable-tabs > .el-tabs__header {
    padding-left: 12px;
}
/* 分頁文字預設是 Element UI 寫死的深灰色，深色模式下幾乎看不到，改用文字色/綠色(啟用中) */
:root[data-theme="dark"] .consumable-tabs .el-tabs__item {
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .consumable-tabs .el-tabs__item.is-active {
    color: #67c23a !important;
}

/* AI裝備解析對話框的左側分頁，同樣的深色模式文字看不到問題 */
:root[data-theme="dark"] .ai-parser-tabs .el-tabs__item {
    color: var(--text-color) !important;
}
:root[data-theme="dark"] .ai-parser-tabs .el-tabs__item.is-active {
    color: #67c23a !important;
}

/* 裝備 titlebox 上方預留空間 */
.equip-titlebox-fix {
    margin: 5px 0px 0px 0px;
}
/* 裝備部位清空按鈕（X 圖示），縮小到跟輸入框高度接近 */
.equip-clear-icon-btn.el-button.is-circle {
    padding: 4px;
    font-size: 12px;
}
/* 裝備區塊專用，預留 title 高度 50px，另外多預留 42px 給快速跳轉下拉列 */
.body2col-container-equip {
    height: calc(100vh - (50px + 35px + 52px + 42px));
}
.body2col-container-panel {
    height: calc(100vh - (50px + 35px + 62px)); /* 比原本多預留56px給按鈕列 */
}

/* 新增：第四區面板切換按鈕美化 */
.panel-switch-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    margin-bottom: 8px;
    background: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0 16px;
}
/* 讓按鈕內容垂直水平置中，主色與 .bg-purple 一致 */
.panel-switch-btns .el-button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 4px;
    padding: 0 4px;
    font-size: 15px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
    background: #d3dce6;
    color: #305079;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.panel-switch-btns .el-button > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panel-mode-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}
.panel-mode-btns .el-button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.panel-mode-btns .el-button + .el-button {
    margin-left: 4px;
}
.panel-switch-btns .el-button.primary, .panel-switch-btns .el-button--primary {
    background: #305079;
    color: #fff;
    box-shadow: 0 2px 8px rgba(67,100,247,0.08);
}
.panel-switch-btns .el-button:not(.el-button--primary) {
    background: #d3dce6;
    color: #305079;
    border: none;
}
html, body {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: auto;
    /* 版面設計是靠 calc(100vh - Npx) 精算出 4 欄各自的高度，整頁本身不應該捲動，
       只讓欄位內部自己捲。underflow 誤差沒差不了幾 px，但保險起見還是鎖死 Y 軸，
       避免以後內容一多又冒出外層捲軸。 */
    overflow-y: hidden;
}

#App {
    min-width: 1600px;
    width: 100%;
}

/* Element UI 開對話框時會幫 body 加這個 class，開對話框時同時會把 body 鎖成
   overflow:hidden（水平+垂直都鎖），並且常常會順手加 padding-right/padding-bottom
   去補償捲軸消失的寬度／高度（避免版面跳動）。但這樣補出來的空白在我們的版面
   （捲軸本來就很細或被我們自己鎖住）反而只會留下一塊沒用的空白，所以兩個方向
   都直接強制歸零。 */
body.el-popup-parent--hidden {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

[v-cloak] {
    display: none;
}

.el-row {
    margin-bottom: 2px;
}

/* 主要 4 欄版面的最外層 row：各欄高度是用 calc(100vh - Npx) 精算過的，
   不能再吃到 .el-row 預設的 margin-bottom，不然整頁會多出幾 px 導致出現外層捲軸 */
.main-content-row {
    margin-bottom: 0;
}

/* 裝備清單彈窗：操作欄三個按鈕（刪除/預覽/載入）緊靠在一起 */
.equipdb-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.equipdb-delete-link {
    color: #F56C6C;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.equipdb-delete-link:hover {
    color: #f78989;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
    background: #305079;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}
.bg-purple-light2 {
    background: #e2f4ff;
}

.bg-4thskill-light {
    background: #fffea7;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.text-wrapper {
    white-space: pre-wrap;
}

.detail-summary {
    color: #2d6cdf;
    cursor: pointer;
}

.detail-summary:hover {
    text-decoration: underline;
}

.detail-breakdown {
    margin-top: 2px;
}

.detail-breakdown-item {
    color: #7a7a7a;
    font-size: 12px;
    line-height: 1.3;
}

.ROCalTitle {
    height: 50px;
    position: relative;
    color: white;
    background: #303133;
    border-radius: 4px;
}

.ROCalFooter {
    height: 35px;
    color: white;
    background: #303133;
    border-radius: 4px;
}

.bodycol-container {
    height: calc(100vh - (50px + 35px));
}

.body2col-container {
    height: calc(100vh - (50px + 35px + 42px));
}

.Dialogue-container {
    height: calc(100vh - (50px + 35px + 24px));
}

.Dialogue-container .el-dialog {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.Dialogue-container .el-dialog__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.EquipDBList-container {
    height: calc(100vh - (50px + 35px + 24px + 260px));
}

/* 編輯敵方 dialog 右半邊：el-scrollbar 的 wrap，內容超過 dialog 高度時獨立捲動 */
.EnemyEditForm-container {
    height: calc(100vh - (50px + 35px + 24px + 220px));
}

.EquipList-container {
    height: calc(100vh - (50px + 35px + 240px));
}

.StatusList-container {
    height: calc(100vh - (50px + 35px + 140px));
}

.AspdPenaltyTableControlRow {
    flex: 0 0 auto;
}

.AspdPenaltyTable-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.AspdPenaltyTableHeaderRow {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #606266;
    color: white;
    width: fit-content;
    min-width: 100%;
}

.AspdPenaltyTableNameCell {
    font-size: 14px;
    white-space: nowrap;
}

/* 非中文語系時武器欄標題文字較長，縮小字體、允許換兩行 */
.AspdPenaltyTableColHeaderNarrow {
    font-size: 11px !important;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

.SkillList-container {
    height: 60vh;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #fff;
}

.Dialogue-container .support-skill-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    height: 100%;
}

.Dialogue-container .support-skill-dialog-header {
    flex: 0 0 auto;
}



.Dialogue-container .support-skill-dialog-body .SkillList-container {
    height: 100%;
    max-height: 100%;
}

.Dialogue-container .support-skill-dialog-body .optionbox {
    height: 100%;
    min-height: 0;
}

.Dialogue-container .support-skill-dialog-body .el-scrollbar {
    height: 100%;
}

.Dialogue-container .support-skill-classlist {
    overflow-y: auto;
}

.Dialogue-container .support-skill-classlist .el-button {
    font-size: 16px;
}

.Dialogue-container .support-skill-list .el-scrollbar__wrap {
    height: 100%;
    overflow-y: auto;
}

.Dialogue-container .support-skill-classlist .el-scrollbar__wrap {
    height: 100%;
    overflow-y: auto;
}

/* 確保Element UI的滾動條樣式正確 */
.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}

.el-scrollbar .el-scrollbar__view {
    padding: 5px;
}

.EquipText-container {
    height: calc(100vh - (50px + 35px + 130px));
}

.ThanksList-container {
    height: calc(100vh - (50px + 35px + 130px));
}

.Announce-container {
    height: calc(60vh - 40px);
}

.UpdateList-container {
    height: calc(100vh - 220px);
}

.AboutList-container {
    height: calc(100vh - (50px + 35px + 250px));
}

.EffectList-container {
    height: calc(100vh - (50px + 35px + 24px));
}

.EquipEffectList-container {
    height: calc(100vh - (50px + 35px + 240px));
}

/* AI裝備解析對話框：左右兩欄各自跟著對話框的實際高度撐滿、內部各自捲動。
   注意：.Dialogue-container .el-dialog { display:flex } 這條規則其實從未生效過
  （custom-class 是直接加在 .el-dialog 本身，Dialogue-container 跟 el-dialog 是同一個元素，
   descendant selector 永遠配對不到），所以 .el-dialog__body 的 flex:1 1 auto 也跟著失效、
   body 只會撐到內容的自然高度——不能指望從 el-dialog 往下继承 flex 高度，要在這裡直接用
   跟 .Dialogue-container 同一種 viewport 算法給高度，才會真的跟著對話框可視高度縮放。 */
.ai-parser-actions-row {
    margin-bottom: 10px;
}

.ai-parser-columns-row {
    height: calc(100vh - 274px);
    max-height: calc(100vh - 274px);
    min-height: 0;
}

.ai-parser-column {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ai-parser-column-header {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.ai-parser-column-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.ai-parser-step-label {
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--text-color);
}

.RaceSelectDialog {
    display: flex;
    flex-direction: column;
}

.RaceSelectDialog .el-dialog__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 6px 0;
    overflow: hidden;
}

.RaceSelectDialog .el-scrollbar {
    flex: 1 1 auto;
    height: 100%;
}

.RaceSelectList-container {
    height: 100%;
}

.RaceSelectDialog .el-scrollbar__wrap {
    height: 100%;
}

.RaceSelectDialog .el-scrollbar__view {
    padding: 0;
}

.ElementSelectDialog {
    display: flex;
    flex-direction: column;
}

.ElementSelectDialog .el-dialog__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 6px 0;
    overflow: hidden;
}

.ElementSelectDialog .el-scrollbar {
    flex: 1 1 auto;
    height: 100%;
}

/* 無視防禦細部設定：階級/種族併排，超過 dialog 高度時區塊內捲動 */
.BypassDetailList-container {
    max-height: calc(100vh - 280px);
}

.ElementSelectList-container {
    height: 100%;
}

.SelectDialogCenter .el-table th,
.SelectDialogCenter .el-table td,
.SelectDialogCenter .el-table .cell {
    text-align: center;
}

.SelectDialogCenter .statusbox {
    max-width: 720px;
    margin: 0 auto;
}

.SelectDialogCenter .el-table {
    margin: 0 auto;
}

.ElementSelectDialog .el-scrollbar__wrap {
    height: 100%;
}

.ElementSelectDialog .el-scrollbar__view {
    padding: 0;
}

.ConsumableList1-container {
    height: calc(100vh - (50px + 35px + 212px));
}

.ConsumableList2-container {
    height: calc(100vh - (50px + 35px + 160px));
}


.DBlist-container {
    height: calc(40vh - (50px));
}

.effectline {
    line-height: 3;
    margin: auto;
}

.boxborder {
    padding: 5px 5px;
    border: 1px solid #d7dae2;
    border-radius: 4px;
    min-height: 100px;
}

.EffectType.effect-tag-phys,
.EffectType.effect-tag-magic {
    display: inline-block;
    position: relative;
    padding-left: 12px;
}

.EffectType.effect-tag-phys::before,
.EffectType.effect-tag-magic::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.EffectType.effect-tag-phys::before {
    background: #f0a04b;
}

.EffectType.effect-tag-magic::before {
    background: #4aa3ff;
}

.statusbox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
}

.statussavebox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    background: #f9fafc;
}

.previeweffectbox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    text-align: center;
    background: #606266;
    color: white;
}

.previeweffectbox2 {
    border-radius: 2px;
    text-align: center;
    background: var(--preview-stat-bg);
}

.previeweffectbox3 {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    text-align: center;
    background: white;
    color: #606266;
}

.optionbox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
}

.optionsubbox {
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
    background: var(--skill-arg-bg);
}

.skillnametext {
    font-family: Microsoft JhengHei;
    font-size: 18px;
    font-weight: bold;
    color: #2c774e;
}

.skillline {
    line-height: 2;
    margin: auto;
    text-align: center;
}

.skilltag {
    border: 1px solid #0c7a47;
    border-radius: 4px;
    text-align: center;
}

.obsidianbox {
    text-align: center;
    background: #e0fdff;
    color:#0a0b38;
}

.goldbox {
    text-align: center;
    background: #fff09a;
    color:#0a0b38;
}

.textcenter {
    text-align: center;
    vertical-align: middle;
}

.equip-slot-label {
    font-weight: bold;
    font-size: 13px;
    line-height: 1.8;
}

.titlebox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
    background: #606266;
    color: white;
}

.aboutbox {
    background: white;
    color: black;
}

.subtitlebox {
    border: 1px solid #d7dae2;
    border-radius: 2px;
    min-height: 40px;
    text-align: center;
    background: #DCDFE6;
}

.ElementTableCellBT100 {
    text-align: center;
    vertical-align: middle;
    color: rgb(33, 153, 79);
    background:rgb(178, 253, 207);
    font-size: 24px;
    font-weight: bold;
}

.ElementTableCellST100 {
    text-align: center;
    color: white;
    background:rgb(240, 169, 76);
}

.ElementTableCellST50 {
    text-align: center;
    color: rgb(201, 46, 46);
    background:rgb(252, 175, 175);
    font-size: 24px;
    font-weight: bold;
}

.ElementTableCellST25 {
    text-align: center;
    color: rgb(70, 70, 70);
    background:rgb(170, 170, 170);
    font-size: 24px;
    font-weight: bold;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
}

.ElementRowColTitle {
    border-radius: 2px;
    font-size:21px;
    text-align: center;
    border: 1px solid #0c7a47;
    border-radius: 2px;
}

/* 修正下拉選單在底部時的顯示問題 */
.el-select-dropdown {
    max-height: 300px !important;
    z-index: 9999 !important;
    padding-bottom: 8px !important;
    /* 移除這裡的 overflow-y，讓內部的 wrap 處理滾動 */
}

.el-select-dropdown.is-multiple .el-select-dropdown__item {
    padding-right: 40px;
}

/* 確保下拉選單在空間不足時能向上展開 */
.el-popper[x-placement^="top"] {
    margin-bottom: 12px;
}

.el-popper[x-placement^="bottom"] {
    margin-top: 12px;
}

/* 當下拉選單項目過多時，限制高度並添加滾動條 - 只在這裡設置滾動 */
.el-select-dropdown__wrap {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
}

.el-select-dropdown__list {
    padding: 6px 0 8px 0 !important;
}

/* 確保選項項目有足夠的底部空間 */
.el-select-dropdown__item {
    padding: 8px 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 1px !important;
}

.el-select-dropdown__item:last-child {
    margin-bottom: 4px !important;
}

/* 修正滾動條樣式 */
.el-select-dropdown__wrap::-webkit-scrollbar {
    width: 6px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 強制修正選單底部空間問題 */
.el-scrollbar__view {
    padding-bottom: 10px !important;
}

/* 確保彈出層有足夠的z-index */
.el-popper {
    z-index: 10000 !important;
}

/* 自定義下拉選單樣式，解決底部遮擋問題 */
.custom-select-dropdown {
    max-height: 300px !important;
    /* 移除 overflow-y，讓 __wrap 處理滾動 */
    padding: 8px 0 12px 0 !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

.custom-select-dropdown .el-select-dropdown__item {
    padding: 8px 20px !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

.custom-select-dropdown .el-select-dropdown__item:last-child {
    margin-bottom: 8px !important;
    padding-bottom: 12px !important;
}

.custom-select-dropdown .el-select-dropdown__wrap {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
}

.custom-select-dropdown .el-scrollbar__view {
    padding-bottom: 12px !important;
}

/* 強制確保所有下拉選單都有足夠的底部空間 */
.el-select-dropdown__item:last-of-type {
    margin-bottom: 8px !important;
    padding-bottom: 12px !important;
}

/* 統一的細滾動軸樣式（跟裝備清單的 el-scrollbar 外觀一致），套用在需要自己捲動的
   plain div 上（不是所有地方都用 el-scrollbar 元件，例如 AI解析/技能樹左右欄）。
   Firefox 用 scrollbar-width/-color，Chromium 系用 ::-webkit-scrollbar 系列。 */
/* Chromium 121+ 只要元素有設 scrollbar-width / scrollbar-color，就會忽略下面的 ::-webkit-scrollbar 樣式，
   改畫原生（Windows 上帶上下箭頭的粗捲軸），所以標準屬性只給不支援 ::-webkit-scrollbar 的瀏覽器（Firefox）。 */
@supports not selector(::-webkit-scrollbar) {
    .themed-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
    }
}
.themed-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.themed-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.themed-scrollbar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.themed-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--panel-accent-dark);
}

/* ==================== 技能樹配點 dialog ====================
   .SkillTreeDialog 跟 .el-dialog / .Dialogue-container 是同一個元素（custom-class
   直接加在 el-dialog 本身），所以 `.Dialogue-container .el-dialog {...}` 這種
   descendant selector 永遠配對不到自己，等於沒套用（見上面 ai-parser 那段的說明）。
   這裡改用直接選 .SkillTreeDialog 本身補上 display:flex + overflow:hidden，讓
   el-dialog header/body 之間、body 內部一路都是連續的 flex column，
   高度會自動貼齊對話框實際可視高度，不用再猜 viewport 減幾 px。 */
.SkillTreeDialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.skill-tree-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.skill-tree-columns-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

.skill-tree-pages-col {
    /* 明確給固定寬度（7欄*68px + 欄間距 + 捲動軸緩衝），不要用 flex:0 0 auto 的
       shrink-to-fit 自動量——欄位裡的「選擇職業」那個 el-row 寬度計算方式跟
       .skill-tree-grid 不一樣，混在一起讓瀏覽器自動量寬度時，量出來的結果比
       技能格子網格實際需要的寬很多，會把右側詳細資料欄一路往右擠到 dialog 外面。
       改成固定寬度後，裡面的 el-row（select/按鈕）就只會乖乖縮進這個寬度內。
       這個欄位本身不再捲動——上面「選擇職業／操作說明／職業跳轉按鈕」固定不動，
       只有下面 .skill-tree-pages-scroll 那塊捲動，用 flex column 疊起來。 */
    box-sizing: border-box;
    flex: 0 0 552px;
    width: 552px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.skill-tree-pages-header {
    flex: 0 0 auto;
}

.skill-tree-jump-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.skill-tree-pages-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* 技能格子右邊多留一點空間再放捲動軸，滑鼠去抓捲動軸時才不會不小心滑到
       最右邊那排技能方塊上（wheel/click 都會觸發配點）。 */
    padding-right: 40px;
}

.skill-tree-info-banner {
    border: 1px solid var(--panel-accent-dark);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.skill-tree-detail-col {
    /* 用 flex-grow 撐滿剩下的寬度，讓捲動軸貼齊 dialog 右邊，但用 max-width 蓋住
       不會無限被撐寬；min-width 保底避免內容太窄看不清楚 */
    flex: 1 1 320px;
    min-width: 300px;
    max-width: 420px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
    padding-right: 8px;
}

.skill-tree-page {
    margin-bottom: 18px;
}

.skill-tree-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    color: var(--text-color);
}

.skill-tree-points {
    font-size: 13px;
    color: var(--text-color);
}

.skill-tree-points.over {
    color: #f56c6c;
    font-weight: bold;
}

.skill-tree-points-note {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
}

.skill-tree-global-warn {
    color: #f56c6c;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 10px;
}

.skill-tree-global-warn.invisible {
    /* 保留這行的高度，不管有沒有警示文字都佔位，避免出現/消失時下面排版跳動 */
    visibility: hidden;
}

.skill-tree-grid {
    display: grid;
    grid-template-columns: repeat(7, 68px);
    gap: 6px;
}

.skill-square {
    width: 68px;
    height: 68px;
    box-sizing: border-box;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 4px 2px;
    position: relative;
}

.skill-square:hover {
    border-color: var(--panel-accent-dark);
}

.skill-square.zero {
    opacity: 0.55;
}

.skill-square.maxed {
    border-color: #e6a23c;
}

.skill-square.highlight {
    border-color: #67c23a;
    box-shadow: 0 0 6px 1px #67c23a;
}

.skill-square.prereq-hover {
    background: var(--preview-stat-bg);
    border-color: var(--panel-accent-dark);
}

.skill-square.selected {
    border-color: #409eff;
    box-shadow: 0 0 0 1px #409eff;
}

.skill-square.quest {
    border-style: dashed;
}

.skill-square-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.skill-square-name {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: var(--text-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.skill-square-level {
    font-size: 11px;
    color: var(--text-color);
    margin-top: 2px;
}

.skill-square.quest .skill-square-level {
    font-style: italic;
    opacity: 0.75;
}

.skill-tree-detail-empty {
    color: var(--text-color);
    opacity: 0.6;
    font-size: 13px;
    padding: 12px 4px;
}

.skill-tree-detail-apply-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.skill-tree-detail-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
}

.skill-tree-detail-nameen {
    font-weight: normal;
    font-size: 13px;
    opacity: 0.75;
}

.skill-tree-detail-id {
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.55;
    margin-bottom: 2px;
}

.skill-tree-detail-sub {
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 6px;
}

.skill-tree-detail-desc {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 8px;
}

.skill-tree-detail-label {
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 4px;
}

.skill-tree-need-item {
    font-size: 13px;
    color: #f56c6c;
    cursor: pointer;
    margin-bottom: 2px;
}

.skill-tree-need-item.ok {
    color: #67c23a;
}

.skill-tree-need-item:hover {
    text-decoration: underline;
}

.skill-tree-lv-table-wrap {
    overflow-x: auto;
}

.skill-tree-lv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--text-color);
}

.skill-tree-lv-table th,
.skill-tree-lv-table td {
    border: 1px solid var(--border-color);
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
}

.skill-tree-lv-table tr.active {
    background: var(--preview-stat-bg);
}

/* 敵方減傷 PVE / GVG 分組圓角框（敵方面板與編輯敵方 dialog 共用） */
.enemy-reduce-group {
    position: relative;
    border: 1px solid var(--enemy-group-color);
    background: var(--page-bg);
    border-radius: 8px;
    margin: 14px 2px 6px;
    padding: 12px 4px 4px;
}
.enemy-reduce-group-title {
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--enemy-group-color);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
}
/* 敵方面板 Stat 底下展開/收起 PVE、GVG、抗性 的細按鈕 */
.enemy-detail-toggle {
    margin: 2px 2px 4px;
    border: 1px dashed var(--enemy-group-color);
    border-radius: 8px;
    color: var(--enemy-group-color);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.enemy-detail-toggle:hover {
    background: var(--preview-stat-bg);
}
/* 敵方抗性摘要（例：全 5% / 人形 10%），項目多時換行 */
.enemy-resist-summary {
    font-size: 12px;
    line-height: 1.4;
    word-break: break-all;
}