:root{--bg: #f3f4f6;--bg-2: #e9ebef;--panel: #ffffff;--panel-2: #f5f6f8;--line: #d9dce1;--line-strong: #c4c9d0;--text: #1b1f24;--muted: #6b7178;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-contrast: #ffffff;--accent-soft: #e6edfd;--warn: #a15c07;--danger: #dc2626;--badge-bg: #e7f4ec;--badge-fg: #1f7a45;--badge-line: #bfe3cd;--court-area: #f4f5f6;--court-floor: #fdfdfd;--court-line: rgba(31, 41, 55, .36);--court-border: rgba(31, 41, 55, .52);--player-fill: #e2572b;--player-fill-sel: #f2a021;--player-stroke: rgba(0, 0, 0, .3);--player-text: #ffffff;--radius: 0px;--control-h: 30px;--touch: 38px;color-scheme:light}:root[data-theme=dark]{--bg: #0f141b;--bg-2: #10161e;--panel: #151c26;--panel-2: #1a2330;--line: #2a3646;--line-strong: #35455a;--text: #e7edf5;--muted: #8a97a8;--accent: #4d90f0;--accent-hover: #6aa3f5;--accent-contrast: #06121f;--accent-soft: #16263c;--warn: #e0a44a;--danger: #f06565;--badge-bg: #12331f;--badge-fg: #63e6a0;--badge-line: #1f5236;--court-area: #0c1218;--court-floor: #141b24;--court-line: rgba(206, 220, 236, .5);--court-border: rgba(224, 234, 246, .66);--player-fill: #e2572b;--player-fill-sel: #f2a021;--player-stroke: rgba(0, 0, 0, .45);--player-text: #ffffff;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;line-height:1.35;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}button,input{font-family:inherit;color:inherit}.app{display:flex;height:100%;width:100%}.sidebar{width:140px;min-width:124px;height:100%;flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));padding-top:calc(8px + env(safe-area-inset-top));overflow-y:auto;display:flex;flex-direction:column;gap:6px;-webkit-overflow-scrolling:touch}.court{flex:1;min-width:0;height:100%;position:relative;background:var(--court-area)}.court-stage{position:absolute;top:0;right:0;bottom:0;left:0;transition:background .15s ease}.court-stage.is-setup{background:#2563eb0f}.court-canvas{display:block;width:100%;height:100%;touch-action:none}.brand{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;letter-spacing:0;padding:2px 2px 4px}.brand.big{font-size:20px;justify-content:center;margin-bottom:2px}.brand-mark{color:var(--accent);font-size:1.15em;line-height:1}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:6px}.panel h3{margin:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.panel-title{display:flex;align-items:center;gap:5px}.info-popover{position:relative;display:inline-flex}.info-btn{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--muted);font-size:11px;line-height:1;cursor:pointer}.info-btn:hover,.info-btn[aria-expanded=true]{color:var(--text)}.info-bubble{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:max-content;max-width:180px;padding:7px 9px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 6px 20px #0000002e;color:var(--text);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.35}.hint{color:var(--muted);margin:0;line-height:1.3}.small{font-size:11px}.muted{color:var(--muted)}.warn{color:var(--warn);margin:2px 0 0}.segmented{display:flex;flex-direction:column;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:2px;gap:2px}.segmented-btn{flex:1;min-height:var(--control-h);border:none;background:transparent;border-radius:var(--radius);font-weight:500;font-size:12px;cursor:pointer;color:var(--muted);transition:background .12s,color .12s}.segmented-btn.is-active{background:var(--accent);color:var(--accent-contrast)}.tool-grid{display:flex;flex-direction:column;gap:4px}.tool-btn{min-height:34px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:0 10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:border-color .12s,background .12s}.tool-btn:active{background:var(--bg-2)}.tool-btn.is-active{border-color:var(--accent);background:var(--accent-soft)}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.tool-glyph{font-size:16px;line-height:1}.tool-label{font-size:12px;color:var(--muted)}.tool-btn.is-active .tool-label{color:var(--text)}.swatch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.swatch{height:22px;border-radius:var(--radius);border:1px solid var(--line-strong);cursor:pointer;padding:0;position:relative}.swatch.custom.wide{width:100%;height:26px}.swatch.is-active{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--panel)}.swatch.custom{overflow:hidden;display:inline-flex;align-items:center;justify-content:center}.swatch.custom input{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;opacity:0;cursor:pointer}.btn{min-height:var(--control-h);padding:0 10px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-weight:500;font-size:12px;cursor:pointer;transition:background .12s,border-color .12s}.btn:hover{border-color:var(--line-strong)}.btn:active{background:var(--bg-2)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn.ghost{background:transparent}.btn.wide{width:100%}.btn.small{min-height:26px;font-size:11px;padding:0 8px}.btn-row{display:flex;flex-direction:column;gap:5px}.control-divider{border:none;border-top:1px solid var(--line);margin:8px 0 3px}.btn-row .btn{flex:1}.btn.peek{width:100%;min-height:var(--touch);font-size:13px;font-weight:600;letter-spacing:.02em;background:var(--panel-2);border-color:var(--line-strong);color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none}.btn.peek.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.signout{margin-top:auto}.icon-btn{width:var(--control-h);height:var(--control-h);border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2);font-size:16px;line-height:1;cursor:pointer}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14181e66;display:flex;z-index:20;animation:fade .12s ease}@keyframes fade{0%{opacity:0}}.dialog{margin:auto;width:min(420px,92vw);max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 32px #0000002e}.drawer{margin-left:auto;width:min(380px,94vw);height:100%;background:var(--panel);border-left:1px solid var(--line-strong);padding:10px calc(10px + env(safe-area-inset-right)) 10px 10px;padding-top:calc(10px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:10px;overflow-y:auto;animation:slide .16s ease}@keyframes slide{0%{transform:translate(24px);opacity:.4}}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{margin:0;font-size:14px;font-weight:600}.dialog-actions{display:flex;gap:6px;justify-content:flex-end}.field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}.field input,.search,.inline-add input{min-height:var(--control-h);border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);color:var(--text);padding:0 8px;font-size:13px}.field input:focus,.search:focus,.inline-add input:focus{outline:none;border-color:var(--accent)}.search{width:100%}.inline-add{display:flex;gap:5px}.inline-add input{flex:1}.switch-row{display:flex;align-items:center;gap:8px;font-size:12px}.switch-row input{width:16px;height:16px}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{min-height:24px;padding:0 8px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:11px;cursor:pointer}.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.library-filters{display:flex;flex-direction:column;gap:8px}.play-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto}.play-item{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:5px 7px}.play-main{flex:1;display:flex;align-items:center;gap:6px;min-width:0}.play-open{flex:1;min-width:0;text-align:left;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:4px 0}.play-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 5px;border-radius:var(--radius);background:var(--badge-bg);color:var(--badge-fg);border:1px solid var(--badge-line)}.auth-screen{height:100%;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg-2)}.auth-card{width:min(340px,92vw);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 32px #00000024}@media (max-width: 560px){.app{flex-direction:column-reverse}.sidebar{width:100%;min-width:0;height:46%;border-right:none;border-top:1px solid var(--line)}.court{height:54%}}