/* 速码工具网页端样式（浅色简洁、列表式布局） */

* {  /* 全局重置 */
    margin: 0;  /* 外边距清零 */
    padding: 0;  /* 内边距清零 */
    box-sizing: border-box;  /* 盒模型 */
}

body {  /* 页面主体 */
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;  /* 字体 */
    background: #f5f7fa;  /* 浅灰背景 */
    color: #333;  /* 深灰文字 */
    display: flex;  /* 弹性布局 */
    justify-content: center;  /* 水平居中 */
    padding: 24px 12px;  /* 内边距 */
}

.container {  /* 主容器 */
    width: 100%;  /* 宽度 */
    max-width: 480px;  /* 最大宽度，手机友好 */
    background: #fff;  /* 白底 */
    border-radius: 12px;  /* 圆角 */
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);  /* 阴影 */
    padding: 24px;  /* 内边距 */
}

.title {  /* 标题 */
    text-align: center;  /* 居中 */
    font-size: 22px;  /* 字号 */
    margin-bottom: 20px;  /* 下边距 */
    color: #1f6feb;  /* 主题蓝 */
}

.info-list {  /* 信息列表 */
    list-style: none;  /* 去项目符号 */
    border: 1px solid #eee;  /* 边框 */
    border-radius: 8px;  /* 圆角 */
    overflow: hidden;  /* 圆角裁剪 */
}

.info-list li {  /* 列表项 */
    display: flex;  /* 弹性 */
    justify-content: space-between;  /* 两端对齐 */
    padding: 12px 14px;  /* 内边距 */
    border-bottom: 1px solid #f0f0f0;  /* 分隔线 */
    font-size: 14px;  /* 字号 */
}

.info-list li:last-child {  /* 末项 */
    border-bottom: none;  /* 去线 */
}

.info-list li span {  /* 标签 */
    color: #888;  /* 灰 */
}

.info-list li b {  /* 值 */
    color: #222;  /* 深 */
    font-weight: 600;  /* 加粗 */
}

.scan-area {  /* 扫码区 */
    margin: 20px 0;  /* 上下边距 */
    display: flex;  /* 弹性 */
    gap: 10px;  /* 间距 */
    flex-wrap: wrap;  /* 换行 */
}

.btn {  /* 按钮基础 */
    flex: 1;  /* 均分 */
    min-width: 120px;  /* 最小宽 */
    padding: 12px;  /* 内边距 */
    border: none;  /* 无边框 */
    border-radius: 8px;  /* 圆角 */
    background: #eef2f7;  /* 浅灰蓝 */
    color: #333;  /* 文字色 */
    font-size: 14px;  /* 字号 */
    cursor: pointer;  /* 手型 */
}

.btn:hover {  /* 悬停 */
    background: #e2e8f0;  /* 加深 */
}

.btn.primary {  /* 主按钮 */
    background: #1f6feb;  /* 主题蓝 */
    color: #fff;  /* 白字 */
    width: 100%;  /* 整宽 */
    margin-top: 10px;  /* 上边距 */
}

.action-area {  /* 操作区 */
    text-align: center;  /* 居中 */
}

.hint {  /* 提示 */
    color: #999;  /* 灰 */
    font-size: 13px;  /* 字号 */
    margin: 8px 0;  /* 边距 */
}

.result {  /* 结果 */
    font-size: 16px;  /* 字号 */
    font-weight: 600;  /* 加粗 */
    margin-top: 10px;  /* 上边距 */
    min-height: 22px;  /* 最小高 */
}

.result.pending {  /* 进行中 */
    color: #d97706;  /* 橙 */
}

.result.success {  /* 成功 */
    color: #16a34a;  /* 绿 */
}

.result.fail {  /* 失败 */
    color: #dc2626;  /* 红 */
}

video {  /* 摄像头预览 */
    width: 100%;  /* 满宽 */
    border-radius: 8px;  /* 圆角 */
    margin-top: 10px;  /* 上边距 */
}