/* ===== 默认样式：现代浏览器（靠右布局，使用 flex）===== */
.my_recommend_wrap {
    background: #F5F7FA;
    margin: 20px 0;
    padding: 12px 15px;
    border: 1px solid #E4E7ED;
    clear: both;
    border-radius: 4px;
}
.my_recommend_wrap h3 {
    background: #F5F7FA;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    padding: 8px 0;
    border-bottom: 1px solid #E4E7ED;
}
.rec_two_columns {
    overflow: hidden;
    zoom: 1;
}
.rec_column {
    width: 48%;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}
.rec_column:first-child {
    margin-right: 4%;
}
.rec_column:last-child {
    float: right;
    margin-right: 0;
}
/* 现代浏览器：flex 靠右布局 */
.rec_column li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    font-size: 13px;
}
.rec_column li a {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 12px;
    color: #337ab7;
    text-decoration: none;
}
.rec_column li a:hover {
    text-decoration: underline;
}
.rec_column li span {
    flex-shrink: 0;
    color: #999;
    font-size: 11px;
}
/* 前缀图标 */
.rec_column li .prefix {
    margin-right: 8px;
}
/* L1 / L3 链接特殊颜色 */
.rec_column li a.l1-link {
    color: #d93025;
    font-weight: bold;
}
.rec_column li a.l3-link {
    color: #d93025;
}
/* 清理按钮 */
.clean-cache-btn {
    margin-left: 10px;
    font-size: 12px;
    color: #fff;
    background: #d93025;
    padding: 2px 6px;
    border-radius: 3px;
    text-decoration: none;
}
.clean-cache-btn:hover {
    background: #b52b1f;
}
/* 清理结果消息 */
.clean-result-message {
    background: #e7f3e7;
    border-left: 4px solid #2c7a2c;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 13px;
}
.debug-info {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 10px;
    margin: 10px 0;
    font-family: monospace;
    font-size: 12px;
}

/* ===== IE10/11 降级方案（紧凑布局，数字跟在标题后面） ===== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* 覆盖 flex 布局为传统块布局 */
    .rec_column li {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .rec_column li a {
        display: inline-block;
        max-width: calc(100% - 90px);
        margin-right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        flex: none;
    }
    .rec_column li span {
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
        flex-shrink: 1;
    }
    /* 确保两列宽度仍有效 */
    .rec_column {
        width: 48%;
    }
}