* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;
            background: #1e1e2f;
            color: #e0e0e0;
            overflow: hidden;
            height: 100vh;
        }

        .page {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .page.active {
            display: flex;
            flex-direction: column;
        }

        .login-container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .login-card {
            background: rgba(255,255,255,0.95);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            min-width: 320px;
        }

        .login-card h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .login-card p {
            color: #666;
            margin-bottom: 30px;
        }

        .google-btn {
            background: #4285f4;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            transition: transform 0.2s;
        }

        .google-btn:hover {
            transform: translateY(-2px);
            background: #3367d6;
        }

        /* 登入方式由 <head> 的同步腳本決定（html[data-login]="unified"｜"legacy"，index.html／admin-console.html）：
           還沒決定、或不是那個模式，就不畫那組按鈕——免得先閃出舊的「使用 Google 登入」再被「登入」蓋掉（2026-10-16 Jin 回報） */
        html:not([data-login="legacy"]) #googleLoginWrap,
        html:not([data-login="legacy"]) #devLoginBtn { display: none; }
        html:not([data-login="unified"]) #authLoginBtn { display: none; }

        .project-header {
            background: #2a2a3a;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #3a3a4a;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }
        .user-avatar[src=""], .user-avatar:not([src]) {
            display: none;
        }

        .btn {
            background: #4a6fa5;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
        }

        /* 工具列上「開/關」型按鈕的開啟狀態（目前：參考線） */
        .btn.tool-on {
            background: #2f7d5b;
            box-shadow: inset 0 0 0 1px #6ee7b7;
        }

        .btn-danger {
            background: #c94f4f;
        }

        .btn-danger:hover {
            background: #b33e3e;
        }

        .btn-success {
            background: #5a9e5e;
        }

        .btn:hover {
            background: #5f7fb0;
        }

        .project-list {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        /* Project table */
        .project-table {
            width: 100%;
            border-collapse: collapse;
            background: #2a2a3a;
            border-radius: 12px;
            overflow: hidden;
        }
        .project-table th, .project-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #3a3a4a;
        }
        .project-table th {
            background: #323242;
            font-size: 13px;
            color: #aaa;
            cursor: pointer;
            white-space: nowrap;
            user-select: none;
        }
        .project-table th:hover { color: #e0e0e0; }
        .project-table th .sort-arrow { margin-left: 4px; font-size: 10px; }
        .project-table tr:hover td { background: #323242; }
        .project-table td { font-size: 14px; }
        .project-table .col-num { width: 50px; text-align: center; color: #888; }
        .project-table .col-actions { white-space: nowrap; }
        .project-table .col-actions button { margin-right: 6px; }
        .project-table .col-time { font-size: 12px; color: #aaa; white-space: nowrap; }
        .project-toolbar {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
            align-items: center;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            /* 高於小遊戲全螢幕覆蓋層（編輯 3000 / 測試遊玩 4000），
               否則從小遊戲設定畫面開資源選擇彈窗會被覆蓋層蓋住而無法操作 */
            z-index: 5000;
        }

        .modal-content {
            background: #2a2a3a;
            border-radius: 16px;
            padding: 24px;
            min-width: 400px;
        }

        .modal-content input {
            width: 100%;
            padding: 10px;
            margin: 16px 0;
            background: #1e1e2f;
            border: 1px solid #4a4a5a;
            color: white;
            border-radius: 6px;
        }

        .editor-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .toolbar {
            background: #2a2a3a;
            padding: 8px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-bottom: 1px solid #3a3a4a;
        }

        .toolbar-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .canvas-area {
            flex: 1;
            position: relative;
            overflow: hidden;
            background: #1e1e2f;
        }

        #canvas {
            position: relative;
            width: 100%;
            height: 100%;
            transform-origin: 0 0;
            cursor: grab;
        }

        .node {
            position: absolute;
            background: #2d2d3d;
            border: 2px solid #5a6a8a;
            border-radius: 8px;
            width: var(--node-width, 250px);
            padding: 12px;
            overflow: hidden;
            cursor: grab;
            transition: box-shadow 0.2s;
            z-index: 10;
            box-shadow: 2px 3px 8px rgba(0,0,0,0.4);
        }

        .node.selected {
            border-color: #6a9eff;
            box-shadow: 0 0 0 3px rgba(106,158,255,0.5), 0 0 12px rgba(106,158,255,0.3), 2px 3px 8px rgba(0,0,0,0.4);
            z-index: 15 !important;
        }
        .node.preview-active {
            border-color: #ff9800;
            box-shadow: 0 0 0 3px rgba(255,152,0,0.6), 0 0 16px rgba(255,152,0,0.4);
        }
        .node.selected.preview-active {
            border-color: #ff9800;
            box-shadow: 0 0 0 3px rgba(255,152,0,0.6), 0 0 16px rgba(255,152,0,0.4), 0 0 0 6px rgba(106,158,255,0.3);
        }

        .node.dialog { border-top: 4px solid var(--color-dialog, #4caf50); }
        .node.choice { border-top: 4px solid var(--color-choice, #ff9800); }
        .node.condition { border-top: 4px solid var(--color-condition, #2196f3); }
        .node.action { border-top: 4px solid var(--color-action, #9c27b0); }
        .node.minigame { border-top: 4px solid var(--color-minigame, #00897b); }
        .node.end { border-top: 4px solid var(--color-end, #e91e63); }

        .node-header {
            font-weight: bold;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }
        .node.node-entry-warn, .node.node-orphan-warn { border-color: #ff5252; box-shadow: 0 0 8px rgba(255,82,82,0.55), 2px 3px 8px rgba(0,0,0,0.4); }
        /* 警告徽章移到左上角；表頭留左邊白，不壓到類型文字/ID */
        .node.node-entry-warn .node-header, .node.node-orphan-warn .node-header { padding-left: 20px; }
        .node-entry-warning {
            position: absolute;
            top: 4px; left: 4px;
            z-index: 20;
            width: 17px; height: 17px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; line-height: 1;
            background: #b71c1c; color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 4px rgba(0,0,0,0.6);
            cursor: help;
        }
        .node-id {
            font-size: 10px;
            font-weight: normal;
            white-space: nowrap;
        }
        .node-id .id-alpha { color: #8aafff; }
        .node-id .id-num { color: #ccc; }
        /* 音量滑桿：自訂填色到真正的 %（--p，由 JS 更新），避免原生 range 在 100% 右側露白 */
        .sf-vol { -webkit-appearance: none; appearance: none; height: 16px; background: transparent; cursor: pointer; }
        .sf-vol::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #3a7bfd var(--p, 100%), #3a3f52 var(--p, 100%)); }
        .sf-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #3a7bfd; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
        .sf-vol::-moz-range-track { height: 6px; border-radius: 3px; background: #3a3f52; }
        .sf-vol::-moz-range-progress { height: 6px; border-radius: 3px; background: #3a7bfd; }
        .sf-vol::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #3a7bfd; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
        .id-display .id-alpha { color: #8aafff; }
        .id-display .id-num { color: #ccc; }

        .node-content {
            font-size: 12px;
            color: #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .node-note {
            font-size: 11px;
            color: #a89060;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 4px;
            border-top: 1px dashed #4a4a5a;
            padding-top: 3px;
        }
        .node-title-label {
            font-size: 12px;
            font-weight: bold;
            color: #cfe0ff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 2px 0;
        }

        /* 連線用的圓點：放大到 200%（12→24px），拉線與對準都好按 */
        .port {
            position: absolute;
            width: 24px;
            height: 24px;
            background: #6a9eff;
            border-radius: 50%;
            cursor: crosshair;
            z-index: 20;
        }

        .port.output {
            right: -12px;
        }

        .port.input {
            left: -12px;
        }

        #selectionBox {
            position: absolute;
            border: 1px dashed #6a9eff;
            background: rgba(106, 158, 255, 0.1);
            pointer-events: none;
            z-index: 100;
        }

        .node-option-item {
            font-size: 11px;
            color: #bbb;
            padding: 8px 0; /* taller rows spread the output ports apart (ports track row centers) */
            border-top: 1px solid #3a3a4a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .node-condition-out {
            font-size: 11px;
            color: #bbb;
            padding: 8px 0; /* taller rows spread the output ports apart (ports track row centers) */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }

        svg path.edge-visible {
            pointer-events: none;
            stroke: var(--edge-color, #8a9acc);
            stroke-width: 2;
            fill: none;
        }

        svg path.edge-hit {
            pointer-events: stroke;
            stroke: transparent;
            stroke-width: 12;
            fill: none;
            cursor: pointer;
        }

        svg path.edge-visible.edge-hover {
            stroke: #ffaa66;
            stroke-width: 3;
        }

        svg path.edge-visible.edge-selected {
            stroke: #ff6644;
            stroke-width: 3;
        }

        /* Frame styles (node depth) */
        .frame {
            position: absolute;
            border-radius: 12px;
            z-index: 2;
            box-shadow: 3px 4px 12px rgba(0,0,0,0.35);
        }
        .frame.scene-frame {
            border: 2px solid rgba(76, 175, 80, 0.6);
            background: rgba(76, 175, 80, 0.05);
            pointer-events: all;
            cursor: grab;
        }
        .frame.scene-frame:hover {
            border-color: rgba(76, 175, 80, 0.9);
        }
        .frame.scene-frame.frame-selected {
            border-color: var(--color-scene, #4caf50);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5), 0 0 12px rgba(76, 175, 80, 0.3), 3px 4px 12px rgba(0,0,0,0.35);
        }
        .frame.drop-target {
            border-color: #ff9800 !important;
            background: rgba(255, 152, 0, 0.15) !important;
            box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.5), 0 0 16px rgba(255, 152, 0, 0.3) !important;
        }
        .frame.section-frame {
            border: 2px solid rgba(33, 150, 243, 0.45);
            background: rgba(33, 150, 243, 0.03);
            pointer-events: none;
        }
        .frame.section-frame.frame-interactive {
            pointer-events: all;
            cursor: grab;
        }
        .frame.section-frame.frame-interactive:hover {
            border-color: rgba(33, 150, 243, 0.8);
        }
        .frame.section-frame.frame-selected {
            border-color: var(--color-section, #2196f3);
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5), 0 0 12px rgba(33, 150, 243, 0.3), 3px 4px 12px rgba(0,0,0,0.35);
        }
        .frame.chapter-frame {
            border: 2px solid rgba(156, 39, 176, 0.4);
            background: rgba(156, 39, 176, 0.03);
            pointer-events: none;
        }
        .frame.chapter-frame.frame-interactive {
            pointer-events: all;
            cursor: grab;
        }
        .frame.chapter-frame.frame-interactive:hover {
            border-color: rgba(156, 39, 176, 0.7);
        }
        .frame.chapter-frame.frame-selected {
            border-color: var(--color-chapter, #9c27b0);
            box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.5), 0 0 12px rgba(156, 39, 176, 0.3), 3px 4px 12px rgba(0,0,0,0.35);
        }
        .frame-label {
            position: absolute;
            bottom: 100%;
            left: 8px;
            font-size: 16px;
            font-weight: bold;
            padding: 3px 10px;
            border-radius: 4px;
            white-space: nowrap;
            margin-bottom: 2px;
        }
        .scene-frame .frame-label { background: #2a3a2a; color: var(--color-scene, #81c784); }
        .section-frame .frame-label { background: #1e2a3a; color: var(--color-section, #64b5f6); }
        .frame-label .start-hint { color: #e0b050; cursor: help; }   /* 段開頭提示（C-5） */
        .chapter-frame .frame-label { background: #2a1e3a; color: var(--color-chapter, #ce93d8); }
        .frame-info {
            position: absolute;
            bottom: 4px;
            right: 8px;
            font-size: 10px;
            color: #888;
            pointer-events: none;
        }
        .frame-note {
            position: absolute;
            top: 4px;
            left: 8px;
            right: 8px;
            font-size: 11px;
            color: #a89060;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
            font-style: italic;
        }

        /* Depth cards (scene/section/chapter depth)
           固定大小（含 border/padding，故 border-box）：高度由 createDepthCard 依專案設定寫 inline，
           放不下的內容 overflow:hidden 截掉、每行資訊各自 ellipsis（完整內容點卡片開編輯面板看） */
        .depth-card {
            position: absolute;
            box-sizing: border-box;
            overflow: hidden;
            background: #2d2d3d;
            border: 2px solid #5a6a8a;
            border-radius: 10px;
            min-width: 120px;
            padding: 14px;
            cursor: grab;
            z-index: 10;
        }
        .depth-card.selected {
            border-color: #6a9eff;
            box-shadow: 0 0 0 3px rgba(106,158,255,0.5), 0 0 12px rgba(106,158,255,0.3);
            z-index: 15 !important;
        }
        .depth-card.scene-card { border-top: 4px solid var(--color-scene, #4caf50); }
        .depth-card.section-card { border-top: 4px solid var(--color-section, #2196f3); }
        .depth-card.chapter-card { border-top: 4px solid var(--color-chapter, #9c27b0); }
        .depth-card-header {
            font-weight: bold;
            margin-bottom: 6px;
            font-size: 16px;
        }
        .depth-card-thumb {
            margin-bottom: 6px;
            border-radius: 4px;
            overflow: hidden;
            max-height: 80px;
        }
        .depth-card-thumb img {
            width: 100%;
            height: 80px;
            object-fit: cover;
            display: block;
        }
        .depth-card-info {
            font-size: 11px;
            color: #aaa;
            line-height: 1.8;
        }
        .depth-card-line {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 深度卡片（章/段/鏡）的註解不要分隔線（2026-08-25 Jin 指示；劇情節點的維持） */
        .depth-card .node-note {
            border-top: none;
            padding-top: 0;
        }
        .depth-card-header {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Resource popup styles */
        .res-popup { max-width: 600px; max-height: 80vh; overflow-y: auto; min-width: 500px; }
        .ps-settings-popup { display: flex; flex-direction: column; overflow: hidden; max-width: 760px; min-width: 680px; width: 92vw; }
        /* 專案設定分頁（2026-10-18 Jin）：比照資源管理固定左上角，寬度＝max(680, min(760, 92vw))；沒選到的分頁藏起來 */
        .modal.modal-anchor-tl > .ps-settings-popup { margin: 10vh 0 0 max(0px, calc((100vw - max(680px, min(760px, 92vw))) / 2)); }
        .ps-settings-popup .ps-tabs { margin-bottom: 12px; }
        .ps-settings-popup .ps-pane:not(.active) { display: none; }
        .col-type-wide { max-width: 900px; }
        /* 子類標籤：inline flex，勾選框不吃 form-group input{width:100%} */
        .eci-sub-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
        .eci-sub-item { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: #ccc; cursor: pointer; }
        .eci-sub-item input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
        .res-popup h3 { margin-bottom: 16px; }
        .res-popup .res-toolbar, .res-mgmt-popup .res-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
        .res-popup .res-toolbar select, .res-popup .res-toolbar input, .res-mgmt-popup .res-toolbar select, .res-mgmt-popup .res-toolbar input { padding: 6px; background: #1e1e2f; border: 1px solid #4a4a5a; color: white; border-radius: 4px; }
        .res-list { max-height: 350px; overflow-y: auto; border: 1px solid #3a3a4a; border-radius: 6px; }
        .res-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #3a3a4a; cursor: pointer; transition: background 0.15s; }
        .res-item:last-child { border-bottom: none; }
        .res-item:hover { background: #3a3a4a; }
        .res-item.active { background: #4a6fa5; }
        .res-item-thumb { width: 48px; height: 48px; background: #1e1e2f; border-radius: 4px; object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #666; font-size: 20px; overflow: hidden; }
        .res-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .res-item-info { flex: 1; min-width: 0; }
        .res-item-info .name { font-size: 13px; color: #e0e0e0; }
        .res-item-info .desc { font-size: 11px; color: #888; margin-top: 2px; }
        .res-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
        .res-item-actions button { padding: 2px 8px; font-size: 12px; }
        .res-popup .res-footer, .res-mgmt-popup .res-footer { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
        .res-group { margin-bottom: 8px; border: 1px solid #3a3a4a; border-radius: 6px; }
        .res-group-header { padding: 8px 12px; background: #2d2d3d; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 6px; }
        .res-group-header:hover { background: #3a3a4a; }
        .res-group-body { display: none; padding: 4px; }
        .res-group-body.open { display: block; max-height: 250px; overflow-y: auto; }
        .res-upload-area { border: 2px dashed #4a4a5a; border-radius: 8px; padding: 20px; text-align: center; color: #888; cursor: pointer; margin: 12px 0; }
        .res-upload-area:hover { border-color: #6a9eff; color: #aaa; }
        .res-upload-area input[type="file"] { display: none; }
        /* 共用上傳視窗（2026-10-09，甲案）：檔名提示、檔案清單、代改表、格式標記 */
        .res-upload-hint { margin: -6px 0 10px; font-size: 11px; line-height: 1.5; color: #8a94a8; }
        .res-grid-entry { background: none; border: none; padding: 0; font-size: 11px; color: #8ab8ff; text-decoration: underline; cursor: pointer; }   /* 「一張圖等分格…」入口（2026-10-10） */
        .res-upload-files { max-height: 180px; overflow-y: auto; border: 1px solid #3a3a4a; border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; font-size: 12px; }
        .res-upload-file { display: flex; gap: 8px; padding: 2px 0; }
        .res-upload-file .fn { flex: 1; word-break: break-all; }
        .res-upload-file .fk { color: #8a94a8; white-space: nowrap; }
        .res-upload-file .fs { color: #8a94a8; min-width: 60px; text-align: right; }
        .res-upload-file.unsafe .fn { color: #f0b060; }
        .res-upload-total { margin-top: 4px; color: #a9b0c8; }
        .res-upload-error { color: #ff8080; white-space: pre-wrap; font-size: 12px; min-height: 1em; margin-bottom: 6px; }
        .res-rename-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
        .res-rename-table td, .res-rename-table th { padding: 3px 6px; border-bottom: 1px solid #3a3a4a; text-align: left; word-break: break-all; }
        .res-fmt-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 10px; line-height: 16px; background: #3a3a55; color: #d6dcf0; vertical-align: middle; }
        .res-fmt-spine { background: #5a3a6a; } .res-fmt-sequence { background: #3a5a5a; } .res-fmt-video { background: #5a4a2a; } .res-fmt-animatedImage { background: #3a4a6a; }
        .res-prepared { font-size: 12px; color: #a9b0c8; }
        .res-coord-row { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid #3a3a4a; }
        .res-coord-row input { width: 80px; padding: 4px; background: #1e1e2f; border: 1px solid #4a4a5a; color: white; border-radius: 4px; text-align: center; }
        .res-coord-row .coord-name { width: 100px; }
        .inline-add-btn { background: #3a5a3a; border: 1px solid #5a8a5a; color: #8fc; padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
        .inline-add-btn:hover { background: #4a6a4a; }
        .field-row { display: flex; gap: 4px; align-items: center; }
        .field-row select, .field-row input { flex: 1; }
        .field-row .btn { padding: 4px 10px; flex-shrink: 0; }

        /* Resource management page modal */
        .res-mgmt-popup { width: min(1120px, 94vw); max-width: 94vw; min-width: 700px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
        /* 資源管理固定以左上角當錨點（2026-10-18 Jin：切換分頁時視窗不要跳）：外層不置中，視窗頂端與左緣固定、下緣跟著內容伸縮；
           左邊距照視窗寬（border-box＝min(1120px, 94vw)）算，預設仍在畫面正中 */
        .modal.modal-anchor-tl { align-items: flex-start; justify-content: flex-start; }
        .modal.modal-anchor-tl > .res-mgmt-popup { margin: 7.5vh 0 0 max(0px, calc((100vw - min(1120px, 94vw)) / 2)); }
        /* 工具列右側那一組（類別按鈕＋打包下載） */
        .res-toolbar-right { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .res-toolbar-right .res-bulk-dl { margin-left: 0; }
        .res-cat-popup { width: min(520px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
        /* 類別小視窗也固定左上角（2026-10-18 Jin）：新增、刪除類別時只有下緣跟著變；左邊距照視窗寬算，預設仍在正中 */
        .modal.modal-anchor-tl > .res-cat-popup { margin: 12vh 0 0 max(0px, calc((100vw - min(520px, 92vw)) / 2)); }
        .res-cat-popup .res-scroll-area { flex: 1; min-height: 120px; max-height: 50vh; overflow-y: auto; border: 1px solid #3a3a4a; border-radius: 6px; }
        .res-mgmt-popup > #resMgmtContent { flex: 1; min-height: 0; display: flex; flex-direction: column; }
        .res-mgmt-popup > #resMgmtContent > .res-toolbar { flex-shrink: 0; }
        .res-mgmt-popup > #resMgmtContent > .res-scroll-area { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid #3a3a4a; border-radius: 6px; }
        .res-mgmt-popup > #resMgmtContent > h4 { flex-shrink: 0; }
        /* 頁籤內的說明列（如音樂試聽快取提示）：不佔捲動區、不搶注意力 */
        .res-hint { flex-shrink: 0; margin-bottom: 10px; padding: 8px 10px; border-radius: 6px;
            background: #23233a; border: 1px solid #3a3a55; color: #a9b0c8; font-size: 12px; line-height: 1.6; }
        .res-hint b { color: #d6dcf0; }
        .res-mgmt-popup > .res-footer { flex-shrink: 0; }
        .res-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid #4a4a5a; margin-bottom: 16px; flex-shrink: 0; }
        /* 分頁間距拉寬（2026-10-18 Jin：類別分頁移走後預備多語言）；寬度不寫死，字長了就把分頁撐寬、放不下自動換行 */
        .res-tab { padding: 8px 20px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; color: #aaa; transition: all 0.2s; font-size: 13px; white-space: nowrap; }
        .res-tab:hover { color: #e0e0e0; }
        .res-tab.active { color: #6a9eff; border-bottom-color: #6a9eff; }
        .res-tab-content { display: none; }
        .res-tab-content.active { display: block; }

        .right-panel {
            position: fixed;
            right: 0;
            top: 0;
            width: 400px;
            height: 100%;
            background: #2a2a3a;
            border-left: 1px solid #4a4a5a;
            transform: translateX(100%);
            transition: transform 0.3s;
            z-index: 200;
            overflow-y: auto;
            padding: 20px;
        }

        .right-panel.open {
            transform: translateX(0);
        }

        /* 變數監看側邊欄（左側獨立面板；避開右側節點編輯面板，兩者可同時開啟） */
        .var-watch-panel {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 320px;
            background: #23232f;
            border-right: 1px solid #4a4a5a;
            box-shadow: 4px 0 16px rgba(0,0,0,0.35);
            z-index: 190;
            display: flex;
            flex-direction: column;
            font-size: 13px;
            color: #e0e0e8;
        }
        .var-watch-panel .vw-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 12px; border-bottom: 1px solid #3a3a4a; background: #2c2c3c;
        }
        .var-watch-panel .vw-title { font-weight: bold; font-size: 14px; }
        .var-watch-panel .vw-close {
            background: none; border: none; color: #aaa; font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: 4px;
        }
        .var-watch-panel .vw-close:hover { background: #444; color: #fff; }
        .var-watch-panel .vw-status { padding: 6px 12px; font-size: 11px; color: #9ab; border-bottom: 1px solid #3a3a4a; }
        .var-watch-panel .vw-toolbar { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #3a3a4a; }
        .var-watch-panel .vw-cat { flex: 0 0 auto; max-width: 130px; }
        .var-watch-panel .vw-search { flex: 1; min-width: 0; }
        .var-watch-panel .vw-list { flex: 1; overflow-y: auto; padding: 4px 0; }
        .var-watch-panel .vw-empty { padding: 20px 12px; text-align: center; color: #778; }
        .var-watch-panel .vw-row {
            display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; border-bottom: 1px solid #2e2e3a;
        }
        .var-watch-panel .vw-row:hover { background: #2a2a38; }
        .var-watch-panel .vw-row-main { display: flex; align-items: center; gap: 8px; }
        .var-watch-panel .vw-name {
            flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        .var-watch-panel .vw-desc {
            font-size: 11px; color: #889; line-height: 1.4;
            white-space: normal; overflow-wrap: break-word; word-break: break-word;
        }
        .var-watch-panel .vw-val {
            flex: 0 0 96px; width: 96px; padding: 4px 6px; background: #1a1a26;
            border: 1px solid #4a4a5a; color: #ffe08a; border-radius: 4px; font-family: monospace;
        }
        .var-watch-panel .vw-val:focus { border-color: #6a8aff; outline: none; }
        #varWatchBtn.active { background: #3a5a8a; color: #fff; }

        .form-group {
            margin-bottom: 16px;
        }

        /* 欄位下方的說明小字（勾選框/複雜欄位用） */
        .field-hint { margin-top: 4px; font-size: 11px; line-height: 1.5; color: #8a94a8; }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-size: 12px;
            color: #aaa;
        }

        .form-group .checkbox-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .form-group .checkbox-row input[type="checkbox"] {
            width: auto;
            margin: 0;
        }
        .form-group .checkbox-row label {
            display: inline;
            margin: 0;
            cursor: pointer;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 8px;
            background: #1e1e2f;
            border: 1px solid #4a4a5a;
            color: white;
            border-radius: 4px;
        }

        /* 原生色彩選擇器要固定尺寸：通用 input 的 width:100%+padding:8px 會把色塊壓成細線 */
        .form-group input[type="color"], .field-row input[type="color"] {
            flex: 0 0 48px;
            width: 48px;
            height: 32px;
            padding: 2px;
            cursor: pointer;
        }

        .preview-split {
            position: fixed;
            background: #1a1a2a;
            display: flex;
            flex-direction: column;
            z-index: 100;
        }
        .preview-split.split-bottom {
            bottom: 0; left: 0; right: 0;
            height: 300px;
            border-top: 1px solid #4a4a5a;
        }
        .preview-split.split-left {
            top: 44px; left: 0; bottom: 0;
            width: 400px;
            border-right: 1px solid #4a4a5a;
            flex-direction: row;
        }

        .preview-resize-handle {
            background: #4a6fa5;
        }
        .split-bottom .preview-resize-handle {
            height: 4px; cursor: ns-resize;
        }
        .split-left .preview-resize-handle {
            width: 4px; height: auto; cursor: ew-resize; order: 1;
        }
        .split-left .preview-content {
            order: 0; flex: 1;
        }

        .preview-content {
            flex: 1;
            padding: 0;
            overflow: hidden;
            position: relative;
            background: #111;
        }

        /* Game preview 16:9 container */
        .gp-viewport {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            background: #0a0a1a;
        }
        .gp-bg {
            position: absolute; inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .gp-sprites {
            position: absolute; inset: 0;
            pointer-events: none;
        }
        .gp-sprite {
            position: absolute;
            bottom: 0;
            transform-origin: bottom center;
        }
        .gp-sprite img { max-height: 80%; width: auto; }
        .gp-dialog-box {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: linear-gradient(0deg, rgba(10,10,30,0.95) 0%, rgba(10,10,30,0.85) 100%);
            padding: 12px 16px 16px;
            min-height: 100px;
        }
        .gp-speaker-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .gp-face {
            width: 52px; height: 52px;
            border-radius: 50%;
            background: #4a6fa5;
            flex-shrink: 0;
            overflow: hidden;
            border: 2px solid #6a9eff;
        }
        .gp-face img { width: 100%; height: 100%; object-fit: cover; }
        .gp-speaker-name {
            font-size: 15px;
            font-weight: bold;
            color: #6adfff;
        }
        .gp-text {
            font-size: 14px;
            color: #e8e8e8;
            line-height: 1.7;
            white-space: pre-wrap;
            min-height: 36px;
        }
        .gp-voice-btn {
            position: absolute;
            top: 12px; right: 16px;
            background: rgba(106,158,255,0.3);
            border: 1px solid rgba(106,158,255,0.5);
            color: #6a9eff;
            border-radius: 50%;
            width: 28px; height: 28px;
            cursor: pointer;
            font-size: 12px;
        }
        .gp-nav {
            position: absolute;
            top: 8px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 8px; z-index: 10;
        }
        .gp-nav button {
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.2);
            color: #ccc;
            padding: 4px 14px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        .gp-nav button:hover { background: rgba(255,255,255,0.25); }
        .gp-nav button:disabled { opacity: 0.3; cursor: default; }
        .gp-node-indicator {
            position: absolute;
            top: 8px; right: 12px;
            font-size: 10px;
            color: rgba(255,255,255,0.4);
        }
        .gp-choices {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 280px;
        }
        .gp-choice-btn {
            background: rgba(30,30,60,0.9);
            border: 2px solid #6a9eff;
            color: #e0e0e0;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            text-align: center;
        }
        .gp-choice-btn:hover {
            background: rgba(106,158,255,0.3);
            border-color: #8ab8ff;
        }
        .gp-system-msg {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(30,30,60,0.85);
            border: 1px solid #4a4a5a;
            border-radius: 8px;
            padding: 16px 28px;
            color: #aaa;
            font-size: 13px;
            text-align: center;
            max-width: 400px;
        }
        .gp-system-msg .sys-type { color: #6a9eff; font-weight: bold; margin-bottom: 6px; }
        /* Chapter/Section selection screens */
        .gp-select-screen {
            position: absolute; inset: 0;
            display: flex;
            flex-direction: column;
            padding: 16px;
            overflow-y: auto;
            background: #0a0a1a;
        }
        .gp-select-title {
            font-size: 16px;
            font-weight: bold;
            color: #6adfff;
            margin-bottom: 12px;
            text-align: center;
        }
        .gp-select-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }
        .gp-select-card {
            background: #2a2a3a;
            border: 2px solid #4a4a5a;
            border-radius: 10px;
            width: 160px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.2s;
        }
        .gp-select-card:hover {
            border-color: #6a9eff;
            transform: translateY(-2px);
        }
        .gp-select-card-img {
            width: 100%; height: 90px;
            background: #1e1e2f;
            background-size: cover;
            background-position: center;
        }
        .gp-select-card-name {
            padding: 8px;
            font-size: 13px;
            text-align: center;
            color: #e0e0e0;
        }
        /* Chapter select: vertical list */
        .gp-chapter-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 400px;
            margin: 0 auto;
            width: 100%;
        }
        .gp-chapter-card {
            display: flex;
            background: #2a2a3a;
            border: 2px solid #4a4a5a;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }
        .gp-chapter-card:hover {
            border-color: #9c27b0;
            transform: translateX(4px);
        }
        .gp-chapter-card-img {
            width: 120px; min-height: 72px;
            background: #1e1e2f;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
        }
        .gp-chapter-card-info {
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .gp-chapter-card-info .name { font-size: 14px; font-weight: bold; color: #ce93d8; }
        .gp-chapter-card-info .desc { font-size: 11px; color: #888; margin-top: 4px; }

        /* Project table enhancements */
        .project-table tbody tr { transition: background 0.15s; }
        .project-table tbody tr:nth-child(even) td { background: rgba(42,42,58,0.5); }
        .project-table tbody tr:hover td { background: #3a3a5a !important; }

        @media (max-width: 768px) {
            .right-panel { width: 100%; }
            .toolbar { gap: 3px; }
            .toolbar-row { gap: 4px; }
            .btn { padding: 4px 8px; font-size: 12px; }
        }

        /* 選擇畫面三態（未解鎖 / 已完成）*/
        .gp-select-card.gp-locked, .gp-chapter-card.gp-locked {
            cursor: default;
            opacity: 0.55;
            filter: grayscale(0.8);
        }
        .gp-select-card.gp-locked:hover, .gp-chapter-card.gp-locked:hover {
            transform: none;
            box-shadow: none;
        }
        .gp-select-card-img, .gp-chapter-card-img { position: relative; overflow: hidden; }
        /* 放圖的欄位收所有格式（2026-10-10，S4；player-core/media-el.js）：動畫圖／影片以子元素鋪滿原本寫 CSS background 的容器 */
        .gp-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
        .gp-state-badge {
            position: absolute;
            top: 4px; right: 4px;
            width: 26px; height: 26px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .gp-badge-lock { background: rgba(0,0,0,0.6); }
        .gp-badge-clear { background: rgba(46,125,50,0.85); color: #fff; }

        /* 故事線地圖（Phase 2） */
        .gp-map-wrap { position: absolute; inset: 0; }
        .gp-map-title { position: absolute; top: 8px; left: 0; right: 0; z-index: 2; }
        .gp-map-svg { width: 100%; height: 100%; display: block; pointer-events: auto; } /* 覆蓋全域 svg{pointer-events:none}，讓地圖卡片可點 */
        .gp-map-edge { fill: none; stroke: #4a4a66; stroke-width: 2.5; }
        .gp-map-edge.lit { stroke: #e8c55a; }
        .gp-map-node { cursor: pointer; }
        .gp-map-node.locked { cursor: default; opacity: 0.45; }
        .gp-map-node-frame { fill: #2d2d3d; stroke: #5a6a8a; stroke-width: 2; }
        .gp-map-node.cleared .gp-map-node-frame { stroke: #7ec97e; }
        .gp-map-node:not(.locked):hover .gp-map-node-frame { stroke: #6a9eff; stroke-width: 3; }
        .gp-map-node-name { fill: #e0e0e0; font-size: 15px; }
        .gp-map-badge { font-size: 18px; }
        /* 章地圖卡片（fill/stroke/文字色走 inline 各章外觀；hover 外框用 --cmhov 變數） */
        .gp-cmap-node { cursor: pointer; }
        .gp-cmap-node.locked { cursor: default; opacity: 0.45; }
        .gp-cmap-node.visited { cursor: default; opacity: 0.7; } /* 玩過但不在 activePath：顯示但不可選 */
        .gp-cmap-frame { stroke-width: 2; }
        .gp-cmap-node.playable:hover .gp-cmap-frame { stroke: var(--cmhov, #6a9eff); stroke-width: 3; }
        .gp-map-badge-clear { fill: #7ec97e; font-weight: bold; }

        .gp-map-back {
            position: absolute;
            top: 10px; left: 10px;
            z-index: 6; /* 高於全域 svg 的 z-index:5，否則被地圖 SVG 蓋住點不到 */
            font-size: 12px;
            padding: 4px 10px;
        }

        /* ── 縮放/可拖移地圖 stage（章地圖；段地圖之後共用）── */
        .gp-map-root { position: absolute; inset: 0; overflow: hidden; }
        .gp-map-root.gp-map-pannable { cursor: grab; }
        .gp-map-root.gp-map-pannable:active { cursor: grabbing; }
        /* 章/段地圖縮放控制（右下角；螢幕尺寸固定、不吃 stage 縮放；也可滾輪縮放） */
        .gp-map-zoomctl {
            position: absolute; right: 12px; bottom: 12px; z-index: 30;
            display: flex; align-items: center; gap: 4px;
            background: rgba(15, 15, 26, 0.72); border: 1px solid #4a5a7a; border-radius: 8px;
            padding: 4px 6px; user-select: none;
        }
        .gp-map-zoomctl button {
            width: 26px; height: 26px; border: 1px solid #5a6a8a; border-radius: 6px;
            background: #2d2d3d; color: #dde; font-size: 15px; line-height: 1; cursor: pointer;
        }
        .gp-map-zoomctl button:hover { background: #3a3a50; }
        .gp-map-zoomlabel { min-width: 42px; text-align: center; font-size: 12px; color: #ccd; }
        .gp-map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; } /* fit：世界=設計畫面，超出裁切不畫 */
        .gp-map-nodes { position: absolute; inset: 0; } /* fit：節點層，在設計畫面內整體平移 */
        .gp-map-worldbg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
        .gp-map-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
        .gp-map-ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 4; }
        .gp-map-ui > * { pointer-events: auto; }
        /* 地圖 UI 按鈕（標題/返回鈕）— 位置/大小走 inline；外觀程式繪製 or 圖片 */
        .gp-map-uibtn { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 6px; }
        .gp-map-uibtn.img { padding: 0; background: none !important; border: none !important; }
        .gp-map-uibtn img { max-width: none; }
        .gp-map-uibtn.imgtext { background-repeat: no-repeat; }
        .gp-map-uibtn.imgtext span { text-shadow: 0 2px 6px rgba(0,0,0,0.85); }
        /* 指定變數顯示（段/章地圖右上角）— 圖示＋名稱＋變數值，暫時一個橫列。
           純顯示不可互動 → pointer-events:none，免得擋住地圖拖曳。外觀等九宮格再資料化。 */
        .gp-map-vardisp { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: row; gap: 8px;
            pointer-events: none; max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: flex-end; }
        .gp-vd-cell { display: flex; align-items: center; gap: 6px; padding: 6px 12px;
            background: rgba(20,24,34,0.88); border: 2px solid #5a6a86; border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5); white-space: nowrap; }
        .gp-vd-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
        .gp-vd-label { color: #b9c6db; font-size: 15px; }
        .gp-vd-value { color: #fff; font-size: 18px; font-weight: bold; }
        /* 道具介面（段/章地圖左下角）— 道具＝可視化的旗標，點開只能看說明。
           外觀先走這組預設值，等九宮格導入後再接介面編輯。 */
        .gp-map-items { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
        .gp-items-toggle { padding: 8px 16px; font-size: 16px; color: #fff; cursor: pointer;
            background: rgba(20,24,34,0.88); border: 2px solid #5a6a86; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .gp-items-toggle:hover { border-color: #8ab4f8; background: rgba(30,38,54,0.95); }
        .gp-items-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px;
            background: rgba(20,24,34,0.94); border: 2px solid #5a6a86; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
        .gp-items-panel[hidden] { display: none; }
        .gp-items-grid { display: grid; grid-template-columns: repeat(6, 64px); gap: 8px; max-height: 220px; overflow-y: auto; }
        .gp-item-cell { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
            background: #12161f; border: 2px solid #3a4553; border-radius: 6px; cursor: pointer; overflow: hidden; }
        .gp-item-cell:hover { border-color: #8ab4f8; }
        .gp-item-cell.sel { border-color: #ffb300; box-shadow: 0 0 10px rgba(255,179,0,0.6); }
        .gp-item-cell img, .gp-item-cell video, .gp-item-cell canvas { width: 100%; height: 100%; object-fit: contain; }
        .gp-item-noimg { font-size: 28px; }
        /* 數量：拍板 C —— 1 不顯示，>1 才在右下角標小字 */
        .gp-item-qty { position: absolute; right: 2px; bottom: 1px; padding: 0 4px; border-radius: 4px;
            font-size: 13px; font-weight: bold; color: #fff; background: rgba(0,0,0,0.75); }
        .gp-item-detail { max-width: 400px; padding: 8px 10px; background: #12161f; border: 1px solid #3a4553; border-radius: 6px; }
        .gp-item-detail[hidden] { display: none; }
        .gp-item-detail-name { color: #ffd479; font-weight: bold; margin-bottom: 4px; }
        .gp-item-detail-desc { color: #ddd; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
        .gp-map-uititle { color: #fff; text-shadow: 0 2px 8px #000; }
        .gp-map-uititle span { font-size: 30px; font-weight: bold; }
        .gp-map-uiback { cursor: pointer; color: #cfe6ff; background: rgba(18,18,30,.6); border: 1px solid #4a5a7a; }
        .gp-map-uiback span { font-size: 14px; }
        /* ── 系統畫面（收藏庫/成就）外殼：設計解析度舞台（等比縮放留黑邊）+ 標題/返回鈕（複用 .gp-map-ui*）+ 可捲動內容 ── */
        .gp-sys-root { position: absolute; inset: 0; overflow: hidden; }
        .gp-sys-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
        .gp-sys-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
        .gp-sys-body { position: absolute; left: 32px; right: 32px; top: 120px; bottom: 28px; overflow-y: auto; z-index: 1; }
        .gp-sys-stage .gp-map-uibtn { z-index: 2; }
        /* 存檔管理介面（存檔模式）*/
        .gp-save-wrap { display: flex; flex-direction: column; height: 100%; gap: 12px; }
        .gp-save-grid { display: grid; gap: 12px; align-content: start; }
        .gp-save-cell { border: 1px solid #3a4a6a; border-radius: 8px; padding: 10px; background: rgba(20,22,34,.7); position: relative; cursor: pointer; min-height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: #e8e8f0; }
        .gp-save-cell:hover { border-color: #6a9eff; }
        .gp-save-empty { color: #8a8aa0; align-items: center; justify-content: center; border-style: dashed; }
        .gp-save-title { font-weight: bold; font-size: 15px; }
        .gp-save-note { font-size: 12px; color: #aab; }
        .gp-save-time { font-size: 11px; color: #889; }
        .gp-save-del { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(200,60,60,.85); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
        .gp-save-del:hover { background: #e04545; }
        .gp-save-pager { display: flex; align-items: center; justify-content: center; gap: 12px; color: #ccd; flex-shrink: 0; }
        .gp-save-pager button { padding: 4px 12px; background: #2a2a3a; border: 1px solid #4a4a6a; color: #fff; border-radius: 4px; cursor: pointer; }
        .gp-save-pager button:disabled { opacity: .4; cursor: default; }
        .gp-save-empty-msg { text-align: center; color: #8a8aa0; padding-top: 40px; font-size: 16px; }
        /* 收藏庫類型卡（自由定位：設計座標，可拖移/樣式化；外觀走 inline，缺省用這裡的預設） */
        .gp-col-typelayer { position: absolute; inset: 0; z-index: 1; }
        .gp-col-typecard { position: absolute; box-sizing: border-box; background: #222232; border: 2px solid #3a4a6a; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; cursor: pointer; overflow: hidden; color: #fff; }
        .gp-col-typecard:not(.locked):hover { border-color: #6a9eff; }
        .gp-col-typecard.locked { opacity: 0.55; cursor: default; }
        .gp-col-typecard-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; }
        .gp-col-typecard-img img, .gp-col-typecard-img video, .gp-col-typecard-img canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
        .gp-col-typecard-name { text-align: center; margin-top: 8px; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* 收集品展示媒體（圖片/影片/Spine） */
        .gp-col-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
        .gp-col-media-empty { color: #889; padding: 40px; font-size: 18px; }
        .gp-col-spine { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
        .gp-col-spine img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .gp-col-spine-note { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #9ab; background: rgba(0,0,0,.5); padding: 2px 10px; border-radius: 6px; white-space: nowrap; }
        /* 收集品展示頁（覆蓋整個預覽容器的獨立一頁；full=填滿、fit=置中留框；返回→格子頁） */
        .gp-col-mediapage { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .gp-col-mediapage.full { background: #000; }
        .gp-col-mediapage.fit { background: #14141f; }
        .gp-col-mediapage.full .gp-col-mpname { display: none; }
        .gp-col-mpback { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(18,18,30,.75); border: 1px solid #4a5a7a; color: #cfe6ff; border-radius: 6px; padding: 8px 16px; font-size: 15px; cursor: pointer; }
        .gp-col-mpback:hover { background: rgba(40,40,60,.9); }
        .gp-col-mpname { flex-shrink: 0; color: #fff; font-size: 22px; font-weight: bold; padding: 16px 24px 8px; text-align: center; }
        .gp-col-mpmedia { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
        .gp-col-mediapage.fit .gp-col-mpmedia .gp-col-media { max-width: 82%; }
        .gp-col-mptext { flex-shrink: 0; color: #fff; padding: 12px 24px 20px; font-size: 18px; text-align: center; max-width: 80%; }
        /* 音樂播放器（收集品格子上方，原介面） */
        .gp-col-playerbar { margin-bottom: 12px; }
        .gp-col-player { display: flex; align-items: center; gap: 10px; background: #222232; border: 1px solid #3a4a6a; border-radius: 10px; padding: 10px 16px; }
        .gp-col-pname { color: #fff; font-size: 18px; margin-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; flex-shrink: 0; }
        .gp-col-player button { background: #3a3a4f; border: none; color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 18px; cursor: pointer; flex-shrink: 0; }
        .gp-col-player button:hover { background: #4a4a6a; }
        .gp-col-pseek { flex: 1; min-width: 80px; cursor: pointer; }
        .gp-col-ptime { color: #9ab; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
        /* HTML 版章/段節點（外觀走 inline 各章/段 mapStyle；hover 外框用 --cmhov） */
        .gp-cmap-node { position: absolute; box-sizing: border-box; border: 2px solid; border-radius: 8px; overflow: hidden; display: flex; }
        .gp-cmap-node.lay-imgTop { flex-direction: column; }
        .gp-cmap-node.lay-imgLeft { flex-direction: row; align-items: center; }
        .gp-cmap-node.playable:hover { border-color: var(--cmhov, #6a9eff) !important; }
        .gp-cmap-img { position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; flex: 0 0 auto; }
        .gp-cmap-node.lay-imgTop .gp-cmap-img { width: 100%; flex: 1 1 auto; }
        .gp-cmap-node.lay-imgLeft .gp-cmap-img { width: 42%; height: 100%; }
        .gp-cmap-name { padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .gp-cmap-node.lay-imgLeft .gp-cmap-name { flex: 1 1 auto; align-self: center; }
        .gp-cmap-node.lay-imgTop .gp-cmap-name { text-align: center; flex: 0 0 auto; }
        .gp-cmap-badge { position: absolute; top: 4px; right: 8px; font-size: 16px; z-index: 2; }
        .gp-cmap-badge.gp-cmap-badge-clear { color: #7ec97e; }
        .gp-cmap-badge-img { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; object-fit: contain; z-index: 2; }
        /* 目前位置標記（節點兄弟元素，尖端指向節點頂端中央，不被節點裁切） */
        .gp-cmap-current { position: absolute; width: 28px; height: 38px; transform: translate(-50%, -100%); z-index: 5; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
        .gp-cmap-current img { width: 100%; height: 100%; object-fit: contain; display: block; }
        /* ─── 對話介面設定（參數表單 ＋ 可拖移的版面預覽）─── */
        .res-popup.dui-popup { max-width: min(1280px, 96vw); min-width: 0; width: min(1280px, 96vw); }
        .dui-wrap { display: flex; gap: 16px; align-items: flex-start; }
        .dui-left { flex: 1 1 auto; min-width: 0; }
        .dui-right { flex: 0 0 400px; width: 400px; max-height: 68vh; overflow-y: auto; padding-right: 6px; }
        .dui-stage-wrap { position: relative; width: 100%; background: #07070f; border: 1px solid #3a3a4a; border-radius: 6px; overflow: hidden; }
        .dui-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
        .dui-hint { font-size: 11px; color: #888; margin-top: 6px; line-height: 1.5; }
        .dui-part { position: absolute; box-sizing: border-box; cursor: move; overflow: hidden; user-select: none; border: 1px dashed rgba(255,255,255,0.25); }
        .dui-part:hover { outline: 2px solid #6a9eff; outline-offset: -1px; }
        .dui-part-label { pointer-events: none; }
        .dui-panel { background: linear-gradient(0deg, rgba(10,10,30,0.95) 0%, rgba(10,10,30,0.85) 100%); border-top: 1px solid rgba(106,158,255,0.3); }
        .dui-face { background: rgba(74,111,165,0.3); border: 4px solid rgba(106,158,255,0.7); display: flex; align-items: center; justify-content: center; color: #cfe2ff; font-size: 20px; }
        .dui-namebox { background: rgba(15,15,50,0.95); border: 2px solid rgba(106,223,255,0.5); border-radius: 6px; }
        .dui-nametext { display: flex; align-items: center; font-weight: bold; border-style: dotted; }
        .dui-nametext[style*="text-align: center"] { justify-content: center; }
        .dui-nametext[style*="text-align: right"] { justify-content: flex-end; }
        .dui-text { border-style: dotted; }
        .dui-btn { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); color: #dfe6f5; border-radius: 6px; font-size: 14px; }
        .dui-sec { border: 1px solid #3a3a4a; border-radius: 6px; margin-bottom: 8px; background: #16161f; }
        .dui-sec > summary { padding: 8px 10px; cursor: pointer; font-size: 13px; color: #cfe2ff; user-select: none; }
        .dui-sec[open] > summary { border-bottom: 1px solid #3a3a4a; }
        .dui-sec > *:not(summary) { margin-left: 10px; margin-right: 10px; }
        .dui-sec > *:last-child { margin-bottom: 10px; }
        .dui-sum-tip { font-size: 11px; color: #888; margin-left: 8px; }
        .dui-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ccc; margin-top: 8px; }
        .dui-chk input { width: auto; }
        /* ─── 數值輸入框可讀性（全站；修「數字被裁 / 單位文字被壓」）───────────
           兩個來源會同時發生，窄框（40–70px）特別明顯：
           1. Chrome 的 number spinner 是 hover 才浮出、直接疊在數字上方，且佔掉約 16px。
              一律隱藏（鍵盤 ↑↓ 與滾輪仍可調整），把寬度還給內容。
           2. .modal-content input / .form-group input 的 padding(8–10px) + margin(16px 0)
              是為「滿寬文字框」設的；套在固定寬度的小數值框上，box-sizing:border-box
              會把可用寬度壓到十幾 px（縮放設 100 只顯示得出「10」），margin 還讓框在
              行內異常突出、貼住左右的說明文字。 */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
        .modal-content input[type="number"],
        .form-group input[type="number"],
        .res-popup input[type="number"] { padding: 4px 6px; margin: 0; }
        /* 「說明文字 ＋ 數值框 ＋ 單位」的行內組合：固定間距，框不貼字、不壓字 */
        .unit-field { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
        .unit-field input { margin: 0; }

        /* 專案設定的圖片欄位：選了哪張圖的檔名（縮圖旁） */
        .ps-icon-name { font-size: 12px; color: #bcd; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ps-icon-name.ps-builtin { color: #889; }
        /* 專案設定：地圖圖示、畫面襯底圖的預覽格（2026-10-18 Jin：系統內建的也要看得到長怎樣） */
        .ps-prev { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
            border: 1px solid #4a4a5a; border-radius: 4px; background: #1e1e2f; }
        .ps-prev-icon { width: 44px; height: 44px; }
        .ps-prev-icon img { max-width: 34px; max-height: 34px; object-fit: contain; display: block; }
        .ps-prev-bd { width: 96px; height: 54px; background: #000; }
        .ps-prev-bd img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ps-prev-check { color: #7ec97e; font-size: 24px; line-height: 1; }
        .ps-prev-tag { position: absolute; left: 0; bottom: 0; padding: 0 3px; font-size: 9px; line-height: 13px; color: #cde;
            background: rgba(0,0,0,0.7); border-top-right-radius: 3px; }

        /* 展示循環：固定設計解析度 + transform 等比縮放置中（純 CSS 的 aspect-ratio
           在 width:100% + max-height 下會破比例、填滿容器，襯底圖就沒地方露出來） */
        .gp-viewport-scaled { position: relative; transform-origin: center center; flex-shrink: 0; aspect-ratio: auto; max-width: none; max-height: none; }

        /* 段面板的「獨立段」標示（此屬性建立時決定、不可變更，所以不是勾選框） */
        .standalone-badge { background: rgba(120,90,200,0.14); border: 1px solid #7a5ac8; border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.7; color: #cfc4ee; }
        .standalone-badge b { color: #b9a3ff; }

        /* ── 可選透明度的顏色欄位（color-field.js）── */
        .cf-popup {
            position: fixed; z-index: 100001;   /* 要蓋過資源彈窗與各種 modal */
            background: #23232f; border: 1px solid #4a4a5a; border-radius: 8px;
            padding: 10px; width: 230px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            display: flex; flex-direction: column; gap: 8px;
        }
        .cf-popup .cf-row { display: flex; align-items: center; gap: 8px; }
        .cf-popup .cf-lab { font-size: 11px; color: #9ab; flex-shrink: 0; }
        .cf-popup .cf-hex-pick { width: 46px; height: 28px; padding: 0; border: 1px solid #555; border-radius: 4px; background: transparent; cursor: pointer; }
        .cf-popup .cf-hex-text { flex: 1; font-family: monospace; text-transform: lowercase; }
        .cf-popup .cf-alpha { flex: 1; }
        .cf-popup .cf-alpha-num { font-size: 11px; color: #ccc; width: 38px; text-align: right; flex-shrink: 0; }
        .cf-popup .cf-actions { justify-content: flex-end; }
        .cf-popup .cf-actions .btn { padding: 3px 12px; }
        .cf-swatch:hover { border-color: #6a9eff !important; }
        /* ── 節點面板的三層視覺（2026-08-11 依實測回饋加）──────────────────
           面板一長就分不出「哪幾行是同一件事」。三層各自要一眼看得出來：
             區塊 .np-block → 明顯的框＋底板；大標題 .np-title → 字級拉大；
             小標題 .np-sub → 與摺疊區標題同一套（同樣是「這一小段的名字」） */
        .np-block {
            border: 1px solid #43435a; border-radius: 8px; background: #21212e;
            padding: 10px 12px; margin-bottom: 12px;
        }
        .np-block-opt { border-left: 3px solid #ff9800; }
        .np-title { font-size: 16px; font-weight: bold; color: #e8e8f0; margin-bottom: 8px; }
        .np-note { font-size: 11px; color: #888; margin: -4px 0 6px; line-height: 1.5; }
        .np-sub { font-size: 12px; color: #cfe2ff; margin: 10px 0 4px; }
        .np-sub-tip { font-size: 11px; color: #888; margin-left: 8px; }
        .np-sub-chk { display: flex; align-items: center; gap: 6px; }
        .np-sub-chk input { width: auto; margin: 0; }
        /* 區塊裡的單行輸入（標題…）與提示文字欄位長一樣，不然同一個面板兩種底色 */
        .np-block > input[type="text"], .np-block > input:not([type]) {
            width: 100%; box-sizing: border-box;
            background: #2a2a3a; border: 1px solid #4a4a5a; border-radius: 4px;
            padding: 6px 8px; color: #e8e8e8; font-size: 13px;
        }
        .np-block > input:focus { outline: none; border-color: #6a9eff; }
        /* 共用按鈕外觀欄位：標籤放輸入框**前面**同一列，版面才不會被一行一個標籤撐開 */
        .mb-f { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #9ab; min-width: 0; }
        .mb-f > input, .mb-f > select, .mb-f > .cf-wrap { flex: 1; min-width: 0; width: auto; }
        /* 節點層的按鈕五態頁籤 */
        /* 聲音欄位的淡入/淡出（秒，可小數） */
        .sf-fade-l { font-size: 11px; color: #9ab; white-space: nowrap; }
        .sf-fade-u { font-size: 11px; color: #778; white-space: nowrap; margin-right: 6px; }
        input.sf-fade { width: 70px; flex: 0 0 70px; margin: 0; padding: 3px 6px; font-size: 12px; box-sizing: border-box; }
        /* 提示字（＝「沒設的話會是這個值」）統一調淡＋斜體：輸入框是**白底黑字**，
           瀏覽器預設的 placeholder 灰（#757575）在白底上看起來跟真值差不多黑，
           實測回報分不出哪個是值、哪個是提示。 */
        /* 值是「跟著模板／預設」帶出來的（不是這個物件自己設的）→ 與提示字同一個外觀。
           值仍然真的在欄位裡（刪得掉、可直接改），只是看得出來「這不是我設的」。 */
        .uis-field input.uis-inherit { color: #adadbb; font-style: italic; }
        .uis-field input::placeholder,
        input.sf-fade::placeholder,
        .mb-f input::placeholder { color: #adadbb; font-style: italic; }
        /* 五態頁籤 —— 真的長得像頁籤（選中那片與下方內容連成一體）。
           位置在「繪製方式」之下：所有態共用同一種繪製，階層才對。 */
        .btn-states { display: flex; align-items: flex-end; gap: 2px; flex-wrap: wrap;
                      margin: 8px 0 0; padding: 0 4px; border-bottom: 1px solid #4a5a7a; }
        .btn-state { position: relative; padding: 4px 12px; font-size: 11px;
                     border: 1px solid #3a3a4a; border-bottom: none; border-radius: 6px 6px 0 0;
                     background: #23232f; color: #9ab; margin-bottom: -1px; }
        .btn-state:hover { background: #2a2a3a; color: #cfe0ff; }
        /* 選中的頁籤：底色與內容區同色，並用一條同色線把下緣的分隔線「破」掉 */
        .btn-state-on { background: #1c1c28; border-color: #4a5a7a; color: #fff; font-weight: bold;
                        box-shadow: 0 1px 0 0 #1c1c28; }
        .btn-states + .uis-fgroup { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }
        /* 頁籤的說明文字：**不可以**放進 .btn-states 裡面 —— 那一列是 flex-wrap ＋ 下緣一條
           分隔線，說明換行就把分隔線推到說明底下，選中的頁籤與下方欄位就此斷成兩塊。 */
        .btn-states-tip { font-size: 11px; color: #888; padding: 0 4px; margin: 0 0 4px; line-height: 1.5; }
        .mb-box { border: 1px solid #333; border-radius: 6px; padding: 8px; margin-top: 8px; }
        .mb-label { font-size: 12px; color: #9ab; font-weight: bold; margin-bottom: 6px; }
        .mb-textrow { margin-bottom: 6px; }
        /* placeholder＝「沒設就用這個預設值」，不是目前的值。實測有人以為是值、
           按 Delete 想清掉卻清不掉 → 用斜體＋更暗的顏色讓它一眼就跟真值分得開。 */
        /* （提示字顏色統一在上面那條，避免兩個地方各寫一個值） */

        /* ── 富文本欄位（顯示結果 + 修改彈窗）── */
        .rtf-wrap { display: flex; flex-direction: column; gap: 6px; }
        .rtf-preview {
            min-height: 46px; max-height: 160px; overflow-y: auto;
            padding: 8px 10px; background: #1a1a28; border: 1px solid #4a4a5a; border-radius: 6px;
            color: #e8e8e8; font-size: 13px; line-height: 1.5; word-break: break-word;
        }
        .rtf-preview .rtf-empty { color: #666; font-style: italic; }
        .rtf-wrap .rtf-edit { align-self: flex-start; padding: 3px 12px; }
        /* 可直接輸入 ＋ 富文本鈕（文字欄位的固定樣式）：整列，右側一顆小按鈕 */
        .rtf-inline { display: flex; align-items: stretch; gap: 6px; }
        .rtf-inline .rtf-input {
            flex: 1; min-height: 34px; max-height: 160px; overflow: auto;
            background: #2a2a3a; border: 1px solid #4a4a5a; border-radius: 4px;
            padding: 6px 8px; color: #e8e8e8; font-size: 13px; line-height: 1.5;
        }
        .rtf-inline .rtf-input:focus { outline: none; border-color: #6a9eff; }
        .rtf-inline .rtf-input:empty::before { content: attr(data-ph); color: #666; font-style: italic; }
        .rtf-inline .rtf-edit { align-self: flex-start; padding: 6px 10px; }
        .rtf-modal-content { width: min(1000px, 94vw); }
        .rtf-modal .rtf-editor-host { max-height: 62vh; overflow: auto; }

        /* ── 介面設定（ui-settings-editor.js）：模板／樣式兩層庫 ──
           全螢幕三欄：左＝分類與項目（可收合）／中＝預覽（吃掉所有剩餘空間）／右＝設定表單（垂直） */
        .uis-modal {
            width: 100vw; height: 100vh; max-width: 100vw; min-width: 0;
            border-radius: 0; display: flex; flex-direction: column; padding: 10px 14px;
        }
        .uis-modal h3 { margin: 0; }
        .uis-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-bottom: 10px; }
        .uis-sidetoggle { padding: 3px 12px; font-size: 15px; line-height: 1; }
        .uis-tabs { display: flex; gap: 6px; }
        .uis-tab { padding: 4px 18px; }
        .uis-tab-on { background: #2f5fbf; border-color: #6a9eff; }
        .uis-wrap { flex: 1; min-height: 0; display: flex; gap: 10px; }
        .uis-side {
            width: 260px; flex-shrink: 0; overflow-y: auto; border: 1px solid #3a3a4a;
            border-radius: 8px; padding: 6px; background: #23232f;
            display: flex; flex-direction: column; gap: 8px;
        }
        .uis-side-hidden .uis-side { display: none; }
        /* 左欄改成一棵樹（2026-08-22）：選中的分類就地展開、底下直接接它的清單，
           不再「上面選分類、下面再選一份」。新增／擷取移到最上面，其餘全給樹。 */
        .uis-side-tools { display: flex; gap: 6px; flex-shrink: 0; padding-bottom: 6px; border-bottom: 1px solid #3a3a4a; }
        .uis-side-tools .btn { flex: 1; }
        .uis-side-tree { flex: 1; min-height: 0; overflow-y: auto; }
        /* 展開的清單縮排＋左側導引線，一眼看得出屬於上面那個分類 */
        .uis-side-tree .uis-list { margin: 2px 0 8px 12px; padding-left: 8px; border-left: 2px solid #3a4a6a; }
        .uis-tw { display: inline-block; width: 14px; color: #7f95bb; font-size: 10px; }
        .uis-cat-off .uis-tw { opacity: .35; }
        .uis-center {
            flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px;
            border: 1px solid #3a3a4a; border-radius: 8px; padding: 10px; background: #23232f;
        }
        .uis-center-foot { flex-shrink: 0; }
        .uis-right {
            width: 340px; flex-shrink: 0; overflow-y: auto; border: 1px solid #3a3a4a;
            border-radius: 8px; padding: 10px; background: #23232f;
        }
        .uis-empty-center { margin: auto; color: #888; font-size: 13px; text-align: center; }
        .uis-group { font-size: 11px; color: #7a8a9a; padding: 8px 6px 4px; font-weight: bold; }
        .uis-cat { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .uis-cat:hover { background: #2e2e3e; }
        .uis-cat-on { background: #2f5fbf; }
        .uis-cat-off { opacity: 0.5; }
        .uis-count { margin-left: auto; font-size: 11px; color: #9ab; background: #1a1a28; border-radius: 8px; padding: 0 6px; }
        .uis-usage { flex-basis: 100%; font-size: 10px; color: #778; line-height: 1.4; }
        .uis-main-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
        .uis-badge { font-size: 11px; color: #d8b06a; background: rgba(200,150,60,0.14); border: 1px solid #7a6030; border-radius: 6px; padding: 1px 8px; margin-left: 8px; }
        .uis-list { display: flex; flex-direction: column; gap: 4px; }
        .uis-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #3a3a4a; border-radius: 6px; cursor: pointer; }
        .uis-item:hover { border-color: #6a9eff; }
        .uis-item-on { background: #2b3d63; border-color: #6a9eff; }
        .uis-item-name { flex: 1; font-size: 13px; }
        .uis-item-ops { display: flex; gap: 4px; }
        /* 拖曳排序：順序就是資料的順序，所有引用它的下拉都照這個順序列 */
        .uis-drag { color: #667; cursor: grab; font-size: 14px; line-height: 1; user-select: none; }
        .uis-item-dragging { opacity: .45; }
        .uis-drop-before { box-shadow: 0 -2px 0 0 #6a9eff; }
        .uis-drop-after { box-shadow: 0 2px 0 0 #6a9eff; }
        /* 新增/複製出來的那一筆閃 2 秒 —— 不然在長清單裡看不出東西加到哪了 */
        .uis-item-new { animation: uisNewPulse 0.6s ease-in-out 0s 3; }
        @keyframes uisNewPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(106,158,255,0); border-color: #3a3a4a; }
            50% { box-shadow: 0 0 10px 2px rgba(106,158,255,0.75); border-color: #6a9eff; }
        }
        .uis-mini { padding: 2px 8px; font-size: 12px; }
        .uis-empty { font-size: 12px; color: #888; padding: 10px 4px; }
        .uis-edit-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
        .uis-sample { font-size: 11px; color: #9ab; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
        .uis-sample input { width: 200px; margin: 0; padding: 4px 6px; font-size: 12px; }
        .uis-name { font-size: 11px; color: #9ab; display: inline-flex; align-items: center; gap: 6px; }
        .uis-name input { width: 220px; margin: 0; padding: 4px 6px; font-size: 13px; font-weight: bold; color: #fff; }
        .uis-usestates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                         font-size: 11px; color: #9ab; margin-bottom: 6px; }
        .uis-usestate { display: inline-flex; align-items: center; gap: 4px; }
        .uis-usestate input { margin: 0; width: auto; }
        .uis-states { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
        .uis-state { padding: 3px 12px; font-size: 12px; }
        .uis-state-on { background: #2f5fbf; border-color: #6a9eff; }
        /* 欄位分區：同一件事的設定擺一起，不相干的整區可以略過
           （class 是 uis-fgroup —— uis-group 是左欄的模板分類分組，不可共用） */
        .uis-fgroup { border: 1px solid #34344a; border-radius: 6px; background: #1c1c28; padding: 8px; margin-bottom: 10px; }
        .uis-fgroup-t { font-size: 12px; font-weight: bold; color: #cfe0ff; margin-bottom: 8px;
                        border-bottom: 1px solid #34344a; padding-bottom: 5px; }
        /* 12 欄格線：哪兩個欄位排同一列是**指定**的，不是靠寬度湊出來的
           （靠 flex 湊會隨字數/視窗寬度飄，實測時逐格指定過位置就飄不得）。
           標籤一律在輸入框左邊 —— 標籤在上會讓每個欄位吃掉兩倍高度。 */
        .uis-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px 10px; align-items: center; }
        /* nowrap：flex 的換行判斷是拿「還沒壓縮的寬度」去算的 —— 允許換行時，欄位一窄
           它會直接把輸入框丟到下一行（欄位變兩倍高），而不是把輸入框壓窄。
           只有帶說明文字的欄位才需要換行（見 .uis-field-hint）。 */
        .uis-field { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px;
                     font-size: 11px; color: #9ab; min-width: 0; grid-column: span 12; }
        .uis-field-hint { flex-wrap: wrap; }
        /* 複合元件（音效／九宮格／陰影）：標籤自己一列，元件吃滿寬度 */
        .uis-field-block { flex-wrap: wrap; }
        .uis-field-block > .uis-label { flex: 1 1 100%; max-width: none; }
        .uis-field-block > * { flex: 1 1 100%; min-width: 0; }
        .uis-c4 { grid-column: span 4; }
        .uis-c6 { grid-column: span 6; }
        .uis-c12 { grid-column: span 12; }
        .uis-label { color: #9ab; flex: 0 0 auto; max-width: 84px;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .uis-field > .uis-hint { flex: 1 1 100%; }   /* 說明自己換行，不要擠在標籤旁 */
        /* 覆蓋 .modal-content input 的 width:100%/padding:10px/margin:16px（第 58 輪的遮字坑） */
        .uis-field input, .uis-field select { width: 100%; box-sizing: border-box; margin: 0; padding: 4px 6px; font-size: 12px; }
        /* 直屬輸入元件填滿剩餘寬度；數字框只要塞得下 5 位數（像素值不會更長） */
        .uis-field > input, .uis-field > select, .uis-field > .cf-wrap { flex: 1 1 auto; min-width: 0; width: auto; }
        /* 5 位數＝76px 就夠，但欄位窄時要讓得出去（不讓步的話標籤會被擠到自己一行，
           整個欄位變兩倍高 —— 正是這次要修掉的東西） */
        .uis-field > input[type="number"] { flex: 0 1 76px; width: 76px; min-width: 44px; }
        .uis-field input[type="number"] { -moz-appearance: textfield; }
        .uis-field input[type="number"]::-webkit-outer-spin-button,
        .uis-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .uis-hint { font-size: 10px; color: #778; line-height: 1.5; margin-top: 2px; }
        /* 介面設定左欄：分類的「遊戲目前用的設定」入口（2026-10-18 從專案設定搬來，ui-direct-editors.js） */
        .uis-direct { margin: 6px 0 8px; padding: 8px; border: 1px solid #3a4a5a; border-radius: 6px; background: #252536; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
        .uis-direct-label { font-size: 11px; color: #9ab; }
        .uis-img { display: flex; align-items: center; gap: 6px; }
        .uis-img img { width: 36px; height: 26px; object-fit: contain; border: 1px solid #4a4a5a; border-radius: 4px; flex-shrink: 0; }
        .uis-img input[readonly] { flex: 1; min-width: 0; }
        .uis-img .btn { padding: 2px 8px; flex-shrink: 0; }
        /* 九宮格：在圖上直接拖四條切線（純填數字要自己在腦中想像切在哪） */
        .ns-stage { display: block; }
        .ns-canvas { position: relative; display: inline-block; max-width: 100%; line-height: 0;
                     border: 1px solid #4a4a5a; border-radius: 4px; overflow: hidden;
                     /* 棋盤底：切在透明區時看得出來 */
                     background-image: linear-gradient(45deg, #2a2a36 25%, transparent 25%, transparent 75%, #2a2a36 75%),
                                       linear-gradient(45deg, #2a2a36 25%, #22222c 25%, #22222c 75%, #2a2a36 75%);
                     background-size: 12px 12px; background-position: 0 0, 6px 6px; }
        .ns-canvas img { display: block; max-width: 100%; max-height: 190px; }
        /* 線本體 1px，但抓取範圍放大到 11px，不然很難點中 */
        .ns-line { position: absolute; touch-action: none; }
        .ns-top, .ns-bottom { left: 0; right: 0; height: 11px; margin-top: -5px; cursor: ns-resize;
            background: linear-gradient(to bottom, transparent 5px, #ff5c8a 5px, #ff5c8a 6px, transparent 6px); }
        .ns-bottom { margin-top: 0; margin-bottom: -5px; }
        .ns-left, .ns-right { top: 0; bottom: 0; width: 11px; margin-left: -5px; cursor: ew-resize;
            background: linear-gradient(to right, transparent 5px, #ff5c8a 5px, #ff5c8a 6px, transparent 6px); }
        .ns-right { margin-left: 0; margin-right: -5px; }
        .ns-line:hover { filter: brightness(1.6); }
        .uis-nine { display: flex; flex-direction: column; gap: 6px; }
        .uis-nine-row { display: flex; gap: 8px; flex-wrap: wrap; }
        .uis-nine-num { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #9ab; }
        .uis-nine-num input { width: 62px; }
        .uis-nine-num select { width: 78px; }
        .uis-edit-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
        /* 角色設定：一張卡一個物件，垂直堆疊 */
        .uis-roles { display: flex; flex-direction: column; gap: 8px; }
        .uis-role-card { border: 1px solid #3a3a4a; border-radius: 6px; padding: 8px; background: #1e1e2c; }
        .uis-role-card:hover { border-color: #4a5a7a; }
        .uis-role-title { display: flex; align-items: center; gap: 6px; font-size: 13px; }
        /* 「顯示」併進 X／Y 那一列：勾選框本來自己佔一整列，而且窄到把字擠成直排 */
        .uis-role-vis { flex: 0 0 auto !important; white-space: nowrap; }
        .uis-role-vis input { width: auto !important; flex: 0 0 auto; margin: 0; }
        .uis-role-row { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
        .uis-role-row label { flex: 1; min-width: 0; font-size: 11px; color: #9ab; display: flex; align-items: center; gap: 4px; }
        .uis-role-row input[type="number"] { min-width: 0; }
        .uis-role-style { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9ab; margin-top: 6px; }
        .uis-role-style select { flex: 1; min-width: 0; }
        .uis-roles input, .uis-roles select { box-sizing: border-box; margin: 0; padding: 3px 5px; font-size: 12px; width: 100%; }
        .uis-roles input[type="number"] { -moz-appearance: textfield; }
        .uis-roles input[type="number"]::-webkit-outer-spin-button,
        .uis-roles input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .uis-role-kind { font-size: 10px; color: #778; margin-top: 2px; }
        .uis-multi { font-size: 10px; color: #d8b06a; margin-left: 6px; }
        /* multi 角色：一個角色卡裡列出多筆物件（第 n 筆＝畫面上的第 n 個） */
        .uis-role-obj { border-top: 1px dashed #3a3a4a; padding-top: 6px; margin-top: 6px; }
        .uis-role-card > .uis-role-obj:first-of-type { border-top: none; }
        .uis-obj-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #cfd6e6; }
        .uis-obj-ops { margin-left: auto; display: flex; gap: 4px; }
        .uis-obj-op { padding: 1px 7px; font-size: 12px; line-height: 1.4; }
        .uis-obj-add { margin-left: auto; padding: 1px 8px; font-size: 12px; }
        /* 「設為這個分類的預設」：一列就好 —— .uis-name input 的 width:220px 會把勾選框撐成
           一大格，文字被擠到換行；勾選框不吃那個寬度，文字也不折行。 */
        .uis-iface-def { font-size: 11px; color: #9ab; display: inline-flex; align-items: center; gap: 4px;
                       white-space: nowrap; }
        .uis-iface-def input { width: auto !important; flex: 0 0 auto; margin: 0; }
        .uis-foot { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-top: 12px; }
        .uis-apply { margin-top: 12px; padding: 10px; border: 1px solid #4a5a7a; border-radius: 8px; background: rgba(60,90,150,0.12); }
        .uis-row-off { opacity: 0.55; }
        .uis-row-on { background: rgba(60,110,200,0.22) !important; border-color: #6a9eff !important; }
        .uis-preview { flex: 1; min-height: 0; }
        /* 可視化編輯：左預覽（可拖移）＋ 右表單 */
        .uis-stage-wrap {
            position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden;
            background: #12121c; border: 1px solid #3a3a4a; border-radius: 6px;
        }
        .uis-stage { position: absolute; transform-origin: top left; background: #1a1a28; }
        .uis-po {
            position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
            border: 1px solid #6a9eff; background: rgba(40,60,110,0.5); color: #dfe8ff;
            font-size: 16px; overflow: hidden; cursor: move; user-select: none; text-align: center; padding: 2px 6px;
        }
        /* 介面設定預覽：切到「按下／按住」頁籤時，偏移也要看得出來（時間同 --ui-offset-ms） */
        .uis-po { transition: transform var(--ui-offset-ms, 0ms) ease-out; }
        .uis-po-nostyle { border-style: dashed; border-color: #7a7a8a; background: rgba(80,80,95,0.35); color: #c8c8d4; }
        .uis-po-on { outline: 2px solid #ffcc00; outline-offset: 1px; z-index: 5; }
        .uis-preview {
            display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 16px;
            background: repeating-conic-gradient(#2a2a38 0% 25%, #22222e 0% 50%) 50% / 20px 20px;
            border: 1px solid #3a3a4a; border-radius: 6px;
        }
        .uis-pv-obj { position: relative; cursor: default; }
        /* 內距輔助線：標出內容區邊界（置中的一行字看不出內距差別） */
        .uis-pad-guide { position: absolute; border: 1px dashed rgba(255,204,0,0.55); pointer-events: none; }
        .uis-shadow { display: flex; flex-wrap: wrap; gap: 6px; }
        .uis-shadow-num { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #9ab; }
        .uis-shadow-num input { width: 62px; }

        /* 介面／樣式「選了先看看」的提示（2026-08-21）——
           要一眼看得出「這還沒生效」，所以用整條底色＋左邊粗邊，不是一行小灰字。 */
        .np-preview-tag {
            margin: 6px 0 2px; padding: 8px 10px;
            background: rgba(255, 176, 32, 0.14);
            border-left: 4px solid #ffb020; border-radius: 4px;
            color: #ffd48a; font-size: 12px; line-height: 1.6;
            animation: np-preview-pulse 1.6s ease-in-out infinite;
        }
        .np-preview-tag b { color: #ffb020; }
        @keyframes np-preview-pulse { 0%, 100% { border-left-color: #ffb020; } 50% { border-left-color: #ff8a00; } }
        /* 預覽中唯讀的區塊：整塊壓暗，讓人知道現在不能改 */
        .np-preview-lock { opacity: .55; filter: saturate(.6); pointer-events: none; }

        /* ── 資源資訊面板（編輯彈窗：左預覽／右資訊＋下載）2026-08-21 ── */
        .res-info-row { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; }
        .res-info-preview {
            flex: 0 0 auto; max-width: 220px; min-width: 120px;
            display: flex; align-items: center; justify-content: center;
            background: #1a1a28; border: 1px solid #3a3a4a; border-radius: 4px;
            padding: 6px; min-height: 72px;
        }
        .res-info-preview:empty::after { content: '無預覽'; color: #667; font-size: 12px; }
        .res-info-noprev { color: #8a9; font-size: 13px; text-align: center; line-height: 1.7; }
        .res-info-noprev span { color: #667; font-size: 11px; }
        .res-info-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
        .res-info-list { display: flex; flex-direction: column; gap: 3px; }
        .res-info-line { display: flex; gap: 8px; font-size: 12px; line-height: 1.6; }
        .res-info-line .k { flex: 0 0 44px; color: #8a93a8; }
        /* 值可能很長（MIME、UUID 檔名）→ 一行放不下就省略，完整內容留在 title */
        .res-info-line .v { flex: 1; min-width: 0; color: #d8dce6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .res-info-dl { align-self: flex-start; padding: 6px 14px; }
        .res-info-dl:disabled { opacity: .5; cursor: default; }

        /* 工具列的打包下載鈕：與「＋ 新增」區隔開，避免誤按 */
        .res-bulk-dl { margin-left: auto; padding: 6px 12px; }
        .res-bulk-dl:disabled { opacity: .6; cursor: progress; }
        /* 音檔：原生 audio 播放器在 220px 內控制項會被截掉（只剩播放鍵），給它更寬的框 */
        .res-info-preview-wide { max-width: 340px; min-width: 280px; }

        /* ── 「🎨 風格」頁：用看的挑一整套（2026-08-22）────────────────────
           預覽圖走 /assets/ui/packs/{packId}.png，管理者可直接換檔，不必動程式。 */
        .uis-pack-mode .uis-side, .uis-pack-mode .uis-right { display: none; }
        .uis-pack-wall {
            flex: 1; min-height: 0; overflow-y: auto; padding: 2px;
            display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px; align-content: start; grid-auto-rows: max-content;
        }
        /* align-self:start —— grid item 預設會被拉伸成整列高，卡片高度因此
           不等於「圖＋名稱」，名稱列會被 overflow:hidden 切掉（實測：卡片 153px 卻裝 208px 的圖）。 */
        .uis-pack-card {
            align-self: start;
            border: 2px solid #3a3a4a; border-radius: 8px; background: #1e1e2c;
            cursor: pointer; overflow: hidden; transition: border-color .15s, transform .12s;
        }
        .uis-pack-card:hover { border-color: #6a9eff; transform: translateY(-2px); }
        .uis-pack-on { border-color: #4caf50; }
        .uis-pack-shot {
            position: relative; aspect-ratio: 16 / 9; background: #12121c;
            display: flex; align-items: center; justify-content: center;
        }
        /* 圖蓋在「尚無預覽圖」之上；載不到時 JS 把 img 藏起來就露出底下的字（不留破圖） */
        .uis-pack-shot img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }
        .uis-pack-noimg { position: absolute; color: #667; font-size: 12px; }
        .uis-pack-name {
            padding: 7px 9px; font-size: 13px; color: #e0e0e0;
            display: flex; align-items: center; gap: 6px; line-height: 1.4;
        }
        .uis-pack-badge {
            margin-left: auto; background: #4caf50; color: #fff;
            border-radius: 10px; padding: 1px 8px; font-size: 11px; flex-shrink: 0;
        }

        /* ── 清理未使用檔案／回收桶（resource-cleanup.js）── */
        .cl-body { max-height: 60vh; }
        .cl-summary { font-size: 13px; color: #cfcfe0; margin: 6px 0 10px; }
        .cl-summary b { color: #fff; }
        .cl-dim { color: #888; font-size: 12px; }
        .cl-section { margin-bottom: 14px; border: 1px solid #3a3a4a; border-radius: 6px; overflow: hidden; }
        .cl-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #2a2a3a; font-size: 13px; font-weight: bold; color: #e0e0e0; }
        .cl-tools { display: flex; gap: 6px; flex-wrap: wrap; font-weight: normal; }
        .cl-tools .btn { padding: 3px 8px; font-size: 12px; }
        .cl-list { max-height: 40vh; overflow-y: auto; }
        .cl-item { cursor: default; }
        .cl-item .cl-check { flex-shrink: 0; }
        .cl-thumb { cursor: zoom-in; }
        .cl-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
        .cl-icon { font-size: 22px; }
        .cl-empty { padding: 16px; text-align: center; color: #666; font-size: 13px; }
        .cl-preview-body { margin: 8px 0 12px; }
        .cl-audio-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
        .cl-textview { max-height: 50vh; overflow: auto; background: #1e1e2f; color: #ddd; padding: 10px; border-radius: 4px; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
        /* 彈窗裡的全域 input{width:100%} 會把勾選框撐滿整列 → 這裡壓回去 */
        .res-mgmt-popup .cl-item input.cl-check { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; padding: 0; }
        /* 上傳框：檔案拖到框上時的高亮（drop-upload.js） */
        .res-upload-area.drag-over { border-color: #6fa8ff; background: #243352; color: #dfe7f5; }

/* 新架構（格式 2）編輯權三態標籤（第 87 輪 P3；格式 1 由 applyEditState 隱藏） */
.es-badge { font-size: 11px; padding: 4px 8px; border-radius: 4px; border: 1px solid #4a4a5a; color: #aaa; background: #1e1e2f; white-space: nowrap; }
.es-badge.es-readonly { color: #9ab; }
.es-badge.es-editing { color: #81c784; border-color: #4caf50; }
.es-badge.es-held { color: #ffb74d; border-color: #ff9800; }