/* 核心布局 */
        .srt-layout {
            display: block;
            overflow-y: auto;
        }
        
        .srt-container { 
            max-width: 1000px; 
            margin: 20px auto; 
            padding: 0 20px;
            /* 容器查询上下文 */
            container-type: inline-size;
            container-name: srt-container;
        }
        
        .srt-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.6rem;
            color: #1d1d1f;
        }
        
        /* 隐藏元素 - 合并重复样式 */
        .hidden-input,
        .hidden-source {
            display: none;
        }
        
        /* CLS优化：音频容器固定尺寸 */
        .audio-mob-container {
            min-height: 40px; /* 固定最小高度 */
            box-sizing: border-box;
            display: none;
            margin: 10px 0;
            background: #f1f5f9;
            padding: 8px;
            border-radius: 10px;
        }
        
        .audio-mob-container[data-visible=""] {
            display: block;
        }
        
        .audio-mob-player {
            width: 100%;
            height: 40px;
        }
        
        /* 拖拽区域样式 */
        .drop-zone {
            padding: 30px;
            border: 2px dashed #d2d2d7;
            border-radius: 12px;
            text-align: center;
            background: #fafafa;
            transition: 0.3s;
        }
        
        .drop-zone-icon {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 10px;
        }
        
        .drop-zone-title {
            margin: 5px 0;
            font-weight: 600;
        }
        
        .drop-zone-desc {
            font-size: 0.85rem;
            color: #888;
        }
        
        .btn-select-file {
            width: auto;
            margin: 15px auto;
            padding: 8px 20px;
        }
        
        .file-info {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #0071e3;
            font-weight: 500;
        }
        
        /* CLS优化：音频播放器固定尺寸 */
        .audio-player-hidden {
            width: 100%;
            margin-top: 15px;
            visibility: hidden;
            height: 40px;
            min-height: 40px;
            box-sizing: border-box;
        }
        
        .audio-player-hidden[data-visible=""] {
            visibility: visible;
        }
        
        /* CLS优化：下载区域固定高度，避免显示时布局偏移 */
        .srt-dl-area-hidden {
            visibility: hidden;
            height: 0;
            overflow: hidden;
            text-align: right;
            margin-top: 0;
            box-sizing: border-box;
        }
        
        .srt-dl-area-hidden[data-visible=""] {
            visibility: visible;
            height: auto;
            min-height: 44px; /* 固定最小高度（按钮高度 + margin） */
            margin-top: 15px;
        }
        
        .tips-icon {
            font-size: 1.2rem;
        }
        .srt-box { 
            background: #fff; 
            padding: clamp(20px, 2.5vw, 25px); /* 响应式内边距 */
            border-radius: clamp(10px, 1.2vw, 12px); /* 响应式圆角 */
            border: 1px solid #e0e0e0; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            /* 容器查询上下文 */
            container-type: inline-size;
            container-name: srt-box;
        }
        .srt-label { font-weight: 700; margin: 0 0 8px; display: block; font-size: 0.95rem; color: #444; }
        
        /* 数据属性选择器：替代内联样式 */
        #text-section[data-active=""] { display: block; }
        #text-section:not([data-active]) { display: none; }
        
        #audio-section[data-active=""] { display: block; }
        #audio-section:not([data-active]) { display: none; }
        
        #text-audio-section[data-active=""] { display: block; }
        #text-audio-section:not([data-active]) { display: none; }
        
        #srt-btn-paste[data-active=""] { display: flex; }
        #srt-btn-paste:not([data-active]) { display: none; }
        
        #srt-btn-preview[data-active=""] { display: flex; }
        #srt-btn-preview:not([data-active]) { display: none; }
        
        /* CLS优化：音频播放器固定尺寸 */
        #audio-player[data-visible=""] { 
            visibility: visible; 
            height: 40px;
            min-height: 40px;
        }
        #audio-player:not([data-visible]) { 
            visibility: hidden; 
            height: 40px;
            min-height: 40px;
        }
        
        /* CLS优化：下载区域固定高度 */
        #srt-dl-area[data-visible=""] { 
            visibility: visible; 
            height: auto;
            min-height: 44px;
        }
        #srt-dl-area:not([data-visible]) { 
            visibility: hidden; 
            height: 0;
            overflow: hidden;
        }
        
        /* View Transitions 支持 */
        #text-section, #audio-section {
            view-transition-name: srt-content-section;
        }
        
        /* 标签按钮状态 - 同时支持类名和数据属性 */
        .tab-btn.active,
        .tab-btn[data-active=""] {
            background-color: #f0f0f5;
        }
        
        /* 降级方案：为不支持View Transitions的浏览器提供CSS过渡 */
        @supports not (view-transition-name: none) {
            #text-section, #audio-section {
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
        }
        
        /* 文本框样式 */
        #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-color 0.2s, transform 0.1s;
            will-change: transform;
            transform: translateZ(0);
        }
        .btn-srt:active { transform: scale(0.98) translateZ(0); }
        .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: clamp(16px, 2vw, 20px); /* 响应式间距 */
            margin-top: clamp(30px, 4vw, 40px); /* 响应式间距 */
        }
        
        /* 容器查询：根据容器宽度调整教程网格 */
        @container srt-container (max-width: 768px) {
            .tutorial-grid {
                grid-template-columns: 1fr;
            }
        }
        .t-card { 
            background: #fff; 
            padding: clamp(16px, 2vw, 20px); /* 响应式内边距 */
            border-radius: clamp(8px, 1vw, 10px); /* 响应式圆角 */
            border: 1px solid #eee;
            /* 性能优化：启用contain优化和硬件加速 */
            contain: layout style paint;
            will-change: transform;
            transform: translateZ(0);
        }
        .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;
        }

        /* 文字+音频模式样式 */
        .text-audio-section-hidden {
            display: none;
        }
        
        #srt-text-audio-input {
            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;
            height: 120px; 
            font-size: 1rem;
        }
        
        #srt-text-audio-input:focus {
            border-color: #0071e3;
        }

        /* 文字+音频标签按钮 */
        #tab-text-audio.active,
        #tab-text-audio[data-active=""] {
            background-color: #f0f0f5;
        }

        /* 文字+音频模式工具栏 */
        .text-audio-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .text-audio-tools {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .btn-import-txt {
            padding: 6px 12px !important;
            font-size: 0.85rem !important;
            min-width: auto !important;
            flex: none !important;
        }
        
        .char-count {
            font-size: 0.85rem;
            color: #666;
            padding: 4px 10px;
            background: #f5f5f5;
            border-radius: 4px;
            white-space: nowrap;
        }
        
        .char-count.warning {
            color: #e67e22;
            background: #fef5e7;
        }
        
        .char-count.error {
            color: #e74c3c;
            background: #fdf2f2;
        }
        
        /* 语言选择 */
        .language-select-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 12px 0;
        }
        
        .language-select-wrapper .srt-label {
            margin: 0;
            white-space: nowrap;
        }