:root {
    --brand-primary-color: #f0f0f0;
    --brand-blue: #4472c4;
    --brand-yellow: #ffc000;
    --brand-dark-blue: #1976D2;
    --brand-light-blue: #64B5F6;
    --text-light: #FFFFFF;
    --text-dark-overlay: rgba(0, 0, 0, 0.7);
    --highlight-yellow: #FFD700;
    --translation-text-color: #BBDEFB;
    --background-light-gray: #E3F2FD;
    --practice-success: #4CAF50;
    --practice-error: #F44336;
    --practice-warning: #FF9800;
    --role-name: #b2e38a;
	--darkreader-inline-color: #34d399; /* 标准音标高亮色，兼顾 Web 与 APK 原生环境 */
    
    /* Enhanced color system */
    --primary-300: #10b981;
    --primary-400: #10b981;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --success-500: #10b981;
    --success-600: #059669;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ── 弹窗通用 Design Token ── */
    --modal-overlay-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
    --modal-blur: blur(12px);
    --modal-card-bg: rgba(255, 255, 255, 0.05);
    --modal-card-border: rgba(255, 255, 255, 0.12);
    --modal-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    --modal-card-radius: 1.5rem;
    
    /* ── 弹窗内输入框 Token ── */
    --panel-input-bg: rgba(0, 0, 0, 0.25);
    --panel-input-border: rgba(255, 255, 255, 0.15);
    --panel-input-radius: 1rem;
    --panel-input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    
    /* ── 弹窗内主按钮 Token ── */
    --panel-btn-radius: 1rem;
    --panel-btn-hover-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
    
    /* 字号定义 */
    --font-size-xxxl: 3.5rem;
    --font-size-xxl: 2.8rem;
    --font-size-xl2: 2.2rem;
    --font-size-xl:  2.0rem;
    --font-size-lg:  1.8rem;
    --font-size-base: 1.6rem;
    --font-size-md:  1.5rem;
    --font-size-sm:  1.4rem;
    --font-size-xs:  1.2rem;

    /* ── 固定定位弹窗专用字号 Token ── */
    --dlg-font-icon:    28px;
    --dlg-font-icon-lg: 46px;
    --dlg-font-title:   19px;
    --dlg-font-body:    14.5px;
    --dlg-font-btn:     15px;
    --dlg-font-warn:    12.5px;
}

html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #000;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

/* Enhanced Loading Spinner */
.loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 1.5rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--primary-500);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 0.8rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.loading-spinner p {
    color: white;
    font-size: var(--font-size-base);
    margin: 0;
}

/* ── 登录/注册全屏蒙层 ── */
.auth-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    box-sizing: border-box;
    padding: 3rem 1rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.auth-modal-overlay.hidden {
    display: none;
}

.auth-container {
    width: 90%;
    min-height: auto;
    max-height: none;
    margin: 0 auto;
    background: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    position: relative;
}

.auth-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 3.5rem;
    margin-bottom: 3rem;
    width: 100%;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    padding-left: 1.2rem;
    margin-left: 1.2rem;
    position: relative;
    min-width: 0;
}

.auth-brand::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8%;
    height: 84%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 28%,
        rgba(255, 255, 255, 0.22) 72%,
        transparent 100%
    );
    pointer-events: none;
}

.auth-subtitle {
    font-size: var(--font-size-lg);
    font-weight: 400;
    letter-spacing: 0.35em;
    color: transparent;
    background: linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.42) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}

.auth-container::-webkit-scrollbar {
    width: 6px;
}
.auth-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.auth-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}
.auth-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.auth-logo-img {
    width: 6rem;
    height: 6rem;
    border-radius: 1.2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    -webkit-user-drag: none;
    user-select: none;
    flex-shrink: 0;
}

.auth-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1.15;
    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.3));
    white-space: nowrap;
}

.auth-info-section {
    margin-top: 2rem;
    padding-top: 0;
    width: 100%;
}

.auth-info-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.2rem;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.auth-info-title {
    color: var(--primary-300);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 0.8rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.auth-info-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: var(--font-size-md);
    color: var(--gray-300);
    line-height: 1.6;
}

.auth-info-list li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.2rem;
}

.auth-info-list li::before {
    content: '✨';
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--font-size-xs);
}

.auth-info-list li strong {
    color: var(--text-light);
}

.auth-info-footer {
    margin: 0.8rem 0 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--font-size-md);
    color: var(--gray-400);
    text-align: center;
}

.auth-toggle {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.3rem;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    gap: 0;
}

.auth-toggle-indicator {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: calc(50% - 0.3rem);
    height: calc(100% - 0.6rem);
    border-radius: 1rem;
    background: #ca8725;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
    z-index: 0;
}

.auth-toggle-indicator.on-register {
    left: calc(50%);
}

.auth-toggle-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0.7rem 1rem;
    border: none;
    background: transparent;
    color: rgba(203, 213, 225, 0.6);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    line-height: 1;
    letter-spacing: 0.04em;
}

.auth-toggle-btn.active {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.form-group {
    position: relative;
    margin-bottom: 1rem;
}

.auth-input {
    width: 100%;
    padding: 0.7rem;
    font-size: var(--font-size-base);
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.4rem;
    color: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.auth-input::placeholder {
    color: #94a3b8;
}

.auth-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.auth-input.valid {
    border-color: var(--success-500);
}

.auth-input.error {
    border-color: var(--error-500);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.field-feedback {
    color: var(--error-500);
    font-size: var(--font-size-xs);
    margin-top: 0.4rem;
    display: block;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    opacity: 0;
    position: absolute;
}

.checkmark {
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-right: 0.4rem;
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background-color: var(--primary-500);
    border-color: var(--primary-500);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 10px;
    height: 14px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-error {
    font-size: var(--font-size-base);
    text-align: center;
    color: var(--error-500);
    margin: 0.5rem 0;
    padding: 0.4rem;
    border-radius: 0.4rem;
    transition: all 0.3s ease;
}

.auth-error:empty {
    display: none;
}

.auth-error.error {
    color: var(--error-500);
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.auth-error.success {
    color: var(--success-500);
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.auth-error.warning {
    color: var(--warning-500);
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.auth-submit-btn {
    width: 100%;
    padding: 0.7rem;
    font-size: var(--font-size-xl2);
    font-weight: bold;
    color: white;
    background-color: var(--primary-500);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.4rem;
    position: relative;
    overflow: hidden;
    min-height: 5rem;
}

.auth-submit-btn:hover:not(:disabled) {
    background-color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    background-color: var(--gray-500);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-submit-btn.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.password-strength {
    font-size: var(--font-size-xs);
    margin-top: 0.4rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.2rem;
    text-align: center;
    font-weight: 500;
    transition: all 0.2s ease;
}

.password-strength.very-weak {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-500);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.password-strength.weak {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning-500);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.password-strength.fair {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning-600);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.password-strength.good {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-500);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.password-strength.strong {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-600);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.video-player-container {
    position: relative;
    width: 720px;
    height: 1280px;
    flex-shrink: 0;
    background-color: #000000; /* 由原 var(--brand-primary-color) 改为纯黑，彻底杜绝亚像素白线 */
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
}

/* 旅游观光模式：底部主页栏仅保留 2 个按钮并居中靠近 */
.role-travel-mode #bottomHomeSet {
    justify-content: center !important;
    gap: 50px !important;
}

.role-travel-mode #bottomHomeSet .bottom-bar-placeholder,
.role-travel-mode #bottomHomeSet #audioPlayerModeBtn {
    display: none !important;
}

video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000000;
    z-index: 0;
    transform-origin: center center;
    border-radius: 1rem;
    /* 强制常驻 GPU 独立硬件合成图层，消除弹卡片时的渲染跳变与纹理抗锯齿抖动 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

video.scene-loading-hidden {
    visibility: hidden;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   WeChat 风格对话气泡系统
   ══════════════════════════════════════════════════════════════ */
.text-display {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    overflow: visible;
    opacity: 1;
    transition: opacity 0.22s ease;
}

.text-display.hidden {
    display: none !important;
    transition: none;
}

.chat-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 18px;
}

.chat-row.row-left {
    flex-direction: row;
}

.chat-row.row-right {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #1e293b;
    box-shadow:
        0 0 0 2px rgba(68, 114, 196, 0.80),
        0 0 14px rgba(68, 114, 196, 0.35),
        0 6px 20px rgba(0, 0, 0, 0.55);
}

.chat-row.row-right .chat-avatar {
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.75),
        0 0 14px rgba(245, 158, 11, 0.28),
        0 6px 20px rgba(0, 0, 0, 0.55);
}

.chat-bubble-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 80px - 12px - 40px);
}

.chat-row.row-right .chat-bubble-wrapper {
    align-items: flex-end;
}

.chat-name {
    font-size: var(--font-size-sm);
    color: var(--brand-primary-color);
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1;
    display: inline-block;
    padding: 3px 12px;
    background: rgba(178, 227, 138, 0.10);
    border: 1px solid rgba(178, 227, 138, 0.28);
    border-radius: 0.55rem;
    letter-spacing: 0.04em;
}

.chat-bubble {
    position: relative;
    background: linear-gradient(145deg,
        rgba(10, 10, 26, 0.8) 0%,
        rgba(22, 16, 44, 0.8) 100%
    );
    backdrop-filter: blur(2px) saturate(1.6);
    -webkit-backdrop-filter: blur(2px) saturate(1.6);
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px 30px;
    color: var(--brand-yellow);
    font-size: var(--font-size-xxl);
    text-shadow: 2px 2px 4px var(--text-dark-overlay);
    text-align: left;
    line-height: 1.3;
    word-break: break-word;
    box-shadow:
        0 14px 50px rgba(0, 0, 0, 0.62),
        0 4px 18px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-row.row-left .chat-bubble {
    border-left: 5px solid var(--brand-blue);
    border-top-left-radius: 3px;
}

.chat-row.row-right .chat-bubble {
    border-right: 5px solid var(--warning-500);
    border-top-right-radius: 3px;
}

.chat-bubble .english-sentence-container {
    width: 100%;
    display: inline-block;
    font-weight: 700;
}

.chat-bubble .english-sentence-container span {
    margin-right: 0.25em;
}

.chat-bubble .translation {
    display: block;
    font-size: var(--font-size-xl2);
    font-weight: normal;
    color: var(--brand-light-blue);
    text-align: left;
    width: 100%;
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 213, 79, 0.20);
}

/* ═══════════════════════════════════════════════════════════════
   单词卡片（Lexicon Glass Card）
   ═══════════════════════════════════════════════════════════════ */
.word-item {
    position: absolute;
    font-size: var(--font-size-xxl);
    font-weight: bold;
    color: var(--text-light);
    background: linear-gradient(145deg,
        rgba(10, 10, 26, 0.8) 0%,
        rgba(22, 16, 44, 0.8) 100%
    );
    backdrop-filter: blur(2px) saturate(1.6);
    -webkit-backdrop-filter: blur(2px) saturate(1.6);
    border-left: 3.5px solid var(--warning-500);
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.1rem 3.8rem 1.3rem 1.7rem;
    border-radius: 1.6rem;
    box-shadow:
        0 14px 50px rgba(0, 0, 0, 0.62),
        0 4px 18px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 215px;
    max-width: min(88%, 510px);
    box-sizing: border-box;
    text-align: left;
}

.word-item .english-word {
    color: var(--warning-500) !important;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.word-item .phonetics {
    display: block;
    align-self: flex-start;
    font-size: var(--font-size-base);
    font-weight: 400;
    margin-top: 0.5rem;
    padding: 0.2rem 0.7rem;
    background: rgba(100, 165, 255, 0.14);
    border: 1px solid rgba(120, 180, 255, 0.22);
    border-radius: 0.55rem;
    color: var(--darkreader-inline-color) !important;
    white-space: nowrap;
    letter-spacing: 0.025em;
}

.word-item .translation {
    display: block;
    width: 100%;
    font-size: var(--font-size-xl2);
    font-weight: 500;
    margin-top: 0.7rem;
    padding-top: 0.62rem;
    border-top: 1px solid rgba(255, 213, 79, 0.18);
    color: var(--highlight-yellow);
    white-space: nowrap;
}

.word-item .root-info {
    display: block;
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: normal;
    margin-top: 0.62rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(160, 220, 210, 0.82);
    white-space: normal;
    word-break: break-word;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

.word-item .root-label {
    color: rgba(255, 255, 255, 0.38);
    font-size: var(--font-size-base);
    letter-spacing: 0.07em;
    font-weight: 500;
    margin-right: 0.45em;
    white-space: nowrap;
}

.highlight {
    color: var(--brand-primary-color);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.55);
}

.word-item .english-word.word-reading-highlight,
.title-card-item .title-en.word-reading-highlight {
    color: #FFFFFF;
    text-shadow:
        0 0 12px rgba(255, 220, 100, 0.85),
        2px 2px 4px rgba(0, 0, 0, 0.55);
    transition: color 0.12s ease, text-shadow 0.12s ease;
}

.word-item .word-phonetic-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: nowrap;
    align-self: flex-start;
}

.word-item .word-phonetic-row .phonetics {
    margin-top: 0 !important;
    align-self: auto;
}

.word-card-speak-btn {
    pointer-events: auto;
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.35);
    animation: wordSpeakBtnFadeIn 0.3s ease-out both;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.word-card-speak-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.word-card-speak-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}
.word-card-speak-btn:hover svg {
    transform: scale(1.05);
}
.word-card-speak-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.12);
    transition-duration: 0.1s;
}
.word-card-speak-btn.speaking {
    color: var(--highlight-yellow);
    background: rgba(255, 215, 0, 0.08);
    transform: scale(1);
    animation: integratedSpeakPulse 1.5s ease-in-out infinite;
    pointer-events: auto;
}

@keyframes wordSpeakBtnFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes integratedSpeakPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.98); }
    50%       { opacity: 1;   transform: scale(1.08); }
}

.control-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    display: flex;
    transition: opacity 0.25s ease;
}

.control-panel.practice-mode-hidden ~ .bottom-controls-bar,
.bottom-controls-bar.practice-mode-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.icon-button {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transform: scale(1);
}

.icon-button img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
    .icon-button:hover {
        transform: scale(1.1);
    }
}

.icon-button:active {
    transform: scale(1.1);
}

.icon-button--vip-locked {
    opacity: 0.38;
    filter: grayscale(0.9);
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    .icon-button--vip-locked:hover {
        transform: scale(1) !important;
    }
}
.icon-button--vip-locked:active {
    transform: scale(1) !important;
}

.float-feat-label--vip-locked {
    opacity: 0.38;
    cursor: pointer;
}
.float-feat-label--vip-locked input[type="checkbox"] {
    cursor: pointer;
}

.icon-button--ocr-checking {
    position: relative;
    pointer-events: none;
    opacity: 0.55;
}
.icon-button--ocr-checking img {
    visibility: hidden;
}
.icon-button--ocr-checking::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top: 3px solid var(--primary-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .icon-button--ocr-checking:hover {
        transform: scale(1) !important;
    }
}
.icon-button--ocr-checking:active {
    transform: scale(1) !important;
}

/* ══════════════════════════════════════════════════════════════
   底部工具栏：与顶部完全对称的8格均分布局
   ══════════════════════════════════════════════════════════════ */
.bottom-controls-bar {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 10;
    visibility: hidden;
    pointer-events: none;
    border-radius: 1rem;
}

.bottom-controls-bar.scene-mode-active,
.bottom-controls-bar.home-mode-active {
    visibility: visible;
    pointer-events: auto;
}

.bottom-bar-set {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.bottom-bar-set.hidden {
    display: none;
}

.bottom-bar-placeholder,
.top-bar-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.top-controls-bar {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1rem;
}

.indicator {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(100, 181, 246, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 5;
}

.practice-mode-indicator {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(100, 181, 246, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 20;
    animation: practiceIndicatorBlink 1.5s forwards;
}

.ellipse-indicator-handdrawn {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    box-sizing: border-box;
    transform-origin: center center;
}

.practice-mode-ellipse-handdrawn {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    box-sizing: border-box;
    transform-origin: center center;
}

@keyframes practiceIndicatorBlink {
    0%      { opacity: 1; animation-timing-function: step-end; }
    20%     { opacity: 1; animation-timing-function: ease-in-out; }
    33.33%  { opacity: 0; animation-timing-function: step-end; }
    40%     { opacity: 0; animation-timing-function: ease-in-out; }
    53.33%  { opacity: 1; animation-timing-function: step-end; }
    60%     { opacity: 1; animation-timing-function: ease-in-out; }
    73.33%  { opacity: 0; animation-timing-function: step-end; }
    80%     { opacity: 0; animation-timing-function: ease-in-out; }
    93.33%  { opacity: 0.65; animation-timing-function: step-end; }
    100%    { opacity: 0.65; }
}

.practice-mode-indicator.persistent {
    animation: practiceIndicatorPersistPulse 2.2s ease-in-out infinite;
}

@keyframes practiceIndicatorPersistPulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    box-sizing: border-box;
    background: var(--modal-overlay-bg);
    backdrop-filter: var(--modal-blur);
    -webkit-backdrop-filter: var(--modal-blur);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
}

.scene-selection-header {
    text-align: center;
    width: 100%;
    max-width: 800px;
    flex-shrink: 0;
    padding-top: 4rem;
    margin-bottom: 1rem;
}

.scene-selection-title {
    color: #FFFFFF;
    font-size: clamp(3rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--warning-500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    line-height: 1.2;
}

.scene-selection-subtitle {
    color: #CBD5E1;
    font-size: var(--font-size-md);
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
}

.modal-title {
    color: var(--text-light);
    font-size: var(--font-size-xl2);
    font-weight: bold;
    margin-bottom: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 100%;
}

.scene-list-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
    max-width: 800px;
    max-height: 800px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    padding: 1.2rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scene-list-button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    padding: 1.6rem 2.4rem;
    font-size: var(--font-size-xl);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.scene-list-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.scene-list-button:hover::before {
    left: 100%;
}

.scene-list-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.scene-list-button:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scene-list-container::-webkit-scrollbar {
    width: 8px;
}
.scene-list-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.scene-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
.scene-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.modal-button {
    background-color: var(--brand-dark-blue);
    color: var(--text-light);
    font-weight: bold;
    padding: 0.85rem 2.2rem;
    border-radius: 0.85rem;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-lg);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    margin-top: 2rem;
}

.modal-button:hover {
    background-color: var(--brand-dark-blue);
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.35);
}

.modal-button:active {
    background-color: var(--brand-light-blue);
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.modal-close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 11;
    -webkit-tap-highlight-color: transparent;
}

.modal-close-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.modal-left-button {
    position: absolute;
    top: 30px;
    left: 30px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 11;
    -webkit-tap-highlight-color: transparent;
}

.modal-left-button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.modal-left-button:active {
    transform: scale(0.92);
}

/* ══════════════════════════════════════════════════════════════
   Practice Mode 样式
   ══════════════════════════════════════════════════════════════ */
.practice-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 22;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.72));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.5rem;
    padding: 2.5rem;
    width: 92%;
    max-width: 680px;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: practiceSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes practiceSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.practice-container::-webkit-scrollbar {
    width: 6px;
}
.practice-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.practice-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.practice-word-spelling {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.practice-title {
    color: var(--text-light);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
}

.practice-translation {
    color: #e0e7ff;
    font-size: var(--font-size-lg);
    text-align: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.15));
    padding: 1.2rem 1.5rem;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(139, 92, 246, 0.2);
    line-height: 1.6;
    font-weight: 500;
}

.practice-input-container {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.practice-input {
    padding: 1rem 1.2rem;
    font-size: var(--font-size-lg);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.8rem;
    background-color: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    width: 100%;
    max-width: 400px;
    text-align: center;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.practice-input:focus {
    outline: none;
    border-color: var(--primary-500);
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25), 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.practice-input::placeholder {
    color: #94a3b8;
}

.practice-submit-btn {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--text-light);
    border: none;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    letter-spacing: 0.3px;
}

.practice-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.practice-submit-btn:active {
    transform: translateY(0);
}

.practice-submit-btn:disabled {
    background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.practice-feedback {
    font-size: var(--font-size-md);
    font-weight: 600;
    text-align: center;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
    animation: feedbackSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    line-height: 1.5;
}

@keyframes feedbackSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.practice-feedback.correct {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    color: #34d399;
    border: 2px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.practice-feedback.incorrect {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
    color: #f87171;
    border: 2px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.practice-feedback.show-answer {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
    color: #fbbf24;
    border: 2px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.practice-sentence-ordering {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.practice-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.practice-word-btn {
    padding: 0.8rem 1.2rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--text-light);
    border: none;
    border-radius: 0.7rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    letter-spacing: 0.3px;
    opacity: 1;
    transform: scale(1);
}

.practice-word-btn:hover:not(.used) {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.practice-word-btn.used {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
    cursor: not-allowed;
    opacity: 0.3;
    box-shadow: none;
    transform: scale(0.95);
}

.practice-built-sentence-display {
    width: 100%;
    min-height: 80px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 1rem;
    padding: 1.2rem 1.5rem;
    box-sizing: border-box;
    color: #ffd700;
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1.8;
    text-align: left;
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

.practice-built-sentence-display.empty::before {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

.practice-control-buttons {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.practice-undo-btn,
.practice-reset-btn {
    padding: 0.5rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.practice-undo-btn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
    color: white;
}

.practice-undo-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 1), rgba(217, 119, 6, 1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.practice-reset-btn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
    color: white;
}

.practice-reset-btn:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 1), rgba(220, 38, 38, 1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.practice-undo-btn:active,
.practice-reset-btn:active {
    transform: translateY(0);
}

.practice-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.practice-hint-btn {
    padding: 0.7rem 1.5rem;
    font-size: var(--font-size-md);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
    color: #fbbf24;
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 0.7rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.practice-hint-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.3));
    border-color: rgba(245, 158, 11, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.practice-hint-text {
    color: #cbd5e1;
    font-size: var(--font-size-md);
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
    border-radius: 0.7rem;
    border: 1px solid rgba(245, 158, 11, 0.2);
    text-align: center;
    animation: hintSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes hintSlideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.practice-hint-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    width: 100%;
}

.practice-replay-btn {
    padding: 0.7rem 1.5rem;
    font-size: var(--font-size-md);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    color: #93c5fd;
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 0.7rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.practice-replay-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.35));
    border-color: rgba(59, 130, 246, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.practice-replay-btn:active {
    transform: translateY(0);
}

.practice-replay-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.practice-hint-btn.urgent {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.35));
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
    animation: practiceHintPulse 1.8s ease-in-out infinite;
}

@keyframes practiceHintPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }
    50%       { box-shadow: 0 0 18px rgba(245, 158, 11, 0.5); }
}

.practice-hint-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    animation: none;
}

.practice-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2rem;
    margin-bottom: 0.2rem;
    gap: 0.5rem;
}

.practice-exit-btn {
    flex-shrink: 0;
    padding: 0.3rem 0.8rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.practice-exit-btn:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}
.practice-exit-btn:active {
    transform: scale(0.95);
}

.practice-global-progress {
    flex-shrink: 0;
    padding: 0.2rem 0.65rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.3px;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.practice-global-progress:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.55);
    color: #93c5fd;
}
.practice-global-progress:active {
    transform: scale(0.94);
    background: rgba(59, 130, 246, 0.3);
}

.practice-session-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 1rem 0;
    animation: practiceCompleteIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes practiceCompleteIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.practice-complete-stars {
    font-size: 3.6rem;
    letter-spacing: 0.3rem;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.5));
}

.practice-complete-msg {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #e0e7ff;
    text-align: center;
    line-height: 1.5;
}

.practice-complete-stat {
    font-size: var(--font-size-sm);
    color: #94a3b8;
    text-align: center;
}

.scene-list-item-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.cache-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.cache-status-indicator.red {
    background-color: #ef4444;
}

.cache-status-indicator.yellow {
    background-color: var(--warning-500);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cache-status-indicator.green {
    background-color: #22c55e;
}

.scene-list-item-container .scene-list-button {
    flex-grow: 1;
    text-align: left;
    margin-bottom: 0;
}

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

.character-portrait {
    position: absolute;
    bottom: 0%;
    height: 100%;
    width: auto;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    
    filter: 
        drop-shadow( 0px  3px 0 #F5F5F5)
        drop-shadow( 0px -3px 0 #F5F5F5)
        drop-shadow( 3px  0px 0 #F5F5F5)
        drop-shadow(-3px  0px 0 #F5F5F5)
        drop-shadow( 2px  2px 0 #F5F5F5)
        drop-shadow( 2px -2px 0 #F5F5F5)
        drop-shadow(-2px  2px 0 #F5F5F5)
        drop-shadow(-2px -2px 0 #F5F5F5);
}
#character-portrait-left {
    left: -5%;
}

#character-portrait-right {
    right: -10%;
}

#character-portrait-center {
    left: 50%;
    transform: translateX(-50%);
}

.character-portrait.visible {
    opacity: 1;
}

.hidden {
    display: none !important;
}

.scene-list-button.scene-locked {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.4), rgba(51, 65, 85, 0.4));
    border-color: rgba(100, 116, 139, 0.5);
    color: #94a3b8;
    cursor: not-allowed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scene-list-button.scene-locked:hover {
    transform: none;
    box-shadow: none;
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.5), rgba(51, 65, 85, 0.5));
}

.scene-list-button .scene-text {
    opacity: 0.9;
    flex-grow: 1;
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
}

.scene-list-button.scene-locked .scene-text {
    opacity: 0.7;
}

.lock-icon {
    font-size: var(--font-size-xl);
    opacity: 0.8;
}

.practice-progress-container {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0; 
}

.progress-indicator {
    width: 28px;
    height: 28px;
    transition: fill 0.3s ease, transform 0.3s ease;
}

.progress-indicator.hollow path,
.progress-indicator:not([class*="full"]):not([class*="half"]) path {
    fill: none;
    stroke: var(--gray-600);
    stroke-width: 1.5px;
}

.progress-indicator.full.green path {
    fill: var(--success-500);
    filter: drop-shadow(0 0 4px var(--success-500));
}

.progress-indicator.full.yellow path {
    fill: var(--warning-500);
    filter: drop-shadow(0 0 4px var(--warning-500));
}

.progress-indicator.full.red path {
    fill: var(--error-500);
    filter: drop-shadow(0 0 4px var(--error-500));
}

.input-with-button .profile-input,
.input-with-button .auth-input {
    flex-grow: 1;
}

.scan-btn {
    padding: 0.7rem 1.2rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    background-color: var(--success-500);
    color: white;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.scan-btn:hover {
    background-color: var(--gray-500);
}

#referralQRCode {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    width: 320px;
    height: 320px;
    background-color: white;
    padding: 10px;
    border-radius: 0.8rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

#referralQRCode canvas,
#referralQRCode img {
    display: block;
    border-radius: 0.4rem;
    width: 300px;
    height: 300px;
    margin: 0;
}

#profileMyReferrals a {
    color: var(--primary-500);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 700;
}

#profileMyReferrals a:hover {
    color: var(--primary-600);
}

.referral-list-container {
    background-color: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.referral-list-content {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
    padding-right: 1rem;
    flex: 1;
    min-height: 0;
}

.referral-list-content::-webkit-scrollbar {
    width: 8px;
}
.referral-list-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.referral-list-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.referral-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.2rem 1.5rem;
    border-radius: 0.8rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.referral-list-item:last-child {
    margin-bottom: 0;
}

.referral-list-item .username {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.camera-scanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#cameraScannerContainer {
    position: relative;
    width: 90vw;
    max-width: 400px;
    background-color: #111;
    border: 2px solid var(--gray-700);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.camera-scanner-header {
    padding: 1rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

.camera-scanner-header h3 {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.camera-scanner-header p {
    margin: 0;
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.camera-scanner-overlay-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px solid #00ff00;
    border-radius: 8px;
    pointer-events: none;
    z-index: 10;
}

.camera-scanner-overlay-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 20px solid rgba(0, 0, 0, 0.5);
    border-radius: 16px;
}

#cameraScannerVideo {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.camera-scanner-feedback {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: var(--font-size-xs);
    z-index: 11;
}

.camera-scanner-controls {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
}

.camera-scanner-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.camera-scanner-btn:first-child {
    background-color: var(--primary-500);
    color: white;
}

.camera-scanner-btn:first-child:hover {
    background-color: var(--primary-600);
}

.camera-scanner-close-text-btn {
    background-color: var(--gray-600);
    color: white;
}

.camera-scanner-close-text-btn:hover {
    background-color: var(--gray-500);
}

.field-feedback:empty,
.password-strength:empty {
    display: none;
}

#videoPlayer.video-blurred {
    filter: blur(3px) brightness(0.85);
    transition: filter 0.5s ease-in-out;
}

/* ═════════════════════════════════════════════════
   个人中心面板 (Profile Panel)
   ═════════════════════════════════════════════════ */
.profile-nav {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.profile-nav::-webkit-scrollbar {
    display: none;
}

.profile-nav-btn {
    flex: 1;
    min-width: max-content;
    padding: 1.5rem 1rem;
    color: #94A3B8;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.profile-nav-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.05);
}

.profile-nav-btn.active {
    color: #FFD700;
    border-bottom-color: #FFD700;
    background: rgba(255, 215, 0, 0.08);
}

.profile-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    max-height: none !important; 
}

.profile-content-area::-webkit-scrollbar {
    width: 6px;
}
.profile-content-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.ptab-content {
    display: none;
    animation: ptabFadeIn 0.3s ease both;
}

.ptab-content.active {
    display: block;
}

@keyframes ptabFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.25s;
}

.section-box:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.section-box h4 {
    color: #93C5FD;
    font-size: var(--font-size-lg);
    margin: 0 0 1.2rem 0;
    font-weight: 700;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    letter-spacing: 0.02em;
}

.section-box.disabled-state {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.8);
    transition: all 0.3s ease;
}

.section-box.disabled-state .search-cb-label:has(input:disabled) {
    opacity: 1; 
}

.section-box.disabled-state .float-feat-label--vip-locked {
    opacity: 1;
}

.profile-details-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-detail-item--block {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.profile-detail-item--block .profile-detail-label {
    min-width: unset;
}
.profile-detail-item--block .profile-detail-value {
    text-align: left;
    width: 100%;
}

.profile-detail-label {
    color: #CBD5E1;
    font-size: var(--font-size-base);
    font-weight: 500;
    min-width: 6.5em;
    flex-shrink: 0;
}

.profile-detail-value {
    color: #FFFFFF;
    font-weight: 700;
    font-size: var(--font-size-base);
    text-align: right;
}

.status-valid   { color: var(--success-500); }
.status-trial   { color: var(--warning-500); }
.status-expired { color: var(--error-500);   }
.status-invalid { color: var(--gray-400);    }

.profile-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 1.2rem 1.5rem;
    border-radius: 1rem;
    font-size: var(--font-size-base);
    transition: all 0.2s;
    box-sizing: border-box;
}

.profile-input::placeholder {
    color: rgba(203, 213, 225, 0.45);
}

.profile-input:focus {
    border-color: var(--primary-500);
    outline: none;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.profile-input[readonly] {
    color: #CBD5E1;
    background: rgba(255, 255, 255, 0.03);
}

#ptab-security .form-group label {
    display: block;
    color: #CBD5E1;
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.profile-submit-btn {
    background: var(--brand-dark-blue);
    color: white;
    border: none;
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.profile-submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.profile-submit-btn.w-full {
    width: 100%;
    margin-top: 1rem;
}

.profile-outline-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.5);
    padding: 1.2rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    display: block;
}

.profile-outline-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.8);
    color: #FFFFFF;
}

.logout-section {
    margin-top: 1rem;
}

.logout-button {
    width: 100%;
    background: rgba(239, 68, 68, 0.1);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 1.4rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.logout-button:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.referral-intro {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 1.5rem;
    padding: 1.8rem;
    color: #A7F3D0;
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.referral-intro strong {
    color: #FFFFFF;
    font-size: var(--font-size-base);
}

.copy-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #FFFFFF;
}

.input-with-button {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.qr-container-box {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 1.5rem;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.qr-container-box canvas,
.qr-container-box img {
    display: block;
    border-radius: 0.5rem;
    width: 250px;
    height: 250px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-entry {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.history-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.history-emoji {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    line-height: 1.4;
    padding-top: 0.05rem;
}

.history-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.history-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.history-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #E2E8F0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.history-detail {
    font-size: var(--font-size-md);
    color: #909eb3;
    line-height: 1.5;
    word-break: break-all;
    width: 100%;
}

.history-date {
    font-size: var(--font-size-sm);
    color: #909eb3;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.6;
}

.profile-field-label {
    color: #94A3B8;
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 0.8rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-hint {
    color: #b6c2d3;
    font-size: var(--font-size-base);
    margin: -0.8rem 0 1.5rem 0;
    line-height: 1.6;
}

.referral-count-value {
    color: #34D399;
    font-size: var(--font-size-base);
}

/* ================================================= */
/* === Version Info 弹窗 (About Card) === */
/* ================================================= */
.version-info-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background: var(--modal-overlay-bg);
    backdrop-filter: var(--modal-blur);
    -webkit-backdrop-filter: var(--modal-blur);
    z-index: 40;
}

.version-info-backdrop.hidden {
    display: none;
}

.version-info-card {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-radius: 2rem;
    padding: 5rem 3.2rem 3rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 88%;
    max-width: 620px;
    max-height: 92%;
    overflow-y: auto;
    text-align: center;
    animation: versionCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes versionCardIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.version-info-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
    text-align: left;
}

.version-info-logo-wrap {
    flex: 0 0 auto;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
}

.version-info-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 50%;
}

.version-info-meta {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.version-info-title-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.version-info-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 1px;
}

#versionDisplay {
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    margin: 0;
}

.version-info-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.6), transparent);
    border-radius: 2px;
    margin: 0.4rem 0;
}

.version-info-line {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
}

.version-info-line.muted {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: #CBD5E1;
}

.version-info-section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 215, 0, 0.30) 25%,
        rgba(255, 215, 0, 0.30) 75%,
        transparent 100%
    );
    margin: 2rem 0;
    flex-shrink: 0;
}

.version-info-wt-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.version-info-wt-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #e2e8f0;
    text-align: center;
    line-height: 1.55;
    margin: 0;
    letter-spacing: 0.01em;
}

.version-info-wt-img-wrap {
    width: 80%;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    line-height: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.version-info-wt-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 1rem;
}

/* ===== Image Slideshow Player ===== */
#imageSlideshowContainer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000000; /* 由原 #f0f0f0 改为纯黑，防止图片边缘漏白 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

#imageSlideshowContainer.hidden {
    display: none;
}

#slideshowImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    flex-shrink: 0;
    z-index: 0;
    /* 保持与视频一致的高清硬件加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#imageSlideshowContainer.video-blurred #slideshowImage {
    filter: blur(3px) brightness(0.85);
    transition: filter 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Scene Completed 结束特效覆盖层
   ═══════════════════════════════════════════════════════════════ */
.scene-completion-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(8, 8, 22, 0.92) 0%,
        rgba(18, 12, 36, 0.92) 100%
    );
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-completion-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.completion-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 3.5rem 2.8rem;
    background: linear-gradient(145deg,
        rgba(10, 10, 26, 0.80) 0%,
        rgba(22, 16, 44, 0.80) 100%
    );
    backdrop-filter: blur(2px) saturate(1.6);
    -webkit-backdrop-filter: blur(2px) saturate(1.6);
    border-top:    2px solid rgba(255, 213, 79, 0.75);
    border-right:  2px solid rgba(255, 213, 79, 0.45);
    border-bottom: 2px solid rgba(255, 213, 79, 0.45);
    border-left:   2px solid rgba(255, 213, 79, 0.75);
    border-radius: 2rem;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.70),
        0 6px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 30px rgba(255, 213, 79, 0.05);
    min-width: 280px;
    max-width: min(80%, 480px);
    box-sizing: border-box;
    transform: scale(0.82) translateY(24px);
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity   0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scene-completion-overlay.show .completion-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.completion-icon {
    font-size: 5.5rem;
    line-height: 1;
    margin-bottom: 1.2rem;
    filter:
        drop-shadow(0 0 18px rgba(255, 213, 79, 0.55))
        drop-shadow(0 0 40px rgba(255, 180, 30, 0.25));
    animation: completionIconFloat 3.2s ease-in-out infinite;
}

.completion-text {
    font-size: var(--font-size-xl);
    font-weight: 800;
    margin: 0 0 0.5rem;
    width: 100%;
    text-align: center;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #FFD700 0%, #FFC040 55%, #FFB020 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(255, 165, 0, 0.35));
}

.completion-scene-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--brand-light-blue);
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
    opacity: 0.88;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
    text-align: center;
    width: 100%;
}

.completion-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 213, 79, 0.22);
    margin: 1.4rem 0 1.2rem;
}

.completion-badge {
    font-size: var(--font-size-xs);
    color: #FFD700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.12);
    padding: 0.3rem 1.1rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 215, 0, 0.30);
    text-align: center;
}

@keyframes completionIconFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    45%       { transform: translateY(-9px) scale(1.04); }
    55%       { transform: translateY(-9px) scale(1.04); }
}

.scene-transition-fade-in {
    animation: sceneFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sceneFadeIn {
    0% { opacity: 0; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* 付费套餐卡片 */
.plan-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 2rem;
}

.plan-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.2rem;
    padding: 1.6rem 1rem 1.4rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.plan-card:hover {
    border-color: rgba(148, 163, 184, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.plan-card-highlight {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,165,0,0.05), rgba(30,41,59,0.6));
    box-shadow: 0 0 0 1px rgba(255,215,0,0.15), 0 4px 20px rgba(255,165,0,0.15);
}

.plan-card-highlight:hover {
    border-color: rgba(255, 215, 0, 0.75);
    box-shadow: 0 8px 30px rgba(255, 165, 0, 0.25);
    transform: translateY(-4px);
}

.plan-badge {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #FFD700, #FFA500);
    color: #7C2D12;
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding: 0.2rem 0.9rem;
    border-radius: 2rem;
    white-space: nowrap;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(255,165,0,0.4);
}

.plan-label {
    color: #CBD5E1;
    font-size: var(--font-size-lg);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.plan-price {
    color: var(--primary-300);
    font-size: var(--font-size-xxl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.plan-card-highlight .plan-price {
    color: #FFD700;
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.45);
}

.plan-desc {
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    margin-top: 0.4rem;
}

.member-active-info .member-status-badge {
    display: inline-block;
    background: rgba(34,197,94,0.12);
    color: var(--success-500);
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 0.8rem;
    padding: 0.4rem 1.2rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ── 首页引导层（优化返回主页时的响应速度） ── */
.home-guide {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    /* 
       ★ 参数调整说明：
       原为 0.9s ease 0.6s（有 0.6s 黑屏延迟）。
       现改为 0.25s 极速平滑淡入（无任何延迟），可根据喜好把 0.25s 调得更快（如 0.15s）或更慢。
    */
    animation: hgReveal 0.25s ease-out forwards;
}

@keyframes hgReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.home-guide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.home-guide-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.02); 
}

.home-guide-svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    opacity: 1;
}

#brandWatermark path {
    opacity: 0.5;
}

#brandWatermark svg rect {
    pointer-events: none;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

#brandWatermark svg text {
    pointer-events: none;
}

.guide-group {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.guide-group.hidden-group {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

/* 支付弹窗样式 */
#paymentQrModal .pqm-card {
    background: linear-gradient(145deg, #1e2d45 0%, #1a2332 60%, #111827 100%);
    border-radius: 2rem;
    padding: 0;
    max-width: 500px;
    width: 92%;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
    position: relative;
}

#paymentQrModal .pqm-header {
    padding: 1.6rem 2rem 1.4rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(99,102,241,0.1));
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

#paymentQrModal .pqm-header-icon {
    font-size: var(--font-size-lg);
}

#paymentQrModal .pqm-header-title {
    color: #E2E8F0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    flex: 1;
}

#paymentQrModal .pqm-close-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #94A3B8;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all 0.2s;
    flex-shrink: 0;
}

#paymentQrModal .pqm-close-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #FFFFFF;
}

#paymentQrModal .pqm-body {
    padding: 1.8rem 2rem;
    text-align: center;
}

#paymentQrModal .pqm-plan-name {
    color: #CBD5E1;
    font-size: var(--font-size-lg);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

#paymentQrModal .pqm-price {
    font-size: var(--font-size-xxxl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.6rem;
}

#paymentQrModal .pqm-qr-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto 1.4rem;
    background: #FFFFFF;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

#paymentQrModal .pqm-status {
    color: #94A3B8;
    font-size: var(--font-size-base);
    margin-bottom: 0.6rem;
}

#paymentQrModal .pqm-hint {
    color: rgba(148,163,184,0.6);
    font-size: var(--font-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

#paymentQrModal .pqm-poll-dots {
    display: inline-flex;
    gap: 4px;
}

#paymentQrModal .pqm-poll-dots span {
    width: 6px;
    height: 6px;
    background: var(--primary-400);
    border-radius: 50%;
    animation: pqmPulse 1.2s ease-in-out infinite;
}

#paymentQrModal .pqm-poll-dots span:nth-child(2) { animation-delay: 0.2s; }
#paymentQrModal .pqm-poll-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pqmPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40%            { opacity: 1;   transform: scale(1); }
}

/* ============================================================
   Global Search Modal
   ============================================================ */
.global-search-input-container {
    width: 100%;
    max-width: 640px;
    margin: 0.8rem auto 0.4rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.global-search-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 1rem;
    padding: 0.85rem 1.4rem;
    color: white;
    font-size: var(--font-size-lg);
    outline: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.global-search-input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.global-search-input:focus {
    border-color: rgba(99, 179, 237, 0.7);
    background: rgba(255, 255, 255, 0.14);
}

.global-search-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.global-search-input-wrapper .global-search-input {
    padding-right: 3.8rem;
}

.global-search-input-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

.global-search-input-row .global-search-input-wrapper {
    flex: 1;
    min-width: 0;
    width: auto;
}

.search-settings-toggle-btn {
    flex-shrink: 0;
    padding: 1rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    color: #94a3b8;
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    min-width: 3.8rem;
    text-align: center;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.search-settings-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.28);
}

.search-settings-toggle-btn.active {
    background: rgba(99, 102, 241, 0.28);
    border-color: rgba(99, 102, 241, 0.55);
    color: #e0e7ff;
}

.search-settings-toggle-btn:active {
    background: rgba(99, 102, 241, 0.18);
}

.global-search-clear-btn {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.global-search-clear-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.global-search-input-wrapper .global-search-input:not(:placeholder-shown) + .global-search-clear-btn,
.global-search-clear-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.global-search-clear-btn:hover {
    background: transparent;
    color: #FCA5A5;
}

.global-search-clear-btn:hover svg {
    transform: scale(1.15);
}

.global-search-clear-btn:active {
    background: rgba(239, 68, 68, 0.25);
    color: #FCA5A5;
}

.global-search-clear-btn:active svg {
    transform: scale(0.85);
}

.global-search-status {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.48);
    margin-top: 0.4rem;
    padding-left: 0.3rem;
}

.global-search-result-item {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.9rem;
    padding: 0.85rem 1.2rem;
    margin-bottom: 0.55rem;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.14s ease, border-color 0.16s ease;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.global-search-result-item:hover,
.global-search-result-item:focus {
    background: rgba(99, 179, 237, 0.2);
    border-color: rgba(99, 179, 237, 0.35);
    transform: translateY(-1px);
    outline: none;
}

.global-search-result-item:active {
    transform: translateY(0);
}

.global-search-result-item.is-editing,
.global-search-result-item:has(.word-inline-edit-area) {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    transform: none !important;
    cursor: default;
}

.global-search-result-word {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--warning-500) !important; /* 统一单词颜色 */
    word-break: break-word;
}

.global-search-result-phonetic {
    font-size: var(--font-size-base);
    color: var(--darkreader-inline-color) !important; /* 统一音标颜色 */
}

.global-search-result-translation {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.72);
}

.global-search-result-scene {
    font-size: var(--font-size-base);
    color: rgba(99, 179, 237, 0.82);
    margin-top: 0.12rem;
}

.global-search-no-results {
    color: rgba(255, 255, 255, 0.48);
    font-size: var(--font-size-base);
    text-align: center;
    padding: 1rem 0;
}

.global-search-hint {
    color: rgba(255, 255, 255, 0.42);
    font-size: var(--font-size-base);
    text-align: center;
    padding: 1rem 0 0.5rem;
}

mark.search-highlight {
    background: transparent;
    color: #FBBF24;
    font-weight: 700;
}

.search-action-btns-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    width: 100%;
}

.search-action-btn-wrap {
    flex: 1;
    max-width: calc(50% - 0.6rem);
    display: flex;
    justify-content: center;
}

.search-action-btn {
    flex-shrink: 0;
    width: 100%;
    min-height: calc(1rem + 1.6rem + 1rem);
    padding: 0.35rem 1rem;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 1rem;
    color: white;
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.14s ease, background-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.search-action-btn:active {
    transform: scale(0.96);
    filter: brightness(0.85);
}

.search-action-btn.searching {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
    filter: brightness(0.7);
}

.search-translate-result-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.search-translate-result-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-translate-result-text {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    word-break: break-word;
}

.search-translate-result-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.2rem 0;
}

.search-translate-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.6rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-base);
}

.search-translate-loading-spinner {
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: spin-translate 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-translate {
    to { transform: rotate(360deg); }
}

.fav-tab-bar {
    flex-shrink: 0;
}

.fav-tab-btn {
    flex: 1;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
	border-color: var(--practice-warning);
    border-radius: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.fav-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.fav-tab-btn--active {
    background: var(--practice-warning) !important;
	border-color: var(--practice-warning);
    color: #fff !important;
}

.trans-edit-area {
    width: 100%;
    min-height: 4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(99, 179, 237, 0.4);
    border-radius: 0.6rem;
    color: #e2e8f0;
    font-size: var(--font-size-base);
    line-height: 1.6;
    padding: 0.6rem 0.8rem;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    margin-top: 0.4rem;
}

.trans-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}

.trans-edit-save-btn {
    background: var(--practice-success, #22c55e);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.trans-edit-save-btn:hover { opacity: 0.85; }

.trans-edit-cancel-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-sm);
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.trans-edit-cancel-btn:hover { opacity: 0.8; }

.word-inline-edit-area input.trans-edit-area {
    min-height: unset;
    height: 2.6rem;
    resize: none;
}

.sentence-fav-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-sizing: border-box;
}

.sentence-fav-card.is-history,
.search-translate-result-card.is-history {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

/* ================================================= */
/* === Accordion Category List === */
/* ================================================= */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
    max-width: 900px;
    padding: 1rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
    min-height: 0;
}

.accordion-container::-webkit-scrollbar { width: 8px; }
.accordion-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.accordion-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }

.accordion-item {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.2rem;
    overflow: hidden;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.14);
}

.accordion-item.expanded {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.accordion-category-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent; 
    border-radius: 0.8rem;
}

.accordion-category-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: transparent !important;
}

.accordion-category-item.expanded {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    user-select: none;
}

.accordion-header-icon {
    font-size: var(--font-size-xxl);
    margin-right: 1.5rem;
    width: 45px;
    text-align: center;
}

.accordion-header-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.accordion-header-title {
    color: var(--warning-500);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.accordion-header-subtitle {
    color: #94A3B8;
    font-size: var(--font-size-sm);
}

.accordion-stats {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    color: #93C5FD;
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.accordion-toggle-icon {
    font-size: var(--font-size-md);
    color: #94A3B8;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.expanded .accordion-toggle-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.2);
    will-change: max-height;
}

.accordion-content-inner {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.search-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.search-cb-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #CBD5E1;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color 0.2s;
}

.search-cb-label:hover {
    color: #FFFFFF;
}

.search-cb-label input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.search-mode-radio-label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--font-size-base);
    color: #94a3b8;
    cursor: pointer;
    padding: 0.3rem 0.9rem;
    border-radius: 2rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}

.search-mode-radio-label:hover {
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
}

.search-mode-radio-label input[type="radio"] {
    width: 1.3rem;
    height: 1.3rem;
    cursor: pointer;
}

.search-mode-radio-label:has(input:checked) {
    background: rgba(99, 179, 237, 0.12);
    border-color: rgba(99, 179, 237, 0.4);
    color: #93c5fd;
}

.search-cb-label:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}
.search-cb-label input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.search-mode-radio-label:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}
.search-mode-radio-label:has(input:disabled):hover {
    background: rgba(255,255,255,0.03);
    color: #94a3b8;
}

.search-loading-spinner {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid rgba(99, 179, 237, 0.3);
    border-top-color: #63B3ED;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.global-search-result-root {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.4rem;
    line-height: 1.5;
    background: rgba(16, 185, 129, 0.08);
    padding: 0.5rem 0.8rem;
    border-radius: 0.6rem;
    border-left: 3px solid var(--success-500);
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   Audio Player Mode（磨耳朵模式）
   ═══════════════════════════════════════════════════════════════════ */
.apm-content-area {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 4.5rem;
    box-sizing: border-box;
}

.apm-player-card {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: border-color 0.25s;
}

.apm-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 1.4rem 0.8rem;
    flex-shrink: 0;
}
.apm-header-icon {
    font-size: var(--font-size-lg);
}
.apm-header-title {
    flex: 1;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--warning-500);
    letter-spacing: 0.02em;
}

.apm-switch-video-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    font-size: var(--font-size-xl);
    line-height: 1;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.apm-switch-video-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

.apm-player-area {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 0.6rem 1.6rem 1rem;
    flex-shrink: 0;
}

.apm-art-wrap {
    position: relative;
    flex-shrink: 0;
    width: 7rem;
    height: 7rem;
}
.apm-art-img {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.12);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.apm-art-spin-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-500);
    border-right-color: #60a5fa;
    opacity: 0;
    transition: opacity 0.35s;
    z-index: 2;
}
.apm-art-spin-ring.spinning {
    opacity: 1;
    animation: apm-spin 1.4s linear infinite;
}
@keyframes apm-spin {
    to { transform: rotate(360deg); }
}

.apm-art-img.apm-art-active {
    animation: apm-art-pulse 2.8s ease-in-out infinite;
}
@keyframes apm-art-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 0 rgba(59,130,246,0); }
    50%       { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 6px rgba(59,130,246,0.18); }
}

.apm-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.apm-track-en {
    font-size: var(--font-size-xl2);
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.5rem;
    line-height: 2.5rem;
    display: block;
}
.apm-track-phonetics {
    font-size: var(--font-size-lg);
    color: var(--darkreader-inline-color) !important;
    font-style: italic;
    height: 1.8rem;
    line-height: 1.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.apm-track-zh {
    font-size: var(--font-size-lg);
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2rem;
    line-height: 2rem;
    display: block;
}
.apm-track-scene {
    font-size: var(--font-size-base);
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.6rem;
    line-height: 1.6rem;
    display: block;
    margin-top: 1rem;
}
.apm-track-count {
    font-size: var(--font-size-xs);
    color: #475569;
    line-height: 1.5rem;
    display: block;
}

.apm-progress-bar-wrap {
    margin: 0 1.6rem 0.4rem;
    height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
}
.apm-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-500), #60a5fa);
    border-radius: 2px;
    transition: width 0.6s linear;
}
.apm-progress-bar-fill.apm-progress-active {
    animation: apm-progress-indeterminate 2.2s ease-in-out infinite;
}
@keyframes apm-progress-indeterminate {
    0%   { width: 0%;   margin-left: 0%; }
    50%  { width: 60%;  margin-left: 20%; }
    100% { width: 0%;   margin-left: 100%; }
}

.apm-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.2rem 0.8rem 1.4rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.apm-ctrl-icon {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    font-size: var(--font-size-lg);
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}
.apm-ctrl-icon:active { transform: scale(0.91); }
.apm-ctrl-icon:hover  { background: rgba(255,255,255,0.13); color: #fff; }

.apm-ctrl-play {
    background: linear-gradient(135deg, var(--primary-500) 0%, #60a5fa 100%);
    border: none;
    color: #fff;
    font-size: var(--font-size-xxl);
    width: 6.8rem;
    height: 6.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 22px rgba(59, 130, 246, 0.45), 0 1px 0 rgba(255,255,255,0.2) inset;
    transition: transform 0.15s, box-shadow 0.2s, background 0.25s;
    padding-left: 0.3rem;
}
.apm-ctrl-play:active { transform: scale(0.91); }
.apm-ctrl-play:hover  { box-shadow: 0 6px 32px rgba(59, 130, 246, 0.6); }
.apm-ctrl-play.apm-playing {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    padding-left: 0;
}

.apm-ctrl-mode {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    font-size: var(--font-size-xl);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    flex-shrink: 0;
    user-select: none;
}
.apm-ctrl-mode:active { transform: scale(0.91); }
.apm-ctrl-mode:hover  { background: rgba(255,255,255,0.13); color: #fff; }

.apm-settings-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: border-color 0.25s;
}

.apm-source-picker-card {
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: border-color 0.25s;
}

.apm-source-picker-card-header {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.6rem 1.0rem;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--warning-500);
    letter-spacing: 0.02em;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    text-align: left;
    border-radius: 1.5rem;
    transition: background 0.18s, border-radius 0.2s;
    box-sizing: border-box;
}
.apm-source-picker-card-header:hover {
    background: rgba(255,255,255,0.05);
}
.apm-source-picker-card-header[aria-expanded="true"] {
    border-radius: 1.5rem 1.5rem 0 0;
}

.apm-source-picker-scroll {
    overflow-y: auto;
    max-height: 28rem;
    padding: 0.8rem 1rem 1rem;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.apm-source-picker-scroll::-webkit-scrollbar { width: 4px; }
.apm-source-picker-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.apm-settings-card-header {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.6rem 1.0rem;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--warning-500);
    letter-spacing: 0.02em;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    text-align: left;
    border-radius: 1.5rem;
    transition: background 0.18s, border-radius 0.2s;
    box-sizing: border-box;
}
.apm-settings-card-header:hover {
    background: rgba(255,255,255,0.05);
}
.apm-settings-card-header[aria-expanded="true"] {
    border-radius: 1.5rem 1.5rem 0 0;
}

.apm-settings-chevron {
    font-size: var(--font-size-sm);
    color: #64748b;
    transition: transform 0.25s ease;
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
}
.apm-settings-chevron.apm-chevron-open {
    transform: rotate(180deg);
}

.apm-settings-scroll {
    flex-shrink: 0;
    max-height: 32rem;
    overflow-y: auto;
    padding: 1.2rem 1.6rem 1.8rem;
    -webkit-overflow-scrolling: touch;
}
.apm-settings-scroll::-webkit-scrollbar { width: 4px; }
.apm-settings-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.apm-grp {
    margin-bottom: 1.5rem;
}
.apm-grp-lbl {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #93C5FD;
    margin-bottom: 0.7rem;
    letter-spacing: 0.02em;
}

.apm-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: nowrap;
}
.apm-row.apm-wrap { flex-wrap: wrap; }

.apm-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-base);
    color: #cbd5e1;
    cursor: pointer;
    padding: 0.4rem 0.85rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.apm-opt:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); }
.apm-opt input[type="radio"],
.apm-opt input[type="checkbox"] {
    width: 1.45rem;
    height: 1.45rem;
    cursor: pointer;
    flex-shrink: 0;
}

.apm-action-row {
    margin-top: 0.4rem;
}
.apm-btn-start {
    width: 100%;
    border: none;
    border-radius: 1rem;
    padding: 1.1rem 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
    background: linear-gradient(135deg, var(--primary-500) 0%, #60a5fa 100%);
    color: #fff;
    box-shadow: 0 3px 14px rgba(59, 130, 246, 0.4);
}
.apm-btn-start:active { transform: scale(0.97); }
.apm-btn-start:hover  { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.55); }
.apm-btn-start:disabled { opacity: 0.48; cursor: not-allowed; }

.apm-btn-resume {
    width: 100%;
    border: 1px dashed rgba(59, 130, 246, 0.5);
    border-radius: 1rem;
    padding: 0.9rem 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.08);
    cursor: pointer;
    margin-bottom: 0.9rem;
    transition: background 0.2s, color 0.2s;
}
.apm-btn-resume:hover { background: rgba(59, 130, 246, 0.18); color: #bfdbfe; }
.apm-btn-resume:disabled { opacity: 0.5; cursor: not-allowed; }

.apm-picker-wrap {
    margin-top: 0.7rem;
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 0.9rem;
    background: rgba(0,0,0,0.22);
    padding: 0.4rem 0;
}
.apm-picker-wrap::-webkit-scrollbar { width: 4px; }
.apm-picker-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.apm-picker-group { padding: 0.4rem 0; }
.apm-picker-hdr {
    padding: 0.35rem 1rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #93C5FD;
    letter-spacing: 0.03em;
    background: rgba(255,255,255,0.03);
}
.apm-picker-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    font-size: var(--font-size-base);
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.12s;
}
.apm-picker-item:hover { background: rgba(255,255,255,0.07); }
.apm-picker-item input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    cursor: pointer;
}

.apm-toast {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 41, 59, 0.96);
    color: #f1f5f9;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1rem;
    padding: 0.9rem 1.8rem;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    z-index: 200;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    animation: apm-toast-in 0.25s ease;
    pointer-events: none;
}
@keyframes apm-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.apm-source-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
    animation: apm-fade-in 0.18s ease;
}
@keyframes apm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.apm-source-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    background: #1a2540;
    border-radius: 1.4rem 1.4rem 0 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
    animation: apm-sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80%;
    display: flex;
    flex-direction: column;
}
@keyframes apm-sheet-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.apm-source-handle {
    width: 2.8rem;
    height: 0.3rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0.9rem auto 0.5rem;
    flex-shrink: 0;
}

.apm-source-title {
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.04em;
    padding: 0.3rem 1.5rem 0.8rem;
    flex-shrink: 0;
}

.apm-source-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.2rem 0.8rem 1rem;
    -webkit-overflow-scrolling: touch;
}
.apm-source-list::-webkit-scrollbar { width: 3px; }
.apm-source-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.apm-source-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    cursor: pointer;
    transition: background 0.14s;
    margin-bottom: 0.3rem;
    -webkit-tap-highlight-color: transparent;
}
.apm-source-item:hover,
.apm-source-item:active { background: rgba(255, 255, 255, 0.07); }
.apm-source-item.apm-source-disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

.apm-source-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    width: 2.4rem;
    text-align: center;
}

.apm-source-info {
    flex: 1;
    min-width: 0;
}

.apm-source-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apm-source-meta {
    font-size: var(--font-size-sm);
    color: #64748b;
    margin-top: 0.15rem;
    margin-left: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apm-source-badge {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 2rem;
    padding: 0.2rem 0.7rem;
    letter-spacing: 0.02em;
}
.apm-source-badge.apm-badge-resume {
    color: #34d399;
    background: rgba(52, 211, 153, 0.13);
    border-color: rgba(52, 211, 153, 0.3);
}

.apm-source-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.4rem 0.5rem;
}

.apm-source-cancel {
    width: calc(100% - 1.6rem);
    margin: 0 0.8rem 0.8rem;
    flex-shrink: 0;
    border: none;
    border-radius: 0.9rem;
    padding: 1rem 0;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.14s;
    -webkit-tap-highlight-color: transparent;
}
.apm-source-cancel:hover,
.apm-source-cancel:active { background: rgba(255, 255, 255, 0.1); }

/* ── App Loading Overlay ── */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #0a1628 0%, #0f172a 45%, #0d1f3c 100%);
    opacity: 1;
    transition: opacity 0.45s ease;
}
.app-loading-overlay.app-loading-hiding {
    opacity: 0;
    pointer-events: none;
}

.app-loading-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    user-select: none;
}

.app-loading-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 32px rgba(99, 179, 237, 0.25),
                0 0 64px rgba(99, 179, 237, 0.10);
}

.app-loading-ring {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    z-index: 2;
}

.app-loading-ring div {
    box-sizing: border-box;
    position: absolute;
    width: 72px;
    height: 72px;
    top: 4px;
    left: 4px;
    border: 4px solid transparent;
    border-top-color: #63b3ed;
    border-radius: 50%;
    animation: appLoadingRingSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.app-loading-ring div:nth-child(1) { animation-delay: -0.45s; }
.app-loading-ring div:nth-child(2) {
    animation-delay: -0.30s;
    border-top-color: #4299e1;
}
.app-loading-ring div:nth-child(3) {
    animation-delay: -0.15s;
    border-top-color: #3182ce;
}

@keyframes appLoadingRingSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.app-loading-text {
    font-size: var(--font-size-xs);
    color: #64748b;
    margin: 0;
    min-height: 1.4em;
    text-align: center;
    transition: opacity 0.2s ease;
    animation: appLoadingTextBreathe 2s ease-in-out infinite;
}

@keyframes appLoadingTextBreathe {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1;    }
}

/* ============================================================
   设备冲突弹窗 (DCM)
   ============================================================ */
#deviceConflictModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px
             max(16px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    font-size: 16px;
}

.dcm-card {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 20px;
    padding: 28px 22px 24px;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.04);
    text-align: center;
    box-sizing: border-box;
    animation: dcm-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dcm-enter {
    from { opacity: 0; transform: translateY(24px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.dcm-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 12px;
    display: block;
}

.dcm-title {
    font-size: 17px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 14px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.dcm-device-info {
    background: rgba(99, 102, 241, 0.09);
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.75;
    text-align: left;
}

.dcm-device-name {
    color: #a5b4fc;
    font-weight: 600;
    font-size: 14px;
}

.dcm-device-time {
    color: #64748b;
    font-size: 12px;
}

.dcm-desc {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.75;
    margin: 0 0 18px;
}

.dcm-desc strong {
    color: #f1f5f9;
}

.dcm-btn {
    display: block;
    width: 100%;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    padding: 13px 16px 12px;
    min-height: 52px;
    line-height: 1.3;
    transition: opacity 0.18s ease, transform 0.14s ease,
                border-color 0.18s ease, color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    font-family: inherit;
}

.dcm-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

.dcm-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

.dcm-btn-primary:hover:not(:disabled)  { opacity: 0.88; transform: translateY(-1px); }
.dcm-btn-primary:active:not(:disabled) { transform: translateY(0); opacity: 0.95; }

.dcm-btn-secondary {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #94a3b8;
}

.dcm-btn-secondary:hover:not(:disabled)  { border-color: rgba(148, 163, 184, 0.55); color: #cbd5e1; }
.dcm-btn-secondary:active:not(:disabled) { opacity: 0.8; }

.dcm-btn-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 3px;
}

.dcm-footer {
    font-size: 12px;
    color: #475569;
    margin: 14px 0 0;
    line-height: 1.5;
}

.dcm-card::-webkit-scrollbar { width: 4px; }
.dcm-card::-webkit-scrollbar-track { background: transparent; }
.dcm-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── 词典搜索结果：朗读按钮 ── */
.dict-speak-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.dict-speak-btn:hover {
    background: rgba(99, 179, 237, 0.15);
    border-color: rgba(99, 179, 237, 0.4);
    color: #7dd3fc;
}

.dict-speak-btn:active {
    transform: scale(0.92);
    background: rgba(99, 179, 237, 0.25);
}

.dict-speak-btn.speaking {
    color: #7dd3fc;
    border-color: rgba(99, 179, 237, 0.5);
    animation: dict-speak-pulse 0.55s ease-in-out infinite alternate;
}

@keyframes dict-speak-pulse {
    from { opacity: 0.6; }
    to   { opacity: 1;   }
}

/* ==========================================================================
   Support System — 客服系统样式
   ========================================================================== */
.support-modal-body {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.support-section {
    margin-bottom: 0;
}

.support-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    color: #f1f5f9;
    font-size: var(--font-size-base);
    line-height: 1.6;
    padding: 1.1rem 1.3rem;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}
.support-textarea:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.support-image-upload-area {
    width: 100%;
    min-height: 80px;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
    padding: 1rem;
    box-sizing: border-box;
}
.support-image-upload-area:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.06);
}

.support-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-400);
    font-size: var(--font-size-base);
    pointer-events: none;
}

.support-image-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 0.8rem;
    object-fit: contain;
    display: block;
}

.support-image-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.85);
    color: white;
    border: none;
    font-size: var(--font-size-xs);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
}
.support-image-remove-btn:hover {
    background: #dc2626;
}

.support-ticket-list {
    min-height: 60px;
}

.support-ticket-cards {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem 0;
}

.support-ticket-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.2rem 1.4rem;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.support-ticket-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}
.support-ticket-card.has-unread {
    border-color: rgba(99, 102, 241, 0.45);
    background: rgba(99, 102, 241, 0.07);
}

.ticket-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.ticket-status-badge {
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ticket-status-badge.status-open       { background: rgba(239,68,68,0.18); color: #fca5a5; }
.ticket-status-badge.status-processing { background: rgba(234,179,8,0.18); color: #fde047; }
.ticket-status-badge.status-resolved   { background: rgba(34,197,94,0.18); color: #86efac; }
.ticket-status-badge.status-deleted    { background: rgba(100,116,139,0.18); color: #94a3b8; }

.ticket-time {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    margin-left: auto;
}

.ticket-unread-dot {
    background: #6366f1;
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ticket-preview {
    color: #cbd5e1;
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-msg-count {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.support-refresh-btn {
    background: transparent;
    border: none;
    color: var(--gray-400);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.support-refresh-btn:hover {
    color: #93c5fd;
    background: rgba(147, 197, 253, 0.1);
}

.support-back-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.8rem;
    color: #cbd5e1;
    font-size: var(--font-size-base);
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.support-back-btn:hover {
    background: rgba(255,255,255,0.12);
}

.agent-status-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.agent-tab-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    color: #94a3b8;
    font-size: var(--font-size-sm);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.agent-tab-btn.active,
.agent-tab-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
}

.agent-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: center;
    align-content: flex-start;
    flex-direction: column;
}

.agent-detail-meta {
    font-size: var(--font-size-sm);
}

.agent-status-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.agent-status-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.7rem;
    color: #cbd5e1;
    font-size: var(--font-size-sm);
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.agent-status-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}
.agent-delete-btn {
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.agent-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
}

.support-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
    min-height: 80px;
    max-height: 420px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.tl-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.tl-item.tl-support {
    flex-direction: row-reverse;
}

.tl-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tl-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 78%;
}
.tl-support .tl-bubble-wrap {
    align-items: flex-end;
}

.tl-meta {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}
.tl-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #93c5fd;
}
.tl-support .tl-name { color: #86efac; }
.tl-time {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

.tl-bubble {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.2rem;
    border-top-left-radius: 0.3rem;
    padding: 1rem 1.3rem;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
}
.tl-support .tl-bubble {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.3);
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 0.3rem;
}

.tl-content {
    font-size: var(--font-size-base);
    color: #e2e8f0;
    line-height: 1.6;
}

.tl-image-wrap {
    margin-top: 0.6rem;
}
.tl-thumb {
    max-width: 200px;
    max-height: 180px;
    border-radius: 0.8rem;
    cursor: zoom-in;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
    transition: opacity 0.15s;
}
.tl-thumb:hover { opacity: 0.85; }
.tl-image-error {
    display: inline-block;
    color: var(--gray-400);
    font-size: var(--font-size-xs);
    padding: 0.5rem 0.8rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.6rem;
    margin-top: 0.4rem;
}

.agent-reply-box {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.agent-reply-actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.agent-reply-img-area {
    width: 80px;
    min-height: 60px;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 0.8rem;
}

.user-ticket-detail-overlay {
    position: absolute;
    inset: 0;
    background: var(--bg-primary, #0f172a);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-ticket-detail-inner {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.user-ticket-detail-inner .support-timeline {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.user-ticket-detail-inner .agent-detail-header,
.user-ticket-detail-inner .agent-reply-box {
    flex-shrink: 0;
}

.resolve-confirm-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1rem 1.3rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 0.8rem;
    flex-shrink: 0;
    animation: supportBadgePop 0.25s ease;
}
.resolve-confirm-text {
    color: #86efac;
    font-size: var(--font-size-sm);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.resolve-confirm-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.resolve-yes-btn {
    background: rgba(34, 197, 94, 0.25);
    border: 1px solid rgba(34, 197, 94, 0.45);
    border-radius: 0.6rem;
    color: #86efac;
    font-size: var(--font-size-sm);
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.resolve-yes-btn:hover { background: rgba(34, 197, 94, 0.4); }
.resolve-no-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    color: #94a3b8;
    font-size: var(--font-size-sm);
    padding: 0.4rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.resolve-no-btn:hover { background: rgba(255, 255, 255, 0.12); }

.agent-load-more-btn {
    display: block;
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 0.8rem;
    color: #94a3b8;
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.agent-load-more-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}
.agent-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── 关于弹窗行动按钮 ── */
.version-info-actions {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 1.6rem;
    justify-content: center;
    width: 100%;
}

.version-info-action-btn {
    flex: 1;
    min-width: 0;
    max-width: 220px;
    padding: 0 1rem;
    height: 3.6rem;
    border-radius: 2rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    letter-spacing: 0.3px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    text-align: center;
    white-space: nowrap;
    overflow: visible !important; /* 🌟 必须为 visible，防止右上角角标被裁剪 */
    position: relative !important; /* 角标绝对定位基准 */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.version-info-action-btn:active {
    transform: scale(0.95);
    opacity: 0.88;
}

.version-info-action-secondary {
    background: rgba(255, 255, 255, 0.07);
    color: #CBD5E1;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.version-info-action-secondary:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    transform: translateY(-1px);
}

.version-info-action-gold {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1200;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(255, 165, 0, 0.40);
}

.version-info-action-gold:hover {
    box-shadow: 0 6px 20px rgba(255, 165, 0, 0.60);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ & Support 样式
══════════════════════════════════════════════════════════════════════ */
.support-section-toggle {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0.5rem !important;
    transition: color 0.15s;
}
.support-section-toggle:hover { color: #93c5fd; }

.support-section-toggle.is-open {
    margin-bottom: 1.2rem !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
    padding-bottom: 1rem !important;
}

.support-ticket-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}
.support-ticket-tabs .support-tab-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    color: #94a3b8;
    font-size: var(--font-size-md);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.support-ticket-tabs .support-tab-btn.active,
.support-ticket-tabs .support-tab-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
}

.support-history-chevron {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    transition: transform 0.2s;
    display: inline-block;
}
.support-history-chevron.open { transform: rotate(90deg); }

.history-load-more-btn {
    display: block;
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.7rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.8rem;
    color: #94a3b8;
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.history-load-more-btn:hover { background: rgba(255,255,255,0.1); }
.history-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.user-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.user-faq-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.user-faq-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(99,102,241,0.3); }
.user-faq-card.expanded { cursor: default; border-color: rgba(99,102,241,0.4); }

.user-faq-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.4rem;
}

.user-faq-preview {
    font-size: var(--font-size-base);
    color: var(--gray-400);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.user-faq-card.expanded .user-faq-preview { display: none; }

.user-faq-full-content {
    font-size: var(--font-size-base);
    color: #cbd5e1;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 0.4rem;
}

.user-faq-image {
    margin-top: 0.8rem;
    max-width: 100%;
    max-height: 200px;
    border-radius: 0.6rem;
    object-fit: contain;
    cursor: zoom-in;
    display: block;
}

.user-faq-expand-hint {
    font-size: var(--font-size-base);
    color: #6366f1;
    margin-top: 0.4rem;
}
.user-faq-card.expanded .user-faq-expand-hint { display: none; }

.user-faq-collapse-btn {
    margin-top: 0.8rem;
    font-size: var(--font-size-base);
    color: var(--warning-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.admin-faq-form {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 0.8rem;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

.admin-faq-label {
    display: block;
    font-size: var(--font-size-base);
    color: var(--gray-300);
    margin-bottom: 0.4rem;
}

.admin-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.admin-faq-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.8rem;
    padding: 0.8rem 1rem;
}
.admin-faq-item.is-published {
    border-color: rgba(34,197,94,0.25);
}

.admin-faq-item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-faq-item-title {
    flex: 1;
    font-size: var(--font-size-base);
    color: #e2e8f0;
    font-weight: 600;
    min-width: 0;
    word-break: break-word;
}

.admin-faq-item-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

.admin-faq-publish-badge {
    font-size: var(--font-size-base);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(34,197,94,0.15);
    color: #86efac;
}
.admin-faq-publish-badge.unpublished {
    background: rgba(100,116,139,0.15);
    color: #94a3b8;
}

.admin-faq-item-preview {
    font-size: var(--font-size-base);
    color: var(--gray-500);
    margin-top: 0.3rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-faq-item-meta {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    margin-top: 0.2rem;
}

/* ================================================= */
/* === Fast Forward 列表项样式 === */
/* ================================================= */
.ff-item-word {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ff-item-sentence {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.ff-item-translation {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.ff-portal-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
}

.ff-portal-btn:hover {
    background: rgba(251, 191, 36, 0.20);
    border-color: rgba(251, 191, 36, 0.75);
}

.ff-portal-btn:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.7);
    outline-offset: 2px;
}

.ff-portal-btn:active {
    transform: scale(0.90);
    background: rgba(251, 191, 36, 0.28);
}

/* 场景置顶按钮 & 学习统计 */
.scene-pin-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
    z-index: 5;
    border-radius: 50%;
}

.scene-pin-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.scene-pin-btn svg {
    width: 28px;
    height: 28px;
    fill: #94A3B8;
    opacity: 0.5;
    transition: fill 0.2s, opacity 0.2s;
}

.scene-pin-btn:hover svg {
    opacity: 0.8;
}

.scene-pin-btn.pinned svg {
    fill: #FFD700;
    opacity: 1;
}

.accordion-header-count {
    font-size: var(--font-size-sm);
    color: #94A3B8;
    margin-top: 4px;
    font-weight: 700;
}

.learning-stats-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-size: var(--font-size-md);
    color: #CBD5E1;
}

.learning-stats-container span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.practice-zh-btn {
    padding: 0.7rem 1.5rem;
    font-size: var(--font-size-md);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    color: #6ee7b7;
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 0.7rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.practice-zh-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.35));
    border-color: rgba(16, 185, 129, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.practice-zh-btn:active {
    transform: translateY(0);
}

.practice-zh-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.practice-zh-btn.urgent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(5, 150, 105, 0.35));
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
    animation: practiceZhPulse 1.8s ease-in-out infinite;
}

@keyframes practiceZhPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.2); }
    50%      { box-shadow: 0 0 18px rgba(16, 185, 129, 0.5); }
}

/* ============================================================
   Word Library & Custom Definitions
   ============================================================ */
.global-search-result-custom-def {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.95);
    margin-top: 0.5rem;
    line-height: 1.6;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.12));
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    border-left: 3px solid var(--success-500);
    word-break: break-word;
}

.add-custom-def-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(99, 102, 241, 0.1) !important;
    border: 1px dashed rgba(99, 102, 241, 0.4) !important;
    color: #A5B4FC;
    font-weight: 600;
    font-size: var(--font-size-base);
    padding: 1.2rem !important;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

.add-custom-def-btn:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.8) !important;
    color: #FFFFFF;
}

.apm-lib-play-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.5rem;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 0.75rem;
    color: #FBBF24;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.apm-lib-play-btn:active {
    background: rgba(251, 191, 36, 0.28);
    transform: scale(0.93);
}

.apm-library-mode .apm-grp-scene-range,
.apm-library-mode .apm-grp-content-type,
.apm-library-mode .apm-grp-lang-order,
.apm-library-mode .apm-grp-round-rpt,
.apm-library-mode #apmSwitchVideoBtn {
    display: none !important;
}

/* ================================================= */
/* === 场景开场标题卡片 (Scene Title Card) === */
/* ================================================= */
.title-card-item {
    position: absolute;
    background: linear-gradient(145deg,
        rgba(10, 10, 26, 0.8) 0%,
        rgba(22, 16, 44, 0.8) 100%
    );
    backdrop-filter: blur(2px) saturate(1.6);
    -webkit-backdrop-filter: blur(2px) saturate(1.6);
    border-top:    2px solid rgba(255, 213, 79, 0.75);
    border-right:  2px solid rgba(255, 213, 79, 0.45);
    border-bottom: 2px solid rgba(255, 213, 79, 0.45);
    border-left:   2px solid rgba(255, 213, 79, 0.75);
    border-radius: 2rem;
	box-shadow:
        0 14px 50px rgba(0, 0, 0, 0.62),
        0 4px 18px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 20px rgba(255, 213, 79, 0.06);

    padding: 2.5rem 3rem;
    color: var(--brand-yellow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 85%;
    box-sizing: border-box;
    text-align: center;
    z-index: 21;
    animation: titleCardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes titleCardPop {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.title-badge {
    font-size: var(--font-size-xs);
    color: rgba(185, 215, 255, 0.92);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.15);
    padding: 0.3rem 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.title-en {
    font-size: var(--font-size-xxl);
    font-weight: 800;
    color: var(--brand-yellow);
    text-shadow: 2px 2px 4px var(--text-dark-overlay);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.title-zh {
    font-size: var(--font-size-xl2);
    font-weight: 500;
    width: 100%;
    color: var(--brand-light-blue);
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 213, 79, 0.20);
}

/* ── 词库管理弹窗 Tab 样式 ── */
.dicts-tab-btn {
    flex: 1;
    padding: 0.5rem 0.8rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid rgba(255,255,255,0.2);
    border-bottom: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.dicts-tab-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.dicts-tab-btn.dicts-tab-active {
    background: rgba(255,255,255,0.22);
    color: #fff;
    font-weight: bold;
    border-color: rgba(255,255,255,0.35);
}
.dicts-tab-panel { display: flex; flex-direction: column; }
.dicts-tab-panel.hidden { display: none !important; }

/* 服务器词库列表每一行 */
.server-dict-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.server-dict-row:last-child { border-bottom: none; }
.server-dict-info { flex: 1; min-width: 0; align-items: center; }
.server-dict-name { font-weight: bold; font-size: var(--font-size-base); color: var(--text-light); }
.server-dict-meta { font-size: var(--font-size-sm); color: var(--gray-400); margin-top: 0.2rem; }
.server-dict-status { font-size: var(--font-size-sm); color: var(--success-500); font-weight: bold; white-space: nowrap; }
.server-dict-btn { flex-shrink: 0; }

/* ── 词库浏览弹窗 ── */
#dictBrowseModal .global-search-input-container {
    margin-top: 0.8rem;
}

.btn-browse-dict {
    flex-shrink: 0;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    margin-left: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 0.8rem;
    cursor: pointer;
    color: #93c5fd;
    font-size: 1.2rem;
    transition: background 0.15s;
}
.btn-browse-dict:hover {
    background: rgba(59, 130, 246, 0.22);
}

/* ══════════════════════════════════════════════════
   OCR 模块 — 统一样式定义
   ══════════════════════════════════════════════════ */
#ocrModal {
    font-family: system-ui, -apple-system, sans-serif;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#ocrImage {
    transition: opacity 0.3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    display: block;
}
#ocrImage.ocr-processed {
    opacity: 1;
}

#ocrImageDimOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    pointer-events: none;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.35s ease;
}
#ocrImageDimOverlay.active {
    opacity: 1;
}

.ocr-char-box {
    position: absolute;
    border-radius: 4px;
    background: transparent;
    border: 2.5px solid rgba(251, 191, 36, 0.4); 
    pointer-events: auto;
    z-index: 12;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.ocr-char-box.selected {
    background: rgba(251, 191, 36, 0.15) !important;
    border: 2.5px solid rgba(251, 191, 36, 0.6) !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.3), inset 0 0 4px rgba(251, 191, 36, 0.1) !important;
}

.ocr-char-box.word-preview {
    background: rgba(251, 191, 36, 0.15) !important;
    border: 2.5px solid rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.2) !important;
}

/* ── OCR 状态提示胶囊（合并冗余规则）── */
#ocrStatusText {
    position: absolute !important;
    bottom: 6rem !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    background: var(--primary-500, #3b82f6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 0.125rem solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 3rem !important;
    padding: 1.5rem 2.5rem !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: nowrap !important;          
    max-width: 92% !important;               
    overflow: hidden !important;             
    text-overflow: ellipsis !important;      
    line-height: 1.5 !important;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3) !important; 
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease, transform 0.1s ease, background 0.2s ease, border-color 0.2s ease, top 0.3s ease, bottom 0.3s ease !important;
}

#ocrStatusText:active {
    transform: translateX(-50%) scale(0.95) !important;
}

#ocrStatusText.clickable-status {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6) !important;
}

#ocrStatusText.status-center-interactive {
    bottom: 6rem !important;
    background: var(--practice-success, #10b981) !important;
    box-shadow: 0 1rem 3rem rgba(16, 185, 129, 0.4) !important;
}

#ocrStatusText.status-center-error {
    bottom: 6rem !important;
    background: var(--error-500, #ef4444) !important;
    box-shadow: 0 1rem 3rem rgba(239, 68, 68, 0.4) !important;
}

#ocrModal .modal-close-button {
    width: 6.25rem !important;
    height: 6.25rem !important;
    font-size: 3rem !important;
    top: 2.5rem !important;
    right: 1.25rem !important;
    background: rgba(0, 0, 0, 0.4) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 0.125rem solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#ocrStandaloneCloseBtn {
    width: 6.25rem !important;   
    height: 6.25rem !important;
    top: 2.5rem !important;      
    right: 1.25rem !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#ocrStandaloneCloseBtn img {
    width: 50% !important;
    height: 50% !important;
    object-fit: contain !important;
}

#ocrRescanBtn,
#ocrAlbumBtn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.7rem 1.6rem !important;
    font-size: var(--font-size-base) !important;
    background: var(--brand-dark-blue) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 2rem !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--brand-yellow) !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
}

/* ── 词典结果悬浮卡片（全宽贴边模式） ── */
.ocr-result-card-inner {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: none;
    pointer-events: auto;
    box-sizing: border-box;
    background: linear-gradient(145deg,
        rgba(10, 10, 26, 0.95) 0%,
        rgba(22, 16, 44, 0.95) 100%
    );
    backdrop-filter: blur(12px) saturate(1.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    border-top: 2px solid rgba(255, 255, 255, 0.11);
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-radius: 2.5rem 2.5rem 0 0;
    padding: 1.75rem 2.5rem 2rem 2.5rem;
    box-shadow:
        0 28px 100px rgba(0, 0, 0, 0.72),
        0 8px 36px rgba(0, 0, 0, 0.45),
        inset 0 2px 0 rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 0;
}

.ocr-result-card-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3rem;       
    bottom: 3rem;
    width: 0.5rem;   
    background: var(--warning-500);
    border-radius: 0.25rem; 
}

.ocr-result-card-inner .ocr-card-close {
    position: static;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    min-width: 4rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 4rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    line-height: 1;
    padding: 0.5rem 0.5rem 0.5rem 1.75rem;
}
.ocr-result-card-inner .ocr-card-close:hover {
    color: rgba(255, 255, 255, 0.9);
}

.ocr-edit-group {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

.ocr-edit-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--warning-500) !important;
    font-size: 2.75rem;
    font-weight: bold;
    font-family: inherit;
    letter-spacing: 0.01em;
    line-height: 1.1;
    outline: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    border-bottom: 4px solid transparent;
    transition: border-bottom-color 0.2s;
}
.ocr-edit-input:focus {
    border-bottom-color: rgba(255, 213, 79, 0.5);
}

.ocr-re-search-btn {
    background: rgba(245, 158, 11, 0.12);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 1rem;
    color: rgba(255, 213, 79, 0.85);
    font-size: 1.625rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    margin-left: 1.5rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    line-height: 1.2;
}
.ocr-re-search-btn:hover {
    background: rgba(245, 158, 11, 0.25);
    color: #fff;
    border-color: rgba(245, 158, 11, 0.55);
}
.ocr-re-search-btn:active {
    transform: scale(0.95);
}

.ocr-phonetic-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
    flex-wrap: nowrap;
    align-self: flex-start;
    width: 100%;
}
.ocr-phonetic-row--no-phonetic {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.ocr-phonetic-row .phonetics,
.ocr-result-card-inner .phonetics {
    display: inline-block !important;
    align-self: flex-start;
    font-size: 1.75rem;
    font-weight: 400;
    padding: 0.5rem 1.25rem;
    background: rgba(100, 165, 255, 0.14);
    border: 2px solid rgba(120, 180, 255, 0.22);
    border-radius: 1rem;
    color: var(--darkreader-inline-color) !important;
    white-space: nowrap;
    letter-spacing: 0.025em;
    line-height: 1.4;
    margin-right: 1rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ocr-card-speak-btn,
.ocr-card-star-btn,
.ocr-card-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}

.ocr-card-speak-btn {
    color: rgba(255, 255, 255, 0.35);
}
.ocr-card-speak-btn svg {
    width: 2.25rem;
    height: 2.25rem;
    pointer-events: none;
    transition: transform 0.2s ease;
}
.ocr-card-speak-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
}
.ocr-card-speak-btn:hover svg {
    transform: scale(1.05);
}
.ocr-card-speak-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.12);
    transition-duration: 0.1s;
}
.ocr-card-speak-btn.speaking {
    color: var(--highlight-yellow);
    background: rgba(255, 215, 0, 0.08);
    transform: scale(1);
    animation: integratedSpeakPulse 1.5s ease-in-out infinite;
    pointer-events: auto;
}

.ocr-card-star-btn {
    color: rgba(255, 255, 255, 0.35);
    font-size: 2.5rem; 
}
.ocr-card-star-btn:hover {
    color: rgba(255, 213, 79, 0.85);
    background: rgba(255, 213, 79, 0.08);
    transform: scale(1.05);
}
.ocr-card-star-btn:active {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

.ocr-card-add-btn {
    color: rgba(255, 255, 255, 0.50);
    font-size: 2.25rem; 
}
.ocr-card-add-btn:hover {
    color: rgba(52, 211, 153, 0.95);
    background: rgba(52, 211, 153, 0.10);
    transform: scale(1.05);
}
.ocr-card-add-btn:active {
    transform: scale(0.92);
    transition-duration: 0.1s;
}

.ocr-result-card-inner .translation {
    display: block;
    width: 100%;
    font-size: 2.125rem;
    font-weight: normal;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px solid rgba(255, 213, 79, 0.18);
    color: var(--highlight-yellow);
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

.ocr-result-card-inner .root-info {
    display: block;
    width: 100%;
    font-size: 1.75rem;
    font-weight: normal;
    margin-top: 1.25rem;
    padding-top: 1.125rem;
    border-top: 2px solid rgba(255, 255, 255, 0.09);
    color: rgba(160, 220, 210, 0.82);
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.ocr-result-card-inner .root-label {
    color: rgba(255, 255, 255, 0.38);
    font-size: 1.75rem;
    letter-spacing: 0.07em;
    font-weight: 500;
    margin-right: 0.45em;
    white-space: nowrap;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* ============================================================
   Custom Select Dropdown Component
   ============================================================ */
.rr-select-wrapper {
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    min-width: 0;
    max-width: 100%;
}

.rr-select-wrapper.w-full {
    width: 100%;
    display: block;
}

.rr-select-trigger {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    min-height: 2.8rem;
    gap: 0.6rem;
    width: 100%;
    overflow: hidden;
}
.rr-select-trigger:hover {
    border-color: rgba(99, 102, 241, 0.6);
    background: rgba(99, 102, 241, 0.15);
}
.rr-select-wrapper.open .rr-select-trigger {
    border-color: var(--primary-500);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.rr-select-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.rr-select-arrow {
    font-size: 0.75em;
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
}
.rr-select-wrapper.open .rr-select-arrow {
    transform: rotate(180deg);
}
.rr-select-options {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(32rem, 90vw);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.8rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 250px;
    overflow-y: auto;
    padding: 0.4rem;
    box-sizing: border-box;
}

.rr-select-options::-webkit-scrollbar { width: 4px; }
.rr-select-options::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.rr-select-wrapper.open .rr-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rr-select-option {
    padding: 0.8rem 1rem;
    font-size: var(--font-size-base);
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    margin-bottom: 0.2rem;
}
.rr-select-option:last-child {
    margin-bottom: 0;
}
.rr-select-option:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #fff;
}
.rr-select-option.selected {
    color: #60a5fa;
    font-weight: bold;
    background: rgba(99, 102, 241, 0.12);
}
.rr-select-option.selected::after {
    content: '✔';
    font-size: 1.1em;
    font-weight: bold;
    color: #60a5fa;
    margin-left: 1rem;
}

/* ============================================================
   AI 优化呼吸灯与状态徽章
   ============================================================ */
.ai-opt-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-xs);
    color: #94A3B8;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.ai-opt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--gray-500);
    flex-shrink: 0;
}

.ai-opt-dot.breathing {
    background-color: var(--warning-500);
    box-shadow: 0 0 8px var(--warning-500);
    animation: ai-breathe 1.5s infinite ease-in-out;
}

.ai-opt-dot.success {
    background-color: var(--success-500);
    box-shadow: 0 0 6px var(--success-500);
}

.ai-opt-text {
    white-space: nowrap;
    line-height: 1;
}

@keyframes ai-breathe {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Audio Player Mode: 收音机模式专属样式
   ═══════════════════════════════════════════════════════════════════════ */
.apm-radio-mode #apmOrderBtn,
.apm-radio-mode #apmPrevBtn,
.apm-radio-mode #apmNextBtn,
.apm-radio-mode #apmLoopBtn,
.apm-radio-mode #apmTrackCount,
.apm-radio-mode .apm-progress-bar-wrap,
.apm-radio-mode #apmSwitchVideoBtn,
.apm-radio-mode #apmGoToLibraryBtn {
    display: none !important;
}

.apm-radio-mode .apm-controls {
    justify-content: center;
    gap: 2rem;
}

/* ============================================================
   Responsive Design
   ============================================================ */
@media (max-width: 768px) {
    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    html {
        background-color: #000;
    }

    body {
        background-color: #000;
    }

    .video-player-container {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    video {
        border-radius: 0;
    }

    #imageSlideshowContainer {
        border-radius: 0;
    }

    .modal-overlay {
        align-items: center !important;
        padding: 1.5rem !important;
        overflow: hidden !important;
    }
    
    .profile-container {
        height: 92% !important;
        max-height: 92% !important;
        min-height: auto !important;
        margin: 0 auto;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .profile-content-area {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
    
    .global-search-clear-btn {
        width: 3.6rem;
        height: 3.6rem;
        right: 0.4rem;
    }
    .global-search-clear-btn svg {
        width: 2rem;
        height: 2rem;
    }
    .global-search-input-wrapper .global-search-input {
        padding-right: 4.4rem;
    }
}

/* ============================================================
   Scene Summary 场景末尾复习汇总面板 & 卡片收藏
   ============================================================ */

/* ── 场景末尾汇总大卡片 ── */
.scene-summary-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(8, 8, 22, 0.94) 0%, rgba(18, 12, 36, 0.94) 100%);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    padding: 1.5rem;
}

.scene-summary-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.scene-summary-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 88%;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 1.8rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 215, 0, 0.08);
    box-sizing: border-box;
    padding: 2rem 1.8rem 1.5rem;
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease;
    overflow: hidden;
}

.scene-summary-overlay.show .scene-summary-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 顶部标题与一键连读工具栏 */
.scene-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
}

.scene-summary-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--highlight-yellow);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.5px;
}

.scene-summary-playall-btn {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(245, 158, 11, 0.2));
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: var(--highlight-yellow);
    border-radius: 2rem;
    padding: 0.45rem 1.2rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.scene-summary-playall-btn:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.35), rgba(245, 158, 11, 0.35));
    transform: scale(1.03);
}

.scene-summary-playall-btn.playing {
    background: #ff0000ab;
    color: white;
    border-color: red;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.scene-summary-subtitle {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    margin: 0 0 1rem 0;
    text-align: left;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 单词表格滚动容器 */
.scene-summary-list {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.3rem;
    margin-bottom: 1.2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    -webkit-overflow-scrolling: touch; /* 启用 iOS/Android 原生硬件加速惯性滚动 */
    touch-action: pan-y;                /* 明确声明允许垂直手势滑动 */
    overscroll-behavior: contain;       /* 防止边缘滚动穿透 */
}

.scene-summary-list::-webkit-scrollbar {
    width: 6px;
}
.scene-summary-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

/* 单行词汇卡 */
.scene-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
    padding: 0.75rem 1rem;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    box-sizing: border-box;
}

.scene-summary-row:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.scene-summary-row.reading-active {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
    transform: translateX(4px);
}

.scene-summary-word-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.scene-summary-en-line {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.scene-summary-en-text {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--warning-500) !important;
    word-break: break-word;
}

.scene-summary-row.reading-active .scene-summary-en-text {
    color: var(--highlight-yellow);
}

.scene-summary-phonetic {
    font-size: var(--font-size-xs);
    color: var(--darkreader-inline-color) !important;
    font-style: italic;
}

.scene-summary-zh-text {
    font-size: var(--font-size-sm);
    color: #94A3B8;
    line-height: 1.35;
    word-break: break-word;
}

.scene-summary-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-left: 0.8rem;
}

/* 底部操作按钮栏（三按钮自适应布局） */
.scene-summary-footer {
    display: flex;
    gap: 0.8rem;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    align-items: center;
}

.scene-summary-btn-practice {
    flex: 1.1;
    padding: 0.85rem 0.6rem;
    border-radius: 1rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.scene-summary-btn-practice:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

.scene-summary-btn-next {
    flex: 1.3;
    padding: 0.85rem 0.6rem;
    border-radius: 1rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-500, #3b82f6) 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.scene-summary-btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.5);
}

.scene-summary-btn-exit {
    flex: 0.8;
    padding: 0.85rem 0.6rem;
    border-radius: 1rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.scene-summary-btn-exit:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    transform: translateY(-2px);
}

/* ── 单词卡片右上角常驻收藏按钮 ── */
.word-item-card-star {
    position: absolute;
    top: 1.1rem;
    right: 1.0rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.2rem;
    pointer-events: auto;
    transition: transform 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}

.word-item-card-star.starred {
    color: #FBBF24;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

.word-item-card-star:hover {
    transform: scale(1.15);
    color: #FBBF24;
}

.word-item-card-star:active {
    transform: scale(0.9);
}

/* ── 生词本列表中的 🎬 直达场景按钮 ── */
.dict-portal-scene-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 0.5rem;
    color: #a5b4fc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    font-size: 1.4rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.dict-portal-scene-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.6);
    color: #ffffff;
}

.dict-portal-scene-btn:active {
    transform: scale(0.92);
}

/* 游戏选择列表项 */
.game-list-entry-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem !important;
    border-radius: 1.4rem !important;
    margin-bottom: 1.2rem !important;
    cursor: pointer;
    min-height: 6rem;
    box-sizing: border-box;
}

.game-list-entry-icon {
    font-size: 3.5rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   客服 / FAQ 未读消息通用红点角标 (Support Notification Badge)
   ══════════════════════════════════════════════════════════════ */
.support-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    background: #ef4444;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 15;
    box-sizing: border-box;
    white-space: nowrap;
    animation: supportBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 在关于弹窗的联系按钮内微调位置 */
.support-badge.version-contact-badge {
    top: -6px;
    right: -6px;
}

.support-badge.hidden {
    display: none !important;
}

@keyframes supportBadgePop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   批量导入个人词库 / 句库专属样式 (Batch Import Module)
   ══════════════════════════════════════════════════════════════ */
/* 收藏页操作按钮行（自适应折行居中） */
.fav-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

.fav-btn-batch {
    color: #ffffff;
    background-color: var(--success-600);
}

.fav-btn-dict-mgr {
    color: #ffffff;
    background-color: var(--brand-dark-blue);
}

/* 批量导入弹窗头部 */
.batch-import-header {
    margin-bottom: 0.8rem;
    flex-shrink: 0;
}

/* 批量导入内容容器（全屏弹性高度） */
.batch-import-container {
    width: 100%;
    max-width: 680px;
    flex: 1;
    min-height: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* 顶部工具栏（方向指示徽章与文件导入按钮） */
.batch-import-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* 语言方向指示徽章 */
.batch-direction-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #A5B4FC;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* 文件选择按钮 */
.batch-file-btn {
    width: auto;
    padding: 0.35rem 0.9rem;
    font-size: var(--font-size-sm);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* 文本域外层弹性包裹层 */
.batch-textarea-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 文本域输入框（纵向弹性撑满空间） */
.batch-textarea {
    flex: 1;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    font-family: monospace;
    font-size: var(--font-size-base);
    line-height: 1.6;
    padding: 1rem;
    border-radius: 0.8rem;
}

/* 底部状态提示条 */
.batch-status-msg {
    font-size: var(--font-size-sm);
    margin-top: 0.6rem;
    min-height: 1.2rem;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.batch-status-msg.error {
    color: var(--error-500);
}

.batch-status-msg.warning {
    color: var(--warning-500);
}

.batch-status-msg.success {
    color: var(--success-500);
}

/* 底部操作按钮行 */
.batch-footer-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-top: 0.8rem;
    flex-shrink: 0;
}

.batch-btn-confirm {
    flex: 1;
    margin: 0;
}

.batch-btn-cancel {
    width: auto;
    padding: 0 1.5rem;
    margin: 0;
}

/* 批量导入弹窗顶层层级（高于收藏弹窗的 z-index: 65） */
.batch-import-modal {
    z-index: 75;
}

/* ════════════════════════════════════════════════════════════════
   首页引导层与指南按钮教学演示动画（商用定制版）
   ════════════════════════════════════════════════════════════════ */

/* 1. 引导层卡片与引线：保持原始坐标与大小，仅柔和渐隐渐显 2 次 */
@keyframes guideCardsPulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 1;
    }
}

.guide-cards-pulse {
    /* 1秒一个周期，共执行 2 次，总计 2 秒 */
    animation: guideCardsPulse 1s ease-in-out 2;
    transform: none !important; /* 严格杜绝任何缩放与位移 */
}

/* 2. 操作指南按钮：微幅适度放大 (1.08x) + 品牌科技蓝光晕 */
@keyframes guideBtnPulseOnce {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        border-color: transparent;
    }
    50% {
        transform: scale(1.08);
        /* 品牌蓝霓虹外发光 (Primary Blue #3B82F6 / #6366F1) */
        box-shadow: 0 0 20px 4px rgba(59, 130, 246, 0.75), 0 0 0 2px rgba(99, 102, 241, 0.6);
        border-color: rgba(99, 102, 241, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        border-color: transparent;
    }
}

.guide-btn-pulse-once {
    animation: guideBtnPulseOnce 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1;
    position: relative;
    z-index: 10;
}

/* ══════════════════════════════════════════════════════════════
   新用户欢迎工单 — 调研问卷与兑换码解锁卡片
   ══════════════════════════════════════════════════════════════ */
.welcome-survey-box {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    padding: 1.2rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.welcome-survey-q {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.welcome-survey-label {
    font-size: var(--font-size-sm);
    color: #93C5FD;
    font-weight: 600;
    line-height: 1.4;
}

.welcome-survey-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.6rem;
    color: #FFF;
    font-size: var(--font-size-base);
    padding: 0.6rem 0.9rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.welcome-survey-input:focus {
    border-color: #3B82F6;
    background: rgba(255, 255, 255, 0.12);
}

.welcome-survey-submit-btn {
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    color: #FFF;
    font-weight: 700;
    font-size: var(--font-size-base);
    padding: 0.75rem 1.2rem;
    border: none;
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    transition: transform 0.15s, opacity 0.2s;
}

.welcome-survey-submit-btn:active {
    transform: scale(0.97);
}

.gift-code-blurred {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    transition: filter 0.4s ease;
}

.gift-copy-btn-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(1);
    transition: all 0.3s ease;
}

/* ============================================================
   Demo Mode: 720×1280 容器内部顶栏横幅与布局适配
   ============================================================ */
.demo-persistent-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.6rem;
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.8rem;
    z-index: 25;
    box-sizing: border-box;
    pointer-events: auto;
}

.demo-banner-content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.demo-banner-badge {
    background: var(--warning-500, #f59e0b);
    color: #1e1b4b;
    font-size: var(--font-size-xs);
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.demo-banner-text {
    color: #cbd5e1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-banner-cta {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    border: none;
    border-radius: 2rem;
    padding: 0.4rem 1.2rem;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
    transition: transform 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.demo-banner-cta:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

/* 试玩转化弹窗 */
.demo-conversion-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    box-sizing: border-box;
}

.demo-conversion-card {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 32px 28px 24px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    animation: dcm-enter 0.25s ease-out;
}

.demo-conversion-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.demo-conversion-title {
    color: #f8fafc;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.demo-conversion-body {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 24px;
    text-align: left;
}

.demo-conversion-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    text-decoration: none;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    display: block;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.demo-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    padding: 10px 0;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
}

.demo-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 26px;
    cursor: pointer;
}

/* 🌟 直达 Demo 功能时，从第 0 帧起彻底不渲染底层主页水印与底栏，杜绝任何缝隙闪烁 */
html.demo-direct-entry #brandWatermark,
html.demo-direct-entry #bottomHomeSet {
    display: none !important;
}

/* 确保全屏弹窗外层绝对不被浏览器默认 focus 卷起 */
.modal-overlay {
    overflow: hidden !important;
}

#agentSupportModal,
#supportModal {
    justify-content: flex-start !important;
    overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   我的收藏 — 专用紧凑高利用率排版与目录交互优化
   ══════════════════════════════════════════════════════════════ */

/* 1. 弹窗内手风琴目录项：轻量化毛玻璃底色，与全局搜索结果保持统一 */
#wordLibraryModal .accordion-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1rem !important;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#wordLibraryModal .accordion-item.expanded {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#wordLibraryModal .accordion-header {
    border-radius: 1rem;
    padding: 0.85rem 1.1rem !important;
    transition: background 0.2s ease;
}

#wordLibraryModal .accordion-header:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* 2. 操作按钮行：紧凑小胶囊，单行横向自适应排布 */
#wordLibraryModal .fav-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* 2. 操作按钮行：紧凑小胶囊，单行横向自适应排布（生词本与搜索历史共享） */
#wordLibraryModal .fav-action-row button,
#searchHistoryModal .fav-action-row button {
    padding: 0.35rem 0.75rem !important;
    font-size: var(--font-size-sm, 1.3rem) !important;
    font-weight: 600 !important;
    border-radius: 0.8rem !important;
    white-space: nowrap !important;
    min-width: unset !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* 3. Tab 切换栏：现代双子药丸胶囊 */
#wordLibraryModal .fav-tab-bar {
    background: rgba(0, 0, 0, 0.25);
    padding: 0.3rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#wordLibraryModal .fav-tab-btn {
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--font-size-base) !important;
    border-radius: 0.8rem !important;
    padding: 0.5rem 1rem !important;
}

#wordLibraryModal .fav-tab-btn--active {
    background: var(--brand-dark-blue, #1976D2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 4. 目录移动浮动菜单 (Popover) */
#folderMovePopover {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: apm-fade-in 0.15s ease-out;
}

#folderMovePopover div:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 5. 词卡/句卡在手风琴内部的边距收敛 */
#wordLibraryResults .global-search-result-item,
#sentenceFavResults .search-translate-result-card {
    margin-bottom: 0.45rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.85rem !important;
}


/* ══════════════════════════════════════════════════════════════
   批量导入 — 全屏工作台专属样式 (Full-Screen Workspace)
   ══════════════════════════════════════════════════════════════ */
.batch-import-fullscreen-modal {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--modal-overlay-bg);
    backdrop-filter: var(--modal-blur);
    -webkit-backdrop-filter: var(--modal-blur);
}

.batch-fullscreen-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 2.2rem 1.6rem 1.8rem;
    animation: ptabFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 顶部紧凑标题头 */
.batch-header-compact {
    text-align: center;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
    padding: 0 4rem; /* 左右留出安全距离，避免遮挡右上角关闭按钮 */
}

.batch-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.batch-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.batch-title {
    color: #F8FAFC;
    font-size: var(--font-size-xxl);
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.batch-subtitle {
    color: #94A3B8;
    font-size: var(--font-size-sm);
    margin: 0.2rem 0 0 0;
    line-height: 1.35;
}

/* 控制栏：目录选择、新建、文件导入 */
.batch-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.batch-direction-tag {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #A5B4FC;
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.35);
    padding: 0.35rem 0.8rem;
    border-radius: 2rem;
    letter-spacing: 0.3px;
}

.batch-folder-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.batch-folder-label {
    font-size: var(--font-size-xs);
    color: #94A3B8;
    white-space: nowrap;
}

.batch-mini-btn {
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 0.6rem;
    color: #93C5FD;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

.batch-mini-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #FFF;
}

.batch-file-btn {
    width: auto;
    padding: 0.45rem 1rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #E2E8F0;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0;
}

.batch-file-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #FFF;
}

/* 全屏弹性文本编辑区 */
.batch-textarea-box {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.batch-textarea {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    background: rgba(0, 0, 0, 0.32);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.2rem;
    color: #F8FAFC;
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.65;
    padding: 1.4rem;
    outline: none;
    transition: all 0.2s ease;
    overflow-y: auto;
}

.batch-textarea:focus {
    border-color: var(--primary-500, #3B82F6);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.batch-textarea::placeholder {
    color: rgba(148, 163, 184, 0.45);
}

/* 状态与计数信息条 */
.batch-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.8rem;
    margin: 0.6rem 0 0.8rem;
    flex-shrink: 0;
    padding: 0 0.4rem;
}

.batch-count-info {
    font-size: var(--font-size-sm);
    color: #94A3B8;
    font-weight: 500;
}

.batch-status-msg {
    font-size: var(--font-size-sm);
    text-align: right;
    transition: color 0.2s;
}
.batch-status-msg.error   { color: #F87171; }
.batch-status-msg.warning { color: #FBBF24; }
.batch-status-msg.success { color: #34D399; }

/* 底部操作按钮行 */
.batch-actions-row {
    display: flex;
    gap: 1.2rem;
    width: 100%;
    flex-shrink: 0;
}

.batch-btn-cancel {
    flex: 0.75;
    padding: 1.1rem;
    border-radius: 1rem;
    font-size: var(--font-size-lg);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.2s;
}

.batch-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFF;
}

.batch-btn-confirm {
    flex: 1.25;
    padding: 1.1rem;
    border-radius: 1rem;
    font-size: var(--font-size-lg);
    font-weight: 700;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
}

.batch-btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* ══════════════════════════════════════════════════════════════
   对齐 #reviewModal 的配色至 #wordLibraryModal 风格
   ══════════════════════════════════════════════════════════════ */
#wordLibraryModal .fav-tab-bar,
#reviewModal .fav-tab-bar {
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 0.3rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#wordLibraryModal .fav-tab-btn,
#reviewModal .fav-tab-btn {
    border: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--font-size-base) !important;
    border-radius: 0.8rem !important;
    padding: 0.55rem 1rem !important;
}

#wordLibraryModal .fav-tab-btn--active,
#reviewModal .fav-tab-btn--active {
    background: var(--brand-dark-blue, #1976D2) !important;
    border-color: var(--brand-dark-blue, #1976D2) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   🧠 艾宾浩斯复习专属样式 (Active Recall 磨砂卡片)
   ══════════════════════════════════════════════════════════════════════════ */
.review-item-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.85rem !important;
    padding: 0.85rem 1.1rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease;
}

.review-round-tag {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    line-height: 1.2;
}

.review-tag-starred {
    background: rgba(245, 158, 11, 0.15);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.review-tag-query {
    background: rgba(59, 130, 246, 0.15);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.review-reveal-container {
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 0.8rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-reveal-container:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

.review-reveal-placeholder {
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    text-align: center;
    user-select: none;
}
/* 复习卡片中的单词与音标颜色 */
.review-item-card .review-item-text {
    color: var(--warning-500) !important;
}

.review-item-card .review-item-phonetic {
    color: var(--darkreader-inline-color) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   🌟 主页右下角复习按钮（与工具栏按钮保持一致的原生质感，无呼吸特效）
   ══════════════════════════════════════════════════════════════════════════ */
#homeReviewBtn {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

/* ══════════════════════════════════════════════════════════════
   全站 Modal 统一精致排版与紧凑头部规范（向 wordLibraryModal 对齐）
   ══════════════════════════════════════════════════════════════ */
.modal-overlay .scene-selection-header {
    padding-top: 1.5rem !important;
    margin-bottom: 0.6rem !important;
}

.modal-overlay .scene-selection-title {
    font-size: 2.4rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.3rem !important;
}

.modal-overlay .scene-selection-subtitle {
    font-size: var(--font-size-sm) !important;
}

/* 统一 Modal 右上角关闭按钮尺寸与位置 */
.modal-overlay .modal-close-button {
    width: 48px !important;
    height: 48px !important;
    font-size: 34px !important;
    top: 14px !important;
    right: 14px !important;
}

/* 统一 Modal 左上角辅助按钮 */
.modal-overlay .modal-left-button {
    width: 48px !important;
    height: 48px !important;
    top: 14px !important;
    left: 14px !important;
}

/* 统一各 Modal 结果容器最大宽度与弹性高度 */
#globalSearchModal .scene-list-container,
#searchHistoryModal .scene-list-container,
#dictsManagerModal .scene-list-container,
#dictBrowseModal .scene-list-container,
#reviewModal .scene-list-container,
#gameSelectionModal .scene-list-container,
#wordLibraryModal .scene-list-container {
    max-width: 680px !important;
    border-radius: 1rem !important;
}