/* 定制剧场 · 主界面装修主题
 * 所有选择器均限制在 #custom-theater-app，不影响③号子屏幕或相邻模块。
 */

#custom-theater-app {
    --ct-theme-image-opacity: 1;
    --ct-theme-saturation: 100%;
    --ct-theme-contrast: 100%;
}

#custom-theater-app .ct-background {
    opacity: var(--ct-theme-image-opacity);
    filter: saturate(var(--ct-theme-saturation)) contrast(var(--ct-theme-contrast));
    transition: opacity 220ms ease, filter 220ms ease;
}

#custom-theater-app[data-ct-theme="classic-studio"] .ct-background {
    background-color: #f0e6dc;
    background-image: url("assets/custom-theater-hk-collage-bg-v1.png?v=1.0.0");
}

#custom-theater-app[data-ct-theme="cyber-cinema"] {
    --ct-ink: #e7f3f4;
    --ct-ink-soft: #a9bec8;
    --ct-paper: #07111e;
    --ct-paper-soft: rgba(9, 22, 36, 0.92);
    --ct-blush: #d989c5;
    --ct-stone: #7692a3;
    --ct-taupe: #66717d;
    --ct-navy: #74dbe3;
    --ct-line: rgba(137, 209, 219, 0.22);
    background: #07111e;
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-background {
    background-color: #07111e;
    background-image: url("assets/custom-theater/theme-cyber-cinema-v1.webp?v=1.0.0");
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-background::after {
    background:
        linear-gradient(180deg, rgba(4, 12, 23, 0.1), rgba(4, 12, 23, 0.34)),
        radial-gradient(circle at 50% 41%, rgba(8, 24, 39, 0.06), rgba(4, 12, 23, 0.32) 74%);
}

#custom-theater-app[data-ct-theme="green-ink"] {
    --ct-ink: #344b44;
    --ct-ink-soft: #63786f;
    --ct-paper: #edf0e4;
    --ct-paper-soft: rgba(249, 248, 237, 0.91);
    --ct-blush: #a8c9ba;
    --ct-stone: #b8c8b7;
    --ct-taupe: #83958a;
    --ct-navy: #4f7168;
    --ct-line: rgba(52, 75, 68, 0.18);
    background: #edf0e4;
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-background {
    background-color: #edf0e4;
    background-image: url("assets/custom-theater/theme-green-ink-landscape-v1.webp?v=1.0.0");
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-background::after {
    background:
        linear-gradient(180deg, rgba(247, 247, 235, 0.08), rgba(238, 241, 226, 0.26)),
        radial-gradient(circle at 48% 43%, rgba(255, 253, 241, 0.22), transparent 65%);
}

/* 顶部与片场菜单 */
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-topbar {
    border-bottom: 1px solid rgba(116, 219, 227, 0.12);
    background: linear-gradient(180deg, rgba(4, 12, 23, 0.97), rgba(5, 17, 30, 0.82) 77%, rgba(5, 17, 30, 0));
    -webkit-backdrop-filter: blur(15px) saturate(116%);
    backdrop-filter: blur(15px) saturate(116%);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-topbar {
    border-bottom: 1px solid rgba(52, 75, 68, 0.09);
    background: linear-gradient(180deg, rgba(244, 244, 232, 0.96), rgba(244, 244, 232, 0.78) 77%, rgba(244, 244, 232, 0));
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-back,
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-drawer-close {
    border-color: rgba(116, 219, 227, 0.22);
    background: rgba(11, 31, 49, 0.7);
    box-shadow: inset 0 0 18px rgba(116, 219, 227, 0.05);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-back,
#custom-theater-app[data-ct-theme="green-ink"] .ct-drawer-close {
    border-color: rgba(52, 75, 68, 0.12);
    background: rgba(252, 250, 238, 0.62);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-edge-toggle {
    color: #dff9fa;
    border-color: rgba(116, 219, 227, 0.34);
    background: rgba(8, 30, 48, 0.94);
    box-shadow: 4px 5px 18px rgba(25, 199, 216, 0.12), inset -1px 0 rgba(217, 137, 197, 0.18);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-edge-toggle {
    color: #f7f5e9;
    border-color: rgba(52, 75, 68, 0.25);
    background: rgba(68, 101, 91, 0.9);
    box-shadow: 4px 5px 14px rgba(52, 75, 68, 0.14);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-drawer {
    color: var(--ct-ink);
    border-right-color: rgba(116, 219, 227, 0.22);
    background:
        linear-gradient(155deg, rgba(5, 16, 29, 0.98), rgba(14, 29, 46, 0.97)),
        #07111e;
    box-shadow: 20px 0 46px rgba(0, 0, 0, 0.5), 1px 0 rgba(217, 137, 197, 0.12);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-drawer {
    color: var(--ct-ink);
    border-right-color: rgba(52, 75, 68, 0.18);
    background:
        linear-gradient(155deg, rgba(247, 247, 235, 0.98), rgba(211, 224, 208, 0.97)),
        #edf0e4;
    box-shadow: 18px 0 42px rgba(52, 75, 68, 0.16);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-drawer-head,
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-drawer-boundary {
    border-color: rgba(116, 219, 227, 0.2);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-drawer-boundary {
    background: rgba(116, 219, 227, 0.055);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-drawer-boundary {
    background: rgba(255, 253, 241, 0.38);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-menu-item::after {
    color: rgba(116, 219, 227, 0.65);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-menu-item:hover,
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-menu-item:active,
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-menu-item.is-active {
    border-color: rgba(116, 219, 227, 0.2);
    background: linear-gradient(90deg, rgba(116, 219, 227, 0.09), rgba(217, 137, 197, 0.035));
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-menu-item:hover,
#custom-theater-app[data-ct-theme="green-ink"] .ct-menu-item:active,
#custom-theater-app[data-ct-theme="green-ink"] .ct-menu-item.is-active {
    border-color: rgba(52, 75, 68, 0.14);
    background: rgba(255, 253, 241, 0.46);
}

/* 场记板、编辑表单与工具页外壳 */
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-board-card,
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-editor-form,
#custom-theater-app[data-ct-theme="cyber-cinema"]:not(.ct-participants-view):not(.ct-memory-view):not(.ct-laomi-view) .ct-tool-panel {
    color: var(--ct-ink);
    border-color: rgba(116, 219, 227, 0.2);
    background: rgba(7, 22, 37, 0.84);
    box-shadow: 0 13px 34px rgba(0, 0, 0, 0.28), inset 0 0 28px rgba(116, 219, 227, 0.025);
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-board-card,
#custom-theater-app[data-ct-theme="green-ink"] .ct-editor-form,
#custom-theater-app[data-ct-theme="green-ink"]:not(.ct-participants-view):not(.ct-memory-view):not(.ct-laomi-view) .ct-tool-panel {
    color: var(--ct-ink);
    border-color: rgba(52, 75, 68, 0.17);
    background: rgba(247, 247, 236, 0.83);
    box-shadow: 0 12px 28px rgba(52, 75, 68, 0.1);
    -webkit-backdrop-filter: blur(12px) saturate(86%);
    backdrop-filter: blur(12px) saturate(86%);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-board-card::before {
    background-image: linear-gradient(rgba(116, 219, 227, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 219, 227, 0.05) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.38;
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-board-card::before {
    background-image: radial-gradient(rgba(52, 75, 68, 0.12) 0.55px, transparent 0.7px);
    opacity: 0.12;
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-clapper {
    border-color: rgba(116, 219, 227, 0.42);
    background: linear-gradient(145deg, #101d2c, #162b3c);
    box-shadow: 4px 5px 0 rgba(217, 137, 197, 0.14), 0 0 18px rgba(116, 219, 227, 0.08);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-clapper-arm {
    border-color: rgba(116, 219, 227, 0.42);
    background: repeating-linear-gradient(128deg, #102638 0 20px, #7fcbd1 20px 38px, #2b1c35 38px 45px);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-clapper {
    border-color: rgba(43, 69, 61, 0.46);
    background: #496a61;
    box-shadow: 4px 5px 0 rgba(131, 149, 138, 0.23);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-clapper-arm {
    border-color: rgba(43, 69, 61, 0.46);
    background: repeating-linear-gradient(128deg, #47675e 0 20px, #e7eadf 20px 39px);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-form-input,
#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-form-textarea {
    color: var(--ct-ink);
    border-color: rgba(116, 219, 227, 0.24);
    background: rgba(4, 15, 27, 0.75);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-form-input,
#custom-theater-app[data-ct-theme="green-ink"] .ct-form-textarea {
    color: var(--ct-ink);
    border-color: rgba(52, 75, 68, 0.2);
    background: rgba(255, 253, 242, 0.72);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-button:not(.ct-button--primary) {
    color: var(--ct-ink);
    border-color: rgba(116, 219, 227, 0.24);
    background: rgba(11, 31, 49, 0.72);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-button:not(.ct-button--primary) {
    color: var(--ct-ink);
    border-color: rgba(52, 75, 68, 0.2);
    background: rgba(255, 253, 242, 0.65);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-button--primary {
    color: #06131f;
    border-color: #74dbe3;
    background: #74dbe3;
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-button--primary {
    color: #f9f8ee;
    border-color: #4f7168;
    background: #4f7168;
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-status {
    color: #e7f3f4;
    border: 1px solid rgba(116, 219, 227, 0.22);
    background: rgba(5, 17, 30, 0.94);
}

#custom-theater-app[data-ct-theme="green-ink"] .ct-status {
    color: #f8f7ed;
    background: rgba(52, 75, 68, 0.94);
}

/* 剧场美化管理器 */
#custom-theater-app .ct-appearance-manager {
    display: grid;
    gap: 16px;
}

#custom-theater-app .ct-appearance-lead {
    padding: 2px 2px 1px;
}

#custom-theater-app .ct-appearance-lead > span {
    display: block;
    margin-bottom: 6px;
    color: var(--ct-ink-soft);
    font: 700 9px/1 "Courier New", monospace;
    letter-spacing: 0.18em;
}

#custom-theater-app .ct-appearance-lead > strong {
    display: block;
    font-size: 18px;
    letter-spacing: 0.08em;
}

#custom-theater-app .ct-appearance-lead > p {
    margin: 7px 0 0;
    color: var(--ct-ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

#custom-theater-app .ct-appearance-error {
    padding: 10px 12px;
    border: 1px solid rgba(170, 77, 77, 0.34);
    border-radius: 10px;
    color: #864d4d;
    background: rgba(255, 232, 228, 0.86);
    font-size: 10px;
    line-height: 1.55;
}

#custom-theater-app .ct-appearance-error[hidden] {
    display: none !important;
}

#custom-theater-app .ct-theme-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#custom-theater-app .ct-theme-fieldset legend {
    margin-bottom: 9px;
    padding: 0;
    color: var(--ct-ink-soft);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.12em;
}

#custom-theater-app .ct-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#custom-theater-app .ct-theme-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    color: var(--ct-ink);
    background: var(--ct-paper-soft);
    box-shadow: 0 7px 18px rgba(28, 39, 41, 0.08);
    cursor: pointer;
    touch-action: manipulation;
}

#custom-theater-app .ct-theme-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#custom-theater-app .ct-theme-card:has(input:checked) {
    border-color: var(--ct-navy);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct-navy) 18%, transparent), 0 8px 22px rgba(28, 39, 41, 0.12);
}

#custom-theater-app .ct-theme-card input:checked + .ct-theme-preview::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: #fff;
    background: rgba(38, 65, 67, 0.84);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    font: 800 12px/1 sans-serif;
}

#custom-theater-app .ct-theme-preview {
    position: relative;
    height: 112px;
    display: block;
    overflow: hidden;
    background-color: var(--ct-paper);
    background-position: center;
    background-size: cover;
}

#custom-theater-app .ct-theme-preview.is-cyber { background-image: url("assets/custom-theater/theme-cyber-cinema-v1.webp?v=1.0.0"); }
#custom-theater-app .ct-theme-preview.is-ink { background-image: url("assets/custom-theater/theme-green-ink-landscape-v1.webp?v=1.0.0"); }
#custom-theater-app .ct-theme-preview.is-classic { background-image: url("assets/custom-theater-hk-collage-bg-v1.png?v=1.0.0"); }

#custom-theater-app .ct-theme-preview i,
#custom-theater-app .ct-theme-preview b {
    position: absolute;
    display: block;
    pointer-events: none;
}

#custom-theater-app .ct-theme-preview i {
    inset: 20px 16px 17px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    background: rgba(246, 246, 238, 0.2);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#custom-theater-app .ct-theme-preview b {
    left: 28px;
    right: 28px;
    bottom: 29px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 -12px rgba(255, 255, 255, 0.44);
}

#custom-theater-app .ct-theme-card-copy {
    min-height: 121px;
    padding: 11px 12px 12px;
    display: flex;
    flex-direction: column;
}

#custom-theater-app .ct-theme-card-copy small {
    color: var(--ct-ink-soft);
    font: 700 8px/1 "Courier New", monospace;
    letter-spacing: 0.12em;
}

#custom-theater-app .ct-theme-card-copy strong {
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 0.07em;
}

#custom-theater-app .ct-theme-card-copy > span {
    margin-top: 6px;
    color: var(--ct-ink-soft);
    font-size: 9px;
    line-height: 1.55;
}

#custom-theater-app .ct-theme-card-copy em {
    margin-top: auto;
    padding-top: 9px;
    color: var(--ct-navy);
    font-size: 8px;
    font-style: normal;
    font-weight: 760;
}

#custom-theater-app .ct-presence-control {
    padding: 14px;
    border: 1px solid var(--ct-line);
    border-radius: 13px;
    background: var(--ct-paper-soft);
}

#custom-theater-app .ct-presence-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#custom-theater-app .ct-presence-head > span {
    min-width: 0;
    display: grid;
    gap: 4px;
}

#custom-theater-app .ct-presence-head strong {
    font-size: 12px;
}

#custom-theater-app .ct-presence-head small {
    color: var(--ct-ink-soft);
    font-size: 9px;
    line-height: 1.5;
}

#custom-theater-app .ct-presence-head output {
    flex: 0 0 auto;
    color: var(--ct-navy);
    font: 800 16px/1.15 "Courier New", monospace;
}

#custom-theater-app .ct-presence-control input[type="range"] {
    width: 100%;
    margin: 15px 0 10px;
    accent-color: var(--ct-navy);
}

#custom-theater-app .ct-presence-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

#custom-theater-app .ct-presence-presets button {
    min-height: 34px;
    border: 1px solid var(--ct-line);
    border-radius: 999px;
    color: var(--ct-ink-soft);
    background: transparent;
    font: 720 10px/1 sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}

#custom-theater-app .ct-presence-presets button.is-active {
    color: var(--ct-paper);
    border-color: var(--ct-navy);
    background: var(--ct-navy);
}

#custom-theater-app[data-ct-theme="cyber-cinema"] .ct-presence-presets button.is-active {
    color: #06131f;
}

#custom-theater-app .ct-appearance-boundary {
    padding: 11px 12px;
    display: grid;
    gap: 4px;
    border-left: 3px solid var(--ct-navy);
    color: var(--ct-ink-soft);
    background: color-mix(in srgb, var(--ct-paper-soft) 72%, transparent);
}

#custom-theater-app .ct-appearance-boundary strong {
    color: var(--ct-ink);
    font-size: 10px;
}

#custom-theater-app .ct-appearance-boundary span {
    font-size: 8px;
    line-height: 1.55;
}

#custom-theater-app .ct-appearance-manager.is-saving {
    cursor: progress;
}

#custom-theater-app .ct-theme-card:focus-within,
#custom-theater-app .ct-presence-presets button:focus-visible,
#custom-theater-app .ct-presence-control input[type="range"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ct-navy) 34%, transparent);
    outline-offset: 2px;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #custom-theater-app[data-ct-theme="cyber-cinema"] .ct-board-card,
    #custom-theater-app[data-ct-theme="cyber-cinema"] .ct-editor-form,
    #custom-theater-app[data-ct-theme="cyber-cinema"]:not(.ct-participants-view):not(.ct-memory-view):not(.ct-laomi-view) .ct-tool-panel {
        background: #0b1a2a;
    }
    #custom-theater-app[data-ct-theme="green-ink"] .ct-board-card,
    #custom-theater-app[data-ct-theme="green-ink"] .ct-editor-form,
    #custom-theater-app[data-ct-theme="green-ink"]:not(.ct-participants-view):not(.ct-memory-view):not(.ct-laomi-view) .ct-tool-panel {
        background: #f3f4e8;
    }
}

@media (min-width: 470px) {
    #custom-theater-app .ct-theme-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 350px) {
    #custom-theater-app .ct-theme-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    #custom-theater-app .ct-theme-preview {
        height: 102px;
    }
    #custom-theater-app .ct-theme-card-copy {
        min-height: 0;
    }
}

@media (max-height: 620px) {
    #custom-theater-app .ct-appearance-manager { gap: 11px; }
    #custom-theater-app .ct-theme-preview { height: 92px; }
    #custom-theater-app .ct-theme-card-copy { min-height: 103px; }
}

@media (prefers-reduced-motion: reduce) {
    #custom-theater-app .ct-background {
        transition: none !important;
    }
}

@media (prefers-contrast: more) {
    #custom-theater-app[data-ct-theme="cyber-cinema"] .ct-board-card,
    #custom-theater-app[data-ct-theme="cyber-cinema"] .ct-editor-form,
    #custom-theater-app[data-ct-theme="cyber-cinema"]:not(.ct-participants-view):not(.ct-memory-view):not(.ct-laomi-view) .ct-tool-panel {
        border-color: rgba(160, 236, 241, 0.72);
        background: rgba(4, 14, 26, 0.97);
    }
    #custom-theater-app[data-ct-theme="green-ink"] .ct-board-card,
    #custom-theater-app[data-ct-theme="green-ink"] .ct-editor-form,
    #custom-theater-app[data-ct-theme="green-ink"]:not(.ct-participants-view):not(.ct-memory-view):not(.ct-laomi-view) .ct-tool-panel {
        border-color: rgba(52, 75, 68, 0.52);
        background: rgba(250, 249, 239, 0.97);
    }
}