/* === 录屏录音工具 - 重构版样式 === */
.sr-container{max-width:820px;margin:0 auto;padding:20px;}

/* 头部 */
.sr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:18px 22px;background:linear-gradient(135deg,#e8f3ff 0%,#d0e8ff 30%,#b8dbff 50%,#d0e8ff 70%,#e8f3ff 100%);border-radius:12px;color:#222;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.sr-header-left{display:flex;align-items:center;gap:14px;}
.sr-header-icon{display:flex;align-items:center;justify-content:center;}
.sr-header-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#1677ff,#0958d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sr-header-icon svg{display:block;}
.sr-header-title{font-size:20px;font-weight:700;}
.sr-header-sub{font-size:12px;color:#666;margin-top:2px;}
.sr-help-btn{background:rgba(255,255,255,.7);color:#333;border:1px solid rgba(0,0,0,.15);padding:8px 18px;border-radius:20px;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.sr-help-btn:hover{background:rgba(255,255,255,.95);}

/* 工具本体 */
.sr-tool-body{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:18px;margin-bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.04);}

/* 快捷预设卡片 */
.sr-presets{display:flex;gap:12px;margin-bottom:16px;}
.sr-preset-card{flex:1;border:2px solid #e8e8e8;border-radius:10px;padding:16px 12px;text-align:center;cursor:pointer;transition:all .2s;background:#fff;user-select:none;}
.sr-preset-card:hover{border-color:#1677ff;background:#f0f7ff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(22,119,255,.15);}
.sr-preset-card.active{border-color:#1677ff;background:#e6f4ff;box-shadow:0 2px 8px rgba(22,119,255,.2);}
.sr-preset-icon{font-size:26px;margin-bottom:6px;}
.sr-preset-label{font-size:14px;font-weight:600;color:#333;}
.sr-preset-card.active .sr-preset-label{color:#1677ff;}
.sr-preset-sub{font-size:11px;color:#999;margin-top:3px;}

/* 高级设置折叠 */
.sr-advanced-toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;color:#1677ff;font-size:13px;cursor:pointer;margin-bottom:0;user-select:none;transition:color .2s;}
.sr-advanced-toggle:hover{color:#4096ff;}
.sr-arrow{transition:transform .3s;font-size:11px;}
.sr-arrow.open{transform:rotate(180deg);}
.sr-advanced-panel{max-height:0;overflow:hidden;transition:max-height .35s ease,margin .35s ease;margin-bottom:0;}
.sr-advanced-panel.show{max-height:2000px;margin-bottom:16px;}

/* 录制来源复选框 */
.sr-source-select{background:#fafafa;border:1px solid #f0f0f0;border-radius:8px;padding:14px 16px;margin-bottom:12px;}
.sr-source-title{font-size:13px;font-weight:600;color:#333;margin-bottom:10px;}
.sr-source-options{display:flex;flex-wrap:wrap;gap:10px;}
.sr-source-check{display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #d9d9d9;border-radius:8px;cursor:pointer;background:#fff;transition:all .2s;user-select:none;font-size:13px;}
.sr-source-check:hover{border-color:#1677ff;}
.sr-source-check input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#1677ff;}
.sr-source-check:has(input:checked){border-color:#1677ff;background:#e6f4ff;}
.sr-source-icon{font-size:16px;}
.sr-source-label{font-weight:500;color:#333;}
.sr-source-hint{font-size:12px;color:#888;margin-top:10px;line-height:1.5;padding:6px 10px;background:#fff;border-radius:4px;}
.sr-source-hint.error{color:#ff4d4f;background:#fff2f0;}

/* 设置区 */
.sr-settings-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px;}
.sr-settings-group{flex:1;min-width:160px;}
.sr-settings-group label{display:block;font-size:12px;color:#666;margin-bottom:5px;font-weight:500;}
.sr-settings-group select,.sr-settings-group input{width:100%;padding:7px 10px;border:1px solid #d9d9d9;border-radius:6px;font-size:13px;background:#fff;}
.sr-settings-group select:focus{outline:none;border-color:#1677ff;box-shadow:0 0 0 2px rgba(22,119,255,.1);}
.sr-hint{font-size:12px;color:#888;line-height:1.6;padding:8px 12px;background:#fff;border-radius:4px;border-left:3px solid #1677ff;margin-top:8px;}
.sr-format-hint{font-size:12px;color:#52c41a;padding:6px 0;line-height:1.5;}
.sr-format-hint.warning{color:#faad14;}
.sr-format-hint.error{color:#ff4d4f;}

/* 录制控制区 */
.sr-control-area{margin-bottom:16px;}
.sr-big-start{width:100%;padding:16px;background:linear-gradient(135deg,#1677ff,#0958d9);color:#fff;border:none;border-radius:10px;font-size:18px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(22,119,255,.3);letter-spacing:2px;}
.sr-big-start:hover{background:linear-gradient(135deg,#4096ff,#1677ff);transform:translateY(-1px);box-shadow:0 6px 16px rgba(22,119,255,.4);}
.sr-big-start:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* 录制状态条 */
.sr-recording-status{display:flex;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(135deg,#fff5f5,#fff);border:1px solid #ffccc7;border-radius:10px;margin:14px 0;box-shadow:0 2px 8px rgba(255,77,79,.1);}
.sr-rec-label{font-size:14px;font-weight:600;color:#ff4d4f;}
.sr-rec-timer{font-size:16px;font-weight:700;color:#333;font-family:Consolas,Monaco,monospace;}
.sr-vu-meter{margin-left:auto;display:flex;align-items:center;}
.sr-vu-meter canvas{display:block;}
.sr-rec-dot{width:10px;height:10px;background:#ff4d4f;border-radius:50%;animation:sr-pulse 1s infinite;flex-shrink:0;}
@keyframes sr-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* 录制操作按钮 */
.sr-rec-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:14px;}

/* 按钮 */
.sr-btn{padding:10px 24px;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:500;}
.sr-btn:disabled{opacity:.5;cursor:not-allowed;}
.sr-btn-lg{padding:12px 32px;font-size:15px;}
.sr-btn-sm{padding:6px 12px;font-size:12px;}
.sr-btn-primary{background:#1677ff;color:#fff;}
.sr-btn-primary:hover:not(:disabled){background:#4096ff;}
.sr-btn-danger{background:#ff4d4f;color:#fff;}
.sr-btn-danger:hover:not(:disabled){background:#ff7875;}
.sr-btn-default{background:#fff;color:#333;border:1px solid #d9d9d9;}
.sr-btn-default:hover:not(:disabled){border-color:#1677ff;color:#1677ff;}

/* 预览 */
.sr-preview-wrap{position:relative;background:#000;border-radius:10px;overflow:hidden;margin-bottom:14px;max-height:420px;box-shadow:0 2px 12px rgba(0,0,0,.15);}
.sr-preview-wrap video{width:100%;display:block;max-height:420px;object-fit:contain;background:#000;}

/* 结果列表 */
.sr-result-wrap{margin-bottom:16px;}
.sr-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.sr-result-title{font-size:15px;font-weight:600;color:#333;}
.sr-result-actions{display:flex;gap:8px;}
.sr-result-list{display:flex;flex-direction:column;gap:12px;}
.sr-result-item{background:#fff;border:1px solid #f0f0f0;border-radius:10px;padding:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;box-shadow:0 1px 4px rgba(0,0,0,.04);}
.sr-result-thumb{width:160px;height:90px;background:#000;border-radius:6px;overflow:hidden;flex-shrink:0;}
.sr-result-thumb video,.sr-result-thumb audio{width:100%;height:100%;object-fit:contain;}
.sr-result-info{flex:1;min-width:200px;}
.sr-result-name{font-size:14px;font-weight:600;color:#333;margin-bottom:4px;word-break:break-all;}
.sr-result-meta{font-size:12px;color:#999;}

/* 日志区 */
.sr-log-wrap{background:var(--bg-code,#f5f5f5);border-radius:10px;overflow:hidden;margin-bottom:0;}
.sr-log-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#2d2d2d;color:#ddd;font-size:13px;}
.sr-log-actions{display:flex;gap:6px;}
.sr-log-actions .sr-btn{padding:4px 10px;font-size:12px;background:#3a3a3a;color:#ccc;border:1px solid #555;}
.sr-log-actions .sr-btn:hover{background:#4a4a4a;color:#fff;}
.sr-log-content{padding:12px 14px;max-height:260px;overflow-y:auto;font-family:Consolas,Monaco,monospace;font-size:12px;color:#ccc;line-height:1.7;}
.sr-log-content div{word-break:break-all;}

/* === 大Tab（与更多工具同级） === */
.sr-bigtab-section{margin-top:20px;}
.sr-bigtab-bar{display:flex;border-bottom:2px solid #e8e8e8;gap:0;}
.sr-bigtab{padding:12px 28px;font-size:15px;font-weight:600;color:#666;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;margin-bottom:-2px;user-select:none;position:relative;}
.sr-bigtab:hover{color:#1677ff;}
.sr-bigtab.active{color:#1677ff;border-bottom-color:#1677ff;}
.sr-bigtab-body{padding:20px 0;}
.sr-bigtab-content{display:none;}
.sr-bigtab-content.active{display:block;}

/* 教程内容 - 14px字号 */
.sr-tutorial-section{padding:14px 0;border-bottom:1px solid #f5f5f5;}
.sr-tutorial-section:last-child{border-bottom:none;}
.sr-tutorial-section h4{font-size:16px;color:#1677ff;margin-bottom:14px;font-weight:700;}
.sr-step{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start;font-size:14px;color:#555;line-height:1.7;}
.sr-step-num{flex-shrink:0;width:26px;height:26px;background:#1677ff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.sr-tutorial-table{width:100%;border-collapse:collapse;font-size:14px;}
.sr-tutorial-table th,.sr-tutorial-table td{border:1px solid #eee;padding:10px 12px;text-align:left;line-height:1.6;}
.sr-tutorial-table th{background:#fafafa;font-weight:600;color:#333;}
.sr-faq{margin-bottom:14px;font-size:14px;color:#555;line-height:1.8;}
.sr-faq strong{color:#333;}

/* 特色网格 */
.sr-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.sr-feature-item{display:flex;gap:10px;padding:14px;background:#fafafa;border-radius:8px;border:1px solid #f0f0f0;}
.sr-feature-icon{font-size:24px;flex-shrink:0;}
.sr-feature-item strong{display:block;font-size:14px;color:#333;margin-bottom:4px;}
.sr-feature-item p{font-size:13px;color:#888;line-height:1.5;margin:0;}

/* 响应式 */
@media(max-width:640px){
  .sr-container{padding:12px;}
  .sr-header{flex-direction:column;gap:12px;text-align:center;}
  .sr-header-left{flex-direction:column;text-align:center;}
  .sr-presets{flex-direction:column;}
  .sr-preset-card{padding:12px;}
  .sr-settings-group{min-width:100%;}
  .sr-result-item{flex-direction:column;align-items:stretch;}
  .sr-result-thumb{width:100%;height:180px;}
  .sr-btn-lg{padding:10px 24px;font-size:14px;}
  .sr-big-start{padding:14px;font-size:16px;}
  .sr-recording-status{flex-wrap:wrap;}
  .sr-vu-meter{margin-left:0;width:100%;justify-content:center;}
  .sr-bigtab{padding:10px 16px;font-size:14px;}
  .sr-feature-grid{grid-template-columns:1fr;}
  .sr-tool-body{padding:14px;}
}

/* === 工具介绍面板 - 悬浮卡片样式（方案6） === */
.i2s-info-panel .sr-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.i2s-info-panel .sr-info-card{background:#fff;border:1px solid #f0f0f0;border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:all .25s ease;}
.i2s-info-panel .sr-info-card:hover{box-shadow:0 6px 16px rgba(22,119,255,.12);border-color:#d6e8ff;transform:translateY(-2px);}
.i2s-info-panel .sr-info-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.i2s-info-panel .sr-info-icon{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#1677ff,#0958d9);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;}
.i2s-info-panel .sr-info-title{margin:0;font-size:15px;font-weight:700;color:#333;}
.i2s-info-panel .sr-info-desc{margin:0;font-size:14px;color:#666;line-height:1.8;}
.i2s-info-panel .sr-info-desc strong{color:#555;font-weight:600;}



/* 使用说明 - 步骤美化 */
.i2s-info-panel .sr-step{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start;}
.i2s-info-panel .sr-step:last-child{margin-bottom:0;}
.i2s-info-panel .sr-step-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#1677ff,#0958d9);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.i2s-info-panel .sr-step-text{flex:1;}
.i2s-info-panel .sr-step-text strong{color:#1677ff;font-weight:700;}
.i2s-info-panel .sr-step-text p{margin:4px 0 0;color:#666;font-size:14px;line-height:1.8;}

/* 使用说明 - 场景列表 */
.i2s-info-panel .sr-scene{padding:8px 0;border-bottom:1px solid #f5f5f5;}
.i2s-info-panel .sr-scene:last-child{border-bottom:none;}
.i2s-info-panel .sr-scene strong{color:#333;font-weight:700;}
.i2s-info-panel .sr-scene span{color:#666;}

/* 使用说明 - FAQ */
.i2s-info-panel .sr-faq-item{margin-bottom:12px;}
.i2s-info-panel .sr-faq-item:last-child{margin-bottom:0;}
.i2s-info-panel .sr-faq-q{font-weight:700;color:#333;margin-bottom:4px;}
.i2s-info-panel .sr-faq-q::before{content:"Q：";color:#1677ff;}
.i2s-info-panel .sr-faq-a{color:#666;font-size:14px;line-height:1.8;padding-left:24px;}
.i2s-info-panel .sr-faq-a::before{content:"A：";color:#52c41a;font-weight:700;}

/* 响应式：小屏单列 */
@media (max-width:600px){
  .i2s-info-panel .sr-info-grid{grid-template-columns:1fr;gap:10px;}
  .i2s-info-panel .sr-info-card{padding:12px;}
}

/* ============================================================
   夜间模式适配 - 所有白色背景改为深色，文字改为浅色
============================================================ */
body.dark .sr-tool-body{background:var(--card,#1e293b);border-color:var(--border,#334155);}
body.dark .sr-preset-card{background:var(--bg-2,#1a2332);border-color:var(--border,#334155);}
body.dark .sr-preset-card:hover{border-color:#1677ff;background:var(--blue-soft,#1e3a5f);}
body.dark .sr-preset-card.active{background:#0d1f33;border-color:#1677ff;}
body.dark .sr-preset-label{color:var(--text-1,#f1f5f9);}
body.dark .sr-preset-sub{color:var(--text-3,#64748b);}
body.dark .sr-source-check{background:var(--bg-2,#1a2332);border-color:var(--border-2,#475569);color:var(--text-1,#f1f5f9);}
body.dark .sr-source-check.active{background:#0d1f33;border-color:#1677ff;color:#fff;}
body.dark .sr-source-hint{background:var(--bg-2,#1a2332);color:var(--text-2,#94a3b8);}
body.dark .sr-source-hint.error{background:#3a1a1a;color:#ff7875;}
body.dark .sr-settings-group label{color:var(--text-1,#f1f5f9);}
body.dark .sr-settings-group select,body.dark .sr-settings-group input{background:var(--bg-2,#1a2332);border-color:var(--border-2,#475569);color:var(--text-1,#f1f5f9);}
body.dark .sr-hint{background:var(--bg-2,#1a2332);color:var(--text-2,#94a3b8);border-left-color:#1677ff;}
body.dark .sr-btn-default{background:var(--bg-2,#1a2332);color:var(--text-1,#f1f5f9);border-color:var(--border-2,#475569);}
body.dark .sr-btn-default:hover{background:var(--border,#334155);border-color:var(--text-2,#94a3b8);}
body.dark .sr-result-item{background:var(--bg-2,#1a2332);border-color:var(--border,#334155);}
body.dark .sr-result-name{color:var(--text-1,#f1f5f9);}
body.dark .sr-result-info{color:var(--text-3,#64748b);}
body.dark .sr-log-box{background:var(--card,#1e293b);border-color:var(--border,#334155);}
body.dark .sr-log-content{color:var(--text-2,#94a3b8);}
body.dark .sr-section-title{color:var(--text-1,#f1f5f9);}
body.dark .i2s-info-panel{background:var(--card,#1e293b);border-color:var(--border,#334155);}
body.dark .i2s-info-panel .panel-head{border-bottom-color:var(--border,#334155);}
body.dark .i2s-info-panel .layui-tab-title li{color:var(--text-2,#94a3b8);}
body.dark .i2s-info-panel .layui-tab-title li.layui-this{color:#69b1ff;}
body.dark .i2s-info-panel .sr-info-card{background:var(--bg-2,#1a2332);border-color:var(--border,#334155);}
body.dark .i2s-info-panel .sr-info-card:hover{box-shadow:0 6px 16px rgba(0,0,0,.3);border-color:var(--text-2,#94a3b8);}
body.dark .i2s-info-panel .sr-info-title{color:var(--text-1,#f1f5f9);}
body.dark .i2s-info-panel .sr-info-desc{color:var(--text-2,#94a3b8);}
body.dark .i2s-info-panel .sr-faq-q{color:var(--text-1,#f1f5f9);}
body.dark .i2s-info-panel .sr-faq-a{color:var(--text-2,#94a3b8);}
body.dark .sr-waveform-box{background:var(--card,#1e293b);border-color:var(--border,#334155);}
body.dark .sr-status-text{color:var(--text-1,#f1f5f9);}
body.dark .sr-timer{color:#69b1ff;}
body.dark .sr-custom-toggle{color:#69b1ff;}
body.dark .sr-custom-panel{background:var(--card,#1e293b);border-color:var(--border,#334155);}

/* === 夜间模式补漏：头部横幅 / 录制来源面板 / 录制状态条等浅色块 === */
body.dark .sr-header{background:linear-gradient(135deg,#16233a 0%,#1a2a44 50%,#16233a 100%);border:1px solid var(--border,#334155);box-shadow:0 2px 8px rgba(0,0,0,.3);color:var(--text-1,#f1f5f9);}
body.dark .sr-header-sub{color:var(--text-3,#64748b);}
body.dark .sr-help-btn{background:rgba(255,255,255,.08);color:var(--text-2,#94a3b8);border:1px solid var(--border-2,#475569);}
body.dark .sr-help-btn:hover{background:rgba(255,255,255,.14);color:var(--text-1,#f1f5f9);}
body.dark .sr-source-select{background:var(--bg-2,#1a2332);border:1px solid var(--border,#334155);}
body.dark .sr-source-title{color:var(--text-1,#f1f5f9);}
body.dark .sr-source-check:has(input:checked){background:#0d1f33;border-color:#1677ff;color:#fff;}
body.dark .sr-source-label{color:var(--text-1,#f1f5f9);}
body.dark .sr-recording-status{background:linear-gradient(135deg,#2a1a1f,#1e293b);border:1px solid #5a2a2e;box-shadow:0 2px 8px rgba(255,77,79,.08);}
body.dark .sr-rec-timer{color:var(--text-1,#f1f5f9);}
body.dark .sr-feature-item{background:var(--bg-2,#1a2332);border-color:var(--border,#334155);}
body.dark .sr-feature-item strong{color:var(--text-1,#f1f5f9);}
body.dark .sr-feature-item p{color:var(--text-3,#64748b);}
body.dark .sr-tutorial-section{border-bottom-color:var(--border,#334155);}
body.dark .sr-tutorial-table th,body.dark .sr-tutorial-table td{border-color:var(--border,#334155);}
body.dark .sr-tutorial-table th{background:var(--bg-2,#1a2332);color:var(--text-1,#f1f5f9);}
body.dark .sr-tutorial-table td{color:var(--text-2,#94a3b8);}
body.dark .sr-step{color:var(--text-2,#94a3b8);}
body.dark .sr-faq{color:var(--text-2,#94a3b8);}
body.dark .sr-faq strong{color:var(--text-1,#f1f5f9);}
body.dark .sr-bigtab-bar{border-bottom-color:var(--border,#334155);}
body.dark .sr-bigtab{color:var(--text-2,#94a3b8);}
body.dark .sr-scene{border-bottom-color:var(--border,#334155);}
body.dark .sr-scene strong{color:var(--text-1,#f1f5f9);}
body.dark .sr-scene span{color:var(--text-2,#94a3b8);}
body.dark .sr-log-wrap{background:var(--card,#1e293b);}
body.dark .sr-settings-group label{color:var(--text-2,#94a3b8);}