.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.progress-bar {
height: 100%;
background: var(--zen-primary, #d4af37);
width: 0;
transition: width .1s;
}
.dark-mode .progress-container {
background: rgba(255, 255, 255, 0.1);
}
.reward-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
}
.reward-content {
background-color: #fefefe;
margin: 10% auto;
padding: 24px;
border: 1px solid #888;
width: 90%;
max-width: 480px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.dark-mode .reward-content {
background-color: #2a2a2a;
border-color: #444;
}
.close-modal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}
.close-modal:hover,
.close-modal:focus {
color: #000;
text-decoration: none;
}
.dark-mode .close-modal {
color: #888;
}
.dark-mode .close-modal:hover {
color: #fff;
}
.reward-title {
font-size: 18px;
margin: 0 0 20px;
color: #d4af37;
}
.qr-container {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.qr-item {
text-align: center;
}
.qr-item img {
width: 180px;
height: 180px;
border-radius: 8px;
margin-bottom: 8px;
}
.qr-item b {
display: block;
font-size: 13px;
color: #666;
}
.dark-mode .qr-item b {
color: #aaa;
}
.reward-notice-text {
margin-top: 16px;
font-size: 14px;
color: #888;
}
.reward-footer {
margin-top: 8px;
font-size: 12px;
color: #999;
}