:root {
            /* --- 色彩系统 --- */
            --bg-color: #050505;
            --bg-gradient-end: #0c0c0c;
            --card-bg-color: #141414;
            --border-color: #2a2a2a;
            --text-primary: #f5f5f5;
            --text-secondary: #b3b3b3;
            --text-tertiary: #737373;
            --accent-color: #7dd3fc;
            --power-consuming-color: #fb7185;
            --power-recovering-color: #4ade80;
            --update-glow-color: rgba(125, 211, 252, 0.58);
            --update-sheen-color: rgba(255, 255, 255, 0.26);
            --theme-color: #050505;

            /* --- 字体 --- */
            --font-family: 'Inter', sans-serif;
            --network-status-badge-size: 12px;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            /* 对支持动态视口的现代 iOS 版本的补充支持 */
            height: 100dvh;
            /* iOS PWA 适配：提供与渐变色底部一致的纯色垫底，防止安全区域露白 */
            background-color: var(--bg-gradient-end);
            background-image: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-gradient-end) 100%);
            background-attachment: fixed;
            color: var(--text-primary);
            font-family: var(--font-family);
            overflow: hidden;
            /* 防止 iOS 沙发效应（上拉露出浏览器底色） */
            overscroll-behavior-y: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        body.theme-day {
            --bg-color: #f6f7f8;
            --bg-gradient-end: #e9edf2;
            --card-bg-color: #ffffff;
            --border-color: #d7dce2;
            --text-primary: #111827;
            --text-secondary: #4b5563;
            --text-tertiary: #6b7280;
            --accent-color: #0284c7;
            --power-consuming-color: #dc2626;
            --power-recovering-color: #16a34a;
            --update-glow-color: rgba(2, 132, 199, 0.32);
            --update-sheen-color: rgba(255, 255, 255, 0.7);
            --theme-color: #f6f7f8;
        }

        body.theme-twilight {
            --bg-color: #111111;
            --bg-gradient-end: #1a1a18;
            --card-bg-color: #1f1f1d;
            --border-color: #3a3934;
            --text-primary: #f8fafc;
            --text-secondary: #cbd5e1;
            --text-tertiary: #94a3b8;
            --accent-color: #f59e0b;
            --power-consuming-color: #fb7185;
            --power-recovering-color: #86efac;
            --update-glow-color: rgba(245, 158, 11, 0.45);
            --update-sheen-color: rgba(255, 255, 255, 0.22);
            --theme-color: #111111;
        }

        body.theme-night {
            --bg-color: #050505;
            --bg-gradient-end: #0c0c0c;
            --card-bg-color: #141414;
            --border-color: #2a2a2a;
            --text-primary: #f5f5f5;
            --text-secondary: #b3b3b3;
            --text-tertiary: #737373;
            --accent-color: #7dd3fc;
            --power-consuming-color: #fb7185;
            --power-recovering-color: #4ade80;
            --update-glow-color: rgba(125, 211, 252, 0.58);
            --update-sheen-color: rgba(255, 255, 255, 0.26);
            --theme-color: #050505;
        }

        .dashboard-grid {
            display: grid;
            width: 100%;
            height: 100%;
            /* JS will override this */
            box-sizing: border-box;
            /* 采用 max() 函数强制中心对称：无论刘海和底栏在何处，取对向最大安全距离以保证绝对居中 */
            padding-top: max(8px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
            padding-right: max(8px, env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px));
            padding-bottom: max(8px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
            padding-left: max(8px, env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px));
            gap: 8px;
            /* 响应式布局：竖屏3x3，横屏3x3 */
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, calc((100% - 16px) / 3));
            height: 100%;
        }

        .data-cell {
            background-color: var(--card-bg-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            transition: background-color 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .data-cell>* {
            position: relative;
            z-index: 1;
        }

        .data-cell::before,
        .data-cell::after {
            content: "";
            position: absolute;
            pointer-events: none;
            opacity: 0;
        }

        .data-cell::before {
            inset: 0;
            border-radius: inherit;
            border: 1px solid var(--update-glow-color);
            transform: scale(0.985);
        }

        .data-cell::after {
            top: -45%;
            bottom: -45%;
            left: -38%;
            width: 34%;
            background: linear-gradient(90deg, transparent, var(--update-sheen-color), transparent);
            transform: translateX(-120%) rotate(16deg);
        }

        .data-cell:active {
            background-color: #374151;
            /* 触摸时短暂变亮 */
        }

        .data-value {
            font-size: 2.8rem;
            font-weight: 600;
            /* Semi-bold */
            transition: color 0.28s ease;
            transform: translateZ(0);
        }

        .data-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-top: 5px;
            letter-spacing: 0.5px;
        }

        .data-unit {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-left: 4px;
        }

        /* 特殊单元格样式 */
        .tire-pressure-cell {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .tire-group {
            /* display: flex; flex-direction: column; align-items: center; */
            /* Removed to simplify layout and fix iOS rendering bug */
        }

        /* --- 新增：四合一胎压单元格样式 --- */
        .tpms-all-in-one {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 10px;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-items: center;
        }

        .tpms-all-in-one .data-value {
            font-size: 2.2rem;
            /* 增大字体以填充空间 */
            line-height: 2.2rem;
        }

        .tpms-value {
            display: grid;
            grid-template-columns: 1.25ch 0.38ch 1ch;
            align-items: baseline;
            justify-content: center;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            text-align: center;
        }

        .tpms-whole {
            text-align: right;
        }

        .tpms-dot {
            text-align: center;
        }

        .tpms-fraction {
            text-align: left;
        }

        #network-status {
            position: absolute;
            top: max(10px, env(safe-area-inset-top, 0px));
            right: max(10px, env(safe-area-inset-right, 0px));
            width: var(--network-status-badge-size);
            height: var(--network-status-badge-size);
            border-radius: 50%;
            background-color: red;
            /* 默认为断开状态 */
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
            animation: status-breathe 1.8s ease-in-out infinite;
            transition: background-color 0.5s, box-shadow 0.5s;
            will-change: transform, opacity;
        }

        #network-status::after {
            content: "";
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 1px solid currentColor;
            opacity: 0.28;
            animation: status-ring 1.8s ease-in-out infinite;
        }

        #network-status[data-status="offline"] {
            animation-duration: 0.9s;
        }

        #network-status[data-status="offline"]::after {
            animation-duration: 0.9s;
        }

        /* --- 新增：海拔变化样式 --- */
        #elevation-container {
            display: flex;
            align-items: baseline;
            /* 基线对齐，让 "m" 和增量对齐 */
        }

        #elevation-change {
            font-size: 1.5rem;
            /* 比主数值小 */
            font-weight: normal;
            margin-left: 8px;
            opacity: 0.9;
        }

        .data-cell.positive-change #elevation-container {
            color: #28a745;
            /* 绿色 */
        }

        .data-cell.negative-change #elevation-container {
            color: #dc3545;
            /* 红色 */
        }

        @keyframes status-breathe {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.72;
                transform: scale(0.86);
            }
        }

        @keyframes status-ring {

            0%,
            100% {
                opacity: 0.1;
                transform: scale(0.75);
            }

            50% {
                opacity: 0.42;
                transform: scale(1.28);
            }
        }

        @keyframes value-refresh {
            0% {
                opacity: 0.62;
                transform: translateY(5px) scale(0.985);
            }

            45% {
                opacity: 1;
                transform: translateY(-3px) scale(1.018);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes tpms-refresh {
            0% {
                color: #7dd3fc;
                opacity: 0.72;
            }

            42% {
                color: var(--accent-color);
                opacity: 1;
            }

            100% {
                color: var(--text-primary);
                opacity: 1;
            }
        }

        @keyframes cell-glow {
            0% {
                opacity: 0;
                transform: scale(0.982);
            }

            36% {
                opacity: 1;
                transform: scale(1);
            }

            100% {
                opacity: 0;
                transform: scale(1);
            }
        }

        @keyframes cell-sheen {
            0% {
                opacity: 0;
                transform: translateX(-130%) rotate(16deg);
            }

            18% {
                opacity: 0.75;
            }

            100% {
                opacity: 0;
                transform: translateX(510%) rotate(16deg);
            }
        }

        @keyframes power-consume-pulse {

            0%,
            100% {
                box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.08);
            }

            50% {
                box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.36), 0 0 14px rgba(251, 113, 133, 0.18);
            }
        }

        @keyframes power-recover-pulse {

            0%,
            100% {
                box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.08);
            }

            50% {
                box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.32), 0 0 14px rgba(74, 222, 128, 0.16);
            }
        }

        .value-update {
            animation: value-refresh 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
            will-change: transform, opacity;
        }

        .tpms-update {
            animation: tpms-refresh 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
        }

        .cell-update::before {
            animation: cell-glow 520ms ease-out;
        }

        .cell-update::after {
            animation: cell-sheen 560ms ease-out;
        }

        .power-flow-consuming {
            animation: power-consume-pulse 1.25s ease-in-out infinite;
        }

        .power-flow-recovering {
            animation: power-recover-pulse 1.25s ease-in-out infinite;
        }

        #power.power-consuming {
            color: var(--power-consuming-color);
        }

        #power.power-recovering {
            color: var(--power-recovering-color);
        }

        #power.power-idle {
            color: var(--text-primary);
        }

        body.motion-ready .data-cell {
            transition: background-color 0.2s ease-in-out, border-color 0.25s ease;
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important;
            }

            #network-status {
                transform: none;
            }
        }

        /* --- 新增：响应式布局 (竖屏) --- */
        @media (orientation: portrait) {
            .dashboard-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 调整行数和高度计算以适应新布局 */
                grid-template-rows: repeat(5, calc((100% - 32px) / 5));
            }

            #tpms-cell {
                grid-column: span 2;
                /* TPMS单元格横跨两列 */
            }
        }