:root{--bg: #0b0f13;--panel: #131a20;--line: #232c34;--card: #182029;--fg: #e8eef2;--muted: #8b98a5;--accent: #3fc1c9;--danger: #e0655f;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font:15px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{display:flex;flex-direction:column;min-height:100vh}.bar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);flex-wrap:wrap}.bar .back{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}.bar .back:hover{color:var(--accent)}.bar .song b{font-weight:700}.bar .spacer{flex:1}.muted{color:var(--muted)}.ctl{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit}.chk{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;white-space:nowrap}.btn{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:9px;padding:8px 13px;font:600 14px inherit;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#04252a;border-color:var(--accent)}.actions{display:inline-flex;align-items:center;gap:10px}.cols{display:grid;gap:16px;padding:16px;align-items:start;flex:1;grid-template-columns:300px 300px 1fr;grid-template-areas:"sections order preview"}.panel-sections{grid-area:sections}.panel-order{grid-area:order}.panel-slides{grid-area:preview}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}.panel.grow{min-height:60vh}.panel h2{margin:0 0 8px;font-size:15px;letter-spacing:-.01em}.panel-head{display:flex;align-items:center;justify-content:space-between}.hint{color:var(--muted);font-size:12.5px;margin:0 0 10px}.cards{display:flex;flex-direction:column;gap:8px}.card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--type);border-radius:10px;padding:9px 10px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.tag{font-weight:700;font-size:13px}.card-lines{color:var(--muted);font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini{background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:7px;padding:3px 8px;font:600 12px inherit;cursor:pointer}.mini:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.mini:disabled{opacity:.35;cursor:default}.mini.danger:hover{border-color:var(--danger);color:var(--danger)}.setlist{display:flex;flex-direction:column;gap:6px}.setlist .row{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--type);border-radius:9px;padding:6px 8px}.setlist .num{width:20px;flex:none;text-align:center;color:var(--muted);font-size:12px}.setlist .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600}.setlist .mini{flex:none}.t-verse{--type: #4a90d9}.t-chorus{--type: #3fc1c9}.t-prechorus{--type: #6d9}.t-bridge{--type: #b07cf0}.t-intro{--type: #7a8794}.t-tag{--type: #e0a34f}.t-other{--type: #8b98a5}.slides{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.slide{aspect-ratio:16 / 9;border-radius:10px;border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;cursor:pointer;position:relative}.slide:hover{outline:2px solid var(--accent)}.slide .s-label{position:absolute;top:7px;left:10px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;opacity:.8}.slide .s-lines{text-align:center;font-weight:700;display:flex;flex-direction:column;gap:2px}.fatal{max-width:520px;margin:16vh auto;text-align:center;padding:0 20px}.fatal h1{font-size:20px;letter-spacing:-.02em}.fatal p{color:var(--muted);margin:10px 0 20px}.present{position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:none;user-select:none}.present-stage{width:92%;max-width:1500px;text-align:center}.present-label{text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:var(--label);margin-bottom:24px;opacity:.85}.present-lines{display:flex;flex-direction:column;gap:.35em;font-weight:800;line-height:1.18}.present-counter{position:fixed;bottom:16px;right:22px;font-size:13px;color:var(--label);opacity:.6}.present:hover{cursor:default}.tabs{display:none}@media (max-width: 1000px){.cols{grid-template-columns:1fr 1fr;grid-template-areas:"sections order" "preview preview"}.bar{gap:10px}}@media (max-width: 700px){.bar{gap:8px 10px;padding:10px 12px;position:sticky;background:var(--bg);backdrop-filter:none}.bar .song{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar .spacer{display:none}.ctl{padding:8px;font-size:13px}.tabs{display:flex;gap:6px;position:sticky;top:0;z-index:6;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line)}.tab{flex:1;background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:9px 0;font:600 13px inherit;cursor:pointer}.tab.on{background:var(--accent);color:#04252a;border-color:var(--accent)}.cols{display:block;padding:12px 12px 84px}.cols .panel{display:none}.cols.m-sections .panel-sections,.cols.m-order .panel-order,.cols.m-slides .panel-slides{display:block}.panel.grow{min-height:auto}.slides{grid-template-columns:1fr}.actions{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}.actions .btn{flex:1;padding:12px 8px}.actions .act-present{display:none}}.console{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;gap:10px;background:var(--bg, #10151a);color:var(--fg, #e8eef3);padding:14px 16px}.con-bar{display:flex;align-items:center;gap:12px}.con-counter{font:700 14px ui-monospace,monospace;color:#7fd6dd}.con-spacer{flex:1}.con-hint{margin:0;color:#8b98a5;font-size:13px}.con-hint b{color:#e8eef3}.con-main{display:grid;grid-template-columns:2fr 1fr;gap:12px;min-height:0;flex:1}.con-pane{display:flex;flex-direction:column;gap:6px;min-height:0}.con-pane-title{font:700 11px system-ui;letter-spacing:.08em;text-transform:uppercase;color:#8b98a5}.con-cur,.con-next{flex:1;min-height:0}.con-slide{height:100%;border-radius:12px}.con-slide--dim{opacity:.8}.con-end{display:grid;place-items:center;height:100%;color:#8b98a5;border:1px dashed #2a3540;border-radius:12px}.con-strip{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;flex:none}.con-thumb{position:relative;flex:none;width:168px;height:96px;border-radius:8px;cursor:pointer;border:2px solid transparent}.con-thumb.on{border-color:#3fc1c9;box-shadow:0 0 0 3px #3fc1c940}.con-thumb-num{position:absolute;left:6px;top:4px;font:700 10px ui-monospace,monospace;color:#ffffff8c}.screen-hint{position:fixed;left:50%;bottom:18px;transform:translate(-50%);font:500 13px system-ui;color:#ffffff8c;background:#00000059;border-radius:999px;padding:7px 14px;transition:opacity .6s}.screen-hint.gone{opacity:0;pointer-events:none}@media (max-width: 760px){.con-main{grid-template-columns:1fr}.con-pane:last-child{display:none}}.con-pick{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-start;justify-content:center;padding-top:16vh;background:#0000008c}.con-pick-card{width:100%;max-width:380px;background:#151d23;border:1px solid #2a3540;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}.con-pick-title{font:700 15px system-ui;margin-bottom:4px}.con-pick-btn{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;background:#10151a;border:1px solid #2a3540;border-radius:10px;padding:10px 12px;color:#e8eef3;font:500 14px system-ui}.con-pick-btn span{color:#8b98a5;font-size:12px}.con-pick-btn:hover{border-color:#3fc1c9}.con-pick-btn.rec{border-color:#3fc1c9;box-shadow:0 0 0 2px #3fc1c92e}.stage-host{position:absolute;inset:0;overflow:hidden}.stage-tile{position:relative;overflow:hidden}.vstage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform-origin:center;transform:translate(-50%,-50%) scale(.1)}.vstage .present-label{font-size:34px;margin-bottom:30px}.con-thumb .con-thumb-num{z-index:2}.present,.present:focus,.present:focus-visible{outline:none}