/* 定制剧场 · 完全独立界面
 * 仅作用于 #custom-theater-app，不覆盖③号子屏或相邻功能。
 */
#custom-theater-app {
    --ct-ink: #313844;
    --ct-ink-soft: #59606a;
    --ct-paper: #f0e6dc;
    --ct-paper-soft: rgba(250, 245, 238, 0.9);
    --ct-blush: #f4cece;
    --ct-stone: #c4b8a8;
    --ct-taupe: #8a8379;
    --ct-navy: #465160;
    --ct-line: rgba(49, 56, 68, 0.19);
    --ct-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --ct-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    --ct-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --ct-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
    position: absolute;
    inset: 0;
    z-index: 6800;
    overflow: hidden;
    color: var(--ct-ink);
    background: var(--ct-paper);
    font-family: "Noto Serif SC", "Songti SC", "STSong", "Microsoft YaHei", sans-serif;
    isolation: isolate;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

.ct-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: #f0e6dc;
    background-image: url("assets/custom-theater-hk-collage-bg-v1.png?v=1.0.0");
    background-position: center;
    background-size: cover;
    transform: scale(1.012);
}

.ct-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(240, 230, 220, 0.16), rgba(240, 230, 220, 0.34)),
        radial-gradient(circle at 50% 38%, rgba(255, 250, 243, 0.32), transparent 57%);
}

#custom-theater-app.ct-background-quiet .ct-background {
    filter: saturate(72%) contrast(86%);
}

#custom-theater-app.ct-background-quiet .ct-background::after {
    background: rgba(240, 230, 220, 0.5);
}

.ct-topbar {
    position: absolute;
    inset: 0 0 auto;
    z-index: 24;
    box-sizing: border-box;
    min-height: calc(54px + var(--ct-safe-top));
    padding: var(--ct-safe-top) max(12px, var(--ct-safe-right)) 0 max(12px, var(--ct-safe-left));
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    background: linear-gradient(180deg, rgba(240, 230, 220, 0.97), rgba(240, 230, 220, 0.79) 76%, rgba(240, 230, 220, 0));
    -webkit-backdrop-filter: blur(12px) saturate(86%);
    backdrop-filter: blur(12px) saturate(86%);
}

.ct-back {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--ct-ink);
    background: rgba(255, 250, 243, 0.42);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ct-back svg {
    width: 23px;
    height: 23px;
}

.ct-topbar-title {
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 760;
    letter-spacing: 0.2em;
}

.ct-topbar-blank {
    width: 44px;
    height: 44px;
}

.ct-main {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding:
        calc(var(--ct-safe-top) + 68px)
        max(15px, calc(var(--ct-safe-right) + 15px))
        calc(var(--ct-safe-bottom) + 30px)
        max(27px, calc(var(--ct-safe-left) + 27px));
}

/* 新增剧目、剧场美化、剧目记忆、剧演设置：滚动条隐形，保留触控/滚轮滚动 */
#custom-theater-app.ct-hide-main-scrollbar .ct-main,
#custom-theater-app.ct-appearance-view .ct-main,
#custom-theater-app.ct-memory-view .ct-main,
#custom-theater-app.ct-settings-view .ct-main,
#custom-theater-app .ct-main:has(.ct-editor-view:not([hidden])),
#custom-theater-app .ct-main:has(.ctf-script-screen),
#custom-theater-app .ct-main:has(.ct-tool-view:not([hidden]) .ct-palette),
#custom-theater-app .ct-main:has(.ct-tool-view:not([hidden]) .ctm2-manager),
#custom-theater-app .ct-main:has(.ct-tool-view:not([hidden]) .ct-api-manager) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#custom-theater-app.ct-hide-main-scrollbar .ct-main::-webkit-scrollbar,
#custom-theater-app.ct-appearance-view .ct-main::-webkit-scrollbar,
#custom-theater-app.ct-memory-view .ct-main::-webkit-scrollbar,
#custom-theater-app.ct-settings-view .ct-main::-webkit-scrollbar,
#custom-theater-app .ct-main:has(.ct-editor-view:not([hidden]))::-webkit-scrollbar,
#custom-theater-app .ct-main:has(.ctf-script-screen)::-webkit-scrollbar,
#custom-theater-app .ct-main:has(.ct-tool-view:not([hidden]) .ct-palette)::-webkit-scrollbar,
#custom-theater-app .ct-main:has(.ct-tool-view:not([hidden]) .ctm2-manager)::-webkit-scrollbar,
#custom-theater-app .ct-main:has(.ct-tool-view:not([hidden]) .ct-api-manager)::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

.ct-view[hidden] {
    display: none !important;
}

.ct-home-intro {
    position: relative;
    margin: 4px 4px 22px;
    padding: 0 0 14px;
}

.ct-home-kicker {
    margin: 0 0 7px;
    color: var(--ct-ink-soft);
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ct-home-heading {
    margin: 0;
    font-size: clamp(25px, 7vw, 33px);
    font-weight: 820;
    letter-spacing: 0.1em;
    line-height: 1.12;
}

.ct-home-copy {
    max-width: 26em;
    margin: 9px 0 0;
    color: var(--ct-ink-soft);
    font-size: 11px;
    line-height: 1.65;
}

.ct-home-intro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 74px;
    height: 3px;
    background: linear-gradient(90deg, var(--ct-navy) 0 62%, var(--ct-blush) 62%);
    transform: rotate(-1deg);
}

.ct-storage-alert {
    display: none;
    margin: 0 4px 14px;
    padding: 10px 12px;
    border: 1px solid rgba(111, 68, 68, 0.22);
    border-radius: 10px;
    color: #6f4444;
    background: rgba(244, 206, 206, 0.68);
    font-size: 11px;
    line-height: 1.5;
}

.ct-storage-alert.is-visible {
    display: block;
}

.ct-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-timeline::before {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: clamp(59px, 18vw, 72px);
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(49, 56, 68, 0.48) 0 8px, transparent 8px 14px);
}

.ct-production-empty {
    display: grid;
    min-height: 190px;
    place-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed rgba(49, 56, 68, 0.24);
    border-radius: 6px;
    color: var(--ct-ink-soft);
    text-align: center;
}

.ct-production-empty strong { color: var(--ct-navy); font-size: 16px; }
.ct-production-empty p { margin: 0 0 8px; font-size: 11px; line-height: 1.55; }

.ct-timeline-item {
    position: relative;
    margin: 0 0 24px;
}

.ct-timeline-item:last-child {
    margin-bottom: 0;
}

.ct-timeline-dot {
    position: absolute;
    z-index: 3;
    top: 21px;
    left: clamp(54px, calc(18vw - 5px), 67px);
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 2px solid var(--ct-paper);
    border-radius: 50%;
    background: var(--ct-navy);
    box-shadow: 0 0 0 1px rgba(49, 56, 68, 0.42);
}

.ct-board-card {
    position: relative;
    box-sizing: border-box;
    min-height: 176px;
    display: grid;
    grid-template-columns: minmax(114px, 38%) minmax(0, 1fr);
    gap: 11px;
    padding: 13px 12px 13px 8px;
    border: 1px solid rgba(75, 72, 70, 0.2);
    border-radius: 3px 16px 16px 3px;
    background: rgba(245, 238, 229, 0.83);
    box-shadow: 0 11px 26px rgba(63, 58, 55, 0.12);
    -webkit-backdrop-filter: blur(10px) saturate(86%);
    backdrop-filter: blur(10px) saturate(86%);
}

.ct-board-card {
    -webkit-touch-callout: none;
}

.ct-board-card.is-deleting {
    opacity: 0.58;
    pointer-events: none;
}

.ct-delete-layer {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px calc(env(safe-area-inset-bottom, 0px) + 22px);
}

.ct-delete-scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 13, 11, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ct-delete-dialog {
    position: relative;
    width: min(100%, 340px);
    box-sizing: border-box;
    padding: 24px 22px 20px;
    border: 1px solid rgba(74, 52, 39, 0.22);
    border-radius: 20px;
    background: #f4eee3;
    color: #251c17;
    box-shadow: 0 24px 60px rgba(12, 8, 6, 0.34);
}

.ct-delete-dialog h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.ct-delete-dialog p {
    margin: 13px 0 20px;
    color: rgba(37, 28, 23, 0.74);
    font-size: 14px;
    line-height: 1.7;
}

.ct-delete-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ct-button--danger {
    border-color: #963c34;
    background: #963c34;
    color: #fff8f3;
}

.ct-board-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: radial-gradient(rgba(49, 56, 68, 0.13) 0.55px, transparent 0.7px);
    background-size: 5px 5px;
    opacity: 0.18;
}

.ct-clapper-button {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 150px;
    padding: 0;
    border: 0;
    color: #eee8de;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ct-clapper {
    position: absolute;
    inset: 10px 0 0;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid rgba(24, 31, 40, 0.5);
    border-radius: 2px 2px 4px 4px;
    background: #465160;
    box-shadow: 4px 5px 0 rgba(138, 131, 121, 0.25);
}

.ct-clapper-arm {
    position: absolute;
    z-index: 2;
    top: -12px;
    left: -2px;
    width: calc(100% + 4px);
    height: 28px;
    border: 1px solid rgba(24, 31, 40, 0.55);
    border-radius: 3px 4px 1px 1px;
    background: repeating-linear-gradient(128deg, #36404d 0 20px, #e5ddd2 20px 39px);
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.12) inset;
    transform: rotate(-7deg);
    transform-origin: 7px 100%;
}

.ct-clapper-hinge {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ct-stone);
    box-shadow: 0 0 0 2px rgba(26, 32, 40, 0.4);
}

.ct-clapper-body {
    position: absolute;
    inset: 21px 0 0;
    padding: 10px 7px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-clapper-rule {
    height: 1px;
    background: rgba(238, 232, 222, 0.68);
}

.ct-clapper-rule--short {
    width: 64%;
}

.ct-clapper-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.ct-clapper-mini-grid span {
    height: 18px;
    border: 1px solid rgba(238, 232, 222, 0.55);
}

.ct-clapper-status {
    margin-top: auto;
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
}

.ct-board-card.has-data .ct-clapper,
.ct-editor-board.has-data .ct-clapper {
    background: #3b4654;
}

.ct-timeline-item.has-data .ct-timeline-dot {
    background: var(--ct-blush);
}

.ct-board-info {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 2px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ct-board-number {
    align-self: flex-start;
    margin: 0 0 7px;
    padding: 3px 7px 2px;
    border: 1px solid rgba(49, 56, 68, 0.26);
    border-radius: 999px;
    color: var(--ct-ink-soft);
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ct-board-fields {
    margin: 0;
}

.ct-board-field {
    min-width: 0;
    display: grid;
    grid-template-columns: 4em minmax(0, 1fr);
    align-items: end;
    gap: 6px;
    padding: 5px 0 4px;
    border-bottom: 1px solid var(--ct-line);
}

.ct-board-field dt {
    color: var(--ct-ink-soft);
    font-size: 9px;
    font-weight: 690;
    letter-spacing: 0.08em;
}

.ct-board-field dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
}

.ct-field-empty {
    color: rgba(89, 96, 106, 0.5);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.ct-edge-toggle {
    position: absolute;
    z-index: 35;
    top: calc(var(--ct-safe-top) + 106px);
    left: var(--ct-safe-left);
    box-sizing: border-box;
    width: 23px;
    min-height: 78px;
    padding: 9px 3px;
    border: 1px solid rgba(49, 56, 68, 0.29);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    color: var(--ct-paper);
    background: rgba(70, 81, 96, 0.93);
    box-shadow: 4px 5px 13px rgba(49, 56, 68, 0.17);
    font: 700 9px/1.25 "Microsoft YaHei", sans-serif;
    letter-spacing: 0.12em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ct-edge-toggle span {
    display: block;
    margin: 0 auto;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.ct-drawer-layer {
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.ct-drawer-scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(38, 40, 44, 0.28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 180ms ease;
}

.ct-drawer {
    position: absolute;
    inset: 0 auto 0 0;
    box-sizing: border-box;
    width: min(82vw, 316px);
    padding:
        calc(var(--ct-safe-top) + 19px)
        16px
        calc(var(--ct-safe-bottom) + 18px)
        max(16px, calc(var(--ct-safe-left) + 16px));
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--ct-ink);
    background:
        linear-gradient(160deg, rgba(240, 230, 220, 0.98), rgba(196, 184, 168, 0.96)),
        #f0e6dc;
    border-right: 1px solid rgba(49, 56, 68, 0.21);
    box-shadow: 18px 0 42px rgba(49, 56, 68, 0.2);
    transform: translateX(-104%);
    transition: transform 210ms cubic-bezier(.2, .7, .2, 1);
}

.ct-drawer-layer.is-open {
    pointer-events: auto;
}

.ct-drawer-layer.is-open .ct-drawer-scrim {
    opacity: 1;
}

.ct-drawer-layer.is-open .ct-drawer {
    transform: translateX(0);
}

.ct-drawer-head {
    position: relative;
    padding: 5px 44px 17px 3px;
    border-bottom: 1px solid rgba(49, 56, 68, 0.2);
}

.ct-drawer-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--ct-ink-soft);
    font: 700 9px/1 "Courier New", monospace;
    letter-spacing: 0.18em;
}

.ct-drawer-title {
    margin: 0;
    font-size: 23px;
    letter-spacing: 0.08em;
}

.ct-drawer-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(49, 56, 68, 0.18);
    border-radius: 50%;
    color: inherit;
    background: rgba(255, 250, 243, 0.42);
    font-size: 22px;
    cursor: pointer;
    touch-action: manipulation;
}

.ct-drawer-boundary {
    margin: 13px 1px 14px;
    padding: 9px 10px;
    border-left: 3px solid var(--ct-navy);
    color: var(--ct-ink-soft);
    background: rgba(255, 250, 243, 0.34);
    font-size: 9px;
    line-height: 1.5;
}

.ct-menu {
    display: grid;
    gap: 6px;
}

.ct-menu-item {
    position: relative;
    min-height: 51px;
    padding: 9px 34px 9px 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.ct-menu-item::after {
    content: "›";
    position: absolute;
    right: 12px;
    color: rgba(49, 56, 68, 0.54);
    font-size: 22px;
}

.ct-menu-item:hover,
.ct-menu-item:active,
.ct-menu-item.is-active {
    border-color: rgba(49, 56, 68, 0.15);
    background: rgba(255, 250, 243, 0.42);
}

.ct-menu-index {
    flex: 0 0 25px;
    font: 700 10px/1 "Courier New", monospace;
    color: var(--ct-navy);
}

.ct-menu-copy {
    min-width: 0;
}

.ct-menu-label {
    display: block;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: 0.06em;
}

.ct-menu-note {
    display: block;
    margin-top: 3px;
    color: var(--ct-ink-soft);
    font-size: 8px;
    line-height: 1.25;
}

.ct-editor-shell,
.ct-tool-shell {
    max-width: 520px;
    margin: 0 auto;
}

.ct-editor-board {
    position: relative;
    width: min(78%, 290px);
    height: 168px;
    margin: 13px auto 24px;
}

.ct-editor-board .ct-clapper-button {
    width: 100%;
    height: 100%;
}

.ct-editor-form,
.ct-tool-panel {
    padding: 17px 16px 18px;
    border: 1px solid rgba(49, 56, 68, 0.18);
    border-radius: 16px 4px 16px 4px;
    background: rgba(245, 238, 229, 0.87);
    box-shadow: 0 11px 30px rgba(63, 58, 55, 0.12);
    -webkit-backdrop-filter: blur(10px) saturate(86%);
    backdrop-filter: blur(10px) saturate(86%);
}

.ct-form-field {
    display: block;
    margin-bottom: 14px;
}

.ct-form-field:last-of-type {
    margin-bottom: 18px;
}

.ct-form-label {
    display: block;
    margin: 0 0 6px;
    color: var(--ct-ink-soft);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.12em;
}

.ct-form-input,
.ct-form-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 45px;
    padding: 10px 11px;
    border: 1px solid rgba(49, 56, 68, 0.22);
    border-radius: 5px;
    color: var(--ct-ink);
    background: rgba(255, 250, 243, 0.68);
    font: 500 14px/1.45 "Microsoft YaHei", sans-serif;
    outline: none;
}

.ct-form-textarea {
    min-height: 76px;
    resize: vertical;
}

.ct-form-input:focus,
.ct-form-textarea:focus {
    border-color: var(--ct-navy);
    box-shadow: 0 0 0 3px rgba(70, 81, 96, 0.12);
}

.ct-form-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 9px;
}

.ct-button {
    min-height: 45px;
    padding: 9px 13px;
    border: 1px solid rgba(49, 56, 68, 0.22);
    border-radius: 5px;
    color: var(--ct-ink);
    background: rgba(255, 250, 243, 0.54);
    font: 740 13px/1.2 "Microsoft YaHei", sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}

.ct-button--primary {
    color: var(--ct-paper);
    background: var(--ct-navy);
    border-color: var(--ct-navy);
}

.ct-view-heading {
    margin: 7px 2px 17px;
}

.ct-view-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--ct-ink-soft);
    font: 700 9px/1 "Courier New", monospace;
    letter-spacing: 0.18em;
}

.ct-view-title {
    margin: 0;
    font-size: 27px;
    letter-spacing: 0.1em;
}

.ct-view-description {
    margin: 8px 0 0;
    color: var(--ct-ink-soft);
    font-size: 11px;
    line-height: 1.6;
}

.ct-tool-empty {
    padding: 30px 8px 27px;
    text-align: center;
}

.ct-tool-mark {
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(49, 56, 68, 0.24);
    border-radius: 50%;
    color: var(--ct-navy);
    background: rgba(244, 206, 206, 0.38);
    font: 700 17px/1 "Courier New", monospace;
}

.ct-tool-empty strong {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
}

.ct-tool-empty p {
    margin: 0 auto;
    max-width: 25em;
    color: var(--ct-ink-soft);
    font-size: 10px;
    line-height: 1.65;
}

.ct-boundary-card {
    margin-top: 13px;
    padding: 12px 13px;
    border: 1px solid rgba(49, 56, 68, 0.16);
    border-radius: 8px;
    background: rgba(196, 184, 168, 0.22);
}

.ct-boundary-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.ct-boundary-card p,
.ct-boundary-card ul {
    margin: 0;
    color: var(--ct-ink-soft);
    font-size: 9px;
    line-height: 1.6;
}

.ct-boundary-card ul {
    padding-left: 17px;
}

.ct-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 14px;
}

.ct-stat {
    padding: 12px;
    border: 1px solid rgba(49, 56, 68, 0.14);
    border-radius: 7px;
    background: rgba(255, 250, 243, 0.42);
}

.ct-stat span,
.ct-stat strong {
    display: block;
}

.ct-stat span {
    color: var(--ct-ink-soft);
    font-size: 8px;
    letter-spacing: 0.08em;
}

.ct-stat strong {
    margin-top: 5px;
    font: 760 20px/1 "Courier New", monospace;
}

.ct-palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin: 15px 0;
}

.ct-swatch {
    aspect-ratio: 1;
    border: 1px solid rgba(49, 56, 68, 0.16);
    border-radius: 50%;
}

.ct-swatch:nth-child(1) { background: #8a8379; }
.ct-swatch:nth-child(2) { background: #f0e6dc; }
.ct-swatch:nth-child(3) { background: #f4cece; }
.ct-swatch:nth-child(4) { background: #c4b8a8; }

.ct-toggle-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    border-top: 1px solid rgba(49, 56, 68, 0.14);
    font-size: 11px;
}

.ct-toggle-row input {
    width: 20px;
    height: 20px;
    accent-color: var(--ct-navy);
}

.ct-npc-assist-toggle > span { display: grid; gap: 3px; }
.ct-npc-assist-toggle small { max-width: 26em; color: var(--ct-ink-soft); font-size: 9px; font-weight: 400; line-height: 1.45; }

/* 剧演设置总控台：全部选择器限制在定制剧场 overlay 内。 */
#custom-theater-app .ct-api-manager {
    display: grid;
    gap: 11px;
}

#custom-theater-app .ct-api-master-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(49, 56, 68, 0.22);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(244, 206, 206, 0.48), rgba(255, 250, 243, 0.72));
}

#custom-theater-app .ct-api-master-card strong,
#custom-theater-app .ct-api-card summary b {
    display: block;
    color: var(--ct-navy);
    font-size: 12px;
}

#custom-theater-app .ct-api-master-card p,
#custom-theater-app .ct-api-save-bar p,
#custom-theater-app .ct-api-note {
    margin: 4px 0 0;
    color: var(--ct-ink-soft);
    font-size: 9px;
    line-height: 1.55;
}

#custom-theater-app .ct-api-switch {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
}

#custom-theater-app .ct-api-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

#custom-theater-app .ct-api-switch span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(49, 56, 68, 0.3);
    border-radius: 999px;
    background: rgba(138, 131, 121, 0.38);
    transition: background 160ms ease;
}

#custom-theater-app .ct-api-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fffaf3;
    box-shadow: 0 2px 5px rgba(49, 56, 68, 0.25);
    transition: transform 160ms ease;
}

#custom-theater-app .ct-api-switch input:checked + span { background: var(--ct-navy); }
#custom-theater-app .ct-api-switch input:checked + span::after { transform: translateX(18px); }

#custom-theater-app .ct-api-form {
    display: grid;
    gap: 9px;
}

#custom-theater-app .ct-api-card {
    overflow: hidden;
    border: 1px solid rgba(49, 56, 68, 0.18);
    border-radius: 9px;
    background: rgba(255, 250, 243, 0.66);
}

#custom-theater-app .ct-api-card summary {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

#custom-theater-app .ct-api-card summary::-webkit-details-marker { display: none; }
#custom-theater-app .ct-api-card summary::after {
    content: '＋';
    flex: 0 0 auto;
    color: var(--ct-ink-soft);
    font-size: 14px;
}
#custom-theater-app .ct-api-card[open] summary::after { content: '－'; }

#custom-theater-app .ct-api-card summary > span {
    min-width: 0;
    flex: 1;
}

#custom-theater-app .ct-api-card summary small {
    display: block;
    margin-top: 4px;
    color: var(--ct-ink-soft);
    font-size: 8px;
    line-height: 1.35;
}

#custom-theater-app .ct-api-card summary em {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    font: 700 8px/1 "Courier New", monospace;
    font-style: normal;
    letter-spacing: 0.05em;
}

#custom-theater-app .ct-api-card summary em.is-ready { color: #305d49; background: rgba(87, 151, 119, 0.18); }
#custom-theater-app .ct-api-card summary em.is-warning { color: #825027; background: rgba(196, 145, 89, 0.2); }
#custom-theater-app .ct-api-card summary em.is-off { color: #665f58; background: rgba(138, 131, 121, 0.16); }

#custom-theater-app .ct-api-card-body {
    display: grid;
    gap: 11px;
    padding: 0 12px 13px;
    border-top: 1px dashed rgba(49, 56, 68, 0.16);
}

#custom-theater-app .ct-api-enable {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ct-navy);
    font-size: 10px;
    font-weight: 700;
}

#custom-theater-app .ct-api-enable input {
    width: 18px;
    height: 18px;
    accent-color: var(--ct-navy);
}

#custom-theater-app .ct-api-stream-option > span { display: grid; gap: 3px; }
#custom-theater-app .ct-api-stream-option b { color: var(--ct-navy); font-size: 11px; }
#custom-theater-app .ct-api-stream-option small { color: var(--ct-ink-soft); font-size: 9px; line-height: 1.45; }

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

#custom-theater-app .ct-api-grid label,
#custom-theater-app .ct-api-import-row label,
#custom-theater-app .ct-api-wide-field {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: var(--ct-ink-soft);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

#custom-theater-app .ct-api-grid input,
#custom-theater-app .ct-api-grid select,
#custom-theater-app .ct-api-import-row select,
#custom-theater-app .ct-api-wide-field select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px 9px;
    border: 1px solid rgba(49, 56, 68, 0.2);
    border-radius: 7px;
    color: var(--ct-ink);
    background: rgba(255, 253, 249, 0.9);
    font: 500 10px/1.35 system-ui, sans-serif;
}

#custom-theater-app .ct-api-import-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

#custom-theater-app .ct-api-mini-button,
#custom-theater-app .ct-api-model-results button,
#custom-theater-app .ct-api-secret-control button {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(49, 56, 68, 0.22);
    border-radius: 7px;
    color: var(--ct-navy);
    background: rgba(244, 206, 206, 0.3);
    font-size: 9px;
    font-weight: 700;
}

#custom-theater-app .ct-api-secret-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
}

#custom-theater-app .ct-api-secret-control button {
    min-height: 38px;
    padding-inline: 8px;
}

#custom-theater-app .ct-api-inline-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

#custom-theater-app .ct-api-inline-actions span {
    min-width: 0;
    color: var(--ct-ink-soft);
    font-size: 8px;
    line-height: 1.4;
}

#custom-theater-app .ct-api-model-results {
    max-height: 138px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px dashed rgba(49, 56, 68, 0.2);
    border-radius: 7px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#custom-theater-app .ct-api-model-results::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

#custom-theater-app .ct-api-model-results[hidden] { display: none; }
#custom-theater-app .ct-api-model-results button { min-height: 30px; padding: 5px 8px; }

#custom-theater-app .ct-api-isolation {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-left: 3px solid var(--ct-navy);
    border-radius: 5px;
    color: var(--ct-ink-soft);
    background: rgba(196, 184, 168, 0.2);
    font-size: 9px;
    line-height: 1.5;
}

#custom-theater-app .ct-api-isolation strong { color: var(--ct-navy); font-size: 10px; }

#custom-theater-app .ct-api-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(49, 56, 68, 0.22);
    border-radius: 9px;
    background: rgba(245, 238, 229, 0.96);
    box-shadow: 0 -6px 18px rgba(49, 56, 68, 0.08);
}

#custom-theater-app .ct-api-save-bar .ct-button { width: 100%; }

.ct-status {
    position: absolute;
    z-index: 120;
    left: 50%;
    bottom: calc(var(--ct-safe-bottom) + 18px);
    max-width: calc(100% - 40px);
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--ct-paper);
    background: rgba(49, 56, 68, 0.92);
    box-shadow: 0 7px 20px rgba(49, 56, 68, 0.2);
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.ct-status.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ct-back:focus-visible,
.ct-edge-toggle:focus-visible,
.ct-clapper-button:focus-visible,
.ct-drawer-close:focus-visible,
.ct-menu-item:focus-visible,
.ct-button:focus-visible,
#custom-theater-app .ct-api-card summary:focus-visible,
#custom-theater-app .ct-api-switch input:focus-visible + span,
#custom-theater-app .ct-api-mini-button:focus-visible,
#custom-theater-app .ct-api-secret-control button:focus-visible,
#custom-theater-app .ct-api-model-results button:focus-visible {
    outline: 3px solid rgba(70, 81, 96, 0.34);
    outline-offset: 2px;
}

@media (max-width: 350px) {
    .ct-main {
        padding-right: max(10px, calc(var(--ct-safe-right) + 10px));
        padding-left: max(24px, calc(var(--ct-safe-left) + 24px));
    }
    .ct-board-card {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 8px;
        padding-right: 8px;
    }
    .ct-board-field {
        grid-template-columns: 3.4em minmax(0, 1fr);
        gap: 4px;
    }
    .ct-board-field dt {
        font-size: 8px;
    }
    .ct-board-field dd {
        font-size: 10px;
    }
    #custom-theater-app .ct-api-grid { grid-template-columns: minmax(0, 1fr); }
    #custom-theater-app .ct-api-master-card { align-items: flex-start; }
}

@media (max-height: 620px) {
    .ct-topbar {
        min-height: calc(50px + var(--ct-safe-top));
    }
    .ct-main {
        padding-top: calc(var(--ct-safe-top) + 60px);
    }
    .ct-home-intro {
        margin-bottom: 15px;
    }
    .ct-home-copy {
        display: none;
    }
    #custom-theater-app .ct-api-card summary { min-height: 50px; }
    #custom-theater-app .ct-api-save-bar { position: static; }
    .ct-board-card {
        min-height: 162px;
    }
    .ct-clapper-button {
        min-height: 136px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .ct-main {
        padding-top: calc(var(--ct-safe-top) + 58px);
    }
    .ct-home-intro {
        margin-bottom: 12px;
    }
    .ct-timeline-item {
        margin-bottom: 15px;
    }
    .ct-board-card {
        max-width: 620px;
        min-height: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-drawer,
    .ct-drawer-scrim,
    .ct-status,
    .ct-clapper-arm,
    #custom-theater-app .ct-api-switch span,
    #custom-theater-app .ct-api-switch span::after {
        transition: none !important;
    }
}

@media (prefers-contrast: more) {
    #custom-theater-app {
        --ct-line: rgba(49, 56, 68, 0.42);
    }
    .ct-board-card,
    .ct-editor-form,
    .ct-tool-panel {
        background: rgba(250, 245, 238, 0.97);
        border-color: rgba(49, 56, 68, 0.5);
    }
    #custom-theater-app .ct-api-card,
    #custom-theater-app .ct-api-master-card,
    #custom-theater-app .ct-api-save-bar,
    #custom-theater-app .ct-api-grid input,
    #custom-theater-app .ct-api-grid select,
    #custom-theater-app .ct-api-import-row select,
    #custom-theater-app .ct-api-wide-field select {
        border-color: rgba(49, 56, 68, 0.48);
    }
}