/* 
 * 强制间距样式
 * 确保返回按钮间距减少80%生效
 */

/* 强制应用间距修改 - 使用!important确保优先级 */
.back-to-list {
    margin-bottom: 5px !important; /* 上下间距均为5px */
    margin-top: 5px !important;
}

/* 强制响应式间距 */
@media (max-width: 768px) {
    .back-to-list {
        margin-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    .back-to-list {
        margin-bottom: 3px !important;
    }
}

/* 调试样式 - 显示间距信息 */
.back-to-list::after {
    content: ' [间距: 5px]';
    font-size: 0.7em;
    color: #4CAF50;
    opacity: 0.7;
    margin-left: 5px;
}

@media (max-width: 768px) {
    .back-to-list::after {
        content: ' [间距: 4px]';
    }
}

@media (max-width: 480px) {
    .back-to-list::after {
        content: ' [间距: 3px]';
    }
}

/* 仅在调试模式下显示 */
.debug-mode .back-to-list::after {
    display: inline;
}

/* 正常模式下隐藏 */
.back-to-list::after {
    display: none;
}

/* 添加视觉指示器 */
.back-to-list {
    position: relative;
}

.back-to-list::before {
    content: '';
    position: absolute;
    bottom: -6px; /* 间距指示器位置 */
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(76, 175, 80, 0.3); /* 绿色表示间距 */
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.back-to-list:hover::before {
    opacity: 1;
}

/* 间距测量工具提示 */
.back-to-list:hover::after {
    content: '上下间距: 5px';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: #4CAF50;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid #4CAF50;
    display: block !important;
}