/* ==================================================================
   影片會話練習（前台）
   ------------------------------------------------------------------
   class 前綴一律為 vd-，色彩一律取自 style.css 的 --site-* 變數，
   圓角沿用專案規範：卡片 10px、按鈕與輸入框 7px、標籤與 chips 999px。
================================================================== */

.video-page {
    background: var(--site-primary-soft-2);
    padding: 32px 0 64px;
}

.vd-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------------
   難度色（與教學文章的等級色一致，屬帶語意的狀態色，不收斂為主色）
   article.css 也有同一組變數，但本頁未載入 article.css，故在此自行宣告；
   兩處的色碼必須一致，調整等級色時兩邊都要改。
------------------------------------------------------------------ */
.video-page {
    --level-4: #2f6fed;
    --level-3: #22a06b;
    --level-2: #8b5e34;
    --level-1: #e8833a;
}

.vd-chip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--site-primary);
}

.vd-level-1 { background: var(--level-1); }
.vd-level-2 { background: var(--level-2); }
.vd-level-3 { background: var(--level-3); }
.vd-level-4 { background: var(--level-4); }

/* ==================================================================
   列表頁（版面與探索文章一致：左為主視覺與影片列表、右為篩選條件與最新影片）
================================================================== */
.vd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 306px;
    align-items: start;
    gap: 22px;
}

.vd-main-col {
    min-width: 0;
}

/* 主視覺：標題、說明與搜尋 */
.vd-hero {
    background: linear-gradient(120deg, var(--site-primary), var(--site-primary-light));
    color: #fff;
    border-radius: 10px;
    padding: 40px 36px;
    margin-bottom: 30px;
}

.vd-hero-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 8px;
}

.vd-hero-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px;
}

.vd-hero-desc {
    margin: 0 0 22px;
    max-width: 640px;
    opacity: 0.92;
    line-height: 1.8;
}

.vd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 7px;
    padding: 8px 8px 8px 16px;
    max-width: 560px;
}

.vd-search i {
    color: var(--site-primary);
}

.vd-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    font-size: 15px;
    color: #333;
    background: transparent;
}

.vd-search button {
    border: 0;
    border-radius: 7px;
    padding: 8px 20px;
    background: var(--site-primary);
    color: #fff;
    font-size: 15px;
    transition: background-color 0.2s;
}

.vd-search button:hover {
    background: var(--site-primary-dark);
}

/* 列表標題與排序 */
.vd-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.vd-list-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #222;
}

.vd-list-total {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.vd-sort select {
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--site-primary-line);
    border-radius: 7px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M8 11.2 3.6 6.8l1-1L8 9.2l3.4-3.4 1 1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    color: #333;
    font-size: 15px;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.vd-sort select:hover,
.vd-sort select:focus {
    border-color: var(--site-primary);
    outline: none;
}

.vd-sort-submit {
    margin-left: 8px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: var(--site-primary);
    color: #fff;
    font-size: 15px;
}

/* 影片卡片 */
.vd-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.vd-card {
    background: #fff;
    border: 1px solid var(--site-primary-line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s;
}

.vd-card:hover {
    border-color: var(--site-primary);
    transform: translateY(-2px);
}

.vd-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}

.vd-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vd-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.2s;
}

.vd-card:hover .vd-card-play {
    opacity: 1;
}

.vd-card-time {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 12px;
}

.vd-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    flex: 1;
}

.vd-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}

.vd-card-title a {
    color: #1c1c1c;
    text-decoration: none;
}

.vd-card-title a:hover {
    color: var(--site-primary);
}

.vd-card-desc {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}

.vd-card-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

.vd-card-level,
.vd-card-views {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #555;
}

.vd-card-views i {
    margin-right: 5px;
    color: #94a3b8;
}

.vd-card-btn {
    margin-left: auto;
    padding: 6px 16px;
    border-radius: 7px;
    background: var(--site-primary);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.vd-card-btn:hover {
    background: var(--site-primary-dark);
    color: #fff;
}

.vd-pagination {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Google 廣告：列表頁在影片列表與頁碼之後、內頁在重點詞彙之前
   （共用樣式在 style.css 的「Google 廣告」區塊，此處只調整間距） */
.vd-ad.is-filled,
.vd-ad.site-ad-preview {
    margin-top: 24px;
}

/* 無資料 */
.vd-empty {
    background: #fff;
    border: 1px dashed var(--site-primary-line);
    border-radius: 10px;
    padding: 56px 20px;
    text-align: center;
    color: #777;
}

.vd-empty i {
    font-size: 34px;
    color: var(--site-primary-accent);
    margin-bottom: 12px;
}

.vd-empty p {
    margin: 0;
}

.vd-empty-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 9px 20px;
    border-radius: 7px;
    background: var(--site-primary);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.vd-empty-btn:hover {
    background: var(--site-primary-dark);
    color: #fff;
}

/* ------------------------------------------------------------------
   右側欄：篩選條件與最新影片（桌機為 sticky）
------------------------------------------------------------------ */
.vd-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 86px;
}

.vd-side-block {
    padding: 18px 18px 20px;
    border: 1px solid var(--site-primary-line);
    border-radius: 10px;
    background: #fff;
}

.vd-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.vd-side-title {
    margin: 0;
    color: #222;
    font-size: 18px;
    font-weight: 700;
}

.vd-side-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--site-primary);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}

.vd-side-more:hover {
    color: var(--site-primary-dark);
}

.vd-filter-group + .vd-filter-group {
    margin-top: 18px;
}

.vd-filter-label {
    margin-bottom: 10px;
    color: #333;
    font-size: 15px;
    font-weight: 700;
}

/* 顯示範圍與影片長度：兩欄按鈕 */
.vd-chip-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.vd-filter-chip {
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--site-primary-line);
    border-radius: 6px;
    background: var(--site-primary-soft-2);
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.vd-filter-chip:hover {
    border-color: var(--site-primary);
    color: var(--site-primary);
}

.vd-filter-chip.is-active {
    border-color: var(--site-primary);
    background: var(--site-primary);
    color: #fff;
    font-weight: 600;
}

/* 難度等級：2×2 方塊 */
.vd-level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vd-level-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 6px;
    border: 1px solid var(--site-primary-line);
    border-radius: 7px;
    background: var(--site-primary-soft-2);
    color: #333;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.vd-level-box:hover {
    border-color: var(--site-primary);
    color: var(--site-primary);
}

.vd-level-box.is-active {
    border-color: var(--site-primary);
    background: var(--site-primary-soft);
    color: var(--site-primary);
}

.vd-level-box-name {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
}

.vd-level-box-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 13px;
}

.vd-level-box-count {
    padding: 0 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--site-primary-line);
    font-size: 12px;
    line-height: 18px;
}

.vd-level-box:hover .vd-level-box-note,
.vd-level-box.is-active .vd-level-box-note {
    color: inherit;
}

/* 最新影片 */
.vd-latest-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vd-latest-item {
    display: flex;
    gap: 12px;
}

.vd-latest-item + .vd-latest-item {
    padding-top: 14px;
    border-top: 1px solid var(--site-primary-line);
}

.vd-latest-cover {
    position: relative;
    flex: none;
    width: 104px;
    aspect-ratio: 16 / 9;
    border-radius: 7px;
    overflow: hidden;
    background: #000;
}

.vd-latest-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vd-latest-time {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 11px;
}

.vd-latest-body {
    flex: 1;
    min-width: 0;
}

.vd-latest-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 12px;
}

.vd-latest-meta span {
    display: inline-flex;
    align-items: center;
}

.vd-latest-meta i {
    margin-right: 4px;
    color: #94a3b8;
}

.vd-latest-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    color: #1c1c1c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s;
}

.vd-latest-title:hover {
    color: var(--site-primary);
}

/* ==================================================================
   內頁（左影片、右對照稿）
================================================================== */
.vd-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #777;
    margin-bottom: 18px;
}

.vd-crumb a {
    color: var(--site-primary);
    text-decoration: none;
}

.vd-crumb a:hover {
    text-decoration: underline;
}

.vd-crumb i {
    font-size: 10px;
    opacity: 0.6;
}

.vd-crumb-now {
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

.vd-main {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* 影片欄於桌機固定於視窗上方，捲動右側對照稿時影片一直看得到 */
.vd-left {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 播放器與控制列；手機版時由它接手固定於視窗頂端（見最下方的響應式區塊） */
.vd-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vd-player-box {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

/*
   YouTube IFrame API 會「整個替換掉」#vd-player 這個 div：
   新的 <iframe> 只保留 id，class 不會跟著過來，且會被寫上 640×360 的寬高屬性。
   故此處一律以 id 與容器內的 iframe 選取，不能只靠 .vd-player 這個 class。
*/
.vd-player,
#vd-player,
.vd-player-box iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.vd-player-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
}

/* 播放控制 */
.vd-controls {
    background: #fff;
    border: 1px solid var(--site-primary-line);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vd-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vd-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--site-primary-line);
    border-radius: 7px;
    background: #fff;
    color: var(--site-primary);
    font-size: 14px;
    transition: all 0.2s;
}

.vd-ctrl:hover {
    background: var(--site-primary-soft);
}

.vd-ctrl-main {
    background: var(--site-primary);
    border-color: var(--site-primary);
    color: #fff;
    flex: 1;
    justify-content: center;
}

.vd-ctrl-main:hover {
    background: var(--site-primary-dark);
    color: #fff;
}

.vd-control-toggles {
    border-top: 1px solid var(--site-primary-line);
    padding-top: 12px;
}

.vd-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #444;
    margin: 0;
    cursor: pointer;
}

.vd-switch input {
    accent-color: var(--site-primary);
    width: 16px;
    height: 16px;
}

.vd-rate-row {
    border-top: 1px solid var(--site-primary-line);
    padding-top: 12px;
}

.vd-rate-label {
    font-size: 14px;
    color: #444;
}

.vd-rate-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vd-rate {
    padding: 5px 12px;
    border: 1px solid var(--site-primary-line);
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 13px;
    transition: all 0.2s;
}

.vd-rate:hover {
    background: var(--site-primary-soft);
}

.vd-rate.is-active {
    background: var(--site-primary);
    border-color: var(--site-primary);
    color: #fff;
}

/* 影片資訊 */
.vd-info {
    background: #fff;
    border: 1px solid var(--site-primary-line);
    border-radius: 10px;
    padding: 18px 20px 20px;
}

.vd-info-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1c1c1c;
    line-height: 1.5;
}

.vd-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.vd-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--site-primary-soft);
    color: var(--site-primary);
    font-size: 13px;
}

.vd-info-desc {
    margin: 0 0 14px;
    font-size: 15px;
    color: #555;
    line-height: 1.85;
}

.vd-info-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--site-primary);
    font-size: 14px;
    text-decoration: none;
}

.vd-info-back:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   右：逐句對照稿
------------------------------------------------------------------ */
.vd-right {
    background: #fff;
    border: 1px solid var(--site-primary-line);
    border-radius: 10px;
    padding: 18px 20px 20px;
}

.vd-script-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--site-primary-line);
    margin-bottom: 12px;
}

.vd-script-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1c1c1c;
}

.vd-script-hint {
    margin: 0;
    font-size: 13px;
    color: #777;
}

/*
   對照稿自己捲動（而非整頁捲動），影片與控制列才不會被推出畫面。
   高度以視窗高度扣掉頁首與上下留白計算。
*/
.vd-script {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 6px;
}

.vd-para + .vd-para {
    margin-top: 18px;
}

.vd-para-head {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    padding: 8px 0;
}

.vd-para-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--site-primary);
    color: #fff;
    font-size: 13px;
    flex: none;
}

.vd-para-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--site-primary);
}

/* 單句 */
.vd-line {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 7px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.vd-line:hover {
    background: var(--site-primary-soft-2);
}

.vd-line:focus-visible {
    outline: 2px solid var(--site-primary-light);
    outline-offset: 2px;
}

/* 已播放過的句子：時間戳變淡，一眼看得出練到哪裡 */
.vd-line.is-played .vd-line-time {
    opacity: 0.55;
}

/* 目前播放中的句子 */
.vd-line.is-current {
    background: var(--site-primary-soft);
    border-left-color: var(--site-primary);
}

.vd-line.is-current .vd-line-time {
    opacity: 1;
    background: var(--site-primary);
    color: #fff;
}

.vd-line.is-current .vd-line-en {
    color: var(--site-primary);
    font-weight: 700;
}

.vd-line-time {
    flex: none;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--site-primary-soft-2);
    color: var(--site-primary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.vd-line-body {
    flex: 1;
    min-width: 0;
}

.vd-line-speaker {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--site-primary-accent);
}

.vd-line-en {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #222;
}

/* 中文翻譯預設隱藏，由「顯示中文」開關切換（內容仍留在 DOM 中，故列印時會印出） */
.vd-line-cn {
    display: none;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #777;
}

.vd-script.is-show-cn .vd-line-cn {
    display: block;
}

/* ==================================================================
   響應式
================================================================== */
@media (max-width: 1279.98px) {
    /* 右側欄移至列表下方，篩選條件與最新影片並排 */
    .vd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .vd-side {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 18px;
    }
}

@media (max-width: 991.98px) {
    .vd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 「篩選條件」改排在主視覺與影片列表之間。
       純 CSS 無法把巢狀的子元素移出父層，故讓 .vd-main-col 與 .vd-side 不生成自己的框，
       其子元素因此成為 .vd-layout 的直接項目，才能以 order 交錯排序（慣例同 article-explore.css 與內頁的 .vd-left）。 */
    .vd-main-col,
    .vd-side {
        display: contents;
    }

    .vd-hero,
    .vd-section-list,
    .vd-side-block {
        min-width: 0;
    }

    /* 區塊間距一律交給 .vd-layout 的 gap */
    .vd-hero {
        margin-bottom: 0;
        order: 1;
    }

    .vd-side-filter {
        order: 2;
    }

    .vd-section-list {
        order: 3;
    }

    .vd-side-latest {
        order: 4;
    }
}

@media (max-width: 1100px) {
    /*
       改為上下排列，順序為「影片 → 影片對照稿 → 影片資訊」。
       .vd-left 以 display:contents 讓出自己的框，其子元素（.vd-stage、.vd-info）
       因此成為 .vd-main 的直接項目，才排得進 .vd-right 的前後；
       固定於視窗頂端的工作也一併交給 .vd-stage（display:contents 的元素無法 sticky）。
    */
    .vd-main {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .vd-left {
        display: contents;
    }

    .vd-stage {
        order: 1;
        position: sticky;
        /* 頁首本身也是 sticky（top:0、z-index:1000），故必須從頁首底下開始固定，
           否則播放器上緣會被頁首蓋住 */
        top: var(--header-height, 66px);
        z-index: 5;
        gap: 10px;
        background: var(--site-primary-soft-2);
        padding-bottom: 8px;
    }

    /* 對照稿緊接在影片下方 */
    .vd-right {
        order: 2;
    }

    /* 影片標題與簡介移到對照稿之後（練習時用不到，不該佔掉影片下方的位置） */
    .vd-info {
        order: 3;
    }

    /* 整欄跟著頁面捲動，容器本身不再有自己的捲軸 */
    .vd-script {
        max-height: none;
        overflow-y: visible;
    }

    /* 段落標題若維持 sticky 會與置頂的播放器疊在一起 */
    .vd-para-head {
        position: static;
    }

    /* 播放器置頂後會佔掉不少高度，控制列一併收斂 */
    .vd-controls {
        padding: 10px 12px;
        gap: 8px;
    }

    .vd-control-toggles,
    .vd-rate-row {
        padding-top: 8px;
    }
}

@media (max-width: 768px) {
    .vd-hero {
        padding: 28px 20px;
    }

    .vd-hero-title {
        font-size: 24px;
    }

    .vd-ctrl span {
        display: none;
    }

    .vd-ctrl-main span {
        display: inline;
    }
}

@media (max-width: 576px) {
    .vd-shell {
        padding: 0 12px;
    }

    .vd-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vd-search {
        flex-wrap: wrap;
    }

    .vd-list-head {
        flex-wrap: wrap;
    }

    .vd-sort,
    .vd-sort select {
        width: 100%;
    }
}

/* ==================================================================
   對照稿中的重點詞彙／慣用句標示
   ------------------------------------------------------------------
   重點詞彙沿用 word-tip.css 的 .is-key-word（主色粗體＋底線），此處只補淡藍底；
   慣用句為多字片語，由 WordTip.markTips() 比對後逐字加上 .is-key-tip，
   顏色同樣沿用 word-tip.css 的橘色字（--article-tip-ink），與文章內頁一致，
   本檔不另外覆寫。橘色與學習狀態的警示橘同源，屬帶語意的標示色，不收斂為主色。
================================================================== */
.vd-line-en .tap-word.is-key-word {
    background: rgba(0, 42, 128, 0.08);
    border-radius: 3px;
}

/* 對照稿標頭的顏色說明 */
.vd-script-legend {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.vd-legend {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.vd-legend-word {
    color: var(--site-primary);
    background: rgba(0, 42, 128, 0.08);
    border-color: var(--site-primary-line);
}

.vd-legend-tip {
    color: var(--article-tip-ink);
    font-weight: 700;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(217, 119, 6, 0.35);
}

/* ==================================================================
   本片教學詞彙與慣用句（對照稿下方的重點整理）
================================================================== */
.vd-study {
    margin-top: 24px;
}

.vd-study-hint {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #5b6472;
    font-size: 14px;
    margin: 0 0 14px;
}

.vd-study-hint i {
    color: var(--site-primary);
}

.vd-study-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.vd-study-card {
    background: #fff;
    border: 1px solid var(--site-primary-line);
    border-radius: 10px;
    overflow: hidden;
}

.vd-study-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--site-primary-line);
    background: var(--site-primary-soft-2);
}

.vd-study-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--site-primary);
    color: #fff;
    font-size: 13px;
}

/* 慣用句卡的圖示改為琥珀色，與對照稿中的標示色對應 */
.vd-study-tips .vd-study-icon {
    background: #d97706;
}

.vd-study-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d2733;
    margin: 0;
}

.vd-study-tag {
    margin-left: auto;
    font-size: 12px;
    color: var(--site-primary);
    background: var(--site-primary-soft);
    border-radius: 999px;
    padding: 2px 10px;
}

.vd-study-body {
    padding: 6px 18px 14px;
}

/* ------------------------------------------------------------------
   詞彙列
------------------------------------------------------------------ */
.vd-word,
.vd-tip {
    padding: 12px 0;
    border-bottom: 1px dashed var(--site-primary-line);
}

.vd-word:last-child,
.vd-tip:last-child {
    border-bottom: 0;
}

.vd-word-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.vd-word-en {
    font-size: 17px;
    font-weight: 700;
    color: var(--site-primary);
}

.vd-word-phonetic {
    color: #7a8394;
    font-size: 13px;
}

.vd-word-pos {
    font-size: 12px;
    color: var(--site-primary);
    background: var(--site-primary-soft);
    border-radius: 999px;
    padding: 1px 8px;
}

.vd-word-add {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--site-primary);
    background: #fff;
    border: 1px solid var(--site-primary-line);
    border-radius: 7px;
    padding: 3px 10px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.vd-word-add:hover {
    background: var(--site-primary-soft);
}

.vd-word-cn {
    color: #3a4350;
    font-size: 14px;
    margin-top: 4px;
}

.vd-word-example,
.vd-tip-example {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--site-primary-soft-2);
    border-radius: 8px;
    font-size: 14px;
}

.vd-word-example .en,
.vd-tip-example .en {
    display: block;
    color: #1d2733;
}

.vd-word-example .cn,
.vd-tip-example .cn {
    display: block;
    color: #5b6472;
    margin-top: 2px;
}

/* ------------------------------------------------------------------
   慣用句列
------------------------------------------------------------------ */
.vd-tip-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.vd-tip-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
}

.vd-tip-title {
    font-size: 16px;
    font-weight: 700;
    color: #92400e;
}

.vd-tip-pattern {
    font-size: 12px;
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: 999px;
    padding: 1px 8px;
}

.vd-tip-explanation {
    color: #3a4350;
    font-size: 14px;
    margin-top: 4px;
}

@media (max-width: 1100px) {
    .vd-study-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   列印：只印對照稿（中文一律印出），影片與控制列不列印
================================================================== */
@media print {
    .site-ad {
        display: none !important;
    }

    .vd-hero,
    .vd-side,
    .vd-crumb,
    .vd-left,
    .vd-pagination {
        display: none !important;
    }

    .video-page {
        background: #fff;
        padding: 0;
    }

    .vd-main {
        display: block;
    }

    .vd-right {
        border: 0;
        padding: 0;
    }

    .vd-script {
        max-height: none;
        overflow: visible;
    }

    .vd-line-cn {
        display: block !important;
    }
}