: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}}
