body { font-family: -apple-system, sans-serif; background: #121214; color: #fff; margin: 0; padding: 20px; user-select: none; }

        .container { max-width: 1300px; margin: 0 auto; }

        

        /* 需要被导出的全净版包装盒 */

        .capture-zone { background: #121214; padding: 15px; border-radius: 8px; }

        /* 顶部标题区 */

        header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #29292e; padding-bottom: 10px; margin-bottom: 15px; }

        .title-input { background: transparent; border: 1px dashed transparent; color: #fff; font-size: 24px; font-weight: bold; width: 50%; outline: none; padding: 4px; }

        .title-input:hover, .title-input:focus { border-color: #04d361; background: #1a1a1e; }

        .lang-btn { background: #29292e; color: #fff; border: none; padding: 6px 12px; margin-left: 5px; cursor: pointer; border-radius: 4px; font-weight: bold; }

        .lang-btn.active { background: #04d361; color: #000; }

        

        /* 📷 导出按钮样式 */

        .export-img-btn { background: linear-gradient(135deg, #04d361, #00bfff); color: #000; border: none; padding: 8px 16px; font-weight: bold; border-radius: 4px; cursor: pointer; margin-left: 15px; font-size: 13px; }

        .export-img-btn:hover { transform: scale(1.03); opacity: 0.9; }

        /* 5人主力阵容 */

        .team-grid { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }

        .slot { background: #1a1a1e; border: 1px solid #29292e; border-radius: 4px; padding: 10px 4px; text-align: center; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }

        

        /* 主力角色拖拽把手 */

        .drag-handle { background: transparent; border: none; cursor: grab; }

        .drag-handle:active { cursor: grabbing; }

        .drag-hint { display: none; }

        .hero-card-stack { width: 100%; height: 300px; border-radius: 6px; overflow: hidden; background: #0c0c0e; border: 1px solid #34343a; display: flex; flex-direction: column; position: relative; }

        .hero-avatar-box, .card-box { width: 100%; overflow: hidden; background: #202024; position: relative; }

        .hero-avatar-box .slot-name-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.65);
            color: #fff;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            padding: 3px 4px;
            z-index: 3;
            overflow: hidden;
            box-sizing: border-box;
        }

        .hero-avatar-box { flex: 0 0 auto; height: 140px; border-bottom: 1px solid #34343a; }

        /* Remove button on hero avatar top-right */
        .hero-card-remove-btn {
            position: absolute;
            top: 4px;
            right: 4px;
            background: #f75a68;
            border: none;
            color: white;
            padding: 2px 6px;
            font-size: 11px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 20;
        }

        .card-box .card-name-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.65);
            color: #fff;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            padding: 3px 4px;
            z-index: 3;
            overflow: hidden;
            box-sizing: border-box;
        }

        .card-box { flex: 1 1 auto; box-shadow: inset 0 14px 18px rgba(4,211,97,0.12); cursor: pointer; }

        .bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }

        /* Hero element badge inside hero-card-stack */
        .hero-element-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 10;
            pointer-events: none;
        }
        .hero-element-badge .element-tag {
            display: inline-block;
            background: transparent;
            border: none;
            padding: 2px;
        }
        .hero-element-badge .element-tag img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        .card-box.empty { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; box-sizing: border-box; color: #666; font-size: 12px; font-weight: bold; }

        .compact-card-select { margin-top: 8px; }

        .remove-btn { background: #f75a68; border: none; color: white; padding: 2px 6px; font-size: 11px; border-radius: 4px; cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 10; }

        

        /* 装备栏与独立卡片槽 */

        .gear-select-container { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

        .gear-row { display: flex; align-items: center; background: #0c0c0e; border: 1px solid #29292e; border-radius: 4px; padding: 4px; }
        .gear-type-tag { width: 30px; min-width: 30px; color: #00bfff; font-size: 10px; font-weight: bold; text-align: center; margin-right: 5px; }

        .gear-icon { width: 22px; height: 22px; border-radius: 3px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #222; margin-right: 6px; }

        .gear-selector { background: transparent; color: #e1e1e6; border: none; font-size: 12px; width: 100%; cursor: pointer; outline: none; }

        .gear-selector option { background: #1a1a1e; color: #fff; }

        /* 2x2 gear grid for team slots */
        .gear-grid-2x2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
            margin: 6px 2px 0;
            width: 100%;
            box-sizing: border-box;
        }
        .gear-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0c0c0e;
            border: 1px dashed #3a3a44;
            border-radius: 3px;
            padding: 0;
            cursor: pointer;
            width: 100%;
            height: 120px;
            position: relative;
            overflow: hidden;
        }
        .gear-cell.filled {
            border: 1px dashed #00bfff;
            background: #132230;
        }
        .gear-cell .bg-img {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 3px;
        }
        .gear-cell-filter-tags {
            position: absolute;
            bottom: 1px;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(0,0,0,0.3);
            padding: 2px 2px;
            gap: 1px;
            z-index: 2;
            line-height: 1;
        }
        .gear-filter-tag {
            font-size: 9px;
            color: #ffb86c;
            padding: 1px 3px;
            border-radius: 2px;
            border: 1px solid #5a4a20;
            white-space: nowrap;
        }

        .gear-empty-icon {
            font-size: 16px;
            color: #5a5a62;
            font-weight: bold;
        }
        .gear-type-select { background: #121214; border: 1px solid #29292e; color: #fff; padding: 6px; border-radius: 4px; font-size: 11px; outline: none; width: 100%; box-sizing: border-box; }
        .gear-type-select option { background: #1a1a1e; color: #fff; }
        .gear-preview-type { display:block; margin-top:3px; font-size:9px; color:#00bfff; }

        

        

        /* 左右布局（左宠物，右战术板） */

        .battle-layout-container { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 2fr); gap: 10px; align-items: center; background: #1a1a1e; border: 1px solid #29292e; padding: 6px 10px; border-radius: 6px; }

        .battle-layout-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

        .section-title-sub { font-weight: bold; font-size: 15px; color: #ffb86c; margin-bottom: 12px; text-align: center; }

        

        /* 宠物系统结构 */

        .pet-panel-side { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; }

        .pet-grid-3 { display: grid; grid-template-columns: 170px 8px 170px 8px 170px 36px; gap: 1px; min-height: 0; align-items: center; }

        .pet-cell { background: #121214; border: none; border-radius: 0; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; padding: 8px; position: relative; box-sizing: border-box; }

        .pet-cell.filled { }

        .pet-label-tag { font-size: 11px; font-weight: bold; color: #00bfff; background: rgba(0,191,255,0.15); padding: 2px 6px; border-radius: 3px; min-width: 40px; text-align: center; }

        .pet-left-info { display: flex; align-items: center; gap: 8px; }

        .pet-avatar-img { width: 34px; height: 34px; border-radius: 4px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #29292e; }

        .pet-name-text { font-size: 14px; font-weight: bold; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; max-width: 100%; }

        .pet-select-menu { background: #202024; color: #fff; border: 1px solid #29292e; font-size: 11px; border-radius: 4px; padding: 3px 6px; outline: none; cursor: pointer; max-width: 110px; }
        .pet-main-line { display: flex; align-items: center; gap: 6px; width: 100%; }
        .pet-gem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; width: 100%; }
        .pet-gem-cell { display: flex; align-items: center; gap: 4px; background: #0c0c0e; border: 1px solid #29292e; border-radius: 4px; padding: 3px; }
        .pet-gem-cell .bg-img { width: 18px; height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 2px; background-color: #29292e; }
        .pet-gem-cell select { min-width: 0; width: 100%; background: transparent; border: none; color: #ccc; font-size: 10px; outline: none; }
        .pet-gem-cell option { background: #1a1a1e; color: #fff; }
        /* 宝石竖排列（在宠物右侧） */
        
        
        
        

        .pet-clear-btn { position: absolute; top: 4px; right: 4px; background: none; border: none; color: #f75a68; font-size: 16px; cursor: pointer; z-index: 10; padding: 0; line-height: 1; opacity: 0; transition: opacity 0.15s; }

        .pet-cell:hover .pet-clear-btn { opacity: 0.8; }

        /* 英雄编队站位 */

        .hero-matrix-side { display: flex; flex-direction: column; width: 100%; min-width: 0; }

        .matrix-header-3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }

        .matrix-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-height: 0; align-items: center; }

        .matrix-column { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 178px; background: rgba(0,0,0,0.15); border-radius: 6px; padding: 4px; box-sizing: border-box; width: 100%; min-width: 0; position: relative; }
        /* Column position icon (top-right) */
        .matrix-col-pos-icon { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; object-fit: contain; z-index: 4; pointer-events: none; }

       
/* Header label items */
.matrix-header-item { display: flex; align-items: center; justify-content: center; gap: 4px; }
.matrix-header-icon { width: 22px; height: 22px; object-fit: contain; }
.matrix-cell { background: #121214; border: 2px dashed #29292e; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 6px 12px; min-height: 40px; box-sizing: border-box; position: relative; transition: all 0.2s ease; width: 100%; flex: 1; }

       .matrix-cell.filled { border-style: solid; border-color: #04d361; background: #1c241e; justify-content: flex-start; cursor: grab; }
        .matrix-cell-single { flex: 1 1 100%; min-height: 30px; }
       .matrix-cell-half { flex: 0 0 auto; height: calc((178px - 8px - 8px) / 2); min-height: 0; }

        .matrix-cell.filled:active { cursor: grabbing; background: #223026; }

        .matrix-cell.drag-hover { border-color: #ffb86c; background: #25211a; }

        .matrix-left { display: flex; align-items: center; gap: 10px; width: 100%; pointer-events: none; }

        .matrix-avatar { width: 29px; height: 38px; border-radius: 4px; object-fit: contain; background: #29292e; }

        .matrix-name { font-size: 16px; font-weight: bold; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; max-width: 100%; }

        .matrix-cell-clear { position: absolute; top: 4px; right: 4px; background: rgba(247,90,104,0.3); border: none; color: #fff; border-radius: 3px; font-size: 9px; cursor: pointer; padding: 1px 4px; display: none; z-index: 15; }

        .matrix-cell.filled:hover .matrix-cell-clear { display: block; }

        

        /* 技能序列与可选备注 */

        /* 卡池与大资产库预览 */
/* ═══ Timeline (Skill Axis) ═══ */
.timeline-section {
    background: #1a1a1e;
    border: 1px solid #29292e;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.timeline-header-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: none;
}
.timeline-container-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.timeline-round-row-wrapper {
    display: flex;
    flex-direction: column;
    background: #121214;
    border: 1px solid #29292e;
    border-radius: 6px;
    padding: 8px 10px;
    gap: 6px;
    position: relative;
}
.timeline-round-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}
.timeline-left-col {
    width: 80px;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    border-right: 1px solid #202024;
    padding-right: 8px;
}
.timeline-round-label {
    font-size: 12px;
    font-weight: bold;
    color: #04d361;
}
.timeline-append-box {
    display: flex;
    gap: 2px;
    align-items: center;
}
.timeline-append-btn {
    background: #00bfff;
    color: #fff;
    border: none;
    font-size: 11px;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
}
.timeline-plus-btn {
    background: #29292e;
    color: #00bfff;
    border: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
    line-height: 1;
}
.timeline-actions-flow-container {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.timeline-action-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
   width: 80px;
   min-width: 80px;
   border-radius: 4px 4px 3px 3px;
   box-shadow: 0 0 0 1px #29292e;
   background: #1a1a1e;
}
.timeline-hero-card {
    /* width: 100px */
   position: relative;
   width: 100px;
    height: 36px;
   min-width: 100px;
   max-width: 100px;
   border-radius: 4px 4px 0 0;
    border: 1px solid #f5e6c8;
    background-size: cover;
    background-position: center;
   background-color: #1a1a1e;
   overflow: hidden;
    box-sizing: border-box;
}
.timeline-hero-idx {
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 9px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    z-index: 2;
}
.timeline-hero-select {
    position: relative;
    z-index: 1;
    width: 70px;
    height: 24px;
    margin-left: 0;
    margin-top: 0;
    background: rgba(32,32,36,0.85);
    color: #ffb86c;
    border: 1px solid #34343a;
    font-size: 11px;
    border-radius: 3px;
    padding: 0 4px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    text-align-last: center;
}
.timeline-hero-select option {
    background: #1a1a1e;
    color: #fff;
}
.timeline-hero-select-inside {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
   width: 100%;
    height: 14px;
    margin: 0;
    background: rgba(48,48,56,0.85);
    color: #ffb86c;
    border: 1px solid #34343a;
    border-radius: 0;
    font-size: 11px;
    padding: 0 2px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
}
.timeline-hero-select-outside {
   display: block;
   width: 100px;
    height: 14px;
   margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
}
.timeline-time-input {
   width: 100px;
    height: 14px;
    background: #0c0c0e;
    border: none;
    color: #555;
    font-size: 11px;
    border-radius: 0 0 3px 3px;
   padding: 0;
   margin: 0;
   text-align: center;
  outline: none;
   box-sizing: border-box;
   line-height: 14px;
}
.timeline-time-input--filled {
    background: #f5e6c8;
    color: #332200;
    font-weight: bold;
}
.capsule-arrow-divider {
    color: #494950;
    font-size: 12px;
    margin: 0 8px;
    flex-shrink: 0;
    align-self: center;
}
.timeline-del-round-btn {
    background: none;
    border: none;
    color: #f75a68;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 0;
}
.timeline-del-action-btn {
    background: none;
    border: none;
    color: #f75a68;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 0;
}
/* Timeline row: left skill axis + right notes panel as separate boxes */
.timeline-row-layout {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
}
.timeline-row-layout .timeline-section {
    margin-bottom: 0;
    padding: 12px 15px;
}
.timeline-left-panel {
    flex: 2;
    min-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.timeline-right-panel {
    flex: 1.2;
    min-width: 180px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: flex;
    flex-direction: column;
}
.timeline-right-panel .timeline-notes-textarea {
    width: 100%;
    height: 100%;
    min-height: 70px;
    background: #0c0c0e;
    border: 1px solid #29292e;
   border-radius: 4px;
    color: #ccc;
    font-size: 14px;
    border-radius: 0 0 3px 3px;
    padding: 4px 6px;
    text-align: left;
    outline: none;
}
.timeline-time-input:focus {
    box-shadow: 0 0 0 1px #00bfff;
    outline: none;
}
/* Delete button for action */

        
/* Round delete × at wrapper top-right */
.timeline-round-del-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    color: #f75a68;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}
.timeline-round-row-wrapper:hover .timeline-round-del-btn {
    opacity: 0.8;
}
.timeline-round-del-btn:hover {
    opacity: 1 !important;
    color: #ff3355;
}

/* Action delete × at hero-card top-right */
.timeline-action-del-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.55);
    border: none;
    color: #f75a68;
    font-size: 16px;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}
.timeline-hero-card:hover .timeline-action-del-btn {
    opacity: 0.9;
}
.timeline-action-del-btn:hover {
    opacity: 1 !important;
    color: #ff3355;
    background: rgba(0,0,0,0.75);
}

.pool-title { color: #a8a8b3; font-size: 15px; margin-bottom: 8px; font-weight: bold; margin-top: 15px; }

        .character-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 20px; }

        

        .pool-card { background: #1a1a1e; border: 1px solid #29292e; border-radius: 4px; padding: 8px; text-align: center; cursor: pointer; position: relative; overflow: hidden; min-height: 130px; }

        .pool-card:hover { border-color: #04d361; }

        .pool-avatar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }

        .pool-card.selected { opacity: 0.55; }

/* Pool card bottom overlay: stars + tiers above name bar */
.pool-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 4px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    pointer-events: none;
}

/* Star row (left side) --- pushed down toward name bar */
.char-right-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 4px;
    gap: 0;
}
.char-right-rarity {
    flex: 0 0 auto;
    margin-top: 0;
    transform: translateX(-6px) translateY(41px);
}
.char-right-rarity .char-rarity-row {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Tier badges (right side) --- positioned higher, compact vertical */
.char-right-tiers {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    align-items: flex-end;
    line-height: 1;
    min-height: 50px;
    transform: translate(4px, -16px);
}

/* Character name bar at bottom */
.char-name-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    background: rgba(0,0,0,0.55);
    padding: 2px 3px;
    border-radius: 0;
    z-index: 3;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.char-name-bar strong {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    background: none;
    padding: 0 4px;
    border-radius: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}
.tier-placeholder {
    visibility: hidden;
    height: 10px;
    display: inline-block;
    margin-right: 2px;
}
.tier-sub {
    display: none;
}

.char-left-corner {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    pointer-events: none;
    z-index: 4;
    background: none;
    border-radius: 0;
    padding: 0;
}
.char-corner-icons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.char-corner-icons .element-tag {
    font-size: 12px; font-weight: bold; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: none; padding: 0;
}
.char-corner-icons .element-tag img {
    width: 20px; height: 20px; object-fit: contain; margin: 0;
}
.char-corner-icons .class-badge {
    font-size: 11px; display: flex; align-items: center; justify-content: center;
    background: none; padding: 0;
}
.char-corner-icons .class-badge img {
    width: 20px; height: 20px; object-fit: contain;
}
.char-corner-icons .position-icon {
    width: 20px; height: 20px; object-fit: contain;
    display: block; background: none;
}
.char-corner-icons .class-icon-img {
    width: 20px; height: 20px; object-fit: contain;
    display: inline-block;
}

/* old rules removed - use .char-corner-icons instead */

        .edit-gear-icon { position: absolute; top: 4px; right: 4px; background: #29292e; border: 1px solid #494950; color: #04d361; border-radius: 3px; font-size: 10px; width: 18px; height: 18px; line-height: 16px; text-align: center; cursor: pointer; z-index: 5; }

        .empty-text { color: #494950; text-align: center; padding: 160px 0; font-size: 14px; width: 100%; }

        /* 底部后台控制面板 */

        .admin-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: #202024; border: 1px solid #29292e; border-radius: 6px; padding: 15px; margin-top: 20px; position: relative; }

        .admin-box { border-right: 1px solid #29292e; padding-right: 12px; }

        .admin-box:last-child { border: none; padding: 0; }

        .admin-box h3 { margin-top: 0; color: #04d361; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }

        .form-group { margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }

        .form-group label { font-size: 11px; color: #a8a8b3; font-weight: bold; }

        

        .lang-inputs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

        .lang-inputs-row input { background: #121214; border: 1px solid #29292e; color: #fff; padding: 6px; border-radius: 4px; font-size: 11px; outline: none; width: 100%; box-sizing: border-box; }

        .file-label { background: #29292e; border: 1px dashed #494950; padding: 6px; text-align: center; border-radius: 4px; cursor: pointer; font-size: 11px; color: #ccc; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .file-label:hover { background: #34343a; color: #04d361; }

        .file-input { display: none; }

        .submit-btn { background: #04d361; color: #000; border: none; padding: 7px; font-weight: bold; border-radius: 4px; cursor: pointer; margin-top: 4px; width: 100%; font-size: 12px; }

        .cancel-edit-btn { background: #494950; color: #fff; border: none; padding: 3px 6px; font-size: 10px; border-radius: 3px; cursor: pointer; }

        .clear-btn { background: #494950; color: #fff; border: none; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 11px; margin-top: 5px; width: 100%; }

        /* 💾 备份面板专用按钮样式 */

        .backup-btn-download { background: #00bfff; color: #000; font-weight: bold; border: none; padding: 8px; border-radius: 4px; width: 100%; cursor: pointer; font-size: 12px; margin-bottom: 8px; text-align: center; }

        .backup-btn-download:hover { opacity: 0.9; }

        /* 🔐 密码安全防护罩区 */

        .security-banner { grid-column: span 4; background: #291b1b; border: 1px dashed #f75a68; padding: 8px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }

        .pwd-field { background: #121214; border: 1px solid #f75a68; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; outline: none; text-align: center; }

        /* 宠物大图卡片 */
        .pet-grid-3 { display: grid; grid-template-columns: 170px 8px 170px 8px 170px 36px; gap: 1px; min-height: 0; align-items: center; }
        .pet-cell.pet-card { width: 170px; height: 178px; min-height: 0; padding: 7px 4px 0; gap: 2px; background: #171820; border-radius: 7px; align-items: flex-start; overflow: hidden; position: relative; }
        .pet-cell.pet-card.filled { }
        .pet-position-badge { display: none; }
        .pet-lane-icon { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; z-index: 4; pointer-events: none; }
        .pet-image-frame { position: relative; width: 127px; height: 170px; border-radius: 5px; overflow: hidden; background: #22242d; border-left: 3px solid #00bfff; }
        .pet-cell.pet-card:nth-child(3) .pet-image-frame { border-left-color: #ffd166; }
        .pet-cell.pet-card:nth-child(5) .pet-image-frame { border-left-color: #f75a68; }
        .pet-large-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
        .pet-empty-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #494950; font-size: 34px; font-weight: bold; }
        .pet-card-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
        .pet-card-click { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

        .pet-element-above {
            position: absolute;
            bottom: 19px;
            left: 0;
            right: 0;
            height: 22px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            z-index: 3;
        }
        .pet-element-above .element-tag {
            font-size: 16px;
        }
        .pet-element-above .element-tag img {
            width: 20px;
            height: 20px;
        }
        .pet-image-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            padding: 3px 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            z-index: 2;
        }
        .pet-image-name {
            font-size: 14px;
            color: #f0f0ff;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 100%;
        }
        .pet-name-small { display: none; }
        .pet-cell.pet-card:hover .pet-clear-btn { opacity: 0.8; }
/* Pet card: image + gems side by side */
.pet-layout-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}
.pet-cell.pet-card .pet-image-frame {
    position: relative;
    width: 127px;
    height: 170px;
    border-radius: 5px;
    overflow: hidden;
    border-left: 3px solid #00bfff;
}
.pet-gems-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-width: 36px;
    align-self: stretch;
    flex-shrink: 0;
    gap: 0;
    height: 170px;
}
.pet-gems-col .pet-gem-cell {
    position: relative;
    width: 34px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #202128;
    border: 1px solid #29292e;
    border-radius: 2px;
    cursor: pointer;
}
.pet-gems-col .pet-gem-cell.filled {
    border: none;
    background: transparent;
}

.pet-gems-col .pet-gem-cell img {
    width: 28px;
    height: 34px;
    object-fit: contain;
    border-radius: 0;
}
.pet-gems-col .pet-gem-cell .bg-img {
    width: 34px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    background-color: #29292e;
}
.pet-gems-col .pet-gem-cell span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #494950;
    font-weight: bold;
}

        
        .pet-cell.pet-card .pet-gem-cell { position: relative; width: 34px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 2px; box-sizing: border-box; border: 1px dashed #3a3a44; }
        
        
        .pet-cell.pet-card .pet-gem-cell span { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #5a5a62; font-weight: bold; }
        .pet-cell.pet-card .pet-gem-cell select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

        /* compact public headings */
        .battle-layout-container { margin-bottom: 0; }
        .matrix-header-3 { display: none; }

/* Card picker clickable selector in slot */

.card-pick-label { display: block; font-size: 13px; font-weight: bold; color: #00bfff; text-align: center; padding: 2px 0; }
.card-pick-label.empty-label { color: #666; }

        .time-toggle-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #34343a; background: #202024; color: #00bfff; cursor: pointer; font-size: 11px; line-height: 20px; padding: 0; }
        .matrix-column.drag-hover { outline: 2px solid #04d361; background: rgba(4,211,97,0.14); box-shadow: inset 0 0 0 1px rgba(4,211,97,0.45), 0 0 16px rgba(4,211,97,0.2); }
        .matrix-column.drag-hover .matrix-cell { border-color: #04d361; background: #1c2a20; }

/* Matrix cell cover image mode */
.matrix-cell.filled {
    overflow: hidden;
}

/* Matrix cell cover image mode */
.matrix-element-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 5;
}
.matrix-element-badge .element-tag {
    background: transparent;
    padding: 0;
    border: none;
}
.matrix-element-badge .element-tag img {
    width: 16px;
    height: 16px;
}

.matrix-cover-img {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    display: block;
    z-index: 1;
    opacity: 0.55;
    filter: brightness(0.6);
}
/* 当格子分半（2个角色）时，图片居中显示 */
.matrix-cell-half .matrix-cover-img {
    top: 0;
    background-size: cover;
    background-position: center center;
}

.matrix-cover-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.matrix-cover-overlay .matrix-name {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    display: inline-block;
    max-width: 100%;
}

.matrix-cell-half .matrix-cover-overlay {
    top: 0;
}

/* Two chars share column equally */
.matrix-cover-overlay .element-tag {
    font-size: 10px;
}

/* Position icon in hero matrix cells */
.matrix-position-icon {
    width: 22px; height: 22px; object-fit: contain;
    display: inline-block;
}
/* Matrix cell cover image mode */
.matrix-element-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 5;
}
.matrix-element-badge .element-tag {
    background: transparent;
    padding: 0;
    border: none;
}
.matrix-element-badge .element-tag img {
    width: 16px;
    height: 16px;
}

.matrix-cell-cover {
    flex: 1;
    padding: 0;
    justify-content: flex-start;
}

/* Clear button stays above image */
.matrix-cell-cover .matrix-cell-clear {
    z-index: 10;
}

.element-select { background: #121214; border: 1px solid #29292e; color: #fff; padding: 6px 8px; border-radius: 4px; font-size: 11px; outline: none; width: 100%; box-sizing: border-box; }
.element-select option { background: #1a1a1e; color: #fff; }

.element-tag img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}
.element-tag { font-size: 9px; font-weight: bold; padding: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }

/* Element preview in admin pool */
.element-preview-tag { font-size: 8px; font-weight: bold; display: block; text-align: center; margin-top: 2px; padding: 1px 3px; border-radius: 2px; background: rgba(255,255,255,0.06); }

/* Pool element filter bar */
.pool-element-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
}
.pool-filter-btn {
    background: #1a1a1e;
    border: 1px solid #29292e;
    color: #ccc;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pool-filter-btn:hover {
    border-color: var(--filter-color, #04d361);
    color: var(--filter-color, #fff);
}
.pool-filter-btn.active {
    background: var(--filter-color, #04d361);
    border-color: var(--filter-color, #04d361);
    color: #000;
}
/* Filter button icons */
.filter-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
}
.pool-filter-btn .filter-icon {
    width: 20px;
    height: 20px;
}
.pool-filter-btn[data-element=""] {
    --filter-color: #a8a8b3;
}

/* Section separator between element and class filters */
.filter-section-gap {
    width: 12px;
    flex-shrink: 0;
}

/* Class filter buttons with different background */
.pool-class-filter-btn {
    background: #1e1e24;
    border-color: #34343a;
}

/* Class filter labels */
.pool-class-filter .filter-label {
    font-size: 11px;
    margin-left: 3px;
}

.pool-class-filter-btn.active {
    color: #000;
}

.pool-class-filter-btn[data-class=""] {
    --filter-color: #a8a8b3;
}

/* Gem picker element filter bar */
.gem-picker-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #29292e;
}
.gem-picker-filter-btn {
    background: #1a1a1e;
    border: 1px solid #29292e;
    color: #ccc;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    min-width: 24px;
    min-height: 24px;
}
.gem-picker-filter-btn:hover {
    border-color: var(--filter-color, #04d361);
    color: var(--filter-color, #fff);
}
.gem-picker-filter-btn.active {
    background: var(--filter-color, #04d361);
    border-color: var(--filter-color, #04d361);
    color: #000;
}
.gem-picker-filter-btn .filter-icon {
    width: 20px;
    height: 20px;
}

/* Gem image picker overlay */
.gem-picker-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gem-picker-panel {
    background: #1a1a1e;
    border: 1px solid #34343a;
    border-radius: 10px;
    padding: 16px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    width: 500px;
}

.gem-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #29292e;
}

.gem-picker-title {
    font-size: 14px;
    font-weight: bold;
    color: #04d361;
}

.gem-picker-close {
    background: #f75a68;
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gem-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 52px);
    gap: 4px;
    justify-content: center;
}

.gem-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121214;
    border: 1px solid #29292e;
    border-radius: 4px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    transition: all 0.15s;
}

.gem-picker-item:hover {
    border-color: #04d361;
    background: #1c241e;
}

.gem-picker-item.selected {
    border-color: #00bfff;
    background: #132230;
    box-shadow: 0 0 8px rgba(0,191,255,0.3);
}

.gem-picker-item img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 0;
}

.gem-picker-item span {
    display: none;
}

.gem-picker-item .element-tag {
    font-size: 9px;
}

/* Pet picker overlay & panel */

.pet-picker-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-picker-panel {
    background: #1a1a1e;
    border: 1px solid #34343a;
    border-radius: 10px;
    padding: 16px;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
}

/* Pet picker grid - square items */
.pet-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 130px);
    gap: 8px;
}

/* Square cell */
.pet-picker-item {
    width: 100px;
    height: 133px;
    border: 1px solid #29292e;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.pet-picker-item:hover {
    border-color: #04d361;
    background: #1c241e;
}
.pet-picker-item.selected {
    border-color: #00bfff;
    background: #132230;
    box-shadow: 0 0 8px rgba(0,191,255,0.3);
}

/* Already picked in another slot */
.pet-picker-item.used {
    opacity: 0.4;
    filter: grayscale(0.8);
    border-color: #34343a;
    background: #101012;
}

/* Image wrapper fills the square */
.pet-picker-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pet-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Name bar: transparent background, positioned at image bottom */
.pet-picker-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 4px 4px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.6);
    overflow: hidden;
    box-sizing: border-box;
}
.pet-picker-name span {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}
.pet-picker-used {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #f75a68;
    background: #3a1520;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}

/* Notes column on right side of each round row */
.timeline-notes-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.timeline-notes-textarea {
    width: 100%;
    height: 100%;
    min-height: 70px;
    background: #0c0c0e;
    border: 1px solid #29292e;
    border-radius: 4px;
    color: #ccc;
    font-size: 14px;
    padding: 6px 8px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    line-height: 1.4;
    font-family: inherit;
}

.timeline-notes-textarea:focus {
    border-color: #00bfff;
    color: #fff;
}

/* Class badge styles */
.class-badge {
    font-size: 10px;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.pool-card-class-badge {
    font-size: 9px;
    color: #ff69b4;
    margin-left: 4px;
}

.admin7-body { max-width: 900px; margin: 0 auto; padding: 15px 20px; }
.admin-section { margin-bottom: 0; }

/* 管理面板与上方库预览之间的虚线分隔 */

.class-icon-img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    object-fit: contain;
    background: none;
    border: none;
}

/* Admin7 new layout styles */
.admin7-body { max-width: 700px !important; margin: 0 auto; padding: 10px 15px; }
.admin-section-header {
    color: #a8a8b3;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 4px 0;
}
.pool-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.admin7-body .admin-box {
    max-width: 780px !important;
    margin: 0 auto;
    background: #202024;
    border: 1px solid #29292e;
    border-radius: 6px;
    padding: 12px 14px;
    width: 100%;
}
.admin7-body .admin-box-wide {
    max-width: 700px !important;
}
.admin7-body .admin-box-backup {
    max-width: 780px !important;
}
.section-divider {
    border: none;
    border-top: 1px dashed #3a3a44;
    margin: 12px 0;
}
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
.class-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}
.class-checks label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #e1e1e6;
    cursor: pointer;
}
.class-checks input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #04d361;
    cursor: pointer;
}
.class-check-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    object-fit: contain;
}
.class-option-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    object-fit: contain;
    display: inline-block;
}
.backup-hint {
    font-size: 11px;
    color: #aaa;
    margin: 4px 0 10px 0;
}
.admin-section .admin-box {
    border-top: 1px dashed #3a3a44;
    margin-top: 10px;
    padding-top: 12px;
}

/* Admin7 gear pool type group styles */

.gear-type-divider {
    border: none;
    border-top: 1px dashed #3a3a44;
    margin: 6px 0;
}
/* 角色池卡片最小宽度 */
.admin7-body .pool-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

/* Pet, gem, gear pools use flex layout with square cards */
.admin7-body .pool-preview#pet-preview-pool,
.admin7-body .pool-preview#gem-preview-pool,
.admin7-body .pool-preview#gear-weapon-pool,
.admin7-body .pool-preview#gear-armor-pool,
.admin7-body .pool-preview#gear-accessory-pool,
.admin7-body .pool-preview#gear-rune-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 宠物/宝石/装备池卡片为正方形 */
.admin7-body .pool-preview#pet-preview-pool .pool-card,
.admin7-body .pool-preview#gem-preview-pool .pool-card,
.admin7-body .pool-preview#gear-weapon-pool .pool-card,
.admin7-body .pool-preview#gear-armor-pool .pool-card,
.admin7-body .pool-preview#gear-accessory-pool .pool-card,
.admin7-body .pool-preview#gear-rune-pool .pool-card {
    width: 70px;
    height: 70px;
    min-height: 0;
}
/* Compact overlay for square pool cards (pet, gem, gear) */
.admin7-body .pool-preview#pet-preview-pool .pool-card .pool-card-overlay,
.admin7-body .pool-preview#gem-preview-pool .pool-card .pool-card-overlay,
.admin7-body .pool-preview#gear-weapon-pool .pool-card .pool-card-overlay,
.admin7-body .pool-preview#gear-armor-pool .pool-card .pool-card-overlay,
.admin7-body .pool-preview#gear-accessory-pool .pool-card .pool-card-overlay,
.admin7-body .pool-preview#gear-rune-pool .pool-card .pool-card-overlay {
    padding: 3px 4px 3px;
}
.admin7-body .pool-preview#pet-preview-pool .pool-card .pool-card-overlay strong,
.admin7-body .pool-preview#gem-preview-pool .pool-card .pool-card-overlay strong,
.admin7-body .pool-preview#gear-weapon-pool .pool-card .pool-card-overlay strong,
.admin7-body .pool-preview#gear-armor-pool .pool-card .pool-card-overlay strong,
.admin7-body .pool-preview#gear-accessory-pool .pool-card .pool-card-overlay strong,
.admin7-body .pool-preview#gear-rune-pool .pool-card .pool-card-overlay strong {
    font-size: 10px;
}
.admin7-body .pool-preview#pet-preview-pool .pool-card .char-badges .element-tag img,
.admin7-body .pool-preview#gem-preview-pool .pool-card .char-badges .element-tag img,
.admin7-body .pool-preview#pet-preview-pool .pool-card .char-badges .class-icon-img,
.admin7-body .pool-preview#gem-preview-pool .pool-card .char-badges .class-icon-img {
    width: 12px;
    height: 12px;
    width: 20px;
    height: 20px;
}

/* admin7 小卡片：背景条改为相对定位，让图标在名称上方正常排列 */
.admin7-body .pool-preview#pet-preview-pool .pool-card .char-name-bar,
.admin7-body .pool-preview#gem-preview-pool .pool-card .char-name-bar,
.admin7-body .pool-preview#gear-weapon-pool .pool-card .char-name-bar,
.admin7-body .pool-preview#gear-armor-pool .pool-card .char-name-bar,
.admin7-body .pool-preview#gear-accessory-pool .pool-card .char-name-bar,
.admin7-body .pool-preview#gear-rune-pool .pool-card .char-name-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    background: rgba(0,0,0,0.55);
    padding: 2px 3px;
    border-radius: 0;
    z-index: 5;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.admin7-body .pool-preview#pet-preview-pool .pool-card .char-name-bar strong,
.admin7-body .pool-preview#gem-preview-pool .pool-card .char-name-bar strong,
.admin7-body .pool-preview#gear-weapon-pool .pool-card .char-name-bar strong,
.admin7-body .pool-preview#gear-armor-pool .pool-card .char-name-bar strong,
.admin7-body .pool-preview#gear-accessory-pool .pool-card .char-name-bar strong,
.admin7-body .pool-preview#gear-rune-pool .pool-card .char-name-bar strong {
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 2px #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    background: none;
    padding: 0 4px;
    max-width: 100%;
    border-radius: 0;
}

/* Pet/gem/gear pool card: image covers full card, overlays float on top */
.admin7-body .pool-preview#pet-preview-pool .pool-card .bg-img,
.admin7-body .pool-preview#gem-preview-pool .pool-card .bg-img,
.admin7-body .pool-preview#gear-weapon-pool .pool-card .bg-img,
.admin7-body .pool-preview#gear-armor-pool .pool-card .bg-img,
.admin7-body .pool-preview#gear-accessory-pool .pool-card .bg-img,
.admin7-body .pool-preview#gear-rune-pool .pool-card .bg-img {
    inset: 0;
    background-position: center;
}

.admin7-body .admin-box-wide {
    max-width: 700px !important;
}

/* Delete button styles for admin */
.submit-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.delete-btn {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px 18px;
    font-size: 14px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s;
}
.delete-btn:hover {
    background: #c0392b;
}
.delete-gear-icon {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #29292e;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    border-radius: 3px;
    font-size: 10px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    z-index: 5;
}
.delete-gear-icon:hover {
    background: #e74c3c;
    color: #fff;
}

/* Class select with icons (dark theme to match element-select) */
.class-select-with-icons {
    background: #121214;
    border: 1px solid #29292e;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 11px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.class-select-with-icons option {
    background: #1a1a1e;
    color: #fff;
}

/* Character badges row in pool card overlay */
.char-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 1px;
}
.char-badges .element-tag {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}
.char-badges .element-tag img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.char-badges .class-badge {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    gap: 0;
}
.char-badges .class-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Badges for admin7 pet/gem card */
.admin7-body .pool-card-top-badges {
    position: absolute;
    bottom: 19px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    z-index: 6;
    padding: 0 2px;
    pointer-events: none;
}

/* Gear pool card badges positioned higher */
.admin7-body .pool-preview#gear-weapon-pool .pool-card .pool-card-top-badges,
.admin7-body .pool-preview#gear-armor-pool .pool-card .pool-card-top-badges,
.admin7-body .pool-preview#gear-accessory-pool .pool-card .pool-card-top-badges,
.admin7-body .pool-preview#gear-rune-pool .pool-card .pool-card-top-badges {
    bottom: 32px;
}
.admin7-body .pool-card-top-badges .element-tag {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}
.admin7-body .pool-card-top-badges .element-tag img {
    display: inline-block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.admin7-body .pool-card-top-badges .class-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.admin7-body .pool-card-top-badges .class-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
/* ===== Pet Gem Column - FINAL OVERRIDES ===== */
.pet-gem-col {
    display: flex !important;
    flex-direction: column !important;
    width: 36px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
}
.pet-gem-col-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4, auto) !important;
    gap: 4px !important;
}
.pet-gem-col-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    padding: 2px !important;
    background: #0c0c0e !important;
    border: 1px solid #29292e !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    position: relative !important;
    flex: none !important;
}
.pet-gem-col-cell.filled {
    border-color: #00bfff !important;
    background: #132230 !important;
    border-style: solid !important;
}
.pet-gem-col-cell img {
    width: 22px !important;
    height: 22px !important;
    background-size: cover !important;
    border-radius: 2px !important;
    display: block !important;
}
.pet-gem-col-cell span {
    font-size: 14px !important;
    color: #5a5a62 !important;
    font-weight: bold !important;
    flex: 1 !important;
}
.pet-gem-col-cell select {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* Image path input row in admin7 */
.image-path-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
}
.image-path-prefix {
    color: #00bfff;
    font-size: 11px;
    font-family: monospace;
    white-space: nowrap;
    user-select: text;
    flex-shrink: 0;
    opacity: 0.7;
}
.image-path-input {
    background: #0c0c0e;
    border: 1px solid #29292e;
    color: #e1e1e6;
    font-size: 11px;
    font-family: monospace;
    padding: 4px 6px;
    border-radius: 3px;
    width: 100%;
    outline: none;
    box-sizing: border-box;
}
.image-path-input:focus {
    border-color: #04d361;
}

/* ========== Compact form row for character edit ========== */
.form-row-compact {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: 8px;
    align-items: flex-end;
}
.form-group-sm {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}
.form-group-sm label {
    font-size: 10px;
    color: #a8a8b3;
    margin-bottom: 1px;
    display: block;
}
.compact-select {
    background: #121214;
    border: 1px solid #29292e;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 28px;
    appearance: none;
    -webkit-appearance: none;
}
.compact-select option { background: #1a1a1e; color: #fff; }
.compact-select:focus { border-color: #04d361; }
.compact-select:hover { border-color: #04d361; }
.form-row-compact .form-group-sm:nth-child(1) { flex: 0.85 1 0; }
.form-row-compact .form-group-sm:nth-child(2) { flex: 0.9 1 0; }
.form-row-compact .form-group-sm:nth-child(3) { flex: 0.75 1 0; }
.form-row-compact .form-group-sm:nth-child(4) { flex: 1 1 0; }
.form-row-compact .form-group-sm:nth-child(5) { flex: 0.95 1 0; }
.form-row-compact .form-group-sm:nth-child(6) { flex: 0.95 1 0; }
.form-row-compact .form-group-sm:nth-child(7) { flex: 0.95 1 0; }

.position-badge {
    font-size: 9px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 2px;
}
.position-badge.front { background: #b45309; color: #fff; }
.position-badge.mid { background: #2563eb; color: #fff; }
.position-badge.back { background: #10b981; color: #fff; }
.rarity-stars { display: inline-flex; gap: 0; }
    .rarity-stars .star {
        display: inline-block;
        width: 10px;
        height: 10px;
        filter: drop-shadow(0 0 2px rgba(0,0,0,0.9)) drop-shadow(0 1px 1px rgba(0,0,0,0.7));
    }
    .rarity-stars .star.empty {
        opacity: 0.3;
    }
.tier-badge {
    font-size: 8px;
    font-weight: bold;
       padding: 0px 2px;
        padding: 1px 3px;
    border-radius: 3px;
       height: 10px;
        height: 11px;
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 0;
    line-height: 1.25;
}
.tier-badge.t0 { background: #ff3030; color: #fff; }
.tier-badge.t1 { background: #ff9500; color: #fff; }
.tier-badge.t2 { background: #ffd700; color: #333; }
.tier-badge.t3 { background: #5bc0de; color: #fff; }
.tier-badge.t4 { background: #999; color: #fff; }
.tier-badge.t5 { background: #666; color: #bbb; }

.panel-image-preview { display: none; }

@media (max-width: 600px) {
    .slot-name-bar span,
    .card-box .card-name-bar span,
    .char-name-bar strong,
    .pet-picker-name span,
    .pet-image-name,
    .matrix-name {
        font-size: 9px !important;
    }
    .admin7-body .pool-card .char-name-bar strong {{ font-size: 14px !important; }}
}
/* Drag & Drop styles for admin7 pool cards */
.admin7-body .pool-preview .pool-card { cursor: grab; user-select: none; }
.admin7-body .pool-preview .pool-card:active { cursor: grabbing; }
.admin7-body .pool-preview .pool-card.dragging { opacity: 0.3; border-color: #04d361; }
.admin7-body .pool-preview .pool-card.drag-over { border: 2px dashed #04d361 !important; }