/* ===========================================
   全局样式重置
   =========================================== */
/* 重置所有元素的默认内外边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===========================================
   页面主体样式
   =========================================== */
/* 页面整体样式：字体、背景色、最小高度、内边距、文字颜色 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: transparent;
    min-height: 100vh;
    padding: 32px 24px 48px;
    color: #333;
}

.page-footer {
    margin: 24px auto 0;
    text-align: center;
    color: #718096;
    font-size: 14px;
}

.page-nav {
    display: none;
}

/* ===========================================
   主容器样式
   =========================================== */
/* 主内容容器：最大宽度、居中、白色背景、圆角、阴影、边框 */
.container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e4e7eb;
    overflow: hidden;
}

/* ===========================================
   头部区域样式
   =========================================== */
/* 页面头部容器：白色背景、底部边框、内边距 */
.header {
    background: #ffffff;
    border-bottom: 1px solid #e4e7eb;
    padding: 24px 32px;
}

/* 头部标题样式：字体大小、粗细、颜色、底部间距 */
.header h1 {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 4px;
}

/* 头部副标题样式：字体大小、颜色 */
.header p {
    font-size: 13px;
    color: #718096;
}

/* ===========================================
   内容区域样式
   =========================================== */
/* 主要内容区域：内边距 */
.content {
    padding: 32px;
}

/* ===========================================
   搜索区域样式
   =========================================== */
/* 搜索区域容器：底部间距、内边距、背景色、边框、圆角 */
.search-section {
    margin-bottom: 24px;
    padding: 16px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* 搜索组容器：弹性布局、元素间距 */
.search-group {
    display: flex;
    gap: 12px;
}

/* 搜索输入框样式：自适应宽度、内边距、边框、字体、背景、过渡效果 */
.search-group input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    transition: border-color 0.15s;
}

/* 搜索输入框聚焦状态：移除默认轮廓、改变边框颜色 */
.search-group input:focus {
    outline: none;
    border-color: #3182ce;
}

/* 搜索按钮样式：内边距、背景色、文字颜色、边框、圆角、字体、光标、过渡效果 */
.search-group button {
    padding: 10px 24px;
    background: #3182ce;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

/* 搜索按钮悬停状态：背景色变深 */
.search-group button:hover {
    background: #2c5282;
}

/* 搜索按钮按下状态：背景色更深 */
.search-group button:active {
    background: #2a4365;
}

/* ===========================================
   设备信息区域样式
   =========================================== */
/* 设备信息容器：默认隐藏 */
.device-info {
    display: none;
}

/* 设备信息容器显示状态：显示为块级元素 */
.device-info.show {
    display: block;
}

/* ===========================================
   表单样式
   =========================================== */
/* 表单组容器：底部间距 */
.form-group {
    margin-bottom: 25px;
}

/* 表单标签样式：块级显示、底部间距、颜色、字体粗细、字体大小 */
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

/* 表单输入框和下拉框样式：宽度、内边距、边框、字体、背景、过渡效果 */
.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    transition: border-color 0.15s;
}

/* 表单输入框和下拉框聚焦状态：移除默认轮廓、改变边框颜色 */
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #3182ce;
}

/* 表单输入框禁用状态：背景色、文字颜色、光标样式 */
.form-group input:disabled {
    background: #f7fafc;
    color: #718096;
    cursor: not-allowed;
}

/* 表单行容器：网格布局、两列等宽、元素间距 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ===========================================
   状态徽章样式
   =========================================== */
/* 状态徽章基础样式：内联块、内边距、圆角、字体大小、字体粗细 */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* 启用状态徽章：绿色背景、深绿色文字 */
.status-enabled {
    background: #e8f5e9;
    color: #2e7d32;
}

/* 禁用状态徽章：红色背景、深红色文字 */
.status-disabled {
    background: #ffebee;
    color: #c62828;
}

/* ===========================================
   按钮组样式
   =========================================== */
/* 按钮组容器：弹性布局、元素间距、顶部间距 */
.button-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* 按钮基础样式：自适应宽度、内边距、边框、圆角、字体、光标、过渡效果 */
button {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

/* 主要按钮样式：蓝色背景、白色文字、蓝色边框 */
.btn-primary {
    background: #3182ce;
    color: white;
    border-color: #3182ce;
}

/* 主要按钮悬停状态：深蓝色背景和边框 */
.btn-primary:hover {
    background: #2c5282;
    border-color: #2c5282;
}

/* 主要按钮按下状态：更深的蓝色背景 */
.btn-primary:active {
    background: #2a4365;
}

/* 危险按钮样式：红色背景、白色文字、红色边框 */
.btn-danger {
    background: #e53e3e;
    color: white;
    border-color: #e53e3e;
}

/* 危险按钮悬停状态：深红色背景和边框 */
.btn-danger:hover {
    background: #c53030;
    border-color: #c53030;
}

/* 危险按钮按下状态：更深的红色背景 */
.btn-danger:active {
    background: #9b2c2c;
}

/* ===========================================
   消息提示样式
   =========================================== */
/* 消息容器基础样式：内边距、圆角、底部间距、默认隐藏、左边框、字体大小 */
.message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: none;
    border-left: 3px solid;
    font-size: 14px;
}

/* 成功消息样式：浅绿色背景、深绿色文字、绿色左边框 */
.message.success {
    background: #f0fff4;
    color: #22543d;
    border-left-color: #48bb78;
}

/* 错误消息样式：浅红色背景、深红色文字、红色左边框 */
.message.error {
    background: #fff5f5;
    color: #742a2a;
    border-left-color: #fc8181;
}

/* 信息消息样式：浅蓝色背景、深蓝色文字、蓝色左边框 */
.message.info {
    background: #ebf8ff;
    color: #2c5282;
    border-left-color: #63b3ed;
}

/* 消息显示状态：显示为块级元素 */
.message.show {
    display: block;
}

/* ===========================================
   加载状态样式
   =========================================== */
/* 加载提示容器：默认隐藏、居中对齐、内边距、蓝色文字、字体大小 */
.loading {
    display: none;
    text-align: center;
    padding: 12px;
    color: #3182ce;
    font-size: 14px;
}

/* 加载提示显示状态：显示为块级元素 */
.loading.show {
    display: block;
}

/* ===========================================
   配置区域样式
   =========================================== */
/* 配置区域容器：顶部间距、内边距、背景色、边框、圆角 */
.config-section {
    margin-top: 20px;
    padding: 16px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* 配置区域标题样式：底部间距、颜色、字体大小、字体粗细 */
.config-section h3 {
    margin-bottom: 12px;
    color: #1a202c;
    font-size: 14px;
    font-weight: 600;
}

/* 配置项容器：弹性布局、两端对齐、内边距、底部间距、白色背景、圆角、边框 */
.config-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

/* 配置项键名样式：字体粗细、蓝色文字 */
.config-key {
    font-weight: 500;
    color: #3182ce;
}

/* 配置项值样式：灰色文字、自动换行 */
.config-value {
    color: #4a5568;
    word-break: break-all;
}

/* ===========================================
   空状态样式
   =========================================== */
/* 空状态容器：居中对齐、内边距、灰色文字 */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: #718096;
}

/* 空状态图标样式：字体大小、底部间距、半透明 */
.empty-state-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ===========================================
   动态配置区域样式
   =========================================== */
/* 动态配置区域容器：顶部间距、内边距、背景色、边框、圆角 */
.dynamic-config-section {
    margin-top: 24px;
    padding: 20px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* 动态配置区域标题样式：底部间距、颜色、字体大小、字体粗细、底部边框、底部内边距 */
.dynamic-config-section h3 {
    margin-bottom: 16px;
    color: #1a202c;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}

/* 动态配置项容器：底部间距 */
.dynamic-config-item {
    margin-bottom: 20px;
}

/* 动态配置项标签样式：块级显示、底部间距、颜色、字体粗细、字体大小 */
.dynamic-config-item label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

/* 动态配置项输入框和下拉框样式：宽度、内边距、边框、字体、背景 */
.dynamic-config-item input,
.dynamic-config-item select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

/* 动态配置项输入框和下拉框聚焦状态：移除默认轮廓、改变边框颜色 */
.dynamic-config-item input:focus,
.dynamic-config-item select:focus {
    outline: none;
    border-color: #3182ce;
}

/* ===========================================
   弹窗样式
   =========================================== */
/* 弹窗遮罩层：全屏覆盖、居中、半透明背景 */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

/* 弹窗显示状态：显示为块级元素 */
.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 弹窗内容容器：白色背景、圆角、阴影、最大宽度 */
.modal-content {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 450px;
    margin: auto;
    animation: modalSlideIn 0.3s ease-out;
}

/* 弹窗动画：从上方滑入 */
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 弹窗头部：边框、内边距、弹性布局 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

/* 弹窗标题：字体大小、字体粗细、颜色、无底部间距 */
.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
}

/* 弹窗关闭按钮：字体大小、颜色、背景、圆角、内边距、光标 */
.modal-close {
    font-size: 28px;
    color: #718096;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s;
}

/* 弹窗关闭按钮悬停状态：背景色、文字颜色 */
.modal-close:hover {
    background-color: #f7fafc;
    color: #2d3748;
}

/* 弹窗主体：内边距、字体大小、行高、颜色 */
.modal-body {
    padding: 24px;
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
}

/* 弹窗主体段落：底部间距 */
.modal-body p {
    margin: 0 0 12px 0;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

/* 弹窗底部：边框、内边距、弹性布局、右对齐 */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
}

/* 弹窗按钮：内边距、字体大小、边框、圆角、光标、过渡 */
.modal-footer button {
    padding: 10px 24px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
}

/* 弹窗确定按钮：蓝色背景、白色文字 */
.modal-footer .btn-primary {
    background: #3182ce;
    color: white;
}

/* 弹窗确定按钮悬停状态：深蓝色背景 */
.modal-footer .btn-primary:hover {
    background: #2c5282;
}

/* 弹窗成功样式：标题颜色 */
.modal.success .modal-header h3 {
    color: #22543d;
}

/* 弹窗错误样式：标题颜色 */
.modal.error .modal-header h3 {
    color: #742a2a;
}

/* 弹窗信息样式：标题颜色 */
.modal.info .modal-header h3 {
    color: #2c5282;
}