body {
            background-color: #000000;
            color: #e0e0e0;
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        
        /* Particle Canvas */
        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        /* 头部样式 */
        .header-bar {
            width: 100%;
            background-color: #0a0a0a;
            
            text-align: center;
            position: relative;
            z-index: 99;
            box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.5);
        }
        
        .header-content {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            
            margin: 0 auto;
        }
        
        .header-logo {
            display: flex;
            align-items: center;
            gap: 0.8vw;
        }
        
        .header-logo img {
            width: 3vw;
        }
        
        .header-logo span {
            font-size: 2.5vw;
            font-weight: 600;
            color: #e0e0e0;
        }
        
        /* 第二页头部右侧的登出按钮 */
        .logout-container {
            position: absolute;
            right: 2vw;
            top: 50%;
            transform: translateY(-50%);
            /* 添加以下属性 */
            display: flex;
            align-items: center;
            gap: 2vw; /* 调整文字和按钮之间的间距 */
        }
        
        .logout-btn {
            background: rgba(220, 20, 60, 0.2);
            color: #ff6b8b;
            border: 0.1vw solid #dc143c;
            padding: 0.3vw 0.5vw;
            border-radius: 0.4vw;
            cursor: pointer;
            font-size: 0.95vw;
            transition: all 0.3s;
            /* 添加以下属性 */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3vw; /* 调整图标和文字之间的间距 */
        }
        
        .logout-btn:hover {
            background: rgba(220, 20, 60, 0.4);
        }
        
        /* 第一页内容布局 */
        .login-page-container {
            width: 100%;
            
            text-align: center;
            position: relative;
            z-index: 10;
        }
        
        .login-content {
            display: grid;
            grid-template-columns: 1fr auto;
            margin: 2vw auto;
            align-items: center;
            height: auto;
           
        }
        
        .video-container {
            position: relative;
            height: 32vw; /* 与登录栏高度统一 */
            width: auto;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-mask {
            height: 100%;
            width: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-container video {
            height: 100%; /* 视频高度与登录栏高度相等 */
            width: auto; /* 宽度自动调整保持比例 */
            object-fit: cover;
            clip-path: inset(10% 25% 0 25%); /* 上右下左 - 隐藏上10%，右15%，下0，左15% */
        }
        
        .login-container {
            width: 25vw;
            background: rgba(20, 20, 20, 0.85);
            padding: 2.5vw;
            margin-right: 10vw;
            text-align: center;
            backdrop-filter: blur(1vw);
            height: 32vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 0 2.5vw rgba(220, 20, 60, 0.3);
            border-radius: 1.2vw;
            border: 0.1vw solid rgba(220, 20, 60, 0.2);
        }
        
        .login-header {
            margin-bottom: 1.5vw;
        }
        
        .login-header h1 {
            font-size: 1.8vw;
            margin-bottom: 0.5vw;
            background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 1vw rgba(220, 20, 60, 0.3);
        }
        
        .login-header p {
            font-size: 0.9vw;
            color: #a0a0a0;
        }
        
        .login-form {
            display: flex;
            flex-direction: column;
            gap: 1vw;
        }
        
        .form-group {
            text-align: left;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5vw;
            font-weight: 500;
            font-size: 0.9vw;
            color: #c0c0c0;
        }
        
        .form-group input {
            width: 100%;
            padding: 0.8vw;
            border: 0.1vw solid #333;
            border-radius: 0.6vw;
            font-size: 0.9vw;
            background: rgba(30, 30, 30, 0.7);
            color: #e0e0e0;
            transition: all 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #dc143c;
            box-shadow: 0 0 0.8vw rgba(220, 20, 60, 0.5);
        }
        
        .login-btn {
            background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
            color: white;
            border: none;
            padding: 0.8vw;
            border-radius: 0.6vw;
            cursor: pointer;
            font-weight: 500;
            font-size: 1vw;
            margin-top: 0.5vw;
            transition: all 0.3s;
            box-shadow: 0 0.4vw 1vw rgba(220, 20, 60, 0.3);
        }
        
        .login-btn:hover {
            transform: translateY(-0.2vw);
            box-shadow: 0 0.6vw 1.5vw rgba(220, 20, 60, 0.4);
        }
        
        .error-message {
            color: #ff3860;
            font-size: 0.8vw;
            height: 1.5vw; /* 固定高度，防止布局跳动 */
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            transition: visibility 0.3s;
        }
        
        .error-message.show {
            visibility: visible;
        }
        
        /* 加载状态 */
        .login-btn.loading {
            pointer-events: none;
            background: linear-gradient(135deg, #8b0000 0%, #8b0000 100%);
        }

        .spinner {
            display: inline-block;
            width: 1.2vw;
            height: 1.2vw;
            border: 0.2vw solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Partners Section */
        .partners-section {
            width: 80vw;
            margin-top: 2vw;
            padding: 1.5vw;
            background: rgba(20, 20, 20, 0.85);
            border-radius: 1.2vw;
            box-shadow: 0 0 2.5vw rgba(220, 20, 60, 0.3);
            backdrop-filter: blur(1vw);
            border: 0.1vw solid rgba(220, 20, 60, 0.2);
            position: relative;
            z-index: 10;
            margin-left: auto;
            margin-right: auto;
        }
        
        .partners-header {
            display: flex;
            align-items: center;
            margin-bottom: 1vw;
        }
        
        .partners-title {
            font-size: 1.2vw;
            color: #dcb428;
            font-weight: 600;
            margin-right: 2vw;
            white-space: nowrap;
        }
        
        .partners-scroll-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            border-radius: 0.6vw;
            background: rgba(30, 30, 30, 0.7);
            border: 0.1vw solid rgba(220, 20, 60, 0.2);
            padding: 0.5vw 0;
            height: 12.5vw;
        }
        
        .partner-row {
            display: flex;
            margin-bottom: 0.5vw;
            height: 3.5vw;
            overflow: hidden;
            position: relative;
        }
        
        .partners-track {
            display: flex;
            position: absolute;
            height: 100%;
            padding: 0 1vw;
            align-items: center;
        }
        
        .partner-row:nth-child(1) .partners-track {
            animation: scroll-horizontal-1 30s linear infinite;
        }
        
        .partner-row:nth-child(2) .partners-track {
            animation: scroll-horizontal-2 25s linear infinite;
        }
        
        .partner-row:nth-child(3) .partners-track {
            animation: scroll-horizontal-3 35s linear infinite;
        }
        
        .partner-item {
            display: flex;
            align-items: center;
            background: rgba(40, 40, 40, 0.7);
            padding: 0.6vw 1.2vw;
            border-radius: 0.6vw;
            margin-right: 1.5vw;
            text-decoration: none;
            transition: all 0.3s;
            border: 0.1vw solid transparent;
            white-space: nowrap;
            height: 2.2vw;
            justify-content: center;
        }
        
        .partner-item img{
            height: 1.2vw; 
        }

        .partner-item:hover {
            background: rgba(60, 60, 60, 0.7);
            color: #fff;
            border-color: #dcb428;
            transform: translateY(-0.2vw);
        }
        
        @keyframes scroll-horizontal-1 {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        
        @keyframes scroll-horizontal-2 {
            0% {
                transform: translateX(-10%);
            }
            100% {
                transform: translateX(-60%);
            }
        }
        
        @keyframes scroll-horizontal-3 {
            0% {
                transform: translateX(-5%);
            }
            100% {
                transform: translateX(-55%);
            }
        }
        
        /* Main page styles */
        .main-page-container {
            margin: 0 auto;
            display: none;
            position: relative;
            z-index: 10;
        }
        
        .main-content {
            margin-top: 2vw;
            width: 85vw;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Page info bar styles */
        .page-info {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8vw;
            background: rgba(30, 30, 30, 0.7);
            padding: 1vw;
            margin-bottom: 1.5vw;
            border-radius: 0.8vw;
            border: 0.1vw solid rgba(220, 20, 60, 0.1);
            font-weight: 500;
            color: #ff6b8b;
            font-size: 0.9vw;
        }

        .info-item {
            display: flex;
            align-items: center;
            background: rgba(40, 40, 40, 0.7);
            padding: 0.6vw 0.8vw;
            border-radius: 0.6vw;
            min-width: 15vw;
            border: 0.1vw solid rgba(220, 20, 60, 0.1);
        }
        
        .info-item img {
            margin-right: 0.5vw;
            width: 1.2vw;
            height: 1.2vw;
        }
        
        /* Visitor info bar styles */
        .visitor-info {
            background: rgba(30, 30, 30, 0.7);
            padding: 1vw;
            border-radius: 0.8vw;
            box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.2);
            margin-bottom: 1.5vw;
            display: flex;
            flex-wrap: wrap;
            gap: 1vw;
            align-items: center;
            justify-content: space-between;
            border: 0.1vw solid rgba(220, 20, 60, 0.1);
        }

        .tips-info {
            padding: 0vw;
            border-radius: 0.8vw;
            font-size: 0.8vw;
            display: flex;
            flex-wrap: wrap;
            gap: 1vw;
            align-items: center;
            justify-content: space-between;
        }

        .permission-badge {
            padding: 0.4vw 0.8vw;
            background: rgba(40, 40, 40, 0.7);
            border-radius: 2vw;
            font-weight: 500;
            font-size: 0.9vw;
            border: 0.1vw solid rgba(220, 20, 60, 0.3);
        }
        
        .permission-badge.admin {
            border: 0.1vw solid rgba(220, 180, 40, 0.3);
            color: #dcb428;
        }
        
        .devices-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(18vw, 1fr));
            gap: 1.5vw;
            margin-top: 1.5vw;
        }
        
        .device-card {
            background: rgba(30, 30, 30, 0.7);
            border-radius: 0.8vw;
            overflow: hidden;
            transition: all 0.3s;
            position: relative;
            border: 0.1vw solid rgba(220, 20, 60, 0.1);
            box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.2);
        }
        
        .device-card:hover {
            transform: translateY(-0.5vw);
            box-shadow: 0 0.8vw 2vw rgba(220, 20, 60, 0.2);
            border-color: rgba(220, 20, 60, 0.3);
        }
        
        .card-header {
            background: linear-gradient(135deg, rgba(220, 20, 60, 0.8) 0%, rgba(139, 0, 0, 0.8) 100%);
            color: white;
            padding: 0.8vw;
            text-align: center;
            font-weight: 500;
            font-size: 0.9vw;
        }
        
        .card-body {
            padding: 1vw;
        }
        
        .device-image {
            text-align: center;
            margin: 2vw 0;
            background-color: #ffffff;
        }
        
        .device-image img {
            width: 5vw;
            height: 5vw;
        }
        
        .device-info {
            margin-bottom: 0.8vw;
        }
        
        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5vw;
            padding-bottom: 0.5vw;
            border-bottom: 0.1vw solid rgba(255, 255, 255, 0.1);
        }
        
        .info-label {
            color: #a0a0a0;
            font-weight: 500;
            font-size: 0.8vw;
        }
        
        .info-value {
            font-weight: 500;
            font-size: 0.8vw;
        }
        
        .card-footer {
            padding: 0.8vw 1vw;
            text-align: center;
            border-top: 0.1vw solid rgba(255, 255, 255, 0.1);
        }
        
        .delete-btn {
            background: rgba(220, 20, 60, 0.2);
            color: #ff6b8b;
            border: 0.1vw solid rgba(220, 20, 60, 0.5);
            padding: 0.4vw 1vw;
            border-radius: 0.4vw;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5vw;
            margin: 0 auto;
            font-size: 0.8vw;
        }
        
        .delete-btn:hover {
            background: rgba(220, 20, 60, 0.4);
        }
        
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: rgba(30, 30, 30, 0.95);
            padding: 1.5vw;
            border-radius: 0.8vw;
            width: 90%;
            max-width: 40vw;
            border: 0.1vw solid rgba(220, 20, 60, 0.3);
            box-shadow: 0 0 2.5vw rgba(220, 20, 60, 0.3);
        }
        
        .modal-header {
            margin-bottom: 1vw;
            text-align: center;
        }
        
        .modal-header h2 {
            font-size: 1.2vw;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5vw;
            color: #ff6b8b;
        }
        
        .modal-header img {
            width: 1.5vw;
            height: 1.5vw;
        }
        
        .modal-body {
            margin-bottom: 1.5vw;
            text-align: center;
            font-size: 0.9vw;
            color: #c0c0c0;
        }
        
        .modal-footer {
            display: flex;
            justify-content: center;
            gap: 0.8vw;
        }
        
        .modal-btn {
            padding: 0.5vw 1vw;
            border: none;
            border-radius: 0.4vw;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            font-size: 0.8vw;
        }
        
        .modal-btn.confirm {
            background: rgba(220, 20, 60, 0.8);
            color: white;
        }
        
        .modal-btn.confirm:hover {
            background: rgba(220, 20, 60, 1);
        }
        
        .modal-btn.cancel {
            background: rgba(128, 128, 128, 0.5);
            color: white;
        }
        
        .modal-btn.cancel:hover {
            background: rgba(128, 128, 128, 0.7);
        }
        
        .permission-alert {
            display: none;
            position: fixed;
            top: 1vw;
            right: 1vw;
            background: rgba(220, 20, 60, 0.9);
            color: white;
            padding: 1vw;
            border-radius: 0.8vw;
            z-index: 1001;
            max-width: 30vw;
            text-align: center;
            animation: slideIn 0.3s ease-out;
            border: 0.1vw solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 0.4vw 1.5vw rgba(220, 20, 60, 0.4);
        }

        /* Add entry animation */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .permission-alert img {
            width: 1.5vw;
            height: 1.5vw;
            margin-bottom: 0.5vw;
            display: block;
            margin: 0 auto 0.5rem;
        }
        
        .permission-alert h3 {
            font-size: 1vw;
            margin-bottom: 0.5vw;
        }
        
        .permission-alert p {
            font-size: 0.8vw;
        }
        
        footer {
            text-align: center;
            margin-top: 2vw;
            padding: 1vw;
            color: #7f7f7f;
            font-size: 0.75vw;
        }

        
        /* Pagination styles */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2vw;
            gap: 0.8vw;
        }
        
        .current-page {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8vw;
            background: rgba(30, 30, 30, 0.7);
            padding: 0.2vw;
            border-radius: 0.8vw;
            border: 0.1vw solid rgba(220, 20, 60, 0.1);
            color: #ff6b8b;
            font-size: 1.1vw;
        }

        .pagination-btn {
            background: rgba(220, 20, 60, 0.2);
            color: #e0e0e0;
            border: 0.1vw solid rgba(220, 20, 60, 0.5);
            padding: 0vw 1vw 0.4vw;
            border-radius: 0.4vw;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            font-size: 1.5vw;
            display: flex;
            align-items: center;
            justify-content: center;

        }
        
        .pagination-btn:hover:not(:disabled) {
            background: rgba(220, 20, 60, 0.4);
        }
        
        .pagination-btn:disabled {
            background: rgba(80, 80, 80, 0.5);
            border-color: rgba(80, 80, 80, 0.5);
            cursor: not-allowed;
        }
        
        /* Device count info */
        .device-count-info {
            text-align: center;
            margin-top: 1vw;
            color: #a0a0a0;
            font-size: 0.75vw;
        }
    
        .page-header {
            position: relative;
            overflow: hidden;
            padding: 1.5vw 0 2vw;
            margin-bottom: 1.8vw;
            border-radius: 0.8vw;
            background: radial-gradient(circle at 50% 30%, rgba(255,70,110,0.25), rgba(0,0,0,0));
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .page-header h1 {
            margin-bottom: 0.5vw;
            font-size: 2vw;
            background: linear-gradient(135deg, #dc143c 0%, #8b0000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 1vw rgba(220, 20, 60, 0.3);
            position: relative;
            z-index: 5;       /* ✅ 提升到最上层 */
            text-align: center;
            width: 100%;      /* ✅ 强制水平居中 */
            margin-left: auto;
            margin-right: auto;
        }
        
        .page-header p {
            font-size: 1vw;
            max-width: 600px;
            margin: 0 auto;
            color: #a0a0a0;
            position: relative;
            z-index: 5;       /* ✅ 提升到最上层 */
            text-align: center;
            width: 100%;      /* ✅ 强制水平居中 */
            margin-left: auto;
            margin-right: auto;
        }

        .grid-container {
            padding-right: 1vw;
            padding-left: 1vw;
            width: 75vw;
            margin: 0 auto;
        }

        .fullwidthwhite {
            background-color: #ffffff;
            width: 100%;
            color: #000000;
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        .grid-x {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-flow: row wrap;
        }

        .text {
        -webkit-text-size-adjust: 100%;
        font-weight: 400;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        text-align: left;
        box-sizing: inherit;
        margin: 0;
        padding: 0;
        }

        b, strong {
            font-weight: 700;
            line-height: inherit;
        }
        .h3, h3 {
            font-size: clamp(1.375rem, 1.243rem + .563vw, 1.75rem);
        }
        .h4, h4 {
            font-size: clamp(1.25rem, 1.206rem + .188vw, 1.375rem);
            margin: 2vw 0;
        }
        ul {
            margin-left: 1.25rem;
            list-style-type: disc;
}