/* ═══════════════════════════════════════
   分段切换 · 滑动指示器（news / provider-apply 等）
   ═══════════════════════════════════════ */

.tabs {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    --tabs-pad: 4px;
    padding: var(--tabs-pad);
    background: #fff;
    border-radius: 999px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    isolation: isolate;
    --tab-count: 2;
    --tab-index: 0;
}

.tabs-indicator {
    position: absolute;
    top: var(--tabs-pad);
    bottom: var(--tabs-pad);
    left: var(--tabs-pad);
    width: calc((100% - var(--tabs-pad) * 2) / var(--tab-count));
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 2px 12px rgba(17, 214, 187, 0.3);
    transform: translate3d(calc(var(--tab-index) * 100%), 0, 0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: transform;
}

.tab-btn {
    position: relative;
    z-index: 1;
    padding: 0.6rem 1.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-light);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .tab-btn:hover {
        color: var(--primary-dark);
    }
}

.tab-btn.active,
.tab-btn.active:hover {
    color: #fff;
}

.tab-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}