/* 扫码弹窗遮罩层（默认隐藏） */
.scan-modal-overlay {
    display: none; /* 核心：通过控制这个属性来显示/隐藏 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

/* 扫码弹窗主体 */
.scan-modal-content {
    width: 90%; max-width: 400px; height: 600px; max-height: 90vh;
    background: #000; border-radius: 16px; overflow: hidden;
    position: relative; display: flex; flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.scan-navbar {
    position: absolute; top: 0; left: 0; width: 100%; height: 50px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
    z-index: 10; color: #fff; font-size: 17px; font-family: sans-serif;
}
.scan-close-btn { position: absolute; left: 15px; font-size: 24px; cursor: pointer; padding: 0 10px; }

.scan-wrapper { flex: 1; position: relative; overflow: hidden; }

#scan-video {height: 100%; }
#scan-video video { width: 100%; height: 100%; object-fit: cover; }

.scan-mask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;
}
.scan-frame {
    margin-top: 80px;
    width: 240px; height: 240px; border: 2px solid #07c160; border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); position: relative;
}
.scan-tip { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,0.85); font-family: sans-serif; }

.scan-action-bar {
    height: 100px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    display: flex; align-items: center; justify-content: space-around; z-index: 10;
}
.scan-action-btn {
    display: flex; flex-direction: column; align-items: center;
    color: #fff; font-size: 12px; cursor: pointer; background: none; border: none; font-family: sans-serif;
}
.scan-action-icon {
    width: 45px; height: 45px; border: 1.5px solid rgba(255,255,255,0.8); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 5px; font-size: 20px; background: rgba(255,255,255,0.1);
}
.scan-action-icon.active { background: #fff; color: #000; }
#scan-file-input { display: none; }

#qr-shaded-region { display: none; }
/* --- 移动端响应式适配（屏幕宽度 <= 768px）：强制全屏 --- */
@media screen and (max-width: 768px) {
    .scan-modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0; /* 移动端取消圆角 */
        box-shadow: none; /* 移动端取消阴影 */
        /* 适配刘海屏和底部安全距离 */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        box-sizing: border-box;
    }

    /* 底部操作栏在移动端也需要适配安全距离 */
    .scan-action-bar {
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }
}