/**
 * Mandarin Learning System CSS - v3.0
 * Side-by-side layout like reference site
 */

:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --blue: #3b82f6;
    --orange: #f97316;
    --red: #ef4444;
    --yellow: #fbbf24;
    --green: #22c55e;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --white: #fff;
    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}

/* Prevent iOS Safari edge-swipe-back on learning pages */
body.single-mandarin_episode,
body.post-type-archive-mandarin_episode {
    overscroll-behavior-x: none;
}

/* Reset */
.mandarin-player-v3,
.mandarin-player-v3 * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

.mandarin-player-v3 {
    font-family: var(--font) !important;
    color: var(--gray-800);
    background: #eeeeee;
    line-height: 1.5;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

/* Force link colors - override DIVI/WordPress defaults */
.mandarin-player-v3 a {
    color: #191919 !important;
    text-decoration: none !important;
}

.mandarin-player-v3 a:hover {
    color: var(--primary) !important;
}

.mandarin-player-v3 .mandarin-header-nav,
.mandarin-player-v3 .mandarin-header-nav:link,
.mandarin-player-v3 .mandarin-header-nav:visited {
    /* v6.4.69: also cover :link and :visited so the theme's default visited
       link color (green on some setups) does not bleed through. */
    color: #191919 !important;
}

.mandarin-player-v3 .mandarin-header-nav:hover,
.mandarin-player-v3 .mandarin-header-nav:active,
.mandarin-player-v3 .mandarin-header-nav:focus {
    color: #fb7299 !important; /* v6.3.3: pink instead of primary green */
}

/* Keyword highlight links keep their colors */
.mandarin-player-v3 .keyword-phrase,
.mandarin-player-v3 .keyword-phrasal-verb,
.mandarin-player-v3 .keyword-collocation,
.mandarin-player-v3 .keyword-word,
.mandarin-player-v3 .keyword-discourse {
    color: inherit !important;
}

/* Footer copyright links */
.mandarin-player-v3 .mandarin-copyright a {
    color: #6b7280 !important;
    text-decoration: underline !important;
}

.mandarin-player-v3 .mandarin-copyright a:hover {
    color: var(--primary) !important;
}

/* Feedback links */
.mandarin-player-v3 .mandarin-feedback a {
    color: var(--primary) !important;
}

/* Navigation button links - white text */
.mandarin-player-v3 a.mandarin-nav-btn.prev,
.mandarin-player-v3 a.mandarin-nav-btn.next {
    color: #fff !important;
}

.mandarin-player-v3 a.mandarin-nav-btn.prev:hover,
.mandarin-player-v3 a.mandarin-nav-btn.next:hover {
    color: #fff !important;
}

.mandarin-player-v3 a.mandarin-nav-btn .nav-arrow {
    color: #fff !important;
}

/* DIVI Theme Override */
.mandarin-player-v3 div,
.mandarin-player-v3 section,
.mandarin-player-v3 article,
.mandarin-player-v3 header,
.mandarin-player-v3 nav {
    max-width: 100% !important;
    width: auto;
}

/* Force full width on WordPress/DIVI */
body .mandarin-player-v3,
.et_pb_section .mandarin-player-v3,
.et_pb_row .mandarin-player-v3,
.et_pb_column .mandarin-player-v3,
#main-content .mandarin-player-v3,
.entry-content .mandarin-player-v3,
article .mandarin-player-v3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Force hide sidebar on episode pages */
body.single-mandarin_episode #sidebar,
body.single-mandarin_episode .et_right_sidebar #left-area,
body.single-mandarin_episode .et_right_sidebar #sidebar,
body.single-mandarin_episode .et_left_sidebar #sidebar,
body.single-mandarin_episode aside#sidebar,
body.single-mandarin_episode .widget-area {
    display: none !important;
}

body.single-mandarin_episode #left-area,
body.single-mandarin_episode #main-content .container,
body.single-mandarin_episode .et_pb_row,
body.single-mandarin_episode .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

body.single-mandarin_episode #main-content {
    padding: 0 !important;
}

body.single-mandarin_episode .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* ========== HEADER ========== */
.mandarin-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-bottom: none;
    background: #ffffff;
    position: relative;
    z-index: 100;
    gap: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Desktop header - inside video side */
.mandarin-desktop-header {
    padding: 4px 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
}

/* 左半分：ナビゲーション + ロゴ + タイトル */
.mandarin-desktop-header .mandarin-header-left-half {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
}

.mandarin-desktop-header .mandarin-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    position: static !important;
    left: auto !important;
}

/* ロゴ */
.mandarin-header-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.mandarin-header-logo img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* タイトル — 通常のflex配置 (absolute不要) */
.mandarin-desktop-header .mandarin-header-title {
    position: static !important;
    left: auto !important;
    transform: none !important;
    font-size: 22px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* header-inner flex layout */
.mandarin-desktop-header .mandarin-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Right group: nav links + action icons */
.mandarin-desktop-header .mandarin-header-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

.mandarin-header-nav {
    color: #374151;
    text-decoration: none;
    font-size: 15px;
}

/* v6.2.21: Nav label switching — full (目录/上一期/下一期) vs short (录/上/下) */
.mandarin-header-nav .nav-label-full { display: inline; }
.mandarin-header-nav .nav-label-short { display: none; }
/* Switch to short labels when the header gets tight (tablet / narrow desktop) */
@media (max-width: 1200px) {
    .mandarin-header-nav .nav-label-full { display: none; }
    .mandarin-header-nav .nav-label-short { display: inline; }
    .mandarin-header-left { gap: 8px !important; }
}

.mandarin-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mandarin-header-nav:hover {
    color: #fb7299; /* v6.3.3: pink instead of primary green */
}

.mandarin-header-sep {
    color: #9ca3af;
}

.mandarin-header-title {
    font-size: 30px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none;
    text-align: center;
}

.mandarin-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 10;
}

/* Checkin Button */
.mandarin-checkin-btn,
.mandarin-like-btn,
.mandarin-favorite-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    /* v6.1.0: Pink outline style to match mobile */
    background: transparent;
    color: #fb7299;
}

.mandarin-checkin-btn svg,
.mandarin-like-btn svg,
.mandarin-favorite-btn svg {
    width: 20px;
    height: 20px;
    stroke: #fb7299;
}

/* v6.3.1: Font Awesome checkin icon (<i class="fa-solid fa-check">) */
.mandarin-checkin-btn .mandarin-checkin-icon {
    font-size: 18px;
    color: #fb7299;
    line-height: 1;
}

.mandarin-checkin-btn:hover,
.mandarin-like-btn:hover,
.mandarin-favorite-btn:hover {
    background: rgba(251,114,153,0.1);
}

.mandarin-checkin-btn.checked {
    background: #fb7299;
    color: white;
}

/* v6.3.1: Checked state — white check on pink background */
.mandarin-checkin-btn.checked .mandarin-checkin-icon {
    color: white;
}

.mandarin-like-btn.liked {
    background: #fb7299;
    color: white;
}

.mandarin-like-btn.liked svg {
    fill: white;
    stroke: white;
}

.mandarin-favorite-btn.favorited {
    background: #fb7299;
    color: white;
}

.mandarin-favorite-btn.favorited svg {
    fill: white;
    stroke: white;
}

/* Favorite wrapper with tooltip */
.mandarin-favorite-wrap {
    position: relative;
    z-index: 10;
}

/* Ensure button is always clickable */
.mandarin-favorite-btn {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
}

.mandarin-favorite-tooltip {
    /* v1.0.36: この吹き出しはヘッダーの overflow に切られて「Bo」のように
       途中で欠けるため非表示にし、ボタンの native title（欠けない）に統一。 */
    display: none !important;
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    left: auto;
    transform: none;
    background: rgba(255, 255, 255, 0.95);
    color: #374151;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s;
    z-index: 100;
}

.mandarin-favorite-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 16px;
    left: auto;
    transform: none;
    border: 6px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

.mandarin-favorite-wrap:hover .mandarin-favorite-tooltip {
    opacity: 1;
    visibility: visible;
}

.mandarin-favorite-btn.favorited + .mandarin-favorite-tooltip {
    background: #fce4ec;
}

/* ========== CHECKIN MODAL ========== */
/* ========== CHECKIN MODAL ========== */
.mandarin-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 10vh 20px 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.mandarin-modal-overlay[style*="display: none"] {
    display: none !important;
}

.mandarin-modal {
    background: #fff !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 340px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    position: relative !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

.mandarin-modal-header {
    background: #00a1d6 !important;
    color: #fff !important;
    padding: 24px 24px !important;
    margin: 20px 20px 0 20px !important;
    border-radius: 12px !important;
    text-align: center !important;
}

.mandarin-modal-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    display: block !important;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif, "PingFang SC" !important;
    background: none !important;
    border: none !important;
}

.mandarin-modal-subtitle {
    font-size: 14px !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-weight: 400 !important;
    display: block !important;
    background: none !important;
    border: none !important;
}

.mandarin-modal-body {
    padding: 20px !important;
    background: #fff !important;
}

.mandarin-modal-input {
    width: 100% !important;
    min-height: 100px !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    resize: none !important;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif, "PingFang SC" !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    outline: none !important;
}

.mandarin-modal-input:focus {
    outline: none !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
}

.mandarin-modal-input::placeholder {
    color: #9ca3af !important;
}

.mandarin-modal-footer {
    padding: 0 20px 24px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    background: #fff !important;
    border-top: 1px solid #f3f4f6 !important;
    padding-top: 16px !important;
}

.mandarin-modal-btn {
    padding: 12px 28px !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    text-align: center !important;
    display: inline-block !important;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif, "PingFang SC" !important;
    line-height: 1.4 !important;
}

.mandarin-modal-btn.cancel {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    padding: 12px 20px !important;
}

.mandarin-modal-btn.cancel:hover {
    color: #374151 !important;
}

.mandarin-modal-btn.confirm {
    background: #00a1d6 !important;
    border: none !important;
    color: #fff !important;
}

.mandarin-modal-btn.confirm:hover {
    background: #0089b8 !important;
}

/* Mobile modal adjustments */
@media (max-width: 480px) {
    .mandarin-modal-overlay {
        padding: 5vh 16px 16px !important;
        align-items: flex-start !important;
    }
    
    .mandarin-modal {
        max-width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .mandarin-modal-header {
        margin: 16px 16px 0 16px !important;
        padding: 20px !important;
    }
    
    .mandarin-modal-title {
        font-size: 20px !important;
    }
    
    .mandarin-modal-body {
        padding: 16px !important;
    }
    
    .mandarin-modal-footer {
        padding: 16px !important;
    }
    
    .mandarin-modal-btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

/* Right: Subtitle toolbar */
.mandarin-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.mandarin-header-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--gray-400);
    padding: 4px;
}

.mandarin-header-btn:hover {
    color: var(--gray-600);
}

.mandarin-header-btn.checked,
.mandarin-header-btn.favorited {
    color: #fb7299;
}

/* Subtitle header bar */
.mandarin-subtitle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--gray-200);
}

.mandarin-subtitle-label {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    white-space: nowrap;
}

.mandarin-subtitle-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mandarin-tool-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--gray-500);
    transition: all 0.15s;
}

.mandarin-tool-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.mandarin-tool-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.mandarin-lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mandarin-lang-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    color: var(--gray-600);
    white-space: nowrap;
    transition: all 0.15s;
}

.mandarin-lang-btn:hover {
    background: var(--gray-100);
}

.mandarin-lang-btn.active {
    background: var(--primary);
    color: var(--white);
}

/* ========== DESKTOP MODE BAR (right-aligned above subtitle panel) ========== */
.mandarin-desktop-mode-bar {
    display: none; /* shown via media query on desktop */
    /* v1.0.105: two static rows (study modes on top, line toggles + icons below)
       instead of one overflowing row. Kills the horizontal scroll the single row
       produced when the tabs no longer fit. */
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 7px 14px !important;
    background: #eeeeee !important;
    gap: 6px !important;
    width: 50% !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    z-index: 25 !important;
    pointer-events: auto !important;
}

@media (min-width: 1025px) {
    .mandarin-desktop-mode-bar {
        display: flex !important;
    }
    .mandarin-main-content {
        position: relative !important;
    }
    /* v1.0.105: the bar is now two rows (~80px). Pad the subtitle list / cards
       panel so the first line clears the bar instead of being hidden under it.
       (The earlier single-row design dropped padding-top:36px in v6.4.73 to avoid
       wasted space; with two rows a clearance is required again.) In desktop
       fullscreen the bar AND the subtitle side are display:none, so this is inert
       there. */
    .mandarin-subtitle-side .mandarin-subtitle-list {
        padding-top: var(--mandarin-mode-bar-h, 82px) !important;
    }
    .mandarin-subtitle-side .mandarin-desktop-cards {
        padding-top: var(--mandarin-mode-bar-h, 82px) !important;
    }
}

.mandarin-desktop-mode-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap; /* v1.0.105: wrap downward as a fallback — never scroll sideways */
}

.mandarin-mode-tab {
    padding: 6px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
    white-space: nowrap;
    transition: all 0.15s;
    font-weight: 500;
    line-height: 1.4;
}

.mandarin-mode-tab:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.mandarin-mode-tab.active {
    background: #fb7299;
    color: #ffffff;
    border-color: #fb7299;
}

/* v1.0.105: second row holds the line toggles (left) and the icons (right). */
.mandarin-desktop-mode-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

/* v1.0.66: Per-line subtitle toggles (Hanzi / Pinyin / IPA / EN).
   v1.0.105: now on their own row, so the inline divider/left-margin are dropped. */
.mandarin-line-toggle-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.mandarin-line-toggle {
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.mandarin-line-toggle:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}
.mandarin-line-toggle.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}
.mandarin-line-toggle.active:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
}
/* v1.0.106: brief shake when a toggle is refused because it would hide the last
   visible subtitle row (see mandarinCountActiveLines() guard in the JS). */
.mandarin-line-toggle-deny {
    animation: mandarin-line-toggle-deny-shake 0.4s ease;
}
@keyframes mandarin-line-toggle-deny-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

.mandarin-desktop-mode-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    /* v1.0.105: pushed to the right edge of row 2 via the row's space-between. */
    position: relative;
    z-index: 10;
}

.mandarin-mode-icon-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.15s;
    pointer-events: auto !important;
    position: relative;
    z-index: 11;
}

.mandarin-mode-icon-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.mandarin-mode-icon-btn.active {
    color: #fb7299;
}

.mandarin-mode-icon-btn.active svg {
    fill: #fb7299;
    stroke: #fb7299;
}

/* ========== DESKTOP SETTINGS POPUP ========== */
.mandarin-desktop-settings-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 440px !important;
    max-width: 440px !important;
    max-height: none !important; /* v6.4.29: No scroll — panel must fit on screen */
    overflow: visible !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 4px 16px rgba(0,0,0,0.08) !important;
    z-index: 10000 !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border: none !important;
    color: #1f2937 !important;
}

/* v6.4.33: per user request (Image 10) — panel must NEVER show a scrollbar.
   We removed the 显示字幕笔记 row so the panel fits in most viewports. If the
   viewport is still too short, the safety net now scales via compact padding
   rather than enabling overflow. */
@media (max-height: 720px) {
    .mandarin-desktop-settings-popup {
        max-height: none !important;
        overflow: visible !important;
    }
    .mandarin-desktop-settings-popup .mandarin-dsp-row {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .mandarin-desktop-settings-popup .mandarin-dsp-row-slider {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Override Divi blanket rules for ALL popup children */
.mandarin-desktop-settings-popup div,
.mandarin-desktop-settings-popup span,
.mandarin-desktop-settings-popup button,
.mandarin-desktop-settings-popup label,
.mandarin-desktop-settings-popup input {
    background-color: transparent;
    border: none;
    box-shadow: none;
    max-width: none !important;
}

/* Backdrop */
.mandarin-dsp-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.25) !important;
    background-color: rgba(0,0,0,0.25) !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Drag handle bar at top */
.mandarin-dsp-handle {
    display: flex !important;
    justify-content: center !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
}

.mandarin-dsp-handle-bar {
    width: 44px !important;
    height: 5px !important;
    background: #d1d5db !important;
    background-color: #d1d5db !important;
    border-radius: 3px !important;
}

.mandarin-dsp-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 8px 16px 4px !important;
    background: transparent !important;
}
}

.mandarin-dsp-close {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    font-size: 26px !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    transition: all 0.15s !important;
    box-shadow: none !important;
}

.mandarin-dsp-close:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Quick actions row */
.mandarin-dsp-quick-row {
    display: flex !important;
    gap: 0 !important;
    padding: 2px 18px 8px !important; /* v6.4.29: tightened */
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
}

.mandarin-dsp-quick {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important; /* v6.4.29: tighter icon/label gap */
    padding: 6px 4px !important; /* v6.4.29: reduced vertical padding */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #374151 !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    transition: background 0.15s !important;
    box-shadow: none !important;
}

.mandarin-dsp-quick svg {
    width: 20px;
    height: 20px;
}

.mandarin-dsp-quick:hover {
    background: #f5f5f5;
}

.mandarin-dsp-quick.active svg {
    stroke: #ef4444;
    fill: #ef4444;
}

.mandarin-dsp-quick.active span {
    color: #ef4444;
}

/* Setting rows */
.mandarin-dsp-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 22px !important; /* v6.4.29: reduced from 10px/28px */
    background: transparent !important;
}

.mandarin-dsp-row-col {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.mandarin-dsp-row-label {
    font-size: 14px !important;
    color: #1f2937 !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
}

/* Slider */
.mandarin-dsp-slider-wrap {
    flex: 1;
    margin-left: 0;
    max-width: 100%;
}

.mandarin-dsp-row.mandarin-dsp-row-slider {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px; /* v6.4.29: tighter */
    padding: 6px 22px 8px !important;
}

.mandarin-dsp-slider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #fb7299 0%, #fb7299 var(--slider-pct, 37.5%), #e5e7eb var(--slider-pct, 37.5%), #e5e7eb 100%);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.mandarin-dsp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #d1d5db;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.mandarin-dsp-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #d1d5db;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.mandarin-dsp-slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
    padding: 0 4px;
}

/* Toggle switch — larger, matches reference */
.mandarin-dsp-toggle {
    position: relative !important;
    width: 52px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

.mandarin-dsp-toggle input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
}

.mandarin-dsp-toggle-slider {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: #e5e7eb !important;
    background-color: #e5e7eb !important;
    border-radius: 28px !important;
    cursor: pointer !important;
    transition: background 0.25s !important;
    border: none !important;
    box-shadow: none !important;
}

.mandarin-dsp-toggle-slider::before {
    content: '✕' !important;
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    left: 3px !important;
    top: 3px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    transition: transform 0.25s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    color: #9ca3af !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border: none !important;
}

.mandarin-dsp-toggle input:checked + .mandarin-dsp-toggle-slider {
    background: #fb7299 !important;
    background-color: #fb7299 !important;
}

.mandarin-dsp-toggle input:checked + .mandarin-dsp-toggle-slider::before {
    transform: translateX(24px) !important;
    content: '✓' !important;
    color: #fb7299 !important;
    font-weight: 700 !important;
}

/* Caption buttons */
.mandarin-dsp-caption-btns {
    display: flex !important;
    gap: 6px !important;
}

.mandarin-dsp-caption-btn {
    padding: 6px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    box-shadow: none !important;
}

.mandarin-dsp-caption-btn:hover {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
}

.mandarin-dsp-caption-btn.active {
    background: #fb7299 !important;
    background-color: #fb7299 !important;
    color: #ffffff !important;
    border-color: #fb7299 !important;
}

/* Subtitle side needs position:relative for popup positioning — handled in main definition */

/* ========== DESKTOP CARDS PANEL (词卡) ========== */
.mandarin-desktop-cards {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
}

.mandarin-dc-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
}
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-dc-list-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.mandarin-dc-list-count {
    font-size: 13px;
    color: #9ca3af;
}

.mandarin-dc-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.12s;
    gap: 12px;
}

.mandarin-dc-row:hover {
    background: #f9fafb;
}

.mandarin-dc-num {
    min-width: 24px;
    font-size: 14px;
    color: #9ca3af;
    flex-shrink: 0;
}

.mandarin-dc-word {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
}

.mandarin-dc-cat {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
}

.mandarin-dc-cat-phrase, .mandarin-dc-cat-spoken_pattern { background: #dcfce7; color: #166534; }
.mandarin-dc-cat-phrasal_verb { background: #fce7f3; color: #9d174d; }
.mandarin-dc-cat-collocation { background: #dbeafe; color: #1e40af; }
.mandarin-dc-cat-word { background: #fee2e2; color: #991b1b; }
.mandarin-dc-cat-proper_noun { background: #f3e8ff; color: #6b21a8; }
.mandarin-dc-cat-discourse { background: #ecfccb; color: #3f6212; }
.mandarin-dc-cat-idiom, .mandarin-dc-cat-idiom_expr { background: #fef9c3; color: #854d0e; }
.mandarin-dc-cat-slang { background: #ede9fe; color: #5b21b6; }
.mandarin-dc-cat-sentence { background: #f0fdf4; color: #166534; }
/* v1.0.65: Mandarin POS / pedagogy category pills */
.mandarin-dc-cat-noun { background: #e0f2f1; color: #115e59; }
.mandarin-dc-cat-verb { background: #fef2f2; color: #b91c1c; }
.mandarin-dc-cat-auxiliary_verb { background: #fee2e2; color: #b91c1c; }
.mandarin-dc-cat-adjective { background: #ecfeff; color: #0e7490; }
.mandarin-dc-cat-adverb { background: #efebe9; color: #6d4c41; }
.mandarin-dc-cat-pronoun { background: #ede9fe; color: #5b21b6; }
.mandarin-dc-cat-numeral { background: #f1f5f9; color: #334155; }
.mandarin-dc-cat-measure_word { background: #fef9c3; color: #854d0e; }
.mandarin-dc-cat-particle { background: #fae8ff; color: #86198f; }
.mandarin-dc-cat-conjunction { background: #e0e7ff; color: #3730a3; }
.mandarin-dc-cat-preposition { background: #dbeafe; color: #1e40af; }
.mandarin-dc-cat-interrogative { background: #ffe4e6; color: #9f1239; }
.mandarin-dc-cat-chengyu { background: #fef3c7; color: #92400e; }
.mandarin-dc-cat-separable_verb { background: #fce7f3; color: #9d174d; }
.mandarin-dc-cat-grammar_point { background: #cffafe; color: #155e75; }
.mandarin-dc-cat-expression { background: #fffbeb; color: #854d0e; }

/* v6.4.82: 收藏 icon switched from a ☆/★ glyph to a proper bookmark
   shape, per user UX feedback ("收藏アイコンが星印になっている、
   ブックマークアイコンに修正"). The button text content is still
   set by JS (★/☆) but we hide it (font-size: 0) and render the
   bookmark via a CSS mask on ::before. The .is-fav class swaps
   outline → filled and grey → primary-pink. */
.mandarin-dc-star {
    background: none;
    border: none;
    font-size: 0;          /* hide ★/☆ glyph (kept for a11y) */
    color: transparent;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mandarin-dc-star::before {
    content: "";
    width: 18px;
    height: 22px;
    display: block;
    background-color: #9ca3af;
    /* Outline bookmark — used for the default (not-fav) state. */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain;   mask-size: contain;
    transition: background-color 0.15s;
}

.mandarin-dc-star:hover::before {
    background-color: #fb7299;
}

.mandarin-dc-star.starred::before,
.mandarin-dc-star.is-fav::before {
    background-color: #fb7299;
    /* Filled bookmark for the favorited state. */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
}

.mandarin-dc-chevron {
    font-size: 22px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* ---- Detail View ---- */
.mandarin-dc-detail {
    padding: 0;
}

.mandarin-dc-detail-nav {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-dc-detail-word {
    flex: 1;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    /* v6.4.124 (revised): the category badge is no longer
       a child of this element — it's a sibling that sits
       between the title and .mandarin-dc-nav-right (see JS).
       So we keep the original `flex: 1` so the title spans
       the gap, pushing the cat badge over to hug the nav
       cluster. The previous attempt to make this a flex
       container holding [text][cat] caused the badge to be
       pinned right next to the word, which read as cramped. */
    min-width: 0;
}

.mandarin-dc-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mandarin-dc-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.mandarin-dc-nav-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* v6.4.82: same bookmark treatment for the detail-view star at the
   top-right of the right pane. Slightly larger size to match the
   surrounding nav buttons. */
.mandarin-dc-star-detail {
    background: none;
    border: none;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mandarin-dc-star-detail::before {
    content: "";
    width: 20px;
    height: 24px;
    display: block;
    background-color: #9ca3af;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: background-color 0.15s;
}

.mandarin-dc-star-detail:hover::before {
    background-color: #fb7299;
}

.mandarin-dc-star-detail.starred::before,
.mandarin-dc-star-detail.is-fav::before {
    background-color: #fb7299;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>");
}

.mandarin-dc-detail-pron {
    padding: 12px 20px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mandarin-dc-detail-pron .pron-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    background: transparent;
    font-size: 15px;
    color: #374151;
    cursor: pointer;
}

.mandarin-dc-detail-cat-wrap {
    display: inline-flex;
    align-items: center;
}

.mandarin-dc-detail-cat {
    font-size: 13px;
    padding: 2px 12px;
    border-radius: 12px;
    font-weight: 500;
    /* v6.4.124: when this badge is placed as a direct child
       of .mandarin-dc-detail-nav (between #dc-detail-word and
       .mandarin-dc-nav-right), prevent flex from shrinking it.
       Otherwise a long Chinese label like 短语动词 / 惯用表达
       can compress to ellipsis on narrow screens. The title
       already has flex:1 and will yield space first. */
    flex-shrink: 0;
}

/* v6.4.111: visual hierarchy for the desktop word-card detail
   pane. Previously every block sat on the same grey #f5f5f5 chip,
   which made the meaning, definition, and example bleed together.
   Now each block is its own card with distinct color/treatment so
   the eye can pick out 中文意思 vs. 英文 def vs. example. */
.mandarin-dc-detail-body {
    padding: 0;
    margin: 0 20px 16px;
    border-top: none;
    border-bottom: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 中文意思 — primary callout. Soft pink wash with a stronger
   left-edge accent. */
.mandarin-dc-meaning-zh {
    font-size: 19px;
    font-weight: 700;
    color: #831843;
    background: #fdf2f8;
    border-left: 4px solid #fb7299;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 0;
    line-height: 1.4;
}

/* 英文 definition — secondary, italic, lighter card. */
.mandarin-dc-meaning-en {
    font-size: 14px;
    color: #475569;
    background: #f1f5f9;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 0;
    line-height: 1.6;
    font-style: italic;
}

/* 例文 — quote treatment. Distinct from the meaning block by
   using a left bar in cool grey + serif-ish vibe. */
.mandarin-dc-example {
    font-size: 16px;
    color: #1e293b;
    line-height: 1.7;
    margin-bottom: 0;
    padding: 12px 16px 6px;
    background: #fafafa;
    border-left: 3px solid #cbd5e1;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
}
.mandarin-dc-example::before {
    content: "“";
    color: #cbd5e1;
    font-size: 24px;
    font-weight: 700;
    margin-right: 4px;
    line-height: 1;
}
.mandarin-dc-example-zh {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    padding: 0 16px 12px;
    background: #fafafa;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    margin-top: -10px;
}

.mandarin-dc-scenes {
    padding: 0 20px 16px;
}

.mandarin-dc-scene-header {
    font-size: 15px;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 0;
    border-top: 1px solid #f3f4f6;
}

.mandarin-dc-scene-header .scene-toggle {
    font-size: 18px;
    color: #9ca3af;
    transition: transform 0.2s;
}

.mandarin-dc-scene-item {
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.7;
    border: 1px solid #f0f0f0;
}

.mandarin-dc-scene-item .scene-ep {
    font-weight: 700;
    font-size: 15px;
    color: #111827;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* v6.4.79: link / non-link styles for the episode label.
   Cross-episode → blue underline-on-hover link that opens in a new tab.
   Current episode → plain bold text. */
.mandarin-dc-scene-item .scene-ep-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
}
.mandarin-dc-scene-item .scene-ep-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}
.mandarin-dc-scene-item .scene-ep-current {
    color: #111827;
    font-weight: 700;
}

.mandarin-dc-scene-item .scene-en {
    color: #374151;
}

.mandarin-dc-scene-item .scene-en .highlight {
    color: #ef4444;
    font-weight: 700;
}

.mandarin-dc-scene-item .scene-zh {
    color: #9ca3af;
    font-size: 13px;
}

.mandarin-dc-scene-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #eef2ff;
    border: none;
    border-radius: 16px;
    color: #4f46e5;
    font-size: 13px;
    cursor: pointer;
    margin-top: 6px;
}

.mandarin-dc-scene-play:hover {
    background: #e0e7ff;
}

.mandarin-dc-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #f3f4f6;
}

.mandarin-dc-copy-btn {
    padding: 6px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.mandarin-dc-copy-btn:hover {
    background: #f3f4f6;
}

.mandarin-dc-footer-nav {
    display: flex;
    gap: 6px;
}

/* ========== MAIN CONTENT: SIDE BY SIDE ========== */
.mandarin-main-content {
    display: flex;
    min-height: calc(100vh - 60px);
    border-bottom: none;
    background: #eeeeee;
    gap: 16px;
    padding: 0 16px 16px;
    align-items: flex-start;
}

/* Video Side */
.mandarin-video-side {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 8px 0 16px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 12px;
}

.mandarin-video-wrapper {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    width: 100% !important;
    max-width: 100% !important;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}

.mandarin-video-wrapper.hidden {
    display: none;
}

.mandarin-video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
}

/* ========== Mobile Video Overlay (reference site style) ========== */
.mandarin-video-overlay-mobile {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    pointer-events: none;
}

/* Auto-hide overlay elements (except subtitles) during playback */
.mandarin-video-overlay-mobile,
.mandarin-video-quick-mute,
.mandarin-video-controls,
.mandarin-video-progress-bar {
    transition: opacity 0.4s ease;
}
.mandarin-video-wrapper.overlay-hidden .mandarin-video-overlay-mobile,
.mandarin-video-wrapper.overlay-hidden .mandarin-video-quick-mute,
.mandarin-video-wrapper.overlay-hidden .mandarin-video-controls,
.mandarin-video-wrapper.overlay-hidden .mandarin-video-progress-bar {
    opacity: 0;
    pointer-events: none !important;
}
.mandarin-video-wrapper.overlay-hidden .mandarin-video-overlay-mobile > div {
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    .mandarin-video-overlay-mobile {
        display: block;
    }
}

.mandarin-video-overlay-mobile > div {
    position: absolute;
    pointer-events: auto;
}

/* 再生中はオーバーレイの子要素もタップを通過させる（動画タップで一時停止できるように） */
.mandarin-video-wrapper.playing .mandarin-video-overlay-mobile > div {
    pointer-events: none !important;
}

/* ALWAYS keep bottom-right controls clickable - must match or exceed specificity of above rule */
.mandarin-video-wrapper .mandarin-video-overlay-mobile > .mandarin-vo-bottom-right,
.mandarin-video-wrapper.playing .mandarin-video-overlay-mobile > .mandarin-vo-bottom-right,
.mandarin-video-wrapper.overlay-hidden .mandarin-video-overlay-mobile > .mandarin-vo-bottom-right {
    pointer-events: auto !important;
    opacity: 1 !important;
}
.mandarin-vo-bottom-right .mandarin-vo-btn,
.mandarin-vo-bottom-right .mandarin-vo-status,
.mandarin-vo-bottom-right .mandarin-vo-status-close {
    pointer-events: auto !important;
}

/* v6.4.91: Same protection for top-right (打卡 / いいね / 收藏 /
   メニュー) and top-left (× / 目录 / 上期 / 下期) — the playing
   class was disabling pointer events on EVERY overlay child, which
   silently broke every nav and action icon. The bottom-right got
   protection back in v6.4.62 (or thereabouts) but the top corners
   were never re-enabled. Adding them now so all four corners stay
   tappable while the video plays. */
.mandarin-video-wrapper .mandarin-video-overlay-mobile > .mandarin-vo-top-right,
.mandarin-video-wrapper.playing .mandarin-video-overlay-mobile > .mandarin-vo-top-right,
.mandarin-video-wrapper.overlay-hidden .mandarin-video-overlay-mobile > .mandarin-vo-top-right,
.mandarin-video-wrapper .mandarin-video-overlay-mobile > .mandarin-vo-top-left,
.mandarin-video-wrapper.playing .mandarin-video-overlay-mobile > .mandarin-vo-top-left,
.mandarin-video-wrapper.overlay-hidden .mandarin-video-overlay-mobile > .mandarin-vo-top-left {
    pointer-events: auto !important;
}
.mandarin-vo-top-right .mandarin-vo-fs-action,
.mandarin-vo-top-right .mandarin-vo-btn,
.mandarin-vo-top-left .mandarin-vo-btn,
.mandarin-vo-top-left a,
.mandarin-vo-top-left button {
    pointer-events: auto !important;
}

.mandarin-vo-top-left {
    top: 12px;
    left: 12px;
    display: flex;
    gap: 8px;
}

.mandarin-vo-top-right {
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.mandarin-vo-bottom-left {
    bottom: 12px;
    left: 12px;
}

.mandarin-vo-bottom-right {
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.mandarin-vo-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s;
    position: relative;
    z-index: 10;
}

.mandarin-vo-nav {
    -webkit-tap-highlight-color: rgba(255,255,255,0.2);
}

.mandarin-vo-btn:active {
    background: rgba(0, 0, 0, 0.65);
}

.mandarin-vo-checkin.checked {
    background: rgba(251, 114, 153, 0.5);
}

.mandarin-vo-ep-badge {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mandarin-vo-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mandarin-vo-status-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.8;
}

.mandarin-vo-loop-progress {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    font-weight: 600;
}

/* Play button overlay - hidden by default since we use native controls */
.mandarin-video-play-overlay {
    display: none;
}

/* Controls */
.mandarin-controls {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.mandarin-ctrl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mandarin-ctrl-item .ctrl-label {
    font-size: 14px;
    color: var(--gray-500);
    white-space: nowrap;
}

.mandarin-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--gray-500);
    flex-shrink: 0;
    padding: 0;
    overflow: hidden;
}

.mandarin-ctrl svg {
    width: 20px;
    height: 20px;
}

.mandarin-ctrl .ctrl-text {
    font-size: 14px;
    font-weight: 600;
}

.mandarin-ctrl:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    background: #fb7299;
    color: #fff;
}

.mandarin-ctrl:hover svg {
    stroke: #fff;
}

.mandarin-ctrl:hover .ctrl-text {
    color: #fff;
}

.mandarin-ctrl.active {
    background: #fb7299;
    color: var(--white);
}

/* Active ctrl: white icon and text */
.mandarin-ctrl.active svg {
    stroke: #fff;
}
.mandarin-ctrl.active .ctrl-text {
    color: #fff;
}
.mandarin-ctrl-item:has(.mandarin-ctrl.active) .ctrl-label {
    color: #fb7299;
}

/* Specific control button colors when active */
.mandarin-ctrl[data-action="loop"].active {
    background: #fb7299;
}

.mandarin-ctrl[data-action="apoint"].active {
    background: #fb7299;
}

.mandarin-ctrl[data-action="single"].active {
    background: #fb7299;
}

.mandarin-ctrl[data-action="ipa"].active {
    background: #fb7299;
}

/* Play button - same size but blue */
.mandarin-ctrl-item.play-item .mandarin-ctrl {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    background: #00a1d6;
    color: var(--white);
}

.mandarin-ctrl-item.play-item .mandarin-ctrl svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.mandarin-ctrl-item.play-item .mandarin-ctrl:hover {
    background: #0089b8;
}

/* Pause button - same size, pink */
.mandarin-ctrl-item.pause-item .mandarin-ctrl {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    background: #fb7299;
    color: var(--white);
}

.mandarin-ctrl-item.pause-item .mandarin-ctrl svg {
    width: 20px;
    height: 20px;
}

.mandarin-ctrl-item.pause-item .mandarin-ctrl:hover {
    background: #f0507d;
}

/* Current Subtitle Display */
.mandarin-current-sub {
    padding: 16px;
    background: var(--gray-50);
    border-radius: 8px;
    min-height: 80px;
    margin-bottom: 12px;
}

.mandarin-current-en {
    font-size: 18px;
    color: var(--gray-800);
    line-height: 1.6;
    margin-bottom: 4px;
}

.mandarin-current-zh {
    font-size: 15px;
    color: var(--gray-500);
    line-height: 1.5;
}

/* Speaker Info */
.mandarin-speaker-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--gray-500);
    padding-top: 8px;
}

.mandarin-speaker {
    color: var(--blue);
}

/* ========== SUBTITLE SIDE ========== */
.mandarin-subtitle-side {
    flex: 0 0 50%;
    max-width: 50%;
    border-left: none;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    max-height: calc(100vh - 60px);
    position: sticky;
    top: 60px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    overflow: visible;
}

/* Round top corners on mode bar — no longer needed since mode bar moved to header */
/* Subtitle list gets full border-radius */
.mandarin-subtitle-list {
    border-radius: 12px;
}

/* Subtitle List */
.mandarin-subtitle-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scroll-behavior: smooth;
    background: #f5f5f5;
    border-radius: 12px;
}

/* Blur overlay — now covers full subtitle-side */
.mandarin-blur-overlay {
    top: 0;
}

.mandarin-sub-item {
    padding: 14px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    margin-bottom: 8px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #f3f4f6;
}

.mandarin-sub-item:hover {
    background: #fafafa;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.mandarin-sub-item.active {
    background: #FFFDE6; /* v1.0.119: softer reading-line highlight (was #fef3c7) */
    box-shadow: 0 2px 8px rgba(245,158,11,0.15), 0 1px 3px rgba(0,0,0,0.04);
    border-color: #fde68a;
}

/* Highlights inside active subtitle — add outline for visibility (outline doesn't clip) */
.mandarin-sub-item.active .mandarin-highlight {
    outline: 1.5px solid currentColor;
    outline-offset: 0px;
}

.mandarin-sub-item.active .highlight-word {
    background: #fde68a;
    outline-color: #d97706;
}

.mandarin-sub-item.active .highlight-phrase {
    background: #bbf7d0;
}

.mandarin-sub-item.active .highlight-discourse {
    background: #d9f99d;
}

.mandarin-sub-item.active .highlight-idiom {
    background: #fef08a;
    outline-color: #ca8a04;
}

/* In blank mode: white card with shadow for active subtitle */
.mandarin-subtitle-list[data-lang="blank"] .mandarin-sub-item.active {
    background: #ffffff !important;
    border-left: none !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
    border-radius: 10px !important;
}

/* Non-active items in blank mode: subtle gray */
.mandarin-subtitle-list[data-lang="blank"] .mandarin-sub-item:not(.active) {
    background: #f5f5f5 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* IPA display */
.mandarin-sub-ipa {
    font-size: 13px;
    color: #6b7280;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
    margin-bottom: 4px;
    display: none;
}

/* Show IPA when ipa mode is active */
.mandarin-subtitle-list.show-ipa .mandarin-sub-ipa {
    display: block;
}

.mandarin-sub-en {
    font-size: 20px; /* v1.0.39: CHINESE line (inverted naming) — larger */
    color: var(--gray-900);
    line-height: 1.7;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 4px;
    padding-bottom: 2px;
}

/* v1.0.39: ShadowRead-style per-word ruby (pinyin above each word + category underline) */
.mandarin-sub-ruby { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px 10px; margin-bottom: 4px; }
.rw-unit { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
/* v1.0.66: pinyin row defaults to visible (was hidden behind .show-ipa).
   The four subtitle lines (hanzi/pinyin/IPA/english) now toggle
   independently via .hide-hanzi / .hide-pinyin / .hide-english classes
   (subtractive) and .show-ipa (additive, IPA-only). */
.rw-py { font-size: 15px; color: #6b7280; display: block; white-space: nowrap; margin-bottom: 3px; letter-spacing: 0; }
.mandarin-subtitle-list.hide-pinyin .rw-py,
.mandarin-mobile-subtitle-list.hide-pinyin .rw-py { display: none; }
/* hide-hanzi keeps ruby column width so pinyin/IPA stay aligned */
.mandarin-subtitle-list.hide-hanzi .rw-zh,
.mandarin-mobile-subtitle-list.hide-hanzi .rw-zh { visibility: hidden; }
.mandarin-subtitle-list.hide-hanzi .mandarin-sub-en:not(.mandarin-sub-ruby),
.mandarin-mobile-subtitle-list.hide-hanzi .mandarin-mobile-sub-en-text { display: none; }
.mandarin-subtitle-list.hide-english .mandarin-sub-zh,
.mandarin-mobile-subtitle-list.hide-english .mandarin-mobile-sub-zh-text { display: none; }
.mandarin-mobile-sub-en-text .mandarin-sub-ruby { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 11px; }
/* v1.0.79 (#3 字体不对): subtitle hanzi in a Kaishu (楷書) calligraphy face when the
   device has one. Falls back to the previous CJK sans-serif on devices without a
   Kaishu font (most Android), so the look only ever improves, never regresses. */
.rw-zh { font-family: "Kaiti SC","STKaiti",KaiTi,"DFKai-SB","BiauKai","TW-Kai","AR PL UKai CN","華康楷書体W5","PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif; font-size: 21px; color: #1f2937; font-weight: 500; border-bottom: 3px solid transparent; padding-bottom: 1px; letter-spacing: 0; }
.rw-unit.mandarin-highlight { background: transparent !important; border-bottom: none !important; color: inherit !important; padding: 0 !important; cursor: pointer; }
.rw-unit.mandarin-highlight .rw-zh { border-bottom-color: var(--rwc, #9ca3af); }
.rw-unit.mandarin-highlight:hover .rw-zh { background: rgba(0,0,0,0.05); border-radius: 3px; }

/* v1.0.72 (SS6-7): "current word" box that follows the spoken word along
   the subtitle line, inspired by the TikTok ShadowRead reference. A thin
   tan box wraps the active .rw-unit; siblings stay flat. Transition gives
   a smooth slide as `.rw-current` moves between units (the JS swaps the
   class on every word boundary; word boundaries come from word_timestamps
   when present, or are estimated uniformly across the sub duration). */
.rw-unit {
    position: relative; /* v1.0.119: anchor the current-word English gloss */
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 2px 6px 1px;
    transition: background .18s ease, border-color .18s ease;
}
/* v1.0.119: English meaning shown under the word currently being read. */
.rw-gloss {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    background: #1f2937;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    padding: 3px 8px;
    border-radius: 7px;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.rw-gloss::after { /* little upward pointer */
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1f2937;
}
.rw-unit.rw-current {
    background: #fffbeb;
    border-color: #f59e0b;
    box-shadow: 0 1px 3px rgba(245,158,11,.18);
}
.rw-unit.rw-current .rw-py {
    color: #b45309;
    font-weight: 700;
}
.rw-unit.rw-current .rw-zh {
    color: #92400e;
}
@media (prefers-color-scheme: dark) {
    .rw-unit.rw-current { background: rgba(245,158,11,.16); border-color: #fbbf24; }
    .rw-unit.rw-current .rw-py { color: #fbbf24; }
    .rw-unit.rw-current .rw-zh { color: #fcd34d; }
}
@media (max-width: 1024px) {
    .rw-zh { font-size: 23px; }
    .rw-py { font-size: 16px; }
    .mandarin-sub-ruby { gap: 4px 11px; }
}

.mandarin-sub-zh {
    font-size: 14px; /* v1.0.39: ENGLISH line — keep secondary */
    color: var(--gray-500);
    line-height: 1.5;
}

/* Language modes */
.mandarin-subtitle-list[data-lang="en"] .mandarin-sub-zh { display: none; }
.mandarin-subtitle-list[data-lang="zh"] .mandarin-sub-en { display: none; }

/* Dictation mode */
.mandarin-sub-dictation {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mandarin-dictation-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 15px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.mandarin-dictation-input:focus {
    border-color: #3b82f6;
}

.mandarin-dictation-input.correct {
    border-color: #22c55e;
    background: #f0fdf4;
}

.mandarin-dictation-input.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
}

.mandarin-dictation-reveal {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.15s;
}

.mandarin-dictation-reveal:hover {
    background: #e5e7eb;
    color: #374151;
}

.mandarin-dictation-reveal.revealed {
    background: #dbeafe;
    color: #2563eb;
}

/* Dictation mode - show input, hide text and Chinese */
.mandarin-subtitle-list[data-lang="dictation"] .mandarin-sub-en { display: none; }
.mandarin-subtitle-list[data-lang="dictation"] .mandarin-sub-dictation { display: flex; }
.mandarin-subtitle-list[data-lang="dictation"] .mandarin-sub-zh { display: none; }

/* Dictation mode — reference-site style: IPA + "..." input + eye icon */
.mandarin-subtitle-list[data-lang="dictation"] .mandarin-sub-ipa { display: block !important; }
.mandarin-subtitle-list[data-lang="dictation"] .mandarin-dictation-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    background: #f9fafb;
}
.mandarin-subtitle-list[data-lang="dictation"] .mandarin-dictation-reveal {
    width: 32px;
    height: 32px;
}

/* Sub-text needs flex:1 for read/cn2en layouts */
.mandarin-sub-text {
    flex: 1;
    min-width: 0;
}

/* ========== BLUR / HIDE SUBTITLES OVERLAY ========== */
.mandarin-subtitle-list.blurred {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.mandarin-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255,255,255,0.3);
    border-radius: 12px;
}

.mandarin-blur-overlay-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
}

.mandarin-blur-overlay-text svg {
    color: #6b7280;
}

.mandarin-blur-hint {
    font-size: 13px;
    font-weight: 400;
    color: #9ca3af;
}

/* Eye icon toggle state */
.mandarin-mode-icon-btn[data-action="toggle-blur"].active {
    color: #374151;
}

.mandarin-mode-icon-btn[data-action="toggle-blur"].active .eye-open-icon {
    display: none;
}

.mandarin-mode-icon-btn[data-action="toggle-blur"].active .eye-closed-icon {
    display: block !important;
}

/* Read mode — English only, numbered list with expand chevron */
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-zh { display: none; }
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-meta { display: none !important; }
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-ipa { display: none; }
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-dictation { display: none; }
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    padding: 14px 16px !important;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
}
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-item .mandarin-sub-num-inline {
    display: flex !important;
}
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-en {
    font-size: 16px !important;
    line-height: 1.7 !important;
    flex: 1;
}
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-item .mandarin-sub-expand-btn {
    display: flex !important;
}
/* When expanded in read mode, show Chinese */
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-item.expanded .mandarin-sub-zh {
    display: block !important;
    margin-top: 8px;
    color: #6b7280;
    font-size: 14px;
}

/* CN→EN mode — Chinese only with expand chevron to reveal English */
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-en { display: none; }
/* v1.0.37: keep pinyin visible in CN→EN drill (English learners of Chinese
   need the reading; only the English meaning is hidden until expand). */
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-ipa { display: block; }
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-meta { display: none !important; }
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-dictation { display: none; }
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    padding: 14px 16px !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
}
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-item .mandarin-sub-num-inline {
    display: flex !important;
}
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-zh {
    font-size: 15px !important;
    line-height: 1.7 !important;
    flex: 1;
    color: #1f2937;
}
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-item .mandarin-sub-expand-btn {
    display: flex !important;
}
/* When expanded in cn2en mode, show English */
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-item.expanded .mandarin-sub-en {
    display: block !important;
    margin-top: 8px;
    font-size: 15px;
}
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-item.expanded .mandarin-sub-ipa {
    display: block !important;
}

/* Inline number (hidden by default, shown in read/cn2en modes) */
.mandarin-sub-num-inline {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font-size: 14px;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 2px;
}

/* Expand chevron button (hidden by default, shown in read/cn2en modes) */
.mandarin-sub-expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s;
    padding: 0;
}

.mandarin-sub-expand-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.mandarin-sub-item.expanded .mandarin-sub-expand-btn svg {
    transform: rotate(180deg);
}

/* When answer is revealed */
.mandarin-sub-item.revealed .mandarin-sub-en { display: block !important; }

/* Blank mode (挖空) - hide keywords with category colors */
/* Base: hide text but keep category bg */
.mandarin-subtitle-list[data-lang="blank"] .mandarin-highlight {
    color: transparent !important;
    user-select: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    border: 1.5px solid rgba(0,0,0,0.08) !important;
    border-radius: 4px;
    min-width: 2em;
    display: inline-block;
}

.mandarin-subtitle-list[data-lang="blank"] .highlight-phrase {
    background: #dcfce7 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-phrasal_verb {
    background: #fce7f3 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-collocation {
    background: #dbeafe !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-proper_noun {
    background: #f3e8ff !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-word {
    background: #fef3c7 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-discourse {
    background: #ecfccb !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-idiom {
    background: #fef9c3 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-slang {
    background: #ede9fe !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-adverb {
    background: #ffedd5 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-adjective {
    background: #cffafe !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-verb {
    background: #fee2e2 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-noun {
    background: #e0f2fe !important;
    color: transparent !important;
}

/* When keyword is revealed (clicked) */
.mandarin-subtitle-list[data-lang="blank"] .mandarin-highlight.blank-revealed {
    color: inherit !important;
    cursor: pointer;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-phrase {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-phrasal_verb {
    background: #fce7f3 !important;
    color: #9d174d !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-collocation {
    background: #dbeafe !important;
    color: #1e40af !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-proper_noun {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-word {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-discourse {
    background: #ecfccb !important;
    color: #3f6212 !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-idiom {
    background: #fef9c3 !important;
    color: #854d0e !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-slang {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-adverb {
    background: #ffedd5 !important;
    color: #c2410c !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-adjective {
    background: #cffafe !important;
    color: #155e75 !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-verb {
    background: #fee2e2 !important;
    color: #991b1b !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-noun {
    background: #e0f2fe !important;
    color: #075985 !important;
}

/* New categories (v4.4.0) */
.mandarin-subtitle-list[data-lang="blank"] .highlight-spoken_pattern {
    background: #fdf2f8 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-idiom_expr {
    background: #fff1f2 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .highlight-sentence {
    background: #f0fdf4 !important;
    color: transparent !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-spoken_pattern {
    background: #fdf2f8 !important;
    color: #a21caf !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-idiom_expr {
    background: #fff1f2 !important;
    color: #be123c !important;
}
.mandarin-subtitle-list[data-lang="blank"] .blank-revealed.highlight-sentence {
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.mandarin-sub-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray-400);
}

.mandarin-sub-meta-left {
    display: flex !important;
    align-items: center;
    gap: 8px;
    order: -1 !important;
}

.mandarin-sub-meta-right {
    display: flex !important;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    order: 1 !important;
    margin-left: auto !important;
}

.mandarin-sub-num {
    font-weight: 500;
}

.mandarin-sub-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s;
}

.mandarin-sub-action svg {
    width: 16px;
    height: 16px;
}

.mandarin-sub-action:hover {
    color: #fb7299;
    background: #fff0f3;
}

/* Favorite button active state */
.mandarin-sub-action[data-action="favorite"].favorited {
    color: #fb7299;
}

.mandarin-sub-action[data-action="favorite"].favorited svg {
    fill: #fb7299;
}

/* Favorited subtitle item */
.mandarin-sub-item.subtitle-favorited {
    background: #fff0f3;
}

/* Note button active state */
.mandarin-sub-action[data-action="note"].has-note {
    color: #fb7299;
}

.mandarin-sub-action[data-action="note"].has-note svg {
    fill: #fce4ec;
}

/* Copy button copied state */
.mandarin-sub-action[data-action="copy"].copied {
    color: #fb7299;
}

/* Voice button speaking state */
/* Desktop voice button: hover → pink */
.mandarin-sub-action.mandarin-voice-btn .voice-state-mic svg {
    transition: stroke 0.2s, transform 0.2s;
}
.mandarin-sub-action.mandarin-voice-btn:hover .voice-state-mic svg {
    stroke: #fb7299 !important;
    transform: scale(1.15);
}

/* Recording state */
.mandarin-sub-action.mandarin-voice-btn.recording .voice-state-mic {
    display: none !important;
}
.mandarin-sub-action.mandarin-voice-btn.recording .voice-state-recording {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #fce4ec !important;
    animation: pulse-rec-bg 0.9s ease-in-out infinite !important;
    color: #fb7299 !important;
}
.mandarin-sub-action.mandarin-voice-btn.recording .voice-state-recording svg {
    fill: #fb7299 !important;
}

/* Desktop inline recording buttons */
/* Rec buttons hidden by default - shown only after recording */
.mandarin-sub-action.mandarin-rec-preview-btn,
.mandarin-sub-action.mandarin-rec-save-btn,
.mandarin-sub-action.mandarin-rec-list-toggle-btn,
.mandarin-mobile-sub-action.mandarin-rec-preview-btn,
.mandarin-mobile-sub-action.mandarin-rec-save-btn,
.mandarin-mobile-sub-action.mandarin-rec-list-toggle-btn {
    display: none !important;
}
/* Show when JS sets inline style to display:'' or 'flex' */
.mandarin-sub-action.mandarin-rec-preview-btn[style*="display: flex"],
.mandarin-sub-action.mandarin-rec-preview-btn[style*="display:flex"],
.mandarin-sub-action.mandarin-rec-save-btn[style*="display: flex"],
.mandarin-sub-action.mandarin-rec-save-btn[style*="display:flex"],
.mandarin-sub-action.mandarin-rec-list-toggle-btn[style*="display: flex"],
.mandarin-sub-action.mandarin-rec-list-toggle-btn[style*="display:flex"],
.mandarin-mobile-sub-action.mandarin-rec-preview-btn[style*="display: flex"],
.mandarin-mobile-sub-action.mandarin-rec-preview-btn[style*="display:flex"],
.mandarin-mobile-sub-action.mandarin-rec-save-btn[style*="display: flex"],
.mandarin-mobile-sub-action.mandarin-rec-save-btn[style*="display:flex"],
.mandarin-mobile-sub-action.mandarin-rec-list-toggle-btn[style*="display: flex"],
.mandarin-mobile-sub-action.mandarin-rec-list-toggle-btn[style*="display:flex"] {
    display: flex !important;
}
/* Preview button (play icon) */
.mandarin-sub-action.mandarin-rec-preview-btn svg { fill: #22c55e !important; stroke: none !important; }
.mandarin-sub-action.mandarin-rec-preview-btn:hover svg { fill: #16a34a !important; }
.mandarin-sub-action.mandarin-rec-preview-btn.playing svg { fill: #f97316 !important; }
/* Save button (上矢印) */
.mandarin-sub-action.mandarin-rec-save-btn svg { stroke: #00a1d6 !important; }
.mandarin-sub-action.mandarin-rec-save-btn:hover svg { stroke: #0089b8 !important; }
/* List toggle button */
.mandarin-sub-action.mandarin-rec-list-toggle-btn svg { stroke: #6b7280 !important; }
.mandarin-sub-action.mandarin-rec-list-toggle-btn:hover svg { stroke: #00a1d6 !important; }

/* Mobile rec button colors */
.mandarin-mobile-sub-action.mandarin-rec-preview-btn svg { fill: #22c55e !important; stroke: none !important; }
.mandarin-mobile-sub-action.mandarin-rec-preview-btn.playing svg { fill: #f97316 !important; }
.mandarin-mobile-sub-action.mandarin-rec-save-btn svg { stroke: #00a1d6 !important; fill: none !important; }
.mandarin-mobile-sub-action.mandarin-rec-list-toggle-btn svg { stroke: #6b7280 !important; fill: none !important; }

/* Follow record item styles */
.mandarin-follow-record-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-follow-record-item .rec-play-btn,
.mandarin-follow-record-item .rec-delete-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.mandarin-follow-record-item .rec-play-btn { color: #22c55e; }
.mandarin-follow-record-item .rec-play-btn.playing { color: #f97316; }
.mandarin-follow-record-item .rec-delete-btn { color: #ef4444; }
.mandarin-follow-record-item .rec-date {
    flex: 1;
    font-size: 12px;
    color: #9ca3af;
}

/* Voice button playing state (legacy compat) */
.mandarin-sub-action[data-action="voice"].playing {
    color: #3b82f6;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-recording {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.1);
    }
}

/* Note input area */
.mandarin-sub-note-area {
    margin-top: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.mandarin-note-input {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.mandarin-note-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.mandarin-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.mandarin-note-cancel {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
}

.mandarin-note-cancel:hover {
    background: #f3f4f6;
}

.mandarin-note-save {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #00a1d6;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.mandarin-note-save:hover {
    background: #0089b8;
}

/* Saved note display */
.mandarin-sub-note-display {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 13px;
    color: #92400e;
}

/* v6.4.44: in the 中译英 mode the user is practicing translating Chinese
   to English — seeing their own note (which typically contains English
   hints) gives away the answer. User explicitly asked to hide notes here
   (Image 6). Other modes unchanged — notes still show in 双语/英语/中文/
   阅读/挖空 as normal. */
.mandarin-subtitle-list[data-lang="cn2en"] .mandarin-sub-note-display {
    display: none !important;
}

/* v6.4.64: 阅读 (reading) mode renders subtitle items as a flex row
   (number + English + expand-chevron). The .mandarin-sub-note-display
   element was not hidden, so saved notes were rendered as an extra
   flex child that squished into a narrow pill on the right side of
   the subtitle (looked like a rogue tag, not a note). User reported
   this explicitly as unwanted. Hide notes in read mode the same way
   cn2en mode does above — notes still show in 双语 / 英语 / 中文 / 挖空. */
.mandarin-subtitle-list[data-lang="read"] .mandarin-sub-note-display {
    display: none !important;
}

.mandarin-sub-time {
    /* No special margin needed — sits next to number in meta-left */
}

/* ========== HIGHLIGHT STYLES ========== */
.mandarin-highlight {
    /* v1.0.38: ShadowRead-style — colored underline by category instead of a
       background pill. Text stays in the category colour; the 3px bottom border
       uses the same colour (currentColor). Per-category background is suppressed. */
    background: transparent !important;
    padding: 0 1px 2px;
    border-radius: 0;
    font-weight: 600;
    display: inline;
    line-height: 1.6;
    border-bottom: 3px solid currentColor;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
}

.mandarin-highlight:hover {
    background: rgba(0,0,0,0.04) !important;
    box-shadow: none;
}

.highlight-phrase {
    background: #dcfce7;
    color: #166534;
}

.highlight-phrasal_verb {
    background: #fce7f3;
    color: #9d174d;
}

.highlight-collocation {
    background: #dbeafe;
    color: #1e40af;
}

.highlight-proper_noun {
    background: #f3e8ff;
    color: #6b21a8;
}

.highlight-word {
    background: #fef3c7;
    color: #92400e;
}

.highlight-discourse {
    background: #ecfccb;
    color: #3f6212;
}

.highlight-idiom {
    background: #fef9c3;
    color: #854d0e;
}

.highlight-slang {
    background: #ede9fe;
    color: #5b21b6;
}

.highlight-adverb {
    background: #ffedd5;
    color: #c2410c;
}

.highlight-adjective {
    background: #cffafe;
    color: #155e75;
}

.highlight-verb {
    background: #fee2e2;
    color: #991b1b;
}

.highlight-noun {
    background: #e0f2fe;
    color: #075985;
}

/* v4.4.0 new categories */
.highlight-spoken_pattern {
    background: #fdf2f8;
    color: #a21caf;
}

.highlight-idiom_expr {
    background: #fff1f2;
    color: #be123c;
}

.highlight-sentence {
    background: #f0fdf4;
    color: #166534;
}

/* ========== SECTIONS ========== */
.mandarin-section {
    padding: 24px 20px;
    border-bottom: 1px solid var(--gray-200);
}

.mandarin-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.mandarin-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #191919 !important;
}

.mandarin-section-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mandarin-collapse-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: var(--white);
    cursor: pointer;
    font-size: 16px;
    color: var(--gray-500);
}

.mandarin-toggle-lang,
.mandarin-print-btn {
    padding: 6px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: var(--white);
    font-size: 13px;
    cursor: pointer;
    color: var(--gray-600);
}

.mandarin-toggle-lang:hover,
.mandarin-print-btn:hover {
    background: var(--gray-50);
}

/* ========== CATEGORY TABS ========== */
.mandarin-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.mandarin-tab {
    padding: 8px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    background: var(--white);
    font-size: 14px;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.15s;
}

.mandarin-tab:hover {
    border-color: var(--gray-400);
}

.mandarin-tab.active {
    font-weight: 600;
}

/* Category-specific colors for tabs - always colored */
.mandarin-tab[data-category="all"] {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #374151;
}
.mandarin-tab[data-category="all"].active {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.mandarin-tab[data-category="phrase"] {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
.mandarin-tab[data-category="phrase"].active {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.mandarin-tab[data-category="phrasal_verb"] {
    background: #fce7f3;
    border-color: #f9a8d4;
    color: #9d174d;
}
.mandarin-tab[data-category="phrasal_verb"].active {
    background: #f43f5e;
    border-color: #f43f5e;
    color: #fff;
}

.mandarin-tab[data-category="collocation"] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}
.mandarin-tab[data-category="collocation"].active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.mandarin-tab[data-category="proper_noun"] {
    background: #fce7f3;
    border-color: #f9a8d4;
    color: #9d174d;
}
.mandarin-tab[data-category="proper_noun"].active {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
}

.mandarin-tab[data-category="word"] {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.mandarin-tab[data-category="word"].active {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

.mandarin-tab[data-category="discourse"] {
    background: #ecfccb;
    border-color: #bef264;
    color: #3f6212;
}
.mandarin-tab[data-category="discourse"].active {
    background: #84cc16;
    border-color: #84cc16;
    color: #fff;
}

.mandarin-tab[data-category="adverb"] {
    background: #ffedd5;
    border-color: #fdba74;
    color: #c2410c;
}
.mandarin-tab[data-category="adverb"].active {
    background: #ea580c;
    border-color: #ea580c;
    color: #fff;
}

.mandarin-tab[data-category="adjective"] {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #0e7490;
}
.mandarin-tab[data-category="adjective"].active {
    background: #06b6d4;
    border-color: #06b6d4;
    color: #fff;
}

.mandarin-tab[data-category="idiom_expr"] {
    background: #fff1f2;
    border-color: #fda4af;
    color: #be123c;
}
.mandarin-tab[data-category="idiom_expr"].active {
    background: #e11d48;
    border-color: #e11d48;
    color: #fff;
}

.mandarin-tab[data-category="idiom"] {
    background: #fef9c3;
    border-color: #fde047;
    color: #854d0e;
}
.mandarin-tab[data-category="idiom"].active {
    background: #ca8a04;
    border-color: #ca8a04;
    color: #fff;
}

.mandarin-tab[data-category="slang"] {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #5b21b6;
}
.mandarin-tab[data-category="slang"].active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.mandarin-tab[data-category="sentence"] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.mandarin-tab[data-category="sentence"].active {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.mandarin-tab[data-category="spoken_pattern"] {
    background: #fdf2f8;
    border-color: #f9a8d4;
    color: #9d174d;
}
.mandarin-tab[data-category="spoken_pattern"].active {
    background: #db2777;
    border-color: #db2777;
    color: #fff;
}

.mandarin-tab[data-category="favorited"] {
    background: var(--white);
    border-color: #fb7299;
}

.mandarin-tab[data-category="favorited"].active {
    background: #fce4ec;
    border-color: #fb7299;
    color: #c2185b;
}

.mandarin-tab .tab-star {
    color: #fb7299;
}

/* Tab wrapper for tooltip */
.mandarin-tab-wrap {
    position: relative;
    display: inline-block;
}

.mandarin-tab-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fef3c7;
    color: #854d0e;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 100;
}

.mandarin-tab-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fef3c7;
}

.mandarin-tab-wrap:hover .mandarin-tab-tooltip {
    opacity: 1;
    visibility: visible;
}

.mandarin-batch-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: #00a1d6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--white);
    transition: all 0.15s;
}

.mandarin-batch-btn:hover {
    background: #0089b8;
}

.mandarin-batch-btn-wrap {
    position: relative;
    display: inline-block;
}

.mandarin-batch-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fef3c7;
    color: #854d0e;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 100;
}

.mandarin-batch-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fef3c7;
}

.mandarin-batch-btn-wrap:hover .mandarin-batch-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Empty state for no matching cards */
.mandarin-expr-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
    font-size: 16px;
}

/* ========== EXPRESSION CARDS GRID ========== */
.mandarin-expr-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 1200px) {
    .mandarin-expr-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .mandarin-expr-grid {
        grid-template-columns: 1fr !important;
    }
}

.mandarin-card {
    border-radius: 12px !important;
    padding: 14px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Hidden card class for filtering */
.mandarin-card.hidden-card {
    display: none !important;
}

.mandarin-card-links {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
}

.mandarin-link {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

.mandarin-link.y { background: #e74c3c !important; color: #fff !important; }
.mandarin-link.b { background: #3b82f6 !important; color: #fff !important; }
.mandarin-link.c { background: #0891b2 !important; color: #fff !important; }
a.mandarin-link,
a.mandarin-link:link,
a.mandarin-link:visited,
a.mandarin-link:hover,
a.mandarin-link:active,
.et_pb_module a.mandarin-link,
.entry-content a.mandarin-link {
    color: #fff !important;
    text-decoration: none !important;
}

.mandarin-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    padding-right: 90px !important;
    flex-wrap: wrap !important;
}

.mandarin-audio-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.mandarin-accent-label {
    font-size: 12px;
    color: var(--gray-500);
}

.mandarin-ipa {
    font-size: 12px;
    color: var(--gray-500);
}

.mandarin-type {
    margin-left: auto;
    font-size: 12px;
    color: var(--gray-500);
}

/* v1.0.64: pinyin shown on the card face (diacritic pinyin, not IPA) */
.mandarin-pinyin {
    font-family: "Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
    color: #0d9488;
    font-weight: 600;
    letter-spacing: .01em;
}

/* v1.0.64: HSK level chips on the card face */
.mandarin-card-levels {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.mandarin-card-level {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(13,148,136,.12);
    color: #0f766e;
    white-space: nowrap;
}

/* Category color dot indicator */
.mandarin-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
/* Category card background colors */
.mandarin-card[data-category="phrase"] { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; }
.mandarin-card[data-category="phrasal_verb"] { background: #fff1f2 !important; border: 1px solid #fecdd3 !important; }
.mandarin-card[data-category="collocation"] { background: #eef2ff !important; border: 1px solid #c7d2fe !important; }
.mandarin-card[data-category="proper_noun"] { background: #f3e8ff !important; border: 1px solid #e9d5ff !important; }
.mandarin-card[data-category="word"] { background: #fff7ed !important; border: 1px solid #fed7aa !important; }
.mandarin-card[data-category="discourse"] { background: #f7fee7 !important; border: 1px solid #d9f99d !important; }
.mandarin-card[data-category="idiom"] { background: #fefce8 !important; border: 1px solid #fde68a !important; }
.mandarin-card[data-category="slang"] { background: #faf5ff !important; border: 1px solid #e9d5ff !important; }
.mandarin-card[data-category="adjective"] { background: #ecfeff !important; border: 1px solid #a5f3fc !important; }
.mandarin-card[data-category="adverb"] { background: #fffbeb !important; border: 1px solid #fde68a !important; }
.mandarin-card[data-category="verb"] { background: #fef2f2 !important; border: 1px solid #fecaca !important; }
.mandarin-card[data-category="noun"] { background: #f0f9ff !important; border: 1px solid #bae6fd !important; }
.mandarin-card[data-category="idiom_expr"] { background: #fff1f2 !important; border: 1px solid #fecdd3 !important; }
.mandarin-card[data-category="spoken_pattern"] { background: #fdf2f8 !important; border: 1px solid #fbcfe8 !important; }
.mandarin-card[data-category="sentence"] { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; }

/* Mobile card background colors */
.mandarin-mobile-card[data-category="phrase"] { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; }
.mandarin-mobile-card[data-category="phrasal_verb"] { background: #fff1f2 !important; border: 1px solid #fecdd3 !important; }
.mandarin-mobile-card[data-category="collocation"] { background: #eef2ff !important; border: 1px solid #c7d2fe !important; }
.mandarin-mobile-card[data-category="proper_noun"] { background: #f3e8ff !important; border: 1px solid #e9d5ff !important; }
.mandarin-mobile-card[data-category="word"] { background: #fff7ed !important; border: 1px solid #fed7aa !important; }
.mandarin-mobile-card[data-category="discourse"] { background: #f7fee7 !important; border: 1px solid #d9f99d !important; }
.mandarin-mobile-card[data-category="idiom"] { background: #fefce8 !important; border: 1px solid #fde68a !important; }
.mandarin-mobile-card[data-category="slang"] { background: #faf5ff !important; border: 1px solid #e9d5ff !important; }
.mandarin-mobile-card[data-category="adjective"] { background: #ecfeff !important; border: 1px solid #a5f3fc !important; }
.mandarin-mobile-card[data-category="adverb"] { background: #fffbeb !important; border: 1px solid #fde68a !important; }
.mandarin-mobile-card[data-category="verb"] { background: #fef2f2 !important; border: 1px solid #fecaca !important; }
.mandarin-mobile-card[data-category="noun"] { background: #f0f9ff !important; border: 1px solid #bae6fd !important; }

/* Override category backgrounds for compact list view */
#panel-cards .mandarin-mobile-card,
#panel-cards .mandarin-mobile-card[data-category] {
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
#panel-cards .mandarin-mobile-card.expanded,
#panel-cards .mandarin-mobile-card.expanded[data-category] {
    background: #fffbeb !important;
}

.mandarin-card[data-category="phrase"] .mandarin-cat-dot { background: #22c55e; }
.mandarin-card[data-category="phrasal_verb"] .mandarin-cat-dot { background: #f43f5e; }
.mandarin-card[data-category="collocation"] .mandarin-cat-dot { background: #6366f1; }
.mandarin-card[data-category="proper_noun"] .mandarin-cat-dot { background: #a855f7; }
.mandarin-card[data-category="word"] .mandarin-cat-dot { background: #f97316; }
.mandarin-card[data-category="discourse"] .mandarin-cat-dot { background: #84cc16; }
.mandarin-card[data-category="idiom"] .mandarin-cat-dot { background: #eab308; }
.mandarin-card[data-category="slang"] .mandarin-cat-dot { background: #a855f7; }
.mandarin-card[data-category="adjective"] .mandarin-cat-dot { background: #06b6d4; }
.mandarin-card[data-category="adverb"] .mandarin-cat-dot { background: #f59e0b; }
.mandarin-card[data-category="verb"] .mandarin-cat-dot { background: #ef4444; }
.mandarin-card[data-category="noun"] .mandarin-cat-dot { background: #3b82f6; }
.mandarin-card[data-category="idiom_expr"] .mandarin-cat-dot { background: #e11d48; }
.mandarin-card[data-category="spoken_pattern"] .mandarin-cat-dot { background: #db2777; }
.mandarin-card[data-category="sentence"] .mandarin-cat-dot { background: #16a34a; }

/* Mobile card dot colors */
.mandarin-mobile-card[data-category="phrase"] .mandarin-cat-dot { background: #22c55e; }
.mandarin-mobile-card[data-category="phrasal_verb"] .mandarin-cat-dot { background: #f43f5e; }
.mandarin-mobile-card[data-category="collocation"] .mandarin-cat-dot { background: #6366f1; }
.mandarin-mobile-card[data-category="proper_noun"] .mandarin-cat-dot { background: #a855f7; }
.mandarin-mobile-card[data-category="word"] .mandarin-cat-dot { background: #f97316; }
.mandarin-mobile-card[data-category="discourse"] .mandarin-cat-dot { background: #84cc16; }
.mandarin-mobile-card[data-category="idiom"] .mandarin-cat-dot { background: #eab308; }
.mandarin-mobile-card[data-category="slang"] .mandarin-cat-dot { background: #a855f7; }
.mandarin-mobile-card[data-category="adjective"] .mandarin-cat-dot { background: #06b6d4; }
.mandarin-mobile-card[data-category="adverb"] .mandarin-cat-dot { background: #f59e0b; }
.mandarin-mobile-card[data-category="verb"] .mandarin-cat-dot { background: #ef4444; }
.mandarin-mobile-card[data-category="noun"] .mandarin-cat-dot { background: #3b82f6; }
.mandarin-mobile-card[data-category="idiom_expr"] .mandarin-cat-dot { background: #e11d48; }
.mandarin-mobile-card[data-category="spoken_pattern"] .mandarin-cat-dot { background: #db2777; }
.mandarin-mobile-card[data-category="sentence"] .mandarin-cat-dot { background: #16a34a; }

/* POS label */
.mandarin-pos {
    font-size: 11px;
    color: var(--gray-500);
    font-style: italic;
}

/* Type label colored by category */
.mandarin-card[data-category="phrase"] .mandarin-type { color: #166534; font-weight: 600; }
.mandarin-card[data-category="phrasal_verb"] .mandarin-type { color: #9d174d; font-weight: 600; }
.mandarin-card[data-category="collocation"] .mandarin-type { color: #1e40af; font-weight: 600; }
.mandarin-card[data-category="proper_noun"] .mandarin-type { color: #9d174d; font-weight: 600; }
.mandarin-card[data-category="word"] .mandarin-type { color: #92400e; font-weight: 600; }
.mandarin-card[data-category="discourse"] .mandarin-type { color: #3f6212; font-weight: 600; }

/* Mobile card type label colors */
.mandarin-mobile-card[data-category="phrase"] .mandarin-mobile-card-type { color: #166534 !important; font-weight: 600 !important; }
.mandarin-mobile-card[data-category="phrasal_verb"] .mandarin-mobile-card-type { color: #9d174d !important; font-weight: 600 !important; }
.mandarin-mobile-card[data-category="collocation"] .mandarin-mobile-card-type { color: #1e40af !important; font-weight: 600 !important; }
.mandarin-mobile-card[data-category="proper_noun"] .mandarin-mobile-card-type { color: #9d174d !important; font-weight: 600 !important; }
.mandarin-mobile-card[data-category="word"] .mandarin-mobile-card-type { color: #92400e !important; font-weight: 600 !important; }
.mandarin-mobile-card[data-category="discourse"] .mandarin-mobile-card-type { color: #3f6212 !important; font-weight: 600 !important; }

.mandarin-card-word {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mandarin-fav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--gray-300);
    transition: color 0.15s;
}

.mandarin-fav-btn:hover {
    color: #fb7299;
}

.mandarin-fav-btn.favorited,
.mandarin-fav-btn.saved {
    color: #fb7299;
}

.mandarin-card-word h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.3;
}

.mandarin-card-meaning {
    margin-bottom: 10px;
}

.mandarin-meaning-zh {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.mandarin-meaning-en {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.5;
}

.mandarin-card-example {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 10px;
}

.mandarin-card-example .example-label {
    color: var(--gray-500);
}

.mandarin-card-example .example-en {
    font-style: italic;
}

.mandarin-card-example .example-zh {
    color: var(--gray-500);
    font-size: 12px;
    margin-top: 2px;
}

.mandarin-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

/* Collocations */

/* Connected white background for meaning + example + collocations */
.mandarin-card-meaning,
.mandarin-card-example,
.mandarin-card-collocations {
    background: rgba(255,255,255,0.85);
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 0;
}
/* Top section always has top radius */
.mandarin-card-meaning {
    border-radius: 8px 8px 0 0;
    padding-bottom: 8px;
}
/* Meaning only (no example, no collocations after it) */
.mandarin-card-meaning:has(+ .mandarin-card-footer) {
    border-radius: 8px;
    margin-bottom: 10px;
}
/* Example gets bottom radius when collocations absent */
.mandarin-card-example:has(+ .mandarin-card-footer) {
    border-radius: 0 0 8px 8px;
    padding-bottom: 12px;
    margin-bottom: 10px;
}
/* Collocations always last content section */
.mandarin-card-collocations {
    border-radius: 0 0 8px 8px;
    padding-bottom: 12px;
    margin-bottom: 10px;
}
/* Separator lines between sections */
.mandarin-card-example {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 10px;
}
.mandarin-card-collocations {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 10px;
}

.collocations-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    display: block;
    margin-bottom: 3px;
}

.collocations-text {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.4;
}

.mandarin-occurrence {
    font-size: 13px;
    color: var(--gray-400);
}

/* v6.4.61: Prominent pill-style expand button for word-card scene lists.
   Previous version was a tiny 28px ∨ in gray — users couldn't tell it was
   clickable. Now it's a labeled pink pill with a chevron that rotates when
   expanded. The card footer keeps its space-between layout (occurrence
   text on the left, this pill on the right). */
.mandarin-card-footer {
    padding: 6px 0 2px;
    gap: 8px;
}
.mandarin-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    height: auto;
    width: auto;
    border: 1.5px solid #fb7299;
    border-radius: 999px;
    background: rgba(251, 114, 153, 0.08);
    color: #fb7299;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    letter-spacing: .02em;
    transition: background .18s, color .18s, transform .15s, box-shadow .18s;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.mandarin-expand-btn-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.mandarin-expand-btn-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mandarin-expand-btn:hover {
    background: #fb7299;
    color: #fff;
    box-shadow: 0 4px 12px rgba(251, 114, 153, 0.28);
    transform: translateY(-1px);
}

.mandarin-expand-btn:active {
    transform: translateY(0);
}

.mandarin-expand-btn.expanded {
    background: #fb7299;
    color: #fff;
}

.mandarin-expand-btn.expanded .mandarin-expand-btn-icon {
    transform: rotate(180deg);
}

/* Card Scenes */
.mandarin-card-scenes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
    max-height: 250px;
    overflow-y: auto;
}

.mandarin-scene {
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}

.mandarin-scene-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mandarin-scene-header a {
    color: var(--gray-400);
    text-decoration: none;
}

/* v6.4.80: clearer "jump to this episode" link in the scene header.
   Replaces the ambiguous floating ↗ icon with a labelled link so users
   know what it does. Opens in a new tab so the current study session
   is not interrupted. */
.mandarin-scene-header .mandarin-scene-jump-link {
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.08);
    transition: background .15s, color .15s;
}
.mandarin-scene-header .mandarin-scene-jump-link:hover {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.16);
    text-decoration: none;
}

.mandarin-scene-item {
    padding: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}

.mandarin-scene-item:hover {
    background: rgba(255,255,255,0.9);
}

.scene-en {
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.5;
}

.scene-zh {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.scene-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--gray-400);
    margin-top: 4px;
}

.scene-play {
    width: 18px;
    height: 18px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    cursor: pointer;
    position: relative;
    transition: transform .15s, background .15s;
}
.scene-play:hover {
    transform: scale(1.15);
}

/* v6.4.62: Cross-episode scene item gets a tiny ↗ arrow overlay on the
   play button so the user knows clicking will trigger the cross-episode
   audio playback (no in-place video seek; the actual jump is via the
   scene-header ↗ link, target=_blank).
   v6.4.80: Use the SAME primary green for the ▶ background as the
   in-episode case. The previous indigo (#6366f1) was hard to see against
   some backgrounds (image 1: 第 5 期 button looked invisible). The ↗
   pink badge in the corner is enough to mark it as cross-episode. */
.mandarin-scene-item.is-cross-episode .scene-play {
    background: var(--primary);
}
.mandarin-scene-item.is-cross-episode .scene-play::after {
    content: "↗";
    position: absolute;
    top: -3px;
    right: -4px;
    width: 11px;
    height: 11px;
    background: #fb7299;
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    line-height: 11px;
    text-align: center;
    font-weight: 700;
}
.mandarin-scene-item.is-cross-episode {
    cursor: pointer;
}

.scene-highlight {
    background: #fde047;
    color: #dc2626;
    font-weight: 500;
    padding: 0 2px;
}

/* ========== TRANSCRIPT SECTION ========== */
.mandarin-transcript-list {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.mandarin-transcript-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
}

.mandarin-transcript-item:hover {
    background: rgba(255,255,255,0.5);
}

.mandarin-transcript-item:last-child {
    border-bottom: none;
}

.transcript-num {
    width: 32px;
    font-size: 13px;
    color: var(--gray-400);
    flex-shrink: 0;
}

.transcript-content {
    flex: 1;
}

.transcript-en {
    font-size: 15px;
    color: var(--gray-800);
    line-height: 1.6;
}

.transcript-zh {
    font-size: 14px;
    color: var(--gray-500);
    margin-top: 4px;
    display: none;
}

.transcript-time {
    font-size: 12px;
    color: var(--gray-400);
    margin-top: 4px;
}

/* Transcript language modes */
.mandarin-transcript-list[data-lang="en"] .transcript-en { display: block; }
.mandarin-transcript-list[data-lang="en"] .transcript-zh { display: none; }
.mandarin-transcript-list[data-lang="zh"] .transcript-en { display: none; }
.mandarin-transcript-list[data-lang="zh"] .transcript-zh { display: block; }

/* ========== YOUTUBE SECTION ========== */
.mandarin-youtube-section .mandarin-section-title {
    font-weight: 700;
    color: #191919 !important;
}

.mandarin-youtube-note {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.mandarin-youtube-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin: 0 auto;
    /* Default for mobile - will be hidden anyway */
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16 / 9;
}

.mandarin-youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Hide YouTube section, controls, navigation, transcript and expressions on mobile */
@media (max-width: 768px) {
    .mandarin-youtube-section {
        display: none !important;
    }
    
    .mandarin-controls {
        display: none !important;
    }
    
    .mandarin-current-sub {
        display: none !important;
    }
    
    .mandarin-episode-nav {
        display: none !important;
    }
    
    .mandarin-transcript-section {
        display: none !important;
    }
    
    .mandarin-expressions-section {
        display: none !important;
    }
    
    /* Show expressions section when cards panel is active */
    .mandarin-expressions-section.mobile-visible {
        display: block !important;
    }
}

/* ========== EPISODE NAVIGATION ========== */
.mandarin-episode-nav {
    padding: 24px 20px 16px;
    text-align: center;
    background: var(--white);
}

.mandarin-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mandarin-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}

/* Prev button - dark */
.mandarin-nav-btn.prev {
    background: #374151;
    color: #fff;
    border: none;
}

.mandarin-nav-btn.prev:hover {
    background: #4b5563;
}

/* Next button - dark with white arrow */
.mandarin-nav-btn.next {
    background: #1f2937;
    color: #fff;
    border: none;
}

.mandarin-nav-btn.next:hover {
    background: #374151;
}

.mandarin-nav-btn.next .nav-arrow {
    color: #fff;
}

/* Prev button arrow white */
.mandarin-nav-btn.prev .nav-arrow {
    color: #fff;
}

/* Home button - white with border */
.mandarin-nav-btn.home {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.mandarin-nav-btn.home:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.mandarin-nav-btn.home .nav-icon {
    color: #f97316;
}

.mandarin-nav-btn.disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
    pointer-events: none;
}

.mandarin-feedback {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.mandarin-feedback a {
    color: var(--primary);
    text-decoration: none;
}

.mandarin-feedback a:hover {
    text-decoration: underline;
}

.mandarin-copyright {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.mandarin-copyright a {
    color: #6b7280;
    text-decoration: underline;
}

.mandarin-copyright a:hover {
    color: var(--primary);
}

/* ========== RESPONSIVE ========== */

/* Tablet and below - stack vertically */
@media (max-width: 1024px) {
    /* Reset desktop gray background to white on mobile */
    .mandarin-player-v3 {
        background: #ffffff !important;
    }
    .mandarin-main-content {
        background: #ffffff !important;
        gap: 0 !important;
        padding: 0 !important;
        flex-direction: column !important;
    }
    /* Show mobile header on tablet */
    .mandarin-player-v3 .mandarin-mobile-header {
        display: flex !important;
    }
    /* Hide desktop header on tablet */
    .mandarin-desktop-header {
        display: none !important;
    }
    /* Hide speaker info on tablet */
    .mandarin-speaker-info {
        display: none !important;
    }
    /* Hide desktop mode bar and settings on mobile */
    .mandarin-desktop-mode-bar {
        display: none !important;
    }
    .mandarin-desktop-settings-popup {
        display: none !important;
    }
    .mandarin-dsp-backdrop {
        display: none !important;
    }
    /* Hide desktop subtitle side on tablet */
    .mandarin-player-v3 .mandarin-subtitle-side {
        display: none !important;
    }
    /* Hide bilibili-style controls on tablet (use mobile-controls footer instead) */
    .mandarin-controls {
        display: none !important;
    }
    /* Show mobile container (tabs + content) on tablet */
    .mandarin-player-v3 .mandarin-mobile-container {
        display: block !important;
        padding-bottom: 80px !important;
    }
    /* Ensure active subtitle yellow highlight on tablet */
    .mandarin-mobile-sub-item.active,
    .mandarin-player-v3 .mandarin-mobile-sub-item.active,
    #panel-normal .mandarin-mobile-sub-item.active {
        background: #FFFDE6 !important; /* v1.0.119: softer reading-line highlight */
        background-color: #FFFDE6 !important;
        border-radius: 8px !important;
    }
    /* Video side full width on tablet */
    .mandarin-player-v3 .mandarin-video-side {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Hide current subtitle display below video on tablet */
    .mandarin-current-sub {
        display: none !important;
    }
    /* Hide desktop control bar on tablet */
    .mandarin-desktop-ctrl-bar {
        display: none !important;
    }
    /* Limit video subtitle width on tablet */
    .mandarin-video-subtitle-en {
        max-width: 70% !important;
        font-size: 15px !important;
    }
    .mandarin-video-subtitle-cn {
        max-width: 70% !important;
    }

    .mandarin-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px;
    }
    
    .mandarin-header-title {
        order: -1;
        width: 100%;
        text-align: center;
        font-size: 16px;
    }
    
    .mandarin-header-left {
        flex: 1;
    }
    
    .mandarin-subtitle-toolbar-header {
        flex: 1;
        justify-content: flex-end;
    }
    
    .mandarin-header-center {
        display: none;
    }
    
    .mandarin-main-content {
        flex-direction: column;
        min-height: auto;
    }
    
    .mandarin-video-side,
    .mandarin-subtitle-side {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    
    .mandarin-subtitle-side {
        border-left: none;
        border-top: 1px solid var(--gray-200);
        max-height: 50vh;
        position: relative;
        top: 0;
    }
    
    .mandarin-expr-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .mandarin-header {
        padding: 8px 12px;
    }
    
    .mandarin-header-title {
        font-size: 15px;
    }
    
    .mandarin-header-nav {
        font-size: 13px;
    }
    
    .mandarin-subtitle-toolbar-header {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .mandarin-subtitle-label {
        display: none;
    }
    
    .mandarin-tool-btn {
        padding: 4px;
        font-size: 14px;
    }
    
    .mandarin-lang-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .mandarin-video-side {
        padding: 12px;
    }
    
    .mandarin-controls {
        display: none !important;
    }
    
    .mandarin-ctrl {
        width: 40px;
        height: 40px;
    }
    
    .mandarin-play-btn {
        width: 46px;
        height: 46px;
    }
    
    .ctrl-icon {
        font-size: 12px;
    }
    
    .ctrl-label {
        font-size: 8px;
    }
    
    .mandarin-current-sub {
        padding: 12px;
        min-height: 60px;
    }
    
    .mandarin-current-en {
        font-size: 15px;
    }
    
    .mandarin-current-zh {
        font-size: 13px;
    }
    
    .mandarin-speaker-info {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }
    
    .mandarin-subtitle-side {
        max-height: 40vh;
    }
    
    .mandarin-sub-item {
        padding: 10px;
    }
    
    .mandarin-sub-en {
        /* v1.0.38/39: this class holds the CHINESE line (fork naming is inverted). Make it the large, prominent line on mobile. */
        font-size: 22px;
        line-height: 1.75;
        letter-spacing: 0.05em;
        color: var(--gray-900);
        font-weight: 500;
    }
    
    .mandarin-sub-zh {
        /* v1.0.39: this class holds the ENGLISH line — keep it secondary/small. */
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: normal;
        color: var(--gray-500);
        font-weight: 400;
    }
    
    .mandarin-sub-meta {
        font-size: 11px;
        gap: 4px;
    }
    
    .mandarin-expr-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .mandarin-card {
        padding: 12px !important;
    }
    
    .mandarin-card-word h3 {
        font-size: 16px;
    }
    
    .mandarin-section {
        padding: 16px 12px;
    }
    
    .mandarin-section-title {
        font-size: 16px;
    }
    
    .mandarin-category-tabs {
        gap: 6px;
    }
    
    .mandarin-tab {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .mandarin-batch-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .mandarin-transcript-item {
        padding: 10px 0;
    }
    
    .transcript-num {
        width: 24px;
        font-size: 12px;
    }
    
    .transcript-en {
        font-size: 14px;
    }
    
    .transcript-zh {
        font-size: 13px;
    }
    
    .mandarin-nav-buttons {
        gap: 8px;
    }
    
    .mandarin-nav-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* ========== MOBILE LAYOUT (Reference Site Style) ========== */
@media (max-width: 768px) {
    /* Hide desktop elements */
    .mandarin-player-v3 .mandarin-subtitle-side {
        display: none !important;
    }
    
    .mandarin-player-v3 .mandarin-header-center {
        display: none !important;
    }
    
    .mandarin-player-v3 .mandarin-subtitle-toolbar-header {
        display: none !important;
    }
    
    /* Show mobile container */
    .mandarin-player-v3 .mandarin-mobile-container {
        display: block !important;
    }
    
    /* Main content full width */
    .mandarin-player-v3 .mandarin-main-content {
        flex-direction: column;
        min-height: auto;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mandarin-player-v3 .mandarin-video-side {
        flex: none;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        padding-bottom: 160px !important; /* Space for fixed controls */
    }
    
    /* 動画のスタイル（モバイル用fixedは別の@mediaで設定） */
    .mandarin-player-v3 .mandarin-video-wrapper {
        border-radius: 0;
        width: 100% !important;
        max-width: 100% !important;
        background: #000 !important;
    }
    
    /* Hide desktop controls */
    .mandarin-player-v3 .mandarin-controls {
        display: none !important;
    }
    
    .mandarin-player-v3 .mandarin-current-sub {
        display: none !important;
    }
    
    .mandarin-player-v3 .mandarin-speaker-info {
        display: none !important;
    }
    
    /* Mobile header */
    .mandarin-player-v3 .mandarin-header {
        padding: 10px 16px;
    }
    
    .mandarin-player-v3 .mandarin-header-title {
        font-size: 16px;
    }
    
    .mandarin-player-v3 .mandarin-header-left {
        gap: 8px;
    }
    
    .mandarin-player-v3 .mandarin-header-sep {
        padding: 0 8px;
        color: #d1d5db;
    }
    
    .mandarin-player-v3 .mandarin-header-nav {
        padding: 4px 0;
    }
    
    .mandarin-player-v3 .mandarin-header-right {
        gap: 20px;
    }
    
    .mandarin-player-v3 .mandarin-header-btn {
        font-size: 22px;
        padding: 4px;
    }
}

/* ========== MOBILE CONTAINER ========== */
.mandarin-mobile-container {
    display: none;
    width: 100% !important;
    max-width: 100% !important;
}

/* Desktop: ensure mobile elements are hidden (override Divi/theme conflicts) */
@media (min-width: 1025px) {
    .mandarin-mobile-container,
    .mandarin-mobile-tabs,
    .mandarin-mobile-controls,
    .mandarin-mobile-header {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
}

/* Mobile Mode Tabs */
.mandarin-mobile-tabs {
    display: flex;
    border-bottom: 2px solid var(--gray-200);
    background: var(--white);
}

/* スマホでタブを動画の下に固定 */
@media (max-width: 768px) {
    /* 動画を画面上部に固定（ヘッダー44pxの下に配置） */
    .mandarin-player-v3 .mandarin-video-wrapper {
        position: fixed !important;
        top: var(--m-hdr, 52px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vw * 9 / 16) !important;
        z-index: 999 !important;
        background: #000 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    /* 動画+ヘッダーの高さ分のスペースを確保（動画はfixed、タブはsticky） */
    .mandarin-player-v3 .mandarin-video-side {
        padding-top: calc(var(--m-hdr, 52px) + 100vw * 9 / 16) !important;
        overflow: visible !important; /* v1.0.40: use page scroll so the sticky tab bar works */
    }
    
    /* モバイルコンテナを動画の下から開始 */
    .mandarin-player-v3 .mandarin-mobile-container {
        margin-top: 0 !important;
    }
    
    /* タブを動画の下に固定（v1.0.40: fixed→sticky。stickyはフロー上で場所を取るため、
       字幕がバーの上に被らない。--m-hdr はJSで実測したヘッダー高さ。） */
    .mandarin-mobile-tabs {
        position: -webkit-sticky !important;
        position: sticky !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
        background: #fff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        /* top is set below based on header presence */
    }
    
    /* 通常時：パネルとリストの余白を完全に削除 */
    .mandarin-player-v3 .mandarin-mobile-panel,
    .mandarin-player-v3 #panel-normal,
    .mandarin-player-v3 #panel-normal.mandarin-mobile-panel,
    #panel-normal.mandarin-mobile-panel {
        padding: 0 !important;
        margin: 0 !important;
        padding-top: 8px !important;
        margin-top: 0 !important;
    }
    
    .mandarin-player-v3 .mandarin-mobile-subtitle-list,
    .mandarin-mobile-subtitle-list {
        padding: 0 !important;
        padding-top: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
    }
    
    .mandarin-player-v3 .mandarin-mobile-sub-item:first-child,
    .mandarin-mobile-sub-item:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
    
    /* ヘッダーをモバイルで表示 */
    .mandarin-player-v3 .mandarin-mobile-header {
        display: flex !important;
    }
    
    /* タブの位置 = ヘッダー実測高さ + 動画 */
    /* v1.0.71 (SS2): bottom subtitles / dynamic overlay used to bleed under the sticky
       tab row because the row had z-index 1001 but the fixed video carries its caption
       overlay that paints over the tab edge while scrolling. Lift the tab z-index above
       the video, opaque-fill it, and add a 2px shadow so scrolling subtitles disappear
       behind it cleanly. */
    .mandarin-player-v3 .mandarin-mobile-tabs,
    .mandarin-mobile-tabs {
        top: calc(var(--m-hdr, 52px) + 100vw * 9 / 16) !important;
        z-index: 1010 !important;
        background: #fff !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.06) !important;
    }
    /* Ensure the video's own caption overlay can never paint over the tab row. */
    .mandarin-player-v3 .mandarin-video-wrapper .mandarin-current-sub,
    .mandarin-player-v3 .mandarin-video-wrapper .mandarin-bottom-caption,
    .mandarin-player-v3 .mandarin-video-wrapper .mandarin-dynamic-subtitle {
        z-index: 998 !important;
    }
    
    /* コンテンツエリア：タブはstickyでフロー上に存在するため margin-top 不要 */
    .mandarin-player-v3 .mandarin-mobile-content,
    .mandarin-mobile-content {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* ========== 動画非表示時のレイアウト調整 ========== */
    /* 動画ラッパーが非表示の時、スペースを削除 */
    .mandarin-player-v3 .mandarin-video-wrapper.hidden {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 動画非表示時：ヘッダー分のみ（タブはmobile-contentのmargin-topで対応） */
    .mandarin-player-v3.video-hidden .mandarin-video-side {
        padding-top: var(--m-hdr, 52px) !important;
        margin-top: 0 !important;
    }
    .mandarin-player-v3.video-hidden .mandarin-mobile-tabs {
        top: var(--m-hdr, 52px) !important;
    }
    
    /* 動画非表示時：コンテンツのマージン（タブ分のみ、通常時と同じ） */
    .mandarin-player-v3.video-hidden .mandarin-mobile-content {
        margin-top: 46px !important;
        padding-top: 0 !important;
    }
    
    /* 動画非表示時：パネルとリストの余白を削除 */
    .mandarin-player-v3.video-hidden .mandarin-mobile-panel {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .mandarin-player-v3.video-hidden .mandarin-mobile-subtitle-list {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .mandarin-player-v3.video-hidden .mandarin-mobile-sub-item:first-child {
        margin-top: 0 !important;
        padding-top: 12px !important; /* 最初の字幕の上に少しスペースを追加 */
    }
}

.mandarin-mobile-tab {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    position: relative;
}

.mandarin-mobile-tab.active {
    color: #fb7299;
}

.mandarin-mobile-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #fb7299;
}

/* Mobile Content Area */
.mandarin-mobile-content {
    min-height: auto;
    background: var(--white);
    padding-bottom: 100px; /* Space for fixed footer controls */
    padding-top: 0;
}

.mandarin-mobile-panel {
    display: none;
    padding: 12px 16px 16px;
}

.mandarin-mobile-panel.active {
    display: block;
}

/* Normal panel no padding for subtitle list */
#panel-normal.mandarin-mobile-panel {
    padding: 0;
}

/* Cards panel - consistent top spacing */
#panel-cards.mandarin-mobile-panel {
    padding: 20px 6px 8px;
}

/* Ensure cards panel has spacing on mobile even with fixed tabs */
@media (max-width: 768px) {
    #panel-cards.mandarin-mobile-panel {
        padding: 16px 6px 8px !important;
    }
}

#panel-cards .mandarin-expressions-section {
    padding: 0 !important;
    margin: 0 !important;
}

#panel-cards .mandarin-section {
    padding: 8px 4px !important;
}

#panel-cards .mandarin-card {
    margin: 0 !important;
    border-radius: 10px !important;
}

/* ========== Follow (跟读) Panel Styles ========== */
#panel-follow.mandarin-mobile-panel {
    padding: 0;
    background: #fff;
}

.mandarin-follow-content {
    padding: 12px 12px 12px;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
}

.mandarin-follow-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 500;
}

.mandarin-follow-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mandarin-follow-meta-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mandarin-follow-meta-right {
    display: flex;
    align-items: center;
}

.mandarin-follow-index {
    font-weight: 500;
    font-size: 14px;
    color: #374151;
}

.mandarin-follow-fav-btn,
.mandarin-follow-note-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-follow-fav-btn:hover,
.mandarin-follow-note-btn:hover {
    color: #6b7280;
}

.mandarin-follow-fav-btn.active {
    color: #ef4444;
}

.mandarin-follow-practiced-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 2px 10px 2px 6px;
    line-height: 1;
}

.mandarin-follow-practiced-badge svg {
    color: #16a34a;
    flex-shrink: 0;
}

.mandarin-follow-time {
    font-weight: 500;
    font-size: 13px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* Subtitle Display Box - TECO style bordered area */
.mandarin-follow-subtitle-box {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 14px;
    margin-bottom: 12px;
    text-align: center;
    background: #fff;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.mandarin-follow-subtitle-box.active {
    background: #fef3c7;
    border-color: #fde68a;
    box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}

.mandarin-follow-ipa {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 6px;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.2px;
    line-height: 1.5;
    word-spacing: 1px;
}

.mandarin-follow-ipa:empty {
    display: none;
}

.mandarin-follow-en {
    font-size: 20px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.5;
    margin-bottom: 8px;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing: -0.01em;
}

.mandarin-follow-zh {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.5;
    font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

/* Recording Section - TECO style */
.mandarin-follow-record-section {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    background: #fafafa;
}

.mandarin-follow-record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mandarin-follow-record-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.mandarin-follow-record-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mandarin-follow-record-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #374151;
}

.mandarin-follow-record-item:last-child {
    border-bottom: none;
}

.mandarin-follow-record-item .rec-play-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}

.mandarin-follow-record-item .rec-play-btn:hover {
    color: #3b82f6;
}

.mandarin-follow-record-item .rec-play-btn.playing {
    color: #3b82f6;
}

.mandarin-follow-record-item .rec-date {
    flex: 1;
    font-size: 13px;
    color: #374151;
}

.mandarin-follow-record-item .rec-delete-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #ef4444;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s;
}

.mandarin-follow-record-item .rec-delete-btn:hover {
    color: #dc2626;
}

.mandarin-follow-record-empty {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    padding: 8px 0;
}

/* Recording Section */
.mandarin-follow-record {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mandarin-record-status {
    font-size: 11px;
    color: #9ca3af;
}

.mandarin-follow-record-header .mandarin-record-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-follow-record-header .mandarin-record-btn:hover {
    border-color: #f97316;
    color: #f97316;
}

.mandarin-follow-record-header .mandarin-record-btn.recording {
    border-color: #ef4444;
    background: #fef2f2;
    color: #ef4444;
    animation: pulse-recording 1.5s ease-in-out infinite;
}

.mandarin-record-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-record-btn:hover {
    border-color: #f97316;
    color: #f97316;
}

.mandarin-record-btn.recording {
    border-color: #ef4444;
    background: #fef2f2;
    color: #ef4444;
    animation: pulse-recording 1.5s ease-in-out infinite;
}

.mandarin-record-btn.recording .mic-icon {
    display: none;
}

.mandarin-record-btn.recording .stop-icon {
    display: block !important;
}

@keyframes pulse-recording {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
    }
}

.mandarin-record-status {
    font-size: 13px;
    color: #9ca3af;
    min-height: 20px;
}

.mandarin-record-status.recording {
    color: #ef4444;
    font-weight: 500;
}

.mandarin-record-playback {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Recording controls after recording */
.mandarin-record-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

.mandarin-record-control-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-record-control-btn svg,
.mandarin-record-control-btn svg * {
    pointer-events: none !important;
}

.mandarin-record-control-btn.mandarin-playback-btn {
    background: #00a1d6;
    color: #fff;
}

.mandarin-record-control-btn.mandarin-playback-btn:hover {
    background: #0089b8;
}

.mandarin-record-control-btn.mandarin-playback-btn.playing {
    background: #f97316;
}

.mandarin-record-control-btn.mandarin-delete-btn {
    background: #fee2e2;
    color: #ef4444;
}

.mandarin-record-control-btn.mandarin-delete-btn:hover {
    background: #fecaca;
}

.mandarin-record-control-btn.mandarin-upload-btn {
    background: #dbeafe;
    color: #3b82f6;
}

.mandarin-record-control-btn.mandarin-upload-btn:hover {
    background: #bfdbfe;
}

.mandarin-record-control-btn.mandarin-upload-btn.uploaded {
    background: #dcfce7;
    color: #22c55e;
}

.mandarin-record-control-btn.mandarin-upload-btn.uploading {
    background: #dbeafe;
    color: #3b82f6;
    animation: pulse 0.6s ease-in-out infinite;
    pointer-events: none;
}

.mandarin-playback-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #00a1d6;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-playback-btn:hover {
    background: #0089b8;
}

.mandarin-playback-btn svg {
    margin-left: 2px;
    width: 16px;
    height: 16px;
}

/* Normal Panel - Subtitle Display */
.mandarin-mobile-subtitle {
    padding: 20px 16px;
    text-align: center;
    transition: background 0.3s, box-shadow 0.3s;
    border-radius: 8px;
}

#panel-dictation .mandarin-mobile-subtitle.active {
    background: #fef3c7;
    box-shadow: 0 2px 8px rgba(245,158,11,0.15);
}

.mandarin-mobile-sub-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--gray-400);
    margin-bottom: 30px;
}

.mandarin-mobile-sub-meta-left-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mandarin-mobile-sub-meta-left-group .sub-index {
    font-weight: 500;
    font-size: 14px;
    color: #374151;
}

.mandarin-mobile-sub-ipa {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 8px;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
    display: none;
}

/* Show IPA when ipa mode is active on mobile */
.mandarin-mobile-subtitle-list.show-ipa .mandarin-mobile-sub-ipa {
    display: block;
}

.mandarin-mobile-sub-en {
    font-size: 20px;
    font-weight: 500;
    color: var(--gray-800);
    line-height: 1.6;
    margin-bottom: 12px;
}

.mandarin-mobile-sub-zh {
    font-size: 16px;
    color: var(--gray-500);
    line-height: 1.5;
}

/* Dictation Panel Styles */
.mandarin-dictation-area {
    margin-bottom: 16px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* v1.0.87 (画像2): when a card is opened / jumped-to, land it just below the fixed
   video + tab row instead of behind them. --mandarin-fixed-top is published by
   syncMobileTabs() as (video bottom + tab height). Falls back to a safe estimate. */
.mandarin-mobile-card {
    scroll-margin-top: var(--mandarin-fixed-top, 240px);
}

/* v1.0.85 (画像1): site logo in the mobile header center. Constrain height so it
   fits the ~52px header; width auto-scales and never overflows the center cell. */
.mandarin-header-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.mandarin-header-logo-img {
    height: 30px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* v1.0.84 (SS4): non-keyword Chinese words are tappable to open the word popup
   (pinyin + audio + dictionary + save). Subtle affordance: pointer cursor and a
   faint dotted underline under the hanzi so learners know every word is clickable,
   without competing visually with the colored key-expression underlines. */
.mandarin-wordtap { cursor: pointer; }
.mandarin-wordtap .rw-zh {
    /* v1.0.119: every word's underline now reflects its part of speech (--rwc),
       matching the colored key-expression underlines (gray fallback if unknown). */
    border-bottom: 3px solid var(--rwc, rgba(148, 163, 184, 0.5));
}
.mandarin-wordtap:hover .rw-zh,
.mandarin-wordtap:active .rw-zh {
    border-bottom-color: #f59e0b;
}

/* v1.0.84 (SS7): English-meaning prompt above the dictation input so the user
   knows which sentence the audio segment corresponds to. */
.mandarin-dictation-prompt {
    margin: 4px 0 12px;
    padding: 10px 14px;
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    color: #92400e;
    font-size: 15px;
    line-height: 1.4;
}

/* 听写タブ画面では目アイコンを非表示 */
#panel-dictation > .mandarin-mobile-subtitle > .mandarin-dictation-area > .mandarin-dictation-peek {
    display: none !important;
}

.mandarin-dictation-peek {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.mandarin-dictation-peek:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.mandarin-dictation-peek:active,
.mandarin-dictation-peek.active {
    background: #e5e7eb;
    color: #374151;
}

.mandarin-mobile-dictation-input {
    flex: 1;
    padding: 12px 4px;
    font-size: 18px;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color: #1f2937;
    -webkit-appearance: none;
    appearance: none;
}

/* 听写タブ画面の入力欄：アンダーバーのみ */
#panel-dictation .mandarin-dictation-area .mandarin-mobile-dictation-input {
    border: none !important;
    border-bottom: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.mandarin-mobile-dictation-input:focus {
    border-bottom-color: #3b82f6 !important;
}

#panel-dictation .mandarin-dictation-area .mandarin-mobile-dictation-input:focus {
    border: none !important;
    border-bottom: 1px solid #3b82f6 !important;
}

.mandarin-mobile-dictation-input.correct {
    color: #16a34a;
    border-bottom-color: #22c55e;
}

.mandarin-mobile-dictation-input.incorrect {
    color: #dc2626;
    border-bottom-color: #ef4444;
}

.mandarin-dictation-answer {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
}

.mandarin-dictation-answer-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.mandarin-dictation-answer-text {
    font-size: 18px;
    color: #374151;
    line-height: 1.6;
}

.mandarin-dictation-answer-text .correct {
    color: #22c55e;
}

.mandarin-dictation-answer-text .partial {
    color: #f97316;
}

.mandarin-dictation-answer-text .incorrect {
    color: #dc2626;
}

.mandarin-dictation-history {
    padding: 8px 16px;
    margin: 0 16px 4px;
    background: #f3f4f6;
    border-radius: 6px;
    border-left: 3px solid #9ca3af;
}

.mandarin-dictation-history-text {
    font-size: 13px;
    color: #6b7280;
}

.mandarin-dictation-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}

.mandarin-dictation-buttons-checked {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}

.mandarin-dictation-check-btn {
    padding: 12px 32px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.mandarin-dictation-check-btn:hover {
    background: #2563eb;
}

.mandarin-dictation-close-btn {
    padding: 12px 32px;
    background: #00a1d6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.mandarin-dictation-close-btn:hover {
    background: #0089b8;
}

.mandarin-dictation-next-btn {
    padding: 12px 32px;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.mandarin-dictation-next-btn:hover {
    background: #ea580c;
}

/* Mobile dictation wrapper */
.mandarin-mobile-dictation-wrapper {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.mandarin-mobile-dictation-wrapper .mandarin-mobile-dictation-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    background: #f9fafb;
}
.mandarin-mobile-dictation-wrapper .mandarin-mobile-dictation-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
}
.mandarin-mobile-dictation-wrapper .mandarin-mobile-dictation-input.correct {
    border-color: #22c55e;
    background: #dcfce7;
}
.mandarin-mobile-dictation-wrapper .mandarin-mobile-dictation-input.incorrect {
    border-color: #ef4444;
    background: #fee2e2;
}
.mandarin-mobile-dictation-wrapper .mandarin-dictation-check {
    display: none; /* Hide the check button - users can press Enter to check */
}
.mandarin-mobile-dictation-wrapper .mandarin-dictation-check:hover {
    background: #d1d5db;
}

.mandarin-dictation-check-btn.close-mode {
    background: #f97316;
}

.mandarin-dictation-check-btn.close-mode:hover {
    background: #ea580c;
}

.mandarin-dictation-check-btn.next-mode {
    background: #00a1d6;
}

.mandarin-dictation-check-btn.next-mode:hover {
    background: #0089b8;
}

/* Dictation result display */
.mandarin-dictation-result {
    padding: 16px;
    font-size: 18px;
    line-height: 1.8;
    color: #dc2626;
    word-wrap: break-word;
}

.mandarin-dictation-result .correct {
    color: #22c55e;
}

.mandarin-dictation-result .partial {
    color: #f97316;
}

.mandarin-dictation-result .incorrect {
    color: #dc2626;
}

/* Inline dictation result colors */
.mandarin-inline-dictation-result .correct {
    color: #22c55e;
}
.mandarin-inline-dictation-result .partial {
    color: #f97316;
}
.mandarin-inline-dictation-result .incorrect {
    color: #dc2626;
}

.mandarin-dictation-clear-btn {
    padding: 12px 32px;
    background: #6b7280;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/* Toast Notification */
.mandarin-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(55, 65, 81, 0.95);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    text-align: center;
    max-width: 80%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* Prevent abnormal sizing */
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

.mandarin-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Copy Toast on Video Overlay */
.mandarin-copy-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(200, 200, 200, 0.9);
    color: #374151;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    text-align: center;
}

.mandarin-copy-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Pause Between Toast on Video Overlay */
.mandarin-pause-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(255, 255, 245, 0.95);
    color: #374151;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.mandarin-pause-toast.enabled {
    color: #16a34a;
}

.mandarin-pause-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* AB Loop Toast Notification */
.mandarin-ab-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(55, 65, 81, 0.95);
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    text-align: center;
    max-width: 85%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.mandarin-ab-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Mobile Subtitle List (Normal Panel) */
.mandarin-mobile-subtitle-list {
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    min-height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    position: relative !important;
    touch-action: pan-y !important;
}

/* Mobile subtitle list - language modes */
.mandarin-mobile-subtitle-list[data-lang="en"] .mandarin-mobile-sub-zh-text { display: none !important; }
.mandarin-mobile-subtitle-list[data-lang="zh"] .mandarin-mobile-sub-en-text { display: none !important; }
.mandarin-mobile-subtitle-list[data-lang="both"] .mandarin-mobile-sub-en-text,
.mandarin-mobile-subtitle-list[data-lang="both"] .mandarin-mobile-sub-zh-text { display: block !important; }

/* Mobile blank mode - hide highlighted words with category colors */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-highlight {
    color: transparent !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(0,0,0,0.08) !important;
    min-width: 2em !important;
    display: inline-block !important;
    transition: color 0.15s !important;
    user-select: none !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-phrase {
    background: #dcfce7 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-phrasal_verb {
    background: #fce7f3 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-collocation {
    background: #dbeafe !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-proper_noun {
    background: #f3e8ff !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-word {
    background: #fef3c7 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-discourse {
    background: #ecfccb !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-idiom {
    background: #fef9c3 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-slang {
    background: #ede9fe !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-adverb {
    background: #ffedd5 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-adjective {
    background: #cffafe !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-verb {
    background: #fee2e2 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-noun {
    background: #e0f2fe !important; color: transparent !important;
}
/* New categories (v4.4.0) */
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-spoken_pattern {
    background: #fdf2f8 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-idiom_expr {
    background: #fff1f2 !important; color: transparent !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .highlight-sentence {
    background: #f0fdf4 !important; color: transparent !important;
}

/* Revealed state on mobile - show word with category color */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-highlight.blank-revealed {
    color: inherit !important;
    cursor: pointer !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-phrase {
    background: #dcfce7 !important; color: #166534 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-phrasal_verb {
    background: #fce7f3 !important; color: #9d174d !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-collocation {
    background: #dbeafe !important; color: #1e40af !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-proper_noun {
    background: #f3e8ff !important; color: #6b21a8 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-word {
    background: #fef3c7 !important; color: #92400e !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-discourse {
    background: #ecfccb !important; color: #3f6212 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-idiom {
    background: #fef9c3 !important; color: #854d0e !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-slang {
    background: #ede9fe !important; color: #5b21b6 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-adverb {
    background: #ffedd5 !important; color: #c2410c !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-adjective {
    background: #cffafe !important; color: #155e75 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-verb {
    background: #fee2e2 !important; color: #991b1b !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-noun {
    background: #e0f2fe !important; color: #075985 !important;
}
/* New categories (v4.4.0) */
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-spoken_pattern {
    background: #fdf2f8 !important; color: #a21caf !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-idiom_expr {
    background: #fff1f2 !important; color: #be123c !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .blank-revealed.highlight-sentence {
    background: #f0fdf4 !important; color: #166534 !important;
}

/* In blank mode: white card with shadow for active subtitle */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item.active,
#panel-normal .mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item.active,
.mandarin-player-v3 .mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-left: none !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
    border-radius: 10px !important;
}

/* Non-active items in blank mode on mobile: subtle gray */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item:not(.active),
#panel-normal .mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item:not(.active) {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ALL items in blank mode: remove default red/colored border */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* ========== v6.0.3: Blank mode spacing fixes ========== */
/* Remove unused whitespace above/below in blank (挖空) mode so content is visible without scrolling */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item.active {
    padding: 8px 12px !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item.active .mandarin-mobile-sub-text {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-ipa:empty {
    display: none !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-en-text {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.5 !important;
    padding-top: 0 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-zh-text {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
}
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-item.active .mandarin-mobile-sub-meta-row {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
}
/* Blank highlight pills are inline-block: keep line-height tight to reduce vertical gap */
.mandarin-mobile-subtitle-list[data-lang="blank"] .mandarin-mobile-sub-en-text .mandarin-highlight {
    line-height: 1.3 !important;
    vertical-align: baseline !important;
}

/* Mobile dictation mode - show input field instead of English text, hide Chinese */
.mandarin-mobile-subtitle-list[data-lang="dictation"] .mandarin-mobile-sub-en-text { display: none !important; }
.mandarin-mobile-subtitle-list[data-lang="dictation"] .mandarin-mobile-dictation-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; }
.mandarin-mobile-subtitle-list[data-lang="dictation"] .mandarin-mobile-sub-zh-text { display: none !important; }

/* Mobile hidden mode - blur/hide all subtitle text */
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-sub-text {
    filter: blur(8px) !important;
    user-select: none !important;
    pointer-events: none !important;
}
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-sub-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* Revealed state: clicking a hidden subtitle reveals just that line */
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-sub-item.revealed .mandarin-mobile-sub-text {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
}
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-sub-item.revealed::after {
    display: none;
}

/* Hidden mode: keep action buttons (play, copy, fav, note, rec) clickable above overlay */
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-sub-meta-row {
    position: relative !important;
    z-index: 15 !important;
}
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-sub-action {
    pointer-events: auto !important;
}

/* Hidden subtitle overlay */
.mandarin-mobile-hidden-overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20;
    padding: 20px;
}
.mandarin-mobile-subtitle-list[data-lang="hidden"] .mandarin-mobile-hidden-overlay {
    display: block;
}
.mandarin-mobile-hidden-overlay-text {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
}
.mandarin-mobile-hidden-overlay-hint {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
}

.mandarin-mobile-sub-item {
    padding: 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff;
    display: block !important;
    margin: 0 !important;
    min-height: auto !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden !important;
}

.mandarin-mobile-sub-item:last-child {
    border-bottom: none !important;
}

/* Fast tap for all interactive elements in subtitle list */
.mandarin-mobile-sub-item button,
.mandarin-mobile-sub-item [data-action],
.mandarin-mobile-subtitle-list button {
    touch-action: manipulation;
}

.mandarin-mobile-sub-item.active {
    background: #fef3c7 !important;
    background-color: #fef3c7 !important;
    border-radius: 8px !important;
}

/* Ensure active state is visible - high specificity */
#panel-normal .mandarin-mobile-sub-item.active,
.mandarin-mobile-subtitle-list .mandarin-mobile-sub-item.active,
.mandarin-mobile-sub-item.active,
.mandarin-player-v3 .mandarin-mobile-sub-item.active {
    background: #fef3c7 !important;
    background-color: #fef3c7 !important;
}

.mandarin-mobile-sub-text {
    margin-bottom: 8px !important;
    cursor: pointer !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: auto !important;
}

.mandarin-mobile-sub-item {
    cursor: pointer !important;
}

.mandarin-mobile-sub-en-text {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
    overflow: visible !important;
}

/* Mobile subtitle highlight styles */
.mandarin-mobile-sub-en-text .mandarin-highlight {
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
}

.mandarin-mobile-sub-en-text .highlight-phrase {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.mandarin-mobile-sub-en-text .highlight-phrasal_verb {
    background: #fce7f3 !important;
    color: #9d174d !important;
}

.mandarin-mobile-sub-en-text .highlight-collocation {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.mandarin-mobile-sub-en-text .highlight-proper_noun {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
}

.mandarin-mobile-sub-en-text .highlight-word {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.mandarin-mobile-sub-en-text .highlight-discourse {
    background: #ecfccb !important;
    color: #3f6212 !important;
}

.mandarin-mobile-sub-en-text .highlight-idiom {
    background: #fef9c3 !important;
    color: #854d0e !important;
}

.mandarin-mobile-sub-en-text .highlight-idiom_expr {
    background: #fff1f2 !important;
    color: #be123c !important;
}

.mandarin-mobile-sub-en-text .highlight-slang {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.mandarin-mobile-sub-en-text .highlight-sentence {
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.mandarin-mobile-sub-en-text .highlight-spoken_pattern {
    background: #fdf2f8 !important;
    color: #9d174d !important;
}

.mandarin-mobile-sub-en-text .highlight-adverb {
    background: #ffedd5 !important;
    color: #c2410c !important;
}

/* === Highlights inside ACTIVE subtitle (yellow bg) — add border for visibility === */
.mandarin-mobile-sub-item.active .mandarin-mobile-sub-en-text .mandarin-highlight {
    border: 1.5px solid currentColor !important;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.05) !important;
}

/* highlight-word is same yellow as active bg — use amber instead */
.mandarin-mobile-sub-item.active .mandarin-mobile-sub-en-text .highlight-word {
    background: #fde68a !important;
    border-color: #d97706 !important;
}

/* Ensure green highlights stand out on yellow */
.mandarin-mobile-sub-item.active .mandarin-mobile-sub-en-text .highlight-phrase {
    background: #bbf7d0 !important;
}

.mandarin-mobile-sub-item.active .mandarin-mobile-sub-en-text .highlight-discourse {
    background: #d9f99d !important;
}

.mandarin-mobile-sub-zh-text {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

.mandarin-mobile-sub-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px 0 !important;
}

.mandarin-mobile-sub-meta-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    color: #9ca3af !important;
    flex-shrink: 0 !important;
}

.mandarin-mobile-sub-num {
    font-weight: 500 !important;
}

.mandarin-mobile-sub-meta-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

.mandarin-mobile-sub-action {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    touch-action: manipulation !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mandarin-mobile-sub-action svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
}

.mandarin-mobile-sub-action svg * {
    pointer-events: none !important;
}

.mandarin-mobile-sub-action:active {
    color: #fb7299 !important;
}

.mandarin-mobile-sub-action.favorited {
    color: #fb7299 !important;
}

.mandarin-mobile-sub-action.favorited svg {
    fill: #f43f5e !important;
}

.mandarin-mobile-sub-action.has-note {
    color: #3b82f6 !important;
}

/* ========== NOTE & RECORDING INLINE BLOCKS ========== */
.mandarin-sub-note-block {
    background: #fef2f2;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mandarin-sub-note-block-text {
    flex: 1;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.mandarin-sub-note-block-edit {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.mandarin-sub-note-block-edit:hover {
    color: #3b82f6;
}

.mandarin-sub-rec-block {
    background: #eff6ff;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
}

.mandarin-sub-rec-block-header {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mandarin-sub-rec-block-title {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
}

.mandarin-sub-rec-block-collapse {
    background: none;
    border: none;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 6px;
}

.mandarin-sub-rec-block-collapse:hover {
    color: #3b82f6;
}

.mandarin-sub-rec-block-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mandarin-sub-rec-block.collapsed .mandarin-sub-rec-block-list .mandarin-sub-rec-block-item {
    display: none;
}

.mandarin-sub-rec-block.collapsed .mandarin-sub-rec-block-list .mandarin-sub-rec-block-item:last-child {
    display: flex;
}

.mandarin-sub-rec-block-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.mandarin-sub-rec-block-play {
    background: none;
    border: none;
    color: #fb7299;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    min-width: 32px;
    min-height: 32px;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mandarin-sub-rec-block-time {
    flex: 1;
    font-size: 13px;
    color: #4b5563;
}

.mandarin-sub-rec-block-delete {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}

.mandarin-sub-rec-block-delete:hover {
    color: #ef4444;
}

/* 録音保存ボタン (上矢印) */
.mandarin-rec-save-btn {
    color: #3b82f6 !important;
}

/* 録音プレビューボタン */
.mandarin-rec-preview-btn.playing {
    color: #3b82f6 !important;
}

/* 録音リストトグルボタン & バッジ */
.mandarin-rec-list-toggle-btn {
    position: relative !important;
}

.mandarin-rec-list-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #93c5fd;
    color: #1e3a5f;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 99px;
    padding: 0 3px;
}

/* ========== Subtitle Favorite Filter (in tab bar) ========== */
.mandarin-mobile-tab-fav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #9ca3af;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    position: relative;
}

.mandarin-mobile-tab-fav.active {
    color: #fb7299;
    border-bottom-color: #fb7299;
}

.mandarin-sub-filter-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* フィルター中に非お気に入り字幕を非表示 */
.mandarin-mobile-subtitle-list.fav-filter-active .mandarin-mobile-sub-item {
    display: none !important;
}

.mandarin-mobile-subtitle-list.fav-filter-active .mandarin-mobile-sub-item.is-fav-visible {
    display: block !important;
}

.mandarin-mobile-sub-action.copied {
    color: #22c55e !important;
}

.mandarin-mobile-sub-action.speaking {
    color: #f97316 !important;
    animation: pulse 0.5s ease-in-out infinite;
}

/* Voice button recording state */
/* ========== NEW INLINE RECORDING DESIGN ========== */

/* Default mic button: hover → red */
.mandarin-voice-btn {
    color: #9ca3af !important;
    transition: color 0.2s, transform 0.2s !important;
    position: relative !important;
}
.mandarin-voice-btn:hover .voice-state-mic svg,
.mandarin-voice-btn:hover svg {
    stroke: #ef4444 !important;
    transform: scale(1.15) !important;
}
.mandarin-voice-btn .voice-state-mic svg {
    transition: stroke 0.2s, transform 0.2s !important;
}

/* Recording state: mic icon hidden, stop square visible, pulsing bg */
.mandarin-voice-btn.recording {
    animation: none !important;
}
.mandarin-voice-btn.recording .voice-state-mic {
    display: none !important;
}
.mandarin-voice-btn.recording .voice-state-recording {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    animation: pulse-rec-bg 0.9s ease-in-out infinite !important;
    color: #ef4444 !important;
}
.mandarin-voice-btn.recording .voice-state-recording svg {
    fill: #ef4444 !important;
}

@keyframes pulse-rec-bg {
    0%, 100% { background: #fee2e2; transform: scale(1); }
    50% { background: #fecaca; transform: scale(1.15); }
}

/* Follow jump button (▷) in normal mode subtitle list */
.mandarin-follow-jump-btn {
    color: #2563eb !important;
    background: none !important;
    border: none !important;
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    margin-left: 2px !important;
}
/* Show follow-jump button only when follow mode is active */
.mandarin-mobile-subtitle-list.follow-mode .mandarin-follow-jump-btn {
    display: flex !important;
}
.mandarin-follow-jump-btn svg {
    fill: #2563eb !important;
    stroke: none !important;
    width: 16px !important;
    height: 16px !important;
}
.mandarin-follow-jump-btn:hover,
.mandarin-follow-jump-btn:active {
    background: #eff4ff !important;
    transform: scale(1.15);
}

/* Inline preview-recording button */
.mandarin-rec-preview-btn {
    color: #22c55e !important;
}
.mandarin-rec-preview-btn svg {
    fill: #22c55e !important;
    stroke: none !important;
}
.mandarin-rec-preview-btn:hover svg {
    fill: #16a34a !important;
}
.mandarin-rec-preview-btn.playing svg {
    fill: #f97316 !important;
}

/* Inline save button (上矢印) */
.mandarin-rec-save-btn {
    color: #3b82f6 !important;
}
.mandarin-rec-save-btn svg {
    stroke: #3b82f6 !important;
}
.mandarin-rec-save-btn:hover svg {
    stroke: #1d4ed8 !important;
}

/* Inline rec-list toggle button */
.mandarin-rec-list-toggle-btn {
    color: #6b7280 !important;
    position: relative !important;
}
.mandarin-rec-list-toggle-btn svg {
    stroke: #6b7280 !important;
}
.mandarin-rec-list-toggle-btn:hover svg {
    stroke: #3b82f6 !important;
}

/* Keep old .mandarin-sub-record-controls for follow panel */

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Subtitle Recording Controls - hidden by default, shown after recording */
.mandarin-sub-record-controls {
    display: none !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: #f3f4f6;
    border-radius: 8px;
}

.mandarin-sub-record-controls.has-recording {
    display: flex !important;
}

.mandarin-sub-record-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    /* Default: light gray */
    background: #e5e7eb !important;
    color: #9ca3af !important;
}

.mandarin-sub-record-btn:hover {
    background: #d1d5db !important;
}

/* Play button - green when active */
.mandarin-sub-record-btn.play-btn.active {
    background: #fb7299 !important;
    color: #fff !important;
}

.mandarin-sub-record-btn.play-btn.active:hover {
    background: #e8608a !important;
}

.mandarin-sub-record-btn.play-btn.playing {
    background: #f97316 !important;
    color: #fff !important;
}

/* Delete button - red when active */
.mandarin-sub-record-btn.delete-btn.active {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.mandarin-sub-record-btn.delete-btn.active:hover {
    background: #fecaca !important;
}

/* Upload button - blue when active */
.mandarin-sub-record-btn.upload-btn.active {
    background: #dbeafe !important;
    color: #3b82f6 !important;
}

.mandarin-sub-record-btn.upload-btn.active:hover {
    background: #bfdbfe !important;
}

.mandarin-sub-record-btn.upload-btn.uploaded {
    background: #dcfce7 !important;
    color: #22c55e !important;
}

.mandarin-sub-record-btn svg {
    width: 14px !important;
    height: 14px !important;
}

.mandarin-sub-record-status {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-left: auto !important;
}

/* Mobile Note Area */
.mandarin-mobile-note-area {
    margin-top: 12px !important;
    padding: 12px !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
}

.mandarin-mobile-note-input {
    width: 100% !important;
    min-height: 80px !important;
    padding: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    resize: vertical !important;
    font-family: inherit !important;
}

.mandarin-mobile-note-input:focus {
    outline: none !important;
    border-color: #10b981 !important;
}

.mandarin-mobile-note-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.mandarin-note-cancel,
.mandarin-note-save {
    padding: 6px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border: none !important;
}

.mandarin-note-cancel {
    background: #e5e7eb !important;
    color: #4b5563 !important;
}

.mandarin-note-save {
    background: #00a1d6 !important;
    color: white !important;
}

.mandarin-dictation-clear-btn:hover {
    background: #4b5563;
}

.mandarin-mobile-mic {
    margin-top: 30px;
}

.mandarin-mobile-mic button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: var(--white);
    font-size: 24px;
    cursor: pointer;
}

/* Cards Panel */
/* Mobile Cards Header */
.mandarin-mobile-cards-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    border-bottom: 3px solid #1f2937 !important;
    margin-bottom: 12px !important;
}

.mandarin-mobile-cards-icon {
    font-size: 22px !important;
}

.mandarin-mobile-cards-title {
    font-weight: 600 !important;
}

.mandarin-mobile-cards-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 4px 16px 0 !important;
    justify-content: center !important;
}

.mandarin-mobile-cards-tab {
    padding: 8px 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    color: #374151 !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

.mandarin-mobile-cards-tab:hover {
    border-color: #d1d5db !important;
    background: #f9fafb !important;
}

/* Active state - matches card background color */
.mandarin-mobile-cards-tab.active {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Always-colored mobile tabs */
.mandarin-mobile-cards-tab[data-cat="all"] {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}
.mandarin-mobile-cards-tab[data-cat="all"].active {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="phrase"] {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}
.mandarin-mobile-cards-tab[data-cat="phrase"].active {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="phrasal_verb"] {
    background: #fce7f3 !important;
    border-color: #f9a8d4 !important;
    color: #9d174d !important;
}
.mandarin-mobile-cards-tab[data-cat="phrasal_verb"].active {
    background: #f43f5e !important;
    border-color: #f43f5e !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="collocation"] {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}
.mandarin-mobile-cards-tab[data-cat="collocation"].active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="proper_noun"] {
    background: #f3e8ff !important;
    border-color: #e9d5ff !important;
    color: #6b21a8 !important;
}
.mandarin-mobile-cards-tab[data-cat="proper_noun"].active {
    background: #a855f7 !important;
    border-color: #a855f7 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="word"] {
    background: #e8eaf6 !important;
    border-color: #9fa8da !important;
    color: #283593 !important;
}
.mandarin-mobile-cards-tab[data-cat="word"].active {
    background: #3949ab !important;
    border-color: #3949ab !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="discourse"] {
    background: #ecfccb !important;
    border-color: #bef264 !important;
    color: #3f6212 !important;
}
.mandarin-mobile-cards-tab[data-cat="discourse"].active {
    background: #84cc16 !important;
    border-color: #84cc16 !important;
    color: #fff !important;
}

/* New category tabs */
.mandarin-mobile-cards-tab[data-cat="idiom"] {
    background: #e0f2f1 !important;
    border-color: #80cbc4 !important;
    color: #004d40 !important;
}
.mandarin-mobile-cards-tab[data-cat="idiom"].active {
    background: #00897b !important;
    border-color: #00897b !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="slang"] {
    background: #fff3e0 !important;
    border-color: #ffb74d !important;
    color: #e65100 !important;
}
.mandarin-mobile-cards-tab[data-cat="slang"].active {
    background: #ef6c00 !important;
    border-color: #ef6c00 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="adverb"] {
    background: #efebe9 !important;
    border-color: #bcaaa4 !important;
    color: #4e342e !important;
}
.mandarin-mobile-cards-tab[data-cat="adverb"].active {
    background: #6d4c41 !important;
    border-color: #6d4c41 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="adjective"] {
    background: #ecfeff !important;
    border-color: #a5f3fc !important;
    color: #155e75 !important;
}
.mandarin-mobile-cards-tab[data-cat="adjective"].active {
    background: #06b6d4 !important;
    border-color: #06b6d4 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="verb"] {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
.mandarin-mobile-cards-tab[data-cat="verb"].active {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="noun"] {
    background: #f0fdfa !important;
    border-color: #99f6e4 !important;
    color: #134e4a !important;
}
.mandarin-mobile-cards-tab[data-cat="noun"].active {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #fff !important;
}

/* 口语句式 - Warm amber/orange */
.mandarin-mobile-cards-tab[data-cat="spoken_pattern"] {
    background: #fff3e0 !important;
    border-color: #ffb74d !important;
    color: #e65100 !important;
}
.mandarin-mobile-cards-tab[data-cat="spoken_pattern"].active {
    background: #f57c00 !important;
    border-color: #f57c00 !important;
    color: #fff !important;
}

/* 惯用表达 - Deep teal */
.mandarin-mobile-cards-tab[data-cat="idiom_expr"] {
    background: #e0f2f1 !important;
    border-color: #80cbc4 !important;
    color: #004d40 !important;
}
.mandarin-mobile-cards-tab[data-cat="idiom_expr"].active {
    background: #00897b !important;
    border-color: #00897b !important;
    color: #fff !important;
}

/* 句子 - Neutral gray */
.mandarin-mobile-cards-tab[data-cat="sentence"] {
    background: #f5f5f5 !important;
    border-color: #bdbdbd !important;
    color: #424242 !important;
}
.mandarin-mobile-cards-tab[data-cat="sentence"].active {
    background: #616161 !important;
    border-color: #616161 !important;
    color: #fff !important;
}

.mandarin-mobile-cards-tab[data-cat="favorited"].active,
.mandarin-mobile-cards-tab.favorite.active {
    background: #e53935 !important;
    border-color: #e53935 !important;
    color: #fff !important;
}

/* Favorite tab default style */
.mandarin-mobile-cards-tab.favorite {
    background: #ffebee !important;
    border-color: #ef9a9a !important;
    color: #b71c1c !important;
}

/* Favorite and Batch buttons - separate centered row */
.mandarin-mobile-cards-tabs .mandarin-mobile-cards-tab.favorite,
.mandarin-mobile-cards-tabs .mandarin-mobile-batch-btn {
    flex-basis: auto !important;
}

/* Batch button */
.mandarin-mobile-batch-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 14px !important;
    border: 1px solid #22c55e !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #22c55e, #10b981) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: #fff !important;
}

/* Card View Container */
.mandarin-mobile-card-view {
    padding: 0 12px 16px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Individual Card - Full Width */
.mandarin-mobile-card {
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #fff !important;
}

.mandarin-mobile-card.expanded {
    background: #fff8e1 !important;
}

/* Compact List Row */
.mandarin-card-list-row {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.03);
    gap: 10px;
    user-select: none;
}

.mandarin-card-list-row:active {
    background: rgba(0,0,0,0.03);
}

.mandarin-card-list-num {
    font-size: 13px;
    color: #9ca3af;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.mandarin-card-list-word {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mandarin-card-list-cat {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Per-category colors for list view badges */
.mandarin-mobile-card[data-category="phrase"] .mandarin-card-list-cat {
    background: #f0fdf4; color: #15803d; border-color: #bbf7d0;
}
.mandarin-mobile-card[data-category="phrasal_verb"] .mandarin-card-list-cat {
    background: #fff1f2; color: #be123c; border-color: #fecdd3;
}
.mandarin-mobile-card[data-category="collocation"] .mandarin-card-list-cat {
    background: #eef2ff; color: #4338ca; border-color: #c7d2fe;
}
.mandarin-mobile-card[data-category="proper_noun"] .mandarin-card-list-cat {
    background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff;
}
.mandarin-mobile-card[data-category="word"] .mandarin-card-list-cat {
    background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.mandarin-mobile-card[data-category="discourse"] .mandarin-card-list-cat {
    background: #f7fee7; color: #4d7c0f; border-color: #d9f99d;
}
.mandarin-mobile-card[data-category="idiom"] .mandarin-card-list-cat,
.mandarin-mobile-card[data-category="idiom_expr"] .mandarin-card-list-cat {
    background: #fefce8; color: #a16207; border-color: #fde68a;
}
.mandarin-mobile-card[data-category="slang"] .mandarin-card-list-cat {
    background: #fdf2f8; color: #be185d; border-color: #fbcfe8;
}
.mandarin-mobile-card[data-category="spoken_pattern"] .mandarin-card-list-cat {
    background: #ecfeff; color: #0e7490; border-color: #a5f3fc;
}
.mandarin-mobile-card[data-category="sentence"] .mandarin-card-list-cat {
    background: #f0f9ff; color: #0369a1; border-color: #bae6fd;
}
.mandarin-mobile-card[data-category="adverb"] .mandarin-card-list-cat,
.mandarin-mobile-card[data-category="adjective"] .mandarin-card-list-cat {
    background: #fef9c3; color: #854d0e; border-color: #fde047;
}

.mandarin-card-list-fav {
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    touch-action: manipulation;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mandarin-card-list-fav:hover {
    color: #f59e0b !important;
}

.mandarin-card-list-fav.saved {
    color: #f59e0b !important;
}

.mandarin-card-list-arrow {
    font-size: 22px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.mandarin-mobile-card.expanded .mandarin-card-list-arrow {
    transform: rotate(90deg);
}

/* Card Detail (expanded section) */
.mandarin-card-detail {
    padding: 0 16px 16px;
}

/* Card Detail Header: Pronunciation + Category */
.mandarin-card-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.mandarin-card-pron-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.mandarin-card-pron-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none !important;
    border: none !important;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    padding: 4px 0 !important;
    touch-action: manipulation;
}

.mandarin-card-pron-btn svg {
    flex-shrink: 0;
    stroke: #374151;
}

.mandarin-card-pron-btn:active svg {
    stroke: #ef4444;
}

.mandarin-card-pron-btn span {
    font-weight: 600;
    font-size: 13px;
}

.mandarin-card-pron-ipa {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #6b7280;
}

.mandarin-card-detail-cat {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-weight: 500;
    flex-shrink: 0;
}

/* POS badge (verb, noun, etc.) */
.mandarin-card-pos-badge {
    display: inline-block;
    background: #f97316;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
}

/* Card Navigation Index */
.mandarin-mobile-card-nav {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.mandarin-mobile-card-nav .card-index {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Card Header - Audio, IPA, Type badge */
.mandarin-mobile-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

/* G/B/D Links */
.mandarin-mobile-card-links {
    display: flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.mandarin-mobile-link {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
}

.mandarin-mobile-link.y { background: #e74c3c !important; color: #fff !important; } /* 有道 red */
.mandarin-mobile-link.b { background: #3b82f6 !important; color: #fff !important; } /* 百度 blue */
.mandarin-mobile-link.c { background: #0891b2 !important; color: #fff !important; } /* 剑桥 teal */
a.mandarin-mobile-link,
a.mandarin-mobile-link:link,
a.mandarin-mobile-link:visited,
a.mandarin-mobile-link:hover,
a.mandarin-mobile-link:active,
.et_pb_module a.mandarin-mobile-link,
.entry-content a.mandarin-mobile-link {
    color: #fff !important;
    text-decoration: none !important;
}

.mandarin-mobile-card-audio {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.05) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

.mandarin-mobile-card-region {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.mandarin-mobile-card-ipa {
    font-size: 14px !important;
    color: #374151 !important;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif !important;
}

.mandarin-mobile-card-type {
    margin-left: auto !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    background: rgba(0,0,0,0.05) !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
}

/* Type color badges */
.mandarin-mobile-card-badges {
    display: flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.mandarin-mobile-card-badge {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.mandarin-mobile-card-badge.badge-g { background: #22c55e !important; }
.mandarin-mobile-card-badge.badge-b { background: #3b82f6 !important; }
.mandarin-mobile-card-badge.badge-d { background: #ef4444 !important; }

/* Card Word Title with Star */
.mandarin-mobile-card-word {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.mandarin-mobile-card-fav {
    font-size: 24px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #d1d5db !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.mandarin-mobile-card-fav.saved {
    color: #fb7299 !important;
}

.mandarin-mobile-card-word h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #3b82f6 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Divider line */
.mandarin-mobile-card-divider {
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    margin: 12px 0 !important;
}

/* Meaning sections */
.mandarin-mobile-card-meaning-zh {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}

.mandarin-mobile-card-meaning-en {
    font-size: 15px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

/* Example section */
.mandarin-mobile-card-example {
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
}

.mandarin-mobile-card-example .ex-label {
    color: #ef4444 !important;
    font-weight: 500 !important;
}

.mandarin-mobile-card-example .ex-en {
    font-style: italic !important;
    color: #1f2937 !important;
}

.mandarin-mobile-card-example .ex-zh {
    display: block !important;
    color: #6b7280 !important;
    font-size: 14px !important;
    margin-top: 6px !important;
    font-style: normal !important;
}

/* Footer with occurrence info and expand button */
.mandarin-mobile-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    font-size: 14px !important;
    color: #3b82f6 !important;
}

.mandarin-mobile-card-expand {
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease, color 0.2s !important;
    padding: 0 !important;
}

.mandarin-mobile-card-expand:hover {
    color: #6b7280 !important;
}

.mandarin-mobile-card-expand.expanded {
    transform: rotate(180deg) !important;
}

/* Accordion expanded content */
.mandarin-mobile-card-accordion {
    display: none !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}

.mandarin-mobile-card-accordion.show {
    display: block !important;
}

/* Episode occurrence item */
.mandarin-mobile-card-occurrence {
    background: #fffbeb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

.mandarin-mobile-card-occurrence:last-child {
    margin-bottom: 0 !important;
}

.mandarin-mobile-card-occurrence-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.mandarin-mobile-card-occurrence-ep {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.mandarin-mobile-card-occurrence-link {
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}

.mandarin-mobile-card-scene-jump {
    width: 32px !important;
    height: 32px !important;
    background: none !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    touch-action: manipulation;
}

.mandarin-mobile-card-scene-jump:hover,
.mandarin-mobile-card-scene-jump:active {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

.mandarin-mobile-card-occurrence-link:hover,
.mandarin-mobile-card-occurrence-link:active {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

.et_pb_module .mandarin-mobile-card-occurrence-link,
.entry-content .mandarin-mobile-card-occurrence-link {
    color: #6b7280 !important;
}

.mandarin-mobile-card-occurrence-text {
    background: #fef9c3 !important;
    border-left: 3px solid #facc15 !important;
    padding: 12px !important;
    border-radius: 0 8px 8px 0 !important;
    margin-bottom: 8px !important;
}

/* Card occurrence playing highlight */
.mandarin-mobile-card-occurrence.mandarin-card-playing {
    background: #fef3c7 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 2px #f59e0b !important;
    transition: background 0.3s, box-shadow 0.3s !important;
}

/* Scenes section in expanded card detail */
.mandarin-card-scenes-section {
    margin-top: 12px !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 10px !important;
}

.mandarin-card-scenes-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 10px !important;
    padding: 6px 0 !important;
}

.mandarin-card-scenes-header svg {
    flex-shrink: 0;
    stroke: #9ca3af;
}

/* Episode group within scenes */
.mandarin-card-episode-group {
    margin-bottom: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.mandarin-card-episode-group.is-other {
    border-color: #d1d5db !important;
    background: #fafafa !important;
}

.mandarin-card-episode-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.mandarin-card-current-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    background: #10b981 !important;
    color: #fff !important;
    padding: 1px 6px !important;
    border-radius: 8px !important;
    margin-left: 6px !important;
}

.mandarin-card-scene-link,
.mandarin-card-scene-play-link {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
}

.mandarin-card-scene-play-link {
    width: 28px !important;
    height: 28px !important;
    background: #ef4444 !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 12px !important;
}

/* Cross-episode play button: muted to indicate can't play inline */
.mandarin-card-other-ep-play.mandarin-mobile-card-occurrence-play {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    opacity: 1 !important;
    color: #fff !important;
}

.mandarin-card-scene-link:hover,
.mandarin-card-scene-link:active {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

/* Back to previous episode banner */
.mandarin-back-banner {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #1e40af !important;
}

.mandarin-back-banner a {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #2563eb !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Individual scene item */
.mandarin-card-scene-item {
    padding: 10px 12px !important;
    border-left: 3px solid #f59e0b !important;
    background: #fffbeb !important;
    border-radius: 0 8px 8px 0 !important;
    margin-bottom: 8px !important;
}

.mandarin-card-scene-item.mandarin-card-playing {
    background: #fef3c7 !important;
    border-left-color: #ef4444 !important;
    box-shadow: 0 0 0 1px #f59e0b !important;
}

.mandarin-card-scene-en {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.mandarin-card-scene-en .highlight {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

.mandarin-card-scene-zh {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

.mandarin-card-scene-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 12px !important;
    color: #9ca3af !important;
}

/* Sentence number indicator (bottom-right of cards panel) */
.mandarin-card-sentence-indicator {
    position: fixed;
    bottom: 80px;
    right: 16px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 100;
    pointer-events: none;
    animation: mandarinFadeIn 0.2s ease;
}

@keyframes mandarinFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mandarin-mobile-card-occurrence-en {
    font-size: 15px !important;
    color: #1f2937 !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

.mandarin-mobile-card-occurrence-en .highlight {
    background: #fde047 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
}

.mandarin-mobile-card-occurrence-zh {
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

.mandarin-mobile-card-occurrence-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

.mandarin-mobile-card-occurrence-play {
    width: 28px !important;
    height: 28px !important;
    background: #fb7299 !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 12px !important;
    touch-action: manipulation;
    transition: transform 0.15s !important;
}

.mandarin-mobile-card-occurrence-play:active {
    transform: scale(0.9) !important;
}

/* Loading state */
.mandarin-mobile-card-loading {
    text-align: center;
    padding: 40px;
    color: var(--gray-500);
}

/* Empty card state */
.mandarin-mobile-card-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);
    font-size: 16px;
    line-height: 1.6;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
}

.mandarin-mobile-card-empty small {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--gray-400);
}

/* ========== FIXED BOTTOM CONTROLS (Mobile/Tablet Only) ========== */
.mandarin-mobile-controls {
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 1024px) {
    .mandarin-mobile-controls {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: 0 24px 8px 24px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
        z-index: 1000 !important;
        border-top: 1px solid #e5e7eb !important;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .mandarin-mobile-controls.controls-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
}

/* Progress Bar */
.mandarin-mobile-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 10px 0;
    touch-action: none;
}

.mandarin-mobile-progress-bar {
    flex: 1;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.mandarin-mobile-progress-fill {
    height: 100%;
    background: #374151;
    width: 0%;
    transition: width 0.1s;
    border-radius: 2px;
    position: relative;
}

/* Progress thumb (dot indicator) */
.mandarin-mobile-progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #374151;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: width 0.15s, height 0.15s, right 0.15s;
}

/* Dragging state - bigger touch target and thumb */
.mandarin-mobile-progress-bar.dragging {
    height: 6px;
}

.mandarin-mobile-progress-bar.dragging .mandarin-mobile-progress-fill::after {
    width: 18px;
    height: 18px;
    right: -9px;
}

/* Control Buttons - Single Row (reference design) */
.mandarin-mobile-ctrl-row {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 4px 0 env(safe-area-inset-bottom, 2px) !important;
    min-height: 52px !important;
}

/* Shared base for all control buttons */
.mandarin-mobile-ctrl-labeled,
.mandarin-mobile-ctrl-nav {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    min-width: 44px !important;
    position: relative !important;
}

/* mandarin-mobile-ctrl-playは別途スタイル定義 - 丸いボタン */
.mandarin-mobile-ctrl-play {
    border: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: relative !important;
}

.mandarin-mobile-ctrl-labeled:focus,
.mandarin-mobile-ctrl-labeled:focus-visible,
.mandarin-mobile-ctrl-nav:focus,
.mandarin-mobile-ctrl-nav:focus-visible,
.mandarin-mobile-ctrl-play:focus,
.mandarin-mobile-ctrl-play:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Label text below icons */
.mandarin-ctrl-label {
    font-size: 10px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin-top: 1px !important;
}

/* Icon container - uniform size, grey circle like desktop */
.mandarin-ctrl-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    transition: background 0.15s, transform 0.1s !important;
}

.mandarin-ctrl-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #374151 !important;
    stroke-width: 2 !important;
    fill: none !important;
}

/* Speed button - text icon */
.mandarin-ctrl-icon-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    line-height: 40px !important;
}

/* Hover/Active: pink circle + white icon (like desktop) */
.mandarin-mobile-ctrl-labeled:active .mandarin-ctrl-icon,
.mandarin-mobile-ctrl-nav:active .mandarin-ctrl-icon {
    background: #fb7299 !important;
    transform: scale(0.93) !important;
}
.mandarin-mobile-ctrl-labeled:active .mandarin-ctrl-icon svg,
.mandarin-mobile-ctrl-nav:active .mandarin-ctrl-icon svg {
    stroke: #fff !important;
}
.mandarin-mobile-ctrl-labeled:active .mandarin-ctrl-icon-text,
.mandarin-mobile-ctrl-nav:active .mandarin-ctrl-icon-text {
    color: #fff !important;
}

/* Nav buttons (prev/next) - dark circle like desktop */
.mandarin-mobile-ctrl-nav .mandarin-ctrl-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #1f2937 !important;
}

.mandarin-mobile-ctrl-nav .mandarin-ctrl-icon svg {
    stroke: #fff !important;
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.5 !important;
}

.mandarin-mobile-ctrl-nav:active .mandarin-ctrl-icon {
    background: #374151 !important;
}

/* Play/Pause circle icon container */
.mandarin-play-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    border: none !important;
}

.mandarin-mobile-ctrl-play:active .mandarin-play-circle {
    background: #2563eb !important;
    background-color: #2563eb !important;
    transform: scale(0.95) !important;
}

.mandarin-play-circle .play-icon {
    margin-left: 2px !important;
}

/* 再生ボタンを他のボタンと同じ高さに揃える */
.mandarin-mobile-ctrl-play {
    height: 52px !important;
    justify-content: center !important;
    isolation: isolate !important;
}

.mandarin-mobile-ctrl-play::before {
    content: none !important;
    display: none !important;
}

.mandarin-mobile-ctrl-play svg {
    pointer-events: none !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Ensure play-icon SVG is visible (not hidden by ::before) */
.mandarin-mobile-ctrl-play svg.play-icon {
    display: block !important;
}
.mandarin-mobile-ctrl-play svg.pause-icon {
    /* JS controls display toggling */
}

.mandarin-mobile-ctrl-play svg polygon,
.mandarin-mobile-ctrl-play svg rect,
.mandarin-mobile-ctrl-play svg path {
    fill: #fff !important;
    stroke: none !important;
}

.mandarin-mobile-ctrl-play .mandarin-ctrl-label {
    display: none !important;
}

/* DIVIや他テーマによるspan背景色上書きを防ぐ */
.mandarin-player-v3 .mandarin-play-circle,
.mandarin-mobile-controls .mandarin-play-circle {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
    outline: none !important;
}

/* Force white icon color inside play circle - override DIVI */
.mandarin-mobile-controls .mandarin-play-circle svg,
.mandarin-mobile-controls .mandarin-play-circle svg path,
.mandarin-mobile-controls .mandarin-play-circle svg rect,
.mandarin-player-v3 .mandarin-mobile-controls button.mandarin-mobile-ctrl-play .mandarin-play-circle svg,
.mandarin-player-v3 .mandarin-mobile-controls button.mandarin-mobile-ctrl-play .mandarin-play-circle svg path,
.mandarin-player-v3 .mandarin-mobile-controls button.mandarin-mobile-ctrl-play .mandarin-play-circle svg rect {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none !important;
}

/* Prevent DIVI blue focus/active state on play button */
.mandarin-mobile-ctrl-play,
.mandarin-mobile-ctrl-play:focus,
.mandarin-mobile-ctrl-play:focus-visible,
.mandarin-mobile-ctrl-play:active,
.mandarin-mobile-ctrl-play:visited,
.mandarin-mobile-ctrl-play:hover,
button.mandarin-mobile-ctrl-play,
div.mandarin-mobile-controls button.mandarin-mobile-ctrl-play,
.mandarin-player-v3 button.mandarin-mobile-ctrl-play,
.mandarin-player-v3 .mandarin-mobile-controls button.mandarin-mobile-ctrl-play,
.mandarin-player-v3 .mandarin-mobile-controls .mandarin-ctrl-item button.mandarin-mobile-ctrl-play {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Ensure NO background on .mandarin-mobile-ctrl-play div wrapper itself */
div.mandarin-mobile-ctrl-play,
div[role="button"].mandarin-mobile-ctrl-play,
.mandarin-ctrl-item .mandarin-mobile-ctrl-play,
.mandarin-mobile-controls div.mandarin-mobile-ctrl-play,
.mandarin-mobile-controls div[role="button"].mandarin-mobile-ctrl-play,
.et_pb_module div[role="button"].mandarin-mobile-ctrl-play,
.et_pb_section div[role="button"].mandarin-mobile-ctrl-play,
.et_pb_row div[role="button"].mandarin-mobile-ctrl-play,
body div[role="button"].mandarin-mobile-ctrl-play,
html body div[role="button"].mandarin-mobile-ctrl-play {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    background-image: none !important;
    -webkit-tap-highlight-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Force white fill on ALL SVG shapes inside play button - prevent DIVI orange */
.mandarin-mobile-ctrl-play svg path,
.mandarin-mobile-ctrl-play svg rect,
.mandarin-mobile-ctrl-play svg polygon,
.mandarin-mobile-ctrl-play .pause-icon rect,
.mandarin-mobile-ctrl-play .play-icon path,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play svg rect,
.mandarin-player-v3 .mandarin-mobile-ctrl-play svg rect {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none !important;
    background: none !important;
    background-color: transparent !important;
}

/* Keep circle dark regardless of button focus/active state */
.mandarin-mobile-ctrl-play:focus::before,
.mandarin-mobile-ctrl-play:focus-visible::before,
.mandarin-mobile-ctrl-play:active::before {
    content: none !important;
    display: none !important;
}
.mandarin-mobile-ctrl-play:focus .mandarin-play-circle,
.mandarin-mobile-ctrl-play:focus-visible .mandarin-play-circle,
.mandarin-mobile-ctrl-play:active .mandarin-play-circle {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* A点 button states */
.mandarin-mobile-ctrl-labeled[data-action="apoint"] .apoint-icon {
    display: none;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"] .apoint-a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #374151;
    font-weight: 700;
    font-size: 14px;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"][data-state="b"] .apoint-a {
    display: none !important;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"][data-state="b"] .apoint-b {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #374151;
    font-weight: 700;
    font-size: 14px;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"][data-state="x"] .apoint-a {
    display: none !important;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"][data-state="x"] .apoint-x {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    stroke: #fb7185 !important;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"][data-state="x"] .apoint-x line {
    stroke: #fb7185 !important;
}

/* Loop count button - show number when active */
.mandarin-mobile-ctrl-labeled[data-action="loop-count"].active .mandarin-ctrl-icon svg {
    stroke: #4a90d9 !important;
}

.mandarin-mobile-ctrl-labeled[data-action="loop-count"].active .mandarin-ctrl-label {
    color: #4a90d9 !important;
}

/* Hide video button active state */
.mandarin-mobile-ctrl-labeled[data-action="hide-video"].active .mandarin-ctrl-icon svg {
    stroke: #4a90d9 !important;
}

.mandarin-mobile-ctrl-labeled[data-action="hide-video"].active .mandarin-ctrl-label {
    color: #4a90d9 !important;
}

/* Active state for labeled controls */
.mandarin-mobile-ctrl-labeled.active .mandarin-ctrl-icon-text,
.mandarin-mobile-ctrl-labeled.active .mandarin-ctrl-label {
    color: #4a90d9 !important;
}

/* ABループ active状態でのボタンスタイル（Xアイコン表示時） */
.mandarin-mobile-ctrl-labeled[data-action="apoint"].state-x {
    background: transparent !important;
}

/* 关闭状態（state-x）: アイコンとラベルを赤色に */
.mandarin-mobile-ctrl-labeled[data-action="apoint"].state-x .apoint-x {
    background: transparent !important;
    stroke: #fb7185 !important;
    color: #fb7185 !important;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"].state-x .apoint-x line {
    stroke: #fb7185 !important;
}

.mandarin-mobile-ctrl-labeled[data-action="apoint"].state-x .mandarin-ctrl-label {
    color: #fb7185 !important;
}

/* ========== DESKTOP A-POINT BUTTON STYLES ========== */
/* デスクトップ用ABループボタン */
.mandarin-ctrl[data-action="apoint"] .apoint-icon {
    display: none;
}

.mandarin-ctrl[data-action="apoint"] .apoint-a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00a1d6;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.mandarin-ctrl[data-action="apoint"] .apoint-b {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.mandarin-ctrl[data-action="apoint"] .apoint-x {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ef4444;
}

.mandarin-ctrl[data-action="apoint"] .apoint-x line {
    stroke: #fff !important;
}

/* Desktop A-point button states */
.mandarin-ctrl[data-action="apoint"].state-a .apoint-a,
.mandarin-ctrl[data-action="apoint"]:not(.state-b):not(.state-x) .apoint-a {
    display: flex !important;
}

.mandarin-ctrl[data-action="apoint"].state-a .apoint-b,
.mandarin-ctrl[data-action="apoint"].state-a .apoint-x {
    display: none !important;
}

.mandarin-ctrl[data-action="apoint"].state-b .apoint-b {
    display: flex !important;
}

.mandarin-ctrl[data-action="apoint"].state-b .apoint-a,
.mandarin-ctrl[data-action="apoint"].state-b .apoint-x {
    display: none !important;
}

.mandarin-ctrl[data-action="apoint"].state-x .apoint-x {
    display: flex !important;
}

.mandarin-ctrl[data-action="apoint"].state-x .apoint-a,
.mandarin-ctrl[data-action="apoint"].state-x .apoint-b {
    display: none !important;
}

/* AB Loop Indicator on video */
.mandarin-ab-loop-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(234, 179, 8, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mandarin-ab-loop-indicator .ab-loop-text {
    font-weight: 600;
}

.mandarin-ab-loop-indicator .ab-loop-time {
    opacity: 0.9;
}

.mandarin-ab-loop-indicator .ab-loop-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.mandarin-ab-loop-indicator .ab-loop-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Hide video button icon toggle */
.mandarin-mobile-ctrl-labeled[data-action="hide-video"] .eye-open {
    display: block;
}

.mandarin-mobile-ctrl-labeled[data-action="hide-video"] .eye-closed {
    display: none;
}

.mandarin-mobile-ctrl-labeled[data-action="hide-video"].active .eye-open {
    display: none !important;
}

.mandarin-mobile-ctrl-labeled[data-action="hide-video"].active .eye-closed {
    display: block !important;
}

/* ========== 精听 Button ========== */
.mandarin-jingting-btn {
    position: relative !important;
}

.mandarin-jingting-btn .mandarin-ctrl-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    border: none !important;
    position: relative !important;
}

.mandarin-jingting-btn .mandarin-ctrl-icon svg {
    stroke: #374151 !important;
    width: 22px !important;
    height: 22px !important;
}

/* Number displayed in center of loop arrows */
.mandarin-jingting-btn .mandarin-ctrl-icon .jingting-count {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.mandarin-jingting-btn.active .mandarin-ctrl-icon svg {
    stroke: #374151 !important;
}
.mandarin-jingting-btn.active .mandarin-ctrl-icon .jingting-count {
    color: #374151 !important;
}

/* Loop count active - pink like desktop */
.mandarin-jingting-btn.loop-active .mandarin-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-jingting-btn.loop-active .mandarin-ctrl-icon svg {
    stroke: #fff !important;
}
.mandarin-jingting-btn.loop-active .mandarin-ctrl-icon .jingting-count {
    color: #fff !important;
}

/* ========== 精听 播放设置 Panel ========== */
.mandarin-jingting-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 0 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.mandarin-jingting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 12px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 8px;
}

.mandarin-jingting-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 4px 8px;
}

.mandarin-jingting-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.mandarin-jingting-reset {
    background: none;
    border: none;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
}

.mandarin-jingting-body {
    padding: 4px 0 16px;
}

.mandarin-jingting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-jingting-row:last-of-type {
    border-bottom: none;
}

.mandarin-jingting-row-label {
    font-size: 15px;
    color: #1f2937;
}

.mandarin-jingting-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mandarin-stepper-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid #6b7280 !important;
    background: #ffffff !important;
    font-size: 20px !important;
    color: #374151 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

.mandarin-stepper-btn:active {
    background: #e5e7eb !important;
    transform: scale(0.92);
}

.mandarin-stepper-value {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    min-width: 24px;
    text-align: center;
}

.mandarin-jingting-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 8px;
    gap: 0;
}

.mandarin-jingting-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    font-size: 11px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}

.mandarin-jingting-dot.active {
    background: #fb7299;  /* v6.3.5: pink instead of near-black */
    color: #fff;
    border-color: #fb7299;
}

/* Speed Selection Modal - Bottom Sheet Style */
.mandarin-speed-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    /* display is controlled by inline style and JS */
    align-items: flex-end;
    justify-content: center;
}

.mandarin-speed-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.mandarin-speed-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 16px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

.mandarin-speed-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 0;
}

/* Speed Modal Handle */
.mandarin-speed-modal-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
}

/* Speed Modal Title */
.mandarin-speed-modal-title {
    text-align: center;
    padding: 8px 24px 12px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0;
}

.mandarin-speed-option {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 8px;
    font-size: 15px;
    color: #1f2937;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.mandarin-speed-option:last-child {
    border-bottom: none;
}

.mandarin-speed-option:active {
    background: #f3f4f6;
}

.mandarin-speed-check {
    display: none;
}

.mandarin-speed-option.selected {
    background: #fb7299;
    color: #fff;
    border-color: #fb7299;
}

/* Loop Count Selection Modal - Bottom Sheet Style */
.mandarin-loop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    /* display is controlled by inline style and JS */
    align-items: flex-end;
    justify-content: center;
}

.mandarin-loop-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.mandarin-loop-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 0 16px 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

/* Loop Modal Handle */
.mandarin-loop-modal-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
}

/* Loop Modal Title */
.mandarin-loop-modal-title {
    text-align: center;
    padding: 8px 24px 12px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0;
}

.mandarin-loop-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    font-size: 17px;
    color: #1f2937;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-loop-option:last-child {
    border-bottom: none;
}

.mandarin-loop-option:active {
    background: #f3f4f6;
}

.mandarin-loop-check {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mandarin-loop-option.selected .mandarin-loop-check {
    border-color: #3b82f6;
    background: #3b82f6;
}

.mandarin-loop-option.selected .mandarin-loop-check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* ========== SUBTITLE SINGLE LOOP MODAL ========== */
.mandarin-subtitle-loop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.mandarin-subtitle-loop-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.mandarin-subtitle-loop-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 280px;
    max-width: 90%;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    animation: fadeInScale 0.2s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mandarin-subtitle-loop-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.mandarin-subtitle-loop-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mandarin-subtitle-loop-option {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: #374151;
    background: #f9fafb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.mandarin-subtitle-loop-option:hover,
.mandarin-subtitle-loop-option:active {
    background: #3b82f6;
    color: #fff;
}

/* Bottom Sheet Modal Animations */
.mandarin-speed-modal-content,
.mandarin-loop-modal-content {
    animation: slideUpModal 0.3s ease-out;
}

.mandarin-speed-modal-overlay,
.mandarin-loop-modal-overlay {
    animation: fadeInOverlay 0.3s ease-out;
}

@keyframes slideUpModal {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobile Settings Panel */
.mandarin-settings-panel {
    position: fixed;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    width: 100vw !important;
    z-index: 999999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mandarin-settings-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.mandarin-settings-content {
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 95vh;
    overflow-y: auto;
    padding: 14px 14px 10px;
    box-sizing: border-box;
    margin: 0;
}

.mandarin-settings-handle {
    display: none;
}

.mandarin-settings-quick {
    display: flex;
    justify-content: space-around;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 6px;
}

.mandarin-settings-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: #374151;
    padding: 2px 4px;
    min-width: 0;
    flex: 1;
}

.mandarin-settings-quick-btn svg {
    color: #374151;
    width: 18px;
    height: 18px;
}

.mandarin-settings-quick-btn span {
    font-size: 11px;
    white-space: nowrap;
}

.mandarin-settings-quick-btn.bookmarked {
    color: #fb7299;
}

.mandarin-settings-quick-btn.bookmarked svg {
    color: #fb7299;
    fill: #fb7299;
}

/* Font Size Slider */
.mandarin-settings-fontsize {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0;
}

.mandarin-settings-fontsize-label {
    display: flex;
    align-items: baseline;
    gap: 0;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 6px;
}

.mandarin-settings-fontsize-slider {
    padding: 0 2px;
}

.mandarin-settings-fontsize-slider input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 2px;
    outline: none;
}

.mandarin-settings-fontsize-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fb7299;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mandarin-fontsize-ticks {
    display: flex;
    justify-content: space-between;
    padding: 3px 0 0;
    font-size: 11px;
    color: #9ca3af;
}

.mandarin-settings-toggles {
    margin-bottom: 6px;
}

.mandarin-settings-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-settings-toggle-row.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.mandarin-settings-toggle-row.disabled .mandarin-toggle-slider {
    background: #e5e7eb !important;
    cursor: not-allowed;
}

.mandarin-settings-toggle-row:last-child {
    border-bottom: none;
}

.mandarin-settings-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #1f2937;
}

.mandarin-settings-toggle-label svg {
    color: #6b7280;
}

/* Toggle Switch */
.mandarin-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.mandarin-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mandarin-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 28px;
}

.mandarin-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.mandarin-toggle input:checked + .mandarin-toggle-slider {
    background-color: #fb7299;
}

.mandarin-toggle input:checked + .mandarin-toggle-slider:before {
    transform: translateX(22px);
}

/* Settings Sections */
.mandarin-settings-section {
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-settings-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 6px;
}

.mandarin-settings-section-title svg {
    color: #6b7280;
}

.mandarin-settings-btn-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mandarin-settings-btn {
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.mandarin-settings-btn.active {
    background: #fb7299;
    border-color: #fb7299;
    color: #fff;
}

/* ========== MOBILE HEADER (Reference Design) ========== */
.mandarin-mobile-header {
    display: none; /* Hidden by default, shown on mobile via media query */
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 10px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002; /* Above video(999) and tabs(1001) */
    /* v1.0.40: ヘッダーは自然な高さにし、実際の高さをJSが測って --m-hdr に反映。
       これにより動画の見切れ(ヘッダーが動画に被る)を端末差なく防ぐ。 */
    min-height: 52px;
    box-sizing: border-box;
}

/* Left: Navigation Links */
.mandarin-mobile-header-left {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.mandarin-mobile-nav-link,
.mandarin-mobile-nav-link:link,
.mandarin-mobile-nav-link:visited {
    /* v6.4.69: explicitly set :link and :visited states so the browser's
       / Divi theme's default visited-link color (was showing up green on
       user's device, Image 3/4) does not leak through. Keep gray unless
       actively hovered/pressed. */
    color: #555 !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
}

.mandarin-mobile-nav-link:hover,
.mandarin-mobile-nav-link:active,
.mandarin-mobile-nav-link:focus {
    /* v6.4.69: was #333 (gray) which let theme green show through on
       some states. Now explicitly pink on any interactive state
       (hover / tap-active / keyboard focus). */
    color: #fb7299 !important;
}

.mandarin-mobile-nav-sep {
    color: #ccc;
    font-size: 12px;
    margin: 0 1px;
}

/* Right: Episode Title + More button */
.mandarin-mobile-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Center: Episode Title (centered across full header width) */
.mandarin-mobile-header-center {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}

.mandarin-mobile-episode-num {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: auto;
}

.mandarin-mobile-header-more {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fb7299;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mandarin-mobile-header-more svg {
    width: 18px;
    height: 18px;
    stroke: #fb7299;
}

.mandarin-mobile-header-more:hover svg {
    stroke: #e5597a;
}

/* Checkin button in header */
.mandarin-mobile-header-checkin {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fb7299;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all 0.2s;
}
/* v6.3.1: Mobile header uses Font Awesome check icon. */
.mandarin-mobile-header-checkin .mandarin-checkin-icon {
    font-size: 20px;
    color: #fb7299;
    line-height: 1;
    transition: color 0.2s;
}
.mandarin-mobile-header-checkin.checked .mandarin-checkin-icon {
    color: #fb7299;
}
.mandarin-mobile-header-checkin.checked {
    color: #fb7299;
    background: rgba(251,114,153,0.15);
}

/* Like & Bookmark icons in mobile header */
.mandarin-mobile-header-icon {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fb7299;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all 0.2s;
}
.mandarin-mobile-header-icon svg {
    width: 18px;
    height: 18px;
    stroke: #fb7299;
    fill: none;
    transition: stroke 0.2s, fill 0.2s;
}
.mandarin-mobile-header-icon.mandarin-like-btn.liked {
    background: none;
}
.mandarin-mobile-header-icon.mandarin-like-btn.liked svg {
    stroke: #fb7299;
    fill: #fb7299;
}
.mandarin-mobile-header-icon.mandarin-favorite-btn.favorited {
    background: none;
}
.mandarin-mobile-header-icon.mandarin-favorite-btn.favorited svg {
    stroke: #fb7299;
    fill: #fb7299;
}

/* Mobile More Menu Dropdown */
.mandarin-mobile-more-menu {
    display: none;
    position: fixed;
    top: 48px;
    right: 12px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1003; /* Above header(1002) */
    overflow: hidden;
    min-width: 150px;
}

.mandarin-mobile-more-menu.active {
    display: block;
}

.mandarin-mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    color: #333;
    font-size: 14px;
}

.mandarin-mobile-menu-item:hover {
    background: #f5f5f5;
}

.mandarin-mobile-menu-item svg {
    width: 18px;
    height: 18px;
    color: #666;
}

/* Checkin checked state in menu */
.mandarin-mobile-menu-item.mandarin-checkin-btn.checked {
    color: #fb7299;
}
/* v6.3.1: drawer checkin uses Font Awesome icon. Gray by default, pink when checked. */
.mandarin-mobile-menu-item.mandarin-checkin-btn .mandarin-checkin-icon {
    font-size: 16px;
    color: #666;
    width: 18px;
    text-align: center;
    line-height: 1;
}
.mandarin-mobile-menu-item.mandarin-checkin-btn.checked .mandarin-checkin-icon {
    color: #fb7299;
}

/* Favorite state in menu */
.mandarin-mobile-menu-item.mandarin-favorite-btn.favorited {
    color: #fb7299;
}
.mandarin-mobile-menu-item.mandarin-favorite-btn.favorited svg {
    fill: #fb7299;
    stroke: #fb7299;
}

/* Mobile Media Query - Show/Hide Headers */
@media (max-width: 768px) {
    /* Show mobile header */
    .mandarin-mobile-header {
        display: flex !important;
    }
    
    /* Hide video overlay top-left and top-right nav (moved to header) */
    .mandarin-vo-top-left,
    .mandarin-vo-top-right {
        display: none !important;
    }
    
    /* Hide desktop header */
    .mandarin-desktop-header {
        display: none !important;
    }
}

@media (min-width: 769px) {
    /* Hide mobile header */
    .mandarin-mobile-header {
        display: none !important;
    }
    
    /* Show desktop header - inside video side */
    .mandarin-desktop-header {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 8px 0 12px 0 !important;
        background: transparent !important;
    }
    
    .mandarin-desktop-header .mandarin-header-inner {
        max-width: none !important;
        width: 100% !important;
    }
    
    /* Hide mobile more menu */
    .mandarin-mobile-more-menu {
        display: none !important;
    }
}

/* ========== WORD POPUP (地道表达 Popup) ========== */
.mandarin-word-popup {
    position: fixed;
    z-index: 999999;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    width: 340px;
    max-width: 90vw;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* v6.4.69: safety net — even if JS position clamp somehow fails,
       the popup will never exceed the viewport and content stays
       scrollable. Matches the behavior we implement in the JS
       positioning logic at mandarin-player-v3.js L4315+. */
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    overflow-x: hidden;
}

.mandarin-word-popup-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.mandarin-word-popup-fav {
    /* v6.4.58: Unified with other fav buttons — pink outline by default,
       pink fill when favorited. Previously was a gray pill with yellow
       hover/active which didn't match the rest of the UI.
       v6.4.60: Switched from text glyph (☆/★) to the shared bookmark SVG
       so the popup matches the header + episode-card bookmark icons. */
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 6px;
    color: #fb7299;
    transition: transform 0.15s;
    line-height: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mandarin-word-popup-fav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fb7299;
    transition: fill 0.15s;
}

.mandarin-word-popup-fav:hover {
    transform: scale(1.15);
}

.mandarin-word-popup-fav.favorited svg {
    fill: #fb7299;
}

.mandarin-word-popup-word {
    /* v6.4.114: bigger / bolder / pink — user wants the headword
       to read as the primary CTA in the popup. Was 18px/600/#1f2937;
       now 24px/800/pink. */
    flex: 1;
    font-size: 24px;
    font-weight: 800;
    color: #fb7299;
    margin-left: 8px;
    letter-spacing: 0.2px;
}

.mandarin-word-popup-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.mandarin-word-popup-close:hover {
    color: #374151;
}

.mandarin-word-popup-content {
    padding: 16px;
}

.mandarin-word-popup-audio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mandarin-word-popup-audio {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: background 0.2s;
}

.mandarin-word-popup-audio:hover {
    background: #e5e7eb;
}

.mandarin-word-popup-audio .audio-icon {
    font-size: 14px;
}

.mandarin-word-popup-audio .audio-label {
    color: var(--primary);
    font-weight: 500;
}

.mandarin-word-popup-ipa {
    color: #6b7280;
    font-size: 14px;
}

.mandarin-word-popup-type {
    margin-left: auto;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Category type colors */
.mandarin-word-popup-type.type-phrase { background: #dcfce7; color: #166534; }
.mandarin-word-popup-type.type-phrasal_verb { background: #fce7f3; color: #9d174d; }
.mandarin-word-popup-type.type-collocation { background: #dbeafe; color: #1e40af; }
.mandarin-word-popup-type.type-proper_noun { background: #f3e8ff; color: #6b21a8; }
.mandarin-word-popup-type.type-word { background: #fef3c7; color: #92400e; }
.mandarin-word-popup-type.type-discourse { background: #ecfccb; color: #3f6212; }
.mandarin-word-popup-type.type-idiom { background: #fef9c3; color: #854d0e; }
.mandarin-word-popup-type.type-slang { background: #ede9fe; color: #5b21b6; }
.mandarin-word-popup-type.type-adverb { background: #ffedd5; color: #c2410c; }
.mandarin-word-popup-type.type-adjective { background: #cffafe; color: #155e75; }
.mandarin-word-popup-type.type-verb { background: #fee2e2; color: #991b1b; }
.mandarin-word-popup-type.type-noun { background: #e0f2fe; color: #075985; }
.mandarin-word-popup-type.type-spoken_pattern { background: #fdf2f8; color: #be185d; }
.mandarin-word-popup-type.type-idiom_expr { background: #fff1f2; color: #be123c; }
.mandarin-word-popup-type.type-sentence { background: #f0fdf4; color: #166534; }

.mandarin-word-popup-meaning-zh {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}

.mandarin-word-popup-meaning-en {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 16px;
}

.mandarin-word-popup-example {
    background: #f0fdf4;
    border-left: 3px solid var(--primary);
    padding: 12px;
    border-radius: 0 8px 8px 0;
}

/* v1.0.103: -example-cn = Chinese sentence, -example-trans = English translation
   (renamed from the inverted parent-plugin -example-en/-zh). */
.mandarin-word-popup-example-cn {
    font-size: 14px;
    color: #374151;
    font-style: italic;
    margin-bottom: 4px;
}

.mandarin-word-popup-example-trans {
    font-size: 13px;
    color: #6b7280;
}

.mandarin-word-popup-footer {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    gap: 12px;
}

.mandarin-word-popup-copy {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.mandarin-word-popup-copy:hover {
    background: #e5e7eb;
    color: #374151;
}

.mandarin-word-popup-links {
    display: flex;
    gap: 8px;
}

.mandarin-word-link {
    /* v1.0.90 (画像4): these are text labels (Yahoo / Google / Bing), not icons —
       a fixed 28px circle clipped the text. Use an auto-width pill so each label
       shows in full. */
    min-width: 28px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s;
}

.mandarin-word-link:hover {
    transform: scale(1.1);
}

.mandarin-word-link.youdao { background: #e74c3c; color: #fff !important; }
.mandarin-word-link.baidu { background: #3b82f6; color: #fff !important; }
.mandarin-word-link.cambridge { background: #0891b2; color: #fff !important; }
.mandarin-word-link.hanzi { background: #E85D3A; color: #fff !important; } /* v1.0.23 筆順練習 */
a.mandarin-word-link,
a.mandarin-word-link:link,
a.mandarin-word-link:visited,
a.mandarin-word-link:hover,
.et_pb_module a.mandarin-word-link,
.entry-content a.mandarin-word-link {
    color: #fff !important;
}

.mandarin-word-popup-viewcard {
    margin-left: auto;
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}

.mandarin-word-popup-viewcard:hover {
    text-decoration: underline;
}

/* Highlight clickable styles - consolidated above */

/* ========== CUSTOM VIDEO CONTROLS ========== */
.mandarin-video-wrapper {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.mandarin-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: pointer;
}

/* Play Overlay (large play button in center) */
.mandarin-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s, transform 0.2s;
    z-index: 25; /* video-controls(20)より上に */
}

/* Show the SVG icon - white outline triangle */
.mandarin-video-play-overlay svg {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.mandarin-video-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.mandarin-video-play-overlay:hover svg {
    stroke-width: 2.5;
}

.mandarin-video-wrapper.playing .mandarin-video-play-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Hide large play overlay on mobile - footer controls handle play/pause */
@media (max-width: 1024px) {
    /* モバイル：再生オーバーレイ - 背景なし、大きな三角形のみ */
    .mandarin-video-play-overlay {
        display: flex !important;
        width: 80px !important;
        height: 80px !important;
        background: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: auto !important;
        z-index: 15 !important;
    }
    
    .mandarin-video-play-overlay svg {
        width: 56px !important;
        height: 56px !important;
        stroke-width: 2.5 !important;
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)) !important;
    }
    
    /* 再生中は非表示 */
    .mandarin-video-wrapper.playing .mandarin-video-play-overlay {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Hide native browser video controls on mobile - we use custom footer controls */
    #mandarin-video::-webkit-media-controls {
        display: none !important;
    }
    #mandarin-video::-webkit-media-controls-enclosure {
        display: none !important;
    }
    #mandarin-video::-webkit-media-controls-panel {
        display: none !important;
    }
    #mandarin-video {
        -webkit-media-controls: none !important;
    }
}

/* Video Controls Bar */
.mandarin-video-controls {
    position: absolute;
    bottom: 40px; /* v6.4.29: was 0 — raised to sit above the subtitle at bottom:4px */
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 12px 12px 12px;
    background: transparent;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 20;
}

.mandarin-video-wrapper.show-controls .mandarin-video-controls {
    opacity: 1;
    pointer-events: auto;
}

.mandarin-video-controls-left,
.mandarin-video-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mandarin-vc-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
}

.mandarin-vc-btn:hover {
    background: rgba(255,255,255,0.15);
}

.mandarin-vc-btn:active {
    background: rgba(255,255,255,0.25);
}

.mandarin-vc-btn svg {
    width: 18px;
    height: 18px;
}

.mandarin-vc-time {
    color: #ffffff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
}

/* Volume Slider */
.mandarin-vc-volume {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
}

.mandarin-vc-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

.mandarin-vc-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Progress Bar */
.mandarin-video-progress {
    position: absolute;
    bottom: 88px; /* v6.4.29: raised from 48px to sit above controls(40) + subtitle(4) */
    left: 12px;
    right: 12px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, height 0.2s;
    pointer-events: none;
    z-index: 21;
}

.mandarin-video-wrapper.show-controls .mandarin-video-progress {
    opacity: 1;
    pointer-events: auto;
}

.mandarin-video-progress:hover {
    height: 5px;
}

/* v6.4.64: When NO subtitle text is currently being rendered on the
   video overlay, the original design reserves ~40px at the bottom of
   the wrapper for subtitle space and stacks controls (bottom:40) and
   progress bar (bottom:88) above it. This creates an obvious empty
   band at the bottom of the video on PC when the user is paused with
   no subtitle showing, or has the dynamic-subtitle overlay off (see
   the orange-highlighted empty area in the user's screenshot).
   
   Detection: :has() + :not(:empty) checks whether ANY of the overlay
   subtitle spans currently contains text. When both CN and EN are
   empty, we pull the controls down to bottom:0 and the progress bar
   down to bottom:48 so they sit flush at the actual video edge.
   
   A small transition on `bottom` smooths the jump when a subtitle
   appears/disappears between sentences. Fullscreen layout is left
   untouched — it has its own positioning rules elsewhere.
   
   :has() support: Chrome 105+, Firefox 121+, Safari 15.4+. Older
   browsers simply fall through to the original (pre-v6.4.64) spacing. */
.mandarin-video-controls,
.mandarin-video-progress {
    transition: bottom 0.25s ease, opacity 0.3s ease;
}
.mandarin-video-wrapper:not(.fullscreen):not(:has(.mandarin-video-subtitle-cn:not(:empty))):not(:has(.mandarin-video-subtitle-en:not(:empty))) .mandarin-video-controls {
    bottom: 0;
}
.mandarin-video-wrapper:not(.fullscreen):not(:has(.mandarin-video-subtitle-cn:not(:empty))):not(:has(.mandarin-video-subtitle-en:not(:empty))) .mandarin-video-progress {
    bottom: 48px;
}

/* v6.4.30: When video is PAUSED — bilibili-style prominent progress bar
   sitting right above the subtitle so the user sees the position clearly.
   Controls remain at bottom:40 and subtitle at bottom:0, so bottom:32 puts
   the progress bar between the subtitle and controls. */
.mandarin-video-wrapper.video-paused .mandarin-video-progress {
    opacity: 1 !important;
    pointer-events: auto !important;
    bottom: 32px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.35) !important;
}

/* v6.4.64: Paused + no subtitle visible — the compact layout above moved
   controls down to bottom:0, so the paused progress bar at bottom:32
   would overlap the controls. Lift it above the controls (bottom:48)
   while keeping the prominent height/color from the v6.4.30 rule. */
.mandarin-video-wrapper.video-paused:not(.fullscreen):not(:has(.mandarin-video-subtitle-cn:not(:empty))):not(:has(.mandarin-video-subtitle-en:not(:empty))) .mandarin-video-progress {
    bottom: 48px !important;
}

/* Larger touch target: invisible padding area around the progress bar */
/* v6.2.17: Restrict vertical extent so it doesn't overlap the controls bar below.
   Previously top:-16px;bottom:-16px gave a 35px-tall hit zone whose lower half
   covered the right-side fullscreen/help/captions buttons (controls z-index:20,
   progress z-index:21 — the invisible pad won). */
.mandarin-video-progress::before {
    content: '';
    position: absolute;
    top: -12px;
    bottom: 0; /* do NOT extend downward into the controls bar */
    left: 0;
    right: 0;
}

/* During touch drag */
.mandarin-video-progress.touch-active {
    height: 6px;
}
.mandarin-video-progress.touch-active .mandarin-video-progress-handle {
    opacity: 1;
    /* v6.4.88: drag handle stays the same pill shape, just slightly
       larger so it's easier to grab on touch. */
    width: 10px;
    height: 22px;
}

.mandarin-video-progress-bar {
    height: 100%;
    /* v6.4.88: switched red (#ef4444) → brand pink (#fb7299) per user
       request. Matches the rest of the player UI (favorite button,
       checkin pill, etc.). */
    background: #fb7299;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.mandarin-video-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    /* v6.4.88: changed handle shape from a small circle to a vertical
       rounded pill (like the bilibili-mobile screenshot user sent).
       Always visible at the playhead so the user can see exactly where
       the progress is on the bar, even while scrubbing. */
    width: 6px;
    height: 14px;
    background: #fff;
    border: 1.5px solid #fb7299;
    border-radius: 3px;
    left: 0%;
    opacity: 1;
    transition: width 0.15s, height 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mandarin-video-progress:hover .mandarin-video-progress-handle {
    opacity: 1;
    width: 8px;
    height: 18px;
}

/* Fullscreen styles */
/* ========== DESKTOP FULLSCREEN (main-content level) ========== */
.mandarin-main-content.desktop-fullscreen,
.mandarin-main-content:fullscreen,
.mandarin-main-content:-webkit-full-screen {
    background: #111111 !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* v6.4.23: CSS-fallback mode (no native Fullscreen API) must also appear truly fullscreen.
   The :fullscreen pseudo-class is handled by the browser with automatic position/size,
   but the .desktop-fullscreen class alone needs explicit positioning. */
.mandarin-main-content.desktop-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    z-index: 99999 !important;
    margin: 0 !important;
    overflow: auto !important;
}
/* When CSS-fallback is active, lock the page scroll to avoid background content showing through */
body.mandarin-desktop-fs-active {
    overflow: hidden !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-video-side,
.mandarin-main-content:fullscreen .mandarin-video-side,
.mandarin-main-content:-webkit-full-screen .mandarin-video-side {
    padding: 0 !important;
    gap: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-video-wrapper,
.mandarin-main-content:fullscreen .mandarin-video-wrapper,
.mandarin-main-content:-webkit-full-screen .mandarin-video-wrapper {
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar,
.mandarin-main-content:-webkit-full-screen .mandarin-desktop-ctrl-bar {
    background: #1a1a1a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-label,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-label {
    color: #9ca3af !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-icon,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-icon {
    background: #374151 !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-icon svg,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-icon svg {
    stroke: #d1d5db !important;
}

/* Text-based icons (倍速 1x, 音標 ə) in fullscreen */
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-text,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar .mandarin-desktop-ctrl-text,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar .speed-label,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar .speed-label {
    color: #d1d5db !important;
}

/* Play button stays blue in fullscreen */
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon {
    background: #3b82f6 !important;
}
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon svg,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon svg {
    stroke: none !important;
    fill: #fff !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-subtitle-side,
.mandarin-main-content:fullscreen .mandarin-subtitle-side,
.mandarin-main-content:-webkit-full-screen .mandarin-subtitle-side {
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 100vh !important;
    top: 0 !important;
    border-left: 1px solid #2a2a2a !important;
}

/* ========== v6.4.32: TRUE FULLSCREEN — video dominates viewport ==========
   Previous behavior (v6.4.27-) kept the subtitle side panel visible in FS,
   shrinking the video to ~50% width. Users expect "全屏" to mean the video
   takes the whole screen (YouTube/Bilibili style). We hide subtitle-side
   entirely and let video-side fill 100vw. Mobile unchanged. */
/* v6.4.33 hardening: per user screenshot (Image 2) these rules were not
   winning over Divi's theme CSS on some setups. We (1) push the full-screen
   selectors to a higher specificity by also chaining the body class, and
   (2) provide a bare 'body.mandarin-desktop-fs-active' scoped version that
   works even when the browser's native :fullscreen pseudo-class is not
   applied to .mandarin-main-content (e.g. when requestFullscreen rejects). */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-subtitle-side,
.mandarin-main-content.desktop-fullscreen .mandarin-subtitle-side,
.mandarin-main-content:fullscreen .mandarin-subtitle-side,
.mandarin-main-content:-webkit-full-screen .mandarin-subtitle-side {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-video-side,
.mandarin-main-content.desktop-fullscreen .mandarin-video-side,
.mandarin-main-content:fullscreen .mandarin-video-side,
.mandarin-main-content:-webkit-full-screen .mandarin-video-side {
    width: 100vw !important;
    max-width: 100vw !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-video-wrapper,
.mandarin-main-content.desktop-fullscreen .mandarin-video-wrapper,
.mandarin-main-content:fullscreen .mandarin-video-wrapper,
.mandarin-main-content:-webkit-full-screen .mandarin-video-wrapper {
    aspect-ratio: auto !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-video-wrapper video,
.mandarin-main-content.desktop-fullscreen .mandarin-video-wrapper video,
.mandarin-main-content:fullscreen .mandarin-video-wrapper video,
.mandarin-main-content:-webkit-full-screen .mandarin-video-wrapper video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
    max-height: 100vh !important;
}
/* Desktop ctrl bar overlays on top of video in FS (auto-hide friendly) */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-bar,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-bar,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-bar,
.mandarin-main-content:-webkit-full-screen .mandarin-desktop-ctrl-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483646 !important;
    /* v6.4.43: gradient background (fade from transparent top → solid-ish
       bottom) so when the bar overlaps the English subtitle, the subtitle
       stays legible against the darker base while the top edge feathers
       naturally into the video. Matches bilibili / YouTube conventions.
       v6.4.47: Strengthened to 95%/92% opacity to HIDE the subtitle.
       v6.4.48: Reverted — user clarified that bilibili-style keeps the
       subtitle VISIBLE when controls are shown. Controls (progress bar +
       icons) sit on top in z-order and may cross through the subtitle
       area, but must not occlude it with an opaque backdrop. Gradient is
       now subtle enough to improve icon contrast without hiding text. */
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 55%, rgba(0,0,0,0) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 24px !important;  /* space for the gradient fade and overlapping subtitle */
    /* v6.4.42: smooth fade for auto-hide */
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    opacity: 1;
}

/* v6.4.42: Auto-hide ctrl bar after 3s mouse idle in desktop FS.
   JS adds .mandarin-fs-ctrl-idle on the bar AND .mandarin-fs-ui-idle on body
   when mouse has been still for 3s. Mousemove/touchstart removes both.
   v6.4.43: the body class now also hides progress bar + top-overlay
   chrome so only the subtitle (if enabled) remains visible in idle. */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-bar.mandarin-fs-ctrl-idle {
    opacity: 0 !important;
    transform: translateY(100%) !important;
    pointer-events: none !important;
}

/* v6.4.43: hide everything overlay-ish except the subtitle when idle.
   Does NOT target .mandarin-video-subtitle-overlay* — user spec says
   subtitles should stay visible whenever captionMode is on. */
body.mandarin-fs-ui-idle .mandarin-video-progress,
body.mandarin-fs-ui-idle .mandarin-vo-top-left,
body.mandarin-fs-ui-idle .mandarin-vo-top-right,
body.mandarin-fs-ui-idle .mandarin-vo-bottom-left,
body.mandarin-fs-ui-idle .mandarin-vo-channel-info,
body.mandarin-fs-ui-idle .mandarin-vo-right-sidebar,
body.mandarin-fs-ui-idle .mandarin-vo-like-fs,
body.mandarin-fs-ui-idle .mandarin-vo-share-fs {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

/* v6.4.43: when desktop FS is active AND not idle, force progress bar
   visible (it's otherwise hidden by default). .video-paused wrapper
   class already shows it but we want it ALSO on hover during playback. */
body.mandarin-desktop-fs-active:not(.mandarin-fs-ui-idle) .mandarin-video-progress {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* v6.4.65: REMOVED the v6.4.42 `transform: scale(1.25)` special-case that
   enlarged only the single-loop and pause-after buttons. User report: icon
   sizes in FS were inconsistent (some scaled 1.25x, others at default).
   The new rule (below) sizes ALL buttons uniformly — larger than non-FS but
   identical across the row. Active-state highlighting is now a ring +
   pink background on the icon circle, not a transform. */

/* v6.4.65: Unified FS control-bar icon sizing. All .mandarin-desktop-ctrl-icon
   circles become 52x52 in fullscreen (vs 40x40 default), with the 播放 button
   at 60x60 so it still reads as primary. SVGs scale proportionally. Applies
   whether FS was triggered via native API (:fullscreen) or CSS-only fallback
   (body.mandarin-desktop-fs-active). */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-icon,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-icon,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-icon {
    width: 52px !important;
    height: 52px !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-icon svg,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-icon svg,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-icon svg {
    width: 22px !important;
    height: 22px !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn {
    min-width: 64px !important;
    padding: 6px 10px !important;
}
/* Play button slightly larger per bilibili/YouTube convention */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon {
    width: 60px !important;
    height: 60px !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon svg,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon svg,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon svg {
    width: 26px !important;
    height: 26px !important;
}
/* Active state (replaces the old scale-transform indicator): pink ring
   around the circle. Applied to any ctrl-btn that's toggled ON so the
   activated state is instantly obvious at a glance — matches bilibili. */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-desktop-ctrl-icon,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="pause-after"].pause-after-on .mandarin-desktop-ctrl-icon,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="loop"].loop-on .mandarin-desktop-ctrl-icon,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="interval"].active .mandarin-desktop-ctrl-icon,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="ipa"].active .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
    box-shadow: 0 0 0 3px rgba(251,114,153,0.4) !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-desktop-ctrl-icon svg,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="pause-after"].pause-after-on .mandarin-desktop-ctrl-icon svg,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="loop"].loop-on .mandarin-desktop-ctrl-icon svg,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-desktop-ctrl-btn[data-action="interval"].active .mandarin-desktop-ctrl-icon svg {
    stroke: #ffffff !important;
}

.mandarin-main-content.desktop-fullscreen .mandarin-subtitle-list,
.mandarin-main-content:fullscreen .mandarin-subtitle-list {
    background: #ffffff !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
}

/* Hide header, mode bar, current-sub in desktop fullscreen */
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-header,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-mode-bar,
.mandarin-main-content.desktop-fullscreen .mandarin-current-sub,
.mandarin-main-content:fullscreen .mandarin-desktop-header,
.mandarin-main-content:fullscreen .mandarin-desktop-mode-bar,
.mandarin-main-content:fullscreen .mandarin-current-sub {
    display: none !important;
}

.mandarin-video-wrapper.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
}

/* ========== BILIBILI-STYLE FULLSCREEN OVERLAY ========== */

/* Title area (top-left) */
.mandarin-vo-title-area {
    display: none;
    flex-direction: column;
    gap: 6px;
    max-width: 60vw;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-title-area {
    display: flex;
}
.mandarin-vo-title-link {
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    display: block;
}
.mandarin-vo-channel-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mandarin-vo-channel-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,.5);
}
.mandarin-vo-channel-name {
    color: rgba(255,255,255,.85);
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Top-right: Like + Share (visible only in fullscreen) */
.mandarin-vo-like-fs,
.mandarin-vo-share-fs {
    display: none !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-like-fs,
.mandarin-video-wrapper.fullscreen .mandarin-vo-share-fs {
    display: flex !important;
}
.mandarin-vo-like-fs.liked svg {
    fill: #00a1d6 !important;
    stroke: #00a1d6 !important;
}

/* Right sidebar: Screenshot + Lock (visible only in fullscreen) */
.mandarin-vo-right-sidebar {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 20px;
    z-index: 35;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-right-sidebar {
    display: flex;
}
.mandarin-vo-screenshot-fs,
.mandarin-vo-lock-fs {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
}
.mandarin-vo-lock-fs.locked {
    background: rgba(0,161,214,.5);
}

/* Next episode preview (bottom-right, bilibili-style) */
.mandarin-vo-next-preview {
    display: none;
    align-items: center;
    gap: 4px;
    text-decoration: none !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-next-preview {
    display: none;
}
.mandarin-vo-next-arrow {
    color: rgba(255,255,255,.6);
    font-size: 22px;
    line-height: 1;
}
.mandarin-vo-next-thumb {
    width: 90px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    border: 1.5px solid rgba(255,255,255,.3);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Nav row (catalog + prev/next): inside top-left in fullscreen */
.mandarin-vo-nav-row {
    display: none;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-nav-row {
    display: flex;
}

/* Hide old top-left items in fullscreen (replaced by title area) — keep nav-row visible */
.mandarin-video-wrapper.fullscreen .mandarin-vo-top-left > .mandarin-vo-catalog,
.mandarin-video-wrapper.fullscreen .mandarin-vo-top-left > .mandarin-fs-nav {
    display: none !important;
}

/* Hide ep badge in fullscreen (redundant with title) */
.mandarin-video-wrapper.fullscreen .mandarin-vo-ep-badge {
    display: none !important;
}

/* Fullscreen toggle button: in normal mode stays in bottom-right, in fullscreen moves to control bar area */
.mandarin-vo-fullscreen#vo-fullscreen {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 45;
    pointer-events: auto !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-fullscreen#vo-fullscreen {
    position: absolute;
    bottom: 6px;
    right: 8px;
    z-index: 45;
    pointer-events: auto !important;
}

.mandarin-video-wrapper.fullscreen video {
    height: 100vh;
    width: 100vw;
    /* v6.4.87: switched contain → cover to eliminate the black bars at
       the top/bottom (or left/right) that appeared when the video aspect
       ratio didn't match the device aspect ratio. User reported these
       black bands as "無駄なスペース" in the FS overlay. The trade-off is
       that ~5–10% of the video edges may be cropped on extreme aspect
       ratios; the trade is worth it for a fully filled screen. */
    object-fit: cover;
}

/* Hide help (?) button in fullscreen */
.mandarin-video-wrapper.fullscreen #vc-help,
.mandarin-video-wrapper:fullscreen #vc-help,
.mandarin-video-wrapper:-webkit-full-screen #vc-help {
    display: none !important;
}

/* Force white color for all control buttons in fullscreen */
.mandarin-video-wrapper.fullscreen .mandarin-vc-btn,
.mandarin-video-wrapper:fullscreen .mandarin-vc-btn,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vc-btn {
    color: #fff !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vc-btn svg,
.mandarin-video-wrapper:fullscreen .mandarin-vc-btn svg,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vc-btn svg {
    stroke: #fff !important;
    color: #fff !important;
}
.mandarin-video-wrapper.fullscreen #vc-captions,
.mandarin-video-wrapper:fullscreen #vc-captions,
.mandarin-video-wrapper:-webkit-full-screen #vc-captions {
    color: #fff !important;
}
.mandarin-video-wrapper.fullscreen #vc-captions svg,
.mandarin-video-wrapper:fullscreen #vc-captions svg,
.mandarin-video-wrapper:-webkit-full-screen #vc-captions svg {
    stroke: #fff !important;
}

/* Native fullscreen video: fill entire screen */
.mandarin-video-wrapper:fullscreen video,
.mandarin-video-wrapper:-webkit-full-screen video {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
}

/* Force white color for nav buttons (目录, >>) in fullscreen */
.mandarin-video-wrapper.fullscreen .mandarin-vo-nav,
.mandarin-video-wrapper:fullscreen .mandarin-vo-nav,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vo-nav {
    color: #fff !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-nav svg,
.mandarin-video-wrapper:fullscreen .mandarin-vo-nav svg,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vo-nav svg {
    stroke: #fff !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-btn,
.mandarin-video-wrapper:fullscreen .mandarin-vo-btn,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vo-btn {
    color: #fff !important;
}

/* ========== VIDEO SUBTITLE OVERLAY ========== */

/* 中国語：上部に黄色＋黒縁文字 */
.mandarin-video-subtitle-overlay-top {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 30;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 英語：下部に白背景＋黒文字 */
/* v6.4.30: bilibili-style subtitle at the very bottom of the video area.
   Previous versions lifted the subtitle up (bottom:70px etc.) to avoid overlap with
   the control bar below it. That made the subtitle look "floating" and disconnected
   from the video. Now the subtitle sits flush against the bottom of the wrapper,
   and the controls/progress stack ABOVE the subtitle instead (see below). */
.mandarin-video-subtitle-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 30;
    padding: 0 16px 2px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 中国語スタイル：黄色テキスト＋黒縁 */
.mandarin-video-subtitle-cn {
    display: block;
    background: transparent;
    color: #FFE600;
    pointer-events: auto;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 95%;
    margin: 0 auto;
    width: fit-content;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        -2px  0   0 #000,
         2px  0   0 #000,
         0   -2px 0 #000,
         0    2px 0 #000;
    padding: 2px 4px;
}

/* 英語スタイル：白背景＋黒テキスト */
.mandarin-video-subtitle-en {
    display: block;
    background: rgba(255, 255, 255, 0.75);
    color: #111;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 95%;
    margin: 0 auto;
    width: fit-content;
    pointer-events: auto;
    cursor: pointer;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .mandarin-video-subtitle-overlay-top {
        top: 10px !important;
        padding: 0 44px 0 6px !important;
    }
    
    .mandarin-video-subtitle-overlay {
        bottom: 0 !important;
        padding: 0 44px 2px 12px !important;
        align-items: center !important;
    }
    
    .mandarin-video-subtitle-cn {
        font-size: 13px !important;
        max-width: 100% !important;
        text-shadow:
            -1px -1px 0 #000,
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000 !important;
    }
    
    .mandarin-video-subtitle-en {
        font-size: 12px !important;
        padding: 3px 8px !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.75) !important;
        color: #111 !important;
        max-width: 100% !important;
    }
}

.mandarin-video-subtitle-en:empty,
.mandarin-video-subtitle-cn:empty {
    display: none;
}

/* Caption mode menu */
.mandarin-caption-menu {
    position: absolute;
    bottom: 56px;
    right: 8px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 120px;
    z-index: 2147483647;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-caption-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mandarin-caption-option {
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.mandarin-caption-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mandarin-caption-option.active {
    color: #10b981;
    font-weight: 600;
}

.mandarin-caption-option.active::before {
    content: '✓ ';
}

/* Caption button active state */
.mandarin-vc-btn#vc-captions.active {
    color: #10b981;
}

/* ========== SINGLE LOOP TOOLTIP ========== */
.mandarin-single-loop-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    animation: tooltipFadeIn 0.2s ease;
}

.mandarin-single-loop-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
}

.mandarin-single-loop-tooltip.fade-out {
    opacity: 0;
    transition: opacity 0.3s;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Single loop active button styling */
.mandarin-ctrl[data-action="single"].active {
    background: #fb7299 !important;
    color: #fff !important;
}
.mandarin-ctrl[data-action="single"].active .ctrl-text {
    color: #fff !important;
}
.mandarin-ctrl[data-action="single"].active svg {
    stroke: #fff !important;
}

/* Fullscreen subtitle adjustments */
/* NEW LAYOUT: Single row at bottom — [▶ « » time] subtitle... [icons ↗] */
/* Progress bar sits just above this row */

.mandarin-video-wrapper.fullscreen .mandarin-video-controls {
    position: absolute !important;
    bottom: 40px !important; /* v6.4.29: lifted to sit above bottom subtitle */
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    height: 52px !important;
    /* v6.4.71: gradient moved to .mandarin-video-wrapper.fullscreen::after
       (anchored bottom:0, 180px tall). Old 52px band gradient here looked
       disconnected from the video's bottom edge (user bug, Image: red box). */
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 25 !important;
}

/* Compact left controls in fullscreen */
.mandarin-video-wrapper.fullscreen .mandarin-video-controls-left {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.mandarin-video-wrapper.fullscreen .mandarin-vc-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.mandarin-video-wrapper.fullscreen .mandarin-vc-btn:active {
    background: rgba(255,255,255,0.2) !important;
}

.mandarin-video-wrapper.fullscreen .mandarin-vc-btn svg {
    width: 20px !important;
    height: 20px !important;
}

.mandarin-video-wrapper.fullscreen .mandarin-vc-time {
    font-size: 11px !important;
    margin-left: 4px !important;
    opacity: 0.8 !important;
}

/* Compact right controls in fullscreen */
.mandarin-video-wrapper.fullscreen .mandarin-video-controls-right {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Hide volume slider in fullscreen to save space */
.mandarin-video-wrapper.fullscreen .mandarin-vc-volume {
    display: none !important;
}

/* English subtitle: v6.4.30 bilibili-style — flush against video bottom */
.mandarin-video-wrapper.fullscreen .mandarin-video-subtitle-overlay {
    position: absolute !important;
    /* v6.4.42: was bottom:0 which hid EN behind ctrl bar.
       v6.4.43: Lifted to 70px, white background.
       v6.4.47: Lowered to 15px + opaque gradient (HID the subtitle).
       v6.4.48: Final per bilibili reference — subtitle sits at 40px
       (above the icon row at bottom:0-30) so it stays VISIBLE when ctrl
       bar is shown. Progress bar at bottom:92px may thinly cross above
       the subtitle (matches the bilibili behaviour user showed). */
    bottom: 40px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-height: 32px !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 0 2px 0 !important;
    pointer-events: none !important;
    z-index: 24 !important;
    transition: none;
}

/* v6.4.65: FS subtitle styling UNIFIED with non-FS per user request.
   Previously (v6.4.42/.43/.48) FS used:
     - EN: transparent background, white text w/ shadow, 26px hardcoded
     - CN: semi-transparent black pill, white text, 26px hardcoded
   User report (Image 4/6): subtitle colors changed on FS, font became
   "abnormally small" on large screens, slider size was ignored.
   
   New behavior (v6.4.65):
     - EN/CN keep the SAME colors & backgrounds as non-FS (see L10214+)
     - Size driven by CSS var --mandarin-sub-size-en / --mandarin-sub-size-cn
       (set by the font-size slider). FS multiplies that by 1.6 so a
       16px base becomes ~26px in FS, with screen-responsive min/max. */
.mandarin-video-wrapper.fullscreen .mandarin-video-subtitle-en {
    /* Scale user size up by 1.6x for FS, with clamp for small/large screens */
    font-size: clamp(
        20px,
        calc(var(--mandarin-sub-size-en-raw, 16) * 1.6 * 1px),
        min(48px, 4.5vmin)
    ) !important;
    padding: 5px 14px !important;
    max-width: 95% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
    /* KEEP non-FS colors: white bg + black text for EN */
    background: rgba(255, 255, 255, 0.75) !important;
    color: #111 !important;
    border-radius: 6px !important;
    pointer-events: auto !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

/* Chinese subtitle stays at top with consistent colors */
.mandarin-video-wrapper.fullscreen .mandarin-video-subtitle-cn {
    font-size: clamp(
        20px,
        calc(var(--mandarin-sub-size-cn-raw, 14) * 1.6 * 1px),
        min(48px, 4.5vmin)
    ) !important;
    max-width: 95%;
    text-align: center;
    /* KEEP non-FS colors: yellow text + black outline */
    background: transparent !important;
    color: #FFE600 !important;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        -2px  0   0 #000,
         2px  0   0 #000,
         0   -2px 0 #000,
         0    2px 0 #000 !important;
    padding: 2px 4px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
}

/* v6.4.65: same treatment for desktop CSS-fullscreen (body class trigger).
   Previously (v6.4.42+) this block forced white+shadow EN and semi-black CN.
   Now unified with non-FS. */
body.mandarin-desktop-fs-active .mandarin-video-subtitle-overlay {
    position: absolute !important;
    bottom: 40px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 24 !important;
}
body.mandarin-desktop-fs-active .mandarin-video-subtitle-en {
    font-size: clamp(
        20px,
        calc(var(--mandarin-sub-size-en-raw, 16) * 1.6 * 1px),
        min(48px, 4.5vmin)
    ) !important;
    padding: 5px 14px !important;
    max-width: 95% !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.75) !important;
    color: #111 !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    pointer-events: auto !important;
    text-shadow: none !important;
}
body.mandarin-desktop-fs-active .mandarin-video-subtitle-overlay-top {
    top: 18px !important;
    align-items: center;
}
body.mandarin-desktop-fs-active .mandarin-video-subtitle-cn {
    font-size: clamp(
        20px,
        calc(var(--mandarin-sub-size-cn-raw, 14) * 1.6 * 1px),
        min(48px, 4.5vmin)
    ) !important;
    max-width: 95%;
    text-align: center;
    background: transparent !important;
    color: #FFE600 !important;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
        -2px  0   0 #000,
         2px  0   0 #000,
         0   -2px 0 #000,
         0    2px 0 #000 !important;
    padding: 2px 4px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
}

/* v6.4.65: Non-FS overlay subtitles also use the CSS variable by default so
   the slider controls them. Falls back to the base values (16px EN, 18px CN)
   if the variable hasn't been set yet.
   Note: the original .mandarin-video-subtitle-cn rule above declares
   font-size: 18px without !important, so the var here (without !important)
   will override it via source order. The original .mandarin-video-subtitle-en
   rule below does the same. */
.mandarin-video-subtitle-en {
    font-size: var(--mandarin-sub-size-en, 16px);
}
.mandarin-video-subtitle-cn {
    font-size: var(--mandarin-sub-size-cn, 18px);
}
/* Mobile: the @media (max-width:768px) block below uses !important, so our
   var-based rule needs !important too to take effect. Fallback 12/13px
   matches the original mobile base. */
@media (max-width: 768px) {
    .mandarin-video-subtitle-en {
        font-size: var(--mandarin-sub-size-en, 12px) !important;
    }
    .mandarin-video-subtitle-cn {
        font-size: var(--mandarin-sub-size-cn, 13px) !important;
    }
}

/* Fullscreen: progress bar sits just above the control row */
.mandarin-video-wrapper.fullscreen .mandarin-video-progress {
    bottom: 92px !important; /* v6.4.29: raised above controls(40+52) + subtitle(4) */
    left: 12px !important;
    right: 12px !important;
    height: 6px !important; /* v1.0.37: slightly taller = easier to grab in fullscreen */
    border-radius: 2px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 60 !important; /* v1.0.37: was 26 — sit above the control bar/overlay that was intercepting drags */
}

/* v6.4.92: in mobile fullscreen, dock the progress bar directly on
   top of .mandarin-mobile-controls so the labelled icon row appears
   right beneath the progress bar with no gap. We anchor it via
   position:fixed (not absolute) because .mandarin-mobile-controls
   itself is fixed at bottom:0 of the viewport — using absolute
   inside the FS wrapper would float the bar above the video edge
   instead of above the controls. The 96px offset = controls bar
   height (~88px on most devices, plus safe-area inset).
   v6.4.93: replaced :has() with the body.mandarin-mobile-fs-active
   class (see above for rationale). */
@media (max-width: 1024px) {
    body.mandarin-mobile-fs-active .mandarin-video-wrapper.fullscreen .mandarin-video-progress {
        position: fixed !important;
        bottom: calc(96px + env(safe-area-inset-bottom, 0)) !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        border-radius: 0 !important;
        z-index: 2147483645 !important; /* below controls (…646), above wrapper */
    }
    /* Hide the secondary progress bar inside .mandarin-mobile-controls
       — having two progress bars stacked is confusing. The FS one
       (above) is the canonical bar; the labeled icon row sits below. */
    body.mandarin-mobile-fs-active .mandarin-mobile-controls .mandarin-mobile-progress {
        display: none !important;
    }
}

.mandarin-video-wrapper.fullscreen .mandarin-video-subtitle-overlay-top {
    top: 6px;
    align-items: center;
}

/* Portrait CSS-fullscreen: move subtitles close to the video area */
@media (orientation: portrait) {
    .mandarin-video-wrapper.fullscreen .mandarin-video-subtitle-overlay-top {
        /* Video top edge = (100vh - 100vw*9/16) / 2 */
        top: calc((100vh - 56.25vw) / 2 - 30px) !important;
    }
    .mandarin-video-wrapper.fullscreen .mandarin-video-subtitle-overlay {
        /* Video bottom edge = (100vh - 100vw*9/16) / 2 from bottom */
        bottom: calc((100vh - 56.25vw) / 2 + 8px) !important;
    }
}

/* During loop playback: keep controls visible, hide only overlay buttons except bottom-right */
.mandarin-video-wrapper.fullscreen.loop-playing .mandarin-video-overlay-mobile > div:not(.mandarin-vo-bottom-right) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ALWAYS show controls when video is paused in fullscreen — overrides loop-playing */
.mandarin-video-wrapper.fullscreen.video-paused .mandarin-video-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.mandarin-video-wrapper.fullscreen.video-paused .mandarin-video-overlay-mobile > div {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* v6.4.87: BUT — when the body is in idle mode (no interaction for 6s),
   honor the auto-hide regardless of paused/playing state. User
   explicitly asked: "全てのアイコンなど字幕以外のものは指定されてない
   限り 6 秒経てば自動的に消えるように". The video-paused rules above
   used to keep the controls pinned in pause mode (bilibili-style),
   which violates the new global "everything fades after 6s" contract.
   These rules win because of higher specificity (body class + wrapper
   class). */
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen.video-paused .mandarin-video-controls,
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen.video-paused .mandarin-video-overlay-mobile > div {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}

/* ========== FLOATING QUICK MUTE BUTTON ========== */
.mandarin-video-quick-mute {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    background: transparent !important;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    z-index: 20;
    transition: background 0.2s, opacity 0.3s;
    opacity: 0.8;
}

.mandarin-video-quick-mute:hover {
    background: rgba(0,0,0,0.3) !important;
    opacity: 1;
}

.mandarin-video-quick-mute svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.mandarin-video-quick-mute.muted svg {
    color: #ef4444;
}

/* ========== KEYBOARD SHORTCUTS MODAL ========== */
.mandarin-shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mandarin-shortcuts-content {
    background: #fff;
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mandarin-shortcuts-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.mandarin-shortcuts-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.mandarin-shortcuts-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.mandarin-shortcuts-columns {
    display: flex;
    gap: 40px;
}

.mandarin-shortcuts-col {
    flex: 1;
}

.mandarin-shortcuts-section {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.mandarin-shortcut-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.mandarin-shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 4px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    font-family: ui-monospace, monospace;
}

.mandarin-shortcut-desc {
    font-size: 14px;
    color: #6b7280;
}

.mandarin-shortcuts-hint {
    text-align: center;
    margin-top: 24px;
    color: #9ca3af;
    font-size: 13px;
}

.mandarin-shortcuts-hint .mandarin-shortcut-key {
    min-width: auto;
    padding: 2px 8px;
}

@media (max-width: 600px) {
    .mandarin-shortcuts-columns {
        flex-direction: column;
        gap: 24px;
    }
    
    .mandarin-shortcuts-content {
        padding: 24px;
    }
}

/* ========== MOBILE BOTTOM SHEET MODALS ========== */
/* Force full-width bottom sheet style for Speed and Loop modals - MOBILE ONLY */
@media (max-width: 768px) {
    .mandarin-player-v3 .mandarin-speed-modal,
    .mandarin-speed-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* When modal is shown via JS (display: flex) */
    .mandarin-speed-modal[style*="display: flex"],
    .mandarin-speed-modal[style*="display:flex"] {
        display: flex !important;
    }

    .mandarin-player-v3 .mandarin-speed-modal-overlay,
    .mandarin-speed-modal-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 1 !important;
    }

    .mandarin-player-v3 .mandarin-speed-modal-content,
    .mandarin-speed-modal-content {
        position: relative !important;
        z-index: 2 !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 0 16px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.2) !important;
        margin: 0 !important;
    }

    .mandarin-player-v3 .mandarin-loop-modal,
    .mandarin-loop-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* When modal is shown via JS (display: flex) */
    .mandarin-loop-modal[style*="display: flex"],
    .mandarin-loop-modal[style*="display:flex"] {
        display: flex !important;
    }

    .mandarin-player-v3 .mandarin-loop-modal-overlay,
    .mandarin-loop-modal-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 1 !important;
    }

    .mandarin-player-v3 .mandarin-loop-modal-content,
    .mandarin-loop-modal-content {
        position: relative !important;
        z-index: 2 !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 0 !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.2) !important;
        margin: 0 !important;
    }

    /* Modal Handle */
    .mandarin-speed-modal-handle,
    .mandarin-loop-modal-handle {
        width: 40px !important;
        height: 4px !important;
        background: #d1d5db !important;
        border-radius: 2px !important;
        margin: 12px auto 8px !important;
        display: block !important;
    }

    /* Modal Title */
    .mandarin-speed-modal-title,
    .mandarin-loop-modal-title {
        text-align: center !important;
        padding: 8px 24px 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Modal Options */
    .mandarin-speed-modal-content .mandarin-speed-option,
    .mandarin-loop-modal-content .mandarin-loop-option {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 24px !important;
        font-size: 17px !important;
        color: #1f2937 !important;
        cursor: pointer !important;
        border-bottom: 1px solid #f3f4f6 !important;
        background: #fff !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mandarin-speed-modal-content .mandarin-speed-option:last-child,
    .mandarin-loop-modal-content .mandarin-loop-option:last-child {
        border-bottom: none !important;
    }

    .mandarin-speed-modal-content .mandarin-speed-option:active,
    .mandarin-loop-modal-content .mandarin-loop-option:active {
        background: #f3f4f6 !important;
    }

    /* Radio Check Circle */
    .mandarin-speed-check,
    .mandarin-loop-check {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        border: 2px solid #d1d5db !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: transparent !important;
    }

    .mandarin-speed-option.selected .mandarin-speed-check,
    .mandarin-loop-option.selected .mandarin-loop-check {
        border-color: #3b82f6 !important;
        background: #3b82f6 !important;
    }

    .mandarin-speed-option.selected .mandarin-speed-check::after,
    .mandarin-loop-option.selected .mandarin-loop-check::after {
        content: '' !important;
        width: 8px !important;
        height: 8px !important;
        background: #fff !important;
        border-radius: 50% !important;
        display: block !important;
    }
} /* End mobile media query */

/* ========== FINAL YOUTUBE SIZE OVERRIDE FOR DESKTOP ========== */
/* These styles have highest priority to override any theme styles */
@media screen and (min-width: 769px) {
    /* YouTube section container - centered */
    body .mandarin-player-v3 .mandarin-youtube-section,
    body .mandarin-youtube-section,
    .mandarin-youtube-section {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* YouTube wrapper - 30% of container width */
    body .mandarin-player-v3 .mandarin-youtube-section .mandarin-youtube-wrapper,
    body .mandarin-youtube-section .mandarin-youtube-wrapper,
    .mandarin-youtube-wrapper {
        width: 30% !important;
        max-width: 30% !important;
        min-width: 200px !important;
        height: auto !important;
        padding: 0 !important;
        padding-bottom: 16.875% !important; /* 30% * 56.25% = 16.875% for 16:9 aspect ratio */
        margin: 0 auto !important;
    }
    
    body .mandarin-player-v3 .mandarin-youtube-section .mandarin-youtube-wrapper iframe,
    body .mandarin-youtube-section .mandarin-youtube-wrapper iframe,
    .mandarin-youtube-wrapper iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
    }
}

/* ========== DIVI THEME OVERRIDES - REMOVE EXTRA SPACING ========== */
/* Remove bottom spacing from Divi post content module containing mandarin player */
body.single-mandarin_episode .et_pb_post_content,
body.single-mandarin_episode .et_pb_post_content_0_tb_body,
body.single-mandarin_episode .et_pb_section,
body.single-mandarin_episode .et_pb_row,
body.single-mandarin_episode article.mandarin_episode {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove spacing after mandarin player */
.mandarin-player-v3 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove spacing from episode nav (last element) */
.mandarin-episode-nav {
    margin-bottom: 0 !important;
    padding-bottom: 16px !important;
}

/* Remove any ::after pseudo-elements that add space */
body.single-mandarin_episode .et_pb_post_content::after,
body.single-mandarin_episode .et_pb_section::after {
    display: none !important;
    content: none !important;
}

/* ========== 字幕原文内のハイライト装飾 ========== */
/* 字幕リスト内の英語原文では下線のみを削除、背景色は維持 */
.mandarin-sub-en .mandarin-highlight,
.mandarin-sub-en .highlight-phrase,
.mandarin-sub-en .highlight-phrasal_verb,
.mandarin-sub-en .highlight-collocation,
.mandarin-sub-en .highlight-proper_noun,
.mandarin-sub-en .highlight-word,
.mandarin-sub-en .highlight-discourse,
.mandarin-sub-en .highlight-favorited {
    border-bottom: none !important;
}

/* ========== MOBILE: HIDE VIDEO OVERLAY CONTROLS ========== */
/* モバイルでは動画上のボリューム・ヘルプボタンを非表示 */
@media (max-width: 768px) {
    /* Floating quick mute button on video */
    .mandarin-video-quick-mute {
        display: none !important;
    }
    
    /* Help button (?) in video controls */
    #vc-help,
    .mandarin-video-controls #vc-help {
        display: none !important;
    }
    
    /* Hide desktop fullscreen button on mobile (vo-fullscreen in overlay instead) */
    .mandarin-video-controls #vc-fullscreen {
        display: none !important;
    }
    
    /* Mute button in video controls - モバイルでも表示 */
    #vc-mute,
    .mandarin-video-controls #vc-mute {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
    }
    
    #vc-mute svg,
    .mandarin-video-controls #vc-mute svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Volume slider in video controls */
    #vc-volume,
    .mandarin-vc-volume,
    .mandarin-video-controls .mandarin-vc-volume {
        display: none !important;
    }
}

/* ========== MOBILE AUDIO PLAYER MODAL ========== */

/* Hide video controls bar on mobile portrait, but keep overlay and fullscreen */
@media (max-width: 1024px) and (orientation: portrait) {
    /* Hide the bottom control bar items except fullscreen */
    .mandarin-video-controls .mandarin-video-controls-left {
        display: none !important;
    }
    .mandarin-video-controls .mandarin-video-controls-right .mandarin-vc-btn:not(#vc-fullscreen) {
        display: none !important;
    }
    .mandarin-video-controls .mandarin-vc-volume {
        display: none !important;
    }
    .mandarin-video-quick-mute {
        display: none !important;
    }
    .mandarin-video-progress {
        display: none !important;
    }
    /* Keep fullscreen button on the right side */
    .mandarin-video-controls .mandarin-video-controls-right {
        margin-left: auto !important;
    }
    /* Keep the play overlay (big center play button) visible */
    .mandarin-video-play-overlay {
        display: flex !important;
    }
    /* Show all controls in fullscreen (native :fullscreen and .fullscreen class) */
    .mandarin-video-wrapper:fullscreen .mandarin-video-controls .mandarin-video-controls-left,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-controls .mandarin-video-controls-left,
    .mandarin-video-wrapper.fullscreen .mandarin-video-controls .mandarin-video-controls-left {
        display: flex !important;
        gap: 4px !important;
    }
    .mandarin-video-wrapper:fullscreen .mandarin-video-controls .mandarin-video-controls-right .mandarin-vc-btn,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-controls .mandarin-video-controls-right .mandarin-vc-btn,
    .mandarin-video-wrapper.fullscreen .mandarin-video-controls .mandarin-video-controls-right .mandarin-vc-btn {
        display: flex !important;
    }
    .mandarin-video-wrapper:fullscreen .mandarin-video-progress,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-progress,
    .mandarin-video-wrapper.fullscreen .mandarin-video-progress {
        display: block !important;
        height: 4px !important;
        bottom: 52px !important;
        left: 12px !important;
        right: 12px !important;
        border-radius: 2px !important;
    }
    .mandarin-video-wrapper:fullscreen .mandarin-video-progress-handle,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-progress-handle,
    .mandarin-video-wrapper.fullscreen .mandarin-video-progress-handle {
        width: 14px !important;
        height: 14px !important;
        opacity: 1 !important;
    }
    /* Hide captions button in fullscreen to save space (use settings panel instead) */
    .mandarin-video-wrapper.fullscreen #vc-captions,
    .mandarin-video-wrapper:fullscreen #vc-captions {
        display: none !important;
    }
    /* Hide vc-fullscreen in fullscreen (vo-fullscreen in overlay is used instead) */
    .mandarin-video-wrapper.fullscreen #vc-fullscreen,
    .mandarin-video-wrapper:fullscreen #vc-fullscreen,
    .mandarin-video-wrapper:-webkit-full-screen #vc-fullscreen {
        display: none !important;
    }
}

/* Always show all controls in landscape on mobile */
@media (max-width: 1024px) and (orientation: landscape) {
    .mandarin-video-controls .mandarin-video-controls-left {
        display: flex !important;
    }
    .mandarin-video-controls .mandarin-video-controls-right .mandarin-vc-btn {
        display: flex !important;
    }
    /* Hide vc-fullscreen in landscape (vo-fullscreen handles it) */
    .mandarin-video-wrapper.fullscreen #vc-fullscreen,
    .mandarin-video-wrapper:fullscreen #vc-fullscreen,
    .mandarin-video-wrapper:-webkit-full-screen #vc-fullscreen {
        display: none !important;
    }
    /* v5.9.97: Hide vc-mute and volume slider in fullscreen even in landscape
       (top-left X button + tap-to-control are sufficient) */
    .mandarin-video-wrapper.fullscreen .mandarin-video-controls-right #vc-mute,
    .mandarin-video-wrapper:fullscreen .mandarin-video-controls-right #vc-mute,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-controls-right #vc-mute,
    .mandarin-video-wrapper.fullscreen .mandarin-video-controls .mandarin-vc-volume,
    .mandarin-video-wrapper:fullscreen .mandarin-video-controls .mandarin-vc-volume,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-controls .mandarin-vc-volume {
        display: none !important;
    }
    .mandarin-video-progress {
        display: block !important;
        height: 4px !important;
        bottom: 52px !important;
        left: 12px !important;
        right: 12px !important;
        border-radius: 2px !important;
    }
    .mandarin-video-progress .mandarin-video-progress-handle {
        width: 16px !important;
        height: 16px !important;
        opacity: 1 !important;
    }
    /* Move Ep badge to right side in landscape */
    .mandarin-vo-bottom-left {
        left: auto !important;
        right: 12px !important;
        bottom: 52px !important; /* Above the bottom-right status badges */
    }
    /* Move navigation arrows to right side in landscape to avoid overlap */
    .mandarin-vo-top-left {
        left: auto !important;
        right: 12px !important;
    }
}

/* Move Ep badge to right side in fullscreen */
.mandarin-video-wrapper.fullscreen .mandarin-vo-bottom-left {
    display: none !important;
}

/* Hide quick-mute in fullscreen (vc-mute in control bar is sufficient) */
.mandarin-video-wrapper.fullscreen .mandarin-video-quick-mute,
.mandarin-video-wrapper:fullscreen .mandarin-video-quick-mute,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-video-quick-mute {
    display: none !important;
}

/* v5.9.97: Hide vc-mute button and volume slider in fullscreen
   (user can tap screen to control volume, no need for buttons) */
.mandarin-video-wrapper.fullscreen #vc-mute,
.mandarin-video-wrapper:fullscreen #vc-mute,
.mandarin-video-wrapper:-webkit-full-screen #vc-mute,
.mandarin-video-wrapper.fullscreen .mandarin-vc-volume,
.mandarin-video-wrapper:fullscreen .mandarin-vc-volume,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vc-volume {
    display: none !important;
}

/* Hide checkin button in fullscreen */
.mandarin-video-wrapper.fullscreen .mandarin-vo-checkin,
.mandarin-video-wrapper:fullscreen .mandarin-vo-checkin,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vo-checkin {
    display: none !important;
}

/* v6.4.82: Move navigation arrows to right side in fullscreen to avoid overlap.
   v6.4.88: Right side now hosts the like / favorite / checkin / more
   buttons that the user re-introduced.
   v6.4.89: Per user request, move 目录 / 上期 / 下期 BACK to the left
   side. They sit immediately to the right of the close (×) button
   (which is fixed at top:12px;left:12px;width:36px) so we offset the
   nav row by ~56px to clear it. */
.mandarin-video-wrapper.fullscreen .mandarin-vo-top-left {
    left: 56px !important;
    right: auto !important;
    top: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

.mandarin-audio-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex;
    align-items: flex-end !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mandarin-audio-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1 !important;
}

.mandarin-audio-modal-content {
    position: relative !important;
    z-index: 2 !important;
    background: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 20px)) !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
}

.mandarin-audio-modal-handle {
    width: 40px !important;
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    margin: 12px auto 8px !important;
    display: block !important;
}

.mandarin-audio-modal-title {
    text-align: center !important;
    padding: 8px 24px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
}

.mandarin-audio-player-wrap {
    padding: 24px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.mandarin-audio-player-wrap audio {
    width: 100% !important;
    max-width: 400px !important;
    height: 54px !important;
    border-radius: 27px !important;
}

/* Chrome/Safari audio player styling */
.mandarin-audio-player-wrap audio::-webkit-media-controls-panel {
    background: #f3f4f6 !important;
    border-radius: 27px !important;
}

.mandarin-audio-modal-actions {
    padding: 8px 24px 24px !important;
    display: flex !important;
    justify-content: center !important;
}

.mandarin-audio-download-btn,
.mandarin-audio-download-btn:link,
.mandarin-audio-download-btn:visited,
.mandarin-audio-download-btn:active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #00a1d6 !important;
    color: #fff !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: background 0.2s !important;
}

.mandarin-audio-download-btn:hover {
    background: #0089b8 !important;
    color: #fff !important;
}

.mandarin-audio-download-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #fff !important;
    color: #fff !important;
}

/* スマホで動画上のプログレスバーを非表示 */
@media (max-width: 768px) {
    .mandarin-video-progress {
        display: none !important;
    }
}

/* ========== CHECKIN MODAL - ACTIVITY ITEMS ========== */
.mandarin-checkin-modal {
    max-width: 400px !important;
    width: 90% !important;
    border-radius: 16px !important;
    overflow: visible !important;
    overflow-y: auto !important;
    max-height: 80vh !important;
    max-height: 80dvh !important;
    background: #f5f5f5 !important;
}

.mandarin-checkin-modal-header {
    text-align: center !important;
    padding: 20px 20px 12px !important;
    position: relative !important;
}

.mandarin-checkin-modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 0 4px !important;
}

.mandarin-checkin-modal-subtitle {
    font-size: 14px !important;
    color: #9ca3af !important;
}
/* v1.0.37: check-in history list */
#checkin-pass { color: #f97316; font-weight: 700; }
.mandarin-checkin-history {
    background: #f9fafb; border: 1px solid #f0f0f0; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 12px; max-height: 160px; overflow-y: auto;
}
.mandarin-checkin-history-title { font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.mandarin-checkin-history-row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #374151; padding: 4px 0; border-top: 1px solid #f0f0f0; }
.mandarin-checkin-history-row:first-of-type { border-top: none; }
.mandarin-checkin-history-row .mhci-pass { color: #f97316; font-weight: 700; flex: 0 0 auto; }
.mandarin-checkin-history-row .mhci-date { color: #9ca3af; flex: 0 0 auto; }
.mandarin-checkin-history-row .mhci-note { color: #374151; flex: 1; word-break: break-word; }

.mandarin-checkin-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    padding: 4px !important;
}

.mandarin-checkin-modal-body {
    padding: 0 20px 16px !important;
}

.mandarin-checkin-textarea {
    width: 100% !important;
    min-height: 80px !important;
    padding: 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    resize: none !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #374151 !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
}

.mandarin-checkin-textarea:focus {
    outline: none !important;
    border-color: #00a1d6 !important;
    box-shadow: 0 0 0 3px rgba(0, 161, 214, 0.15) !important;
}

.mandarin-checkin-textarea::placeholder {
    color: #9ca3af !important;
}

.mandarin-checkin-difficulty {
    margin-top: 16px !important;
}

.mandarin-checkin-diff-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
}

.mandarin-checkin-stars {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.mandarin-checkin-star {
    font-size: 24px !important;
    color: #d1d5db !important;
    cursor: pointer !important;
    transition: color 0.15s !important;
    user-select: none !important;
    line-height: 1 !important;
}

.mandarin-checkin-star.active {
    color: #f59e0b !important;
}

.mandarin-checkin-star:hover {
    color: #fbbf24 !important;
}

.mandarin-checkin-diff-text {
    margin-left: 8px !important;
    font-size: 14px !important;
    color: #6b7280 !important;
}

.mandarin-checkin-modal-footer {
    padding: 12px 20px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 16px !important;
}

.mandarin-checkin-btn-cancel {
    background: none !important;
    border: none !important;
    font-size: 15px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
}

.mandarin-checkin-btn-confirm {
    background: #00a1d6 !important;
    color: #fff !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}

.mandarin-checkin-btn-confirm:hover {
    background: #0089b8 !important;
}

/* ========== WORDPRESS ADMIN BAR SUPPORT ========== */
/* 管理者ログイン時（admin-bar表示時）のモバイル対応 */

/* デスクトップ管理バー（32px）- 782px以上 */
@media (min-width: 783px) {
    body.admin-bar .mandarin-mobile-header {
        top: 32px !important;
    }
    
    body.admin-bar .mandarin-player-v3 .mandarin-mobile-header {
        top: 32px !important;
    }
    
    body.admin-bar .mandarin-player-v3 .mandarin-video-wrapper {
        top: 80px !important; /* 48px(header) + 32px(admin-bar) */
    }
    
    body.admin-bar .mandarin-mobile-more-menu {
        top: 88px !important; /* 56px + 32px */
    }
}

/* モバイル管理バー（46px）- 782px以下 */
@media (max-width: 782px) {
    body.admin-bar .mandarin-mobile-header {
        top: 46px !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-mobile-header {
        top: 46px !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-video-wrapper {
        top: calc(46px + 52px) !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-mobile-tabs,
    body.admin-bar .mandarin-mobile-tabs {
        top: calc(100vw * 9 / 16 + 46px + 52px) !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-video-side {
        padding-top: calc(100vw * 9 / 16 + 46px + 52px) !important;
    }
    body.admin-bar .mandarin-mobile-more-menu {
        top: calc(46px + 48px) !important;
    }
    /* Video hidden */
    body.admin-bar .mandarin-player-v3.video-hidden .mandarin-mobile-tabs {
        top: calc(52px + 46px) !important;
    }
    body.admin-bar .mandarin-player-v3.video-hidden .mandarin-video-side {
        padding-top: calc(52px + 46px) !important;
    }
    body.admin-bar .mandarin-mobile-controls {
        z-index: 100001 !important;
    }
}

/* iOS Safari admin-bar（モバイルではスクロールで隠れる） */
@media (max-width: 600px) {
    body.admin-bar .mandarin-mobile-header {
        top: 46px !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-mobile-header {
        top: 46px !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-video-wrapper {
        top: calc(46px + 52px) !important;
    }
    body.admin-bar .mandarin-mobile-tabs {
        top: calc(100vw * 9 / 16 + 46px + 52px) !important;
    }
    body.admin-bar .mandarin-player-v3 .mandarin-video-side {
        padding-top: calc(100vw * 9 / 16 + 46px + 52px) !important;
    }
    body.admin-bar .mandarin-mobile-more-menu {
        top: calc(46px + 48px) !important;
    }
}

/* ========== PRINT PREVIEW MODAL ========== */
/* ========== Note Modal (TECO style bottom sheet) ========== */
.mandarin-note-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mandarin-note-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.mandarin-note-modal-sheet {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    padding: 20px 24px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    animation: noteModalFadeIn 0.2s ease-out;
    max-height: 85vh;
    overflow-y: auto;
}

/* Hide handle bar on desktop */
.mandarin-note-modal-handle {
    display: none;
}

@media (max-width: 768px) {
    .mandarin-note-modal {
        align-items: flex-end;
    }
    .mandarin-note-modal-sheet {
        max-width: 90% !important;
        width: 90vw !important;
        border-radius: 16px;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
        animation: noteModalSlideUp 0.3s ease-out;
    }
    /* Show handle bar on mobile */
    .mandarin-note-modal-handle {
        display: block;
        width: 36px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 12px;
    }
}

@keyframes noteModalFadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes noteModalSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.mandarin-note-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.mandarin-note-modal-title {
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    padding: 0;
}

.mandarin-note-modal-num {
    font-weight: 500;
    color: #6b7280;
}

.mandarin-note-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-note-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.mandarin-note-modal-subtitle-box {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.mandarin-note-modal-sub-en {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.5;
    margin-bottom: 4px;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

.mandarin-note-modal-sub-zh {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

.mandarin-note-modal-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
}

.mandarin-note-modal-input {
    width: 100%;
    min-height: 100px;
    border: 1.5px solid #93c5fd;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    color: #1f2937;
    background: #fff;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: ui-sans-serif, system-ui, sans-serif;
    box-sizing: border-box;
}

.mandarin-note-modal-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.mandarin-note-modal-input::placeholder {
    color: #d1d5db;
}

.mandarin-note-modal-original {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 8px;
    padding: 0 2px;
}

.mandarin-note-modal-original-text {
    color: #6b7280;
}

.mandarin-note-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.mandarin-note-modal-delete {
    flex: 1;
    padding: 11px 0;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    color: #ef4444;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-note-modal-delete:hover {
    background: #fef2f2;
}

.mandarin-note-modal-save {
    flex: 1.5;
    padding: 11px 0;
    border: none;
    border-radius: 10px;
    background: #00a1d6;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.mandarin-note-modal-save:hover {
    background: #0089b8;
}

.mandarin-print-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mandarin-print-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mandarin-print-modal-content {
    position: relative;
    background: #f5f5f5;
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.mandarin-print-modal-header {
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.mandarin-print-modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 12px 0;
    text-align: center;
}

.mandarin-print-modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mandarin-print-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mandarin-print-tab.active {
    background: #4a90d9;
    color: #fff;
    border-color: #4a90d9;
}

.mandarin-print-modal-actions {
    display: flex;
    gap: 8px;
}

.mandarin-print-action-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mandarin-print-action-btn:hover {
    background: #f3f4f6;
}

.mandarin-print-preview-body {
    overflow-y: auto;
    flex: 1;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.mandarin-print-preview-paper {
    /* v1.0.72 (SS11): book-page style — cream paper, serif title, ruled lines,
       generous margins, dropped shadow. Renders the same in both the preview
       overlay and the printed output (the iframe printer below clones the
       relevant styles). */
    background: #fdfaf2;
    padding: 44px 40px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    max-width: 640px;
    margin: 0 auto;
    font-family: "Georgia","Source Serif Pro","PingFang SC","Noto Serif SC","Songti SC",serif;
    color: #2b2118;
    position: relative;
}
.mandarin-print-preview-paper::after {
    /* Subtle bottom rule like a book page */
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d6cdb8, transparent);
    margin-top: 18px;
}

/* v1.0.72 (SS11): word chips with visible boundary space. Hanzi line and
   pinyin line both render as inline-flex strings of chips. */
.mandarin-print-sub-words-py {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    color: #8a6f3e;
    font-style: italic;
    font-size: 13px;
    font-family: "Georgia","Source Serif Pro",serif;
}
.mandarin-print-word {
    display: inline-block;
    padding: 0 1px;
    font-weight: 600;
}
.mandarin-print-word-py {
    display: inline-block;
    white-space: nowrap;
}
.mandarin-print-sub-en {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 12px;
    font-size: 17px;
    line-height: 1.55;
    color: #2b2118;
    font-family: "PingFang SC","Songti SC","Noto Serif SC","Source Han Serif SC","Georgia",serif;
}

.mandarin-print-paper-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    margin: 0 0 16px 0;
}

.mandarin-print-paper-divider {
    border: none;
    border-top: 2px solid #1f2937;
    margin: 0 0 20px 0;
}

.mandarin-print-sub-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
    line-height: 1.6;
}

.mandarin-print-sub-item:last-child {
    border-bottom: none;
}

.mandarin-print-sub-num {
    flex-shrink: 0;
    width: 28px;
    font-size: 14px;
    color: #6b7280;
    text-align: right;
    padding-top: 2px;
}

.mandarin-print-sub-content {
    flex: 1;
    min-width: 0;
}

.mandarin-print-sub-ipa {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 2px;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', sans-serif;
}

.mandarin-print-sub-en {
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 2px;
}

.mandarin-print-sub-zh {
    font-size: 14px;
    color: #6b7280;
}

/* Print mode: en only */
.mandarin-print-preview-paper[data-print-mode="en"] .mandarin-print-sub-zh {
    display: none;
}
.mandarin-print-preview-paper[data-print-mode="en"] .mandarin-print-sub-ipa {
    display: none;
}

/* Print mode: zh only */
.mandarin-print-preview-paper[data-print-mode="zh"] .mandarin-print-sub-en {
    display: none;
}
.mandarin-print-preview-paper[data-print-mode="zh"] .mandarin-print-sub-ipa {
    display: none;
}

/* Print mode: dual */
.mandarin-print-preview-paper[data-print-mode="dual"] .mandarin-print-sub-ipa,
.mandarin-print-preview-paper[data-print-mode="dual"] .mandarin-print-sub-en,
.mandarin-print-preview-paper[data-print-mode="dual"] .mandarin-print-sub-zh {
    display: block;
}

/* ========== @media print ========== */
/* Print is handled via a new window in JS to avoid theme/plugin CSS conflicts */

/* ========== BLANK SPACE FIX & DESKTOP CONTROL BAR ========== */

/* Remove potential blank space above video on desktop */
@media (min-width: 1025px) {
    .mandarin-desktop-header {
        padding: 8px 0 !important;
        margin-bottom: 4px !important;
        min-height: 0 !important;
    }
    .mandarin-header-left-half {
        min-height: 36px;
        align-items: center;
    }
    .mandarin-desktop-header .mandarin-header-title {
        font-size: 22px !important;
        white-space: nowrap;
    }
    .mandarin-video-side {
        padding-top: 8px !important;
    }
    /* 現在の字幕エリアをコンパクトに */
    .mandarin-current-sub {
        min-height: 0 !important;
        padding: 10px 12px !important;
        margin-bottom: 6px !important;
    }
}

/* ========== DESKTOP CONTROL BAR BELOW VIDEO ========== */
.mandarin-desktop-ctrl-bar {
    display: none; /* hidden on mobile */
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: #ffffff;
    border-radius: 12px;
    border-top: none;
    flex-wrap: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

@media (min-width: 1025px) {
    .mandarin-desktop-ctrl-bar {
        display: flex;
    }
    /* Hide mobile controls on desktop */
    .mandarin-controls {
        display: none !important;
    }
}

/* Each button in desktop ctrl bar */
.mandarin-desktop-ctrl-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: background 0.15s !important;
    min-width: 52px !important;
    -webkit-tap-highlight-color: transparent !important;
}
.mandarin-desktop-ctrl-btn:hover {
    background: rgba(0,0,0,0.04) !important;
}

/* === DEFAULT ICON CIRCLE === */
.mandarin-desktop-ctrl-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    transition: background 0.15s, transform 0.1s !important;
    flex-shrink: 0 !important;
}
.mandarin-desktop-ctrl-btn:hover .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn:hover .mandarin-desktop-ctrl-icon svg {
    stroke: #fff !important;
}
.mandarin-desktop-ctrl-btn:hover .mandarin-desktop-ctrl-icon .mandarin-desktop-ctrl-text {
    color: #fff !important;
}
.mandarin-desktop-ctrl-btn:active .mandarin-desktop-ctrl-icon {
    transform: scale(0.93) !important;
}
.mandarin-desktop-ctrl-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #374151 !important;
    fill: none !important;
    flex-shrink: 0 !important;
}

/* === 播放ボタン: BLUE always === */
.mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon {
    background: #3b82f6 !important;
    width: 54px !important;
    height: 54px !important;
}
.mandarin-desktop-ctrl-play:hover .mandarin-desktop-ctrl-icon {
    background: #2563eb !important;
}
.mandarin-desktop-ctrl-play .mandarin-desktop-ctrl-icon svg {
    stroke: none !important;
    fill: #ffffff !important;
    width: 26px !important;
    height: 26px !important;
}

/* === 视频循环 ON: PINK === */
.mandarin-desktop-ctrl-btn[data-action="loop"].loop-on .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn[data-action="loop"].loop-on .mandarin-desktop-ctrl-icon svg {
    stroke: #ffffff !important;
}

/* === 音标 ON: BLUE === */
.mandarin-desktop-ctrl-btn[data-action="ipa"].active .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn[data-action="ipa"].active .mandarin-desktop-ctrl-icon .mandarin-desktop-ctrl-text {
    color: #ffffff !important;
}

/* === A点: PINK by default (ready to set A point) === */
.mandarin-desktop-ctrl-btn[data-action="apoint"] .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn[data-action="apoint"]:hover .mandarin-desktop-ctrl-icon {
    background: #f0507d !important;
}
.mandarin-desktop-ctrl-btn[data-action="apoint"] .mandarin-desktop-ctrl-text {
    color: #ffffff !important;
}
/* A点 → B点 state (A set, waiting for B): darker pink */
.mandarin-desktop-ctrl-btn[data-action="apoint"].apoint-b .mandarin-desktop-ctrl-icon {
    background: #e84578 !important;
}
.mandarin-desktop-ctrl-btn[data-action="apoint"].apoint-b:hover .mandarin-desktop-ctrl-icon {
    background: #d63d6c !important;
}
/* A点 → Active loop (A-B set): cancel red */
.mandarin-desktop-ctrl-btn[data-action="apoint"].apoint-cancel .mandarin-desktop-ctrl-icon {
    background: #f43f5e !important;
}
.mandarin-desktop-ctrl-btn[data-action="apoint"].apoint-cancel:hover .mandarin-desktop-ctrl-icon {
    background: #e11d48 !important;
}
.mandarin-desktop-ctrl-btn[data-action="apoint"].apoint-cancel .mandarin-desktop-ctrl-icon svg {
    stroke: #ffffff !important;
}

/* === 単句 active: PINK === */
.mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-desktop-ctrl-text {
    color: #ffffff !important;
}
.mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-single-count-center {
    color: #ffffff !important;
}
.mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-single-loop-icon svg {
    stroke: #ffffff !important;
}
.mandarin-desktop-ctrl-btn[data-action="single"].single-active .mandarin-desktop-ctrl-label {
    color: #fb7299 !important;
}

/* === 间隔 active: PINK === */
.mandarin-desktop-ctrl-btn[data-action="interval"].active .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn[data-action="interval"].active .mandarin-desktop-ctrl-icon svg {
    stroke: #ffffff !important;
}
.mandarin-desktop-ctrl-btn[data-action="interval"].active .mandarin-desktop-ctrl-label {
    color: #fb7299 !important;
}

/* === 継続 (pause-after): PINK when active === */
.mandarin-desktop-ctrl-btn[data-action="pause-after"].pause-after-on .mandarin-desktop-ctrl-icon {
    background: #fb7299 !important;
}
.mandarin-desktop-ctrl-btn[data-action="pause-after"].pause-after-on:hover .mandarin-desktop-ctrl-icon {
    background: #f0507d !important;
}
.mandarin-desktop-ctrl-btn[data-action="pause-after"].pause-after-on .mandarin-desktop-ctrl-icon svg {
    stroke: #ffffff !important;
}
.mandarin-desktop-ctrl-btn[data-action="pause-after"].pause-after-on .mandarin-desktop-ctrl-label {
    color: #fb7299 !important;
}

/* === Label === */
.mandarin-desktop-ctrl-label {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* === Text icon (倍速, 単句 etc) === */
.mandarin-desktop-ctrl-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    line-height: 40px !important;
    width: 40px !important;
    text-align: center !important;
}

/* Speed dropdown */
.mandarin-desktop-speed-dropdown {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    padding: 6px !important;
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
    z-index: 200 !important;
    min-width: 70px !important;
}
.mandarin-desktop-speed-dropdown.open {
    display: flex !important;
}
.mandarin-desktop-speed-option {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    color: #374151 !important;
    transition: background 0.1s !important;
    border: none !important;
    background: transparent !important;
    white-space: nowrap !important;
}
.mandarin-desktop-speed-option:hover {
    background: #f3f4f6 !important;
}
.mandarin-desktop-speed-option.active {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* === Nav buttons (上一句/下一句) — dark circle bg === */
.mandarin-desktop-ctrl-nav .mandarin-desktop-ctrl-icon {
    background: #374151 !important;
}
.mandarin-desktop-ctrl-nav .mandarin-desktop-ctrl-icon svg {
    stroke: #ffffff !important;
}

/* === Wrapper for popup-bearing buttons === */
.mandarin-desktop-ctrl-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* === 单句循环 icon with centered count === */
.mandarin-single-loop-icon {
    position: relative !important;
}

.mandarin-single-loop-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.mandarin-single-count-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* For 3-digit numbers, shrink font */
.mandarin-single-count-center.digits-3 {
    font-size: 7px !important;
}

/* === 单句循环 count popup === */
.mandarin-single-count-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 14px;
    z-index: 100;
    min-width: 200px;
}

.mandarin-scp-title {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500;
}

.mandarin-scp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.mandarin-scp-btn {
    padding: 10px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.mandarin-scp-btn:hover {
    background: #f3f4f6;
}

.mandarin-scp-btn.active {
    background: #6b7280;
    color: #ffffff;
    border-color: #6b7280;
}

/* v6.4.67: Interval picker popup buttons — same look as scp-btn */
.mandarin-sip-btn {
    padding: 10px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.mandarin-sip-btn:hover {
    background: #f3f4f6;
}
.mandarin-sip-btn.active {
    background: #fb7299;  /* pink for interval, to match the "间隔X秒" pink label style */
    color: #ffffff;
    border-color: #fb7299;
}
/* Interval popup positioning: anchor to the 间隔 button via its wrap parent */
.mandarin-interval-popup {
    min-width: 240px;
}

/* === Speed grid popup === */
.mandarin-speed-grid-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    transform: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 14px;
    z-index: 100;
    min-width: 220px;
}

.mandarin-sgp-title {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500;
}

.mandarin-sgp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.mandarin-sgp-btn {
    padding: 10px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.mandarin-sgp-btn:hover {
    background: #f3f4f6;
}

.mandarin-sgp-btn.active {
    background: #6b7280;
    color: #ffffff;
    border-color: #6b7280;
}

/* ========== SETTINGS PANEL CLOSE BUTTON ========== */
.mandarin-settings-close-btn {
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background: #f3f4f6 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    z-index: 20 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.mandarin-settings-close-btn:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
}
.mandarin-settings-close-btn svg {
    pointer-events: none !important;
}
/* Ensure quick-actions row doesn't overlap close button */
.mandarin-settings-quick {
    padding-right: 36px !important;
}

/* ========== DICTATION REVEAL BUTTON ========== */
.mandarin-mobile-dictation-wrapper {
    position: relative !important;
    display: none !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    padding: 0 4px 0 8px !important;
    gap: 0 !important;
}
.mandarin-mobile-dictation-wrapper .mandarin-mobile-dictation-input {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
    font-size: 15px !important;
    border: none !important;
    background: transparent !important;
    border-bottom: none !important;
}
.mandarin-mobile-dictation-wrapper .mandarin-mobile-dictation-input:focus {
    border-bottom: none !important;
    outline: none !important;
}
.mandarin-dictation-reveal-btn {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    padding: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.mandarin-dictation-reveal-btn:hover {
    color: #6b7280 !important;
}
.mandarin-dictation-reveal-btn svg {
    pointer-events: none !important;
    width: 18px !important;
    height: 18px !important;
}
/* Revealed answer text area */
.mandarin-dictation-revealed-text {
    background: #fff8e1 !important;
    border: 1px solid #f59e0b !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}
.mandarin-dictation-revealed-text .revealed-en {
    font-weight: 500 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}
.mandarin-dictation-revealed-text .revealed-zh {
    font-size: 13px !important;
    color: #6b7280 !important;
}


/* ========== MOBILE PLAY BUTTON - FIX v3.7.04 ========== */
/* buttonそのものを円形にする。内部divに依存しない最も確実な方法 */

/* === ボタン本体のベーススタイル === */
button.mandarin-mobile-ctrl-play,
div.mandarin-mobile-ctrl-play,
div[role="button"].mandarin-mobile-ctrl-play,
.mandarin-mobile-controls button.mandarin-mobile-ctrl-play,
.mandarin-mobile-controls div.mandarin-mobile-ctrl-play,
.mandarin-mobile-controls div[role="button"].mandarin-mobile-ctrl-play,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play,
.mandarin-player-v3 button.mandarin-mobile-ctrl-play,
.mandarin-player-v3 div.mandarin-mobile-ctrl-play,
.mandarin-player-v3 div[role="button"].mandarin-mobile-ctrl-play,
.mandarin-player-v3 .mandarin-mobile-ctrl-play,
body button.mandarin-mobile-ctrl-play,
body div.mandarin-mobile-ctrl-play,
body .mandarin-mobile-ctrl-play {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    flex-direction: row !important;
    text-decoration: none !important;
    color: #fff !important;
    /* 他のボタンCSSを上書き */
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* === focus / active / visited も全て同じ丸ボタン === */
.mandarin-mobile-ctrl-play:hover,
.mandarin-mobile-ctrl-play:focus,
.mandarin-mobile-ctrl-play:focus-visible,
.mandarin-mobile-ctrl-play:focus-within,
.mandarin-mobile-ctrl-play:active,
.mandarin-mobile-ctrl-play:visited,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play:hover,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play:focus,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play:active,
body .mandarin-mobile-ctrl-play:focus,
body .mandarin-mobile-ctrl-play:active,
body .mandarin-mobile-ctrl-play:hover {
    background: #1f2937 !important;
    background-color: #1f2937 !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #fff !important;
}

/* タップ時のちょっとした視覚フィードバック */
.mandarin-mobile-ctrl-play:active {
    background: #374151 !important;
    background-color: #374151 !important;
    transform: scale(0.94) !important;
}

/* === ボタン内のSVGアイコン: 常に白、背景なし === */
.mandarin-mobile-ctrl-play svg,
.mandarin-mobile-ctrl-play svg path,
.mandarin-mobile-ctrl-play svg rect,
body .mandarin-mobile-ctrl-play svg,
body .mandarin-mobile-ctrl-play svg path,
body .mandarin-mobile-ctrl-play svg rect,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play svg,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play svg path,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play svg rect,
.mandarin-player-v3 .mandarin-mobile-controls .mandarin-mobile-ctrl-play svg,
.mandarin-player-v3 .mandarin-mobile-controls .mandarin-mobile-ctrl-play svg path,
.mandarin-player-v3 .mandarin-mobile-controls .mandarin-mobile-ctrl-play svg rect {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* SVGアイコンのサイズと可視性を確保（DIVI上書き防止） */
.mandarin-mobile-ctrl-play svg.play-icon,
.mandarin-mobile-ctrl-play svg.pause-icon,
body .mandarin-mobile-ctrl-play svg.play-icon,
body .mandarin-mobile-ctrl-play svg.pause-icon,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play svg.play-icon,
.mandarin-mobile-controls .mandarin-mobile-ctrl-play svg.pause-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
}

/* pause-iconは初期非表示 */
.mandarin-mobile-ctrl-play .pause-icon {
    display: none;
}

/* Hide WordPress emoji images that replace our SVG icons */
.mandarin-mobile-ctrl-play img.emoji,
.mandarin-mobile-ctrl-play img.wp-smiley,
.mandarin-mobile-controls img.emoji,
.mandarin-mobile-controls img.wp-smiley {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Explicit background reset for play-icon/pause-icon class names (DIVI override) */
.mandarin-mobile-ctrl-play .play-icon,
.mandarin-mobile-ctrl-play .pause-icon,
.mandarin-mobile-controls .play-icon,
.mandarin-mobile-controls .pause-icon,
body .play-icon,
body .pause-icon {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* mandarin-play-circleクラスが残っている場合は無害にする */
.mandarin-mobile-ctrl-play .mandarin-play-circle,
.mandarin-mobile-ctrl-play div.mandarin-play-circle {
    display: contents !important; /* 親のflexに透過 */
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}

/* ========== EXPRESSION POPUP ========== */
.mandarin-expr-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

.mandarin-expr-popup-overlay.active {
    display: flex;
}

.mandarin-expr-popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 420px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: mandarinPopupIn 0.2s ease-out;
}

@keyframes mandarinPopupIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mandarin-expr-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f3f4f6;
}

.mandarin-expr-popup-fav {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #d1d5db;
    padding: 0;
    line-height: 1;
}

.mandarin-expr-popup-fav.saved {
    color: #fb7299;
}

.mandarin-expr-popup-word {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    /* v6.4.124 (revised): keep `flex: 1` so the title spans
       the full available width, pushing the category badge
       (inserted right after popup-word by JS) over to the
       right edge next to the close button. Without flex:1
       the badge clung to the word and read as cramped. */
    flex: 1;
    min-width: 0;
}

.mandarin-expr-popup-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
    line-height: 1;
    /* v6.4.124: with popup-word reclaiming flex:1, the close
       button no longer needs margin-left:auto to reach the
       right edge — flex layout handles it. We keep it as a
       safety net in case markup shifts. */
    margin-left: 4px;
    flex-shrink: 0;
}

.mandarin-expr-popup-close:hover {
    color: #374151;
}

.mandarin-expr-popup-body {
    padding: 16px 20px;
}

.mandarin-expr-popup-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mandarin-expr-popup-audio {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

.mandarin-expr-popup-accent {
    font-size: 12px;
    color: #9ca3af;
}

.mandarin-expr-popup-ipa {
    font-size: 14px;
    color: #6b7280;
}

.mandarin-expr-popup-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    /* v6.4.124: removed `margin-left: auto`. The badge now
       sits in the popup header right before the close
       button (popup-word has flex:1, so the badge naturally
       gets pushed to the right edge). flex-shrink:0 keeps
       it readable on narrow popups. */
    flex-shrink: 0;
}

.mandarin-expr-popup-badge.cat-phrase,
.mandarin-expr-popup-badge.cat-phrasal_verb {
    background: #dcfce7;
    color: #166534;
}

.mandarin-expr-popup-badge.cat-word {
    background: #fef3c7;
    color: #92400e;
}

.mandarin-expr-popup-badge.cat-collocation {
    background: #dbeafe;
    color: #1e40af;
}

.mandarin-expr-popup-badge.cat-proper_noun {
    background: #fce7f3;
    color: #be185d;
}

.mandarin-expr-popup-badge.cat-discourse {
    background: #ecfccb;
    color: #3f6212;
}

.mandarin-expr-popup-meaning-zh {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.mandarin-expr-popup-meaning-en {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 14px;
}

.mandarin-expr-popup-example {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.mandarin-expr-popup-example.cat-phrase,
.mandarin-expr-popup-example.cat-phrasal_verb {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
}

.mandarin-expr-popup-example.cat-word {
    background: #fffbeb;
    border-left: 3px solid #f97316;
}

.mandarin-expr-popup-example.cat-collocation {
    background: #eff6ff;
    border-left: 3px solid #6366f1;
}

.mandarin-expr-popup-example.cat-proper_noun {
    background: #fdf2f8;
    border-left: 3px solid #ec4899;
}

.mandarin-expr-popup-example.cat-discourse {
    background: #fefce8;
    border-left: 3px solid #84cc16;
}

.mandarin-expr-popup-example-en {
    font-size: 14px;
    font-style: italic;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 4px;
}

.mandarin-expr-popup-example-zh {
    font-size: 13px;
    color: #6b7280;
}

.mandarin-expr-popup-collocations {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 14px;
}

.mandarin-expr-popup-collocations-label {
    font-weight: 600;
    color: #9ca3af;
}

.mandarin-expr-popup-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #f3f4f6;
}

.mandarin-expr-popup-copy {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
}

.mandarin-expr-popup-copy:hover {
    background: #f9fafb;
}

.mandarin-expr-popup-ext-links {
    display: flex;
    gap: 6px;
}

.mandarin-expr-popup-ext-link {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.mandarin-expr-popup-ext-link.y { background: #e74c3c; color: #fff !important; }
.mandarin-expr-popup-ext-link.b { background: #3b82f6; color: #fff !important; }
.mandarin-expr-popup-ext-link.c { background: #0891b2; color: #fff !important; }
a.mandarin-expr-popup-ext-link,
a.mandarin-expr-popup-ext-link:link,
a.mandarin-expr-popup-ext-link:visited,
a.mandarin-expr-popup-ext-link:hover,
.et_pb_module a.mandarin-expr-popup-ext-link,
.entry-content a.mandarin-expr-popup-ext-link {
    color: #fff !important;
}

.mandarin-expr-popup-card-link {
    margin-left: auto;
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.mandarin-expr-popup-card-link:hover {
    text-decoration: underline;
}

/* === ULTIMATE FIX: Force white SVG icons in play/pause button === */
body .mandarin-mobile-ctrl-play svg path,
body .mandarin-mobile-ctrl-play svg rect,
body .mandarin-mobile-ctrl-play svg polygon,
body .mandarin-mobile-ctrl-play .pause-icon rect,
body .mandarin-mobile-ctrl-play .play-icon path,
body div.mandarin-mobile-ctrl-play svg path,
body div.mandarin-mobile-ctrl-play svg rect,
body div[role="button"].mandarin-mobile-ctrl-play svg rect,
body div[role="button"].mandarin-mobile-ctrl-play svg path,
.mandarin-player-v3 .mandarin-mobile-controls div.mandarin-mobile-ctrl-play svg rect,
.mandarin-player-v3 .mandarin-mobile-controls div.mandarin-mobile-ctrl-play svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none !important;
    background: none !important;
    background-color: transparent !important;
}

/* Ensure fullscreen button and status badges remain visible in fullscreen mode */
.mandarin-video-wrapper.fullscreen .mandarin-video-overlay-mobile > .mandarin-vo-bottom-right,
.mandarin-video-wrapper:fullscreen .mandarin-video-overlay-mobile > .mandarin-vo-bottom-right {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 30 !important;
    bottom: 50px !important;
    right: 8px !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-bottom-right .mandarin-vo-btn,
.mandarin-video-wrapper:fullscreen .mandarin-vo-bottom-right .mandarin-vo-btn,
.mandarin-video-wrapper.fullscreen .mandarin-vo-bottom-right .mandarin-vo-status,
.mandarin-video-wrapper:fullscreen .mandarin-vo-bottom-right .mandarin-vo-status {
    pointer-events: auto !important;
}

/* ================================================================
   TABLET LANDSCAPE (≤1024px landscape): Revert to desktop layout
   Side-by-side video + subtitle panel instead of mobile stack
   ================================================================ */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Main content: horizontal flex (desktop style) */
    .mandarin-main-content {
        flex-direction: row !important;
        gap: 12px !important;
        padding: 0 8px !important;
    }

    /* Video side: 50% width */
    .mandarin-player-v3 .mandarin-video-side {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-top: 8px !important;
    }
    .mandarin-player-v3 .mandarin-video-wrapper {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        border-radius: 12px !important;
    }

    /* Show desktop subtitle side */
    .mandarin-player-v3 .mandarin-subtitle-side {
        display: flex !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        max-height: calc(100vh - 60px) !important;
        position: sticky !important;
        top: 60px !important;
    }

    /* Show desktop mode bar */
    .mandarin-desktop-mode-bar {
        display: flex !important;
    }
    /* v1.0.105: the mode bar is two rows here too, so the same clearance the
       desktop (min-width:1025px) rule applies is needed on tablet landscape —
       otherwise the first subtitle line hides under the taller bar. */
    .mandarin-subtitle-side .mandarin-subtitle-list,
    .mandarin-subtitle-side .mandarin-desktop-cards {
        padding-top: var(--mandarin-mode-bar-h, 82px) !important;
    }

    /* Show desktop header, hide mobile header */
    .mandarin-desktop-header {
        display: flex !important;
    }
    .mandarin-player-v3 .mandarin-mobile-header {
        display: none !important;
    }

    /* Show desktop current-sub below video */
    .mandarin-current-sub {
        display: block !important;
    }

    /* Show desktop control bar */
    .mandarin-desktop-ctrl-bar {
        display: flex !important;
    }

    /* Show speaker info */
    .mandarin-speaker-info {
        display: flex !important;
    }

    /* Show bilibili-style controls */
    .mandarin-controls {
        display: block !important;
    }

    /* Hide mobile container (tabs + panels) */
    .mandarin-player-v3 .mandarin-mobile-container {
        display: none !important;
    }

    /* Hide mobile controls footer */
    .mandarin-mobile-controls {
        display: none !important;
    }

    /* Remove video subtitle width limit */
    .mandarin-video-subtitle-en {
        max-width: 90% !important;
        font-size: 14px !important;
    }
    .mandarin-video-subtitle-cn {
        max-width: 90% !important;
    }

    /* Restore desktop gray background */
    .mandarin-player-v3 {
        background: #f0f0f0 !important;
    }
    .mandarin-main-content {
        background: #f0f0f0 !important;
    }

    /* Show desktop settings popup if opened */
    .mandarin-desktop-settings-popup {
        display: none; /* hidden by default, JS toggles */
    }
    .mandarin-dsp-backdrop {
        display: none;
    }
}

/* ================================================================
   TABLET PORTRAIT (769-1024px portrait): Apply fixed layout like phones
   Fixed video + fixed tabs below video
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    /* Fix video to top */
    .mandarin-player-v3 .mandarin-video-wrapper {
        position: fixed !important;
        top: var(--m-hdr, 52px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vw * 9 / 16) !important;
        z-index: 999 !important;
        background: #000 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* Spacer for fixed video + header */
    .mandarin-player-v3 .mandarin-video-side {
        padding-top: calc(var(--m-hdr, 52px) + 100vw * 9 / 16) !important;
    }

    /* Fix tabs below video */
    .mandarin-mobile-tabs {
        position: fixed !important;
        top: calc(var(--m-hdr, 52px) + 100vw * 9 / 16) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
        background: #fff !important;
        box-shadow: none !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Content below fixed tabs */
    .mandarin-player-v3 .mandarin-mobile-content,
    .mandarin-mobile-content {
        margin-top: 46px !important;
        padding: 0 !important;
    }

    /* Panels padding reset */
    .mandarin-player-v3 .mandarin-mobile-panel,
    .mandarin-player-v3 #panel-normal {
        padding: 0 !important;
        margin: 0 !important;
        padding-top: 8px !important;
    }

    .mandarin-player-v3 .mandarin-mobile-subtitle-list {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mandarin-player-v3 .mandarin-mobile-sub-item:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* Video hidden: tabs at header position */
    .mandarin-player-v3.video-hidden .mandarin-video-side {
        padding-top: var(--m-hdr, 52px) !important;
    }
    .mandarin-player-v3.video-hidden .mandarin-mobile-tabs {
        top: var(--m-hdr, 52px) !important;
    }
    .mandarin-player-v3.video-hidden .mandarin-mobile-content {
        margin-top: 46px !important;
    }
}

/* ============================================================
 * v6.4.21: PCのみネイティブ風コントロール(play/rewind/forward/help/mute/volume)を非表示
 * モバイルは現状維持（下部カスタムコントローラーが主UIなので重複削除）
 * フルスクリーン時はPCでも全ボタン復元（操作手段を確保）
 * ============================================================ */
@media (min-width: 769px) {
    .mandarin-video-wrapper:not(.fullscreen) #vc-play,
    .mandarin-video-wrapper:not(.fullscreen) #vc-rewind,
    .mandarin-video-wrapper:not(.fullscreen) #vc-forward,
    .mandarin-video-wrapper:not(.fullscreen) #vc-help,
    .mandarin-video-wrapper:not(.fullscreen) #vc-mute,
    .mandarin-video-wrapper:not(.fullscreen) #vc-volume {
        display: none !important;
    }
}

/* ============================================================
 * v6.4.21: Loop interval countdown overlay
 * Shown on video while waiting for the loop interval (between repeats or between sentences)
 * ============================================================ */
.mandarin-loop-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mandarin-loop-countdown-number {
    min-width: 100px;
    min-height: 100px;
    padding: 24px 32px;
    border-radius: 20px;
    background: rgba(251, 114, 153, 0.92); /* ピンク #fb7299 */
    color: #fff;
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: mandarinLoopCountdownPulse 1s ease-out;
    font-variant-numeric: tabular-nums;
}

@keyframes mandarinLoopCountdownPulse {
    0% {
        transform: scale(1.4);
        opacity: 0;
    }
    30% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Smaller on narrow mobile screens */
@media (max-width: 480px) {
    .mandarin-loop-countdown-number {
        min-width: 72px;
        min-height: 72px;
        padding: 16px 22px;
        font-size: 56px;
        border-radius: 16px;
    }
}

/* In fullscreen, keep it prominent */
.mandarin-video-wrapper.fullscreen .mandarin-loop-countdown-number,
.mandarin-video-wrapper:fullscreen .mandarin-loop-countdown-number,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-loop-countdown-number {
    font-size: 96px;
    min-width: 140px;
    min-height: 140px;
    padding: 32px 40px;
}

/* ================================================================
   v6.4.65: ISSUE 3/7 — FULLSCREEN CLOSE BUTTON + LARGER BOTTOM-RIGHT
   ================================================================
   User reports:
     - Image 7: PC full-screen right-bottom icons (字幕 toggle + 缩小)
       are too small to notice. Enlarge with visible circular background.
     - Desktop FS has no obvious close ✕ button in the top-right corner.
   Fix:
     - Inject a #mandarin-desktop-fs-exit-btn via JS on desktop FS enter
       (similar to the mobile one) at the top-right corner.
     - Enlarge .mandarin-vo-btn size in all fullscreen variants.
     - Add a prominent pink background on hover so users see the target. */

/* --- Enlarged bottom-right icons in any FS --- */
.mandarin-video-wrapper.fullscreen .mandarin-vo-btn,
.mandarin-video-wrapper:fullscreen .mandarin-vo-btn,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vo-btn,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-vo-btn {
    width: 52px !important;
    height: 52px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    /* stronger backdrop blur so the icon stands out against video */
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-btn:hover,
.mandarin-video-wrapper:fullscreen .mandarin-vo-btn:hover,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-vo-btn:hover {
    background: rgba(251, 114, 153, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vo-btn svg,
.mandarin-video-wrapper:fullscreen .mandarin-vo-btn svg,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-vo-btn svg {
    width: 24px !important;
    height: 24px !important;
}

/* Desktop FS close button (injected via JS, similar to mobile one but top-right) */
#mandarin-desktop-fs-exit-btn {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 2147483647 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.15s, transform 0.1s !important;
}
#mandarin-desktop-fs-exit-btn:hover {
    background: rgba(251, 114, 153, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.05) !important;
}
#mandarin-desktop-fs-exit-btn:active {
    transform: scale(0.95) !important;
}
/* Hide this close button when the desktop FS UI is idle (3s timeout)
   v6.4.74: Same rationale as the vc-btn rule below — keep it clickable
   while invisible so the first tap exits FS instead of just waking the UI. */
body.mandarin-fs-ui-idle #mandarin-desktop-fs-exit-btn {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* ================================================================
   v6.4.65: ISSUE 6 — MOBILE FS AUTO-HIDE PROGRESS + CONTROLS
   ================================================================
   Reuses the body.mandarin-fs-ui-idle class for mobile FS (installed
   by _mandarinInstallMobileFsIdle in JS). The existing desktop-FS rule
   only hid specific overlay elements; this rule adds the mobile
   progress bar and video-controls bar.
   v6.4.74: Removed pointer-events: none for the same reason as the
   desktop vc-btn rule above — taps on the (invisible) icons should
   still wake the UI and trigger the action. The mousemove/touchstart
   handler in JS removes .mandarin-fs-ui-idle on activity, which then
   restores opacity. Without this change the FS exit button felt
   completely dead until the user nudged the screen first. */
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-video-controls,
body.mandarin-fs-ui-idle .mandarin-video-wrapper:fullscreen .mandarin-video-controls,
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-video-progress,
body.mandarin-fs-ui-idle .mandarin-video-wrapper:fullscreen .mandarin-video-progress,
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen #mandarin-fs-exit-btn,
body.mandarin-fs-ui-idle #mandarin-fs-exit-btn {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}
/* Also hide the overlay chrome (title, like, etc.) on mobile FS idle */
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-vo-top-left,
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-vo-top-right,
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-vo-bottom-right,
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-vo-right-sidebar {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

/* ================================================================
   v6.4.68: ISSUE 4 — ENLARGE #vc-captions + #vc-fullscreen IN FS
   ================================================================
   User report (Image 4): the captions-toggle pill and the compress
   (exit-fullscreen) icons in the bottom-right corner of the video
   controls were still small (40x40, 20px SVG) while the main ctrl
   bar icons had been enlarged to 52x52 (v6.4.65). This made them
   easy to miss in desktop FS.
   
   Fix: in fullscreen (mobile AND desktop), size these ALL `.mandarin-vc-btn`
   icons to match the ctrl bar (52x52, 22px SVG, semi-transparent
   dark background with a visible border like the other FS buttons).
   Also keep them hidden during idle (inherits from mandarin-fs-ui-idle). */

/* Mobile fullscreen via .fullscreen class */
.mandarin-video-wrapper.fullscreen .mandarin-vc-btn,
.mandarin-video-wrapper:fullscreen .mandarin-vc-btn,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vc-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    /* v6.4.84: User feedback (image: mobile FS) — the dark filled circle
       + white border made each control look heavy and "stuck on" the
       video instead of part of it. Strip the round chrome so the
       icons sit flat on the bottom-left of the video, the way the
       上一期 / 下一期 nav now does at the top (v6.4.82). The
       drop-shadow on the SVG keeps them readable on bright video
       frames without needing a pill background. */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vc-btn svg,
.mandarin-video-wrapper:fullscreen .mandarin-vc-btn svg,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vc-btn svg {
    width: 22px !important;
    height: 22px !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) !important;
}
.mandarin-video-wrapper.fullscreen .mandarin-vc-btn:hover,
.mandarin-video-wrapper:fullscreen .mandarin-vc-btn:hover {
    /* Subtle highlight on hover instead of the old pink fill. */
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: transparent !important;
    border-radius: 8px !important;
}

/* v6.4.84: Hide the bottom-right captions-toggle and fullscreen-toggle
   buttons in mobile fullscreen, per user request. The captions can still
   be toggled from the 设置 popup (字幕大小 picker), and exiting FS is
   handled by the close (×) button at top-left of the overlay or by the
   native browser back gesture. Removing them makes the bottom-bar match
   the cleaner top-bar layout (just nav + title). */
.mandarin-video-wrapper.fullscreen #vc-captions,
.mandarin-video-wrapper.fullscreen #vc-fullscreen,
.mandarin-video-wrapper:fullscreen #vc-captions,
.mandarin-video-wrapper:fullscreen #vc-fullscreen,
.mandarin-video-wrapper:-webkit-full-screen #vc-captions,
.mandarin-video-wrapper:-webkit-full-screen #vc-fullscreen {
    display: none !important;
}

/* ================================================================
   v6.4.86: FURTHER MOBILE-FS OVERLAY POLISH
   ================================================================
   User report (image: 第 2 期 alexis eldredge with bottom-right FS
   icon framed in a square):
   - The episode title "第 N 期 ..." and the channel info (avatar +
     speaker name) shown at the top-right of the FS overlay weren't
     useful in fullscreen — the user already knows what they're
     watching, and the labels just covered the video.
   - The bottom-right ⤢ FS-toggle button (#vo-fullscreen) still had a
     square-ish frame because of leftover background/border rules
     from earlier versions; user reports the rectangular frame is
     unwanted.
   Fix:
   - Hide .mandarin-vo-title-area in mobile fullscreen.
   - Remove all background/border on #vo-fullscreen so the icon
     floats flat on the video. */
.mandarin-video-wrapper.fullscreen .mandarin-vo-title-area,
.mandarin-video-wrapper:fullscreen .mandarin-vo-title-area,
.mandarin-video-wrapper:-webkit-full-screen .mandarin-vo-title-area {
    display: none !important;
}

/* Strip the rectangular frame (+ any pink fill) on #vo-fullscreen
   in BOTH the non-FS and FS states so the icon is consistent. */
#vo-fullscreen.mandarin-vo-fullscreen,
#vo-fullscreen.mandarin-vo-fullscreen:hover,
.mandarin-video-wrapper.fullscreen #vo-fullscreen.mandarin-vo-fullscreen {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
#vo-fullscreen.mandarin-vo-fullscreen svg {
    stroke: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* ================================================================
   v6.4.90: SWAP MOBILE-FS BOTTOM BAR → labeled icons
   ================================================================
   The previous mobile FS layout used .mandarin-video-controls (▶ / ‹‹
   / ›› / 0:00 — small flat icons) which the user judged inadequate.
   The page already renders .mandarin-mobile-controls (the white
   bottom bar with 1x / 隐藏 / 上一句 / ▶ / 下一句 / A点 / 精听)
   in normal view. We just lift it above the FS wrapper z-index and
   hide the redundant .mandarin-video-controls so the labeled icons
   become the single source of truth in fullscreen too.

   The bar stays fixed to the bottom of the viewport. Background is
   left as-is (white) so it remains readable on any video frame —
   matches non-FS UX and avoids reskinning identical functionality
   per-mode.

   v6.4.93: Switched the parent selector from `:has()` (Chrome 105+,
   Safari 15.4+, Firefox 121+) to a body-level class added by JS
   (mandarin-mobile-fs-active). Older WebView/Safari builds — common
   on the Chinese-mainland devices we target — silently dropped the
   :has() rule, leaving the bottom bar invisible behind the FS
   wrapper (user reported black/orange empty space at the bottom).
   The body class is wired through _mandarinInstallMobileFsIdle and
   _mandarinTeardownMobileFsIdle so it follows the same lifecycle as
   the existing idle-timer state. */
@media (max-width: 1024px) {
    body.mandarin-mobile-fs-active .mandarin-mobile-controls {
        z-index: 2147483646 !important; /* one below the exit-btn (max int) */
        /* v6.4.93: force visible state in case some other JS path added
           .controls-hidden during the FS transition. The user is in
           fullscreen specifically to use these controls, so we never
           want them collapsed. */
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    body.mandarin-mobile-fs-active .mandarin-mobile-controls.controls-hidden {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Hide the legacy in-wrapper .mandarin-video-controls in mobile FS so
   the labeled bottom bar is the only control surface. Same idea as
   v6.4.84 hiding #vc-captions / #vc-fullscreen, just broader.
   v6.4.91: KEEP the .mandarin-video-progress visible — user explicitly
   asked for the progress bar to stay. We only hide the duplicate
   button row (.mandarin-video-controls), not the seek bar. */
@media (max-width: 1024px) {
    .mandarin-video-wrapper.fullscreen .mandarin-video-controls,
    .mandarin-video-wrapper:fullscreen .mandarin-video-controls,
    .mandarin-video-wrapper:-webkit-full-screen .mandarin-video-controls {
        display: none !important;
    }
}

/* ================================================================
   v6.4.88: TOP-RIGHT ACTION ICONS IN FULLSCREEN
   ================================================================
   Brings back like / bookmark / checkin / 3-dot menu in the FS
   overlay's top-right corner. Each renders as a flat white icon
   with a subtle drop-shadow so it stays readable on bright video
   frames without the heavy round chrome of the old buttons.
   The active states (liked, favorited, checkin checked) tint the
   icon brand-pink (#fb7299).

   v6.4.90: per user request (image: pink ✓ 👍 🔖 ☰), the icons
   are now ALWAYS pink with no drop-shadow, no scale-on-hover, and
   the 3-dot menu became a hamburger (☰) — matching the bilibili-
   style flat aesthetic the user pointed at. Icons remain readable
   thanks to the FS overlay's bottom gradient pulling viewer focus
   away from the corners. */
.mandarin-video-wrapper.fullscreen .mandarin-vo-top-right {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-right: 8px;
}
.mandarin-vo-fs-action {
    background: transparent;
    border: none;
    color: #fb7299;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.mandarin-vo-fs-action svg {
    /* Slight shadow for legibility on bright frames; not enough to
       reintroduce the "heavy chrome" feel. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    stroke: #fb7299;
}
.mandarin-vo-fs-action:hover,
.mandarin-vo-fs-action:active {
    opacity: 0.75;
}

/* All four buttons use pink fill/stroke by default. Active states
   (liked, favorited, checked) just deepen the color slightly and
   fill the SVG path. */
.mandarin-vo-fs-like svg,
.mandarin-vo-fs-fav svg {
    fill: none;
    stroke: #fb7299;
    stroke-width: 2;
}
.mandarin-vo-fs-like.liked svg,
.mandarin-vo-fs-fav.favorited svg {
    fill: #fb7299;
    stroke: #fb7299;
}
.mandarin-vo-fs-checkin {
    color: #fb7299;
}
.mandarin-vo-fs-checkin .mandarin-checkin-icon {
    font-size: 22px;
    color: #fb7299;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.mandarin-vo-fs-checkin.checked .mandarin-checkin-icon {
    color: #fb7299;
    /* Slightly bolder for the "already checked in" state. */
    font-weight: 900;
}

/* The 3-dot menu becomes a hamburger (3 horizontal lines), per the
   user's image. Override the SVG content via ::before since the
   PHP-rendered SVG is the old 3-dots. */
.mandarin-vo-fs-more svg {
    display: none;
}
.mandarin-vo-fs-more::before {
    content: "";
    width: 22px;
    height: 22px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    background-color: #fb7299;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Desktop fullscreen via body class (no .fullscreen on wrapper) */
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-vc-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-vc-btn svg {
    width: 22px !important;
    height: 22px !important;
}
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-vc-btn:hover {
    background: rgba(251, 114, 153, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Slightly more breathing room between them in FS */
.mandarin-video-wrapper.fullscreen .mandarin-video-controls-right,
body.mandarin-desktop-fs-active .mandarin-main-content .mandarin-video-controls-right {
    gap: 8px !important;
    margin-right: 12px !important;
}

/* Hide these two big buttons in idle state (they sit above the subtitle
   and would still block it otherwise).
   v6.4.74: Removed pointer-events: none. The buttons now stay clickable
   even while opacity is 0 — user reports (Image 4) that vc-captions and
   vc-fullscreen were unresponsive in desktop FS, because the body became
   .mandarin-fs-ui-idle as soon as the mouse stopped moving and that killed
   pointer events on the buttons. The first click would then need a
   mousemove to revive them, which felt broken. Keeping them visually
   hidden but still hit-testable means a single click immediately wakes
   the UI and triggers the action. */
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen .mandarin-vc-btn,
body.mandarin-fs-ui-idle .mandarin-main-content .mandarin-vc-btn {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* ================================================================
   v6.4.76: PC DESKTOP FS — DROP THE OVERLAY VC BUTTONS
   ================================================================
   User report: in desktop FS the two grey circles at bottom-right
   (#vc-captions for the caption-mode menu, and #vc-fullscreen for
   exit-FS) looked clickable but felt dead/awkward and obscured the
   bottom-right corner of the video. The fullscreen action moved to
   the right-most slot of .mandarin-desktop-ctrl-bar instead, and the
   caption-mode picker is reachable through the settings popup
   (设置 → 视频底部字幕 → 双语/英文/中文/不显示).

   This rule hides these two buttons ONLY in desktop FS
   (body.mandarin-desktop-fs-active). Mobile FS still uses
   #vc-fullscreen for the standard browser-FS request, so the rule
   is gated on `.mandarin-main-content` (desktop layout) only. */
body.mandarin-desktop-fs-active .mandarin-main-content #vc-captions,
body.mandarin-desktop-fs-active .mandarin-main-content #vc-fullscreen {
    display: none !important;
}

/* New right-most 全屏 button in the ctrl-bar.
   v6.4.76: JS 駆動 (.mandarin-fs-on class) でアイコンを切替えていた。
   v6.4.77: CSS 駆動に変更。body.mandarin-desktop-fs-active か、または
   .mandarin-main-content:fullscreen がついたら、ボタンの中の span を
   入れ替える。これで F キー、Esc 退出、native FS API 経由など、
   JS の sync hook が走らない経路でも UI が正しい状態を表す。

   状態は 2 つ:
     - 通常: 外向きアイコン + ラベル「全屏」
     - FS:   内向きアイコン + ラベル「退出全屏」
*/

/* Default (not fullscreen): show expand icon and "全屏" label,
   hide compress icon and "退出全屏" label. */
.mandarin-desktop-ctrl-fs .icon-expand        { display: inline !important; }
.mandarin-desktop-ctrl-fs .icon-compress      { display: none !important; }
.mandarin-desktop-ctrl-fs .mandarin-fs-label-enter { display: inline-block !important; }
.mandarin-desktop-ctrl-fs .mandarin-fs-label-exit  { display: none !important; }

/* When the page is in any kind of desktop fullscreen, swap them.
   We cover all three signals so we don't depend on a single one:
     1. body.mandarin-desktop-fs-active — set by mandarinEnterDesktopFs()
     2. .mandarin-main-content.desktop-fullscreen — legacy CSS-only path
     3. :fullscreen pseudo on .mandarin-main-content — native FS API
   Backward-compat: keep .mandarin-fs-on as an additional trigger so
   the v6.4.76 JS hook still works without modification. */
body.mandarin-desktop-fs-active .mandarin-desktop-ctrl-fs .icon-expand,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-fs .icon-expand,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-fs .icon-expand,
.mandarin-desktop-ctrl-fs.mandarin-fs-on .icon-expand {
    display: none !important;
}
body.mandarin-desktop-fs-active .mandarin-desktop-ctrl-fs .icon-compress,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-fs .icon-compress,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-fs .icon-compress,
.mandarin-desktop-ctrl-fs.mandarin-fs-on .icon-compress {
    display: inline !important;
}
body.mandarin-desktop-fs-active .mandarin-desktop-ctrl-fs .mandarin-fs-label-enter,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-fs .mandarin-fs-label-enter,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-fs .mandarin-fs-label-enter,
.mandarin-desktop-ctrl-fs.mandarin-fs-on .mandarin-fs-label-enter {
    display: none !important;
}
body.mandarin-desktop-fs-active .mandarin-desktop-ctrl-fs .mandarin-fs-label-exit,
.mandarin-main-content.desktop-fullscreen .mandarin-desktop-ctrl-fs .mandarin-fs-label-exit,
.mandarin-main-content:fullscreen .mandarin-desktop-ctrl-fs .mandarin-fs-label-exit,
.mandarin-desktop-ctrl-fs.mandarin-fs-on .mandarin-fs-label-exit {
    display: inline-block !important;
}

/* ================================================================
   v6.4.71: MOBILE FS BOTTOM GRADIENT OVERLAY
   ================================================================
   User report: the gradient behind the progress bar + control icons
   was a 52px floating band that started mid-video, looking disconnected
   from the video's bottom edge. Fix: replace with a tall gradient
   overlay (180px) anchored to the very bottom of the video, fading
   smoothly upward. This covers:
     - the subtitle area at the very bottom
     - the progress bar ~88px up
     - the icon row ~40-92px up
   all with a single cohesive dark-to-transparent gradient.
   
   Z-index ordering (bottom to top):
     - video element       (default, z:auto)
     - THIS gradient       (z:22)
     - icon controls bar   (z:25)
     - progress bar        (z:26)
     - subtitle overlays   (z:30)
   Subtitle stays fully legible on top of the gradient. The gradient
   provides the backdrop for controls/progress/icons, making them
   readable against busy video footage. */

.mandarin-video-wrapper.fullscreen::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.80) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.22) 72%,
        rgba(0,0,0,0) 100%
    );
    pointer-events: none;
    z-index: 22;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide gradient together with the rest of the UI when idle
   (3-second inactivity timer installed in v6.4.65).
   This keeps the subtitle fully unobscured while the user is
   just watching, then reappears on tap along with controls. */
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen::after {
    opacity: 0;
}

/* Note: desktop CSS-fullscreen already has its own bottom gradient
   on .mandarin-desktop-ctrl-bar (L9895, v6.4.43). We intentionally do NOT
   add a second gradient layer for desktop here to avoid double-darkening.
   The existing desktop gradient was not flagged by the user as
   problematic — this fix targets the mobile FS floating-band issue only. */

/* v6.4.82: Subtle indigo badge that lives inline next to the
   "显示字幕笔记" toggle label. Tells the user how many notes they
   have on this episode, regardless of whether the toggle is on
   or off — addressing the cross-device "where did my notes go?"
   confusion (notes were saved server-side but the toggle was
   off on the second device, so they looked missing). */
.mandarin-notes-count-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(251, 114, 153, 0.12);
    color: #fb7299;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

/* ================================================================
   v6.4.82: MOBILE FS OVERLAY POLISH
   ================================================================
   User report (image: mobile fullscreen):
   - The top-right < / >> chevrons looked identical to the bottom-bar
     seek-prev/seek-next buttons → users couldn't tell them apart.
     Solution: convert to text labels "‹ 上一期" / "下一期 ›".
   - The like/share buttons cluttered the top-right corner and were
     rarely used in FS → remove (template hides them via display:none).
   - The ⤢ fullscreen-toggle button at bottom-right rendered as a
     pink filled circle → make it a transparent text-style button
     so it blends with the rest of the dark overlay.
   - Round dark "pill" backgrounds on the navigation buttons made
     the overlay feel busy → drop them in favor of plain white text
     with a subtle text-shadow. */

/* Episode-nav buttons (上一期 / 下一期). Render as white text instead
   of round chevron pills. The .mandarin-vo-ep-nav class is added by the
   v6.4.82 template change so we don't accidentally restyle the
   "目录" button. */
.mandarin-vo-btn.mandarin-vo-ep-nav {
    width: auto;
    height: auto;
    padding: 6px 10px;
    border-radius: 6px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    display: inline-flex;
    align-items: center;
}
.mandarin-vo-btn.mandarin-vo-ep-nav:hover,
.mandarin-vo-btn.mandarin-vo-ep-nav:active {
    background: rgba(255, 255, 255, 0.1);
}
.mandarin-vo-btn.mandarin-vo-ep-nav span {
    color: #fff;
}

/* The bottom-right fullscreen-toggle button (#vo-fullscreen). Strip
   any pink fill and the round dark pill so it sits flat on the video.
   Per user request "アイコンはピンク色にしないでください" + "円形の
   背景は不要". */
#vo-fullscreen.mandarin-vo-fullscreen,
.mandarin-video-wrapper.fullscreen #vo-fullscreen.mandarin-vo-fullscreen {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 36px;
    height: 36px;
    color: #fff !important;
}
#vo-fullscreen.mandarin-vo-fullscreen svg {
    stroke: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
#vo-fullscreen.mandarin-vo-fullscreen:hover,
#vo-fullscreen.mandarin-vo-fullscreen:active {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* The "目录" button kept its dark pill (it's a clear "go back" CTA
   and benefits from a solid hit target), but match the new flat
   aesthetic by softening the pill. */
.mandarin-vo-btn.mandarin-vo-catalog {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* ================================================================
   v6.4.94: HIDE THE LEGACY .mandarin-controls ON ALL TABLET / MOBILE
   ================================================================
   User report (image: mobile landscape, ~800px wide):
     The PC-style ".mandarin-controls" row (视频循环 / 音标 / A点 /
     上一句 / 重播 / 播放 / 下一句 / 倍速 / 单句 / 暂停) was
     showing up vertically stacked, occupying half the viewport,
     while the proper mobile bottom bar (.mandarin-mobile-controls
     with ə / 上一句 / 播放 / 下一句 / A点 / 单句循环 / 间隔)
     was also rendered at the bottom — duplicate controls and a
     gigantic empty band of wasted space.

     The legacy bar was already hidden at max-width:640px (L4218)
     and at max-width:768px under .mandarin-player-v3 scope (L4387),
     but never at the 769–1024px range that landscape phones land
     in. Hide it across the whole tablet-and-below range so the
     mobile-controls bar is the single source of truth.

     PC-only display (>=1025px) is preserved by leaving the
     default L1803 rule intact. */
@media (max-width: 1024px) {
    .mandarin-controls {
        display: none !important;
    }
}

/* v1.0.12: HIDE THE LEGACY .mandarin-controls ON DESKTOP TOO
   ================================================================
   原因確定（DevToolsボックスモデルより）:
     .mandarin-video-side の content 高さが 620px もあり、動画本体
     (.mandarin-video, 16:9で約347px) との差 ~270px が「動画上の
     ムダな空白／操作バーが隠れる」症状を生んでいた。

   その正体は、レガシーのPC用操作バー .mandarin-controls
     (视频循环 / 音标 / A点 / 上一句 / 重播 / 下一句 / 倍速 / 单句)
   が、新しい .mandarin-desktop-ctrl-bar
     (Speed / Loop / Gap / Auto-pause / Fullscreen)
   と重複してデスクトップに二重表示されていたこと。
   .mandarin-ctrl-item が flex-direction:column でボタンが縦積みに
   なり、padding:12px と相まって大きな高さを占有していた。

   .mandarin-controls の機能(loop/ipa/apoint/prev/repeat/next/
   speed/single/play/pause)は .mandarin-desktop-ctrl-bar が
   すべて内包しており(さらに fullscreen / hide-video / pause-after
   を追加で持つ上位互換)、レガシーバーは不要。

   旧コメント(v6.4.94)は「PC専用として残す」としていたが、その後
   .mandarin-desktop-ctrl-bar が導入され役割が完全に重複したため、
   全幅で非表示にするのが正しい。これで video-side の余分な高さが
   解消し、操作バーが画面内に収まる。 */
.mandarin-controls {
    display: none !important;
}

/* Same range — also collapse the hero header that duplicates the
   logo and "第 N 期" pill in landscape (image showed both stuck
   side-by-side, eating prime real estate). The mobile header
   (.mandarin-mobile-header L1016) covers the same nav, so we hide
   the duplicate page-level header at tablet/landscape widths.

   Why this lives at end-of-file: there's already an attempt at
   L4069 to hide .mandarin-desktop-header at <=1024px, but a LATER
   rule at L9243 (`@media (min-width:769px)`) re-shows it with
   `display:flex !important`. That min-width rule wins for the
   769–1024 range. We append a max-width:1024 override at the end
   of the file so cascade order favors the hide rule, and we also
   re-show the mobile header in the same range so users get the
   compact landscape navigation. v6.4.94. */
@media (max-width: 1024px) {
    .mandarin-desktop-header,
    .mandarin-player-v3 .mandarin-desktop-header {
        display: none !important;
    }
    .mandarin-mobile-header,
    .mandarin-player-v3 .mandarin-mobile-header {
        display: flex !important;
    }
}

/* ================================================================
   v6.4.95: FS top-right action icons — kill the inherited pink box
   ================================================================
   User report (image: 3 pink-square buttons in mobile FS top-right):
     The .mandarin-vo-fs-checkin / -fs-like / -fs-fav buttons render
     correctly when neutral, but on .checked/.liked/.favorited the
     global rules at L355/L365/L375 set background:#fb7299 +
     color:white, which paints a hard pink square around the icon.
     That look is right for the PC header (those are round chrome
     buttons) but wrong for our flat, transparent FS overlay icons.
   Fix: force background transparent and re-color the SVG/icon to
   pink in the active state. Same selector specificity bump as the
   global rule, plus !important so we win the cascade. */
.mandarin-vo-fs-action,
.mandarin-vo-fs-action.checked,
.mandarin-vo-fs-action.liked,
.mandarin-vo-fs-action.favorited {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.mandarin-vo-fs-action.checked .mandarin-checkin-icon,
.mandarin-vo-fs-action.checked svg {
    color: #fb7299 !important;
    fill: #fb7299 !important;
    stroke: #fb7299 !important;
}
.mandarin-vo-fs-action.liked svg,
.mandarin-vo-fs-action.favorited svg {
    color: #fb7299 !important;
    fill: #fb7299 !important;
    stroke: #fb7299 !important;
}

/* v6.4.95: when .mandarin-mobile-controls has been re-parented inside
   the FS wrapper (see _mandarinInstallMobileFsIdle), keep it pinned
   to the bottom of the wrapper. Same visual position as before the
   move. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    background: #fff !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* When the controls are moved inside the wrapper, the FS progress
   bar (position:fixed bottom:96px from v6.4.93) might float over
   the empty bottom edge of the wrapper. Anchor the progress bar
   to the wrapper bottom + above-controls offset using absolute
   positioning that matches the wrapper coordinate space. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls + .mandarin-video-progress,
.mandarin-video-wrapper.fullscreen .mandarin-video-progress {
    position: absolute !important;
    bottom: 88px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 31 !important;
}

/* ================================================================
   v6.4.96: MOBILE-FS bottom controls — transparent + auto-fade
   ================================================================
   User report (image: SEPHORA bag):
     The bottom row (.mandarin-mobile-controls) was painted with a
     solid white band that covered the lower third of the video.
     Two issues:
       (a) the band was opaque white in fullscreen — should match
           the rest of the FS overlay (transparent, gradient
           shadow if needed for legibility);
       (b) the band stayed visible forever even when no other UI
           was on screen — should fade out with the rest after
           the 6-second idle timer.

   The wrapper-relative version (added in v6.4.95 when we re-parent
   .mandarin-mobile-controls into .mandarin-video-wrapper) already used
   absolute positioning. This block extends that with:
     - background: transparent
     - subtle bottom-edge gradient on the wrapper for icon contrast
     - opacity transition tied to body.mandarin-fs-ui-idle
   so the bar disappears in lockstep with everything else. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    /* Slight inner padding so icons don't slam against the bottom
       safe-area on phones with home indicators. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
}

/* Buttons inside the bar: white icons with drop-shadow so they
   stay legible without a solid background. The labels under each
   icon become white too. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled,
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-nav {
    color: #fff !important;
}
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-ctrl-label {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
/* v6.4.99: removed SVG drop-shadow on FS mobile controls.
   User report: "精听の影のようなもの (drop-shadow) が見づらい".
   Icons sit on top of the half-transparent circle chip background
   (L14449), so they don't need an additional shadow for legibility.
   Keep the chip background, drop the shadow. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls svg {
    filter: none !important;
}
/* Round chip buttons (1x / 隐藏 / A点 etc.) had a light grey
   background — keep their pill shape but reduce contrast against
   the dark video.
   v6.4.98: applying background to the whole button created a
   white rectangle around .mandarin-ctrl-icon-text (the 1x speed
   text icon — see L7787 where .mandarin-ctrl-icon-text has no
   round container of its own, unlike .mandarin-ctrl-icon for SVG
   icons). User report: "速度のボタンだけ背景が白色で見づらい".
   Fix: scope the FS background to .mandarin-ctrl-icon (the actual
   round chip element) and add a parallel rule for
   .mandarin-ctrl-icon-text so the speed pill matches the other
   chips. Button itself stays transparent. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled {
    background: transparent !important;
}
/* v6.4.103: unified all FS chips to opaque white background + dark
   icons (matching the 1x speed pill). User wanted the white circular
   look applied to 倍速 / 隐藏 / A点 / 精听 across the board. SVG
   strokes and the A-text icon switch to #1f2937 so they stay legible
   on the white pill. The .active rule below still wins via specificity
   (uses the same selector path with .active in the chain) — active
   chips become pink with white icons as before. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled .mandarin-ctrl-icon,
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled .mandarin-ctrl-icon-text {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1f2937 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; /* override the L7791 line-height:40px which was inflating the text-only chip. */
}
/* SVG icons inside the white chip — flip stroke to dark, kill the
   currentColor=#fff that would render them invisible. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled .mandarin-ctrl-icon svg {
    stroke: #1f2937 !important;
    color: #1f2937 !important;
}
/* The 1x text pill needs the same dark color and a heavier weight to
   pop on the dense white background. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled .mandarin-ctrl-icon-text {
    color: #1f2937 !important;
    font-weight: 700 !important;
}
/* A-text icon in the A点 chip — defaults to white in non-FS mode;
   force dark while inside the FS white chip. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled[data-action="apoint"] .apoint-icon {
    color: #1f2937 !important;
}
/* Jingting count badge (the small "1" overlapping the refresh icon)
   stays readable: keep its own background/foreground. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-jingting-btn .jingting-count {
    color: #fff !important;
}
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled.active .mandarin-ctrl-icon,
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled.active .mandarin-ctrl-icon-text {
    background: #fb7299 !important;
    color: #fff !important;
}
/* Active state: SVG and text inside flip back to white on the pink
   pill. */
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled.active .mandarin-ctrl-icon svg,
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls .mandarin-mobile-ctrl-labeled.active[data-action="apoint"] .apoint-icon {
    stroke: #fff !important;
    color: #fff !important;
}

/* Auto-fade with the global idle class — controls pulled out of
   the way after 6 seconds of no interaction (companion to the
   v6.4.87 timer for top-corner icons). */
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls,
body.mandarin-fs-ui-idle .mandarin-mobile-controls {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    pointer-events: none !important;
}

/* The matching bottom gradient on the wrapper itself — gives icons
   something to sit on top of without a hard band. Already present
   for desktop FS via .mandarin-desktop-ctrl-bar; here we inject a
   weaker version for mobile. */
.mandarin-video-wrapper.fullscreen::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0) 100%);
    z-index: 25;
    transition: opacity 0.4s ease;
}
body.mandarin-fs-ui-idle .mandarin-video-wrapper.fullscreen::after {
    opacity: 0;
}

/* v6.4.104: popups re-parented into the FS wrapper need to stack
   ABOVE the mobile-controls bar (which sits at z-index 2147483646)
   AND must accept pointer events. Previously this rule set z-index
   to 100, which placed the popups *below* mobile-controls — taps
   on speed-modal options were intercepted by the controls layer
   and the close button was unreachable. Bumped to a value just
   above mobile-controls so the popup is the topmost interactive
   element in FS. Also broadened the selector list to cover popups
   added since v6.4.96 (speed-modal, audio-modal, note-modal,
   print-modal, caption-menu, shortcuts-modal, single-count-popup,
   interval-popup, speed-grid-popup). */
.mandarin-video-wrapper.fullscreen > .mandarin-settings-panel,
.mandarin-video-wrapper.fullscreen > .mandarin-jingting-panel,
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-more-menu,
.mandarin-video-wrapper.fullscreen > .mandarin-checkin-modal,
.mandarin-video-wrapper.fullscreen > .mandarin-word-popup,
.mandarin-video-wrapper.fullscreen > .mandarin-expr-popup,
.mandarin-video-wrapper.fullscreen > .mandarin-favorites-popup,
.mandarin-video-wrapper.fullscreen > .mandarin-like-popup,
.mandarin-video-wrapper.fullscreen > .mandarin-speed-modal,
.mandarin-video-wrapper.fullscreen > .mandarin-speed-grid-popup,
.mandarin-video-wrapper.fullscreen > .mandarin-note-modal,
.mandarin-video-wrapper.fullscreen > .mandarin-audio-modal,
.mandarin-video-wrapper.fullscreen > .mandarin-print-modal,
.mandarin-video-wrapper.fullscreen > .mandarin-caption-menu,
.mandarin-video-wrapper.fullscreen > .mandarin-shortcuts-modal,
.mandarin-video-wrapper.fullscreen > .mandarin-single-count-popup,
.mandarin-video-wrapper.fullscreen > .mandarin-interval-popup {
    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

/* Make sure the popups' inner clickable elements also receive
   events. Some had pointer-events:none from the FS-idle rules
   targeting their ancestor controls. Override on the children
   too — every interactive thing inside the popup is auto. */
.mandarin-video-wrapper.fullscreen > .mandarin-settings-panel *,
.mandarin-video-wrapper.fullscreen > .mandarin-jingting-panel *,
.mandarin-video-wrapper.fullscreen > .mandarin-mobile-more-menu *,
.mandarin-video-wrapper.fullscreen > .mandarin-checkin-modal *,
.mandarin-video-wrapper.fullscreen > .mandarin-word-popup *,
.mandarin-video-wrapper.fullscreen > .mandarin-expr-popup *,
.mandarin-video-wrapper.fullscreen > .mandarin-favorites-popup *,
.mandarin-video-wrapper.fullscreen > .mandarin-like-popup *,
.mandarin-video-wrapper.fullscreen > .mandarin-speed-modal *,
.mandarin-video-wrapper.fullscreen > .mandarin-speed-grid-popup *,
.mandarin-video-wrapper.fullscreen > .mandarin-note-modal *,
.mandarin-video-wrapper.fullscreen > .mandarin-audio-modal *,
.mandarin-video-wrapper.fullscreen > .mandarin-print-modal *,
.mandarin-video-wrapper.fullscreen > .mandarin-caption-menu *,
.mandarin-video-wrapper.fullscreen > .mandarin-shortcuts-modal *,
.mandarin-video-wrapper.fullscreen > .mandarin-single-count-popup *,
.mandarin-video-wrapper.fullscreen > .mandarin-interval-popup * {
    pointer-events: auto !important;
}

/* When any popup is open, dim the controls layer so taps don't
   reach it accidentally. We don't hide the controls (user might
   want a visual cue), just make them unclickable while a popup
   covers them. We detect "popup open" by the presence of a
   wrapper child with display:flex/block — kept simple by giving
   the JS an opt-in body class instead. */
body.mandarin-popup-open .mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls {
    pointer-events: none !important;
}

/* ============================================================
   v6.4.99/v6.4.112: hide the bottom-right enter-FS icon while
   already in fullscreen. The replacement in-FS button is
   #vo-fs-cc (subtitle mode toggle), styled below.
   ============================================================ */
.mandarin-video-wrapper.fullscreen #vo-fullscreen.mandarin-vo-fullscreen,
body.mandarin-mobile-fs-active #vo-fullscreen.mandarin-vo-fullscreen,
body.mandarin-desktop-fs-active #vo-fullscreen.mandarin-vo-fullscreen {
    display: none !important;
}

/* ============================================================
   v6.4.112: in-FS subtitle (CC) cycle button.
   Position mirrors where #vo-fullscreen used to sit (bottom-right
   of the FS overlay). Hidden outside FS. Cycles through:
       off → both → en → cn → off ...
   The small text label under the CC pictogram echoes the
   current mode (双语 / 英文 / 中文 / 关闭) so users know what
   the next tap will give them.
   ============================================================ */
.mandarin-vo-fs-cc {
    display: none; /* shown only inside FS; rule below */
    position: absolute;
    bottom: 8px;
    right: 8px;
    /* v6.4.113: bumped from 45 to a near-max value so the FS overlay
       (which sits at z-index 100+) and any video chrome can't
       intercept the tap. The click handler is also capture-phase
       (see mandarin-player-v3.js setupFsCcButton) so even if some
       handler is bubbling above, our stopPropagation runs first. */
    z-index: 2147483646;
    pointer-events: auto !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transition: background 150ms ease, transform 100ms ease;
}
.mandarin-vo-fs-cc:active {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(0.96);
}
.mandarin-vo-fs-cc svg {
    stroke: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.mandarin-vo-fs-cc-label {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* Active-mode color cue: pink stroke when caption is on, plain
   white-fade when off — driven by data-mode set by the JS
   handler. */
.mandarin-vo-fs-cc[data-mode="off"] svg {
    stroke: rgba(255, 255, 255, 0.7) !important;
}
.mandarin-vo-fs-cc[data-mode="off"] .mandarin-vo-fs-cc-label {
    color: rgba(255, 255, 255, 0.7);
}
.mandarin-vo-fs-cc[data-mode="both"] svg,
.mandarin-vo-fs-cc[data-mode="en"] svg,
.mandarin-vo-fs-cc[data-mode="cn"] svg {
    stroke: #fb7299 !important;
}

/* Show only inside FS overlays. */
.mandarin-video-wrapper.fullscreen .mandarin-vo-fs-cc#vo-fs-cc,
body.mandarin-mobile-fs-active .mandarin-vo-fs-cc#vo-fs-cc,
body.mandarin-desktop-fs-active .mandarin-vo-fs-cc#vo-fs-cc {
    display: inline-flex !important;
}

/* ============================================================
   v6.4.105: REMOVE 上期/下期 buttons from mobile fullscreen UI
   ============================================================
   The AJAX-swap solution (v6.4.97 → v6.4.104) for "tap 上期/下期
   while in FS to swap episode in place" never reliably worked
   across browsers. User decision: remove the buttons from FS
   altogether — users exit FS first, then navigate via the page-
   level controls. The catalog (目录) link is kept since it's a
   separate navigation flow.

   Affected templates:
     - templates/video-player-v3.php L1314+ (FS overlay)
     - .mandarin-vo-ep-nav    = the 上期/下期 anchor pair
     - .mandarin-fs-nav       = the FS-only nav anchors (some have
                              ep-nav, some are catalog — guarded
                              by :not below)
   ============================================================ */
.mandarin-video-wrapper.fullscreen .mandarin-vo-ep-nav,
body.mandarin-mobile-fs-active .mandarin-vo-ep-nav,
body.mandarin-desktop-fs-active .mandarin-vo-ep-nav,
.mandarin-video-wrapper.fullscreen .mandarin-fs-nav:not(.mandarin-vo-catalog),
body.mandarin-mobile-fs-active .mandarin-fs-nav:not(.mandarin-vo-catalog),
body.mandarin-desktop-fs-active .mandarin-fs-nav:not(.mandarin-vo-catalog) {
    display: none !important;
}

/* ============================================================
   v6.4.106: when any popup is open, hide mobile-controls so
   taps reach the popup. Companion to the JS-side body class
   toggler at the bottom of mandarin-player-v3.js.
   ============================================================ */
body.mandarin-popup-open .mandarin-mobile-controls,
body.mandarin-popup-open .mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls {
    display: none !important;
    pointer-events: none !important;
}
/* Also dim the FS bottom gradient — leftover gradient with no
   controls underneath looks weird. */
body.mandarin-popup-open .mandarin-video-wrapper.fullscreen::after {
    opacity: 0 !important;
}

/* ============================================================
   v6.4.109: Simplified mobile fullscreen UI per user request
   ============================================================
   - Hide everything except prev/play/next nav.
   - Strip dark circular backgrounds from the remaining nav.
   - Shrink icons.
   - Anchor the row at bottom-left.

   Side-effect: popups (speed-modal, favorites-popup, etc.) can
   no longer be opened from FS at all because their entry buttons
   are gone. This sidesteps the FS-popup interaction problems we
   were chasing — users access these features in the regular
   non-FS player view.
   ============================================================ */
@media (max-width: 1024px) {
    /* Hide all labeled chips (倍速 / 隐藏 / A点 / 精听 / 循环 / 间隔). */
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-labeled,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-labeled {
        display: none !important;
    }

    /* Hide top-left catalog and any leftover fs-nav links. */
    body.mandarin-mobile-fs-active .mandarin-vo-catalog,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-catalog,
    body.mandarin-mobile-fs-active .mandarin-vo-top-left .mandarin-fs-nav,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-top-left .mandarin-fs-nav {
        display: none !important;
    }

    /* v6.4.113: keep the 3-dot menu (#vo-fs-more-btn) visible — user
       reported it disappeared in FS and they want it back. Other
       buttons (打卡/点赞/收藏) stay hidden per the v6.4.109 spec. */
    body.mandarin-mobile-fs-active .mandarin-vo-top-right .mandarin-vo-fs-checkin,
    body.mandarin-mobile-fs-active .mandarin-vo-top-right .mandarin-vo-fs-like,
    body.mandarin-mobile-fs-active .mandarin-vo-top-right .mandarin-vo-fs-fav,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-top-right .mandarin-vo-fs-checkin,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-top-right .mandarin-vo-fs-like,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-top-right .mandarin-vo-fs-fav {
        display: none !important;
    }
    /* Make sure the cluster itself, and the 3-dot button, are
       reachable + tappable in FS. */
    body.mandarin-mobile-fs-active .mandarin-vo-top-right,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-top-right {
        display: flex !important;
        pointer-events: auto !important;
    }
    body.mandarin-mobile-fs-active #vo-fs-more-btn,
    .mandarin-video-wrapper.fullscreen #vo-fs-more-btn {
        display: inline-flex !important;
        pointer-events: auto !important;
    }

    /* Shrink + left-anchor the nav row.
       The .mandarin-mobile-ctrl-row becomes a small flex strip at
       bottom-left of the viewport. The outer .mandarin-mobile-controls
       stays full-width so safe-area padding still applies, but its
       background and gradient are toned down. */
    body.mandarin-mobile-fs-active .mandarin-mobile-controls,
    .mandarin-video-wrapper.fullscreen > .mandarin-mobile-controls {
        background: transparent !important;
        padding: 0 0 6px 12px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0)) !important;
        border-top: none !important;
    }
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-row,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-row {
        justify-content: flex-start !important;
        gap: 8px !important;
        width: auto !important;
    }

    /* Strip the dark circular background from prev/next nav. */
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-nav .mandarin-ctrl-icon,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-nav .mandarin-ctrl-icon {
        background: transparent !important;
        width: 32px !important;
        height: 32px !important;
    }
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-nav:active .mandarin-ctrl-icon,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-nav:active .mandarin-ctrl-icon {
        background: rgba(255,255,255,0.15) !important;
    }

    /* Strip the blue circle from the play button + shrink. */
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-play,
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-play .mandarin-play-circle,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-play,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-play .mandarin-play-circle {
        background: transparent !important;
        background-color: transparent !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* Smaller icons + white drop-shadow for legibility on bright video. */
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-nav svg,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-nav svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #fff !important;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)) !important;
    }
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-play svg,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-play svg {
        width: 24px !important;
        height: 24px !important;
        fill: #fff !important;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)) !important;
    }

    /* Hide the labels (倍速/上一句 etc. text under each icon) — the
       icons alone are clear enough at this size. */
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-nav .mandarin-ctrl-label,
    body.mandarin-mobile-fs-active .mandarin-mobile-ctrl-play .mandarin-ctrl-label,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-nav .mandarin-ctrl-label,
    .mandarin-video-wrapper.fullscreen .mandarin-mobile-ctrl-play .mandarin-ctrl-label {
        display: none !important;
    }

    /* Tone down the dark gradient at the bottom — without the chip
       row, the heavy gradient looks awkward. */
    .mandarin-video-wrapper.fullscreen::after {
        height: 80px !important;
        background: linear-gradient(to top,
            rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%) !important;
    }
}

/* ============================================================
   v6.4.115 — Hide top-right 3-dot menu (#vo-fs-more-btn) and
   bottom-right CC button (#vo-fs-cc) in mobile fullscreen.
   ============================================================
   User decision (2026-04-26): the mobile FS UI should stay as
   minimal as possible. Both the 3-dot menu (added back in
   v6.4.113) and the CC subtitle-cycle button (added in v6.4.112)
   are removed from the mobile FS overlay. Desktop FS still keeps
   the CC button — desktop users have more screen real estate and
   benefit from in-FS caption switching.

   Implementation note on specificity:
   The CC show-rule is `.mandarin-video-wrapper.fullscreen .mandarin-vo-fs-cc#vo-fs-cc`
   (specificity 0,0,2,1). The override below matches that
   specificity AND comes later in source order, so the cascade
   resolves to display:none. The more-btn show-rule sits at
   `body.mandarin-mobile-fs-active #vo-fs-more-btn` (0,0,1,1) —
   the override matches and wins by source order.

   The JS for `#vo-fs-cc` (setupFsCcButton in mandarin-player-v3.js)
   still runs and binds listeners to the now-hidden node. That's
   harmless and keeps revert simple if we ever want them back —
   just delete this block.
   ============================================================ */
@media (max-width: 1024px) {
    body.mandarin-mobile-fs-active #vo-fs-more-btn,
    .mandarin-video-wrapper.fullscreen #vo-fs-more-btn,
    body.mandarin-mobile-fs-active .mandarin-vo-fs-cc#vo-fs-cc,
    .mandarin-video-wrapper.fullscreen .mandarin-vo-fs-cc#vo-fs-cc {
        display: none !important;
    }
}

/* ============================================================
   v6.4.116 — Word card detail view restyle
   ============================================================
   User requests on the dictionary card detail page (the page
   you reach by tapping "词卡" → an entry like "on my way"):

   1. The headword (#dc-detail-word) should pop — large pink
      text instead of the current modest 22px black.
   2. The Chinese meaning (#dc-meaning-zh, "在路上") is just a
      translation. The current pink-wash callout block makes it
      compete with the headword for attention. Tone it down to
      plain black text on a white background.
   3. (JS-side) The example sentence should be the dictionary
      example from the card data (the `example` field), not the
      video subtitle quote (`example_canonical`). The video quote
      already appears in the "在 N 期中出现了 M 次" scene list
      below — duplicating it here adds no value. See JS changes
      in mandarin-player-v3.js (#dc-example) and the popup version
      in video-player-v3.php.

   We override rather than rewrite the original rules so a future
   revert is one-block delete. Specificity matches the originals
   (single class, 0,0,1,0) and these come later in source order,
   so the cascade picks them.
   ============================================================ */
.mandarin-dc-detail-word {
    font-size: 28px;
    font-weight: 700;
    color: #fb7299;
}

.mandarin-dc-meaning-zh {
    font-size: 18px;
    font-weight: 400;
    color: #1f2937;
    background: transparent;
    border-left: none;
    padding: 8px 16px;
    border-radius: 0;
}

/* ============================================================
   v6.4.117 — Pronunciation row + difficulty-level tags
   ============================================================
   The pron row is restructured by JS into two halves:
     .mandarin-dc-detail-pron-left  → US + UK pron buttons
     .mandarin-dc-detail-pron-right → category badge + level tags

   The original .mandarin-dc-detail-pron is already flex with
   space-between, so the two halves naturally split; we just
   need each half to be its own flex row so its children
   (multiple buttons / multiple tags) wrap nicely on narrow
   screens. JS may produce only the US half if no IPA exists
   on the card, hence flex-wrap.

   Level-tag colors mirror the screenshot the user shared:
   六级 = green, 专四 = blue, 雅思 = orange. Other Chinese
   English-proficiency levels are colored on the same warm/cool
   spectrum so cards mixing several tags still read cleanly.

   The .mandarin-dc-level-* classes are slugged from the level
   string by the JS side (CJK chars allowed in CSS class names
   in modern browsers; we keep them un-escaped because PHP and
   JS both produce identical bytes).
   ============================================================ */
.mandarin-dc-detail-pron {
    flex-wrap: wrap;
    gap: 8px 12px;
}

.mandarin-dc-detail-pron-left,
.mandarin-dc-detail-pron-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.mandarin-dc-detail-pron .pron-btn {
    /* keep the original chip look, just tighten padding so
       two of them fit on one line on small screens */
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 13px;
    color: #374151;
}

.mandarin-dc-detail-pron .pron-btn .pron-flag {
    font-weight: 700;
    color: #6b7280;
    margin-right: 2px;
    letter-spacing: 0.3px;
}

.mandarin-dc-detail-pron .pron-btn-us .pron-flag { color: #2563eb; }
.mandarin-dc-detail-pron .pron-btn-uk .pron-flag { color: #dc2626; }

/* Level tags — generic base, then per-level color overrides. */
.mandarin-dc-level {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Chinese English-proficiency exam tags. The slugged class
   name is the level itself (CJK chars allowed in CSS class
   names). */
.mandarin-dc-level-小学      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.mandarin-dc-level-初中,
.mandarin-dc-level-中考      { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.mandarin-dc-level-高中,
.mandarin-dc-level-高考      { background: #ecfccb; color: #4d7c0f; border-color: #d9f99d; }
.mandarin-dc-level-四级,
.mandarin-dc-level-CET4      { background: #dcfce7; color: #166534; border-color: #86efac; }
.mandarin-dc-level-六级,
.mandarin-dc-level-CET6      { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.mandarin-dc-level-专四,
.mandarin-dc-level-TEM4      { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.mandarin-dc-level-专八,
.mandarin-dc-level-TEM8      { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.mandarin-dc-level-考研      { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.mandarin-dc-level-雅思,
.mandarin-dc-level-IELTS     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.mandarin-dc-level-托福,
.mandarin-dc-level-TOEFL     { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mandarin-dc-level-GRE       { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.mandarin-dc-level-BEC       { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }

/* ============================================================
   v6.4.118 — Word popup (in-video click) restyled to mirror
   the card-detail page (.mandarin-dc-detail-pron)
   ============================================================
   The popup that opens when a learner taps a highlighted word
   inside the video subtitles previously had a very different
   layout from the dedicated card-detail page:

       OLD popup-meta:  🔊 美 /ipa/ ............. [badge]

   That meant a learner who tapped a word in-video saw one UI,
   and the same learner who opened the same word from the 词卡
   list saw a totally different UI. We're unifying them.

       NEW popup-meta:  [US 🔊 /ipa/] [UK 🔊 /ipa/] ........ [badge] [六级] [雅思]

   Implementation note:
   - The new HTML uses #popup-pron-left and #popup-pron-right.
     The old #popup-audio button, the 美 accent span, and the
     #popup-ipa span are gone — JS no longer writes to them.
   - We reuse the .pron-btn / .pron-flag / .mandarin-dc-level
     styles from the card-detail page (defined further up) so
     visual parity is automatic and a future palette tweak
     touches one place. The selectors below are popup-scoped
     overrides for the few cases where popup needs slightly
     different sizing (the popup is a small overlay on top of
     the video, the detail page has more breathing room).
   - We keep .mandarin-expr-popup-badge's `margin-left: auto`
     intact — that's what shoves the right-side cluster against
     the right edge. The pron-right wrapper inherits this push
     because it contains the badge.
   ============================================================ */
.mandarin-expr-popup-pron-left {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.mandarin-expr-popup-pron-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;  /* push to the right edge of popup-meta */
}

/* Slightly tighter pron buttons inside the popup since the
   overlay is narrower than the card-detail page. */
.mandarin-expr-popup-pron-left .pron-btn {
    padding: 3px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mandarin-expr-popup-pron-left .pron-btn .pron-flag {
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.3px;
    margin-right: 1px;
}

.mandarin-expr-popup-pron-left .pron-btn-us .pron-flag { color: #2563eb; }
.mandarin-expr-popup-pron-left .pron-btn-uk .pron-flag { color: #dc2626; }

/* The cat-* badge inside popup-pron-right keeps its existing
   color rules (.mandarin-expr-popup-badge.cat-*). The level chips
   (.mandarin-dc-level-*) inherit colors from the detail-page
   block above; we tighten their padding here since the popup
   row is denser. */
.mandarin-expr-popup-pron-right .mandarin-dc-level {
    font-size: 11px;
    padding: 1px 8px;
}

/* ============================================================
   v6.4.123 — Topic tags for subject-area classification
   ============================================================
   Distinct from level tags (.mandarin-dc-level-*) which encode
   exam-difficulty (六级/雅思/托福). Topic tags encode SUBJECT
   AREA (食品/生活/商务/学术…) and apply to entries where a
   difficulty level is ill-defined — e.g. proper nouns like
   "blueberry muffin" or "Sephora" where assigning [小学] or
   [六级] is meaningless but the subject classification is
   informative for a learner browsing by interest.
   
   Topic tag colors are deliberately distinct from level tag
   colors (level uses cool blue/green/yellow ramp; topic uses
   warm pastel ramp) so a glance distinguishes the two.
   ============================================================ */
.mandarin-dc-topic {
    display: inline-block;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 6px;
    background: #fef3c7;       /* default warm yellow */
    color: #92400e;
    border: 1px solid #fde68a;
    font-weight: 500;
    white-space: nowrap;
}

/* Topic-specific colors. Each topic gets a distinctive but
   harmonious palette so the chips don't all blur together
   when a card has 2+ topics. */
.mandarin-dc-topic-话题词     { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mandarin-dc-topic-食品       { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.mandarin-dc-topic-生活       { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.mandarin-dc-topic-商务       { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.mandarin-dc-topic-学术       { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.mandarin-dc-topic-旅行       { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.mandarin-dc-topic-情感       { background: #fdf4ff; color: #86198f; border-color: #f5d0fe; }
.mandarin-dc-topic-时尚       { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.mandarin-dc-topic-娱乐       { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.mandarin-dc-topic-健康       { background: #f0fdfa; color: #115e59; border-color: #99f6e4; }
.mandarin-dc-topic-自然       { background: #f7fee7; color: #3f6212; border-color: #d9f99d; }
.mandarin-dc-topic-科技       { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* Popup variant — slightly smaller padding to fit the narrower
   overlay, mirrors the existing .mandarin-expr-popup-pron-right
   .mandarin-dc-level rule. */
.mandarin-expr-popup-pron-right .mandarin-dc-topic {
    font-size: 11px;
    padding: 1px 8px;
}

/* ============================================================
   v6.4.124 — Word popup (#word-popup) restyle
   ============================================================
   Aligns the lightweight in-video word popup with the card-
   detail panel layout. Three structural changes:

     1. Header row now has an inline category badge sitting
        between the word title and the close button.
        ([fav] [word] [cat-badge] [×])
        The .mandarin-word-popup-cat span is populated by JS in
        showWordPopup() and reuses the .mandarin-dc-cat-* color
        palette so it matches the detail page.

     2. The single 🔊 美 audio button + plain ipa span +
        type pill is replaced with a two-half pron row:
          .mandarin-word-popup-pron-left  → US + UK pron-btn
          .mandarin-word-popup-pron-right → level chips
                                          (.mandarin-dc-level-*)
        The right side stays empty when the card has no
        usable difficulty levels (we filter via
        window.mandarinFilterLevels — see top of player JS).

     3. The English definition (#... meaning-en) gets a soft
        gray background card to mirror the detail page and
        give it visual separation from the Chinese gloss.

   Old selectors (.mandarin-word-popup-audio-row, .mandarin-word-
   popup-audio, .mandarin-word-popup-ipa, .mandarin-word-popup-
   type) are no longer emitted by the template; their CSS
   above is now dead code but left in place because removing
   it would be a larger diff than necessary, and these rules
   simply find no targets to style.
   ============================================================ */

/* Header — make space for the new cat badge. The original
   .mandarin-word-popup-header layout works as-is (flex / gap),
   we just give the word title flex:1 so the badge floats
   over to the right edge next to the close button.
   Layout: [fav] [word ─────────] [cat-badge] [×] */
.mandarin-word-popup-word {
    /* v6.4.124 (revised): flex:1 so the title spans the
       gap, pushing the cat badge to the right edge. The
       earlier "natural width" approach made the badge
       cling to the word and read as cramped. */
    flex: 1;
    min-width: 0;
}

.mandarin-word-popup-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    /* Color comes from a .mandarin-dc-cat-* class added by JS
       (e.g. .mandarin-dc-cat-discourse → green pill). Falls
       back to a neutral chip if the class is unknown. */
    background: #f3f4f6;
    color: #374151;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.mandarin-word-popup-close {
    /* No auto-margin needed: word has flex:1, badge has
       flex-shrink:0, so the close ends up at the right
       edge naturally. A tiny left margin keeps it from
       touching the badge. */
    margin-left: 4px;
    flex-shrink: 0;
}

/* Pron row — same two-half pattern as
   .mandarin-dc-detail-pron and .mandarin-expr-popup-meta.
   Left is the US/UK button cluster, right is the
   filtered level chips. */
.mandarin-word-popup-pron-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mandarin-word-popup-pron-left {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.mandarin-word-popup-pron-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;  /* push chips to the right edge */
}

/* Compact pron buttons inside the popup (same sizing as the
   existing .mandarin-expr-popup-pron-left .pron-btn rule, just
   scoped to this popup). */
.mandarin-word-popup-pron-left .pron-btn {
    padding: 3px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mandarin-word-popup-pron-left .pron-btn .pron-flag {
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.3px;
    margin-right: 1px;
}

.mandarin-word-popup-pron-left .pron-btn-us .pron-flag { color: #2563eb; }
.mandarin-word-popup-pron-left .pron-btn-uk .pron-flag { color: #dc2626; }

/* Tighten level chips inside this popup, mirroring the
   existing .mandarin-expr-popup-pron-right .mandarin-dc-level
   rule. */
.mandarin-word-popup-pron-right .mandarin-dc-level {
    font-size: 11px;
    padding: 1px 8px;
}

/* Soft gray definition card — overrides the plain-text
   styling above so this view matches the detail page's
   .mandarin-dc-meaning-en background. */
.mandarin-word-popup-meaning-en {
    background: #f1f5f9;
    color: #475569;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    line-height: 1.6;
    font-style: italic;
    font-size: 14px;
}

/* ============================================================
   v6.4.124 — Scene-list ↗ jump button
   ============================================================
   The scene-ep row used to be:
       [第 N 期 ↗][space-between gap][▶ 播放]
   with both an inline ↗ on the episode label (cross-ep only)
   AND a separate play button on the right. The play button
   doubled as a same-episode seeker and a cross-episode TTS
   trigger, which made it unclear what was happening on click.

   New row (v6.4.124):
       [第 N 期][space-between gap][↗]
   A single right-edge control. Behavior depends on whether
   the scene is from the same episode or a different one,
   but the visual is always the same arrow chip.

   The control is styled like the original .mandarin-dc-scene-
   play pill but with a tighter, square-ish footprint that
   suits a single glyph. We override the legacy padding and
   gap rules via the more-specific .scene-jump-arrow class so
   any code path that still emits a play-button class (e.g.
   half-deployed cache) keeps the original styling and we
   avoid mid-rollout glitches.
   ============================================================ */
.mandarin-dc-scene-item .scene-ep .scene-jump-arrow {
    /* Reset the pill and re-style as a compact icon button */
    margin-top: 0;
    padding: 4px 10px;
    gap: 0;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    /* Slight color separation from the surrounding text so
       the arrow reads as actionable. The hover state inherits
       from .mandarin-dc-scene-play:hover above. */
    color: #4f46e5;
    background: #eef2ff;
    border-radius: 999px;
    /* Anchor variant doesn't get default <a> underline */
}
.mandarin-dc-scene-item .scene-ep .scene-jump-arrow:hover {
    background: #e0e7ff;
    color: #3730a3;
    text-decoration: none;
}

/* ================================================================
   v1.0.20: 動画上のムダな空白を解消（タスク① 真因の確定修正）
   ================================================================
   【真因】
   L11905〜 の管理バー対応ブロック内、
     @media (min-width: 783px) {
       body.admin-bar .mandarin-player-v3 .mandarin-video-wrapper {
         top: 80px !important;   ← これ
       }
     }
   が原因。動画ラッパーは position:relative（L1648）なので、
   この top:80px は「下に80pxずらす」だけで元の占有スペースは
   残るため、ヘッダーと動画の間に約80〜86pxの空白が生まれる。
   しかもセレクタが body.admin-bar 接頭辞付きで詳細度が高く
   (0,3,1)、デスクトップ復帰用の top:auto (0,2,0) を上書きして
   いた。元々モバイルの fixed レイアウト用に書かれたオフセットが
   デスクトップ(>=1025px)の通常フローにも誤適用されていた。

   【ログイン中のみ発生する理由】
   body.admin-bar はログイン中だけ付くクラス。スクショは
   管理者ログイン中（TMa1n-Acc0unt-3）のため空白が出ていた。
   ログアウト中は body.admin-bar が無く、空白も出ない。

   【v1.0.17/18 が効かなかった理由】
   どちらも .mandarin-video-side の padding/margin/gap や
   ラッパーの margin-top をゼロにしたが、ずれの正体は別要素
   (.mandarin-video-wrapper) の "top" オフセット。margin/padding
   をいくら触っても top は変わらないため無効だった。

   【対処】
   デスクトップ(>=1025px)では動画ラッパーは通常フロー。
   管理バーは WordPress が html に margin-top を付けてページ全体を
   押し下げるため、ラッパー側の手動オフセットは不要 → top:0。
   このルールは L11914 と同詳細度(0,3,1)かつソース後方にあるので
   デスクトップで確実に勝つ。783〜1024px帯の既存挙動には不干渉。
   ================================================================ */
@media (min-width: 1025px) {
    /* ▼ 真因修正: 管理バー由来の top オフセットをデスクトップで無効化 */
    body.admin-bar .mandarin-player-v3 .mandarin-video-wrapper,
    body.admin-bar .mandarin-video-wrapper {
        top: 0 !important;
    }

    .mandarin-video-side,
    .mandarin-player-v3 .mandarin-video-side {
        gap: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        row-gap: 0 !important;
    }
    /* 過去バージョンが空白を作る ::before を残していた場合に潰す */
    .mandarin-video-side::before,
    .mandarin-player-v3 .mandarin-video-side::before {
        content: none !important;
        display: none !important;
        height: 0 !important;
    }
    /* header 自身の余白も最小化（top帯の元になる padding/margin を除去） */
    .mandarin-video-side > .mandarin-desktop-header,
    .mandarin-player-v3 .mandarin-video-side > .mandarin-desktop-header {
        margin: 0 0 6px 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* 動画ラッパー: 上の余白を完全に殺して header 直下に密着 */
    .mandarin-video-side > .mandarin-video-wrapper,
    .mandarin-player-v3 .mandarin-video-side > .mandarin-video-wrapper {
        margin-top: 0 !important;
    }
    /* 動画の下に来る要素にだけ間隔を復活 */
    .mandarin-video-side > .mandarin-desktop-ctrl-bar,
    .mandarin-player-v3 .mandarin-video-side > .mandarin-desktop-ctrl-bar {
        margin-top: 12px !important;
    }
    .mandarin-video-side > .mandarin-current-sub,
    .mandarin-player-v3 .mandarin-video-side > .mandarin-current-sub {
        margin-top: 10px !important;
    }
    .mandarin-video-side > .mandarin-speaker-info,
    .mandarin-player-v3 .mandarin-video-side > .mandarin-speaker-info {
        margin-top: 8px !important;
    }
    /* 非表示レガシーバーは隙間を生まない（保険） */
    .mandarin-video-side > .mandarin-controls,
    .mandarin-player-v3 .mandarin-video-side > .mandarin-controls {
        margin: 0 !important;
    }
}

/* ============================================================
 * v1.0.48: content_type 分岐スタイル
 * ============================================================
 * 既存ルールには触らず、ルート要素に付く .ct-hsk / .ct-reading /
 * .ct-fun / .ct-teacher.tl-en / .ct-teacher.tl-zh で出し分け。
 * 配色は --accent / --done / --like / --bm を再利用。プレーヤー
 * の他CSSが #色決め打ちなので、ここではローカル変数で吸収する。
 */
.mandarin-player-v3{
    --mc-accent:#0d9488;
    --mc-accent-soft:rgba(13,148,136,.12);
    --mc-done:#0d9488;
    --mc-border:rgba(0,0,0,.10);
    --mc-border-2:rgba(0,0,0,.18);
    --mc-surface:#f6f6f5;
    --mc-surface-2:#eeeeec;
    --mc-bg:#ffffff;
    --mc-ink:#18181b;
    --mc-muted:#6b7280;
    --mc-faint:#9aa0aa;
}
@media (prefers-color-scheme:dark){
    .mandarin-player-v3{
        --mc-accent:#2dd4bf;
        --mc-accent-soft:rgba(45,212,191,.16);
        --mc-done:#2dd4bf;
        --mc-border:rgba(255,255,255,.12);
        --mc-border-2:rgba(255,255,255,.22);
        --mc-surface:#1b1b1d;
        --mc-surface-2:#26262a;
        --mc-bg:#0f0f10;
        --mc-ink:#f3f4f6;
        --mc-muted:#a1a1aa;
        --mc-faint:#71717a;
    }
}

/* --- fun / teacher(英語解説): 学習UIをまるごと隠す --- */
.mandarin-player-v3.ct-fun .mandarin-desktop-mode-tabs,
.mandarin-player-v3.ct-fun .mandarin-mobile-tabs,
.mandarin-player-v3.ct-fun .mandarin-dictation-panel,
.mandarin-player-v3.ct-fun .mandarin-subtitle-list,
.mandarin-player-v3.ct-fun .mandarin-mobile-subtitle-list,
.mandarin-player-v3.ct-teacher.tl-en .mandarin-desktop-mode-tabs,
.mandarin-player-v3.ct-teacher.tl-en .mandarin-mobile-tabs,
.mandarin-player-v3.ct-teacher.tl-en .mandarin-dictation-panel{
    display:none !important;
}
/* v1.0.105: the mode bar is now two rows (study tabs + line toggles/icons in a
   separate .mandarin-desktop-mode-row2). Hiding only the tabs would leave an
   orphaned toggle row floating on the grey bar. For these "learning-UI-off"
   content types, hide the whole bar and drop the bar-clearance padding so the
   subtitle area has no dead space. */
.mandarin-player-v3.ct-fun .mandarin-desktop-mode-bar,
.mandarin-player-v3.ct-teacher.tl-en .mandarin-desktop-mode-bar{
    display:none !important;
}
.mandarin-player-v3.ct-fun .mandarin-subtitle-side .mandarin-subtitle-list,
.mandarin-player-v3.ct-fun .mandarin-subtitle-side .mandarin-desktop-cards,
.mandarin-player-v3.ct-teacher.tl-en .mandarin-subtitle-side .mandarin-subtitle-list,
.mandarin-player-v3.ct-teacher.tl-en .mandarin-subtitle-side .mandarin-desktop-cards{
    padding-top:0 !important;
}
/* fun は動画本体を画面いっぱいに使えるよう右パネルを潰す */
.mandarin-player-v3.ct-fun .mandarin-video-side{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
}

/* --- HSK: 本体 + コースレールの2カラム（デスクトップ） ---
 * v1.0.50 fix: 2カラムflexは「コースレールを実際に出力するとき」だけ。
 * 旧 .mandarin-player-v3.ct-hsk セレクタは既存エピソード全体に当たって
 * 横スクロール＋右側不要パネル露出を起こしたため、.has-course-rail へ
 * 差し替え。course_key 未設定エピソードは v1.0.46 以前と完全同じ挙動。 */
@media (min-width:1025px){
    .mandarin-player-v3.has-course-rail{
        display:flex;
        gap:28px;
        align-items:flex-start;
        /* sticky を効かせるため overflow-x:hidden を解除（親既定で auto相当） */
        overflow-x:visible !important;
    }
    .mandarin-player-v3.has-course-rail > .mandarin-video-main,
    .mandarin-player-v3.has-course-rail > .mandarin-main-layout,
    .mandarin-player-v3.has-course-rail > .mandarin-video-side{
        flex:1 1 0;
        min-width:0;
    }
    .mandarin-player-v3.has-course-rail > .mandarin-course-rail{
        flex:0 0 360px;
        width:360px;
        position:sticky;
        top:78px;
        max-height:calc(100vh - 96px);
        overflow:auto;
        -webkit-overflow-scrolling:touch;
    }
}
@media (max-width:1024px){
    .mandarin-player-v3.has-course-rail{display:block;}
    .mandarin-course-rail{margin:18px auto 24px;max-width:680px;}
}

/* --- コースレール本体（hsk-lesson-watch.html を移植） --- */
.mandarin-course-rail{padding:0 8px;}
.mandarin-course-rail .mc-box{
    border:1px solid var(--mc-border);
    border-radius:14px;
    overflow:hidden;
    background:var(--mc-bg);
}
.mandarin-course-rail .mc-head{padding:16px;border-bottom:1px solid var(--mc-border);}
.mandarin-course-rail .mc-row1{display:flex;align-items:center;gap:12px;}
.mandarin-course-rail .mc-badge{
    width:42px;height:42px;flex:0 0 42px;
    border-radius:10px;
    background:var(--mc-accent-soft);
    color:var(--mc-accent);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:12px;letter-spacing:.02em;
    text-align:center;line-height:1.1;
}
.mandarin-course-rail .mc-title-wrap{min-width:0;flex:1;}
.mandarin-course-rail .mc-title{
    margin:0;font-size:15px;font-weight:700;color:var(--mc-ink);
    line-height:1.3;
}
.mandarin-course-rail .mc-sub{font-size:12px;color:var(--mc-muted);margin-top:2px;}
.mandarin-course-rail .mc-pbar{
    height:6px;border-radius:6px;
    background:var(--mc-surface-2);
    margin-top:12px;overflow:hidden;
}
.mandarin-course-rail .mc-pbar > span{
    display:block;height:100%;background:var(--mc-accent);
    transition:width .3s ease;
}
.mandarin-course-rail .mc-pnum{
    display:flex;justify-content:space-between;
    font-size:12px;color:var(--mc-muted);margin-top:7px;
}
.mandarin-course-rail .mc-eplist{max-height:560px;overflow:auto;}
/* プレーヤーのリンク色強制(#191919 !important)を上書きするため
   :where() で詳細度を上げずに済むよう個別に !important を付ける */
.mandarin-player-v3 .mandarin-course-rail .mc-ep,
.mandarin-player-v3 a.mc-ep,
.mandarin-course-rail .mc-ep{
    display:flex;gap:12px;align-items:center;
    padding:11px 14px;
    cursor:pointer;
    border-bottom:1px solid var(--mc-border);
    text-decoration:none !important;
    color:var(--mc-ink) !important;
}
.mandarin-course-rail .mc-ep:hover{background:var(--mc-surface);}
.mandarin-course-rail .mc-ep.is-cur{background:var(--mc-accent-soft);}
.mandarin-course-rail .mc-ep.is-cur .mc-et{color:var(--mc-accent);}
.mandarin-course-rail .mc-n{
    width:28px;flex:0 0 28px;text-align:center;
    font-size:13px;color:var(--mc-faint);
    font-variant-numeric:tabular-nums;
}
.mandarin-course-rail .mc-icon{font-size:17px;line-height:1;}
.mandarin-course-rail .mc-icon-done{color:var(--mc-done);font-weight:700;}
.mandarin-course-rail .mc-icon-now{color:var(--mc-accent);font-weight:700;}
.mandarin-course-rail .mc-ex{flex:1;min-width:0;}
.mandarin-course-rail .mc-et{
    font-size:13.5px;font-weight:600;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;color:var(--mc-ink);
}
.mandarin-course-rail .mc-em{
    font-size:11.5px;color:var(--mc-muted);margin-top:2px;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.mandarin-course-rail .mc-dur{font-size:11px;color:var(--mc-faint);flex:0 0 auto;}
.mandarin-course-rail .mc-nowtag{
    font-size:10px;font-weight:700;letter-spacing:.05em;
    color:var(--mc-accent);
    border:1px solid var(--mc-accent);
    border-radius:4px;padding:1px 5px;
    text-transform:uppercase;
}