body { margin: 0; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background-color: #f0f2f5; overflow-x: hidden; scroll-behavior: smooth; }
.login-wrapper { position: relative; height: 100vh; width: 100vw; background: #091220; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.bg-grid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(0, 164, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 164, 255, 0.05) 1px, transparent 1px); background-size: 50px 50px; z-index: 1; }
.bg-huge-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7vw; font-weight: 900; color: rgba(255, 255, 255, 0.5); text-shadow: 0 0 40px rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 255, 255, 0.2); white-space: nowrap; letter-spacing: 20px; z-index: 2; pointer-events: none; user-select: none; }
.tech-cloud { position: absolute; background: rgba(0, 164, 255, 0.04); border-radius: 150px; box-shadow: 0 0 80px rgba(0, 164, 255, 0.1); z-index: 2; animation: floatCloud 20s ease-in-out infinite; }
.tech-cloud::before, .tech-cloud::after { content: ''; position: absolute; background: rgba(0, 164, 255, 0.04); border-radius: 50%; }
.tech-cloud::before { width: 40%; height: 120%; top: -50%; left: 15%; }
.tech-cloud::after { width: 50%; height: 140%; top: -70%; right: 15%; }
.cloud-1 { width: 600px; height: 200px; top: 15%; left: -10%; transform: scale(1.2); }
.cloud-2 { width: 450px; height: 150px; bottom: 10%; right: -5%; transform: scale(1.5); animation-delay: -10s; }
@keyframes floatCloud { 0% { transform: translateY(0px) scale(1.2); } 50% { transform: translateY(-30px) scale(1.25); } 100% { transform: translateY(0px) scale(1.2); } }
.login-card { position: relative; z-index: 10; width: 400px; padding: 45px 40px; background: #ffffff; border-radius: 12px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 164, 255, 0.1); text-align: center; }
.login-logo { font-size: 50px; margin-bottom: 5px; }
.login-title { font-size: 28px; font-weight: 900; color: #0b172a; margin-bottom: 8px; letter-spacing: 1px; }
.login-subtitle { font-size: 15px; color: #64748b; margin-bottom: 35px; font-weight: 500; }
.clear-input .el-input__wrapper { background-color: #f8fafc !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; padding: 12px 15px !important; border-radius: 6px; }
.clear-input .el-input__wrapper.is-focus { border-color: #0052D9 !important; background-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(0,82,217,0.1) !important;}
.clear-input .el-input__inner { color: #0f172a !important; font-size: 16px !important; font-weight: bold !important; }
.btn-login { background-color: #0052D9 !important; border-color: #0052D9 !important; font-size: 18px !important; font-weight: bold !important; height: 50px !important; border-radius: 6px !important; letter-spacing: 2px; margin-top: 10px; transition: all 0.3s; }
.btn-login:hover { background-color: #003CB3 !important; box-shadow: 0 8px 20px rgba(0, 82, 217, 0.4); transform: translateY(-1px); }
.header { background: #0b172a; color: #fff; padding: 0 30px; height: 60px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 50; position: relative;}
.header-logo { font-size: 20px; font-weight: bold; display: flex; align-items: center;}
.header-logo span { color: #00A4FF; margin: 0 8px; }
.secret-banner { background: #fffbeb; border-bottom: 1px solid #fde68a; padding: 12px 30px; display: flex; align-items: center; justify-content: space-between; color: #b45309; font-size: 14px;}
.secret-value { font-family: monospace; font-size: 16px; font-weight: bold; background: #fef3c7; padding: 4px 10px; border-radius: 4px; margin: 0 10px; border: 1px dashed #f59e0b; letter-spacing: 1px;}
.main-container { padding: 30px; max-width: 1400px; margin: 0 auto; }
.dashboard-card { background: white; padding: 20px 30px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.centered-tabs .el-tabs__nav-scroll { display: flex; justify-content: center; }
.centered-tabs .el-tabs__nav { width: 100%; display: flex; justify-content: space-between; }
.centered-tabs .el-tabs__item { flex: 1; text-align: center; font-size: 16px; font-weight: bold; height: 50px; line-height: 50px;}
.toolbar { margin-top: 15px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center;}
.device-card { margin-bottom: 20px; border-radius: 10px; border: 1px solid #e2e8f0; transition: all 0.3s; }
.device-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: #cbd5e1; transform: translateY(-2px); }
.device-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 15px;}
.topic-name { font-size: 18px; font-weight: 800; color: #0f172a; display: flex; align-items: center; }
.topic-name .el-icon { margin-right: 8px; color: #0052D9; }
.topic-id { font-size: 13px; color: #64748b; background: #f1f5f9; padding: 4px 10px; border-radius: 12px;}
.status-badge { display: inline-flex; align-items: center; font-size: 13px; margin-right: 20px; color: #475569;}
.dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.online { background-color: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);}
.dot.offline { background-color: #ef4444; }
.msg-box { background: #f8fafc; border-radius: 6px; padding: 12px; margin: 15px 0; border: 1px dashed #cbd5e1; }
.msg-content { font-family: monospace; font-size: 15px; color: #0f172a; margin: 5px 0; word-break: break-all; font-weight: 600;}
.msg-meta { font-size: 12px; color: #94a3b8; display: flex; justify-content: space-between;}
.action-area { display: flex; gap: 10px; margin-top: 15px;}
.cmd-input { flex-grow: 1; }
.tutorial-layout { display: flex; gap: 40px; }
.doc-sidebar { width: 240px; flex-shrink: 0; position: sticky; top: 20px; align-self: start; border-right: 2px solid #f1f5f9; padding-right: 15px; max-height: 80vh; overflow-y: auto;}
.doc-nav-item { display: block; padding: 10px 15px; color: #64748b; text-decoration: none; font-size: 14px; border-radius: 6px; margin-bottom: 5px; transition: all 0.2s; font-weight: bold;}
.doc-nav-item:hover { background: #f1f5f9; color: #0052D9; }
.doc-nav-sub-item { display: block; padding: 8px 15px 8px 30px; color: #94a3b8; text-decoration: none; font-size: 13px; border-radius: 6px; margin-bottom: 2px; transition: all 0.2s;}
.doc-nav-sub-item:hover { background: #f1f5f9; color: #0ea5e9; }
.doc-content { flex-grow: 1; line-height: 1.8; color: #334155; font-size: 15px; }
.doc-content h2 { color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-top: 0; padding-top: 20px; }
.doc-content h3 { color: #0052D9; margin-top: 35px; scroll-margin-top: 20px;}
.doc-content h4 { color: #0f172a; margin-top: 25px; scroll-margin-top: 20px; border-left: 4px solid #0ea5e9; padding-left: 10px;}
.doc-content code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: #ef4444; font-family: monospace; }
.doc-content .xiaoai-block { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 15px; border-radius: 8px; margin: 15px 0;}
.code-block { background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 8px; overflow-x: auto; font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; line-height: 1.6; margin: 15px 0; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.c-comment { color: #10b981; font-style: italic; }
.c-keyword { color: #c678dd; }
.c-type { color: #e5c07b; }
.c-string { color: #98c379; }
.c-func { color: #61afef; }
.c-macro { color: #d19a66; }

/* OTA 页面专属扩展 */
.device-info-banner { background: linear-gradient(135deg, #0f172a, #1e293b); color: white; padding: 25px 30px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center;}
.device-info-banner h2 { margin: 0; font-size: 24px; display: flex; align-items: center;}
.device-info-banner h2 .el-icon { margin-right: 12px; color: #38bdf8;}
.upload-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); height: 100%;}
.upload-card h3 { margin-top: 0; color: #0f172a; display: flex; align-items: center;}
.upload-card h3 .el-icon { margin-right: 8px; color: #f59e0b;}
.el-upload-dragger { background-color: #f8fafc !important; border: 2px dashed #cbd5e1 !important; border-radius: 10px !important; transition: all 0.3s; padding: 40px 0;}
.el-upload-dragger:hover { border-color: #f59e0b !important; background-color: #fffbeb !important; }
.el-upload__text em { color: #f59e0b !important; font-weight: bold;}

/* ====== 全局版权声明样式 (新增) ====== */
.copyright-footer {
    text-align: center;
    padding: 25px 0 20px 0;
    color: #64748b;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    width: 100%;
}
.login-wrapper .copyright-footer {
    position: absolute;
    bottom: 20px;
    color: rgba(255, 255, 255, 0.4);
    z-index: 20;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}