/* 核心布局 */
        .srt-container { max-width: 1000px; margin: 20px auto; padding: 0 20px; }
        .srt-box { background: #fff; padding: 25px; border-radius: 12px; border: 1px solid #e0e0e0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .srt-label { font-weight: 700; margin: 0 0 8px; display: block; font-size: 0.95rem; color: #444; }
        
        /* 文本框样式 */
        #srt-input, #srt-output { 
            width: 100%; padding: 15px; border: 1px solid #d2d2d7; 
            border-radius: 8px; font-family: inherit; resize: vertical; 
            box-sizing: border-box; outline: none; transition: border-color 0.2s;
        }
        #srt-input:focus { border-color: #0071e3; }
        #srt-input { height: 160px; font-size: 1rem; }
        #srt-output { height: 200px; background: #f8f9fa; font-family: monospace; white-space: pre; color: #333; margin-top: 10px; }
        
        /* 按钮组样式 */
        .srt-btn-group { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
        .btn-srt { 
            border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer; 
            font-size: 0.95rem; flex: 1; min-width: 120px; font-weight: 600; 
            display:flex; align-items:center; justify-content:center; gap:6px; 
            transition: background 0.2s, transform 0.1s;
        }
        .btn-srt:active { transform: scale(0.98); }
        .btn-srt-gray { background: #f0f0f5; color: #333; }
        .btn-srt-blue { background: #e3f0ff; color: #0071e3; }
        .btn-srt-green { background: #34c759; color: white; }
        
        /* 下载按钮 */
        .btn-srt-dl { 
            background: #1d1d1f; color: white; padding: 10px 24px; 
            border-radius: 30px; text-decoration: none; font-size: 1rem; 
            display: inline-flex; align-items: center; gap: 8px; font-weight: 600; 
        }

        /* 底部提示 */
        .tips-box { background: #fff8e1; border: 1px solid #ffe0b2; padding: 15px; border-radius: 8px; margin-top:20px; display:flex; gap:10px; align-items: flex-start; }
        .tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
        .t-card { background: #fff; padding: 20px; border-radius: 10px; border: 1px solid #eee; }
        .t-card h3 { margin-top: 0; color: #4a90e2; font-size: 1.1rem; border-bottom: 1px solid #eee; padding-bottom: 8px; }
        .t-list { padding-left: 20px; margin-top: 10px; line-height: 1.8; color: #555; }
        
        @media (max-width: 768px) { .tutorial-grid { grid-template-columns: 1fr; } }

        .tab-btn{width: 200px; 
                  height: 35px;
                  background: #fff;
                  border-radius: 10px ;
                  margin-bottom: 10px;
                  margin-right: 12px;
                  border: 1px solid #f1f5f9;
                 font-weight: 300;
                 font-size: 16px;
                  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.05);
            
        
        }

        .tab-btn:hover{ 
            background-color: #cde0f3;
        }
        .tab-btn.active{ 

            background-color: #f0f0f5;
        }