/**
 * Ponpon 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;
}

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

.ponpon-player-v3 {
    font-family: var(--font) !important;
    color: var(--gray-800);
    background: var(--white);
    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 */
.ponpon-player-v3 a {
    color: #191919 !important;
    text-decoration: none !important;
}

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

.ponpon-player-v3 .ponpon-header-nav {
    color: #191919 !important;
}

.ponpon-player-v3 .ponpon-header-nav:hover {
    color: var(--primary) !important;
}

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

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

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

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

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

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

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

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

/* Force full width on WordPress/DIVI */
body .ponpon-player-v3,
.et_pb_section .ponpon-player-v3,
.et_pb_row .ponpon-player-v3,
.et_pb_column .ponpon-player-v3,
#main-content .ponpon-player-v3,
.entry-content .ponpon-player-v3,
article .ponpon-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-ponpon_episode #sidebar,
body.single-ponpon_episode .et_right_sidebar #left-area,
body.single-ponpon_episode .et_right_sidebar #sidebar,
body.single-ponpon_episode .et_left_sidebar #sidebar,
body.single-ponpon_episode aside#sidebar,
body.single-ponpon_episode .widget-area {
    display: none !important;
}

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

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

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

/* ========== HEADER ========== */
.ponpon-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-bottom: none;
    background: transparent;
    position: relative;
    z-index: 100;
    gap: 20px;
}

/* Desktop header - inside video side */
.ponpon-desktop-header {
    padding: 12px 0;
    margin-bottom: 8px;
}

.ponpon-desktop-header .ponpon-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

.ponpon-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
}

/* 左半分：ナビゲーションとタイトルを含む */
.ponpon-desktop-header .ponpon-header-left-half {
    display: flex;
    align-items: center;
    position: relative;
}

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

/* デスクトップヘッダーでは左側ナビを左端に固定 */
.ponpon-desktop-header .ponpon-header-left {
    position: relative;
    z-index: 1;
}

/* タイトルを左半分の中央に配置 */
.ponpon-desktop-header .ponpon-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px !important;
    margin: 0 !important;
}

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

.ponpon-header-nav:hover {
    color: var(--primary);
}

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

.ponpon-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;
}

/* Desktop: Title positioned at center of left half */
.ponpon-desktop-header .ponpon-header-title {
    font-size: 30px !important;
}

.ponpon-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Checkin Button */
.ponpon-checkin-btn,
.ponpon-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;
    background: #e5e7eb;
    color: #6b7280;
}

.ponpon-checkin-btn svg,
.ponpon-favorite-btn svg {
    width: 20px;
    height: 20px;
}

.ponpon-checkin-btn:hover,
.ponpon-favorite-btn:hover {
    background: #d1d5db;
}

.ponpon-checkin-btn.checked {
    background: #10b981;
    color: white;
}

.ponpon-checkin-btn.checked svg {
    fill: white;
}

.ponpon-favorite-btn.favorited {
    background: #fbbf24;
    color: white;
}

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

/* Favorite wrapper with tooltip */
.ponpon-favorite-wrap {
    position: relative;
}

.ponpon-favorite-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    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;
    transition: all 0.2s;
    z-index: 100;
}

.ponpon-favorite-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

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

.ponpon-favorite-btn.favorited + .ponpon-favorite-tooltip {
    background: #fef3c7;
}

/* ========== CHECKIN MODAL ========== */
/* ========== CHECKIN MODAL ========== */
.ponpon-modal-overlay {
    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.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

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

.ponpon-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;
}

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

.ponpon-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;
}

.ponpon-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;
}

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

.ponpon-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;
}

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

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

.ponpon-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;
}

.ponpon-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;
}

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

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

.ponpon-modal-btn.confirm {
    background: #22c55e !important;
    border: none !important;
    color: #fff !important;
}

.ponpon-modal-btn.confirm:hover {
    background: #16a34a !important;
}

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

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

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

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

.ponpon-header-btn.checked,
.ponpon-header-btn.favorited {
    color: var(--primary);
}

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

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

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

.ponpon-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;
}

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

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

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

.ponpon-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;
}

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

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

/* ========== MAIN CONTENT: SIDE BY SIDE ========== */
.ponpon-main-content {
    display: flex;
    min-height: calc(100vh - 60px);
    border-bottom: 1px solid var(--gray-200);
}

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

.ponpon-video-wrapper {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    width: 100% !important;
    max-width: 100% !important;
    cursor: pointer;
}

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

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

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

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

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

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

.ponpon-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;
}

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

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

.ponpon-ctrl:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.ponpon-ctrl.active {
    background: #22c55e;
    color: var(--white);
}

/* Specific control button colors when active */
.ponpon-ctrl[data-action="loop"].active {
    background: #38bdf8; /* 水色 - 视频循环 */
}

.ponpon-ctrl[data-action="apoint"].active {
    background: #22c55e; /* 緑 - A点 */
}

.ponpon-ctrl[data-action="single"].active {
    background: #22c55e; /* 緑 - 单句 */
}

.ponpon-ctrl[data-action="ipa"].active {
    background: #3b82f6; /* 青 - 音标 */
}

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

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

.ponpon-ctrl-item.play-item .ponpon-ctrl:hover {
    background: #2563eb;
}

/* Pause button - same size but orange */
.ponpon-ctrl-item.pause-item .ponpon-ctrl {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    background: #f97316;
    color: var(--white);
}

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

.ponpon-ctrl-item.pause-item .ponpon-ctrl:hover {
    background: #ea580c;
}

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

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

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

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

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

/* ========== SUBTITLE SIDE ========== */
.ponpon-subtitle-side {
    flex: 0 0 50%;
    max-width: 50%;
    border-left: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    background: var(--white);
    height: 100%;
    max-height: calc(100vh - 60px);
    position: sticky;
    top: 60px;
}

/* Subtitle List */
.ponpon-subtitle-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scroll-behavior: smooth;
    background: var(--white);
}

.ponpon-sub-item {
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 4px;
    background: var(--white);
}

.ponpon-sub-item:hover {
    background: var(--gray-50);
}

.ponpon-sub-item.active {
    background: #fef3c7;
}

/* IPA display */
.ponpon-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 */
.ponpon-subtitle-list.show-ipa .ponpon-sub-ipa {
    display: block;
}

.ponpon-sub-en {
    font-size: 15px;
    color: var(--gray-800);
    line-height: 1.6;
    margin-bottom: 4px;
}

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

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

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

.ponpon-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;
}

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

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

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

.ponpon-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;
}

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

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

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

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

/* Blank mode (挖空) - hide keywords */
.ponpon-subtitle-list[data-lang="blank"] .ponpon-highlight {
    background: #e5e7eb;
    color: transparent;
    user-select: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* Keep original background color but make text transparent */
.ponpon-subtitle-list[data-lang="blank"] .highlight-phrase {
    background: #fef3c7;
    color: transparent;
}

.ponpon-subtitle-list[data-lang="blank"] .highlight-phrasal_verb {
    background: #dcfce7;
    color: transparent;
}

.ponpon-subtitle-list[data-lang="blank"] .highlight-collocation {
    background: #fce7f3;
    color: transparent;
}

.ponpon-subtitle-list[data-lang="blank"] .highlight-proper_noun {
    background: #fce7f3;
    color: transparent;
}

.ponpon-subtitle-list[data-lang="blank"] .highlight-word {
    background: #fef3c7;
    color: transparent;
}

.ponpon-subtitle-list[data-lang="blank"] .highlight-discourse {
    background: #ecfccb;
    color: transparent;
}

/* When keyword is revealed (clicked) */
.ponpon-subtitle-list[data-lang="blank"] .ponpon-highlight.blank-revealed {
    color: inherit !important;
}

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

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

.ponpon-sub-meta-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.ponpon-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;
}

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

.ponpon-sub-action:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

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

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

/* Favorited subtitle item */
.ponpon-sub-item.subtitle-favorited {
    background: #fff1f2;
}

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

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

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

/* Voice button speaking state */
.ponpon-sub-action[data-action="voice"].speaking {
    color: #3b82f6;
    animation: pulse 0.8s ease-in-out infinite;
}

/* Voice button recording state */
.ponpon-sub-action[data-action="voice"].recording {
    color: #ef4444;
    animation: pulse-recording 0.6s ease-in-out infinite;
}

.ponpon-sub-action[data-action="voice"].recording svg {
    stroke: #ef4444;
}

/* Voice button recorded state */
.ponpon-sub-action[data-action="voice"].recorded {
    color: #22c55e;
}

.ponpon-sub-action[data-action="voice"].recorded svg {
    stroke: #22c55e;
}

/* Voice button playing state */
.ponpon-sub-action[data-action="voice"].playing {
    color: #3b82f6;
    animation: pulse 0.8s ease-in-out infinite;
}

@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 */
.ponpon-sub-note-area {
    margin-top: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

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

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

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

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

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

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

.ponpon-note-save:hover {
    background: #e11d48;
}

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

.ponpon-sub-time {
    margin-left: auto;
}

/* ========== HIGHLIGHT STYLES ========== */
.ponpon-highlight {
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.highlight-phrase {
    background: #dcfce7;
    color: #166534;
    border-bottom: 2px solid #22c55e;
}

.highlight-phrasal_verb {
    background: #fce7f3;
    color: #9d174d;
    border-bottom: 2px solid #ec4899;
}

.highlight-collocation {
    background: #dbeafe;
    color: #1e40af;
    border-bottom: 2px solid #3b82f6;
}

.highlight-proper_noun {
    background: #fce7f3;
    color: #9d174d;
    border-bottom: 2px solid #ec4899;
}

.highlight-word {
    background: #fef3c7;
    color: #92400e;
    border-bottom: 2px solid #f59e0b;
}

.highlight-discourse {
    background: #ecfccb;
    color: #3f6212;
    border-bottom: 2px solid #84cc16;
}

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

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

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

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

.ponpon-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);
}

.ponpon-toggle-lang,
.ponpon-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);
}

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

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

.ponpon-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;
}

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

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

/* Category-specific colors for desktop tabs */
.ponpon-tab[data-category="all"].active {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.ponpon-tab[data-category="phrase"].active {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.ponpon-tab[data-category="phrasal_verb"].active {
    background: #f43f5e;
    border-color: #f43f5e;
    color: #fff;
}

.ponpon-tab[data-category="collocation"].active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.ponpon-tab[data-category="proper_noun"].active {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
}

.ponpon-tab[data-category="word"].active {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

.ponpon-tab[data-category="discourse"].active {
    background: #84cc16;
    border-color: #84cc16;
    color: #fff;
}

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

.ponpon-tab[data-category="favorited"].active {
    background: #fef08a;
    border-color: #facc15;
    color: #854d0e;
}

.ponpon-tab .tab-star {
    color: #facc15;
}

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

.ponpon-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;
}

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

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

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

.ponpon-batch-btn:hover {
    background: #16a34a;
}

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

.ponpon-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;
}

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

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

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

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

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

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

.ponpon-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 */
.ponpon-card.hidden-card {
    display: none !important;
}

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

.ponpon-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;
}

.ponpon-link.g { background: #22c55e !important; }
.ponpon-link.b { background: #3b82f6 !important; }
.ponpon-link.d { background: #ef4444 !important; }

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

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

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

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

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

.ponpon-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);
}

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

.ponpon-fav-btn:hover {
    color: #facc15;
}

.ponpon-fav-btn.favorited,
.ponpon-fav-btn.saved {
    color: #facc15;
}

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

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

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

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

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

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

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

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

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

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

.ponpon-expand-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-400);
}

.ponpon-expand-btn:hover {
    color: var(--gray-600);
}

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

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

.ponpon-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);
}

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

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

.ponpon-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;
}

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

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

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

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

.ponpon-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 */
.ponpon-transcript-list[data-lang="en"] .transcript-en { display: block; }
.ponpon-transcript-list[data-lang="en"] .transcript-zh { display: none; }
.ponpon-transcript-list[data-lang="zh"] .transcript-en { display: none; }
.ponpon-transcript-list[data-lang="zh"] .transcript-zh { display: block; }

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

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

.ponpon-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;
}

.ponpon-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) {
    .ponpon-youtube-section {
        display: none !important;
    }
    
    .ponpon-controls {
        display: none !important;
    }
    
    .ponpon-current-sub {
        display: none !important;
    }
    
    .ponpon-episode-nav {
        display: none !important;
    }
    
    .ponpon-transcript-section {
        display: none !important;
    }
    
    .ponpon-expressions-section {
        display: none !important;
    }
    
    /* Show expressions section when cards panel is active */
    .ponpon-expressions-section.mobile-visible {
        display: block !important;
    }
}

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

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

.ponpon-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 */
.ponpon-nav-btn.prev {
    background: #374151;
    color: #fff;
    border: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

.ponpon-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);
}

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

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

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

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

/* Mobile */
@media (max-width: 640px) {
    .ponpon-header {
        padding: 8px 12px;
    }
    
    .ponpon-header-title {
        font-size: 15px;
    }
    
    .ponpon-header-nav {
        font-size: 13px;
    }
    
    .ponpon-subtitle-toolbar-header {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .ponpon-subtitle-label {
        display: none;
    }
    
    .ponpon-tool-btn {
        padding: 4px;
        font-size: 14px;
    }
    
    .ponpon-lang-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .ponpon-video-side {
        padding: 12px;
    }
    
    .ponpon-controls {
        display: none !important;
    }
    
    .ponpon-ctrl {
        width: 40px;
        height: 40px;
    }
    
    .ponpon-play-btn {
        width: 46px;
        height: 46px;
    }
    
    .ctrl-icon {
        font-size: 12px;
    }
    
    .ctrl-label {
        font-size: 8px;
    }
    
    .ponpon-current-sub {
        padding: 12px;
        min-height: 60px;
    }
    
    .ponpon-current-en {
        font-size: 15px;
    }
    
    .ponpon-current-zh {
        font-size: 13px;
    }
    
    .ponpon-speaker-info {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }
    
    .ponpon-subtitle-side {
        max-height: 40vh;
    }
    
    .ponpon-sub-item {
        padding: 10px;
    }
    
    .ponpon-sub-en {
        font-size: 14px;
    }
    
    .ponpon-sub-zh {
        font-size: 13px;
    }
    
    .ponpon-sub-meta {
        font-size: 11px;
        gap: 4px;
    }
    
    .ponpon-expr-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .ponpon-card {
        padding: 12px !important;
    }
    
    .ponpon-card-word h3 {
        font-size: 16px;
    }
    
    .ponpon-section {
        padding: 16px 12px;
    }
    
    .ponpon-section-title {
        font-size: 16px;
    }
    
    .ponpon-category-tabs {
        gap: 6px;
    }
    
    .ponpon-tab {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .ponpon-batch-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .ponpon-transcript-item {
        padding: 10px 0;
    }
    
    .transcript-num {
        width: 24px;
        font-size: 12px;
    }
    
    .transcript-en {
        font-size: 14px;
    }
    
    .transcript-zh {
        font-size: 13px;
    }
    
    .ponpon-nav-buttons {
        gap: 8px;
    }
    
    .ponpon-nav-btn {
        padding: 10px 16px;
        font-size: 14px;
    }
}

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

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

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

.ponpon-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;
}

.ponpon-mobile-tab.active {
    color: var(--gray-800);
}

.ponpon-mobile-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gray-800);
}

/* Mobile Content Area */
.ponpon-mobile-content {
    min-height: 300px;
    background: var(--white);
    padding-bottom: 180px; /* Space for fixed footer controls */
}

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

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

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

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

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

.ponpon-follow-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 11px;
    color: #9ca3af; /* gray-400 */
    margin-bottom: 6px;
    padding: 0;
    font-weight: 500;
}

.ponpon-follow-index {
    font-weight: 500;
}

.ponpon-follow-time {
    font-weight: 500;
}

.ponpon-follow-ipa {
    font-size: 11px;
    color: #6b7280; /* gray-500 */
    margin-bottom: 4px;
    font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.2px;
    line-height: 1.4;
    word-spacing: 1px;
}

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

.ponpon-follow-en {
    font-size: 14px;
    font-weight: 500;
    color: #22c55e; /* green-500 - lighter green */
    line-height: 1.4;
    margin-bottom: 4px;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing: -0.01em;
}

.ponpon-follow-zh {
    font-size: 12px;
    color: #6b7280; /* gray-500 */
    line-height: 1.4;
    font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

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

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

.ponpon-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;
}

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

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

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

.ponpon-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);
    }
}

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

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

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

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

.ponpon-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;
}

.ponpon-record-control-btn.ponpon-playback-btn {
    background: #22c55e;
    color: #fff;
}

.ponpon-record-control-btn.ponpon-playback-btn:hover {
    background: #16a34a;
}

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

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

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

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

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

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

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

.ponpon-playback-btn:hover {
    background: #16a34a;
}

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

/* Normal Panel - Subtitle Display */
.ponpon-mobile-subtitle {
    padding: 20px 16px;
    text-align: center;
}

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

.ponpon-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 */
.ponpon-mobile-subtitle-list.show-ipa .ponpon-mobile-sub-ipa {
    display: block;
}

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

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

/* Dictation Panel Styles */
.ponpon-dictation-area {
    margin-bottom: 16px;
}

.ponpon-mobile-dictation-input {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border: none;
    border-bottom: 2px solid #e5e7eb;
    background: transparent;
    outline: none;
    color: #1f2937;
}

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

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

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

.ponpon-dictation-answer {
    background: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

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

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

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

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

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

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

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

.ponpon-dictation-close-btn:hover {
    background: #16a34a;
}

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

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

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

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

.ponpon-dictation-check-btn.next-mode {
    background: #22c55e;
}

.ponpon-dictation-check-btn.next-mode:hover {
    background: #16a34a;
}

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

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

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

.ponpon-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 */
.ponpon-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);
}

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

/* Copy Toast on Video Overlay */
.ponpon-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;
}

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

/* Pause Between Toast on Video Overlay */
.ponpon-pause-toast {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(200, 200, 200, 0.95);
    color: #374151;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

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

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

/* AB Loop Toast Notification */
.ponpon-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);
}

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

/* Mobile Subtitle List (Normal Panel) */
.ponpon-mobile-subtitle-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    max-height: calc(100vh - 350px) !important; /* 動画、タブ、フッター分を引く */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

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

.ponpon-mobile-sub-item {
    padding: 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff;
    display: block !important;
    margin: 0 !important;
}

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

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

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

.ponpon-mobile-sub-text {
    margin-bottom: 8px !important;
    cursor: pointer !important;
}

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

.ponpon-mobile-sub-en-text {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    line-height: 1.5 !important;
    margin-bottom: 4px !important;
}

/* Mobile subtitle highlight styles */
.ponpon-mobile-sub-en-text .ponpon-highlight {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline !important;
    -webkit-tap-highlight-color: transparent !important;
}

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

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

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

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

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

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

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

.ponpon-mobile-sub-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.ponpon-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;
}

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

.ponpon-mobile-sub-meta-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.ponpon-mobile-sub-action {
    background: none !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: 28px !important;
    min-height: 28px !important;
}

.ponpon-mobile-sub-action svg {
    width: 20px !important;
    height: 20px !important;
}

.ponpon-mobile-sub-action:active {
    color: #6b7280 !important;
}

.ponpon-mobile-sub-action.favorited {
    color: #f43f5e !important;
}

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

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

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

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

/* Voice button recording state */
.ponpon-mobile-sub-action[data-action="voice"].recording {
    color: #ef4444 !important;
    animation: pulse-recording 0.6s ease-in-out infinite;
}

.ponpon-mobile-sub-action[data-action="voice"].recording svg {
    stroke: #ef4444 !important;
}

/* Voice button recorded state */
.ponpon-mobile-sub-action[data-action="voice"].recorded {
    color: #22c55e !important;
}

.ponpon-mobile-sub-action[data-action="voice"].recorded svg {
    stroke: #22c55e !important;
}

/* Voice button playing state */
.ponpon-mobile-sub-action[data-action="voice"].playing {
    color: #3b82f6 !important;
    animation: pulse 0.5s ease-in-out infinite;
}

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

/* Subtitle Recording Controls */
.ponpon-sub-record-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    background: #f3f4f6 !important;
    border-radius: 8px !important;
}

.ponpon-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;
}

.ponpon-sub-record-btn.play-btn {
    background: #22c55e !important;
    color: #fff !important;
}

.ponpon-sub-record-btn.play-btn:hover {
    background: #16a34a !important;
}

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

.ponpon-sub-record-btn.delete-btn {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

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

.ponpon-sub-record-btn.upload-btn {
    background: #dbeafe !important;
    color: #3b82f6 !important;
}

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

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

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

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

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

.ponpon-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;
}

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

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

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

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

.ponpon-note-save {
    background: #10b981 !important;
    color: white !important;
}

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

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

.ponpon-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 */
.ponpon-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;
}

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

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

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

.ponpon-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;
}

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

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

.ponpon-mobile-cards-tab[data-cat="all"].active {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #fff !important;
}

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

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

.ponpon-mobile-cards-tab[data-cat="collocation"].active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}

.ponpon-mobile-cards-tab[data-cat="proper_noun"].active {
    background: #ec4899 !important;
    border-color: #ec4899 !important;
    color: #fff !important;
}

.ponpon-mobile-cards-tab[data-cat="word"].active {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
}

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

.ponpon-mobile-cards-tab[data-cat="favorited"].active,
.ponpon-mobile-cards-tab.favorite.active {
    background: #fef08a !important;
    border-color: #facc15 !important;
    color: #854d0e !important;
}

/* Favorite tab default style */
.ponpon-mobile-cards-tab.favorite {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

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

/* Batch button */
.ponpon-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 */
.ponpon-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 */
.ponpon-mobile-card {
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

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

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

/* Card Header - Audio, IPA, Type badge */
.ponpon-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 */
.ponpon-mobile-card-links {
    display: flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.ponpon-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;
}

.ponpon-mobile-link.g { background: #22c55e !important; }
.ponpon-mobile-link.b { background: #3b82f6 !important; }
.ponpon-mobile-link.d { background: #ef4444 !important; }

.ponpon-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;
}

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

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

.ponpon-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 */
.ponpon-mobile-card-badges {
    display: flex !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.ponpon-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;
}

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

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

.ponpon-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;
}

.ponpon-mobile-card-fav.saved {
    color: #facc15 !important;
}

.ponpon-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 */
.ponpon-mobile-card-divider {
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    margin: 12px 0 !important;
}

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

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

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

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

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

.ponpon-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 */
.ponpon-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;
}

.ponpon-mobile-card-expand {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !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.2s !important;
}

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

/* Accordion expanded content */
.ponpon-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;
}

.ponpon-mobile-card-accordion.show {
    display: block !important;
}

/* Episode occurrence item */
.ponpon-mobile-card-occurrence {
    background: #fffbeb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

.ponpon-mobile-card-occurrence:last-child {
    margin-bottom: 0 !important;
}

.ponpon-mobile-card-occurrence-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.ponpon-mobile-card-occurrence-ep {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.ponpon-mobile-card-occurrence-link {
    width: 28px !important;
    height: 28px !important;
    background: #3b82f6 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    text-decoration: none !important;
}

.ponpon-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;
}

.ponpon-mobile-card-occurrence-en {
    font-size: 15px !important;
    color: #1f2937 !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

.ponpon-mobile-card-occurrence-en .highlight {
    background: #fde047 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
}

.ponpon-mobile-card-occurrence-zh {
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

.ponpon-mobile-card-occurrence-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

.ponpon-mobile-card-occurrence-play {
    width: 28px !important;
    height: 28px !important;
    background: #22c55e !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;
}

/* Loading state */
.ponpon-mobile-card-loading {
    text-align: center;
    padding: 40px;
    color: var(--gray-500);
}

/* Empty card state */
.ponpon-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;
}

.ponpon-mobile-card-empty small {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--gray-400);
}

/* ========== FIXED BOTTOM CONTROLS (Mobile/Tablet Only) ========== */
.ponpon-mobile-controls {
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 1024px) {
    .ponpon-mobile-controls {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 0 24px 8px 24px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        z-index: 1000;
        border-top: 1px solid #e5e7eb;
    }
}

/* Progress Bar */
.ponpon-mobile-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
}

.ponpon-mobile-progress-bar {
    flex: 1;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.ponpon-mobile-progress-fill {
    height: 100%;
    background: #374151;
    width: 0%;
    transition: width 0.1s;
    border-radius: 2px;
    position: relative;
}

/* Progress thumb (dot indicator) */
.ponpon-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);
}

/* Control Buttons Row 1 */
.ponpon-mobile-ctrl-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}

.ponpon-mobile-ctrl {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #e5e7eb !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: #374151 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    transition: background-color 0.15s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.ponpon-mobile-ctrl:focus,
.ponpon-mobile-ctrl:focus-visible,
.ponpon-mobile-ctrl:active {
    outline: none !important;
    box-shadow: none !important;
}

.ponpon-mobile-ctrl svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #374151 !important;
    stroke-width: 2 !important;
}

/* 前へ・次へボタン - ダークグレー塗りつぶし、白矢印 */
.ponpon-mobile-ctrl[data-action="prev"],
.ponpon-mobile-ctrl[data-action="next"] {
    background: #374151 !important;
    color: #fff !important;
}

.ponpon-mobile-ctrl[data-action="prev"] svg,
.ponpon-mobile-ctrl[data-action="next"] svg {
    stroke: #fff !important;
    width: 18px !important;
    height: 18px !important;
}

/* リピートボタン - ライトグレー背景 */
.ponpon-mobile-ctrl[data-action="repeat"] {
    background: #e5e7eb !important;
}

.ponpon-mobile-ctrl[data-action="repeat"] svg {
    stroke: #374151 !important;
}

/* ループ回数ボタン - ライトグレー背景 */
.ponpon-mobile-ctrl[data-action="loop-count"] {
    background: #e5e7eb !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* 再生ボタン - 濃いグレー塗りつぶし、少し大きめ */
.ponpon-mobile-ctrl[data-action="play"] {
    width: 44px !important;
    height: 44px !important;
    background: #374151 !important;
    color: #fff !important;
}

.ponpon-mobile-ctrl[data-action="play"] svg {
    width: 20px !important;
    height: 20px !important;
    fill: #fff !important;
    stroke: none !important;
    background: none !important;
    background-color: transparent !important;
}

.ponpon-mobile-ctrl[data-action="play"] svg * {
    fill: #fff !important;
    stroke: none !important;
    background: none !important;
}

.ponpon-mobile-ctrl[data-action="play"] .play-icon,
.ponpon-mobile-ctrl[data-action="play"] .pause-icon {
    background: none !important;
    background-color: transparent !important;
}

.ponpon-mobile-ctrl[data-action="play"] svg polygon,
.ponpon-mobile-ctrl[data-action="play"] svg rect,
.ponpon-mobile-ctrl[data-action="play"] svg path {
    fill: #fff !important;
    stroke: none !important;
    background: none !important;
}

/* アクティブ状態 - オレンジ色 */
.ponpon-mobile-ctrl.active {
    background: oklch(0.75 0.183 55.934) !important;
    color: #fff !important;
}

.ponpon-mobile-ctrl.active svg {
    stroke: #fff !important;
}

/* Specific mobile control colors when active */
/* ループ回数ボタンは常にグレー（アクティブ時も同じ色） */
.ponpon-mobile-ctrl[data-action="loop-count"].active {
    background: #e5e7eb !important;
    color: #374151 !important;
}

/* Control Buttons Row 2 */
.ponpon-mobile-ctrl-row2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
}

.ponpon-mobile-ctrl2 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #e5e7eb !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    transition: background-color 0.15s ease !important;
}

.ponpon-mobile-ctrl2 svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #6b7280 !important;
    stroke-width: 2 !important;
    fill: none !important;
}

/* A点ボタン - 状態に応じた色 */
.ponpon-mobile-ctrl2[data-action="apoint"] {
    background: transparent !important;
    color: #191919 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* A状態（初期）- 緑色の円形背景 */
.ponpon-mobile-ctrl2[data-action="apoint"] .apoint-a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dcfce7;
    color: #22c55e;
    font-weight: 600;
    font-size: 16px;
}

/* B状態 - 青色の円形背景 */
.ponpon-mobile-ctrl2[data-action="apoint"] .apoint-b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dbeafe;
    color: #3b82f6;
    font-weight: 600;
    font-size: 16px;
}

/* X状態（キャンセル）- 赤色の円形背景 */
.ponpon-mobile-ctrl2[data-action="apoint"] .apoint-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fee2e2;
    stroke: #ef4444 !important;
}

.ponpon-mobile-ctrl2[data-action="apoint"] .apoint-x line {
    stroke: #ef4444 !important;
}

/* アイコン表示制御 */
.ponpon-mobile-ctrl2[data-action="apoint"] .apoint-icon {
    display: none;
}

.ponpon-mobile-ctrl2[data-action="apoint"][data-state="a"] .apoint-a,
.ponpon-mobile-ctrl2[data-action="apoint"]:not([data-state]) .apoint-a,
.ponpon-mobile-ctrl2[data-action="apoint"].state-a .apoint-a {
    display: flex !important;
}

.ponpon-mobile-ctrl2[data-action="apoint"][data-state="b"] .apoint-b,
.ponpon-mobile-ctrl2[data-action="apoint"].state-b .apoint-b {
    display: flex !important;
}

.ponpon-mobile-ctrl2[data-action="apoint"][data-state="x"] .apoint-x,
.ponpon-mobile-ctrl2[data-action="apoint"].state-x .apoint-x {
    display: flex !important;
}

/* ABループ active状態でのボタンスタイル（Xアイコン表示時） */
.ponpon-mobile-ctrl2[data-action="apoint"].state-x {
    background: transparent !important;
}

/* ========== DESKTOP A-POINT BUTTON STYLES ========== */
/* デスクトップ用ABループボタン */
.ponpon-ctrl[data-action="apoint"] .apoint-icon {
    display: none;
}

.ponpon-ctrl[data-action="apoint"] .apoint-a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.ponpon-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;
}

.ponpon-ctrl[data-action="apoint"] .apoint-x {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ef4444;
}

.ponpon-ctrl[data-action="apoint"] .apoint-x line {
    stroke: #fff !important;
}

/* Desktop A-point button states */
.ponpon-ctrl[data-action="apoint"].state-a .apoint-a,
.ponpon-ctrl[data-action="apoint"]:not(.state-b):not(.state-x) .apoint-a {
    display: flex !important;
}

.ponpon-ctrl[data-action="apoint"].state-a .apoint-b,
.ponpon-ctrl[data-action="apoint"].state-a .apoint-x {
    display: none !important;
}

.ponpon-ctrl[data-action="apoint"].state-b .apoint-b {
    display: flex !important;
}

.ponpon-ctrl[data-action="apoint"].state-b .apoint-a,
.ponpon-ctrl[data-action="apoint"].state-b .apoint-x {
    display: none !important;
}

.ponpon-ctrl[data-action="apoint"].state-x .apoint-x {
    display: flex !important;
}

.ponpon-ctrl[data-action="apoint"].state-x .apoint-a,
.ponpon-ctrl[data-action="apoint"].state-x .apoint-b {
    display: none !important;
}

/* AB Loop Indicator on video */
.ponpon-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);
}

.ponpon-ab-loop-indicator .ab-loop-text {
    font-weight: 600;
}

.ponpon-ab-loop-indicator .ab-loop-time {
    opacity: 0.9;
}

.ponpon-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;
}

.ponpon-ab-loop-indicator .ab-loop-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ponpon-mobile-ctrl2.active {
    background: oklch(0.75 0.183 55.934) !important;
    color: #fff !important;
}

.ponpon-mobile-ctrl2.active svg {
    stroke: #fff !important;
}

.ponpon-mobile-ctrl2.active svg path,
.ponpon-mobile-ctrl2.active svg circle,
.ponpon-mobile-ctrl2.active svg line,
.ponpon-mobile-ctrl2.active svg polyline,
.ponpon-mobile-ctrl2.active svg rect {
    stroke: #fff !important;
}

/* Specific row2 control colors */
.ponpon-mobile-ctrl2[data-action="pause-between"].active {
    background: oklch(0.75 0.183 55.934) !important;
    color: #fff !important;
}

.ponpon-mobile-ctrl2[data-action="pause-between"].active svg {
    stroke: #fff !important;
}

.ponpon-mobile-ctrl2[data-action="apoint"].active {
    background: oklch(0.75 0.183 55.934) !important;
    color: #fff !important;
}

/* Hide video button icon toggle */
.ponpon-mobile-ctrl2[data-action="hide-video"] .eye-open {
    display: block;
}

.ponpon-mobile-ctrl2[data-action="hide-video"] .eye-closed {
    display: none;
}

.ponpon-mobile-ctrl2[data-action="hide-video"].active .eye-open {
    display: none !important;
}

.ponpon-mobile-ctrl2[data-action="hide-video"].active .eye-closed {
    display: block !important;
}

/* Hide video button - ensure SVG is white when active */
.ponpon-mobile-ctrl2[data-action="hide-video"].active svg,
.ponpon-mobile-ctrl2[data-action="hide-video"].active svg.eye-open,
.ponpon-mobile-ctrl2[data-action="hide-video"].active svg.eye-closed {
    stroke: #fff !important;
    color: #fff !important;
}

.ponpon-mobile-ctrl2[data-action="hide-video"].active svg path,
.ponpon-mobile-ctrl2[data-action="hide-video"].active svg circle,
.ponpon-mobile-ctrl2[data-action="hide-video"].active svg line {
    stroke: #fff !important;
    fill: none !important;
}

/* Ensure hide-video button has orange background when active */
.ponpon-mobile-ctrl2[data-action="hide-video"].active {
    background: oklch(0.75 0.183 55.934) !important;
    color: #fff !important;
}

/* Speed Selection Modal - Bottom Sheet Style */
.ponpon-speed-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    /* display is controlled by inline style and JS */
    align-items: flex-end;
    justify-content: center;
}

.ponpon-speed-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.ponpon-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 0 16px 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

/* Speed Modal Handle */
.ponpon-speed-modal-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
}

/* Speed Modal Title */
.ponpon-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;
}

.ponpon-speed-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;
}

.ponpon-speed-option:last-child {
    border-bottom: none;
}

.ponpon-speed-option:active {
    background: #f3f4f6;
}

.ponpon-speed-check {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ponpon-speed-option.selected .ponpon-speed-check {
    border-color: #3b82f6;
    background: #3b82f6;
}

.ponpon-speed-option.selected .ponpon-speed-check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* Loop Count Selection Modal - Bottom Sheet Style */
.ponpon-loop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    /* display is controlled by inline style and JS */
    align-items: flex-end;
    justify-content: center;
}

.ponpon-loop-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.ponpon-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 */
.ponpon-loop-modal-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
}

/* Loop Modal Title */
.ponpon-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;
}

.ponpon-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;
}

.ponpon-loop-option:last-child {
    border-bottom: none;
}

.ponpon-loop-option:active {
    background: #f3f4f6;
}

.ponpon-loop-check {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ponpon-loop-option.selected .ponpon-loop-check {
    border-color: #3b82f6;
    background: #3b82f6;
}

.ponpon-loop-option.selected .ponpon-loop-check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* Bottom Sheet Modal Animations */
.ponpon-speed-modal-content,
.ponpon-loop-modal-content {
    animation: slideUpModal 0.3s ease-out;
}

.ponpon-speed-modal-overlay,
.ponpon-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 */
.ponpon-settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ponpon-settings-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.ponpon-settings-content {
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 12px 16px 32px;
}

.ponpon-settings-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto 16px;
}

.ponpon-settings-quick {
    display: flex;
    justify-content: space-around;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 16px;
}

.ponpon-settings-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #374151;
    padding: 8px 16px;
}

.ponpon-settings-quick-btn svg {
    color: #6b7280;
}

.ponpon-settings-quick-btn span {
    font-size: 13px;
}

.ponpon-settings-toggles {
    margin-bottom: 16px;
}

.ponpon-settings-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

.ponpon-settings-toggle-row:last-child {
    border-bottom: none;
}

.ponpon-settings-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #1f2937;
}

.ponpon-settings-toggle-label svg {
    color: #6b7280;
}

/* Toggle Switch */
.ponpon-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.ponpon-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ponpon-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 28px;
}

.ponpon-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.ponpon-toggle input:checked + .ponpon-toggle-slider {
    background-color: #3b82f6;
}

.ponpon-toggle input:checked + .ponpon-toggle-slider:before {
    transform: translateX(22px);
}

/* Settings Sections */
.ponpon-settings-section {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

.ponpon-settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 12px;
}

.ponpon-settings-section-title svg {
    color: #6b7280;
}

.ponpon-settings-btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ponpon-settings-btn {
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.ponpon-settings-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ========== MOBILE HEADER (Reference Design) ========== */
.ponpon-mobile-header {
    display: none; /* Hidden by default, shown on mobile */
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Left: Navigation Links */
.ponpon-mobile-header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ponpon-mobile-nav-link {
    color: #191919;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

.ponpon-mobile-nav-link:hover {
    color: var(--primary);
}

.ponpon-mobile-nav-sep {
    color: #999;
    font-size: 14px;
    margin: 0 2px;
}

/* Center: Episode Number */
.ponpon-mobile-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ponpon-mobile-episode-num {
    font-size: 16px;
    font-weight: 600;
    color: #191919;
}

/* Right: Action Buttons */
.ponpon-mobile-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.ponpon-mobile-action-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    color: #6b7280 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
}

.ponpon-mobile-action-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 1.5 !important;
}

.ponpon-mobile-action-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Checkin checked state */
.ponpon-mobile-action-btn.ponpon-checkin-btn.checked {
    background: transparent !important;
    color: #10b981 !important;
}

.ponpon-mobile-action-btn.ponpon-checkin-btn.checked svg {
    stroke: #10b981 !important;
    fill: #10b981 !important;
}

/* Favorite favorited state */
.ponpon-mobile-action-btn.ponpon-favorite-btn.favorited {
    background: transparent !important;
    color: #191919 !important;
}

.ponpon-mobile-action-btn.ponpon-favorite-btn.favorited svg {
    fill: #191919 !important;
    stroke: #191919 !important;
}

/* More button (three dots) */
.ponpon-mobile-action-btn.ponpon-more-btn {
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
}

.ponpon-mobile-action-btn.ponpon-more-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: #6b7280 !important;
}

/* Mobile More Menu Dropdown */
.ponpon-mobile-more-menu {
    display: none;
    position: fixed;
    top: 56px;
    right: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 200;
    overflow: hidden;
    min-width: 140px;
}

.ponpon-mobile-more-menu.active {
    display: block;
}

.ponpon-mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    color: #333;
    font-size: 14px;
}

.ponpon-mobile-menu-item:hover {
    background: #f5f5f5;
}

.ponpon-mobile-menu-item svg {
    width: 18px;
    height: 18px;
    color: #666;
}

/* Mobile Media Query - Show/Hide Headers */
@media (max-width: 768px) {
    /* Show mobile header */
    .ponpon-mobile-header {
        display: flex !important;
    }
    
    /* Hide desktop header */
    .ponpon-desktop-header {
        display: none !important;
    }
}

@media (min-width: 769px) {
    /* Hide mobile header */
    .ponpon-mobile-header {
        display: none !important;
    }
    
    /* Show desktop header - inside video side */
    .ponpon-desktop-header {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 8px 0 12px 0 !important;
        background: transparent !important;
    }
    
    .ponpon-desktop-header .ponpon-header-inner {
        max-width: none !important;
        width: 100% !important;
    }
    
    /* Hide mobile more menu */
    .ponpon-mobile-more-menu {
        display: none !important;
    }
}

/* ========== WORD POPUP (地道表达 Popup) ========== */
.ponpon-word-popup {
    position: fixed;
    z-index: 10000;
    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;
    overflow: hidden;
}

.ponpon-word-popup-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ponpon-word-popup-fav {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    color: #9ca3af;
    transition: color 0.2s;
}

.ponpon-word-popup-fav:hover,
.ponpon-word-popup-fav.favorited {
    color: #fbbf24;
}

.ponpon-word-popup-word {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-left: 8px;
}

.ponpon-word-popup-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.ponpon-word-popup-close:hover {
    color: #374151;
}

.ponpon-word-popup-content {
    padding: 16px;
}

.ponpon-word-popup-audio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ponpon-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;
}

.ponpon-word-popup-audio:hover {
    background: #e5e7eb;
}

.ponpon-word-popup-audio .audio-icon {
    font-size: 14px;
}

.ponpon-word-popup-audio .audio-label {
    color: var(--primary);
    font-weight: 500;
}

.ponpon-word-popup-ipa {
    color: #6b7280;
    font-size: 14px;
}

.ponpon-word-popup-type {
    margin-left: auto;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

/* Category type colors */
.ponpon-word-popup-type.type-phrase { background: #dcfce7; color: #166534; }
.ponpon-word-popup-type.type-phrasal_verb { background: #fce7f3; color: #9d174d; }
.ponpon-word-popup-type.type-collocation { background: #dbeafe; color: #1e40af; }
.ponpon-word-popup-type.type-proper_noun { background: #fce7f3; color: #9d174d; }
.ponpon-word-popup-type.type-word { background: #fef3c7; color: #92400e; }
.ponpon-word-popup-type.type-discourse { background: #ecfccb; color: #3f6212; }

.ponpon-word-popup-meaning-zh {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}

.ponpon-word-popup-meaning-en {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 16px;
}

.ponpon-word-popup-example {
    background: #f0fdf4;
    border-left: 3px solid var(--primary);
    padding: 12px;
    border-radius: 0 8px 8px 0;
}

.ponpon-word-popup-example-en {
    font-size: 14px;
    color: #374151;
    font-style: italic;
    margin-bottom: 4px;
}

.ponpon-word-popup-example-zh {
    font-size: 13px;
    color: #6b7280;
}

.ponpon-word-popup-footer {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    gap: 12px;
}

.ponpon-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;
}

.ponpon-word-popup-copy:hover {
    background: #e5e7eb;
    color: #374151;
}

.ponpon-word-popup-links {
    display: flex;
    gap: 8px;
}

.ponpon-word-link {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s;
}

.ponpon-word-link:hover {
    transform: scale(1.1);
}

.ponpon-word-link.google { background: #34a853; }
.ponpon-word-link.bing { background: #0078d4; }
.ponpon-word-link.dict { background: #f97316; }

.ponpon-word-popup-viewcard {
    margin-left: auto;
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
}

.ponpon-word-popup-viewcard:hover {
    text-decoration: underline;
}

/* Highlight clickable styles */
.ponpon-highlight {
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.ponpon-highlight:hover {
    filter: brightness(0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Category highlight colors - matching reference */
.highlight-phrase { background: #dcfce7; color: #166534; }
.highlight-phrasal_verb { background: #fce7f3; color: #9d174d; }
.highlight-collocation { background: #dbeafe; color: #1e40af; }
.highlight-proper_noun { background: #fce7f3; color: #9d174d; }
.highlight-word { background: #fef3c7; color: #92400e; }
.highlight-discourse { background: #ecfccb; color: #3f6212; }
.highlight-favorited { background: #fef08a; color: #854d0e; }

/* ========== CUSTOM VIDEO CONTROLS ========== */
.ponpon-video-wrapper {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.ponpon-video-wrapper video {
    width: 100%;
    display: block;
    cursor: pointer;
}

/* Play Overlay (large play button in center) */
.ponpon-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;
}

/* Show the SVG icon - white outline triangle */
.ponpon-video-play-overlay svg {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.ponpon-video-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.ponpon-video-play-overlay:hover svg {
    stroke-width: 2.5;
}

.ponpon-video-wrapper.playing .ponpon-video-play-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Video Controls Bar */
.ponpon-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 12px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 20;
}

.ponpon-video-wrapper.show-controls .ponpon-video-controls {
    opacity: 1;
    pointer-events: auto;
}

.ponpon-video-controls-left,
.ponpon-video-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ponpon-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;
}

.ponpon-vc-btn:hover {
    background: rgba(255,255,255,0.2);
}

.ponpon-vc-btn svg {
    width: 18px;
    height: 18px;
}

.ponpon-vc-time {
    color: #ffffff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
}

/* Volume Slider */
.ponpon-vc-volume {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
}

.ponpon-vc-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

.ponpon-vc-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Progress Bar */
.ponpon-video-progress {
    position: absolute;
    bottom: 48px;
    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;
}

.ponpon-video-wrapper.show-controls .ponpon-video-progress {
    opacity: 1;
    pointer-events: auto;
}

.ponpon-video-progress:hover {
    height: 5px;
}

.ponpon-video-progress-bar {
    height: 100%;
    background: #ef4444;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.ponpon-video-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    left: 0%;
    opacity: 0;
    transition: opacity 0.2s;
}

.ponpon-video-progress:hover .ponpon-video-progress-handle {
    opacity: 1;
}

/* Fullscreen styles */
.ponpon-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: 99999 !important;
    border-radius: 0 !important;
}

.ponpon-video-wrapper.fullscreen video {
    height: 100vh;
    object-fit: contain;
}

/* ========== VIDEO SUBTITLE OVERLAY ========== */
.ponpon-video-subtitle-overlay {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    padding: 0 16px;
}

.ponpon-video-subtitle-en,
.ponpon-video-subtitle-cn {
    display: inline-block;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 95%;
    margin: 0 auto;
}

.ponpon-video-subtitle-en {
    font-size: 15px;
    margin-bottom: 2px;
}

.ponpon-video-subtitle-cn {
    font-size: 14px;
}

.ponpon-video-subtitle-en:empty,
.ponpon-video-subtitle-cn:empty {
    display: none;
}

/* Caption mode menu */
.ponpon-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: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
}

.ponpon-caption-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ponpon-caption-option {
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.ponpon-caption-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.ponpon-caption-option.active {
    color: #10b981;
    font-weight: 600;
}

.ponpon-caption-option.active::before {
    content: '✓ ';
}

/* Caption button active state */
.ponpon-vc-btn#vc-captions.active {
    color: #10b981;
}

/* ========== SINGLE LOOP TOOLTIP ========== */
.ponpon-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;
}

.ponpon-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);
}

.ponpon-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 */
.ponpon-ctrl[data-action="single"].active {
    background: #3b82f6 !important;
    color: #fff !important;
}

/* Fullscreen subtitle adjustments */
.ponpon-video-wrapper.fullscreen .ponpon-video-subtitle-overlay {
    bottom: 60px;
}

.ponpon-video-wrapper.fullscreen .ponpon-video-subtitle-en {
    font-size: 22px;
}

.ponpon-video-wrapper.fullscreen .ponpon-video-subtitle-cn {
    font-size: 18px;
}

/* ========== FLOATING QUICK MUTE BUTTON ========== */
.ponpon-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;
}

.ponpon-video-quick-mute:hover {
    background: rgba(0,0,0,0.3) !important;
    opacity: 1;
}

.ponpon-video-quick-mute svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.ponpon-video-quick-mute.muted svg {
    color: #ef4444;
}

/* ========== KEYBOARD SHORTCUTS MODAL ========== */
.ponpon-shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ponpon-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);
}

.ponpon-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;
}

.ponpon-shortcuts-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.ponpon-shortcuts-title {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.ponpon-shortcuts-columns {
    display: flex;
    gap: 40px;
}

.ponpon-shortcuts-col {
    flex: 1;
}

.ponpon-shortcuts-section {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.ponpon-shortcut-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.ponpon-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;
}

.ponpon-shortcut-desc {
    font-size: 14px;
    color: #6b7280;
}

.ponpon-shortcuts-hint {
    text-align: center;
    margin-top: 24px;
    color: #9ca3af;
    font-size: 13px;
}

.ponpon-shortcuts-hint .ponpon-shortcut-key {
    min-width: auto;
    padding: 2px 8px;
}

@media (max-width: 600px) {
    .ponpon-shortcuts-columns {
        flex-direction: column;
        gap: 24px;
    }
    
    .ponpon-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) {
    .ponpon-player-v3 .ponpon-speed-modal,
    .ponpon-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) */
    .ponpon-speed-modal[style*="display: flex"],
    .ponpon-speed-modal[style*="display:flex"] {
        display: flex !important;
    }

    .ponpon-player-v3 .ponpon-speed-modal-overlay,
    .ponpon-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;
    }

    .ponpon-player-v3 .ponpon-speed-modal-content,
    .ponpon-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 !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;
    }

    .ponpon-player-v3 .ponpon-loop-modal,
    .ponpon-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) */
    .ponpon-loop-modal[style*="display: flex"],
    .ponpon-loop-modal[style*="display:flex"] {
        display: flex !important;
    }

    .ponpon-player-v3 .ponpon-loop-modal-overlay,
    .ponpon-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;
    }

    .ponpon-player-v3 .ponpon-loop-modal-content,
    .ponpon-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 */
    .ponpon-speed-modal-handle,
    .ponpon-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 */
    .ponpon-speed-modal-title,
    .ponpon-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 */
    .ponpon-speed-modal-content .ponpon-speed-option,
    .ponpon-loop-modal-content .ponpon-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;
    }

    .ponpon-speed-modal-content .ponpon-speed-option:last-child,
    .ponpon-loop-modal-content .ponpon-loop-option:last-child {
        border-bottom: none !important;
    }

    .ponpon-speed-modal-content .ponpon-speed-option:active,
    .ponpon-loop-modal-content .ponpon-loop-option:active {
        background: #f3f4f6 !important;
    }

    /* Radio Check Circle */
    .ponpon-speed-check,
    .ponpon-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;
    }

    .ponpon-speed-option.selected .ponpon-speed-check,
    .ponpon-loop-option.selected .ponpon-loop-check {
        border-color: #3b82f6 !important;
        background: #3b82f6 !important;
    }

    .ponpon-speed-option.selected .ponpon-speed-check::after,
    .ponpon-loop-option.selected .ponpon-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 .ponpon-player-v3 .ponpon-youtube-section,
    body .ponpon-youtube-section,
    .ponpon-youtube-section {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* YouTube wrapper - 30% of container width */
    body .ponpon-player-v3 .ponpon-youtube-section .ponpon-youtube-wrapper,
    body .ponpon-youtube-section .ponpon-youtube-wrapper,
    .ponpon-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 .ponpon-player-v3 .ponpon-youtube-section .ponpon-youtube-wrapper iframe,
    body .ponpon-youtube-section .ponpon-youtube-wrapper iframe,
    .ponpon-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 ponpon player */
body.single-ponpon_episode .et_pb_post_content,
body.single-ponpon_episode .et_pb_post_content_0_tb_body,
body.single-ponpon_episode .et_pb_section,
body.single-ponpon_episode .et_pb_row,
body.single-ponpon_episode article.ponpon_episode {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove spacing after ponpon player */
.ponpon-player-v3 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove spacing from episode nav (last element) */
.ponpon-episode-nav {
    margin-bottom: 0 !important;
    padding-bottom: 16px !important;
}

/* Remove any ::after pseudo-elements that add space */
body.single-ponpon_episode .et_pb_post_content::after,
body.single-ponpon_episode .et_pb_section::after {
    display: none !important;
    content: none !important;
}

/* ========== 字幕原文内のハイライト装飾 ========== */
/* 字幕リスト内の英語原文では下線のみを削除、背景色は維持 */
.ponpon-sub-en .ponpon-highlight,
.ponpon-sub-en .highlight-phrase,
.ponpon-sub-en .highlight-phrasal_verb,
.ponpon-sub-en .highlight-collocation,
.ponpon-sub-en .highlight-proper_noun,
.ponpon-sub-en .highlight-word,
.ponpon-sub-en .highlight-discourse,
.ponpon-sub-en .highlight-favorited {
    border-bottom: none !important;
}

/* ========== MOBILE: HIDE VIDEO OVERLAY CONTROLS ========== */
/* モバイルでは動画上のボリューム・ヘルプボタンを非表示 */
@media (max-width: 768px) {
    /* Floating quick mute button on video */
    .ponpon-video-quick-mute {
        display: none !important;
    }
    
    /* Help button (?) in video controls */
    #vc-help,
    .ponpon-video-controls #vc-help {
        display: none !important;
    }
    
    /* Mute button in video controls - モバイルでも表示 */
    #vc-mute,
    .ponpon-video-controls #vc-mute {
        display: flex !important;
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
    }
    
    #vc-mute svg,
    .ponpon-video-controls #vc-mute svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Volume slider in video controls */
    #vc-volume,
    .ponpon-vc-volume,
    .ponpon-video-controls .ponpon-vc-volume {
        display: none !important;
    }
}

/* ========== MOBILE AUDIO PLAYER MODAL ========== */
.ponpon-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;
}

.ponpon-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;
}

.ponpon-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;
}

.ponpon-audio-modal-handle {
    width: 40px !important;
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    margin: 12px auto 8px !important;
    display: block !important;
}

.ponpon-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;
}

.ponpon-audio-player-wrap {
    padding: 24px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.ponpon-audio-player-wrap audio {
    width: 100% !important;
    max-width: 400px !important;
    height: 54px !important;
    border-radius: 27px !important;
}

/* Chrome/Safari audio player styling */
.ponpon-audio-player-wrap audio::-webkit-media-controls-panel {
    background: #f3f4f6 !important;
    border-radius: 27px !important;
}

.ponpon-audio-modal-actions {
    padding: 8px 24px 24px !important;
    display: flex !important;
    justify-content: center !important;
}

.ponpon-audio-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: background 0.2s !important;
}

.ponpon-audio-download-btn:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
}

.ponpon-audio-download-btn svg {
    width: 20px !important;
    height: 20px !important;
}