/* 添加Azizam字体 */
@font-face {
    font-family: 'Azizam';
    src: url('//69dj.net/static/newdefault/css/azizam.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Azizam', "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh; padding: 20px; display: flex; flex-direction: column;
}
.main-content { flex: 1; display: flex; align-items: center; justify-content: center; }
.container {
    background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden; width: 100%; max-width: 500px;
}
.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; padding: 40px 30px; text-align: center;
}
.header h1 { 
    font-family: 'Azizam', sans-serif;
    font-size: 2.2em; margin-bottom: 10px; font-weight: 600; 
}
.header p { 
    font-family: 'Azizam', sans-serif;
    opacity: 0.9; font-size: 1.1em; 
}
.form-container { padding: 40px 30px; }
.input-group { margin-bottom: 25px; }
.input-label { 
    font-family: 'Azizam', sans-serif;
    display: block; margin-bottom: 8px; font-weight: 500; color: #495057; 
}
.form-input {
    font-family: 'Azizam', sans-serif;
    width: 100%; padding: 15px 20px; border: 2px solid #e9ecef; border-radius: 12px;
    font-size: 1em; transition: all 0.3s ease; background: #f8f9fa;
}
.form-input:focus { outline: none; border-color: #667eea; background: white; }
.submit-btn {
    font-family: 'Azizam', sans-serif;
    width: 100%; padding: 15px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; border: none; border-radius: 12px; font-size: 1.1em; font-weight: 500;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.examples {
    margin-top: 25px; padding: 20px; background: #f8f9fa;
    border-radius: 12px; border-left: 4px solid #667eea;
}
.examples h3 { 
    font-family: 'Azizam', sans-serif;
    color: #495057; margin-bottom: 10px; font-size: 1em; 
}
.example-list { list-style: none; }
.example-list li { 
    font-family: 'Azizam', sans-serif;
    padding: 5px 0; color: #6c757d; font-size: 0.9em; 
}
.example-list li:before {
    content: "•"; color: #667eea; font-weight: bold;
    display: inline-block; width: 1em; margin-left: -1em;
}
.footer { text-align: center; color: white; margin-top: 30px; padding: 20px; }
.friend-link {
    background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;
    margin-bottom: 10px; backdrop-filter: blur(10px);
}
.friend-title { 
    font-family: 'Azizam', sans-serif;
    font-size: 0.9em; margin-bottom: 5px; opacity: 0.8; 
}
.friend-link a { 
    font-family: 'Azizam', sans-serif;
    color: white; text-decoration: none; font-weight: 500; font-size: 1.1em; 
}
.friend-link a:hover { text-decoration: underline; }
.disclaimer { 
    font-family: 'Azizam', sans-serif;
    font-size: 0.9em; opacity: 0.8; margin-top: 10px; 
}

                    * { margin: 0; padding: 0; box-sizing: border-box; }
                    body { 
                        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        min-height: 100vh; padding: 20px; color: #333;
                        display: flex; flex-direction: column;
                    }
                    .container {
                        max-width: 1000px; margin: 0 auto; background: white;
                        border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                        overflow: hidden; flex: 1;
                    }
                    .header {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white; padding: 30px; text-align: center;
                    }
                    .header h1 { font-size: 2.2em; margin-bottom: 10px; }
                    .header p { opacity: 0.9; font-size: 1.1em; }
                    .video-info {
                        background: #f8f9fa; padding: 20px; border-bottom: 1px solid #e9ecef;
                    }
                    .wxv-id {
                        background: white; padding: 12px 20px; border-radius: 10px;
                        border: 2px dashed #dee2e6; font-family: "Courier New", monospace;
                        font-size: 1.1em; color: #495057;
                    }
                    .video-player { padding: 30px; text-align: center; }
                    video { 
                        max-width: 100%; border-radius: 15px; 
                        box-shadow: 0 10px 30px rgba(0,0,0,0.2); background: #000;
                    }
                    .back-btn {
                        display: inline-block; margin: 10px; padding: 12px 25px;
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white; text-decoration: none; border-radius: 25px;
                        font-weight: 500; transition: all 0.3s ease;
                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                    }
                    .back-btn:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
                    }
                    .btn-download {
                        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
                    }
                    .btn-download:hover {
                        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
                    }
                    .fallback-options {
                        background: #f8f9fa; padding: 25px; border-radius: 15px;
                        margin-top: 20px; display: none;
                    }
                    .fallback-title {
                        color: #495057; margin-bottom: 15px; font-weight: 500;
                    }
                    .footer {
                        max-width: 1000px; margin: 20px auto 0; text-align: center;
                        color: white; padding: 20px;
                    }
                    .friend-link {
                        background: rgba(255,255,255,0.1); padding: 15px;
                        border-radius: 10px; margin-bottom: 10px;
                        backdrop-filter: blur(10px);
                    }
                    .friend-title {
                        font-size: 0.9em; margin-bottom: 5px; opacity: 0.8;
                    }
                    .friend-link a { 
                        color: white; text-decoration: none; font-weight: 500;
                        font-size: 1.1em;
                    }
                    .friend-link a:hover { text-decoration: underline; }
                    .disclaimer { font-size: 0.9em; opacity: 0.8; margin-top: 10px; }
                    
                    @media (max-width: 768px) {
                        .container { margin: 10px; border-radius: 15px; }
                        .header { padding: 20px; }
                        .header h1 { font-size: 1.8em; }
                        .video-player { padding: 20px; }
                        .footer { margin: 10px auto 0; padding: 15px; }
                    }