*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #111318;--panel: #1a1d24;--panel-2: #22262f;--border: #2e3340;--text: #e8eaf0;--muted: #8a91a3;--accent: #4f8cff;--accent-2: #2c5cc5;--danger: #e05555;--live: #ff9f2e;--font: -apple-system, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font)}button{font-family:inherit;font-size:1rem;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px 16px;cursor:pointer;touch-action:manipulation}button:active{transform:scale(.98)}button.primary{background:var(--accent-2);border-color:var(--accent)}button.danger{background:transparent;border-color:var(--danger);color:var(--danger)}button:disabled{opacity:.4;cursor:default}input,textarea,select{font-family:inherit;font-size:1rem;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;width:100%}textarea{resize:vertical;min-height:90px;line-height:1.5}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:4px}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar h1{font-size:1.1rem;margin-right:auto}.topbar .spacer{margin-left:auto}.page{max-width:1100px;margin:0 auto;padding:20px 16px}.login-box{max-width:360px;margin:12vh auto;padding:28px;background:var(--panel);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;gap:14px}.error{color:var(--danger);font-size:.9rem}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button.active{background:var(--accent-2);border-color:var(--accent)}.list{display:flex;flex-direction:column;gap:6px}.list-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:8px}.list-row .title{flex:1;min-width:0}.list-row .sub{color:var(--muted);font-size:.85rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .full{grid-column:1 / -1}.slide-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}.slide-card .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.session-info{background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:16px;margin-top:14px;display:flex;flex-direction:column;gap:8px;word-break:break-all}.session-info code{font-size:1.3rem;color:var(--accent)}.control{display:flex;flex-direction:column;height:100dvh}.control-search{padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--border);position:relative}.search-results{position:absolute;left:12px;right:12px;top:100%;z-index:10;background:var(--panel-2);border:1px solid var(--border);border-radius:0 0 10px 10px;max-height:50dvh;overflow-y:auto;box-shadow:0 8px 24px #00000080}.search-result{padding:10px 14px;border-bottom:1px solid var(--border)}.search-result .row{justify-content:space-between}.search-result .snippet{color:var(--muted);font-size:.85rem;margin-top:2px}.search-result .snippet mark{background:var(--live);color:#000;border-radius:2px}.control-body{display:flex;flex:1;min-height:0}.control-songs{width:230px;overflow-y:auto;background:var(--panel);border-right:1px solid var(--border);flex-shrink:0}.control-songs .song-btn{display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--border);border-radius:0;background:none;padding:12px 14px}.control-slides{flex:1;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-content:start}.slide-tile{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;font-size:.82rem;line-height:1.45;white-space:pre-wrap;overflow:hidden;max-height:160px;position:relative}.slide-tile{text-align:center}.slide-tile .label{color:var(--muted);font-size:.72rem;margin-bottom:4px}.slide-tile.live{border-color:var(--live);box-shadow:0 0 0 1px var(--live)}.slide-tile.live:after{content:"LIVE";position:absolute;top:6px;right:8px;color:var(--live);font-size:.65rem;font-weight:700}.control-bar{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--border);align-items:center}.control-bar button{flex:1;padding:14px 8px;font-size:1.05rem}.control-bar .lang-group{display:flex;gap:0;flex:0 0 auto}.control-bar .lang-group button{border-radius:0;flex:none;padding:14px 12px}.control-bar .lang-group button:first-child{border-radius:8px 0 0 8px}.control-bar .lang-group button:last-child{border-radius:0 8px 8px 0}.control-bar .lang-group button{min-width:54px}.control-bar .lang-group button.active{background:var(--accent-2);border-color:var(--accent)}.conn-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);flex:0 0 auto}.conn-dot.ok{background:#3dbb6e}.save-state{font-size:.8rem;color:var(--muted);white-space:nowrap}.save-state.error{color:var(--danger)}.session-qr{width:160px;height:160px;border-radius:8px;align-self:center;background:#fff;padding:6px}.display{height:100dvh;background:#000;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4vh 5vw;gap:3vh;cursor:none;overflow:hidden}.display .zh{font-size:7vw;line-height:1.35;font-weight:600;white-space:pre-wrap}.display .en{font-size:4.5vw;line-height:1.3;white-space:pre-wrap}.display .solo{font-size:7vw;line-height:1.35;font-weight:600;white-space:pre-wrap}.display .status{color:#555;font-size:2.5vh;font-family:monospace}.display .conn-badge{position:fixed;top:12px;right:12px;width:12px;height:12px;border-radius:50%;background:var(--danger);opacity:.85}button{white-space:nowrap}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex:0 0 auto}.icon-btn.danger{border-color:var(--border);color:var(--danger)}.icon-btn-labeled{display:inline-flex;align-items:center;gap:6px;min-width:84px;justify-content:center}.media-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px}.media-form{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}.control-songs .media-btn{border-left:3px solid var(--live)}.control-songs .section-head{padding:8px 10px 4px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.media-bin{display:flex;flex-wrap:wrap;gap:14px}.media-tile{width:160px}.media-thumb{position:relative;aspect-ratio:16 / 9;background:#000;border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}.media-thumb .media-glyph{font-size:2rem}.media-badge{position:absolute;left:6px;bottom:6px;background:var(--live);color:#000;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:20px}.media-badge.err{background:var(--danger);color:#fff}.media-count{position:absolute;right:6px;bottom:6px;background:#000000b3;color:#fff;font-size:.7rem;padding:1px 7px;border-radius:20px}.media-del{position:absolute;top:4px;right:4px;width:26px;height:26px;padding:0;background:#0009;border-color:transparent;color:var(--danger);opacity:0;transition:opacity .1s}.media-tile:hover .media-del{opacity:1}.media-name{margin-top:6px;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setlist-editor{display:grid;grid-template-columns:minmax(340px,420px) 1fr;gap:20px;align-items:start;width:94vw;max-width:1600px;margin-left:50%;transform:translate(-50%)}.setlist-left{min-width:0}.setlist-right{position:sticky;top:12px;align-self:start;min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}.grid-toolbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel-2)}.grid-toolbar input[type=range]{accent-color:var(--accent)}.grid-scroll{max-height:calc(100dvh - 90px);overflow-y:auto;padding:12px}.item-row{cursor:grab;position:relative}.item-row.dragging{opacity:.4}.item-row .drag-handle{color:var(--muted);display:inline-flex;flex:0 0 auto}.item-row-header{background:var(--panel-2)}.item-row-header .header-title-input{flex:1;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.85rem;background:transparent;border:1px solid transparent}.item-row-header .header-title-input:hover,.item-row-header .header-title-input:focus{border-color:var(--border)}.item-row.drag-over-before:before,.item-row.drag-over-after:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--accent);border-radius:1px;pointer-events:none}.item-row.drag-over-before:before{top:-1px}.item-row.drag-over-after:after{bottom:-1px}.pgrid-divider{margin:18px 0 10px;padding-bottom:4px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}.pgrid-group{margin-bottom:14px}.pgrid-header{font-size:.85rem;color:var(--text);font-weight:600;margin-bottom:6px}.pgrid-cells{display:flex;flex-wrap:wrap;gap:8px}.pcell{width:var(--cell);aspect-ratio:16 / 9;background:#000;border:1px solid var(--border);border-radius:6px;overflow:hidden;font-size:calc(var(--cell) / 14);display:flex;align-items:center;justify-content:center;text-align:center;position:relative}.pcell.slide{border-left:4px solid var(--muted)}.pcell.loading{background:var(--panel-2)}.pcell.live{box-shadow:0 0 0 2px var(--live)}.pcell.live:after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--live)}.pcell img{width:100%;height:100%;object-fit:contain}.pcell-stage{padding:6%;display:flex;flex-direction:column;gap:4%;justify-content:center;width:100%}.pcell-stage .pv-zh{font-size:1.1em;line-height:1.25;font-weight:600;white-space:pre-wrap;color:#fff}.pcell-stage .pv-en{font-size:.72em;line-height:1.2;white-space:pre-wrap;color:#ddd}.pcell.video{position:relative}.fit-warn{position:absolute;top:4px;right:4px;z-index:3;width:18px;height:18px;border-radius:50%;background:#d97706;color:#000;font-weight:800;font-size:12px;line-height:18px;text-align:center;box-shadow:0 0 0 2px #0009}.fit-warn-overflow{background:#dc2626;color:#fff}.pcell.video .film{font-size:2em}.pcell.video .play{position:absolute;color:#fff;font-size:1.5em;text-shadow:0 0 8px #000}@media (max-width: 900px){.setlist-editor{grid-template-columns:1fr;width:100%;margin-left:0;transform:none}.setlist-right{position:static}.grid-scroll{max-height:60dvh}}.media-video,.media-img{max-width:100vw;max-height:100dvh;width:auto;height:auto}.media-video{width:100vw;height:100dvh;border:none;object-fit:contain;background:#000}.media-img{object-fit:contain}.lang-menu{position:relative;flex:0 0 auto}.dropdown{position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:160px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #00000080;overflow:hidden}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:0;padding:12px 14px}.dropdown-item:hover{background:var(--panel)}.dropdown-item .check{width:1.1em;display:inline-flex;color:var(--accent)}.list-row.clickable{cursor:pointer}.list-row.clickable:hover{border-color:var(--accent)}.editor-preview{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}.preview-col{position:sticky;top:12px;max-height:calc(100dvh - 40px);overflow-y:auto}.slide-preview{margin-bottom:12px;position:relative}.slide-preview-tag{position:absolute;top:6px;left:6px;z-index:2;color:#000;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:20px}.slide-preview-stage{aspect-ratio:16 / 9;background:#000;border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6% 5%;gap:4%;overflow:hidden;container-type:inline-size}.slide-preview-stage .pv-zh{line-height:1.3;font-weight:600;white-space:pre-wrap}.slide-preview-stage .pv-en{line-height:1.25;white-space:pre-wrap;color:#ddd}.slide-preview-stage .pv-empty{color:#444}.control-songs .song-btn{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--border);background:none;padding:12px 10px;cursor:pointer;color:var(--text);position:relative}.control-songs .song-btn.active{background:var(--accent-2)}.control-songs .song-btn.dragging{opacity:.4}.control-songs .drag-handle{color:var(--muted);cursor:grab;flex:0 0 auto;display:inline-flex}.control-songs .song-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.control-songs .song-btn.drag-over-before:before,.control-songs .song-btn.drag-over-after:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--accent);border-radius:1px;pointer-events:none}.control-songs .song-btn.drag-over-before:before{top:-1px}.control-songs .song-btn.drag-over-after:after{bottom:-1px}@media (max-width: 700px){.control-songs{width:150px}.form-grid,.slide-card .pair{grid-template-columns:1fr}.control-slides{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.editor-preview{grid-template-columns:1fr}.preview-col{position:static;max-height:none}}