body { 
    font-family: sans-serif; 
    text-align: center; 
    background: #f5f5f5; 
    margin: 0; 
    padding: 40px 20px; 
}

h1 { margin-bottom: 30px; color: #333; }

.container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: flex-start; 
    gap: 20px; 
    width: 100%;
    margin: 0 auto;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.card { 
    background: #fff; 
    width: 290px; 
    height: 400px; 
    flex-shrink: 0; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    position: relative; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.card h2 { font-size: 16px; color: #333; margin: 0 0 15px 0; }

.qr-wrap { 
    position: relative; 
    width: 220px; 
    height: 220px; 
    margin: 0 auto 15px; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    background: #f9f9f9; 
    border-radius: 4px;
}

.iframe-container {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0.85); 
    width: 260px; 
    height: 260px; 
    z-index: 5;
    display: none;
    transition: opacity 0.3s;
    pointer-events: none; 
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    pointer-events: none; 
}

.img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: none;
    pointer-events: none;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    pointer-events: none;
}

.click-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

.status { 
    font-size: 14px; 
    font-weight: bold; 
    color: #0099ff; 
    min-height: 20px; 
    margin: 5px 0; 
    transition: color 0.2s;
}

.status.error { color: #ff4444; }
.status.success { color: #00cc00; }
.status.waiting { color: #ff9900; }
.status.logging { color: #0099ff; }

.timer { font-size: 12px; color: #999; margin-bottom: 10px; }
.timer span { color: #ff6600; font-weight: bold; }

.result-box { display: none; text-align: left; margin-top: auto; }
textarea { width: 100%; height: 80px; padding: 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; font-size: 12px; background: #f9f9f9; resize: none; margin-bottom: 10px; }

.btn-group { display: flex; gap: 8px; }
.btn { flex: 1; padding: 8px; background: #666; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; font-weight: bold; transition: 0.2s; }

.btn.tx { background: #ff6600; }
.btn.yk { background: #00a1d6; }
.btn.iqiyi { background: #00CC33; }
.btn.mgtv { background: #FF5F00; }
.btn.bilibili { background: #FB7299; }
.btn.migu { background: #0066CC; }

.btn.gray { background: #999; }
.btn:hover { opacity: 0.9; }

.expired-mask { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.9); 
    backdrop-filter: blur(2px); 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    z-index: 15; 
    border-radius: 4px;
}

.expired-text { color: #ff8c00; font-size: 16px; font-weight: bold; }