* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            height: 100vh;
            overflow: hidden;
            background: #f5f7fb;
            color: #1f2937;
        }

        .page {
            height: 100vh;
            overflow-y: auto;
        }

        .hidden {
            display: none !important;
        }

        .login-container {
            padding: 40px 20px;
            max-width: 420px;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-title {
            text-align: center;
            margin-bottom: 28px;
            color: #1d7adf;
            font-size: 38px;
            font-weight: 800;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 14px;
            background: #fff;
            padding: 18px;
            border-radius: 16px;
            box-shadow: 0 6px 20px rgba(32, 77, 146, 0.08);
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group label {
            font-size: 14px;
            color: #606b85;
        }

        .form-group input {
            padding: 12px;
            border: 1px solid #dbe1ef;
            border-radius: 10px;
            font-size: 16px;
        }

        .login-remember-label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 14px;
            color: #606b85;
            user-select: none;
        }

        .login-remember-label input {
            width: auto;
            margin: 0;
        }

        .login-btn {
            background: linear-gradient(135deg, #1f9aff, #1b75e2);
            color: #fff;
            border: none;
            border-radius: 24px;
            padding: 14px;
            font-size: 17px;
            font-weight: 600;
            margin-top: 10px;
            cursor: pointer;
        }

        .home-page {
            background: linear-gradient(180deg, #f7f8fd 0%, #e9ecfb 45%, #2a3fa4 100%);
            padding: 20px 16px 28px;
        }

        .brand-card {
            width: 130px;
            height: 150px;
            margin: 0 auto 24px;
            background: #fff;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 18px rgba(26, 44, 90, 0.18);
        }

        .brand-card-btn {
            border: 0;
            cursor: pointer;
        }

        .brand-logo {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, #3cc0ff, #6f62ff);
            margin-bottom: 8px;
        }

        .brand-text {
            font-size: 15px;
            font-weight: 700;
        }

        .module-subtitle {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            margin: 12px 4px;
            opacity: 0.95;
        }

        .module-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .module-card {
            background: #fff;
            border-radius: 14px;
            min-height: 92px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            border: 0;
            font-size: 14px;
            color: #334155;
            font-weight: 600;
        }

        .module-card .icon {
            font-size: 30px;
            margin-bottom: 4px;
        }

        .my-page {
            background: #f3f6fc;
        }

        .my-header {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            height: 48px;
            display: flex;
            align-items: center;
            padding: 0 8px;
        }

        .my-header-title {
            font-size: 17px;
            font-weight: 700;
            color: #1f2937;
            margin-left: 6px;
        }

        .my-content {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .my-section {
            background: #fff;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
        }

        .my-section-title {
            font-size: 15px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 10px;
        }

        .my-setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .my-setting-label {
            font-size: 14px;
            color: #334155;
        }

        .my-setting-select {
            min-width: 130px;
            height: 34px;
            border: 1px solid #d8e1ef;
            border-radius: 10px;
            padding: 0 8px;
            background: #fff;
            font-size: 13px;
            color: #1f2937;
        }

        .my-setting-input {
            flex: 1;
            min-width: 0;
            height: 34px;
            border: 1px solid #d8e1ef;
            border-radius: 10px;
            padding: 0 8px;
            background: #fff;
            font-size: 13px;
            color: #1f2937;
        }

        .my-setting-tip {
            margin-top: 8px;
            font-size: 12px;
            color: #64748b;
        }

        .my-placeholder-card {
            border: 1px dashed #c7d2e5;
            border-radius: 10px;
            padding: 10px 12px;
            color: #64748b;
            font-size: 13px;
            background: #f8fbff;
        }

        .my-placeholder-card + .my-placeholder-card {
            margin-top: 8px;
        }

        .my-switch-account-btn {
            display: block;
            width: 100%;
            height: 38px;
            border: 1px solid #fecaca;
            border-radius: 10px;
            background: #fff5f5;
            color: #b91c1c;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        .my-switch-account-btn:active {
            background: #fee2e2;
        }

        .my-account-switch-section {
            margin-bottom: calc(72px + env(safe-area-inset-bottom));
        }

        .fleet-page {
            background: #f1f5fb;
            padding-bottom: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            box-sizing: border-box;
            overflow: hidden;
        }

        .fleet-header {
            background: #fff;
            padding: 10px 10px 12px;
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        .fleet-topline {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .back-btn {
            border: 0;
            background: none;
            font-size: 22px;
            color: #475569;
            padding: 4px 8px;
            cursor: pointer;
        }

        .mode-btn {
            border: 1px solid #d5deef;
            background: #fff;
            color: #475569;
            border-radius: 16px;
            padding: 7px 12px;
            font-size: 13px;
        }

        .search-wrap {
            flex: 1;
        }

        .search-input {
            width: 100%;
            border: 1px solid #dbe3f1;
            border-radius: 16px;
            height: 34px;
            padding: 0 12px;
            font-size: 14px;
        }

        .stat-row {
            margin-top: 10px;
            background: linear-gradient(135deg, #2f97f7, #2d7ee8);
            border-radius: 10px;
            color: #fff;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            overflow: hidden;
        }

        .stat-row.stat-row--video {
            grid-template-columns: repeat(3, 1fr);
        }

        .stat-item {
            padding: 10px 2px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.18s ease;
        }

        .stat-item:hover {
            background: rgba(255, 255, 255, 0.14);
        }

        .stat-item.active {
            background: rgba(255, 255, 255, 0.24);
        }

        .stat-value {
            font-size: 28px;
            font-weight: 800;
            line-height: 1;
        }

        .stat-label {
            margin-top: 4px;
            font-size: 12px;
            opacity: 0.95;
        }

        #fleetTrafficToggleWrap {
            margin-top: 8px;
            justify-content: flex-end;
        }

        .fleet-group-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            padding: 8px 10px;
            background: #eef4ff;
            border-radius: 10px;
            border: 1px solid #d8e4fd;
        }

        .fleet-group-toolbar.hidden {
            display: none;
        }

        .fleet-group-back {
            border: 0;
            background: #fff;
            border-radius: 10px;
            font-size: 18px;
            color: #334155;
            padding: 6px 12px;
            cursor: pointer;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        }

        .fleet-group-toolbar-title {
            flex: 1;
            font-size: 14px;
            font-weight: 700;
            color: #1e3a5f;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .fleet-page.fleet-search-disabled .search-wrap {
            opacity: 0.45;
            pointer-events: none;
        }

        .org-item {
            display: flex;
            gap: 10px;
            align-items: stretch;
            min-height: 76px;
            border-radius: 14px;
            background: #fff;
            padding: 12px;
            box-shadow: 0 2px 10px rgba(16, 35, 75, 0.08);
            margin-bottom: 10px;
        }

        .org-item-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: center;
        }

        .org-name {
            font-size: 15px;
            font-weight: 700;
            color: #1f2937;
            word-break: break-all;
        }

        .org-meta {
            font-size: 12px;
            color: #64748b;
        }

        .org-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            justify-content: center;
            flex-shrink: 0;
        }

        .org-btn {
            border-radius: 10px;
            border: 1px solid #cfe0fb;
            background: #f0f6ff;
            color: #1d4ed8;
            font-size: 12px;
            padding: 6px 10px;
            cursor: pointer;
            white-space: nowrap;
        }

        .org-btn-secondary {
            background: #fff;
            color: #475569;
            border-color: #dbe3f1;
        }

        .org-section-label {
            font-size: 13px;
            font-weight: 700;
            color: #334155;
            padding: 10px 6px 6px;
            margin-top: 6px;
            letter-spacing: 0.02em;
        }

        .org-vehicle-item {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 56px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid #e7edf7;
            padding: 10px 12px;
            margin-bottom: 10px;
            text-align: left;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(16, 35, 75, 0.06);
        }

        .org-vehicle-item:active {
            background: #f8fbff;
        }

        .org-vehicle-icon {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
        }

        .org-vehicle-main {
            flex: 1;
            min-width: 0;
        }

        .org-vehicle-title {
            font-size: 15px;
            font-weight: 600;
            color: #1f2937;
            word-break: break-all;
        }

        .org-vehicle-sub {
            margin-top: 2px;
            font-size: 12px;
            color: #64748b;
        }

        .org-vehicle-chevron {
            flex-shrink: 0;
            font-size: 18px;
            color: #94a3b8;
        }

        .fleet-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .fleet-list {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 12px 10px 18px;
            -webkit-overflow-scrolling: touch;
        }

        .fleet-map-wrap {
            flex: 1;
            min-height: 220px;
            position: relative;
            background: #e2e8f0;
        }

        .fleet-map-wrap #fleetMap {
            width: 100%;
            height: 100%;
            min-height: 220px;
        }

        .fleet-map-wrap .fleet-map-info-card {
            z-index: 1100;
        }

        .vehicle-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            min-height: 92px;
            border-radius: 14px;
            background: #fff;
            padding: 12px;
            box-shadow: 0 2px 10px rgba(16, 35, 75, 0.08);
            margin-bottom: 10px;
        }

        .vehicle-icon {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .vehicle-direction-icon {
            width: 26px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #16a34a;
            transform-origin: 50% 50%;
        }

        .vehicle-marker-wrap {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }

        .vehicle-marker-tag {
            display: inline-block;
            max-width: 152px;
            padding: 1px 6px;
            border: 1px solid #ef4444;
            border-radius: 2px;
            background: #fff;
            color: #111827;
            font-size: 12px;
            line-height: 16px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
        }

        .vehicle-car-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }

        .direction-arrow-svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: visible;
        }

        .direction-arrow-ring {
            display: none;
        }

        .direction-arrow-fill {
            fill: currentColor;
            opacity: 1;
        }

        .direction-arrow-chevron {
            fill: rgba(255, 255, 255, 0.92);
        }

        .direction-arrow-wheel {
            fill: #1f2937;
        }

        .vehicle-direction-running {
            color: #16a34a;
        }

        .vehicle-direction-stopped-on {
            color: #d4a100;
        }

        .vehicle-direction-stopped-off {
            color: #2563eb;
        }

        .vehicle-direction-offline {
            color: #6b7280;
        }

        .vehicle-direction-alarm {
            color: #dc2626;
        }

        .vehicle-main {
            flex: 1;
            min-width: 0;
        }

        .vehicle-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        .vehicle-code {
            font-size: 18px;
            font-weight: 800;
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .vehicle-speed {
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
            border-radius: 12px;
            padding: 2px 8px;
            background: #f1f5f9;
        }

        .vehicle-state {
            margin-left: 6px;
            font-size: 12px;
            font-weight: 700;
            border-radius: 10px;
            padding: 2px 8px;
            white-space: nowrap;
            background: #eef2ff;
            color: #4f46e5;
        }

        .vehicle-state.on {
            background: #ecfdf5;
            color: #15803d;
        }

        .vehicle-state.off {
            background: #f3f4f6;
            color: #6b7280;
        }

        .status-running .vehicle-code {
            color: #16a34a;
        }

        .status-running .vehicle-speed {
            color: #16a34a;
            background: #f0fdf4;
        }

        .status-stopped .vehicle-code {
            color: #2563eb;
        }

        .status-stopped .vehicle-speed {
            color: #2563eb;
            background: #eff6ff;
        }

        .status-offline .vehicle-code {
            color: #6b7280;
        }

        .status-offline .vehicle-speed {
            color: #6b7280;
            background: #f3f4f6;
        }

        .vehicle-item.has-alarm .vehicle-code {
            color: #ef4444 !important;
        }

        .vehicle-item.has-alarm .vehicle-speed {
            color: #ef4444 !important;
            background: #fff1f2 !important;
        }

        .vehicle-item.has-alarm .vehicle-direction-icon {
            color: #dc2626 !important;
        }

        .vehicle-pos {
            margin-top: 5px;
            color: #64748b;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .vehicle-arrow {
            width: 24px;
            color: #94a3b8;
            font-size: 22px;
            line-height: 1;
            text-align: center;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.2s ease;
            align-self: flex-start;
            margin-top: 6px;
        }

        .vehicle-item.expanded .vehicle-arrow {
            transform: rotate(180deg);
        }

        .alarm-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            padding: 2px 7px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            background: #f59e0b;
            line-height: 1.3;
        }

        .alarm-badge.important {
            background: #ef4444;
        }

        .vehicle-empty {
            text-align: center;
            color: #94a3b8;
            padding: 28px 10px;
            font-size: 14px;
        }

        .vehicle-detail-panel {
            display: none;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eef2f7;
        }

        .vehicle-item.expanded .vehicle-detail-panel {
            display: block;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-size: 13px;
            color: #475569;
            margin-bottom: 8px;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin: 8px 0 10px;
        }

        .detail-card {
            background: #f8fafc;
            border-radius: 10px;
            text-align: center;
            padding: 10px 6px;
        }

        .detail-card .num {
            font-size: 24px;
            font-weight: 800;
            color: #334155;
            line-height: 1.2;
        }

        .detail-card .txt {
            margin-top: 3px;
            color: #64748b;
            font-size: 12px;
        }

        .status-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .status-tag {
            border-radius: 4px;
            background: #e0f2fe;
            color: #075985;
            padding: 2px 6px;
            font-size: 11px;
            font-weight: 600;
        }

        .quick-menu {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 8px;
        }

        .quick-btn {
            border: 1px solid #dbe6f5;
            background: #fff;
            border-radius: 10px;
            padding: 10px 8px;
            text-align: center;
            font-size: 13px;
            color: #334155;
            cursor: pointer;
            font-weight: 600;
            flex: 1 1 0;
            min-width: 0;
        }

        .video-channel-row {
            margin-top: 8px;
        }

        .video-channel-strip {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px;
        }

        .video-channel-icon-btn {
            margin: 0;
            padding: 8px 10px;
            border: 1px solid #dbe6f5;
            border-radius: 12px;
            background: #fff;
            cursor: pointer;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 56px;
            max-width: 92px;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }

        .video-channel-icon-btn:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
        }

        .video-channel-icon-btn:active {
            transform: scale(0.97);
            background: #f1f5f9;
        }

        .video-channel-icon-caption {
            font-size: 11px;
            font-weight: 600;
            color: #334155;
            text-align: center;
            line-height: 1.25;
            word-break: break-all;
        }

        .video-channel-empty {
            font-size: 12px;
            color: #64748b;
        }

        .video-surveillance-channel-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 4px;
            align-items: center;
        }

        .vehicle-item--video-surveillance .vehicle-main {
            min-width: 0;
        }

        .map-modal,
        .realtime-modal,
        .time-modal,
        .alarm-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .map-modal,
        .realtime-modal,
        .alarm-modal {
            background: rgba(15, 23, 42, 0.55);
        }

        .map-modal {
            z-index: 1200;
            padding: 14px;
        }

        /** 实时视频：与地图同构的遮罩 + 白底圆角面板，叠在其它业务弹层之上 */
        .video-live-float-modal {
            z-index: 1410;
        }

        .realtime-modal {
            z-index: 1210;
            padding: 14px;
        }

        .time-modal {
            z-index: 1250;
            padding: 16px;
            background: rgba(15, 23, 42, 0.5);
        }

        .alarm-modal {
            z-index: 1260;
            padding: 14px;
        }

        .map-modal.show,
        .realtime-modal.show,
        .time-modal.show,
        .alarm-modal.show {
            display: flex;
        }

        .video-live-float-modal.show {
            display: flex;
        }

        .video-live-panel {
            width: 100%;
            max-width: 100vw;
            box-sizing: border-box;
            /* 底栏参与文档流，勿再 padding-bottom 预留（否则 fixed 底栏时整段会变成视频与按钮间黑块） */
            padding: 0;
            background: #000;
            border-radius: 0;
            overflow: visible;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            flex: 0 0 auto;
        }

        .video-live-status:empty {
            display: none;
        }

        .video-live-status:not(:empty) {
            flex-shrink: 0;
            padding: 10px 14px;
            font-size: 13px;
            line-height: 1.4;
            color: #94a3b8;
            background: #000;
            border-bottom: 1px solid #1f2937;
        }

        .video-live-scroll {
            flex: 0 1 auto;
            width: 100%;
            max-width: 100vw;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: visible;
            overscroll-behavior: contain;
            background: #000;
        }

        .video-live-canvas {
            width: 100%;
            min-height: 0;
            background: #000;
        }

        .video-live-map-wrap {
            flex: 0 0 auto;
            border-top: 1px solid #e2e8f0;
            background: #fff;
            padding: 8px 10px 10px;
        }

        .video-live-map-title {
            font-size: 12px;
            color: #334155;
            margin-bottom: 6px;
        }

        #videoLiveMap {
            width: 100%;
            height: 180px;
            border-radius: 8px;
            overflow: hidden;
            background: #f1f5f9;
            position: relative;
        }

        #videoLiveMap .video-live-map-info-card {
            z-index: 600;
            width: min(320px, calc(100% - 20px));
        }

        .video-live-grid {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 0;
            margin: 0;
        }

        .video-live-tile {
            flex: 0 0 auto;
            width: 100%;
            margin: 0;
        }

        .video-live-tile + .video-live-tile {
            border-top: 1px solid #141414;
        }

        /**
         * Jessibuca 根节点 = 画面 + 底栏，勿对外层用单一 16:9 裁切。
         * 浮窗内 flex + min-height:0 会把未设高度的容器压扁，故给最小高度 ≈ 画面 16:9 + 底栏。
         */
        .video-live-tile-player {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            background: #000;
            border-radius: 0;
            overflow: visible;
            position: relative;
            box-sizing: border-box;
            /** 与浮窗白面板内容区等宽：≈ min(520px, 100vw - 28px)（遮罩 padding 14×2） */
            min-height: calc(min(520px, 100vw - 28px) * 9 / 16 + 52px);
        }

        .jessibuca-live-shell video,
        .jessibuca-live-shell canvas {
            max-width: none !important;
        }

        /** 独立弹窗页 video-live.html：浅灰底 + 居中白卡片（对齐 ADAS 弹层观感） */
        html.video-live-popout-html {
            margin: 0;
            height: auto;
        }

        body.video-live-popout-root {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            background: #e2e8f0;
            padding: 12px;
            min-height: 100vh;
            min-height: 100dvh;
        }

        .video-live-panel.video-live-panel--popout {
            flex: 1 1 auto;
            width: 100%;
            max-width: 100vw;
            min-height: 0;
        }

        .map-panel {
            width: min(960px, 96vw);
            height: min(88.6vh, 821px);
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 16px 50px rgba(2, 6, 23, 0.35);
            display: flex;
            flex-direction: column;
        }

        /**
         * 实时视频浮窗：固定视口高度（避免 auto 随 Jessibuca 插入剧变）、alarm-panel 结构同「最新 ADAS 报警」。
         */
        .alarm-panel.video-live-alarm-panel {
            height: min(92vh, 920px);
            max-height: min(92vh, 920px);
            width: 100%;
            max-width: min(520px, calc(100vw - 28px));
            box-sizing: border-box;
        }

        .alarm-panel.video-live-alarm-panel .video-live-float-inner {
            flex: 1 1 0;
            min-height: 0;
            display: flex;
            flex-direction: column;
            background: #f8fafc;
        }

        .alarm-panel.video-live-alarm-panel .video-live-scroll {
            flex: 1 1 0;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            background: #f8fafc;
        }

        /** 单路视频+底部地图时：视频区按内容收缩，去掉视频底栏与地图之间空白 */
        .alarm-panel.video-live-alarm-panel .video-live-float-inner.video-live-float-inner--with-mini-map .video-live-scroll {
            flex: 0 0 auto;
            overflow-y: visible;
            background: transparent;
        }

        /** 浮窗内通道列表贴顶排布，避免少路流时在滚动区内纵向居中留出大块黑底 */
        .alarm-panel.video-live-alarm-panel .video-live-canvas.video-live-grid {
            justify-content: flex-start;
            align-items: stretch;
            min-height: min-content;
        }

        .video-replay-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-top: 1px solid #e2e8f0;
            background: #f8fafc;
            flex-wrap: wrap;
        }

        .video-replay-seek-row {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 2px;
        }

        .video-replay-seek-axis-wrap {
            position: relative;
            width: 100%;
            height: 24px;
            cursor: pointer;
            touch-action: none;
        }

        .video-replay-seek-axis {
            position: absolute;
            left: 0;
            right: 0;
            top: 8px;
            height: 10px;
            border-radius: 999px;
            background: #dbe4f0;
            background-image:
                repeating-linear-gradient(
                    to right,
                    rgba(15, 23, 42, 0.25) 0,
                    rgba(15, 23, 42, 0.25) 1px,
                    transparent 1px,
                    transparent 2.5%
                );
            overflow: hidden;
        }

        .video-replay-seg {
            position: absolute;
            top: 0;
            height: 100%;
            min-width: 2px;
            border-radius: 999px;
            z-index: 1;
            pointer-events: none;
        }

        .video-replay-seg.normal {
            background: #22c55e;
        }

        .video-replay-seg.alarm {
            background: #ef4444;
        }

        .video-replay-seek-thumb {
            position: absolute;
            top: calc(100% - 9px);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 12px solid #2563eb;
            transform: translateX(-50%);
            filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.3));
            pointer-events: auto;
            cursor: grab;
            z-index: 5;
        }

        .video-replay-seek-thumb:active {
            cursor: grabbing;
        }

        .video-replay-seek-thumb::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: 2px;
            height: 18px;
            transform: translateX(-50%);
            background: #2563eb;
            border-radius: 2px;
        }

        .video-replay-seek-ticks {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #64748b;
            font-size: 11px;
            line-height: 1;
        }

        .video-replay-seek-ticks #videoReplaySeekCurrentText {
            color: #1e293b;
            font-weight: 600;
        }

        .video-replay-btn,
        .video-replay-speed {
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #1e293b;
            border-radius: 8px;
            height: 32px;
            padding: 0 10px;
            font-size: 12px;
        }

        @supports (height: 1dvh) {
            .alarm-panel.video-live-alarm-panel {
                height: min(92dvh, 920px);
                max-height: min(92dvh, 920px);
            }
        }

        .video-live-popout-shell.alarm-panel.video-live-alarm-panel {
            max-width: min(520px, calc(100vw - 24px));
            width: 100%;
            flex: 1 1 auto;
            min-height: 0;
        }

        .map-panel-header,
        .realtime-panel-header {
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            border-bottom: 1px solid #e2e8f0;
            font-weight: 700;
            color: #1e293b;
            background: #f8fafc;
        }

        .map-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .track-view-tabs {
            display: inline-flex;
            align-items: center;
            background: #e2e8f0;
            border-radius: 999px;
            padding: 2px;
            gap: 2px;
        }

        .track-view-tab {
            border: 0;
            background: transparent;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            height: 26px;
            padding: 0 10px;
            border-radius: 999px;
            cursor: pointer;
            white-space: nowrap;
        }

        .track-view-tab.active {
            background: #2563eb;
            color: #fff;
        }

        .map-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .map-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #334155;
            font-weight: 600;
            white-space: nowrap;
        }

        .play-btn {
            border: 0;
            height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            background: #2563eb;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .play-info {
            font-size: 12px;
            color: #334155;
            background: #e2e8f0;
            border-radius: 999px;
            padding: 3px 8px;
            white-space: nowrap;
        }

        .play-speed {
            height: 28px;
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            font-size: 12px;
            color: #334155;
            padding: 0 8px;
            background: #fff;
        }

        .play-progress {
            width: 120px;
            accent-color: #2563eb;
        }

        .playback-vehicle-marker {
            background: transparent;
            border: 0;
        }

        .playback-vehicle-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.22));
            white-space: nowrap;
        }

        .playback-vehicle-arrow {
            width: 26px;
            height: 26px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #16a34a;
            transform-origin: 50% 50%;
        }

        .playback-vehicle-speed {
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(22, 163, 74, 0.92);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            white-space: nowrap;
            box-shadow: 0 1px 6px rgba(15, 23, 42, 0.25);
            letter-spacing: 0.2px;
        }

        .playback-vehicle-arrow.playback-color-running,
        .playback-vehicle-speed.playback-color-running {
            --playback-c: #16a34a;
        }

        .playback-vehicle-arrow.playback-color-running {
            color: var(--playback-c);
        }

        .playback-vehicle-speed.playback-color-running {
            background: var(--playback-c);
        }

        .playback-vehicle-arrow.playback-color-stopped-on {
            color: #d4a100;
        }

        .playback-vehicle-speed.playback-color-stopped-on {
            background: #eab308;
            color: #1f2937;
        }

        .playback-vehicle-arrow.playback-color-stopped-off,
        .playback-vehicle-speed.playback-color-stopped-off {
            --playback-c: #2563eb;
        }

        .playback-vehicle-arrow.playback-color-stopped-off {
            color: var(--playback-c);
        }

        .playback-vehicle-speed.playback-color-stopped-off {
            background: var(--playback-c);
        }

        .playback-vehicle-arrow.playback-color-alarm,
        .playback-vehicle-speed.playback-color-alarm {
            --playback-c: #dc2626;
        }

        .playback-vehicle-arrow.playback-color-alarm {
            color: var(--playback-c);
        }

        .playback-vehicle-speed.playback-color-alarm {
            background: var(--playback-c);
        }

        .playback-vehicle-speed.playback-color-stopped-off,
        .playback-vehicle-speed.playback-color-alarm {
            color: #fff;
        }

        .parking-point-marker,
        .track-point-marker {
            background: transparent;
            border: 0;
        }

        .parking-point-icon,
        .track-point-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-weight: 700;
            line-height: 24px;
            text-align: center;
        }

        .parking-point-icon {
            background: #f59e0b;
            color: #fff;
            font-size: 11px;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
        }

        .alarm-point-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ef4444;
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            line-height: 20px;
            text-align: center;
            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18), 0 2px 10px rgba(239, 68, 68, 0.45);
        }

        .track-point-icon {
            color: #fff;
            font-size: 12px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
        }

        .track-point-icon.start {
            background: #16a34a;
        }

        .track-point-icon.end {
            background: #ef4444;
        }

        .realtime-vehicle-marker {
            background: transparent;
            border: 0;
        }

        .map-close-btn {
            border: 0;
            background: #ef4444;
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            line-height: 1;
            font-size: 16px;
        }

        .track-view-area {
            height: 42%;
            width: 100%;
            position: relative;
        }

        .track-view-panel {
            width: 100%;
            height: 100%;
            display: none;
        }

        .track-view-panel.active {
            display: block;
        }

        .map-canvas #trackMap {
            width: 100%;
            height: 100%;
        }

        .realtime-info-card {
            position: absolute;
            left: 14px;
            top: 14px;
            width: min(320px, calc(100% - 28px));
            background: rgba(255, 255, 255, 0.4);
            border-radius: 10px;
            border: 1px solid rgba(203, 213, 225, 0.9);
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
            backdrop-filter: blur(2px);
            padding: 10px 12px;
            display: none;
            z-index: 520;
            pointer-events: none;
        }

        .realtime-info-card.show {
            display: block;
        }

        .realtime-title {
            font-size: 20px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.05;
            margin-bottom: 6px;
        }

        .realtime-line {
            display: flex;
            gap: 8px;
            font-size: 13px;
            color: #334155;
            line-height: 1.45;
            margin-bottom: 2px;
        }

        .realtime-line span:first-child {
            width: 58px;
            flex-shrink: 0;
            color: #64748b;
        }

        .realtime-panel {
            width: 100%;
            max-width: 820px;
            height: min(90vh, 760px);
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 16px 50px rgba(2, 6, 23, 0.35);
            display: flex;
            flex-direction: column;
        }

        .realtime-header-left {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .realtime-map-wrap {
            position: relative;
            flex: 1;
            min-height: 0;
            height: 100%;
        }

        #realtimeMap {
            width: 100%;
            height: 100%;
        }

        .speed-canvas-panel {
            background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
            position: relative;
        }

        #speedChartCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .speed-chart-empty {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            color: #64748b;
            font-size: 13px;
            font-weight: 600;
        }

        .track-summary {
            flex: 1;
            overflow-y: auto;
            background: #f8fafc;
            padding: 10px;
        }

        .summary-section {
            background: #fff;
            border-radius: 10px;
            margin-bottom: 10px;
            border: 1px solid #edf2f7;
            overflow: hidden;
        }

        .summary-title {
            font-size: 16px;
            font-weight: 700;
            color: #334155;
            padding: 10px 12px;
            border-bottom: 1px solid #eef2f7;
        }

        .time-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .time-item {
            padding: 12px;
            text-align: center;
        }

        .time-label {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 4px;
        }

        .time-value {
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
        }

        .data-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            border-top: 1px solid #eef2f7;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .data-item {
            padding: 10px 6px 9px;
            text-align: center;
            border-right: 1px solid #eef2f7;
            border-bottom: 1px solid #eef2f7;
        }

        .data-item:nth-child(4n) {
            border-right: 0;
        }

        .data-num {
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.2;
            letter-spacing: 0.2px;
        }

        .data-text {
            font-size: 11px;
            color: #64748b;
            margin-top: 4px;
            line-height: 1.2;
        }

        .addr-item {
            display: flex;
            gap: 8px;
            padding: 10px 12px;
            border-bottom: 1px solid #eef2f7;
        }

        .addr-item:last-child {
            border-bottom: 0;
        }

        .addr-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 13px;
            color: #fff;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .addr-dot.start {
            background: #22c55e;
        }

        .addr-dot.end {
            background: #ef4444;
        }

        .addr-title {
            font-size: 12px;
            color: #64748b;
        }

        .addr-text {
            margin-top: 1px;
            font-size: 15px;
            color: #1f2937;
        }

        .park-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            border-bottom: 1px solid #eef2f7;
            font-size: 16px;
            font-weight: 700;
            color: #334155;
        }

        .park-badge {
            background: #2563eb;
            color: #fff;
            border-radius: 999px;
            font-size: 12px;
            padding: 2px 10px;
            font-weight: 600;
        }

        .park-item {
            padding: 10px 12px;
            border-bottom: 1px solid #eef2f7;
        }

        .park-item:last-child {
            border-bottom: 0;
        }

        .park-time {
            font-size: 13px;
            color: #334155;
            font-weight: 600;
        }

        .park-detail {
            margin-top: 4px;
            font-size: 13px;
            color: #64748b;
            line-height: 1.45;
        }

        .alarm-panel {
            width: 100%;
            max-width: 840px;
            height: min(80vh, 680px);
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 16px 50px rgba(2, 6, 23, 0.35);
            display: flex;
            flex-direction: column;
        }

        #adasAlarmModal .alarm-panel,
        #dsmAlarmModal .alarm-panel {
            width: min(960px, 96vw);
            max-width: none;
            height: min(88.6vh, 821px);
        }

        .alarm-panel-header {
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }

        .alarm-panel-title {
            font-size: 17px;
            font-weight: 700;
            color: #1e293b;
        }

        .alarm-list {
            flex: 1;
            overflow-y: auto;
            background: #f8fafc;
            padding: 10px;
        }

        .alarm-item {
            background: #fff;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
            margin-bottom: 10px;
            padding: 10px 12px;
        }

        .alarm-item-clickable {
            cursor: pointer;
        }

        .alarm-item:last-child {
            margin-bottom: 0;
        }

        .alarm-item-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .alarm-item-title {
            font-size: 15px;
            font-weight: 700;
            color: #0f172a;
        }

        .alarm-item-tag {
            font-size: 11px;
            font-weight: 700;
            color: #dc2626;
            background: #fee2e2;
            border-radius: 999px;
            padding: 2px 8px;
            white-space: nowrap;
        }

        .alarm-item-lines {
            margin-top: 8px;
            display: grid;
            gap: 6px;
        }

        .alarm-item-line {
            display: flex;
            font-size: 13px;
            color: #334155;
            line-height: 1.4;
            gap: 8px;
        }

        .alarm-item-line .label {
            width: 64px;
            flex-shrink: 0;
            color: #64748b;
        }

        .alarm-empty {
            text-align: center;
            color: #94a3b8;
            font-size: 14px;
            padding: 30px 12px;
        }

        .alarm-detail-panel {
            display: none;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #dbe2ef;
        }

        .alarm-item.expanded .alarm-detail-panel {
            display: block;
        }

        .alarm-detail-title {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 8px;
        }

        .alarm-detail-loading,
        .alarm-detail-empty {
            font-size: 13px;
            color: #64748b;
            padding: 4px 0;
        }

        .alarm-attachment-btn {
            margin-top: 4px;
            width: fit-content;
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }

        .alarm-map-btn {
            margin-top: 4px;
            width: fit-content;
            border: 1px solid #bbf7d0;
            background: #f0fdf4;
            color: #15803d;
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }

        .alarm-action-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .alarm-action-row .alarm-map-btn,
        .alarm-action-row .alarm-attachment-btn {
            margin-top: 4px;
        }

        .alarm-attachment-wrap {
            margin-top: 8px;
            border-top: 1px solid #e2e8f0;
            padding-top: 8px;
        }

        .alarm-attachment-loading,
        .alarm-attachment-empty {
            font-size: 12px;
            color: #64748b;
        }

        .alarm-attachment-media-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .alarm-attachment-image,
        .alarm-attachment-video {
            width: 100%;
            display: block;
            border-radius: 8px;
            border: 1px solid #dbe4f0;
            background: #f8fafc;
        }

        .alarm-map-panel {
            width: 100%;
            max-width: 860px;
            height: min(80vh, 680px);
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 16px 50px rgba(2, 6, 23, 0.35);
            display: flex;
            flex-direction: column;
        }

        .alarm-map-meta {
            padding: 8px 12px;
            font-size: 12px;
            color: #475569;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }

        .alarm-map-meta-bottom {
            border-bottom: 0;
            border-top: 1px solid #e2e8f0;
        }

        .alarm-map-meta:empty {
            display: none;
        }

        .alarm-map-canvas {
            flex: 1;
            min-height: 320px;
            background: #e2e8f0;
        }

        .alarm-map-popup-text {
            font-size: 12px;
            color: #475569;
            line-height: 2;
            font-weight: 400;
            width: fit-content;
            max-width: 620px;
        }

        .alarm-map-popup-title {
            font-size: 13px;
            color: #1e293b;
            line-height: 1.4;
            font-weight: 700;
            margin: 0;
            padding: 7px 0 4px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .alarm-map-popup-card {
            margin: 0;
            padding: 0;
            width: fit-content;
            max-width: 620px;
        }

        .leaflet-popup.alarm-map-popup .leaflet-popup-content {
            width: auto !important;
            margin: 8px 10px;
        }

        /* 百度信息窗标题栏：保留标题并压缩留白 */
        .BMap_bubble_title {
            display: block !important;
            margin: 0 !important;
            padding: 11px 10px 2px 10px !important;
            line-height: 1.35 !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #1e293b !important;
            border: 0 !important;
            background: transparent !important;
        }

        .BMap_bubble_content {
            padding: 2px 10px 8px 10px !important;
            margin: 0 !important;
        }

        /* 地图版权/审图号文本统一缩小，低于页面常规字号 */
        .leaflet-control-attribution,
        .leaflet-control-attribution a,
        .BMap_cpyCtrl,
        .anchorBL {
            font-size: 10px !important;
            line-height: 1.2 !important;
        }

        .time-panel {
            width: 100%;
            max-width: 420px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 12px 36px rgba(2, 6, 23, 0.28);
            padding: 16px;
        }

        .time-title {
            font-size: 16px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 12px;
        }

        .time-field {
            margin-bottom: 10px;
        }

        .time-field label {
            display: block;
            font-size: 13px;
            color: #475569;
            margin-bottom: 5px;
        }

        .time-field input {
            width: 100%;
            border: 1px solid #dbe4f0;
            border-radius: 8px;
            height: 38px;
            padding: 0 10px;
            font-size: 14px;
        }

        .time-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 4px;
        }

        .time-btn {
            border: 0;
            border-radius: 8px;
            height: 34px;
            padding: 0 14px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
        }

        .time-btn.cancel {
            background: #e2e8f0;
            color: #334155;
        }

        .time-btn.confirm {
            background: #2563eb;
            color: #fff;
        }

        .video-history-panel {
            width: min(960px, 96vw);
            height: min(88.6vh, 821px);
            display: flex;
            flex-direction: column;
        }

        .video-history-toolbar {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 10px;
            align-items: end;
            padding: 0 14px 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .video-history-channel-picker {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 12px;
            padding: 8px 14px 10px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
            font-size: 12px;
            color: #334155;
        }

        .video-history-channel-picker .picker-label {
            color: #475569;
            font-weight: 600;
            margin-right: 2px;
        }

        .video-history-channel-picker .channel-option {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            user-select: none;
        }

        .video-history-tabs {
            display: flex;
            gap: 8px;
            padding: 10px 14px 0;
        }

        .video-history-tab {
            border: 1px solid #cbd5e1;
            background: #f8fafc;
            color: #334155;
            border-radius: 8px;
            height: 30px;
            padding: 0 12px;
            font-size: 13px;
            cursor: pointer;
        }

        .video-history-tab.active {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .video-history-state {
            min-height: 22px;
            font-size: 12px;
            color: #64748b;
            padding: 8px 14px 4px;
        }

        .video-history-body {
            flex: 1;
            min-height: 0;
            overflow: auto;
            padding: 10px 14px 14px;
        }

        .video-history-view {
            display: none;
        }

        .video-history-view.active {
            display: block;
        }

        .video-history-timeline {
            border: 1px solid #dbe4f0;
            border-radius: 10px;
            padding: 12px 10px 10px;
            background: #f8fafc;
        }

        .video-history-ruler {
            position: relative;
            height: 20px;
            margin-bottom: 8px;
        }

        .video-history-ruler-major {
            position: absolute;
            top: 0;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            color: #64748b;
            font-size: 10px;
            line-height: 1;
            white-space: nowrap;
        }

        .video-history-ruler-major::before {
            content: '';
            width: 1px;
            height: 6px;
            background: #94a3b8;
        }

        .video-history-timeline-axis {
            position: relative;
            height: 24px;
            background: #e2e8f0;
            border-radius: 999px;
            overflow: hidden;
            touch-action: none;
            cursor: pointer;
            background-image:
                repeating-linear-gradient(
                    to right,
                    rgba(15, 23, 42, 0.35) 0,
                    rgba(15, 23, 42, 0.35) 1px,
                    transparent 1px,
                    transparent 2.5%
                );
        }

        .video-history-timeline-axis-wrap {
            position: relative;
            padding-bottom: 14px;
        }

        .video-history-seek-thumb {
            position: absolute;
            top: calc(100% - 1px);
            width: 0;
            height: 0;
            border-left: 9px solid transparent;
            border-right: 9px solid transparent;
            border-bottom: 14px solid #2563eb;
            filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.35));
            transform: translateX(-50%);
            z-index: 4;
            pointer-events: auto;
            cursor: grab;
        }

        .video-history-seek-thumb:active {
            cursor: grabbing;
        }

        .video-history-seek-thumb::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: 2px;
            height: 23px;
            background: #2563eb;
            transform: translateX(-50%);
            border-radius: 2px;
            opacity: 1;
        }

        .video-history-seg {
            position: absolute;
            top: 0;
            height: 100%;
            border-radius: 999px;
            min-width: 2px;
        }

        .video-history-seg.normal {
            background: #22c55e;
        }

        .video-history-seg.alarm {
            background: #ef4444;
        }

        .video-history-ticks {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #64748b;
            margin-top: 6px;
        }

        .video-history-playback-tools {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            margin-top: 10px;
            align-items: center;
        }

        .video-history-time-value {
            font-size: 12px;
            color: #334155;
            margin-top: 4px;
        }

        .video-history-list {
            display: grid;
            gap: 8px;
        }

        .video-history-item {
            border: 1px solid #dbe4f0;
            border-radius: 10px;
            padding: 10px;
            background: #fff;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            align-items: center;
        }

        .video-history-item-meta {
            font-size: 12px;
            color: #475569;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .video-history-play-btn {
            border: 0;
            background: #2563eb;
            color: #fff;
            border-radius: 8px;
            height: 32px;
            padding: 0 12px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .video-history-action-group {
            display: flex;
            gap: 8px;
        }

        .video-history-download-btn {
            border: 1px solid #2563eb;
            background: #fff;
            color: #2563eb;
            border-radius: 8px;
            height: 32px;
            padding: 0 12px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .video-history-download-btn.is-marked {
            background: #2563eb;
            color: #fff;
            border-color: #1d4ed8;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
        }

        @media (max-width: 768px) {
            .alarm-modal {
                padding: 8px;
                align-items: flex-start;
            }

            #mapModal {
                padding: 6px;
                align-items: flex-start;
            }

            #mapModal .map-panel {
                width: calc(100vw - 12px);
                max-width: calc(100vw - 12px);
                height: calc(100vh - 12px);
                max-height: calc(100vh - 12px);
                border-radius: 12px;
            }

            @supports (height: 1dvh) {
                #mapModal .map-panel {
                    height: calc(100dvh - 12px);
                    max-height: calc(100dvh - 12px);
                }
            }

            #mapModal .map-panel-header {
                height: auto;
                padding: 8px 10px;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            #mapModal .map-header-left {
                display: flex;
                flex-wrap: wrap;
                gap: 6px 8px;
                min-width: 0;
            }

            #mapModal #mapTitle {
                font-size: 18px;
                line-height: 1.2;
                font-weight: 700;
                max-width: 100%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            #mapModal .map-toggle {
                font-size: 11px;
            }

            #mapModal .track-view-tab {
                height: 28px;
                padding: 0 9px;
                font-size: 12px;
            }

            #mapModal .map-header-actions {
                display: grid;
                grid-template-columns: auto 1fr auto auto;
                gap: 6px;
                align-items: center;
            }

            #mapModal .play-speed {
                height: 30px;
                padding: 0 6px;
            }

            #mapModal .play-progress {
                width: 100%;
                min-width: 0;
            }

            #mapModal .play-btn {
                height: 30px;
                padding: 0 9px;
            }

            #mapModal .map-close-btn {
                width: 30px;
                height: 30px;
                font-size: 18px;
            }

            #mapModal .track-view-area {
                height: 36%;
            }

            #mapModal .track-summary {
                padding: 8px;
            }

            .video-history-panel {
                width: calc(100vw - 16px);
                max-width: calc(100vw - 16px);
                height: calc(100vh - 16px);
                max-height: calc(100vh - 16px);
                border-radius: 12px;
            }

            @supports (height: 1dvh) {
                .video-history-panel {
                    height: calc(100dvh - 16px);
                    max-height: calc(100dvh - 16px);
                }
            }

            .video-history-toolbar {
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 8px 10px 10px;
            }

            .video-history-toolbar .time-btn.confirm {
                width: 100%;
            }

            .video-history-channel-picker {
                padding: 8px 10px;
                gap: 6px 10px;
            }

            .video-history-tabs {
                padding: 8px 10px 0;
            }

            .video-history-state {
                padding: 6px 10px 4px;
            }

            .video-history-body {
                padding: 8px 10px 12px;
            }

            #adasAlarmMapModal {
                padding: 6px;
                align-items: flex-start;
            }

            #adasAlarmMapModal .alarm-map-panel {
                width: calc(100vw - 12px);
                max-width: calc(100vw - 12px);
                height: calc(100vh - 12px);
                max-height: calc(100vh - 12px);
                border-radius: 12px;
            }

            @supports (height: 1dvh) {
                #adasAlarmMapModal .alarm-map-panel {
                    height: calc(100dvh - 12px);
                    max-height: calc(100dvh - 12px);
                }
            }

            #adasAlarmMapModal .alarm-panel-header {
                height: auto;
                min-height: 44px;
                padding: 8px 10px;
            }

            #adasAlarmMapModal .alarm-panel-title {
                font-size: 16px;
                line-height: 1.2;
            }

            #adasAlarmMapModal .alarm-map-meta {
                padding: 6px 10px;
                font-size: 12px;
                line-height: 1.35;
                white-space: normal;
                word-break: break-word;
            }

            #adasAlarmMapModal .alarm-map-canvas {
                min-height: 260px;
            }

            #adasAlarmMapModal .alarm-map-popup-card,
            #adasAlarmMapModal .alarm-map-popup-text {
                max-width: min(78vw, 300px);
            }

            #adasAlarmMapModal .alarm-map-popup-text {
                line-height: 1.6;
            }

            #adasAlarmModal,
            #dsmAlarmModal {
                padding: 6px;
                align-items: flex-start;
            }

            #adasAlarmModal .alarm-panel,
            #dsmAlarmModal .alarm-panel {
                width: calc(100vw - 12px);
                max-width: calc(100vw - 12px);
                height: calc(100vh - 12px);
                max-height: calc(100vh - 12px);
                border-radius: 12px;
            }

            @supports (height: 1dvh) {
                #adasAlarmModal .alarm-panel,
                #dsmAlarmModal .alarm-panel {
                    height: calc(100dvh - 12px);
                    max-height: calc(100dvh - 12px);
                }
            }

            #adasAlarmModal .alarm-panel-header,
            #dsmAlarmModal .alarm-panel-header {
                height: auto;
                min-height: 44px;
                padding: 8px 10px;
            }

            #adasAlarmModal .alarm-panel-title,
            #dsmAlarmModal .alarm-panel-title {
                font-size: 16px;
                line-height: 1.2;
            }

            #adasAlarmModal .alarm-list,
            #dsmAlarmModal .alarm-list {
                padding: 8px;
            }

            #adasAlarmModal .alarm-item,
            #dsmAlarmModal .alarm-item {
                padding: 8px 10px;
                margin-bottom: 8px;
                border-radius: 10px;
            }

            #adasAlarmModal .alarm-item-head,
            #dsmAlarmModal .alarm-item-head {
                align-items: flex-start;
                gap: 6px;
            }

            #adasAlarmModal .alarm-item-title,
            #dsmAlarmModal .alarm-item-title {
                font-size: 17px;
                line-height: 1.25;
                word-break: break-word;
            }

            #adasAlarmModal .alarm-item-tag,
            #dsmAlarmModal .alarm-item-tag {
                font-size: 10px;
                padding: 2px 7px;
            }

            #adasAlarmModal .alarm-item-lines,
            #dsmAlarmModal .alarm-item-lines {
                margin-top: 6px;
                gap: 4px;
            }

            #adasAlarmModal .alarm-item-line,
            #dsmAlarmModal .alarm-item-line {
                font-size: 12px;
                line-height: 1.35;
                gap: 6px;
                word-break: break-word;
            }

            #adasAlarmModal .alarm-item-line .label,
            #dsmAlarmModal .alarm-item-line .label {
                width: 56px;
            }

            #adasAlarmModal .alarm-action-row,
            #dsmAlarmModal .alarm-action-row {
                gap: 6px;
            }

            #adasAlarmModal .alarm-map-btn,
            #adasAlarmModal .alarm-attachment-btn,
            #dsmAlarmModal .alarm-map-btn,
            #dsmAlarmModal .alarm-attachment-btn {
                min-height: 32px;
                padding: 6px 10px;
                font-size: 12px;
            }

            #videoLiveFloatModal {
                padding: 6px;
                align-items: flex-start;
            }

            #videoLiveFloatModal .video-live-alarm-panel {
                width: calc(100vw - 12px);
                max-width: calc(100vw - 12px);
                height: calc(100vh - 12px);
                max-height: calc(100vh - 12px);
                border-radius: 12px;
            }

            @supports (height: 1dvh) {
                #videoLiveFloatModal .video-live-alarm-panel {
                    height: calc(100dvh - 12px);
                    max-height: calc(100dvh - 12px);
                }
            }

            #videoLiveFloatModal .alarm-panel-header {
                height: auto;
                min-height: 44px;
                padding: 8px 10px;
            }

            #videoLiveFloatModal .alarm-panel-title {
                font-size: 16px;
                line-height: 1.2;
                word-break: break-word;
            }

            #videoLiveFloatModal .video-live-status:not(:empty) {
                padding: 8px 10px;
                font-size: 12px;
                line-height: 1.35;
            }

            #videoLiveFloatModal .video-live-scroll {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            #videoLiveFloatModal .video-live-tile-player {
                min-height: calc((100vw - 12px) * 9 / 16 + 48px);
            }

            #videoLiveFloatModal .video-replay-controls {
                padding: 6px 8px 8px;
                gap: 6px;
            }

            #videoLiveFloatModal .video-replay-btn,
            #videoLiveFloatModal .video-replay-speed {
                min-height: 32px;
                height: 32px;
                padding: 0 8px;
                font-size: 12px;
            }

            #videoLiveFloatModal .video-live-map-wrap {
                padding: 6px 8px 8px;
            }

            #videoLiveFloatModal #videoLiveMap {
                height: 150px;
            }

            /* 我的车队 - 列表模式（手机） */
            .fleet-header {
                padding: 8px 8px 10px;
            }

            .fleet-topline {
                gap: 6px;
            }

            .mode-btn {
                padding: 6px 10px;
                font-size: 12px;
                border-radius: 14px;
            }

            .search-input {
                height: 32px;
                padding: 0 10px;
                font-size: 13px;
            }

            .stat-value {
                font-size: 22px;
            }

            .stat-label {
                font-size: 11px;
            }

            .fleet-list {
                padding: 8px 8px 14px;
            }

            .vehicle-item {
                gap: 8px;
                min-height: 84px;
                border-radius: 12px;
                padding: 9px 10px;
                margin-bottom: 8px;
                align-items: center;
            }

            .vehicle-item.expanded {
                align-items: flex-start;
            }

            .vehicle-icon {
                width: 30px;
                height: 30px;
            }

            .vehicle-direction-icon {
                width: 24px;
                height: 24px;
            }

            .vehicle-code {
                font-size: 16px;
                line-height: 1.2;
            }

            .vehicle-speed {
                font-size: 12px;
                padding: 2px 6px;
            }

            .vehicle-state {
                font-size: 11px;
                padding: 2px 6px;
                margin-left: 4px;
            }

            .vehicle-pos {
                margin-top: 4px;
                font-size: 12px;
                line-height: 1.35;
            }

            .vehicle-arrow {
                width: 22px;
                font-size: 20px;
                margin-top: 0;
                align-self: center;
            }

            .vehicle-item.expanded .vehicle-arrow {
                align-self: flex-start;
                margin-top: 4px;
            }

            .detail-row {
                font-size: 12px;
                margin-bottom: 6px;
            }

            .detail-grid {
                gap: 6px;
                margin: 6px 0 8px;
            }

            .detail-card {
                border-radius: 8px;
                padding: 8px 4px;
            }

            .detail-card .num {
                font-size: 19px;
            }

            .detail-card .txt {
                font-size: 11px;
            }

            .quick-menu {
                margin-top: 8px;
                gap: 6px;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 2px;
            }

            .quick-btn {
                min-height: 30px;
                padding: 0 10px;
                font-size: 12px;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .org-item {
                min-height: 68px;
                border-radius: 12px;
                padding: 9px 10px;
                margin-bottom: 8px;
            }

            .org-name {
                font-size: 14px;
            }

            .org-meta {
                font-size: 11px;
            }

            .org-btn {
                font-size: 11px;
                padding: 5px 8px;
            }

            .org-vehicle-item {
                min-height: 52px;
                border-radius: 12px;
                padding: 8px 10px;
                margin-bottom: 8px;
            }

            .org-vehicle-title {
                font-size: 14px;
            }

            .org-vehicle-sub {
                font-size: 11px;
            }
        }

        .video-download-panel {
            width: min(92vw, 420px);
        }

        #videoHistoryDownloadModal {
            z-index: 1270;
        }

        .video-download-progress-wrap {
            margin-top: 10px;
        }

        .video-download-progress-title {
            font-size: 12px;
            color: #475569;
            margin-bottom: 6px;
        }

        .video-download-progress-bar {
            height: 10px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
        }

        .video-download-progress-bar.is-complete {
            background: #22c55e;
        }

        .video-download-progress-value {
            height: 100%;
            width: 0%;
            transition: width 0.2s ease;
        }

        .video-download-progress-value.upload {
            background: linear-gradient(90deg, #2563eb, #1d4ed8);
        }

        .video-download-progress-value.download {
            background: #22c55e;
        }

        .video-download-progress-text {
            margin-top: 5px;
            font-size: 12px;
            color: #334155;
        }

        .video-download-file-line {
            margin-top: 8px;
            font-size: 12px;
            color: #334155;
            display: flex;
            gap: 4px;
            align-items: center;
            min-height: 18px;
            word-break: break-all;
        }

        .video-download-file-label {
            color: #64748b;
            flex: 0 0 auto;
        }

        .video-download-file-value {
            color: #0f172a;
            flex: 1 1 auto;
        }

        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.72);
            color: white;
            padding: 12px 20px;
            border-radius: 20px;
            font-size: 14px;
            display: none;
            z-index: 99;
        }

        .map-engine-badge {
            position: fixed;
            right: 10px;
            bottom: 10px;
            z-index: 1300;
            background: rgba(15, 23, 42, 0.78);
            color: #ffffff;
            font-size: 12px;
            line-height: 1;
            padding: 7px 10px;
            border-radius: 999px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
            pointer-events: none;
            user-select: none;
        }

        .traffic-icon-btn {
            position: absolute;
            right: 12px;
            top: 12px;
            z-index: 900;
            width: 34px;
            height: 34px;
            border: 1px solid rgba(15, 23, 42, 0.2);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.94);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 12px rgba(15, 23, 42, 0.18);
        }

        .traffic-icon-btn.active {
            background: #0ea5e9;
            border-color: #0284c7;
            box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45);
        }

        .realtime-refresh-btn {
            top: 52px;
            font-size: 18px;
            font-weight: 700;
        }

        .realtime-refresh-btn.loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .realtime-map-wrap .realtime-tool-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid rgba(15, 23, 42, 0.2);
            background: transparent;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            gap: 0;
            justify-content: center;
            align-items: center;
            padding: 0;
        }

        .realtime-map-wrap .realtime-tool-btn .tool-label {
            display: none;
        }

        .realtime-map-wrap .realtime-tool-btn .tool-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .realtime-map-wrap .realtime-tool-btn .traffic-light-icon {
            width: 28px;
            height: 14px;
            border-radius: 2px;
            background: #111827;
            gap: 3px;
        }

        .realtime-map-wrap .realtime-tool-btn .traffic-light-icon .light {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #9ca3af;
        }

        .realtime-map-wrap .realtime-tool-btn .traffic-light-icon .light.red {
            background: #ef4444;
        }

        .realtime-map-wrap .realtime-tool-btn .traffic-light-icon .light.yellow {
            background: #eab308;
        }

        .realtime-map-wrap .realtime-tool-btn .traffic-light-icon .light.green {
            background: #22c55e;
        }

        .realtime-map-wrap .realtime-refresh-btn {
            top: 56px;
        }

        .realtime-map-wrap .realtime-tool-btn .refresh-target-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 3px solid #4b5563;
            position: relative;
        }

        .realtime-map-wrap .realtime-tool-btn .refresh-target-icon::before,
        .realtime-map-wrap .realtime-tool-btn .refresh-target-icon::after {
            content: '';
            position: absolute;
            background: #4b5563;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .realtime-map-wrap .realtime-tool-btn .refresh-target-icon::before {
            width: 12px;
            height: 2px;
        }

        .realtime-map-wrap .realtime-tool-btn .refresh-target-icon::after {
            width: 2px;
            height: 12px;
        }

        .realtime-map-wrap .realtime-tool-btn.active .tool-label {
            color: #0284c7;
        }

        .realtime-map-wrap .realtime-tool-btn.active .refresh-target-icon {
            border-color: #0ea5e9;
        }

        .realtime-map-wrap .realtime-tool-btn.active .refresh-target-icon::before,
        .realtime-map-wrap .realtime-tool-btn.active .refresh-target-icon::after {
            background: #0ea5e9;
        }

/* 报表中心 — 里程月报表 */
.report-month-input {
    min-width: 10rem;
}

.report-query-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    cursor: pointer;
}

.report-query-btn:active {
    opacity: 0.92;
}

.report-refresh-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    cursor: pointer;
}

.report-refresh-btn:active {
    background: #f8fafc;
}

.report-mileage-state {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 10px;
}

.report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.report-mileage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.report-mileage-table thead {
    background: #f3f4f6;
}

.report-mileage-table th,
.report-mileage-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.report-mileage-table th:last-child,
.report-mileage-table td.report-mileage-num {
    text-align: right;
}

.report-mileage-table tbody tr:last-child td {
    border-bottom: none;
}

.report-mileage-table .report-mileage-num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: #111827;
}

.report-mileage-table tbody tr.report-mileage-row-clickable {
    cursor: pointer;
}

.report-mileage-table tbody tr.report-mileage-row-clickable:active {
    background: #f1f5f9;
}

.report-mileage-table tbody tr.report-mileage-row-clickable.is-expanded {
    background: #eff6ff;
}

.report-daily-inline-row td {
    background: #f8fafc;
    padding: 10px 12px 12px;
}

.report-daily-inline-error {
    font-size: 12px;
    color: #b91c1c;
}

.report-daily-inline-loading {
    font-size: 12px;
    color: #6b7280;
}

.report-daily-mileage-body {
    margin-top: 8px;
}

.report-daily-mileage-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.report-calendar-day {
    min-height: 58px;
    border: 1px solid #c7d0db;
    border-radius: 8px;
    background: #c7d8ee;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.report-calendar-day-empty {
    visibility: hidden;
}

.report-calendar-day-clickable {
    cursor: pointer;
}

.report-calendar-day-clickable:active {
    filter: brightness(0.96);
}

.report-calendar-day-num {
    font-size: 12px;
    color: #374151;
    font-weight: 600;
}

.report-calendar-day-mileage {
    font-size: 12px;
    color: #0f2344;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@media (max-width: 768px) {
    .report-daily-mileage-calendar {
        gap: 6px;
    }

    .report-calendar-day {
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 6px 5px;
    }
}