/* 1. 基础和背景 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            /* 关键：高级感渐变背景 */
            background: linear-gradient(120deg, #f0f6ff 0%, #e6f1ff 100%);
            color: #1a1f36; /* 深蓝灰色，比纯黑更柔和 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        /* 2. "毛玻璃"效果主容器 */
        .container {
            width: 100%;
            max-width: 760px;
            /* 关键：亚克力/毛玻璃效果 */
            background: rgba(255, 255, 255, 0.7); /* 半透明白 */
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px); /* 模糊背景 */
            -webkit-backdrop-filter: blur(20px); /* 兼容Safari */
            
            padding: 48px;
            text-align: center;
            transition: all 0.3s ease;
            margin-top: 0; /* (修改) 移除顶部边距，由上方的Banner控制 */
        }

        /* 3. 排版 (标题、域名、副标题) */
        h1 {
            font-weight: 700;
            font-size: 2.75rem; /* 36px */
            color: #1a1f36;
            margin-bottom: 12px;
        }
        
        /* 关键：新增的域名样式 */
        .domain-reminder {
            font-weight: 600;
            font-size: 1.1rem; /* 18px */
            color: #0d6efd; /* 使用主色调 */
            margin-bottom: 16px;
        }

        .container > p {
            font-size: 1rem; /* 16px */
            color: #4a5568; /* 柔和的灰色 */
            margin-bottom: 32px;
            line-height: 1.6;
        }

        /* 4. 输入框和按钮 (高级感) */
        .input-group {
            display: flex;
            gap: 12px;
            margin-bottom: 15px; /* (修改) 调整间距 */
            
            /* --- 这是本次的核心修改 --- */
            align-items: flex-start; /* 顶部对齐，防止输入框被拉伸 */
            /* --- 修改结束 --- */
        }
        
        #url-input {
            flex-grow: 1;
            /* (保留上次修改) 垂直内边距-1px, 使其与按钮 (16px padding 无边框) 高度一致 */
            padding: 15px 20px; 
            border: 1px solid #cbd5e0; /* 浅灰色边框 */
            border-radius: 12px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            background: rgba(255, 255, 255, 0.5); /* 轻微透明 */
            color: #2d3748;
            transition: all 0.2s ease;
        }
        #url-input::placeholder {
            color: #a0aec0;
        }
        #url-input:focus, #url-input:focus-visible {
            outline: none;
            border-color: #3b82f6; /* 聚焦时变蓝 */
            background: #fff;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); /* 聚焦光晕 */
        }
        
        /* 关键：主按钮 - 渐变风格 */
        #extract-button {
            padding: 16px 28px;
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            /* 渐变背景 */
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); /* 按钮阴影 */
        }
        #extract-button:not(:disabled):hover {
            transform: translateY(-3px); /* 悬停上浮 */
            box-shadow: 0 7px 20px rgba(59, 130, 246, 0.4);
        }
        #extract-button:disabled {
            background: #94a3b8;
            box-shadow: none;
            cursor: not-allowed;
            transform: none;
        }
        
        /* (新增) 按钮和链接的包裹器 */
        .button-wrapper {
            flex-shrink: 0; /* 防止包裹器缩小 */
        }

        /* (修改) 帮助链接样式 */
        .button-wrapper .help-link {
            display: block;
            font-size: 12px; /* 严格按要求12px */
            color: #4a5568; /* 适配的次要文本颜色 */
            text-decoration: none;
            transition: color 0.2s ease;
            margin-top: 8px; /* 按钮和链接的间距 */
            text-align: center; /* 居中 */
        }


        /* 5. 结果区域 */
        #results-container {
            display: none;
            margin-top: 32px;
            border-top: 1px solid #e2e8f0;
            padding-top: 32px;
        }

        #button-bar {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .btn {
            padding: 12px 22px;
            font-size: 0.95rem;
            font-weight: 500;
            text-decoration: none;
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }
        /* 按钮配色微调 (更鲜艳) */
        #btn-download { background: #10b981; } /* 鲜绿 */
        #btn-open { background: #0ea5e9; }     /* 天蓝 */
        #btn-copy { background: #f59e0b; color: #fff; } /* 琥珀黄 */

        #video-player {
            width: 100%;
            max-width: 640px;
            border-radius: 16px; /* 统一圆角 */
            margin-top: 20px;
            background-color: #000;
            border: 1px solid #cbd5e0;
        }

        /* 6. 状态消息 */
        #status-message {
            margin-top: 15px;
            font-size: 1rem;
            min-height: 1.5em;
            font-weight: 500;
        }
        .error { color: #e11d48; } /* 鲜红 */
        .success { color: #10b981; } /* 鲜绿 */

        /* 7. 进度条 */
        #fake-progress-bar {
            width: 100%;
            max-width: 640px;
            height: 12px;
            background-color: #e2e8f0;
            border-radius: 10px;
            margin: 20px auto;
            overflow: hidden;
            display: none;
        }
        #fake-progress-inner {
            width: 0%;
            height: 100%;
            background-color: #10b981; /* 匹配下载按钮 */
            border-radius: 10px;
            transition: width 2s ease-out;
        }
        
        /* 8. 页脚 */
        footer {
            width: 100%;
            text-align: center;
            margin-top: 40px; /* 调整间距 */
            color: #94a3b8; /* 浅灰色 */
            font-size: 0.9rem;
        }
        footer p {
            margin: 5px 0;
            color: #94a3b8;
        }

        /* 9. 响应式布局 (手机) */
        @media (max-width: 640px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 24px; /* 手机上内边距小一点 */
                margin-top: 0; /* (修改) 手机上也由Banner控制 */
            }
            h1 {
                font-size: 2rem;
            }
            .domain-reminder {
                font-size: 1rem;
            }
            .container > p {
                font-size: 0.95rem;
                margin-bottom: 24px;
            }
            .input-group {
                flex-direction: column; /* 堆叠 */
                gap: 15px;
                margin-bottom: 15px; /* (修改) 保持一致 */
                
                /* --- 响应式中也重置对齐 --- */
                align-items: stretch; /* 在手机上恢复默认拉伸，因为它们是垂直堆叠的 */
            }
            #extract-button {
                width: 100%;
            }
            
            /* (修改) 确保按钮包裹器在手机上占满宽度 */
            .button-wrapper {
                width: 100%;
            }
            /* (修改) 帮助链接在手机上保持居中 */
            .button-wrapper .help-link {
                text-align: center; 
                margin-top: 8px;
            }

            #button-bar {
                gap: 10px;
            }
            .btn {
                font-size: 0.9rem;
                padding: 12px 18px;
            }
        }

        /* --- 10. (新增) 顶部工具按钮 --- */
        .top-utils {
            text-align: right;
            margin-bottom: 10px;
            /* 确保在内边距内 */
            margin-top: -24px; 
            margin-right: -24px;
        }
        #btn-favorite, #btn-desktop-link {
            background: rgba(226, 232, 240, 0.7); /* 浅灰色底 */
            border: 1px solid #cbd5e0;
            padding: 6px 12px;
            font-size: 0.85rem;
            font-weight: 500;
            color: #4a5568;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s ease;
            margin-left: 8px;
        }
        #btn-favorite:hover, #btn-desktop-link:hover {
            background: #fff;
            border-color: #3b82f6;
            color: #3b82f6;
        }

        /* --- 11. (新增) QR码区域 --- */
        .qr-code-area {
            text-align: center;
            margin-top: 15px; 
            /* 复用毛玻璃效果 */
            background: rgba(255, 255, 255, 0.7);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 24px 32px 16px; 
            max-width: 320px; /* 保持小巧 */
        }
        .qr-code-area img {
            width: 150px;
            height: 150px;
            border-radius: 12px; /* 圆角 */
            border: 1px solid #e2e8f0;
            background-color: #fff; /* 避免透明二维码底色问题 */
        }
        .qr-code-area p {
            font-size: 1rem;
            font-weight: 600;
            color: #1a1f36;
            margin-top: 0; /* (已修改) 移除顶部间距 */
            margin-bottom: 16px; /* (已修改) 新增底部间距，隔开图片 */
        }

        /* --- 12. (新增) 响应式调整 --- */
        @media (max-width: 640px) {
            .top-utils {
                margin-top: -10px;
                margin-right: -10px;
                margin-bottom: 15px;
            }
            #btn-favorite, #btn-desktop-link {
                font-size: 0.8rem;
                padding: 5px 10px;
            }
            .qr-code-area {
                margin-top: 30px;
                max-width: 90%; /* 适应屏幕 */
                padding: 24px;
            }
            footer {
                margin-top: 30px;
            }
            
            /* (新增) 确保邀请码横幅在手机上也是100%宽度 */
            #inviteBanner {
                width: 100% !important;
                max-width: 90% !important; /* 保持和qr-code-area一致 */
                padding: 10px !important; /* (修改) 手机上padding也为10px */
                margin-top: 10px !important; 
                margin-bottom: 20px !important; /* (修改) 手机上也保持20px间距 */
            }
        }