/* ==================== 显示模式选择器样式 - 现代互联网风格 ==================== */

/* 外层容器 - 无背景，独占一行居中 */
.display-mode-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
    /* 缩小间距，与其他元素保持一致 */
    padding: 0;
    background: transparent;
    border: none;
    width: 100%;
    /* 确保独占一行 */
    clear: both;
    /* 清除浮动，确保独立一行 */
}

/* 隐藏标签文字 */
.mode-label {
    display: none;
}

/* 选项容器 - 水平居中排列 */
.mode-options {
    display: flex;
    gap: 16px;
    /* 扩大2倍：8px * 2 = 16px */
    justify-content: center;
    align-items: center;
}

/* 长条状选项按钮 - 现代极客风格 */
.mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 图标和文字间距扩大 */
    padding: 0 20px;
    /* 水平内边距增加 */
    height: 40px;
    /* 高度调整为40px */
    min-width: 120px;
    /* 宽度1.5倍：80px * 1.5 = 120px */
    background-color: #2563eb;
    /* Tailwind blue-600 */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    /* 圆角相应增大 */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

/* 悬停效果 - 参考 hover:bg-blue-700 */
.mode-option:hover {
    background-color: #1d4ed8;
    /* Tailwind blue-700 */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* 激活状态 - 使用更深的蓝色和发光效果 */
.mode-option.active {
    background-color: #1e40af;
    /* Tailwind blue-800 */
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4), 0 2px 8px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

/* 隐藏 radio input */
.mode-option input[type="radio"] {
    display: none;
}

/* 图标样式 - 等比例放大 */
.mode-icon {
    font-size: 1.2rem;
    /* 从0.75rem等比例放大到1.2rem */
    line-height: 1;
    transition: transform 0.2s ease;
}

.mode-option:hover .mode-icon {
    transform: scale(1.05);
}

/* 文字样式 - 等比例放大 */
.mode-text {
    font-size: 0.9rem;
    /* 从0.7rem等比例放大 */
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1;
}

.mode-option.active .mode-text {
    font-weight: 600;
}

/* 隐藏命令预览区域 */
.mode-preview {
    display: none !important;
}

/* 响应式设计 - 平板 */
@media (max-width: 1024px) {
    .mode-options {
        gap: 6px;
    }

    .mode-option {
        padding: 7px 14px;
        min-width: 90px;
    }

    .mode-icon {
        font-size: 0.95rem;
    }

    .mode-text {
        font-size: 0.8rem;
    }
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
    .display-mode-selector {
        margin: 10px 0;
    }

    .mode-options {
        gap: 6px;
        flex-wrap: wrap;
    }

    .mode-option {
        padding: 6px 12px;
        min-width: calc(50% - 3px);
        flex: 1 1 calc(50% - 3px);
    }

    .mode-icon {
        font-size: 0.9rem;
    }

    .mode-text {
        font-size: 0.75rem;
    }
}

/* 小屏幕移动端 */
@media (max-width: 480px) {
    .mode-option {
        padding: 5px 10px;
        gap: 4px;
    }

    .mode-icon {
        font-size: 0.85rem;
    }

    .mode-text {
        font-size: 0.7rem;
    }
}

/* 深色模式优化 */
[data-theme="dark"] .mode-option {
    background-color: #1e40af;
}

[data-theme="dark"] .mode-option:hover {
    background-color: #1e3a8a;
    /* Tailwind blue-900 */
}

[data-theme="dark"] .mode-option.active {
    background-color: #1e3a8a;
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.5), 0 2px 8px rgba(30, 64, 175, 0.5);
}