:root {
            --container-bg: rgba(255, 255, 255, 0.7);
            --border-radius: 20px;
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
        }


        body {
            font-family: 'MapleMono', monospace; /* monospace 为回退字体 */
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* background:
                
                url('../background.webp') center/cover fixed; */
            color: var(--primary-color);
        }

        .container {
            background: var(--container-bg);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            margin: 1.5rem;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 90%;
            text-align: center;
        }

        header {
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            font-size: 2.5em;
            margin: 0 0 1rem;
            color: var(--primary-color);
        }


        #loading-container {
            min-height: 200px;
            position: relative;
        }

        .loading-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            transition: opacity 0.3s ease;
            font-size: 1.2em;
            color: #4a5568;
        }

        .loading-text::after {
            content: '...';
            animation: dots 1.5s infinite;
        }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }

        .content-wrapper {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .content-wrapper.show {
            opacity: 1;
            transform: translateY(0);
        }

        .text-content {
            font-size: 2.2em;
            font-weight: 700;
            margin: 1.5rem 0;
            line-height: 1.3;
            transition: color 0.3s ease;
        }

        .text-secondary {
            font-size: 1.4em;
            color: #444;
            margin: 1.2rem 0 2rem;
            white-space: pre-line;
        }

        /* ========== 新增 level 显示 ========== */
        .level-display {
            font-size: 1.2em;
            margin: 1rem 0 2rem;
            color: #666;
        }

        /* ========== 时区警告样式 ========== */
        .timezone-warning {
            text-align: center;
            margin-top: 1rem;
            padding: 0.5rem;
            background-color: rgba(255, 193, 7, 0.2);
            border-radius: 10px;
            color: #856404;
            font-size: 0.9em;
        }
        
        /* ========== 新增时间戳底部样式 ========== */
        .time-stamp-footer {
            margin-top: 2rem;
            border-top: 1px solid rgba(0,0,0,0.1);
            padding-top: 1.5rem;
            width: 100%;
        }

        .sync-time,
        .update-time {
            font-size: 0.9em;
            padding: 0.4rem 0;
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 8px;
        }

        .time-label {
            color: #718096;
            min-width: 110px;
            text-align: right;
        }

        #request-time,
        #status-time {
            color: var(--primary-color);
            font-family: 'MapleMono', monospace;
        }

        /* ========== 通知和按钮样式 ========== */
        .notices-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            max-width: 400px;
            width: 90%;
            display: flex;
            flex-direction: column-reverse;
            gap: 8px;
            z-index: 100;
        }

        .notice-item {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            animation: slideIn 0.3s ease;
            border-left: 4px solid transparent;
        }

        .notice-item.error {
            border-left-color: #e53e3e;
        }

        .notice-item.success {
            border-left-color: #48bb78;
        }

        .sync-error {
            color: #e53e3e;
            font-size: 0.9em;
            margin-top: 4px;
        }

        .refresh-button {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

         /* ========== 数据说明按钮样式 ========== */
        .data-description-button {
            position: fixed;
            top: 60px; /* 调整为在刷新按钮下方 */
            right: 20px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
             z-index: 100;
        }

        .refresh-button:hover,
        .data-description-button:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
       
         .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .modal-content {
             background-color: #fefefe;
             margin: 10% auto; /* 上下边距减少，使模态框更靠近中心 */
            padding: 20px;
             border: 1px solid #888;
             width: 90%; /* 增加宽度 */
            max-width: 800px; /* 最大宽度 */
            border-radius: 10px;
            position: relative;
        }

         .modal-content pre {
             white-space: pre-wrap; /* 允许 pre 元素内容换行 */
             word-wrap: break-word; /* 防止长单词溢出 */
             max-height: 500px;
             overflow-y: auto;
         }
         
        .modal-content .data-desc {
             font-family: inherit; /* 使用全局字体 */
             margin-top: 1rem;
            font-size: 0.9em;
             color: #555;
            text-align: center; /* 数据说明居中 */
        }
        
        .close {
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .device-info-footer {
            margin-top: 2rem; /* Increased top margin */
            padding: 1.5rem; /* Uniform padding for the entire block */
            border: 1px solid rgba(0,0,0,0.1); /* A light border all around */
            border-radius: var(--border-radius); /* Consistent rounded corners */
            background-color: rgba(249, 249, 249, 0.7); /* A very light, slightly opaque background */
            width: 100%;
            box-sizing: border-box;
            font-size: 0.9em;
        }

        .device-info-footer div:not(#device-report-warning) { /* Target specific divs, not the warning container by its ID */
            padding: 0.4rem 0; /* Slightly increased padding for items */
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 10px; /* Slightly increased gap */
        }

        .info-label { /* Reusing .time-label style might be an option, or a new one */
            color: #718096;
            min-width: 120px; /* Adjusted min-width */
            text-align: right;
        }

        #device-battery-level,
        #device-report-time-val,
        #server-receive-time-val {
            color: var(--primary-color);
            font-family: 'MapleMono', monospace;
        }

        .device-report-warning {
            text-align: center;
            margin-top: 1rem; /* Increased margin from other device info */
            padding: 0.8rem 1rem; /* Slightly more padding */
            background-color: rgba(255, 224, 224, 0.8); /* Light red background for warning */
            border-radius: 8px;
            color: #c00; /* Stronger red for text */
            font-size: 0.95em; /* Slightly larger font */
            font-weight: bold; /* Bold text */
            border: 1px solid rgba(255, 150, 150, 0.9); /* Border with a warning color */
            /* display: none; /* Initially hidden, will be controlled by JS - this remains */
        }
        .device-report-warning p {
            margin: 0;
        }

        .computer-info-footer {
            margin-top: 2rem; /* Increased top margin */
            padding: 1.5rem; /* Uniform padding for the entire block */
            border: 1px solid rgba(0,0,0,0.1); /* A light border all around */
            border-radius: var(--border-radius); /* Consistent rounded corners */
            background-color: rgba(240, 248, 255, 0.7); /* A very light blue, slightly opaque background */
            width: 100%;
            box-sizing: border-box;
            font-size: 0.9em;
        }

        .computer-info-footer div:not(#computer-report-warning) { /* Target specific divs, not the warning container by its ID */
            padding: 0.4rem 0; /* Slightly increased padding for items */
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 10px; /* Slightly increased gap */
        }

        #computer-window-title,
        #computer-report-time-val,
        #computer-server-receive-time-val {
            color: var(--primary-color);
            font-family: 'MapleMono', monospace;
        }

        #computer-window-title {
            color: var(--primary-color);
            font-family: 'MapleMono', monospace;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all 0.3s ease;
        }

        #computer-window-title.truncated {
            cursor: pointer;
            border-bottom: 1px dotted #ccc;
        }

        #computer-window-title.expanded {
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
        }

        .expand-title-btn {
            margin-left: 8px;
            font-size: 0.8em;
            padding: 2px 6px;
            background: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            vertical-align: middle;
            transition: all 0.2s ease;
        }

        .expand-title-btn:hover {
            background: #e0e0e0;
        }

        .computer-report-warning {
            margin-top: 0.5rem;
            padding: 0.5rem;
            background-color: rgba(255, 193, 7, 0.2);
            border-radius: 10px;
            color: #856404;
            display: none;
        }

        .computer-report-warning p {
            margin: 0;
            font-size: 0.9em;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        @media (max-width: 600px) {
            .container {
                padding: 1.5rem;
                width: 85%;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .text-content {
                font-size: 1.8em;
            }
            
            .refresh-button {
                top: 10px;
                right: 10px;
                padding: 6px 12px;
            }

             .data-description-button {
                top: 46px;
                right: 10px;
                padding: 6px 12px;
            }

            /* 移动端时间戳适配 */
            .time-label {
                min-width: 90px;
                font-size: 0.85em;
            }
        }