/* 页面容器：相对定位，作为左上角Logo定位基准 */
.pageblock {
    position: relative;
}

/* 左上角下拉Logo容器：固定在网页实际内容最左上角 */
.top-left-dropdown {
    position: absolute;
    top: 0;         /* 贴顶部 */
    left: 20;       /* 贴左侧 */
    z-index: 99999; /* 最高层级防遮挡 */
    margin: 10px;   /* 与边缘的间距，可微调 */
    width: 120px;   /* 限制容器宽度，确保按钮和菜单宽度一致 */
}

/* 下拉按钮（默认边框阴影，宽度与菜单统一） */
#diabloToggle {
    background: #222;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap; /* 防止文字换行 */
    outline: none; /* 去掉点击高亮 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    width: 100%; /* 按钮宽度100%继承容器，与菜单统一 */
    box-sizing: border-box; /* 确保内边距/边框不影响宽度 */
}
#diabloToggle:hover {
    background: #333;
    border-color: #555;
    box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
/* 下拉菜单（与按钮宽度完全一致） */
#diabloMenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;/* 菜单宽度100%继承容器，与按钮完全一致 */
    background: #222;
    border: 1px solid #444; /* 与按钮默认边框一致 */
    border-radius: 0 0 4px 4px;
    list-style: none;
    padding: 0;
    margin: 2px 0 0 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 99999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
    overflow: visible; /* 禁用溢出隐藏，解决裁剪 */
    box-sizing: border-box; /* 确保边框不影响宽度 */
}

/* 下拉菜单展开状态 */
#diabloMenu.show {
    opacity: 1;
    visibility: visible;
}

/* 下拉选项样式（适配统一宽度） */
#diabloMenu li {
    border-bottom: 1px solid #333;
}

#diabloMenu li:last-child {
    border-bottom: none;
}

#diabloMenu li a {
    display: flex;
    align-items: center;
    /* 调整内边距，适配统一宽度 */
    padding: 8px 12px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap; /* 防止文字换行 */
    width: 100%;/* 确保选项宽度100% */
    box-sizing: border-box;
}

#diabloMenu li a:hover {
    background: #333;
}

#diabloMenu li a img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    object-fit: contain;
}

/* 文字Logo区域样式不变 */
.header {
    position: relative;
    z-index: 1; /* 低于下拉列表，但不影响显示 */
    padding-top: 20px; /* 给左上角下拉列表留出空间，避免重叠 */
}