#tab-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: var(--tabbar-height);
            display: flex;
            align-items: center;
            gap: var(--tabbar-gap);
            padding: var(--tabbar-padding);
            overflow-x: auto;
            overflow-y: hidden;
            z-index: 200;
            background: var(--tabbar-bg);
            border-bottom: var(--tabbar-border-bottom);
            box-shadow: var(--tabbar-shadow);
        }
        #tab-bar::-webkit-scrollbar {
            height: 3px;
        }
        #tab-bar::-webkit-scrollbar-track {
            background: transparent;
        }
        #tab-bar::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 99px;
        }
        #tab-bar.tab-overflow::-webkit-scrollbar-thumb {
            background: var(--line, rgba(0,0,0,0.18));
        }
        #tab-bar.tab-overflow::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted, rgba(0,0,0,0.35));
        }
        .tab-item {
            display: flex;
            align-items: center;
            gap: var(--tab-item-gap);
            height: var(--tab-item-height);
            padding: var(--tab-item-padding);
            min-width: var(--tab-item-min-width);
            max-width: var(--tab-item-max-width);
            border: var(--tab-item-border);
            border-radius: var(--tab-item-radius);
            background: var(--tab-item-bg);
            color: var(--tab-item-text);
            font-size: 12px;
            font-weight: var(--tab-item-font-weight);
            letter-spacing: 0.004em;
            white-space: nowrap;
            flex-shrink: 0;
            position: relative;
            cursor: pointer;
            box-sizing: border-box;
            box-shadow: var(--tab-item-shadow);
            transform: var(--tab-item-transform);
            transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
        }
        .tab-item:nth-child(2n) {
            transform: var(--tab-item-even-transform, var(--tab-item-transform));
        }
        .tab-item::after {
            content: '';
            display: var(--tab-divider-display);
            position: absolute;
            right: 0;
            top: 7px;
            bottom: 7px;
            width: 1px;
            background: var(--tab-divider-bg);
        }
        .tab-item:hover {
            color: var(--tab-hover-text);
            background: var(--tab-hover-bg);
            border: var(--tab-hover-border);
            box-shadow: var(--tab-hover-shadow);
            transform: var(--tab-hover-transform);
        }
        .tab-item:hover::after,
        .tab-item.active::after {
            opacity: 0;
        }
        .tab-item.active {
            color: var(--tab-active-text);
            font-weight: var(--tab-active-font-weight);
            background: var(--tab-active-bg);
            border: var(--tab-active-border);
            border-radius: var(--tab-active-radius);
            box-shadow: var(--tab-active-shadow);
            transform: var(--tab-active-transform);
        }
        .tab-item.active::before {
            content: '';
            display: var(--tab-active-bridge-display);
            position: absolute;
            left: 0;
            right: 0;
            bottom: -7px;
            height: 7px;
            background: var(--tab-active-bridge-bg);
            box-shadow: var(--tab-active-bridge-shadow);
        }
        .tab-item.active .tab-name::after {
            content: '';
            display: var(--tab-active-indicator-display);
            position: absolute;
            left: 0;
            right: 0;
            bottom: -9px;
            height: 3px;
            border: 1px solid var(--tab-active-indicator-border);
            border-radius: 999px;
            box-sizing: border-box;
            background: var(--tab-active-indicator-bg);
            box-shadow: var(--tab-active-indicator-shadow);
        }
        .tab-item .tab-dot {
            width: 6px;
            height: 6px;
            border-radius: 999px;
            border: 1px solid var(--tab-dot-border);
            box-sizing: border-box;
            background: var(--tab-dot-bg);
            box-shadow: var(--tab-dot-shadow);
            flex-shrink: 0;
            display: none;
        }
        .tab-item .tab-dot.show {
            display: block;
        }
        .tab-item .tab-name {
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 98px;
            position: relative;
        }
        .tab-item .tab-close {
            width: 17px;
            height: 17px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 12px;
            line-height: 1;
            color: var(--tab-close-text);
            background: var(--tab-close-bg);
            border: var(--tab-close-border);
            margin-left: 0;
            opacity: 0;
            transition: opacity 0.14s ease, color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
        }
        .tab-item:hover .tab-close,
        .tab-item.active .tab-close {
            opacity: 1;
        }
        .tab-item .tab-close:hover {
            color: var(--tab-close-hover-text);
            background: var(--tab-close-hover-bg);
            border-color: var(--tab-close-hover-border, transparent);
        }
        .tab-home-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            height: var(--tab-item-height);
            padding: 0 11px;
            margin-right: 8px;
            flex-shrink: 0;
            cursor: pointer;
            border: var(--tab-home-border);
            border-radius: var(--tab-home-radius);
            background: var(--tab-home-bg);
            color: var(--tab-home-text);
            font-size: 12px;
            font-weight: 550;
            font-family: inherit;
            box-shadow: var(--tab-home-shadow);
            transition: all var(--duration-normal, 0.2s) var(--ease-out, ease);
            white-space: nowrap;
        }

        .tab-home-btn svg {
            width: 12px;
            height: 12px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
        }

        .tab-home-btn:hover {
            background: var(--tab-home-hover-bg);
            border: var(--tab-home-hover-border);
            color: var(--tab-home-hover-text);
            box-shadow: var(--tab-home-hover-shadow);
            transform: var(--tab-home-hover-transform);
        }

        .tab-home-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: var(--neu-inset-deep);
        }
        .tab-add {
            width: 30px;
            height: var(--tab-item-height);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;
            border: var(--tab-add-border);
            border-radius: var(--tab-add-radius);
            background: var(--tab-add-bg);
            color: var(--tab-add-text);
            box-shadow: var(--tab-add-shadow);
            font-size: 16px;
            box-sizing: border-box;
            transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
        }
        .tab-add:hover {
            color: var(--tab-add-hover-text);
            background: var(--tab-add-hover-bg);
            transform: var(--tab-add-hover-transform);
        }