/* ════════════════════════════════════════════════════
   cinema.css — 电影院 Step 1 v2
   ════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   观影模式：沉浸式暗色主题（强制暗色，不受系统明暗设置影响）
   ════════════════════════════════════════════════════ */
#couple-space-page.cinema-theater-mode {
    background: #000;
}
#couple-space-page.cinema-theater-mode #cs-topbar,
#couple-space-page.cinema-theater-mode #cs-outer-header {
    display: none !important;
}
#couple-space-page.cinema-theater-mode #cs-panel-cinema {
    --primary-bg: #000;
    --secondary-bg: #1c1c1e;
    --text-primary: #f2f2f2;
    --text-secondary: #9a9a9a;
    --border-color: #333333;
    --secondary-bg-rgb: 28, 28, 30;
    --input-area-bg: #1c1c1e;
}

/* ── 观影模式专属头部：返回 / 观影中 / 设置(占位) ──────── */
.cinema-theater-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 6px;
    flex-shrink: 0;
}
.cinema-theater-hd-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── 选片后的假加载过渡：全屏进度条 ──────────────────── */
.cinema-loading-full {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 24px;
}
.cinema-loading-icon {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}
.cinema-loading-icon i {
    font-size: 28px;
    color: #000;
}
.cinema-loading-bar-track {
    width: 70%;
    max-width: 260px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
}
.cinema-loading-bar-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    transition: width 1.5s linear;
}
.cinema-loading-full-text {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 1px;
}

/* ── Tab 图标 ────────────────────────────────────────── */
#csp-cinema .cs-pill-icon {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iNjYiIHZpZXdCb3g9IjAgMCA2NiA2NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYxLjcxODggNjAuODk1OEg1MC4xNjk5QzU5LjU1MTIgNTUuMDg5MyA2NS44MzMzIDQ0LjczNTQgNjUuODMzMyAzMi45MTY3QzY1LjgzMzMgMTQuNzY2NCA1MS4wNjY5IDAgMzIuOTE2NyAwQzE0Ljc2NjQgMCAwIDE0Ljc2NjQgMCAzMi45MTY3QzAgNTAuNTk5NSAxNC4wMjU4IDY1LjAyODUgMzEuNTMwOSA2NS43NjI2QzMxLjcxMzYgNjUuODA1NCAzMS44OTk1IDY1LjgzMzMgMzIuMDkzOCA2NS44MzMzSDYxLjcxODhDNjIuMzczNSA2NS44MzMzIDYzLjAwMTQgNjUuNTczMiA2My40NjQ0IDY1LjExMDNDNjMuOTI3NCA2NC42NDczIDY0LjE4NzUgNjQuMDE5MyA2NC4xODc1IDYzLjM2NDZDNjQuMTg3NSA2Mi43MDk4IDYzLjkyNzQgNjIuMDgxOSA2My40NjQ0IDYxLjYxODlDNjMuMDAxNCA2MS4xNTU5IDYyLjM3MzUgNjAuODk1OCA2MS43MTg4IDYwLjg5NThaTTQuOTM3NSAzMi45MTY3QzQuOTM3NSAxNy40ODg2IDE3LjQ4ODYgNC45Mzc1IDMyLjkxNjcgNC45Mzc1QzQ4LjM0NDcgNC45Mzc1IDYwLjg5NTggMTcuNDg4NiA2MC44OTU4IDMyLjkxNjdDNjAuODk1OCA0OC4zNDQ3IDQ4LjM0NDcgNjAuODk1OCAzMi45MTY3IDYwLjg5NThDMTcuNDg4NiA2MC44OTU4IDQuOTM3NSA0OC4zNDQ3IDQuOTM3NSAzMi45MTY3WiIgZmlsbD0iIzJGMzQzNyIvPgo8cGF0aCBkPSJNMjUuMzUxNCAyNi41MTQ4QzIzLjY1MjUgMjQuODE5NyAyMS4zNTA2IDIzLjg2NzcgMTguOTUwNyAyMy44Njc3QzE2LjU1MDggMjMuODY3NyAxNC4yNDkgMjQuODE5NyAxMi41NTAxIDI2LjUxNDhDMTAuODU0NiAyOC4yMTM0IDkuOTAyMzQgMzAuNTE1NCA5LjkwMjM0IDMyLjkxNTRDOS45MDIzNCAzNS4zMTU0IDEwLjg1NDYgMzcuNjE3NCAxMi41NTAxIDM5LjMxNjFDMTMuMzkwMSA0MC4xNTcxIDE0LjM4NzkgNDAuODIzOCAxNS40ODYzIDQxLjI3OEMxNi41ODQ4IDQxLjczMjEgMTcuNzYyMSA0MS45NjQ4IDE4Ljk1MDcgNDEuOTYyNkMyMC4xMzk2IDQxLjk2NDYgMjEuMzE3MSA0MS43MzE5IDIyLjQxNTggNDEuMjc3OEMyMy41MTQ1IDQwLjgyMzYgMjQuNTEyNiA0MC4xNTcgMjUuMzUzIDM5LjMxNjFDMjcuMDQ3MSAzNy42MTY2IDI3Ljk5ODIgMzUuMzE0NyAyNy45OTc5IDMyLjkxNTFDMjcuOTk3NiAzMC41MTU1IDI3LjA0NTkgMjguMjEzOCAyNS4zNTE0IDI2LjUxNDhaTTIxLjg2MDYgMzUuODI1M0MyMS4wODgzIDM2LjU5NTkgMjAuMDQxOCAzNy4wMjg3IDE4Ljk1MDcgMzcuMDI4N0MxNy44NTk3IDM3LjAyODcgMTYuODEzMiAzNi41OTU5IDE2LjA0MDkgMzUuODI1M0MxNS4yNzAyIDM1LjA1MjkgMTQuODM3NCAzNC4wMDY1IDE0LjgzNzQgMzIuOTE1NEMxNC44Mzc0IDMxLjgyNDQgMTUuMjcwMiAzMC43Nzc5IDE2LjA0MDkgMzAuMDA1NkMxNi40MjI4IDI5LjYyMzIgMTYuODc2NCAyOS4zMjAxIDE3LjM3NTggMjkuMTEzN0MxNy44NzUxIDI4LjkwNzIgMTguNDEwNCAyOC44MDE0IDE4Ljk1MDcgMjguODAyNUMyMC4wMDQxIDI4LjgwMjUgMjEuMDU3NCAyOS4yMDQxIDIxLjg2MDYgMzAuMDA1NkMyMi42MzA0IDMwLjc3ODMgMjMuMDYyNyAzMS44MjQ2IDIzLjA2MjcgMzIuOTE1NEMyMy4wNjI3IDM0LjAwNjIgMjIuNjMwNCAzNS4wNTI1IDIxLjg2MDYgMzUuODI1M1pNMzIuOTE1NiAyOC4wMDI2QzM1LjMzNSAyOC4wMDI2IDM3LjYwNzkgMjcuMDYxMiAzOS4zMTYzIDI1LjM1MjhDNDAuMTU5NyAyNC41MTQgNDAuODI4MyAyMy41MTYzIDQxLjI4MzQgMjIuNDE3M0M0MS43Mzg2IDIxLjMxODMgNDEuOTcxMSAyMC4xNCA0MS45Njc3IDE4Ljk1MDVDNDEuOTY3NyAxNi41MzI4IDQxLjAyNjMgMTQuMjU5OSAzOS4zMTYzIDEyLjU0OTlDMzcuNjA3OSAxMC44Mzk5IDM1LjMzMzQgOS44OTg0NCAzMi45MTU2IDkuODk4NDRDMzAuNDk3OSA5Ljg5ODQ0IDI4LjIyNSAxMC44Mzk5IDI2LjUxNSAxMi41NDk5QzI0LjgxOTUgMTQuMjQ4NSAyMy44NjcyIDE2LjU1MDUgMjMuODY3MiAxOC45NTA1QzIzLjg2NzIgMjEuMzUwNSAyNC44MTk1IDIzLjY1MjUgMjYuNTE1IDI1LjM1MTJDMjcuMzUzNiAyNi4xOTQ0IDI4LjM1MTEgMjYuODYyOSAyOS40NDk3IDI3LjMxOEMzMC41NDg0IDI3Ljc3MzEgMzEuNzI2NCAyOC4wMDU4IDMyLjkxNTYgMjguMDAyNlpNMzAuMDA1OCAxNi4wNDA3QzMwLjc4NDMgMTUuMjYzOSAzMS44MTc5IDE0LjgzNTkgMzIuOTE1NiAxNC44MzU5QzM0LjAxMzQgMTQuODM1OSAzNS4wNDcgMTUuMjYzOSAzNS44MjU1IDE2LjA0MDdDMzYuNjAzOSAxNi44MTc1IDM3LjAzMDIgMTcuODUxMSAzNy4wMzAyIDE4Ljk0ODlDMzcuMDMwMiAyMC4wNDgzIDM2LjYwMjMgMjEuMDgxOSAzNS44MjU1IDIxLjg1ODdDMzQuMjcwMiAyMy40MTI0IDMxLjU2MTEgMjMuNDEyNCAzMC4wMDU4IDIxLjg1ODdDMjkuMjM1MiAyMS4wODY3IDI4LjgwMjUgMjAuMDQwNSAyOC44MDI1IDE4Ljk0OTdDMjguODAyNSAxNy44NTg5IDI5LjIzNTIgMTYuODEyNyAzMC4wMDU4IDE2LjA0MDdaTTM5LjMxNjMgNTMuMjgyNkM0MC4xNTk1IDUyLjQ0NCA0MC44MjggNTEuNDQ2NSA0MS4yODMxIDUwLjM0NzlDNDEuNzM4MiA0OS4yNDkyIDQxLjk3MDkgNDguMDcxMiA0MS45Njc3IDQ2Ljg4MkM0MS45NzExIDQ1LjY5MjcgNDEuNzM4NSA0NC41MTQ2IDQxLjI4MzQgNDMuNDE2QzQwLjgyODIgNDIuMzE3MyA0MC4xNTk2IDQxLjMxOTggMzkuMzE2MyA0MC40ODEzQzM3LjYwNzkgMzguNzcxMyAzNS4zMzM0IDM3LjgzMTUgMzIuOTE1NiAzNy44MzE1QzMwLjQ5NzkgMzcuODMxNSAyOC4yMjUgMzguNzcyOSAyNi41MTUgNDAuNDgzQzI0LjgxOTUgNDIuMTgxNiAyMy44NjcyIDQ0LjQ4MzYgMjMuODY3MiA0Ni44ODM2QzIzLjg2NzIgNDkuMjgzNiAyNC44MTk1IDUxLjU4NTYgMjYuNTE1IDUzLjI4NDNDMjcuMzUzNiA1NC4xMjc1IDI4LjM1MTEgNTQuNzk2IDI5LjQ0OTcgNTUuMjUxMUMzMC41NDg0IDU1LjcwNjIgMzEuNzI2NCA1NS45Mzg5IDMyLjkxNTYgNTUuOTM1N0MzNC4xMDQ4IDU1LjkzNzggMzUuMjgyNiA1NS43MDQ0IDM2LjM4MTIgNTUuMjQ5MUMzNy40Nzk4IDU0Ljc5MzcgMzguNDc3MyA1NC4xMjU0IDM5LjMxNjMgNTMuMjgyNlpNMzAuMDA1OCA0OS43OTAxQzI5LjQzMjQgNDkuMjE0IDI5LjA0MjMgNDguNDgxMSAyOC44ODQ3IDQ3LjY4MzZDMjguNzI3MSA0Ni44ODYyIDI4LjgwOSA0Ni4wNTk5IDI5LjEyMDIgNDUuMzA5QzI5LjQzMTMgNDQuNTU4IDI5Ljk1NzggNDMuOTE2IDMwLjYzMzIgNDMuNDYzN0MzMS4zMDg2IDQzLjAxMTQgMzIuMTAyOCA0Mi43NjkxIDMyLjkxNTYgNDIuNzY3NEMzNC4wMTUgNDIuNzY3NCAzNS4wNDcgNDMuMTk1MyAzNS44MjU1IDQzLjk3MjFDMzYuNjAzOSA0NC43NDkgMzcuMDMwMiA0NS43ODI1IDM3LjAzMDIgNDYuODgyQzM3LjAzMDIgNDcuOTc5NyAzNi42MDIzIDQ5LjAxMzMgMzUuODI1NSA0OS43OTE4QzM0LjI2ODUgNTEuMzQzOCAzMS41NjExIDUxLjM0MzggMzAuMDA1OCA0OS43OTAxWk00MC40ODE1IDM5LjMxNjFDNDEuMzE5OSA0MC4xNTk2IDQyLjMxNzMgNDAuODI4MyA0My40MTYxIDQxLjI4MzRDNDQuNTE0OCA0MS43Mzg2IDQ1LjY5MjkgNDEuOTcxMSA0Ni44ODIyIDQxLjk2NzVDNDguMDcxNCA0MS45NzExIDQ5LjI0OTYgNDEuNzM4NiA1MC4zNDgzIDQxLjI4MzRDNTEuNDQ3IDQwLjgyODMgNTIuNDQ0NSA0MC4xNTk2IDUzLjI4MjggMzkuMzE2MUM1NC45NzgzIDM3LjYxNzQgNTUuOTMwNiAzNS4zMTU0IDU1LjkzMDYgMzIuOTE1NEM1NS45MzA2IDMwLjUxNTQgNTQuOTc4MyAyOC4yMTM0IDUzLjI4MjggMjYuNTE0OEM1Mi40NDQ0IDI1LjY3MTQgNTEuNDQ2OSAyNS4wMDI4IDUwLjM0ODIgMjQuNTQ3N0M0OS4yNDk1IDI0LjA5MjUgNDguMDcxNCAyMy44NTk5IDQ2Ljg4MjIgMjMuODYzM0M0NS42OTI5IDIzLjg1OTggNDQuNTE0OCAyNC4wOTIzIDQzLjQxNjEgMjQuNTQ3NEM0Mi4zMTczIDI1LjAwMjYgNDEuMzE5OSAyNS42NzEzIDQwLjQ4MTUgMjYuNTE0OEMzOC43ODYgMjguMjEzNCAzNy44MzM4IDMwLjUxNTQgMzcuODMzOCAzMi45MTU0QzM3LjgzMzggMzUuMzE1NCAzOC43ODYgMzcuNjE3NCA0MC40ODE1IDM5LjMxNjFaTTQzLjk3MjMgMzAuMDA1NkM0NC43NTA4IDI5LjIyODggNDUuNzgyOCAyOC44MDA4IDQ2Ljg4MjIgMjguODAwOEM0Ny45ODE2IDI4LjgwMDggNDkuMDEzNSAyOS4yMjg4IDQ5Ljc5MiAzMC4wMDU2QzUwLjU2MjcgMzAuNzc3OSA1MC45OTU1IDMxLjgyNDQgNTAuOTk1NSAzMi45MTU0QzUwLjk5NTUgMzQuMDA2NSA1MC41NjI3IDM1LjA1MjkgNDkuNzkyIDM1LjgyNTNDNDguMjM2NyAzNy4zNzg5IDQ1LjUyOTMgMzcuMzc4OSA0My45NzQgMzUuODI1M0M0My4yMDI3IDM1LjA1MzQgNDIuNzY5MyAzNC4wMDY5IDQyLjc2OSAzMi45MTU4QzQyLjc2ODcgMzEuODI0NiA0My4yMDE1IDMwLjc3NzkgNDMuOTcyMyAzMC4wMDU2WiIgZmlsbD0iIzJGMzQzNyIvPgo8L3N2Zz4K');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iNjYiIHZpZXdCb3g9IjAgMCA2NiA2NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYxLjcxODggNjAuODk1OEg1MC4xNjk5QzU5LjU1MTIgNTUuMDg5MyA2NS44MzMzIDQ0LjczNTQgNjUuODMzMyAzMi45MTY3QzY1LjgzMzMgMTQuNzY2NCA1MS4wNjY5IDAgMzIuOTE2NyAwQzE0Ljc2NjQgMCAwIDE0Ljc2NjQgMCAzMi45MTY3QzAgNTAuNTk5NSAxNC4wMjU4IDY1LjAyODUgMzEuNTMwOSA2NS43NjI2QzMxLjcxMzYgNjUuODA1NCAzMS44OTk1IDY1LjgzMzMgMzIuMDkzOCA2NS44MzMzSDYxLjcxODhDNjIuMzczNSA2NS44MzMzIDYzLjAwMTQgNjUuNTczMiA2My40NjQ0IDY1LjExMDNDNjMuOTI3NCA2NC42NDczIDY0LjE4NzUgNjQuMDE5MyA2NC4xODc1IDYzLjM2NDZDNjQuMTg3NSA2Mi43MDk4IDYzLjkyNzQgNjIuMDgxOSA2My40NjQ0IDYxLjYxODlDNjMuMDAxNCA2MS4xNTU5IDYyLjM3MzUgNjAuODk1OCA2MS43MTg4IDYwLjg5NThaTTQuOTM3NSAzMi45MTY3QzQuOTM3NSAxNy40ODg2IDE3LjQ4ODYgNC45Mzc1IDMyLjkxNjcgNC45Mzc1QzQ4LjM0NDcgNC45Mzc1IDYwLjg5NTggMTcuNDg4NiA2MC44OTU4IDMyLjkxNjdDNjAuODk1OCA0OC4zNDQ3IDQ4LjM0NDcgNjAuODk1OCAzMi45MTY3IDYwLjg5NThDMTcuNDg4NiA2MC44OTU4IDQuOTM3NSA0OC4zNDQ3IDQuOTM3NSAzMi45MTY3WiIgZmlsbD0iIzJGMzQzNyIvPgo8cGF0aCBkPSJNMjUuMzUxNCAyNi41MTQ4QzIzLjY1MjUgMjQuODE5NyAyMS4zNTA2IDIzLjg2NzcgMTguOTUwNyAyMy44Njc3QzE2LjU1MDggMjMuODY3NyAxNC4yNDkgMjQuODE5NyAxMi41NTAxIDI2LjUxNDhDMTAuODU0NiAyOC4yMTM0IDkuOTAyMzQgMzAuNTE1NCA5LjkwMjM0IDMyLjkxNTRDOS45MDIzNCAzNS4zMTU0IDEwLjg1NDYgMzcuNjE3NCAxMi41NTAxIDM5LjMxNjFDMTMuMzkwMSA0MC4xNTcxIDE0LjM4NzkgNDAuODIzOCAxNS40ODYzIDQxLjI3OEMxNi41ODQ4IDQxLjczMjEgMTcuNzYyMSA0MS45NjQ4IDE4Ljk1MDcgNDEuOTYyNkMyMC4xMzk2IDQxLjk2NDYgMjEuMzE3MSA0MS43MzE5IDIyLjQxNTggNDEuMjc3OEMyMy41MTQ1IDQwLjgyMzYgMjQuNTEyNiA0MC4xNTcgMjUuMzUzIDM5LjMxNjFDMjcuMDQ3MSAzNy42MTY2IDI3Ljk5ODIgMzUuMzE0NyAyNy45OTc5IDMyLjkxNTFDMjcuOTk3NiAzMC41MTU1IDI3LjA0NTkgMjguMjEzOCAyNS4zNTE0IDI2LjUxNDhaTTIxLjg2MDYgMzUuODI1M0MyMS4wODgzIDM2LjU5NTkgMjAuMDQxOCAzNy4wMjg3IDE4Ljk1MDcgMzcuMDI4N0MxNy44NTk3IDM3LjAyODcgMTYuODEzMiAzNi41OTU5IDE2LjA0MDkgMzUuODI1M0MxNS4yNzAyIDM1LjA1MjkgMTQuODM3NCAzNC4wMDY1IDE0LjgzNzQgMzIuOTE1NEMxNC44Mzc0IDMxLjgyNDQgMTUuMjcwMiAzMC43Nzc5IDE2LjA0MDkgMzAuMDA1NkMxNi40MjI4IDI5LjYyMzIgMTYuODc2NCAyOS4zMjAxIDE3LjM3NTggMjkuMTEzN0MxNy44NzUxIDI4LjkwNzIgMTguNDEwNCAyOC44MDE0IDE4Ljk1MDcgMjguODAyNUMyMC4wMDQxIDI4LjgwMjUgMjEuMDU3NCAyOS4yMDQxIDIxLjg2MDYgMzAuMDA1NkMyMi42MzA0IDMwLjc3ODMgMjMuMDYyNyAzMS44MjQ2IDIzLjA2MjcgMzIuOTE1NEMyMy4wNjI3IDM0LjAwNjIgMjIuNjMwNCAzNS4wNTI1IDIxLjg2MDYgMzUuODI1M1pNMzIuOTE1NiAyOC4wMDI2QzM1LjMzNSAyOC4wMDI2IDM3LjYwNzkgMjcuMDYxMiAzOS4zMTYzIDI1LjM1MjhDNDAuMTU5NyAyNC41MTQgNDAuODI4MyAyMy41MTYzIDQxLjI4MzQgMjIuNDE3M0M0MS43Mzg2IDIxLjMxODMgNDEuOTcxMSAyMC4xNCA0MS45Njc3IDE4Ljk1MDVDNDEuOTY3NyAxNi41MzI4IDQxLjAyNjMgMTQuMjU5OSAzOS4zMTYzIDEyLjU0OTlDMzcuNjA3OSAxMC44Mzk5IDM1LjMzMzQgOS44OTg0NCAzMi45MTU2IDkuODk4NDRDMzAuNDk3OSA5Ljg5ODQ0IDI4LjIyNSAxMC44Mzk5IDI2LjUxNSAxMi41NDk5QzI0LjgxOTUgMTQuMjQ4NSAyMy44NjcyIDE2LjU1MDUgMjMuODY3MiAxOC45NTA1QzIzLjg2NzIgMjEuMzUwNSAyNC44MTk1IDIzLjY1MjUgMjYuNTE1IDI1LjM1MTJDMjcuMzUzNiAyNi4xOTQ0IDI4LjM1MTEgMjYuODYyOSAyOS40NDk3IDI3LjMxOEMzMC41NDg0IDI3Ljc3MzEgMzEuNzI2NCAyOC4wMDU4IDMyLjkxNTYgMjguMDAyNlpNMzAuMDA1OCAxNi4wNDA3QzMwLjc4NDMgMTUuMjYzOSAzMS44MTc5IDE0LjgzNTkgMzIuOTE1NiAxNC44MzU5QzM0LjAxMzQgMTQuODM1OSAzNS4wNDcgMTUuMjYzOSAzNS44MjU1IDE2LjA0MDdDMzYuNjAzOSAxNi44MTc1IDM3LjAzMDIgMTcuODUxMSAzNy4wMzAyIDE4Ljk0ODlDMzcuMDMwMiAyMC4wNDgzIDM2LjYwMjMgMjEuMDgxOSAzNS44MjU1IDIxLjg1ODdDMzQuMjcwMiAyMy40MTI0IDMxLjU2MTEgMjMuNDEyNCAzMC4wMDU4IDIxLjg1ODdDMjkuMjM1MiAyMS4wODY3IDI4LjgwMjUgMjAuMDQwNSAyOC44MDI1IDE4Ljk0OTdDMjguODAyNSAxNy44NTg5IDI5LjIzNTIgMTYuODEyNyAzMC4wMDU4IDE2LjA0MDdaTTM5LjMxNjMgNTMuMjgyNkM0MC4xNTk1IDUyLjQ0NCA0MC44MjggNTEuNDQ2NSA0MS4yODMxIDUwLjM0NzlDNDEuNzM4MiA0OS4yNDkyIDQxLjk3MDkgNDguMDcxMiA0MS45Njc3IDQ2Ljg4MkM0MS45NzExIDQ1LjY5MjcgNDEuNzM4NSA0NC41MTQ2IDQxLjI4MzQgNDMuNDE2QzQwLjgyODIgNDIuMzE3MyA0MC4xNTk2IDQxLjMxOTggMzkuMzE2MyA0MC40ODEzQzM3LjYwNzkgMzguNzcxMyAzNS4zMzM0IDM3LjgzMTUgMzIuOTE1NiAzNy44MzE1QzMwLjQ5NzkgMzcuODMxNSAyOC4yMjUgMzguNzcyOSAyNi41MTUgNDAuNDgzQzI0LjgxOTUgNDIuMTgxNiAyMy44NjcyIDQ0LjQ4MzYgMjMuODY3MiA0Ni44ODM2QzIzLjg2NzIgNDkuMjgzNiAyNC44MTk1IDUxLjU4NTYgMjYuNTE1IDUzLjI4NDNDMjcuMzUzNiA1NC4xMjc1IDI4LjM1MTEgNTQuNzk2IDI5LjQ0OTcgNTUuMjUxMUMzMC41NDg0IDU1LjcwNjIgMzEuNzI2NCA1NS45Mzg5IDMyLjkxNTYgNTUuOTM1N0MzNC4xMDQ4IDU1LjkzNzggMzUuMjgyNiA1NS43MDQ0IDM2LjM4MTIgNTUuMjQ5MUMzNy40Nzk4IDU0Ljc5MzcgMzguNDc3MyA1NC4xMjU0IDM5LjMxNjMgNTMuMjgyNlpNMzAuMDA1OCA0OS43OTAxQzI5LjQzMjQgNDkuMjE0IDI5LjA0MjMgNDguNDgxMSAyOC44ODQ3IDQ3LjY4MzZDMjguNzI3MSA0Ni44ODYyIDI4LjgwOSA0Ni4wNTk5IDI5LjEyMDIgNDUuMzA5QzI5LjQzMTMgNDQuNTU4IDI5Ljk1NzggNDMuOTE2IDMwLjYzMzIgNDMuNDYzN0MzMS4zMDg2IDQzLjAxMTQgMzIuMTAyOCA0Mi43NjkxIDMyLjkxNTYgNDIuNzY3NEMzNC4wMTUgNDIuNzY3NCAzNS4wNDcgNDMuMTk1MyAzNS44MjU1IDQzLjk3MjFDMzYuNjAzOSA0NC43NDkgMzcuMDMwMiA0NS43ODI1IDM3LjAzMDIgNDYuODgyQzM3LjAzMDIgNDcuOTc5NyAzNi42MDIzIDQ5LjAxMzMgMzUuODI1NSA0OS43OTE4QzM0LjI2ODUgNTEuMzQzOCAzMS41NjExIDUxLjM0MzggMzAuMDA1OCA0OS43OTAxWk00MC40ODE1IDM5LjMxNjFDNDEuMzE5OSA0MC4xNTk2IDQyLjMxNzMgNDAuODI4MyA0My40MTYxIDQxLjI4MzRDNDQuNTE0OCA0MS43Mzg2IDQ1LjY5MjkgNDEuOTcxMSA0Ni44ODIyIDQxLjk2NzVDNDguMDcxNCA0MS45NzExIDQ5LjI0OTYgNDEuNzM4NiA1MC4zNDgzIDQxLjI4MzRDNTEuNDQ3IDQwLjgyODMgNTIuNDQ0NSA0MC4xNTk2IDUzLjI4MjggMzkuMzE2MUM1NC45NzgzIDM3LjYxNzQgNTUuOTMwNiAzNS4zMTU0IDU1LjkzMDYgMzIuOTE1NEM1NS45MzA2IDMwLjUxNTQgNTQuOTc4MyAyOC4yMTM0IDUzLjI4MjggMjYuNTE0OEM1Mi40NDQ0IDI1LjY3MTQgNTEuNDQ2OSAyNS4wMDI4IDUwLjM0ODIgMjQuNTQ3N0M0OS4yNDk1IDI0LjA5MjUgNDguMDcxNCAyMy44NTk5IDQ2Ljg4MjIgMjMuODYzM0M0NS42OTI5IDIzLjg1OTggNDQuNTE0OCAyNC4wOTIzIDQzLjQxNjEgMjQuNTQ3NEM0Mi4zMTczIDI1LjAwMjYgNDEuMzE5OSAyNS42NzEzIDQwLjQ4MTUgMjYuNTE0OEMzOC43ODYgMjguMjEzNCAzNy44MzM4IDMwLjUxNTQgMzcuODMzOCAzMi45MTU0QzM3LjgzMzggMzUuMzE1NCAzOC43ODYgMzcuNjE3NCA0MC40ODE1IDM5LjMxNjFaTTQzLjk3MjMgMzAuMDA1NkM0NC43NTA4IDI5LjIyODggNDUuNzgyOCAyOC44MDA4IDQ2Ljg4MjIgMjguODAwOEM0Ny45ODE2IDI4LjgwMDggNDkuMDEzNSAyOS4yMjg4IDQ5Ljc5MiAzMC4wMDU2QzUwLjU2MjcgMzAuNzc3OSA1MC45OTU1IDMxLjgyNDQgNTAuOTk1NSAzMi45MTU0QzUwLjk5NTUgMzQuMDA2NSA1MC41NjI3IDM1LjA1MjkgNDkuNzkyIDM1LjgyNTNDNDguMjM2NyAzNy4zNzg5IDQ1LjUyOTMgMzcuMzc4OSA0My45NzQgMzUuODI1M0M0My4yMDI3IDM1LjA1MzQgNDIuNzY5MyAzNC4wMDY5IDQyLjc2OSAzMi45MTU4QzQyLjc2ODcgMzEuODI0NiA0My4yMDE1IDMwLjc3NzkgNDMuOTcyMyAzMC4wMDU2WiIgZmlsbD0iIzJGMzQzNyIvPgo8L3N2Zz4K');
}

/* ── 面板布局（不覆盖 display:none，激活时用 flex）── */
#cs-panel-cinema {
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}
#cs-panel-cinema.cs-panel-active {
    display: flex !important;
}

/* ── Header：对齐纪念日/心情手账风格 ─────────────────── */
.cinema-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 10px;
    flex-shrink: 0;
}
.cinema-hd-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 2px;
}

/* ── 档案按钮图标（Vector.svg mask）──────────────────── */
.cinema-archive-icon {
    display: block;
    width: 22px;
    height: 20px;
    background-color: var(--text-primary);
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzEiIGhlaWdodD0iNjIiIHZpZXdCb3g9IjAgMCA3MSA2MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQ2LjA0MTcgMjEuMjVDNDYuNzQ2MiAyMS4yNSA0Ny40MjE4IDIxLjUyOTkgNDcuOTE5OSAyMi4wMjhDNDguNDE4MSAyMi41MjYxIDQ4LjY5NzkgMjMuMjAxOCA0OC42OTc5IDIzLjkwNjJDNDguNjk3OSAyNC42MTA3IDQ4LjQxODEgMjUuMjg2NCA0Ny45MTk5IDI1Ljc4NDVDNDcuNDIxOCAyNi4yODI2IDQ2Ljc0NjIgMjYuNTYyNSA0Ni4wNDE3IDI2LjU2MjVIMjQuNzkxN0MyNC4wODcyIDI2LjU2MjUgMjMuNDExNiAyNi4yODI2IDIyLjkxMzQgMjUuNzg0NUMyMi40MTUzIDI1LjI4NjQgMjIuMTM1NCAyNC42MTA3IDIyLjEzNTQgMjMuOTA2MkMyMi4xMzU0IDIzLjIwMTggMjIuNDE1MyAyMi41MjYxIDIyLjkxMzQgMjIuMDI4QzIzLjQxMTYgMjEuNTI5OSAyNC4wODcyIDIxLjI1IDI0Ljc5MTcgMjEuMjVINDYuMDQxN1pNNDYuMDQxNyAzNS40MTY3QzQ2Ljc0NjIgMzUuNDE2NyA0Ny40MjE4IDM1LjY5NjUgNDcuOTE5OSAzNi4xOTQ3QzQ4LjQxODEgMzYuNjkyOCA0OC42OTc5IDM3LjM2ODQgNDguNjk3OSAzOC4wNzI5QzQ4LjY5NzkgMzguNzc3NCA0OC40MTgxIDM5LjQ1MyA0Ny45MTk5IDM5Ljk1MTJDNDcuNDIxOCA0MC40NDkzIDQ2Ljc0NjIgNDAuNzI5MiA0Ni4wNDE3IDQwLjcyOTJIMjQuNzkxN0MyNC4wODcyIDQwLjcyOTIgMjMuNDExNiA0MC40NDkzIDIyLjkxMzQgMzkuOTUxMkMyMi40MTUzIDM5LjQ1MyAyMi4xMzU0IDM4Ljc3NzQgMjIuMTM1NCAzOC4wNzI5QzIyLjEzNTQgMzcuMzY4NCAyMi40MTUzIDM2LjY5MjggMjIuOTEzNCAzNi4xOTQ3QzIzLjQxMTYgMzUuNjk2NSAyNC4wODcyIDM1LjQxNjcgMjQuNzkxNyAzNS40MTY3SDQ2LjA0MTdaTTIuNjU2MjUgMjQuNzkxN0MxLjk1MTc3IDI0Ljc5MTcgMS4yNzYxNCAyNC41MTE4IDAuNzc3OTk3IDI0LjAxMzdDMC4yNzk4NTQgMjMuNTE1NSAwIDIyLjgzOTkgMCAyMi4xMzU0VjkuNzM5NThDMCA0LjM2MDY4IDQuMzYwNjggMCA5LjczOTU4IDBINjEuMDkzOEM2Ni40NzI3IDAgNzAuODMzMyA0LjM2MDY4IDcwLjgzMzMgOS43Mzk1OFYyMi4xMzU0QzcwLjgzMzMgMjIuODM5OSA3MC41NTM1IDIzLjUxNTUgNzAuMDU1MyAyNC4wMTM3QzY5LjU1NzIgMjQuNTExOCA2OC44ODE2IDI0Ljc5MTcgNjguMTc3MSAyNC43OTE3QzY2LjUzMzMgMjQuNzkxNyA2NC45NTY4IDI1LjQ0NDcgNjMuNzk0NSAyNi42MDdDNjIuNjMyMiAyNy43NjkzIDYxLjk3OTIgMjkuMzQ1OCA2MS45NzkyIDMwLjk4OTZDNjEuOTc5MiAzMi42MzM0IDYyLjYzMjIgMzQuMjA5OCA2My43OTQ1IDM1LjM3MjJDNjQuOTU2OCAzNi41MzQ1IDY2LjUzMzMgMzcuMTg3NSA2OC4xNzcxIDM3LjE4NzVDNjguODgxNiAzNy4xODc1IDY5LjU1NzIgMzcuNDY3NCA3MC4wNTUzIDM3Ljk2NTVDNzAuNTUzNSAzOC40NjM2IDcwLjgzMzMgMzkuMTM5MyA3MC44MzMzIDM5Ljg0MzhWNTIuMjM5NkM3MC44MzMzIDU3LjYxODUgNjYuNDcyNyA2MS45NzkyIDYxLjA5MzggNjEuOTc5Mkg5LjczOTU4QzQuMzYwNjggNjEuOTc5MiA4LjMwMDc4ZS0wOCA1Ny42MTg1IDAgNTIuMjM5NlYzOS44NDM4QzAgMzkuMTM5MyAwLjI3OTg1NCAzOC40NjM2IDAuNzc3OTk3IDM3Ljk2NTVDMS4yNzYxNCAzNy40Njc0IDEuOTUxNzcgMzcuMTg3NSAyLjY1NjI1IDM3LjE4NzVDNC4zMDAwNCAzNy4xODc1IDUuODc2NSAzNi41MzQ1IDcuMDM4ODQgMzUuMzcyMkM4LjIwMTE3IDM0LjIwOTggOC44NTQxNyAzMi42MzM0IDguODU0MTcgMzAuOTg5NkM4Ljg1NDE3IDI5LjM0NTggOC4yMDExNyAyNy43NjkzIDcuMDM4ODQgMjYuNjA3QzUuODc2NSAyNS40NDQ3IDQuMzAwMDQgMjQuNzkxNyAyLjY1NjI1IDI0Ljc5MTdaTTE0LjE2NjcgMzAuOTg5NkMxNC4xNjY3IDM2LjQzMjIgMTAuMzg4NiA0MC45OTMgNS4zMTI1IDQyLjE5MTlWNTIuMjM5NkM1LjMxMjUgNTIuODIxIDUuNDI3MDEgNTMuMzk2NiA1LjY0OTQ5IDUzLjkzMzhDNS44NzE5NyA1NC40NzA5IDYuMTk4MDcgNTQuOTU4OSA2LjYwOTE2IDU1LjM3QzcuMDIwMjUgNTUuNzgxMSA3LjUwODI5IDU2LjEwNzIgOC4wNDU0MSA1Ni4zMjk3QzguNTgyNTMgNTYuNTUyMiA5LjE1ODIxIDU2LjY2NjcgOS43Mzk1OCA1Ni42NjY3SDYxLjA5MzhDNjEuNjc1MSA1Ni42NjY3IDYyLjI1MDggNTYuNTUyMiA2Mi43ODc5IDU2LjMyOTdDNjMuMzI1IDU2LjEwNzIgNjMuODEzMSA1NS43ODExIDY0LjIyNDIgNTUuMzdDNjQuNjM1MyA1NC45NTg5IDY0Ljk2MTQgNTQuNDcwOSA2NS4xODM4IDUzLjkzMzhDNjUuNDA2MyA1My4zOTY2IDY1LjUyMDggNTIuODIxIDY1LjUyMDggNTIuMjM5NlY0Mi4xOTE5QzYwLjQ0NDcgNDAuOTkzIDU2LjY2NjcgMzYuNDMyMiA1Ni42NjY3IDMwLjk4OTZDNTYuNjY2NyAyNS41NDY5IDYwLjQ0NDcgMjAuOTg2MSA2NS41MjA4IDE5Ljc4NzNWOS43Mzk1OEM2NS41MjA4IDkuMTU4MjEgNjUuNDA2MyA4LjU4MjUzIDY1LjE4MzggOC4wNDU0MUM2NC45NjE0IDcuNTA4MjkgNjQuNjM1MyA3LjAyMDI2IDY0LjIyNDIgNi42MDkxNkM2My44MTMxIDYuMTk4MDcgNjMuMzI1IDUuODcxOTcgNjIuNzg3OSA1LjY0OTQ5QzYyLjI1MDggNS40MjcwMSA2MS42NzUxIDUuMzEyNSA2MS4wOTM4IDUuMzEyNUg5LjczOTU4QzkuMTU4MjEgNS4zMTI1IDguNTgyNTMgNS40MjcwMSA4LjA0NTQxIDUuNjQ5NDlDNy41MDgyOSA1Ljg3MTk3IDcuMDIwMjUgNi4xOTgwNyA2LjYwOTE2IDYuNjA5MTZDNi4xOTgwNyA3LjAyMDI2IDUuODcxOTcgNy41MDgyOSA1LjY0OTQ5IDguMDQ1NDFDNS40MjcwMSA4LjU4MjUzIDUuMzEyNSA5LjE1ODIxIDUuMzEyNSA5LjczOTU4VjE5Ljc4NzNDMTAuMzg4NiAyMC45ODYxIDE0LjE2NjcgMjUuNTQ2OSAxNC4xNjY3IDMwLjk4OTZaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzEiIGhlaWdodD0iNjIiIHZpZXdCb3g9IjAgMCA3MSA2MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQ2LjA0MTcgMjEuMjVDNDYuNzQ2MiAyMS4yNSA0Ny40MjE4IDIxLjUyOTkgNDcuOTE5OSAyMi4wMjhDNDguNDE4MSAyMi41MjYxIDQ4LjY5NzkgMjMuMjAxOCA0OC42OTc5IDIzLjkwNjJDNDguNjk3OSAyNC42MTA3IDQ4LjQxODEgMjUuMjg2NCA0Ny45MTk5IDI1Ljc4NDVDNDcuNDIxOCAyNi4yODI2IDQ2Ljc0NjIgMjYuNTYyNSA0Ni4wNDE3IDI2LjU2MjVIMjQuNzkxN0MyNC4wODcyIDI2LjU2MjUgMjMuNDExNiAyNi4yODI2IDIyLjkxMzQgMjUuNzg0NUMyMi40MTUzIDI1LjI4NjQgMjIuMTM1NCAyNC42MTA3IDIyLjEzNTQgMjMuOTA2MkMyMi4xMzU0IDIzLjIwMTggMjIuNDE1MyAyMi41MjYxIDIyLjkxMzQgMjIuMDI4QzIzLjQxMTYgMjEuNTI5OSAyNC4wODcyIDIxLjI1IDI0Ljc5MTcgMjEuMjVINDYuMDQxN1pNNDYuMDQxNyAzNS40MTY3QzQ2Ljc0NjIgMzUuNDE2NyA0Ny40MjE4IDM1LjY5NjUgNDcuOTE5OSAzNi4xOTQ3QzQ4LjQxODEgMzYuNjkyOCA0OC42OTc5IDM3LjM2ODQgNDguNjk3OSAzOC4wNzI5QzQ4LjY5NzkgMzguNzc3NCA0OC40MTgxIDM5LjQ1MyA0Ny45MTk5IDM5Ljk1MTJDNDcuNDIxOCA0MC40NDkzIDQ2Ljc0NjIgNDAuNzI5MiA0Ni4wNDE3IDQwLjcyOTJIMjQuNzkxN0MyNC4wODcyIDQwLjcyOTIgMjMuNDExNiA0MC40NDkzIDIyLjkxMzQgMzkuOTUxMkMyMi40MTUzIDM5LjQ1MyAyMi4xMzU0IDM4Ljc3NzQgMjIuMTM1NCAzOC4wNzI5QzIyLjEzNTQgMzcuMzY4NCAyMi40MTUzIDM2LjY5MjggMjIuOTEzNCAzNi4xOTQ3QzIzLjQxMTYgMzUuNjk2NSAyNC4wODcyIDM1LjQxNjcgMjQuNzkxNyAzNS40MTY3SDQ2LjA0MTdaTTIuNjU2MjUgMjQuNzkxN0MxLjk1MTc3IDI0Ljc5MTcgMS4yNzYxNCAyNC41MTE4IDAuNzc3OTk3IDI0LjAxMzdDMC4yNzk4NTQgMjMuNTE1NSAwIDIyLjgzOTkgMCAyMi4xMzU0VjkuNzM5NThDMCA0LjM2MDY4IDQuMzYwNjggMCA5LjczOTU4IDBINjEuMDkzOEM2Ni40NzI3IDAgNzAuODMzMyA0LjM2MDY4IDcwLjgzMzMgOS43Mzk1OFYyMi4xMzU0QzcwLjgzMzMgMjIuODM5OSA3MC41NTM1IDIzLjUxNTUgNzAuMDU1MyAyNC4wMTM3QzY5LjU1NzIgMjQuNTExOCA2OC44ODE2IDI0Ljc5MTcgNjguMTc3MSAyNC43OTE3QzY2LjUzMzMgMjQuNzkxNyA2NC45NTY4IDI1LjQ0NDcgNjMuNzk0NSAyNi42MDdDNjIuNjMyMiAyNy43NjkzIDYxLjk3OTIgMjkuMzQ1OCA2MS45NzkyIDMwLjk4OTZDNjEuOTc5MiAzMi42MzM0IDYyLjYzMjIgMzQuMjA5OCA2My43OTQ1IDM1LjM3MjJDNjQuOTU2OCAzNi41MzQ1IDY2LjUzMzMgMzcuMTg3NSA2OC4xNzcxIDM3LjE4NzVDNjguODgxNiAzNy4xODc1IDY5LjU1NzIgMzcuNDY3NCA3MC4wNTUzIDM3Ljk2NTVDNzAuNTUzNSAzOC40NjM2IDcwLjgzMzMgMzkuMTM5MyA3MC44MzMzIDM5Ljg0MzhWNTIuMjM5NkM3MC44MzMzIDU3LjYxODUgNjYuNDcyNyA2MS45NzkyIDYxLjA5MzggNjEuOTc5Mkg5LjczOTU4QzQuMzYwNjggNjEuOTc5MiA4LjMwMDc4ZS0wOCA1Ny42MTg1IDAgNTIuMjM5NlYzOS44NDM4QzAgMzkuMTM5MyAwLjI3OTg1NCAzOC40NjM2IDAuNzc3OTk3IDM3Ljk2NTVDMS4yNzYxNCAzNy40Njc0IDEuOTUxNzcgMzcuMTg3NSAyLjY1NjI1IDM3LjE4NzVDNC4zMDAwNCAzNy4xODc1IDUuODc2NSAzNi41MzQ1IDcuMDM4ODQgMzUuMzcyMkM4LjIwMTE3IDM0LjIwOTggOC44NTQxNyAzMi42MzM0IDguODU0MTcgMzAuOTg5NkM4Ljg1NDE3IDI5LjM0NTggOC4yMDExNyAyNy43NjkzIDcuMDM4ODQgMjYuNjA3QzUuODc2NSAyNS40NDQ3IDQuMzAwMDQgMjQuNzkxNyAyLjY1NjI1IDI0Ljc5MTdaTTE0LjE2NjcgMzAuOTg5NkMxNC4xNjY3IDM2LjQzMjIgMTAuMzg4NiA0MC45OTMgNS4zMTI1IDQyLjE5MTlWNTIuMjM5NkM1LjMxMjUgNTIuODIxIDUuNDI3MDEgNTMuMzk2NiA1LjY0OTQ5IDUzLjkzMzhDNS44NzE5NyA1NC40NzA5IDYuMTk4MDcgNTQuOTU4OSA2LjYwOTE2IDU1LjM3QzcuMDIwMjUgNTUuNzgxMSA3LjUwODI5IDU2LjEwNzIgOC4wNDU0MSA1Ni4zMjk3QzguNTgyNTMgNTYuNTUyMiA5LjE1ODIxIDU2LjY2NjcgOS43Mzk1OCA1Ni42NjY3SDYxLjA5MzhDNjEuNjc1MSA1Ni42NjY3IDYyLjI1MDggNTYuNTUyMiA2Mi43ODc5IDU2LjMyOTdDNjMuMzI1IDU2LjEwNzIgNjMuODEzMSA1NS43ODExIDY0LjIyNDIgNTUuMzdDNjQuNjM1MyA1NC45NTg5IDY0Ljk2MTQgNTQuNDcwOSA2NS4xODM4IDUzLjkzMzhDNjUuNDA2MyA1My4zOTY2IDY1LjUyMDggNTIuODIxIDY1LjUyMDggNTIuMjM5NlY0Mi4xOTE5QzYwLjQ0NDcgNDAuOTkzIDU2LjY2NjcgMzYuNDMyMiA1Ni42NjY3IDMwLjk4OTZDNTYuNjY2NyAyNS41NDY5IDYwLjQ0NDcgMjAuOTg2MSA2NS41MjA4IDE5Ljc4NzNWOS43Mzk1OEM2NS41MjA4IDkuMTU4MjEgNjUuNDA2MyA4LjU4MjUzIDY1LjE4MzggOC4wNDU0MUM2NC45NjE0IDcuNTA4MjkgNjQuNjM1MyA3LjAyMDI2IDY0LjIyNDIgNi42MDkxNkM2My44MTMxIDYuMTk4MDcgNjMuMzI1IDUuODcxOTcgNjIuNzg3OSA1LjY0OTQ5QzYyLjI1MDggNS40MjcwMSA2MS42NzUxIDUuMzEyNSA2MS4wOTM4IDUuMzEyNUg5LjczOTU4QzkuMTU4MjEgNS4zMTI1IDguNTgyNTMgNS40MjcwMSA4LjA0NTQxIDUuNjQ5NDlDNy41MDgyOSA1Ljg3MTk3IDcuMDIwMjUgNi4xOTgwNyA2LjYwOTE2IDYuNjA5MTZDNi4xOTgwNyA3LjAyMDI2IDUuODcxOTcgNy41MDgyOSA1LjY0OTQ5IDguMDQ1NDFDNS40MjcwMSA4LjU4MjUzIDUuMzEyNSA5LjE1ODIxIDUuMzEyNSA5LjczOTU4VjE5Ljc4NzNDMTAuMzg4NiAyMC45ODYxIDE0LjE2NjcgMjUuNTQ2OSAxNC4xNjY3IDMwLjk4OTZaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.65;
}

/* ── 中间可滚动区域 ──────────────────────────────────── */
.cinema-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 0 16px;
}

/* ── 空状态区域：幕布感 ──────────────────────────────── */
.cinema-screen-wrap {
    background: #111;
    border: 2px solid #2a2a2a;
    border-radius: 6px;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px 28px;
    min-height: 180px;
}
.cinema-empty-icon {
    font-size: 46px;
    color: rgba(255,255,255,0.18);
    margin-bottom: 10px;
}
.cinema-empty-text {
    font-size: 14px;
    color: rgba(255,255,255,0.38);
    margin-bottom: 20px;
}
.cinema-invite-btn {
    display: block;
    width: 100%;
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin: 4px 0 12px;
}
.cinema-invite-btn:active {
    opacity: 0.85;
    transform: scale(0.97);
}
.cinema-invite-btn:disabled {
    background: var(--border-color, #ccc);
    color: var(--text-secondary, #888);
    cursor: default;
    opacity: 0.7;
}
.cinema-invite-btn:disabled:active { transform: none; }
.cinema-cancel-invite-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-color, #ddd);
    color: var(--text-secondary, #888);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin: 8px 0 4px;
}
.cinema-cancel-invite-btn:active {
    opacity: 0.7;
    transform: scale(0.97);
}

/* ── 等待中（黑框内展示已选片名 + 锁定态提示） ─────────── */
.cinema-waiting-icon {
    font-size: 40px;
    color: rgba(255,255,255,0.22);
    margin-bottom: 10px;
}
.cinema-waiting-movie {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin-bottom: 6px;
    text-align: center;
}
.cinema-waiting-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
}

/* ── 约定卡片 ───────────────────────────────────────── */
.cinema-appt-card {
    background: var(--secondary-bg, #f8f8f8);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
}
.cinema-appt-badge {
    display: inline-block;
    font-size: 11px;
    color: var(--accent-color, #7BC8A4);
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 1px 7px;
    margin-bottom: 10px;
}
.cinema-appt-movie {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.cinema-appt-time {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 14px;
    letter-spacing: 0.03em;
}
.cinema-appt-actions {
    display: flex;
    gap: 10px;
}
.cinema-cancel-btn {
    flex: 1;
    padding: 9px 0;
    border: 1.5px solid var(--border-color, #ccc);
    border-radius: 50px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.cinema-start-btn {
    flex: 2;
    padding: 9px 0;
    border: none;
    border-radius: 50px;
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.cinema-start-btn:active,
.cinema-cancel-btn:active {
    opacity: 0.8;
    transform: scale(0.97);
}
.cinema-start-btn:disabled {
    background: var(--border-color, #ddd);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}
.cinema-appt-countdown {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.65;
    text-align: center;
    margin-top: 10px;
}

/* ── 聊天区：干净无边框，空状态提示 ──────────────────── */
.cinema-chat-area {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
/* 观影页视频+工具栏已经占掉大半高度，聊天区不能再强制最小80px，
   否则会把下面固定的"正在输入"槎位和输入栏挤出面板可视区（面板 overflow:hidden 会直接裁掉）*/
.cinema-body-watch .cinema-chat-area {
    min-height: 0;
}
.cinema-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    opacity: 0.35;
    padding: 24px;
    font-size: 13px;
    min-height: 80px;
}
.cinema-chat-empty i {
    font-size: 26px;
}

/* ── 输入栏：对齐主界面输入风格 ──────────────────────── */
.cinema-input-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    background: var(--input-area-bg, #ffffff);
    border-top: 1px solid var(--border-color, #e8e8e8);
}
.cinema-input-field {
    flex: 1;
    height: 36px;
    background: var(--secondary-bg, #f5f5f5);
    border: none;
    border-radius: 18px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}
.cinema-input-field::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}
.cinema-chat-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    opacity: 0.6;
}
.cinema-chat-btn:active {
    opacity: 0.4;
}

/* ── 观影中：视频外层留白容器，保证与其它状态的黑框左右间距一致 ── */
.cinema-watch-video-pad {
    padding: 0 16px;
    flex-shrink: 0;
}

/* ── 观影聊天：消息气泡（带头像）─────────────────────── */
.cinema-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 3px 0;
}
.cinema-msg-row.cinema-msg-mine {
    justify-content: flex-end;
}
.cinema-msg-row.cinema-msg-partner {
    justify-content: flex-start;
}
.cinema-msg-avatar {
    flex-shrink: 0;
}
/* 连续同一个人发的消息，"每条消息都显示头像"关闭时，除第一条外头像位置还留着，
   只是不显示——跟主聊天 .message-avatar.hidden 是同一个思路，保持左右对齐不跳动 */
.cinema-msg-avatar-invisible {
    visibility: hidden;
}
.cinema-msg-bubble {
    max-width: 68%;
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}
.cinema-msg-partner .cinema-msg-bubble {
    background: var(--secondary-bg, #f0f0f0);
    color: var(--text-primary);
    border-radius: 16px 16px 16px 4px;
}
.cinema-msg-img {
    max-width: 50%;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.cinema-msg-img img {
    width: 100%;
    display: block;
}

/* ── 观影聊天："正在输入"固定槎位（不随消息列表滚动，永远贴在输入栏上方）── */
.cinema-typing-fixed {
    flex-shrink: 0;
    padding: 4px 0 6px;
}
.cinema-typing-fixed .cinema-msg-row {
    padding: 0;
}

/* ── 观影聊天："正在输入"胶囊（对齐主聊天 typing-indicator 风格）── */
.cinema-typing-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(var(--secondary-bg-rgb, 255,255,255), 0.92);
    backdrop-filter: blur(20px) saturate(2);
    -webkit-backdrop-filter: blur(20px) saturate(2);
    border: 1px solid rgba(var(--accent-color-rgb, 123,200,164), 0.22);
    padding: 7px 14px 7px 7px;
    border-radius: 26px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
    animation: typingIndicatorIn 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}
.cinema-typing-pill-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid rgba(var(--accent-color-rgb, 123,200,164), 0.28);
}
.cinema-typing-pill-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-color, #7BC8A4);
    letter-spacing: 0.3px;
    opacity: 0.88;
    white-space: nowrap;
}

/* ── 观影聊天：表情面板（独立样式，不复用主聊天那套全局类，避免样式冲突）── */
.cinema-input-bar-wrap {
    position: relative;
    flex-shrink: 0;
}
.cinema-sticker-popover {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    max-height: 260px;
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 20;
}
.cinema-sticker-popover.active {
    display: flex;
}
.cinema-sticker-popover-hd {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 10px 12px 6px;
}
.cinema-sticker-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: start; /* 不要把多余的空白高度摊派给每一行，不然格子会被拉伸变形，不再是正方形 */
    gap: 8px;
    padding: 4px 12px 12px;
}
.cinema-sticker-item {
    position: relative;
    border-radius: 8px;
    background: var(--primary-bg, rgba(0,0,0,0.03));
    cursor: pointer;
    overflow: hidden;
}
.cinema-sticker-item::before {
    content: '';
    display: block;
    padding-top: 100%; /* 用百分比padding撑出正方形高度，比 aspect-ratio 兼容性更稳，不会再出现格子挤压变形的问题 */
}
.cinema-sticker-item:active {
    opacity: 0.7;
}
.cinema-sticker-item span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
}
.cinema-sticker-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cinema-sticker-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 12px;
    padding: 24px 10px;
}

/* ── 观影中：播放器（复用与空状态/等待状态一致的黑框）──── */
.cinema-player-wrap {
    position: relative;
    width: 100%;
    background: #111;
    border: 2px solid #2a2a2a;
    border-radius: 6px;
    margin: 12px 0;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    max-height: 42vw;
    overflow: hidden;
    cursor: pointer;
}
.cinema-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.cinema-video-iframe {
    border: none;
}

/* ── 嵌入视图下：右下角"进入沉浸模式"按钮 ─────────────── */
.cinema-immersive-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    z-index: 5;
}
.cinema-immersive-btn:active {
    opacity: 0.7;
}

/* ── 梦角"正在输入"提示 ──────────────────────────────── */
.cinema-msg-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 11px 14px;
}
.cinema-msg-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    animation: cinemaTypingBlink 1.1s infinite;
}
.cinema-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.cinema-msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cinemaTypingBlink {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}
.cinema-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    pointer-events: none;
}
.cinema-video-placeholder {
    text-align: center;
    color: rgba(255,255,255,0.5);
}
.cinema-video-placeholder i {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}
.cinema-video-placeholder p {
    font-size: 13px;
    margin: 0;
}

/* ── 观影工具栏 ─────────────────────────────────────── */
.cinema-watch-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color, #e8e8e8);
    flex-shrink: 0;
    gap: 8px;
}
.cinema-tool-btn {
    flex-shrink: 0;
    background: var(--secondary-bg, #f0f0f0);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
}
.cinema-tool-end {
    background: rgba(220, 80, 80, 0.12);
    color: #c04040;
}
.cinema-tool-btn:active { opacity: 0.75; }
.cinema-watch-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cinema-body-watch {
    flex: 1;
    padding: 0 16px;
}

/* ── 档案页 ─────────────────────────────────────────── */
.cinema-archive-page {
    position: absolute;
    inset: 0;
    background: var(--primary-bg, #f9f9f9);
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cinema-archive-page.cinema-archive-open {
    transform: translateX(0);
}
.cinema-archive-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 0;
    border-bottom: 1px solid var(--border-color, #e8e8e8);
    flex-shrink: 0;
}
.cinema-archive-back-btn {
    flex-shrink: 0;
    margin-bottom: 8px;
}
.cinema-archive-tab {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.cinema-archive-tab.active {
    color: var(--accent-color, #7BC8A4);
    border-bottom-color: var(--accent-color, #7BC8A4);
    font-weight: 600;
}
.cinema-archive-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 20px;
}
.cinema-archive-empty {
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.4;
    padding: 40px 0;
    font-size: 14px;
}

/* ── 待看清单 ───────────────────────────────────────── */
.cinema-wl-addrow {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.cinema-wl-add-input {
    flex: 1;
    height: 36px;
    background: var(--secondary-bg, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 18px;
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}
.cinema-wl-add-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.cinema-wl-add-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.cinema-wl-add-btn:active { opacity: 0.8; transform: scale(0.94); }

.cinema-wl-list { display: flex; flex-direction: column; }
.cinema-wl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border-color, #ececec);
}
.cinema-wl-item:last-child { border-bottom: none; }
.cinema-wl-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #ccc);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: transparent;
    font-size: 11px;
    transition: background 0.15s, border-color 0.15s;
}
.cinema-wl-watched .cinema-wl-check {
    background: var(--accent-color, #7BC8A4);
    border-color: var(--accent-color, #7BC8A4);
    color: #fff;
}
.cinema-wl-body { flex: 1; min-width: 0; }
.cinema-wl-title {
    font-size: 14px;
    color: var(--text-primary);
    word-break: break-word;
    margin-bottom: 4px;
}
.cinema-wl-watched .cinema-wl-title {
    color: var(--text-secondary);
    text-decoration: line-through;
    opacity: 0.6;
}
.cinema-wl-stars { display: flex; gap: 3px; }
.cinema-wl-star {
    font-size: 12px;
    color: var(--border-color, #ddd);
    cursor: pointer;
    transition: color 0.15s;
}
.cinema-wl-star.filled { color: #f5b942; }
.cinema-wl-delete {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cinema-wl-delete:active { opacity: 0.9; color: #c04040; }

/* ── 观看历史 ───────────────────────────────────────── */
.cinema-hist-list { display: flex; flex-direction: column; }
.cinema-hist-entry {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-color, #ececec);
    cursor: pointer;
}
.cinema-hist-entry:last-child { border-bottom: none; }
.cinema-hist-entry:active { background: rgba(var(--accent-color-rgb, 123,200,164), 0.06); }
.cinema-hist-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.cinema-hist-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-bottom: 8px;
}
.cinema-hist-reviews { display: flex; flex-direction: column; gap: 14px; }
.cinema-hist-person { display: flex; flex-direction: column; gap: 12px; }
.cinema-hist-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cinema-hist-person-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}
.cinema-hist-review-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}
.cinema-hist-review-empty {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.55;
    font-style: italic;
}

/* 卡片里只读的星星，跟在头像后面 */
.cinema-hist-stars {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.cinema-hist-stars .cinema-hist-star {
    font-size: 16px;
    color: var(--border-color, #ddd);
}
.cinema-hist-stars .cinema-hist-star.filled { color: #f5b942; }

/* 编辑弹层里可点击的大星星 */
.cinema-hist-stars-clickable {
    gap: 6px;
    margin: 2px 0 0;
}
.cinema-hist-stars-clickable .cinema-hist-star {
    font-size: 22px;
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
}
.cinema-hist-stars-clickable .cinema-hist-star:active { transform: scale(0.85); }

/* ── 观看历史：编辑弹层 ─────────────────────────────── */
.cinema-hist-edit-sheet {
    position: fixed;
    inset: 0;
    z-index: 9000;
}
.cinema-hist-edit-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.cinema-hist-edit-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--secondary-bg, #fff);
    border-radius: 18px 18px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}
.cinema-hist-edit-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.cinema-hist-edit-body .cinema-hist-edit-label:not(:first-child) { margin-top: 14px; }
.cinema-hist-edit-input {
    width: 100%;
    height: 38px;
    background: var(--primary-bg, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
}
.cinema-hist-edit-readonly {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--primary-bg, #f5f5f5);
    border-radius: 10px;
    padding: 10px 12px;
    opacity: 0.85;
}
.cinema-hist-edit-textarea {
    width: 100%;
    min-height: 70px;
    background: var(--primary-bg, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    resize: none;
}
.cinema-hist-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.cinema-hist-edit-cancel, .cinema-hist-edit-save {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.cinema-hist-edit-cancel {
    background: var(--primary-bg, #f0f0f0);
    color: var(--text-secondary);
}
.cinema-hist-edit-save {
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    font-weight: 500;
}
.cinema-hist-edit-cancel:active, .cinema-hist-edit-save:active { opacity: 0.8; transform: scale(0.97); }

/* ── 邀请弹层：片名 + 日期 + 时间 ───────────────────── */
.cinema-invite-sheet, .cinema-rating-sheet {
    position: fixed;
    inset: 0;
    z-index: 9000;
}
.cinema-invite-mask, .cinema-rating-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.cinema-invite-body, .cinema-rating-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--secondary-bg, #fff);
    border-radius: 18px 18px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
.cinema-invite-title, .cinema-rating-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.cinema-rating-sub {
    font-size: 12.5px;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-bottom: 14px;
}
.cinema-invite-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 14px 0 6px;
}
.cinema-invite-label:first-of-type { margin-top: 14px; }
.cinema-invite-input {
    width: 100%;
    height: 38px;
    background: var(--primary-bg, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
}
.cinema-invite-hint {
    font-size: 11.5px;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-top: 10px;
}
.cinema-test-source-link {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--accent-color, #7BC8A4);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    margin-top: 12px;
    padding: 4px 0;
}
.cinema-test-source-link:active {
    opacity: 0.7;
}

/* ── 测试片源：极简播放页，只有播放器居中 + 关闭按钮 ──────── */
.cinema-test-player-overlay {
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cinema-test-player-wrap {
    width: 100%;
    max-width: 100vw;
    aspect-ratio: 16 / 9;
}
.cinema-test-player-el {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    object-fit: contain;
}
.cinema-test-player-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 16px));
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}
.cinema-test-player-close:active {
    opacity: 0.7;
}
.cinema-test-player-hint {
    position: absolute;
    top: max(60px, calc(env(safe-area-inset-top, 0px) + 60px));
    left: 16px;
    right: 16px;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}
/* ── 选择影片来源：本地文件 / 输入网址 两个大按钮 ──────── */
.cinema-source-choice-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.cinema-source-choice-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    border: 1px solid var(--border-color, #eee);
    border-radius: 14px;
    background: var(--primary-bg, #f7f7f7);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}
.cinema-source-choice-btn i {
    font-size: 22px;
    color: var(--accent-color, #7BC8A4);
}
.cinema-source-choice-btn:active {
    opacity: 0.8;
    transform: scale(0.97);
}
#cinema-source-url-section {
    margin-top: 16px;
}
.cinema-invite-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cinema-help-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--accent-color-rgb, 123,200,164), 0.18);
    color: var(--accent-color, #5c9c7c);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: inherit;
}
.cinema-help-btn:active {
    opacity: 0.75;
}
.cinema-bili-help-body {
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cinema-bili-help-section {
    margin-top: 14px;
}
.cinema-bili-help-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.cinema-bili-help-text {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.cinema-bili-help-warn {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(224, 85, 79, 0.08);
    border-radius: 10px;
}
.cinema-bili-help-warn-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #e0554f;
    margin-bottom: 6px;
}
.cinema-bili-help-warn-item {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.cinema-bili-help-why {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    opacity: 0.85;
    font-style: italic;
}
.cinema-invite-error {
    font-size: 12px;
    color: #e0554f;
    margin-top: 8px;
    min-height: 14px;
}
.cinema-invite-actions, .cinema-rating-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.cinema-invite-cancel, .cinema-invite-confirm,
.cinema-rating-skip, .cinema-rating-save {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.cinema-invite-cancel, .cinema-rating-skip {
    background: var(--primary-bg, #f0f0f0);
    color: var(--text-secondary);
}
.cinema-invite-confirm, .cinema-rating-save {
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    font-weight: 500;
}
.cinema-invite-cancel:active, .cinema-invite-confirm:active,
.cinema-rating-skip:active, .cinema-rating-save:active { opacity: 0.8; transform: scale(0.97); }

/* ── 打分/写影评弹层：复用编辑弹层的星星样式(.cinema-hist-star) ── */
.cinema-rating-body #cinema-rating-stars.cinema-hist-stars-clickable,
.cinema-rating-body .cinema-hist-stars-clickable {
    margin: 4px 0 14px;
    justify-content: center;
    display: flex;
}
.cinema-rating-textarea {
    width: 100%;
    min-height: 70px;
    background: var(--primary-bg, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    resize: none;
}

/* ── 居中卡片式确认弹窗（结束观影等场景用，跟邀请/打分弹层同一套圆角卡片语言）── */
.cinema-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cinema-confirm-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.cinema-confirm-card {
    position: relative;
    width: 82%;
    max-width: 320px;
    background: var(--secondary-bg, #fff);
    border-radius: 20px;
    padding: 26px 22px 22px;
    text-align: center;
}
.cinema-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}
.cinema-confirm-desc {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.8;
    margin-top: 8px;
}
.cinema-confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.cinema-confirm-cancel, .cinema-confirm-ok {
    flex: 1;
    padding: 11px 0;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.cinema-confirm-cancel {
    background: var(--primary-bg, #f0f0f0);
    color: var(--text-secondary);
}
.cinema-confirm-ok {
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    font-weight: 600;
}
.cinema-confirm-cancel:active, .cinema-confirm-ok:active { opacity: 0.8; transform: scale(0.97); }

/* ── 主聊天里的电影邀请卡（由梦角发出）───────────────── */
/* 不再单独覆盖 flex-direction —— 直接用 .message-wrapper.sent/.received
   原本的 row/row-reverse，头像跟卡片横向并排，跟普通消息完全一样 */
.cinema-invite-msg-wrap .message-avatar img,
.cinema-invite-msg-wrap .message-avatar span {
    width: 100% !important;
    height: 100% !important;
}

/* 卡片本体：米白纸质感，圆角卡片，正常文档流撑高度（不再需要靠图片/写死高度）*/
.cinema-invite-card {
    position: relative;
    width: 250px;
    background: linear-gradient(160deg, #fdfbf2, #f6efdd);
    border: 1px solid rgba(60,54,38,0.08);
    border-radius: 20px;
    padding: 16px 18px 16px;
    box-shadow: 0 10px 26px rgba(60,54,38,0.14), 0 2px 6px rgba(60,54,38,0.06);
    overflow: hidden;
}
.cinema-invite-card-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cinema-invite-card-decor span {
    position: absolute;
    font-size: 15px;
    opacity: 0.5;
    filter: saturate(0.8);
}
.cinema-invite-card-decor .d1 { top: 10px;    left: 12px;   transform: rotate(-14deg); }
.cinema-invite-card-decor .d2 { top: 8px;     right: 14px;  transform: rotate(12deg); }
.cinema-invite-card-decor .d3 { bottom: 10px; left: 14px;   transform: rotate(10deg); font-size: 13px; }
.cinema-invite-card-decor .d4 { bottom: 12px; right: 12px;  transform: rotate(-10deg); font-size: 13px; }

.cinema-invite-card-banner {
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    margin: 2px auto 14px;
    background: #2b2820;
    color: #fdfbf2;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 3px;
    padding: 7px 20px;
    border-radius: 8px;
    transform: rotate(-2deg);
    box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}
.cinema-invite-card-movie {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 15.5px;
    font-weight: 700;
    color: #2b2820;
    line-height: 1.35;
    margin-bottom: 4px;
}
.cinema-invite-card-time {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #857c60;
    margin-bottom: 14px;
}
.cinema-invite-card-divider {
    position: relative;
    z-index: 1;
    border-top: 1.5px dashed rgba(60,54,38,0.18);
    margin: 0 -4px 14px;
}
.cinema-invite-card-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
}
.cinema-invite-card-btn {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: 50px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
.cinema-invite-card-btn--secondary {
    background: rgba(var(--accent-color-rgb, 123,200,164), 0.12);
    color: var(--accent-color, #5c9c7c);
}
.cinema-invite-card-btn--primary {
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb, 123,200,164), 0.4);
}
.cinema-invite-card-btn--decline {
    background: rgba(60,54,38,0.06);
    color: #8a8168;
}
.cinema-invite-card-actions--three .cinema-invite-card-btn {
    font-size: 11px;
    padding: 9px 0;
}
.cinema-invite-card-btn:active { opacity: 0.85; transform: scale(0.96); }
.cinema-invite-card-status {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #8a8168;
    background: rgba(60,54,38,0.05);
    padding: 9px 0;
    border-radius: 50px;
}
.cinema-invite-card-status--ok {
    color: var(--accent-color, #3f7d5f);
    background: rgba(var(--accent-color-rgb, 123,200,164), 0.16);
}
.cinema-invite-card-status--expired {
    color: #9a8f78;
    background: rgba(60,54,38,0.06);
}
.cinema-invite-card-status--declined {
    color: #9a8f78;
    background: rgba(60,54,38,0.06);
}

/* ── 电影院tab内直接回应面板：轮到用户回应梦角的提议时显示 ── */
.cinema-invite-response-card {
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--border-color, #eee);
    border-radius: 16px;
    padding: 16px;
    margin: 8px 0;
}
.cinema-invite-response-time {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.cinema-invite-response-actions {
    display: flex;
    gap: 8px;
}
.cinema-invite-resp-btn {
    flex: 1;
    padding: 11px 0;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.cinema-invite-resp-btn--decline {
    background: var(--primary-bg, #f0f0f0);
    color: var(--text-secondary, #888);
}
.cinema-invite-resp-btn--secondary {
    background: rgba(var(--accent-color-rgb, 123,200,164), 0.12);
    color: var(--accent-color, #5c9c7c);
}
.cinema-invite-resp-btn--primary {
    background: var(--accent-color, #7BC8A4);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--accent-color-rgb, 123,200,164), 0.35);
}
.cinema-invite-resp-btn:active { opacity: 0.85; transform: scale(0.96); }

/* 小红点：电影院tab图标 + 主聊天头部"情侣空间"入口，提醒有邀请等你回应 */
.cinema-invite-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    border: 1.5px solid var(--primary-bg, #fff);
    pointer-events: none;
}

/* ── 邀请卡：暗色模式独立配色（CINEMA招牌反相成白底黑字）───── */
html[data-theme="dark"] .cinema-invite-card {
    background: linear-gradient(160deg, #2c2b27, #201f1c);
    border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .cinema-invite-card-banner {
    background: #f2eee0;
    color: #201f1c;
    box-shadow: 0 5px 12px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .cinema-invite-card-movie {
    color: #f0ede0;
}
html[data-theme="dark"] .cinema-invite-card-time {
    color: #a89d80;
}
html[data-theme="dark"] .cinema-invite-card-divider {
    border-top-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .cinema-invite-card-btn--secondary,
html[data-theme="dark"] .cinema-invite-card-btn--decline {
    background: rgba(255,255,255,0.08);
    color: #d8d2c0;
}
html[data-theme="dark"] .cinema-invite-card-status,
html[data-theme="dark"] .cinema-invite-card-status--expired,
html[data-theme="dark"] .cinema-invite-card-status--declined {
    background: rgba(255,255,255,0.06);
    color: #a89d80;
}

/* ── 开场前提醒蒙层：仿照"梦角邀请陪伴"的黑色蒙层视觉，独立实现 ── */
.cinema-showtime-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(15,15,20,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cinemaShowtimeFadeIn 0.35s ease;
}
@keyframes cinemaShowtimeFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes cinemaShowtimePulseRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.25); opacity: 0; }
}
@keyframes cinemaShowtimeDot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
.cinema-showtime-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: #fff;
}
.cinema-showtime-avatar-wrap {
    position: relative;
    width: 96px;
    height: 96px;
}
.cinema-showtime-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-color-rgb, 123,200,164), 0.5);
    animation: cinemaShowtimePulseRing 1.6s ease-out infinite;
}
.cinema-showtime-ring--delay {
    inset: -14px;
    border-color: rgba(var(--accent-color-rgb, 123,200,164), 0.3);
    animation-delay: 0.5s;
}
.cinema-showtime-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.15);
    position: relative;
    z-index: 1;
}
.cinema-showtime-avatar img,
.cinema-showtime-avatar span {
    width: 100%;
    height: 100%;
}
.cinema-showtime-name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}
.cinema-showtime-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cinema-showtime-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color, #7BC8A4);
    animation: cinemaShowtimeDot 1.1s step-end infinite;
}
.cinema-showtime-line {
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    margin-top: 4px;
    font-size: 14px;
}
.cinema-showtime-line i {
    color: var(--accent-color, #7BC8A4);
    font-size: 18px;
}
.cinema-showtime-actions {
    display: flex;
    gap: 44px;
    margin-top: 26px;
}
.cinema-showtime-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
}
.cinema-showtime-btn-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.15s ease;
}
.cinema-showtime-btn:active .cinema-showtime-btn-circle { transform: scale(0.9); }
.cinema-showtime-btn-circle--later {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.cinema-showtime-btn-circle--go {
    background: linear-gradient(135deg, #8fd9b0, #63bd8f);
    box-shadow: 0 6px 20px rgba(99,189,143,0.45);
}
.cinema-showtime-btn span {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

/* ══════════════════════════════════════════
   情侣空间背景图模式下的电影院适配
   ══════════════════════════════════════════ */

/* 1. 档案页（影评/心愿单）：90% 透明底色 */
#couple-space-page.cs-with-bg .cinema-archive-page {
    background: rgba(var(--primary-bg-rgb), 0.9);
}

/* 2a. 等待状态：screen-wrap 与 appt-card 之间的间距缩短一半（去掉 appt-card 上边距）*/
.cinema-appt-card {
    margin-top: 0;
}
/* 2b. 约定卡片：90% 透明底色（上面的幕布黑框不动）*/
#couple-space-page.cs-with-bg .cinema-appt-card {
    background: rgba(var(--secondary-bg-rgb), 0.9);
}

/* 3. 嵌入观影模式（非沉浸）：工具栏 + 聊天区加 90% 黑底，保证可读性 */
#couple-space-page.cs-with-bg:not(.cinema-theater-mode) .cinema-watch-toolbar,
#couple-space-page.cs-with-bg:not(.cinema-theater-mode) .cinema-body-watch {
    background: rgba(0, 0, 0, 0.9);
}