/* 页面样式入口（从 index.html 内联 <style> 提取粘贴到这里）
 * 建议粘贴以下块：
 * - 页面顶部内联的整体覆盖样式（含 header、features、stats、inline steps）
 * - 模态框样式（.modal、.modal-content、.modal-header、.modal-body、.modal-footer）
 * - 视频教程模态（.video-tutorial-modal 及子类）
 * - Token 教程模态专用样式（.token-guide-*）
 * - 响应式 @media 规则
 */

/* 粘贴后会通过 <link rel="stylesheet" href="/static/css/index.css"> 加载 */



      .trust-badges .badge.success{background:#10b981;color:#fff;border-color:#059669}
      .trust-badges .badge.warning{background:#f59e0b;color:#fff;border-color:#d97706}
      .trust-badges .badge i{color:inherit}
      .logo-icon{width:64px;height:64px}
      .logo-section h1{font-size:2.8rem;text-transform:uppercase;color:#1f2937}
      /* 页面整体垂直居中（仅本页生效） */
      body.page-centered{display:flex;flex-direction:column;min-height:100vh;justify-content:center;align-items:center}
      .main-container{min-height:auto !important;max-width:800px !important;width:100%}
      /* 机器人图标在头部区域的样式优化 */
      .main-container .header-section .logo-icon{background:rgba(255,255,255,0.15) !important;border-radius:12px !important;padding:8px !important;border:1px solid rgba(255,255,255,0.2) !important}
      /* 头部区域蓝色背景 - 与input-card合并，添加层次感 */
      .main-container .header-section{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;color:white !important;padding:24px 20px !important;border-radius:20px 20px 0 0 !important;margin:0 !important;border:2px solid rgba(255,255,255,0.2) !important;box-shadow:0 8px 25px rgba(102,126,234,0.3) !important;position:relative !important;z-index:1 !important}
      .main-container .header-section .logo-section h1{color:#ffffff !important;text-shadow:0 2px 4px rgba(0,0,0,0.1) !important;-webkit-text-fill-color:#ffffff !important;background:none !important}
      .main-container .header-section h1{color:#ffffff !important;text-shadow:0 2px 4px rgba(0,0,0,0.1) !important;-webkit-text-fill-color:#ffffff !important;background:none !important}
      /* 三个按钮的不同颜色样式 */
      .main-container .header-section .trust-badges .badge{border:1px solid rgba(255,255,255,0.3) !important;transition:all 0.3s ease !important;backdrop-filter:blur(10px) !important}
      
      /* 不封号 - 绿色主题 */
      .main-container .header-section .trust-badges .badge:nth-child(1){background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important;color:#fff !important;box-shadow:0 4px 15px rgba(16,185,129,0.3) !important}
      .main-container .header-section .trust-badges .badge:nth-child(1):hover{transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(16,185,129,0.4) !important}
      
      /* 不泄露账号 - 蓝色主题 */
      .main-container .header-section .trust-badges .badge:nth-child(2){background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%) !important;color:#fff !important;box-shadow:0 4px 15px rgba(59,130,246,0.3) !important}
      .main-container .header-section .trust-badges .badge:nth-child(2):hover{transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(59,130,246,0.4) !important}
      
      /* 视频教程 - 橙色主题 */
      .main-container .header-section .trust-badges .badge:nth-child(3){background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important;color:#fff !important;box-shadow:0 4px 15px rgba(245,158,11,0.3) !important}
      .main-container .header-section .trust-badges .badge:nth-child(3):hover{transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(245,158,11,0.4) !important}
      
      /* features区域白色背景，与合并卡片分离 - 使用!important覆盖style.css */
      .main-container .features-section{background:white !important;border-radius:12px !important;padding:12px !important;border:2px solid white !important;box-shadow:0 4px 15px rgba(0,0,0,.08) !important;margin-bottom:15px !important;margin-top:15px !important}
      .main-container .features-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;margin-bottom:0 !important}
      
      /* feature卡片样式优化，更小尺寸 - 使用!important覆盖style.css */
      .main-container .feature-card{background:none !important;text-align:center !important;padding:8px 4px !important;border-radius:8px !important;transition:transform 0.2s ease !important;border:none !important}
      .main-container .feature-card:hover{transform:translateY(-1px) !important;box-shadow:none !important}
      .main-container .feature-icon{width:32px !important;height:32px !important;margin:0 auto 6px !important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;border-radius:8px !important;display:flex !important;align-items:center !important;justify-content:center !important;color:white !important;font-size:14px !important}
      .main-container .feature-content h3{font-size:11px !important;font-weight:600 !important;margin:0 0 2px 0 !important;color:#374151 !important}
      .main-container .feature-content p{font-size:9px !important;color:#6b7280 !important;margin:0 !important;line-height:1.2 !important}
      
      /* 移动端保持3列布局，超紧凑 - 使用!important覆盖style.css */
      @media (max-width:768px){
        .main-container .features-section{padding:8px !important;margin-bottom:10px !important}
        .main-container .features-grid{grid-template-columns:repeat(3,1fr) !important;gap:4px !important}
        .main-container .feature-card{padding:4px 2px !important}
        .main-container .feature-icon{width:24px !important;height:24px !important;font-size:10px !important;margin-bottom:3px !important}
        .main-container .feature-content h3{font-size:8px !important}
        .main-container .feature-content p{font-size:6px !important}
        .main-container .header-section{padding:20px !important}
        .main-container .header-section .logo-section h1{font-size:1.8rem !important}
        .main-container .header-section .logo-icon{width:48px !important;height:48px !important}
        
        /* 移动端按钮样式调整 */
        .main-container .header-section .trust-badges .badge{font-size:12px !important;padding:6px 10px !important}
        .main-container .header-section .trust-badges .badge:hover{transform:translateY(-1px) !important}
        
        /* 移动端状态区域优化 */
        .status-main-info{flex-direction:column;align-items:flex-start;gap:12px}
        .status-badge{font-size:13px;padding:6px 12px}
        .status-email-info{font-size:12px;padding:4px 10px}
        .status-timeline{padding:10px 12px;flex-direction:column;gap:8px}
        .timeline-item{justify-content:space-between}
        .timeline-divider{display:none}
        
        /* 统计数据移动端保持3列布局，极度紧凑防止重叠 */
        .main-container .stats-section{grid-template-columns:repeat(3,1fr) !important;gap:1px !important;margin:4px 0 !important;padding:0 2px !important}
        .main-container .stat-card{padding:1px 0 !important;min-width:0 !important;overflow:hidden !important}
        .main-container .stat-number{font-size:0.6rem !important;line-height:1 !important;margin-bottom:0px !important;word-break:keep-all !important}
        .main-container .stat-label{font-size:4px !important;line-height:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
      }
      
      /* 超小屏幕优化 - 防止内容溢出 */
      @media (max-width:480px){
        .main-container .features-section{padding:4px !important}
        .main-container .features-grid{gap:2px !important}
        .main-container .feature-card{padding:2px 1px !important}
        .main-container .feature-icon{width:20px !important;height:20px !important;font-size:8px !important;margin-bottom:2px !important}
        .main-container .feature-content h3{font-size:7px !important}
        .main-container .feature-content p{font-size:5px !important}
        
        /* 超小屏幕标题优化 */
        .main-container .header-section .logo-section h1{font-size:1.4rem !important}
        .main-container .header-section .logo-icon{width:40px !important;height:40px !important}
        
        /* 超小屏幕按钮优化 */
        .main-container .header-section .trust-badges .badge{font-size:10px !important;padding:4px 8px !important}
        
        .main-container .stats-section{gap:0px !important;padding:0 1px !important}
        .main-container .stat-card{padding:0px !important}
        .main-container .stat-number{font-size:0.5rem !important}
        .main-container .stat-label{font-size:3px !important}
      }
      
      @media (max-width:360px){
        .main-container .feature-icon{width:18px !important;height:18px !important;font-size:7px !important}
        .main-container .feature-content h3{font-size:6px !important}
        .main-container .feature-content p{font-size:4px !important}
        
        /* 360px以下标题进一步优化 */
        .main-container .header-section .logo-section h1{font-size:1.2rem !important;letter-spacing:-0.5px !important}
        .main-container .header-section .logo-icon{width:36px !important;height:36px !important}
        
        /* 360px以下按钮最小优化 */
        .main-container .header-section .trust-badges .badge{font-size:9px !important;padding:3px 6px !important}
        
        .main-container .stat-number{font-size:0.45rem !important}
        .main-container .stat-label{font-size:3px !important}
      }
      /* 统计数据区域优化，更小尺寸 - 覆盖style.css */
      .main-container .stats-section{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;justify-items:center !important;margin:12px 0 !important}
      .main-container .stat-card{background:none !important;border-radius:0 !important;padding:6px 4px !important;text-align:center !important;transition:none !important}
      .main-container .stat-number{font-size:1.2rem !important;font-weight:700 !important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;margin-bottom:2px !important}
      .main-container .stat-label{color:#6b7280 !important;font-size:8px !important;font-weight:500 !important;margin:0 !important}
      
      /* 卡密输入区域 - 与header-section完全无缝连接 */
      .main-container .card-input-section{margin:0 !important;padding:0 !important;border:none !important;position:relative !important;top:-1px !important}
      .main-container .card-input-section .section-header{display:none !important}
      .main-container .card-input-section .input-card{border-radius:0 0 20px 20px !important;border:2px solid white !important;border-top:none !important;box-shadow:0 4px 15px rgba(0,0,0,.08) !important;margin:0 !important;padding:30px !important;position:relative !important;top:0 !important}
      /* 引导提示样式与高亮 */
      .focus-hint{margin-top:8px;display:flex;align-items:center;gap:8px;color:#991b1b;font-size:14px;background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;padding:8px 10px}
      .focus-hint .hand{display:inline-block;animation:hand-bounce 1.2s ease-in-out infinite}
      @keyframes hand-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
      .input-wrapper.highlight #cardCode{box-shadow:0 0 0 6px rgba(239,68,68,.22);border:2px solid #dc2626 !important}
      
      /* 第二步和第三步区域 - 与header-section完全无缝连接 */
      .main-container .form-section,.main-container .status-section{margin:0 !important;padding:0 !important;border:none !important;position:relative !important;top:-1px !important}
      .main-container .form-section .section-header,.main-container .status-section .section-header{display:none !important}
      .main-container .form-card,.main-container .status-card{border-radius:0 0 20px 20px !important;border:2px solid white !important;border-top:none !important;box-shadow:0 4px 15px rgba(0,0,0,.08) !important;margin:0 !important;padding:30px !important;position:relative !important;top:0 !important;background:white !important}
      
      /* 强制消除任何可能的间距 - 适用于所有步骤 */
      .main-container .header-section + .card-input-section,.main-container .header-section + .form-section,.main-container .header-section + .status-section{margin-top:-2px !important}
      .main-container .header-section::after{content:'';display:block;height:0;margin:0 !important;padding:0 !important}
      
      /* 确保所有步骤卡片都无缝连接 */
      .main-container.compact .input-card,.main-container.compact .form-card,.main-container.compact .status-card{margin-bottom:8px !important}
      .main-container .input-card,.main-container .form-card,.main-container .status-card{transform:translateY(-1px) !important}
      
      .input-header,.form-header,.status-header{position:relative}
      .inline-steps{position:absolute;top:0;right:0;display:flex;gap:8px;align-items:center}
      .inline-step{width:26px;height:26px;border-radius:50%;background:#e2e8f0;color:#718096;border:1px solid #cbd5e0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
      .inline-step.active{background:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);color:#fff;border:none}
      .inline-step.done{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#fff;border:none}
      /* 重新设计的紧凑内容区域 */
      .status-content-compact{margin-top:20px}
      .status-main-info{display:block;margin-bottom:12px}
      .status-panel{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;margin-bottom:8px}
      .info-panel{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
      .status-top-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
      .status-top-row .status-badge{flex-shrink:0}
      .status-top-row .status-countdown{flex:1}
      .status-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-start}
      .status-badge{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;box-shadow:0 4px 12px rgba(102,126,234,0.3)}
      .status-badge.processing{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);box-shadow:0 4px 12px rgba(245,158,11,0.3)}
      .status-badge.completed{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 4px 12px rgba(16,185,129,0.3)}
      .status-email-info{display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;background:#f8fafc;padding:6px 12px;border-radius:16px}
      .compact-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
      .status-countdown{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:6px 10px;min-width:260px;max-width:420px}
      .status-countdown .countdown-text{font-size:12px;color:#6b7280;min-width:90px;text-align:right}
      .status-countdown .progress{flex:1;height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
      .status-countdown .progress-bar{height:100%;
        background:linear-gradient(90deg,#ef4444,#f59e0b,#fbbf24,#10b981,#3b82f6,#8b5cf6,#ec4899);
        background-size:100% 100%;
        width:0%;
        transition:width .2s linear}
      
      .status-timeline{display:flex;align-items:center;background:#f8fafc;border-radius:12px;padding:12px 16px;margin-bottom:16px}
      .timeline-item{display:flex;align-items:center;gap:6px;flex:1}
      .timeline-item i{color:#667eea;font-size:16px}
      .timeline-label{font-size:12px;color:#6b7280;font-weight:500}
      .timeline-value{font-size:12px;color:#374151;font-weight:600;margin-left:4px}
      .timeline-divider{width:2px;height:24px;background:linear-gradient(to bottom,#e5e7eb,#d1d5db,#e5e7eb);margin:0 12px;border-radius:1px}
      
      .status-card.loading{position:relative;animation:pulseGlow 1.6s ease-in-out infinite}
      @keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(79,70,229,.28)}70%{box-shadow:0 0 0 12px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}
      @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
      .fireworks-container{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}
      .firework-piece{position:absolute;width:6px;height:14px;background:#4f46e5;border-radius:2px;opacity:0;animation:burst 1.2s ease-out forwards}
      @keyframes burst{0%{transform:translate(0,0) scale(.8) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(360deg);opacity:0}}
      
      /* Token教程样式 */
      .guide-content{display:flex;gap:30px;align-items:flex-start}
      .guide-text{flex:1;min-width:300px}
      .guide-video{flex:1;text-align:center;min-width:250px}
      .guide-video h5{margin:0 0 15px 0;color:#374151;font-size:16px}
      .guide-video video{max-width:100%;height:auto;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,0.15);transition:all 0.3s ease}
      .guide-video video:hover{transform:scale(1.02);box-shadow:0 12px 35px rgba(0,0,0,0.2)}
      .video-hint{color:#6b7280;font-size:12px;margin-top:8px;font-style:italic}
      
      /* 注意事项模态框样式 */
      .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;backdrop-filter:blur(4px)}
      .modal-content{position:relative;background:white;margin:5% auto;padding:0;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:600px;width:90%;max-height:80vh;overflow:hidden}
      .modal-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
      .modal-header h2{margin:0;font-size:20px;font-weight:600}
      .modal-header .close{background:none;border:none;color:white;font-size:28px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s ease}
      .modal-header .close:hover{background:rgba(255,255,255,0.2)}
      .modal-body{padding:24px;max-height:calc(80vh - 140px);overflow-y:auto}
      .modal-footer{background:#f8fafc;padding:16px 24px;display:flex;justify-content:flex-end;gap:12px;border-top:1px solid #e2e8f0}
      /* Token教程模态框样式（复用通用modal样式） */
      .token-guide-modal .modal-content{max-width:900px}
      .token-guide-body{padding:24px;display:flex;gap:24px;max-height:calc(80vh - 140px);overflow-y:auto}
      .token-guide-left{flex:1;min-width:280px}
      .token-guide-right{flex:1;min-width:240px}
      .token-guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
      .token-guide-hint{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#FFFBEB;border:1px solid #FCD34D;border-radius:6px;padding:8px 10px}
      .token-guide-hint .hint-text{display:flex;align-items:center;gap:6px;color:#92400E;font-size:12px}
      @media (max-width:768px){
        .token-guide-body{flex-direction:column;gap:16px;padding:16px}
        .token-guide-modal .modal-content{width:95%;max-height:90vh}
      }
      .notice-content{display:flex;flex-direction:column;gap:20px}
      .notice-item h3{margin:0 0 12px 0;color:#374151;font-size:16px;font-weight:600}
      .notice-item p{margin:0;color:#6b7280;line-height:1.6;font-size:14px}
      
      /* 全屏视频模态框样式 */
      .fullscreen-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:10000;backdrop-filter:blur(5px)}
      .fullscreen-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
      .fullscreen-close{position:absolute;top:20px;right:30px;background:none;border:none;color:white;font-size:40px;cursor:pointer;z-index:10001;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s ease}
      .fullscreen-close:hover{background:rgba(255,255,255,0.2)}
      .fullscreen-modal video{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:8px}
      
      /* 移动端适配 */
      @media (max-width:768px){
        .guide-content{flex-direction:column;gap:20px}
        .guide-text,.guide-video{min-width:auto}
        .fullscreen-close{top:10px;right:15px;font-size:30px;width:40px;height:40px}
      }
      
      /* 视频教程模态框样式 */
      .video-tutorial-modal{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:10000;
        display:flex;
        align-items:center;
        justify-content:center;
        animation:fadeIn 0.3s ease-out;
      }
      
      .video-modal-overlay{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.8);
        backdrop-filter:blur(8px);
      }
      
      .video-modal-content{
        position:relative;
        background:white;
        border-radius:16px;
        box-shadow:0 25px 60px rgba(0,0,0,0.4);
        max-width:900px;
        width:90%;
        max-height:90vh;
        overflow:hidden;
        animation:slideIn 0.3s ease-out;
      }
      
      .video-modal-header{
        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
        color:white;
        padding:20px 24px;
        display:flex;
        align-items:center;
        justify-content:space-between;
      }
      
      .video-modal-header h3{
        margin:0;
        font-size:18px;
        font-weight:600;
        display:flex;
        align-items:center;
        gap:8px;
      }
      
      .video-modal-close{
        background:none;
        border:none;
        color:white;
        font-size:28px;
        cursor:pointer;
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        transition:background 0.2s ease;
      }
      
      .video-modal-close:hover{
        background:rgba(255,255,255,0.2);
      }
      
      .video-modal-body{
        padding:24px;
        display:flex;
        gap:24px;
        max-height:calc(90vh - 160px);
        overflow-y:auto;
      }
      
      .tutorial-video-container{
        flex:1;
        text-align:center;
      }
      
      .tutorial-video-container video{
        max-width:100%;
        height:auto;
        border-radius:12px;
        box-shadow:0 8px 25px rgba(0,0,0,0.15);
        transition:transform 0.3s ease;
      }
      
      .tutorial-video-container video:hover{
        transform:scale(1.02);
      }
      
      .tutorial-description{
        flex:1;
        min-width:300px;
      }
      
      .tutorial-description h4{
        margin:0 0 16px 0;
        color:#374151;
        font-size:16px;
        display:flex;
        align-items:center;
        gap:8px;
      }
      
      .tutorial-description ol{
        padding-left:20px;
        margin:0 0 20px 0;
      }
      
      .tutorial-description li{
        margin-bottom:8px;
        color:#6b7280;
        line-height:1.5;
      }
      
      .tutorial-note{
        background:#f0f9ff;
        border:1px solid #0ea5e9;
        border-radius:8px;
        padding:12px;
        display:flex;
        align-items:center;
        gap:8px;
        color:#0369a1;
        font-size:14px;
      }
      
      .video-modal-footer{
        background:#f8fafc;
        padding:16px 24px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-top:1px solid #e5e7eb;
      }
      
      .footer-left{
        flex:1;
      }
      
      .footer-tip{
        color:#6b7280;
        font-size:13px;
        display:flex;
        align-items:center;
        gap:6px;
      }
      
      .footer-tip i{
        color:#f59e0b;
      }
      
      
      .step-desc{
        font-size:12px;
        color:#9ca3af;
        font-weight:normal;
        line-height:1.4;
        margin-top:4px;
        display:block;
      }
      
      .tutorial-description li{
        margin-bottom:12px;
        color:#374151;
        line-height:1.6;
      }
      
      .tutorial-description li strong{
        color:#1f2937;
        font-weight:600;
      }
      
      .btn-secondary{
        background:#6b7280;
        color:white;
        border:none;
        padding:10px 20px;
        border-radius:8px;
        cursor:pointer;
        font-size:14px;
        transition:background 0.2s ease;
      }
      
      .btn-secondary:hover{
        background:#4b5563;
      }
      
      .btn-primary{
        background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
        color:white;
        text-decoration:none;
        padding:10px 20px;
        border-radius:8px;
        font-size:14px;
        display:flex;
        align-items:center;
        gap:8px;
        transition:transform 0.2s ease;
      }
      
      .btn-primary:hover{
        transform:translateY(-1px);
        box-shadow:0 4px 12px rgba(102,126,234,0.4);
      }
      /* 第二步：返回与提交按钮同排左右分布 */
      .form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
      .form-actions .back-btn{min-width:160px}
      .form-actions .submit-primary{min-width:180px}
      @media (max-width:768px){
        .form-actions{flex-direction:column;align-items:stretch}
      }
      
      @keyframes fadeIn{
        from{opacity:0}
        to{opacity:1}
      }
      
      @keyframes slideIn{
        from{transform:scale(0.9) translateY(-20px);opacity:0}
        to{transform:scale(1) translateY(0);opacity:1}
      }
      
      /* 移动端视频教程模态框适配 */
      @media (max-width:768px){
        .video-modal-content{
          width:95%;
          max-height:95vh;
        }
        
        .video-modal-body{
          flex-direction:column;
          gap:16px;
          padding:16px;
        }
        
        .tutorial-description{
          min-width:auto;
        }
        
        .video-modal-header{
          padding:16px;
        }
        
        .video-modal-header h3{
          font-size:16px;
        }
        
        .video-modal-footer{
          padding:12px 16px;
          flex-direction:column;
          gap:12px;
          align-items:stretch;
        }
        
        .footer-left{
          text-align:center;
          margin-bottom:8px;
        }
        
        .btn-primary{
          width:100%;
          justify-content:center;
        }
      }
      
      /* 表单分步提示样式 */
      .form-group.highlight .form-group-input{
        box-shadow:0 0 0 6px rgba(239,68,68,.22);
        border:2px solid #dc2626 !important;
      }
      .form-group.highlight textarea{
        box-shadow:0 0 0 6px rgba(239,68,68,.22);
        border:2px solid #dc2626 !important;
      }
      .form-actions{position:relative}
      
      /* 页脚样式 - 固定在底部 */
      .page-footer{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        text-align:center;
        padding:12px 20px;
        color:white;
        font-size:12px;
        z-index:0;
        pointer-events:none;
      }
      .page-footer p{
        margin:0;
      }