/* ============================================================
   播放页 v2 · 设计稿 5a
   token 沿用 listening-home.css：奶油底 #FFF9F1、卡片 2px #F3E3C8 描边、
   主按钮 #FF9600 带下沿 #D97E00、焦点环 3px #4A7CF0。
   #FF9600 上的文字用深棕 #2A2318 而非白色（对比度 2.2:1 → 达标）。
   本文件在 audio.css 之后加载，负责覆盖旧版样式。
   ============================================================ */

.av2-body {
    background: #FFF9F1;
    color: #3D3428;
}

.av2-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4px 16px 96px;
}

/* 版本切换入口 */
.av2-switch-bar {
    display: flex;
    justify-content: flex-end;
    padding: 6px 2px 10px;
}

.av2-switch-link {
    font-size: 12.5px;
    font-weight: 700;
    color: #7A6A52;
    text-decoration: none;
}

.av2-switch-link:hover {
    color: #3D3428;
    text-decoration: none;
}

.av2-grid {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.av2-side {
    flex: none;
    width: 250px;
}

.av2-side-panels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.av2-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ==================== 卡片 ==================== */
.av2-card {
    background: #fff;
    border: 2px solid #F3E3C8;
    border-bottom: 5px solid #E4CB9E;
    border-radius: 20px;
}

.av2-card-pad {
    padding: 16px 16px 14px;
}

.av2-card-title {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    color: #7A6A52;
}

/* ==================== 开关 ==================== */
.av2-switch-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.av2-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.av2-switch-row .custom-control {
    flex: 1;
    min-width: 0;
}

.av2-key-hint {
    flex: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: #A08D6E;
}

/* Bootstrap custom-switch 重绘为奶油风格 */
.av2-body .custom-control-label {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #3D3428;
    cursor: pointer;
}

.av2-body .custom-switch .custom-control-label::before {
    width: 36px;
    height: 20px;
    top: 0.1rem;
    left: -2.7rem;
    border-radius: 99px;
    background: #EFE4CE;
    border: 2px solid #E4CB9E;
    transition: background 0.15s, border-color 0.15s;
}

.av2-body .custom-switch .custom-control-label::after {
    width: 14px;
    height: 14px;
    top: calc(0.1rem + 5px);
    left: calc(-2.7rem + 5px);
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

.av2-body .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #FF9600 !important;
    border-color: #D97E00 !important;
}

.av2-body .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(16px);
}

.av2-body .custom-switch .custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 3px solid #4A7CF0;
    outline-offset: 2px;
}

.av2-body .custom-control {
    padding-left: 2.9rem;
    min-height: 1.4rem;
}

/* ==================== 分段按钮 ==================== */
.av2-field {
    margin: 0 0 14px;
}

.av2-field-last {
    margin-bottom: 0;
}

.av2-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 7px;
}

.av2-field-label {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #6B5B44;
}

.av2-field-head .av2-field-label {
    margin: 0;
}

.av2-field-value {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: #3D3428;
}

.av2-seg {
    display: grid;
    gap: 5px;
    padding: 4px;
    background: #FFF3E2;
    border-radius: 12px;
}

.av2-seg-4 { grid-template-columns: repeat(4, 1fr); }
.av2-seg-5 { grid-template-columns: repeat(5, 1fr); }

.av2-seg-btn {
    height: 34px;
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #6B5B44;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.av2-seg-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.av2-seg-btn[aria-pressed="true"] {
    background: #FF9600;
    border-color: #FF9600;
    color: #2A2318;
    font-weight: 800;
}

/* 字体大小分段：用字号本身表达差异，选中态改用白底描边以免 4 档全橙 */
.av2-fs-s  { font-size: 11.5px; }
.av2-fs-m  { font-size: 13px; }
.av2-fs-l  { font-size: 15px; }
.av2-fs-xl { font-size: 17px; }

.av2-seg-4 .av2-seg-btn[aria-pressed="true"] {
    background: #fff;
    border-color: #E4CB9E;
    color: #3D3428;
}

.av2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.av2-chip {
    height: 32px;
    padding: 0 9px;
    background: #fff;
    border: 2px solid #E8D9BE;
    border-radius: 9px;
    color: #6B5B44;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.av2-chip:hover {
    background: #FFF9F1;
}

.av2-chip[aria-pressed="true"] {
    background: #3D3428;
    border-color: #3D3428;
    color: #fff;
    font-weight: 800;
}

/* 次级按钮（快捷键一览 / 更多设置） */
.av2-ghost-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    margin: 2px 0 0;
    background: #FFF3E2;
    border: 2px solid #F3E3C8;
    border-radius: 12px;
    color: #4A3E2C;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.av2-ghost-btn:hover {
    background: #FFEBD1;
    border-color: #E4CB9E;
    color: #4A3E2C;
    text-decoration: none;
}

.av2-more-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    background: #FFF3E2;
    border: 2px solid #F3E3C8;
    border-radius: 12px;
    color: #4A3E2C;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.av2-more-toggle svg {
    transition: transform 0.2s;
}

.av2-more-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ==================== 进度条 ==================== */
.av2-card-progress {
    padding: 20px 22px 18px;
    border-radius: 22px;
}

.av2-body #progress-container {
    width: 100%;
    position: relative;
    margin: 0 0 12px;
}

.av2-body .progress {
    height: 12px;
    background: #F3E3C8;
    border-radius: 99px;
    overflow: visible;
    cursor: pointer;
}

.av2-body #progress-bar {
    position: relative;
    height: 100%;
    background-color: #FF9600 !important;
    background-image: none !important;
    border-radius: 99px;
    animation: none !important;
    overflow: visible;
}

/* 进度把手 */
.av2-body #progress-bar::after {
    content: "";
    position: absolute;
    right: -9px;
    top: -3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #D97E00;
    border-radius: 50%;
}

.av2-body #mouse-over-show {
    bottom: 22px;
    padding: 5px 9px;
    background-color: #3D3428;
    border-radius: 8px;
    box-shadow: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

/* 时间 / 句序 / 开关信息行 */
.av2-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.av2-time-now {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #3D3428;
}

.av2-time-total {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 13px;
    line-height: 1;
    color: #A08D6E;
}

.av2-meta-sep {
    width: 2px;
    height: 14px;
    background: #F3E3C8;
}

.av2-count {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #6B5B44;
}

.av2-count b {
    color: #3D3428;
}

.av2-meta-spacer {
    flex: 1;
}

.av2-meta .custom-control-label {
    font-size: 12.5px;
}

/* ==================== 字幕区 ==================== */
.av2-card-caption {
    padding: 24px 26px 22px;
    border-radius: 22px;
}

.av2-caption-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
}

.av2-sentence-badge {
    padding: 5px 11px;
    background: #FFF3E2;
    border: 2px solid #F3E3C8;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    color: #7A6A52;
}

/* 用 ID 选择器提高优先级：audio.css 的 #reportError 会盖掉纯 class 规则 */
.av2-body #reportError.av2-report-link {
    position: static;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    color: #7A6A52;
    text-decoration: none;
}

.av2-body .av2-report-link:hover {
    color: #3D3428;
    text-decoration: none;
}

.av2-body #captions {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.65;
    color: #2A2318;
    text-wrap: pretty;
}

.av2-body #captionsTranslation {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #FFF9F1;
    border: 2px solid #F3E3C8;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #6B5B44;
    text-wrap: pretty;
}

.av2-body #loading-message {
    margin: 8px 0;
    font-size: 15px;
    font-weight: 700;
    color: #7A6A52;
}

.av2-body .clickable-word:hover {
    background-color: #FFEBD1;
}

/* ==================== 控制条 ==================== */
.av2-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 2px;
}

.av2-controls-spacer {
    flex: 1;
}

.av2-btn-round {
    flex: none;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #E5D3B3;
    border-bottom-width: 4px;
    border-radius: 50%;
    color: #4A3E2C;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.av2-btn-round:hover {
    background: #FFF3E2;
    border-color: #D9C7A6;
}

.av2-btn-round:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.av2-btn-play {
    flex: none;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF9600;
    border: none;
    border-bottom: 5px solid #D97E00;
    border-radius: 50%;
    color: #2A2318;
    cursor: pointer;
    transition: background 0.15s;
}

.av2-btn-play:hover {
    background: #FFA51F;
}

.av2-btn-play:active {
    transform: translateY(2px);
    border-bottom-width: 3px;
}

.av2-btn-favorite {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 20px;
    background: #fff;
    border: 2px solid #E5D3B3;
    border-bottom-width: 4px;
    border-radius: 16px;
    color: #4A3E2C;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.av2-btn-favorite:hover {
    background: #FFF3E2;
    border-color: #D9C7A6;
}

.av2-btn-favorite:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.av2-controls button:disabled,
.av2-body .av2-seg-btn:disabled,
.av2-body .av2-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 加载中：分段按钮同步禁用（audio.js 只会 disable 具名控件） */
.av2-body.loading .av2-seg,
.av2-body.loading .av2-chips,
.av2-body.loading .av2-ghost-btn {
    pointer-events: none;
    opacity: 0.6;
}

/* 焦点环：统一 3px #4A7CF0 */
.av2-body button:focus-visible,
.av2-body a:focus-visible,
.av2-body textarea:focus-visible {
    outline: 3px solid #4A7CF0 !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ==================== 听写 / 收藏列表 ==================== */
.av2-body #dictation-area textarea {
    padding: 12px 14px;
    background: #FFFCF6;
    border: 2px solid #E5D3B3;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #3D3428;
    resize: none;
    box-shadow: none;
}

.av2-body #dictation-area textarea:focus {
    border-color: #D9C7A6;
}

.av2-body #favoriteListShow {
    display: none;
}

.av2-body #needMoreSentence {
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    gap: 8px;
}

.av2-body #needMoreSentence .list-group-item {
    margin: 0 0 8px;
    padding: 10px 12px;
    background: #FFF9F1;
    border: 2px solid #F3E3C8;
    border-radius: 13px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #4A3E2C;
}

/* ==================== 弹窗 ==================== */
.av2-modal {
    background: #FFF9F1;
    border: 2px solid #EFDBB8;
    border-bottom: 5px solid #E4CB9E;
    border-radius: 24px;
}

.av2-modal .modal-header,
.av2-modal .modal-footer {
    border-color: #F3E3C8;
}

.av2-modal .modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #3D3428;
}

.av2-modal .form-check-label {
    font-size: 13.5px;
    color: #4A3E2C;
}

.av2-modal .spinner-border {
    color: #FF9600;
}

.av2-btn-primary {
    height: 42px;
    padding: 0 20px;
    background: #FF9600;
    border: none;
    border-bottom: 4px solid #D97E00;
    border-radius: 14px;
    color: #2A2318;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.av2-btn-primary:hover {
    background: #FFA51F;
}

.av2-btn-secondary {
    height: 42px;
    padding: 0 20px;
    background: #fff;
    border: 2px solid #E8D9BE;
    border-radius: 14px;
    color: #6B5B44;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.av2-btn-secondary:hover {
    background: #FFF9F1;
}

/* 快捷键弹窗：奶油底 + 深棕键帽（替换旧版蓝色渐变） */
.av2-body .shortcut-hint-overlay {
    background: rgba(61, 52, 40, 0.42);
}

.av2-body .shortcut-hint-content {
    max-width: 560px;
    padding: 24px 26px 20px;
    background: #FFF9F1;
    border: 2px solid #EFDBB8;
    border-bottom: 5px solid #E4CB9E;
    border-radius: 24px;
    box-shadow: none;
    color: #3D3428;
    text-align: left;
}

.av2-body .shortcut-hint-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
}

.av2-body .shortcut-hint-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #3D3428;
}

.av2-body .shortcut-hint-close {
    position: static;
    width: 32px;
    height: 32px;
    background: #FFF3E2;
    border: 2px solid #F3E3C8;
    border-radius: 50%;
    color: #6B5B44;
    font-size: 15px;
    font-weight: 800;
}

.av2-body .shortcut-hint-close:hover {
    background: #FFEBD1;
}

.av2-body .shortcut-grid {
    gap: 8px;
    margin-bottom: 16px;
}

.av2-body .shortcut-grid-item {
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 2px solid #F3E3C8;
    border-radius: 12px;
}

.av2-body .shortcut-key {
    min-width: 40px;
    height: 28px;
    padding: 0 8px;
    background: #3D3428;
    border-radius: 7px;
    box-shadow: none;
    color: #fff;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 800;
}

.av2-body .shortcut-key-group .shortcut-key {
    min-width: 26px;
    width: 26px;
    padding: 0;
}

.av2-body .shortcut-desc {
    font-size: 12.5px;
    font-weight: 700;
    color: #4A3E2C;
}

.av2-body .dont-show-again {
    justify-content: flex-start;
    margin: 0;
    color: #6B5B44;
    font-size: 12px;
}

.av2-body .dont-show-again input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FF9600;
}

/* 生词释义弹窗 */
.av2-body .word-popover {
    background: #FFF9F1;
    border: 2px solid #EFDBB8;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(61, 52, 40, 0.18);
    color: #4A3E2C;
}

.av2-body .popover-word {
    font-size: 17px;
    font-weight: 800;
    color: #3D3428;
}

.av2-body .popover-add-btn {
    width: 100%;
    height: 40px;
    background: #FF9600;
    border: none;
    border-bottom: 4px solid #D97E00;
    border-radius: 12px;
    color: #2A2318;
    font-size: 13px;
    font-weight: 800;
}

.av2-body .popover-add-btn:hover {
    background: #FFA51F;
}

.av2-body .popover-add-btn:disabled {
    background: #EFE4CE;
    border-bottom-color: #E4CB9E;
    color: #7A6A52;
}

.av2-body .word-popover-action {
    border-top-color: #F3E3C8;
}

/* 页脚融合奶油底（footer 用内联 #f8f9fa，需 !important 覆盖） */
.av2-body #footer {
    background-color: #FFF9F1 !important;
}

/* ==================== 未兑换锁定态 ==================== */
.av2-body.purchase-required .av2-controls button,
.av2-body.purchase-required .av2-seg,
.av2-body.purchase-required .av2-chips,
.av2-body.purchase-required .av2-ghost-btn {
    pointer-events: none;
    opacity: 0.5;
}

.av2-body #subtitle-lock-hint {
    color: #6B5B44;
}

.av2-body #subtitle-lock-hint .btn-unlock {
    background: #FF9600;
    border: none;
    border-bottom: 4px solid #D97E00;
    border-radius: 14px;
    padding: 10px 24px;
    color: #2A2318;
    font-weight: 800;
}

/* ==================== 响应式 ==================== */
@media (max-width: 991.98px) {
    .av2-side {
        width: 220px;
    }
}

@media (max-width: 767.98px) {
    .av2-wrap {
        padding: 4px 12px 96px;
    }

    /* 单列：字幕在最上，其次播放控制，设置收到最后 */
    .av2-grid {
        flex-direction: column;
        gap: 12px;
    }

    .av2-side,
    .av2-main {
        width: 100%;
    }

    .av2-side {
        order: 2;
    }

    .av2-main {
        order: 1;
        gap: 12px;
    }

    .av2-card-caption {
        order: 1;
        padding: 16px 18px 14px;
    }

    .av2-card-progress {
        order: 2;
    }

    .av2-controls {
        order: 3;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    #dictation-area {
        order: 4;
    }

    #favoriteListShow {
        order: 5;
    }

    .av2-body #captions {
        font-size: 1.25rem;
    }

    .av2-body #captionsTranslation {
        margin-top: 14px;
        padding: 12px 14px;
        font-size: 0.875rem;
    }

    .av2-controls-spacer {
        display: none;
    }

    .av2-btn-favorite {
        width: 100%;
        justify-content: center;
        height: 48px;
        border-radius: 14px;
    }

    .av2-more-toggle {
        display: flex;
    }

    /* 移动端：左栏默认折叠，点「更多设置」展开 */
    .av2-side-panels {
        display: none;
        margin-top: 12px;
    }

    .av2-side-panels.av2-open {
        display: flex;
    }

    .av2-meta {
        gap: 8px 12px;
    }

    .av2-meta-sep,
    .av2-meta-spacer {
        display: none;
    }

    /* 手机无键盘：隐藏快捷键提示与按键提示 */
    .av2-body .shortcut-hint-overlay {
        display: none !important;
    }

    .av2-key-hint {
        display: none;
    }

    .av2-body #dictation-area,
    .av2-body #favoriteListShow {
        display: none !important;
    }
}