/* 流量图查询与客户专属查询样式 */
        /* ===== Zabbix 流量图查询 ===== */
        .view-section.traffic-view {
            max-width: min(1560px, calc(100vw - var(--sidebar-width) - 72px));
            animation: none !important;
            transform: none !important;
            filter: none !important;
            opacity: 1;
        }
        .traffic-card {
            max-width: none;
            margin: 0 auto;
            padding: 34px 38px;
            overflow: visible;
            animation: none !important;
            transform: none !important;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
            will-change: auto;
        }
        .traffic-card:hover {
            transform: none !important;
        }
        .view-section.traffic-view .traffic-card {
            animation: none !important;
            transform: none !important;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
            will-change: auto !important;
        }
        .view-section.traffic-view .traffic-card:hover {
            transform: none !important;
        }
        .traffic-unavailable-note {
            margin-left: 12px;
            color: #dc2626;
            font-weight: 900;
            white-space: nowrap;
        }
        .traffic-query-panel {
            position: relative;
            z-index: 160;
            margin-top: 18px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: rgba(248,250,252,0.72);
            animation: none !important;
            transform: none !important;
        }
        .traffic-query-grid {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr) auto;
            gap: 12px;
            align-items: end;
        }
        .traffic-search-box {
            position: relative;
            min-width: 0;
        }
        .traffic-field {
            width: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
            color: var(--label-color);
            font-size: 12px;
            font-weight: 700;
        }
        .traffic-field span {
            line-height: 1.2;
        }
        .traffic-field input,
        .traffic-field select {
            width: 100%;
            min-width: 0;
            height: 42px;
            padding: 9px 12px;
            border: 1.5px solid var(--input-border);
            border-radius: var(--radius);
            outline: none;
            font-size: 14px;
            background: var(--input-bg);
            color: var(--text-primary);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
            transform: none !important;
        }
        .traffic-field select {
            appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
            background-position:
                calc(100% - 18px) 18px,
                calc(100% - 13px) 18px;
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
            padding-right: 34px;
        }
        .traffic-field input:focus,
        .traffic-field select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--primary-ring);
            transform: none !important;
        }
        .traffic-field input:hover,
        .traffic-field select:hover {
            transform: none !important;
        }
        .traffic-submit {
            height: 42px;
            white-space: nowrap;
            min-width: 148px;
        }
        .traffic-submit .loader-circle {
            animation: spin 1s linear infinite;
        }
        .traffic-range-area {
            position: relative;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border-light);
        }
        .traffic-range-title {
            margin-bottom: 8px;
            color: var(--label-color);
            font-size: 12px;
            font-weight: 800;
        }
        .traffic-range-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .traffic-range-buttons button,
        .traffic-range-preset-grid button {
            min-height: 34px;
            padding: 7px 11px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transform: none;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
        }
        .traffic-range-buttons button:hover,
        .traffic-range-preset-grid button:hover {
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-ring);
            transform: none;
        }
        .traffic-range-buttons button.is-active {
            border-color: var(--primary);
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #fff;
            box-shadow: 0 8px 18px rgba(37,99,235,0.18);
        }
        .traffic-custom-range-button {
            max-width: 360px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .traffic-range-popover {
            position: absolute;
            z-index: 520;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            display: grid;
            grid-template-columns: minmax(260px, 0.42fr) minmax(360px, 1fr);
            gap: 18px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--card-bg);
            box-shadow: 0 22px 60px rgba(15,23,42,0.18);
        }
        .traffic-custom-range-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding-right: 18px;
            border-right: 1px solid var(--border-light);
        }
        .traffic-custom-range-form label {
            width: 100%;
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 8px;
            align-items: center;
            color: var(--label-color);
            font-size: 12px;
            font-weight: 800;
        }
        .traffic-custom-range-form input {
            width: 100%;
            min-width: 0;
            height: 38px;
            padding: 7px 10px;
            border: 1.5px solid var(--input-border);
            border-radius: 8px;
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 13px;
        }
        .traffic-custom-range-form .btn-primary {
            justify-self: end;
            height: 38px;
            min-width: 88px;
        }
        .traffic-range-preset-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .traffic-options-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 18px;
            align-items: center;
            margin-top: 12px;
        }
        .traffic-toggle-option,
        .traffic-domestic-option {
            width: auto;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            user-select: none;
            line-height: 1.2;
            transform: none;
            transition: color 0.15s ease;
        }
        .traffic-toggle-option input,
        .traffic-domestic-option input {
            width: 16px;
            height: 16px;
            flex: 0 0 auto;
            accent-color: var(--primary);
            cursor: pointer;
            transform: none !important;
            transition: none;
        }
        .traffic-toggle-option input:hover,
        .traffic-toggle-option input:focus,
        .traffic-domestic-option input:hover,
        .traffic-domestic-option input:focus {
            transform: none !important;
            box-shadow: none;
        }
        .traffic-toggle-option span,
        .traffic-domestic-option span {
            white-space: nowrap;
        }
        .traffic-suggestions {
            position: fixed;
            z-index: 1000;
            display: grid;
            gap: 6px;
            max-height: min(420px, calc(100vh - 96px));
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            -webkit-overflow-scrolling: touch;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--card-bg);
            box-shadow: var(--shadow-md);
        }
        .traffic-suggestions::-webkit-scrollbar {
            width: 8px;
        }
        .traffic-suggestions::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(100,116,139,0.42);
        }
        .traffic-suggestions button,
        .traffic-match-list button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            background: var(--bg);
            color: var(--text-primary);
            text-align: left;
            cursor: pointer;
        }
        .traffic-suggestions button:hover,
        .traffic-match-list button:hover {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-ring);
            transform: none !important;
        }
        .traffic-suggestions strong,
        .traffic-match-list strong {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .traffic-suggestions span,
        .traffic-match-list span {
            flex-shrink: 0;
            color: var(--text-secondary);
            font-size: 12px;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        .traffic-error {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 10px 12px;
            border: 1px solid var(--error-border);
            border-radius: var(--radius);
            background: var(--error-bg);
            color: var(--error-text);
            font-size: 13px;
        }
        .traffic-view button,
        .traffic-view button:hover,
        .traffic-view button:active,
        .traffic-view .btn-primary,
        .traffic-view .btn-primary:hover,
        .traffic-view .btn-primary:active,
        .traffic-view .btn-outline,
        .traffic-view .btn-outline:hover,
        .traffic-view .btn-outline:active {
            transform: none !important;
        }
        .traffic-results,
        .traffic-result-header,
        .traffic-match-list,
        .traffic-customer-editor,
        .traffic-interface-card,
        .traffic-chart-wrap,
        .traffic-zabbix-stats {
            animation: none !important;
            transform: none !important;
            will-change: auto;
        }
        .traffic-results {
            margin-top: 18px;
            display: grid;
            gap: 14px;
        }
        .traffic-match-list {
            margin-top: 18px;
            display: grid;
            gap: 8px;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: rgba(248,250,252,0.72);
        }
        .traffic-result-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: linear-gradient(135deg, #eef6ff 0%, #f8fafc 68%, #f4fbff 100%);
        }
        .traffic-kicker {
            display: block;
            margin-bottom: 3px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 700;
        }
        .traffic-result-header h3,
        .traffic-interface-header h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 18px;
            line-height: 1.3;
        }
        .traffic-host-id {
            flex-shrink: 0;
            color: var(--text-secondary);
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 12px;
        }
        .traffic-result-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            margin-top: 6px;
            color: var(--text-secondary);
            font-size: 12px;
        }
        .traffic-customer-editor {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) auto;
            gap: 10px;
            align-items: end;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: rgba(248,250,252,0.72);
        }
        .traffic-customer-editor .btn-outline {
            height: 42px;
            white-space: nowrap;
        }
        .traffic-interface-card {
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--card-bg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        .traffic-interface-header {
            display: flex;
            justify-content: space-between;
            gap: 14px;
            align-items: center;
            padding: 13px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        .traffic-interface-header p {
            margin: 4px 0 0;
            color: var(--text-secondary);
            font-size: 12px;
        }
        .traffic-legend-strip {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 14px;
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 700;
        }
        .traffic-legend-strip span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        .traffic-legend-strip i {
            display: inline-block;
            width: 18px;
            height: 7px;
            border-radius: 2px;
            box-shadow: inset 0 0 0 1px rgba(15,23,42,0.12);
        }
        .traffic-legend-strip i.is-outage {
            height: 8px;
            background: #dc2626;
            box-shadow: inset 0 0 0 1px rgba(127,29,29,0.18), 0 0 0 2px rgba(248,113,113,0.18);
        }
        .traffic-chart-wrap {
            position: relative;
            height: 304px;
            padding: 26px 18px 10px;
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent 0,
                    transparent 19px,
                    rgba(148,163,184,0.07) 20px
                ),
                linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        }
        .traffic-chart-title {
            position: absolute;
            top: 7px;
            left: 18px;
            right: 18px;
            color: #334155;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 11px;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }
        .traffic-chart-wrap canvas {
            image-rendering: auto;
        }
        .traffic-outage-note {
            padding: 10px 16px;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 800;
            border-top: 1px solid rgba(220, 38, 38, 0.28);
            border-bottom: 1px solid rgba(220, 38, 38, 0.16);
            background: linear-gradient(90deg, rgba(254, 226, 226, 0.92), rgba(254, 242, 242, 0.72));
        }
        .traffic-zabbix-stats {
            overflow-x: auto;
            padding: 10px 16px 14px;
            border-top: 1px solid var(--border-light);
            background: #fff;
        }
        .traffic-zabbix-stats table {
            width: 100%;
            min-width: 720px;
            border-collapse: collapse;
            color: var(--text-secondary);
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 11px;
        }
        .traffic-zabbix-stats th {
            padding: 3px 8px 6px;
            color: #64748b;
            font-weight: 700;
            text-align: right;
            border-bottom: 1px solid rgba(203,213,225,0.7);
        }
        .traffic-zabbix-stats th:first-child,
        .traffic-zabbix-stats td:first-child {
            text-align: left;
        }
        .traffic-zabbix-stats td {
            padding: 5px 8px;
            color: #334155;
            text-align: right;
            white-space: nowrap;
        }
        .traffic-zabbix-stats td:first-child {
            max-width: 460px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .traffic-stat-swatch {
            display: inline-block;
            width: 9px;
            height: 9px;
            margin-right: 6px;
            border-radius: 1px;
            vertical-align: -1px;
            box-shadow: inset 0 0 0 1px rgba(15,23,42,0.18);
        }
        html.dark .traffic-query-panel,
        html.dark .traffic-match-list,
        html.dark .traffic-customer-editor,
        html.dark .traffic-interface-card {
            background: rgba(15,23,42,0.72);
            border-color: #334155;
        }
        html.dark .traffic-suggestions {
            background: #0f172a;
            border-color: #334155;
        }
        html.dark .traffic-range-popover,
        html.dark .traffic-range-buttons button,
        html.dark .traffic-range-preset-grid button {
            background: #0f172a;
            border-color: #334155;
        }
        html.dark .traffic-range-buttons button.is-active {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            border-color: #60a5fa;
            color: #fff;
        }
        html.dark .traffic-custom-range-form {
            border-right-color: #334155;
        }
        html.dark .traffic-custom-range-form input {
            background: #1e293b;
            color: #f1f5f9;
            border-color: #334155;
        }
        html.dark .traffic-suggestions button,
        html.dark .traffic-match-list button {
            background: #111827;
            border-color: #334155;
        }
        html.dark .traffic-field input,
        html.dark .traffic-field select {
            background: #1e293b;
            color: #f1f5f9;
            border-color: #334155;
        }
        html.dark .traffic-result-header {
            background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.9) 72%);
            border-color: #334155;
        }
        html.dark .traffic-chart-wrap {
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent 0,
                    transparent 19px,
                    rgba(148,163,184,0.08) 20px
                ),
                linear-gradient(180deg, #0f172a 0%, #111827 100%);
        }
        html.dark .traffic-chart-title {
            color: #cbd5e1;
        }
        html.dark .traffic-outage-note {
            color: #fecaca;
            border-top-color: rgba(248, 113, 113, 0.3);
            background: rgba(127, 29, 29, 0.22);
        }
        html.dark .traffic-zabbix-stats {
            background: #0f172a;
            border-top-color: #334155;
        }
        html.dark .traffic-zabbix-stats th {
            color: #94a3b8;
            border-bottom-color: #334155;
        }
        html.dark .traffic-zabbix-stats td {
            color: #cbd5e1;
        }
        html.dark .traffic-interface-header {
            border-bottom-color: #334155;
        }

        @media (max-width: 980px) {
            .view-section.traffic-view {
                max-width: 100%;
            }
            .traffic-query-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .traffic-range-popover {
                grid-template-columns: 1fr;
            }
            .traffic-custom-range-form {
                padding-right: 0;
                padding-bottom: 14px;
                border-right: 0;
                border-bottom: 1px solid var(--border-light);
            }
            .traffic-submit {
                width: 100%;
            }
            .traffic-interface-header {
                align-items: flex-start;
                flex-direction: column;
            }
        }
        @media (max-width: 640px) {
            .traffic-query-grid {
                grid-template-columns: 1fr;
            }
            .traffic-range-preset-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .traffic-toggle-option span,
            .traffic-domestic-option span {
                white-space: normal;
            }
            .traffic-result-header {
                align-items: flex-start;
                flex-direction: column;
            }
            .traffic-customer-editor {
                grid-template-columns: 1fr;
            }
            .traffic-chart-wrap {
                height: 300px;
                padding-left: 10px;
                padding-right: 10px;
            }
            .traffic-chart-title {
                left: 10px;
                right: 10px;
            }
        }

        /* ===== 客户专属流量图页面 ===== */
        .customer-traffic-page {
            min-height: 100vh;
            padding: 36px clamp(16px, 4vw, 54px);
            background:
                linear-gradient(180deg, rgba(239,246,255,0.9), rgba(248,250,252,0.96)),
                radial-gradient(circle at top left, rgba(37,99,235,0.12), transparent 34%);
        }
        .customer-traffic-shell {
            width: min(1500px, 100%);
            margin: 0 auto;
            padding: 28px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: rgba(255,255,255,0.92);
            box-shadow: 0 24px 70px rgba(15,23,42,0.12);
        }
        .customer-traffic-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
        }
        .customer-traffic-header h1 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 8px;
            color: var(--text-primary);
            font-size: clamp(26px, 3vw, 38px);
            line-height: 1.15;
        }
        .customer-traffic-header p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 15px;
        }
        .customer-traffic-brand {
            flex-shrink: 0;
            padding: 8px 11px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: #fff;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0;
        }
        .customer-traffic-customer {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 12px 0 16px;
            padding: 14px 16px;
            border: 1px solid #bfdbfe;
            border-radius: var(--radius);
            background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
        }
        .customer-traffic-customer span {
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
        }
        .customer-traffic-customer strong {
            color: var(--text-primary);
            font-size: 18px;
        }
        .customer-traffic-customer em {
            color: var(--text-secondary);
            font-style: normal;
            font-size: 12px;
        }
        .customer-traffic-form {
            margin-top: 0;
        }
        .customer-traffic-grid {
            grid-template-columns: minmax(260px, 1fr) auto;
        }
        .customer-traffic-results {
            margin-top: 18px;
        }
        html.dark .customer-traffic-page {
            background: linear-gradient(180deg, #020617, #0f172a);
        }
        html.dark .customer-traffic-shell,
        html.dark .customer-traffic-brand {
            background: rgba(15,23,42,0.92);
            border-color: #334155;
        }
        html.dark .customer-traffic-customer {
            background: linear-gradient(135deg, rgba(30,64,175,0.24), rgba(15,23,42,0.82));
            border-color: #334155;
        }
        @media (max-width: 760px) {
            .customer-traffic-page {
                padding: 16px;
            }
            .customer-traffic-shell {
                padding: 18px;
            }
            .customer-traffic-header {
                flex-direction: column;
            }
            .customer-traffic-grid {
                grid-template-columns: 1fr;
            }
        }