/* =========================================================
   Overlord [外壳淡蓝 + 内部粉红] 状态栏与UI精美渲染
========================================================= */

ul, ol, li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
details > summary::-webkit-details-marker { display: none !important; }

.markdown-body, .theme-details {
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif !important;
    font-size: 15px !important; 
    line-height: 1.6 !important;
    color: #2C3E50 !important;
}

/* --- 1. 状态栏主面板 (外壳：淡蓝色) --- */
.theme-details {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 5px 15px rgba(135, 206, 250, 0.2) !important;
    border: 1px solid rgba(135, 206, 250, 0.4) !important;
    overflow: visible !important;
}

.fold-header {
    padding: 12px 16px !important;
    cursor: pointer !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    background: linear-gradient(135deg, #7AC5FA 0%, #4682B4 100%) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    border-radius: 11px !important;
}
details[open] > .fold-header {
    border-radius: 11px 11px 0 0 !important;
}

.fold-content {
    padding: 16px !important;
    background: #FFF5F7 !important; 
    border-top: 2px solid #7AC5FA !important;
    border-radius: 0 0 11px 11px !important;
    overflow: visible !important;
}

/* --- 2. 子面板 (内部卡片：粉色系配合) --- */
.sub-details {
    background: #FFFFFF !important;
    border: 1px solid #FFB6C1 !important; 
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2) !important;
    overflow: visible !important;
}
.sub-details > summary {
    padding: 10px 14px !important;
    color: #D53F8C !important; 
    font-size: 15px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    background: #FFE4E1 !important; 
    border-bottom: 1px solid #FFB6C1 !important;
    border-radius: 7px !important;
}
details[open] > .sub-details > summary {
    border-radius: 7px 7px 0 0 !important;
}
.sub-body {
    padding: 14px !important;
    background: #FFFFFF !important;
    border-radius: 0 0 7px 7px !important;
    overflow: visible !important;
}

/* --- 3. 悬浮/点击详情框 (最高层级置顶) --- */
.hover-item {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important; 
    color: #D53F8C !important; 
    font-weight: bold !important;
    border-bottom: 1px dashed #D53F8C !important;
    margin-right: 6px !important;
    outline: none !important; 
}
.hover-item .item-desc {
    visibility: hidden !important;
    opacity: 0 !important;
    width: 280px !important;
    background-color: #FFFFFF !important;
    color: #333333 !important;
    text-align: left !important;
    border-radius: 8px !important;
    padding: 12px !important;
    position: absolute !important;
    z-index: 99999 !important; 
    bottom: 130% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid #FFB6C1 !important;
    transition: all 0.2s ease !important;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1.6 !important;
}
.hover-item .item-desc::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    margin-left: -6px !important;
    border-width: 6px !important;
    border-style: solid !important;
    border-color: #FFB6C1 transparent transparent transparent !important;
}
.hover-item:hover .item-desc,
.hover-item:focus .item-desc,
.hover-item:active .item-desc {
    visibility: visible !important;
    opacity: 1 !important;
    bottom: 140% !important;
}

/* --- 4. 规整的网格排版系统 --- */
.info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}
.info-grid b { color: #4A90E2 !important; }

hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, #FFB6C1, transparent) !important;
    margin: 10px 0 !important;
}

/* --- 5. 玩家状态：血条/蓝条/经验条 UI --- */
.bar-wrap {
    width: 100% !important;
    height: 18px !important;
    background: #E2E8F0 !important;
    border-radius: 9px !important;
    position: relative !important;
    margin: 4px 0 8px 0 !important;
    border: 1px solid #CBD5E0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
    overflow: hidden !important; 
}
.bar-fill {
    height: 100% !important;
    border-radius: 9px 0 0 9px !important;
    transition: width 0.5s ease-in-out !important;
}
.hp-bar { background: linear-gradient(90deg, #FC8181, #E53E3E) !important; }
.mp-bar { background: linear-gradient(90deg, #63B3ED, #3182CE) !important; }
.exp-bar { background: linear-gradient(90deg, #F6E05E, #D69E2E) !important; }

.bar-text {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 18px !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important;
    pointer-events: none !important;
}

/* --- 6. 附近的人：左图右文海报布局 (直链IMG版) --- */
.npc-top {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 12px !important;
    align-items: flex-start !important;
}

.npc-avatar {
    width: 110px !important;
    height: 165px !important;
    border-radius: 6px !important;
    background-color: #FFF5F7 !important;
    border: 2px solid #FFB6C1 !important; 
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.4) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 强制内部图片填满并裁切，防止变形 */
.npc-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.npc-intro {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    font-size: 14px !important;
}
.npc-intro b { color: #D53F8C !important; }

.npc-bottom {
    border-top: 1px dashed #FFB6C1 !important;
    padding-top: 12px !important;
}
.npc-bottom b { color: #4A90E2 !important; }

.bond-card {
    background: #FFFFFF !important;
    border-left: 4px solid #D53F8C !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 4px 8px 8px 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}
.bond-card b { color: #D53F8C !important; }

@media (max-width: 600px) {
    .info-grid, .npc-intro { grid-template-columns: 1fr !important; }
    .npc-avatar { width: 90px !important; height: 135px !important; }
    .hover-item .item-desc { width: 240px !important; }
}