/* H5 扫码签到端 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", sans-serif;
    background: #eef5fb;
    color: #2c3e50;
    min-height: 100vh;
}

.h5-wrap {
    max-width: 460px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    text-align: center;
}
.h5-wrap h1 { font-size: 21px; color: #29649c; }
.h5-sub { color: #7d94ab; font-size: 13px; margin: 6px 0 16px; }

/* 扫码取景框 */
.reader-box {
    width: 280px;
    height: 280px;
    margin: 0 auto 16px;
    border: 3px dashed #b9d4ec;
    border-radius: 12px;
    background: #f7fbff;
    overflow: hidden;
    position: relative;
}
.reader-box video { width: 100%; height: 100%; object-fit: cover; }

.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
label.btn-h5 { display: inline-block; }
.btn-h5 {
    border: none;
    border-radius: 24px;
    padding: 12px 26px;
    font-size: 15px;
    cursor: pointer;
    background: #fff;
    color: #3d6f9e;
    border: 1px solid #b9d4ec;
    box-shadow: 0 1px 4px rgba(31, 85, 130, .1);
}
.btn-h5-primary { background: #4a90d9; color: #fff; border-color: #4a90d9; }
.btn-h5-primary:hover { background: #3d7fc4; }
.btn-h5:hover { background: #eaf4fc; }

/* 微信内提示条 */
.wx-tip {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #fdf3d7;
    border: 1px solid #f0dc9e;
    border-radius: 8px;
    color: #9c7610;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

/* 状态提示：屏幕中部醒目浮层，有内容才显示 */
.status {
    position: fixed;
    left: 50%;
    bottom: 130px;
    transform: translateX(-50%);
    max-width: 88%;
    padding: 12px 18px;
    background: rgba(44, 62, 80, .93);
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    border-radius: 10px;
    z-index: 999;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    display: none;
}
.status.show { display: block; }
.status.warn { background: rgba(156, 118, 16, .95); }
.status.err { background: rgba(179, 64, 64, .95); }

/* 签到结果 */
.result {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
}
.result-title { font-size: 17px; font-weight: bold; margin-bottom: 4px; }
.result-detail { font-size: 13px; opacity: .85; }
.result.ok { background: #e4f7ec; color: #1e7d45; border: 1px solid #b7e6c9; }
.result.warn { background: #fdf3d7; color: #9c7610; border: 1px solid #f0dc9e; }
.result.err { background: #fdeaea; color: #b34040; border: 1px solid #f0c4c4; }
.hidden { display: none; }