*{box-sizing:border-box;-webkit-touch-callout:none}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{background-color:#121212;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.app-shell{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;background:#121212}.app-header{background-color:#1e1e1ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:0 15px;height:50px;display:flex;align-items:center;border-bottom:1px solid #333;flex-shrink:0;z-index:20;position:relative}.header-brand{font-weight:700;font-size:15px;color:#e0e0e0;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}.header-project{position:absolute;left:50%;transform:translate(-50%);font-weight:700;font-size:15px;color:#e0e0e0;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(50vw,360px);text-align:center}.header-actions{display:flex;gap:10px;margin-left:auto;z-index:1;align-items:center}.header-btn{background:none;border:1px solid #555;color:#ccc;padding:6px 14px;border-radius:16px;font-size:13px;cursor:pointer;transition:all .2s;font-weight:500}.header-btn:hover{border-color:#e91e63;color:#e91e63}.header-auth-btn{border:1px solid #555;background:transparent;color:#cfcfcf;border-radius:16px;padding:6px 12px;font-size:13px;cursor:pointer}.header-auth-btn:hover{border-color:#e91e63;color:#e91e63}.header-user{position:relative}.header-avatar-btn{width:32px;height:32px;border-radius:50%;border:none;color:#fff;background:linear-gradient(135deg,#ff2f7d,#c2185b);font-size:13px;font-weight:700;cursor:pointer}.header-user-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:128px;border-radius:12px;border:1px solid #474747;background:#1e1e1efa;box-shadow:0 12px 26px #00000073;overflow:hidden}.header-user-menu-item{width:100%;border:none;background:transparent;color:#f2f2f2;font-size:13px;text-align:left;padding:10px 12px;cursor:pointer}.header-user-menu-item:hover{background:#e91e6326}#stage-container{flex:1;position:relative;overflow:hidden;background:#181818;cursor:crosshair;--grid-size: 40px;--grid-offset-x: 0px;--grid-offset-y: 0px;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:var(--grid-offset-x) var(--grid-offset-y),var(--grid-offset-x) var(--grid-offset-y)}.dancer{position:absolute;width:52px;height:52px;z-index:10;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 15px #0006,0 0 0 1px #0003;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.6);cursor:grab;touch-action:none;will-change:transform}.dancer.dragging{z-index:100;box-shadow:0 8px 25px #00000080;border-color:#fff;cursor:grabbing}.dancer.selected{box-shadow:0 0 0 3px #e91e63f2,0 8px 22px #e91e6359}.stage-guide{position:absolute;pointer-events:none;z-index:85;opacity:0;transition:opacity .08s ease}.stage-guide.show{opacity:1}.stage-guide.vertical{top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(233,30,99,.95) 50%,transparent 100%)}.stage-guide.horizontal{left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(233,30,99,.95) 50%,transparent 100%)}#stage-center-marker{position:absolute;width:16px;height:16px;margin-left:-8px;margin-top:-8px;border:2px solid rgba(76,175,80,.95);border-radius:50%;background:#4caf5033;box-shadow:0 0 0 1px #0006;pointer-events:none;z-index:5}#stage-center-marker:before,#stage-center-marker:after{content:"";position:absolute;background:#4caf50f2}#stage-center-marker:before{left:50%;top:-7px;width:1px;height:28px;transform:translate(-50%)}#stage-center-marker:after{top:50%;left:-7px;width:28px;height:1px;transform:translateY(-50%)}#control-panel{background:#1e1e1efa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid #333;display:flex;flex-direction:column;z-index:30}#timeline-container{padding:12px 20px 0;display:flex;align-items:center;gap:12px;width:100%;max-width:960px;margin:0 auto}#time-current{font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:13px;color:#888;width:45px;font-variant-numeric:tabular-nums}.timeline-progress-wrap{flex:1;position:relative;padding-top:18px}.timeline-marker-layer{position:absolute;left:0;right:0;top:0;height:18px;pointer-events:none}.timeline-marker-layer.seeking,.timeline-marker-layer.seeking .timeline-marker{pointer-events:none}.timeline-marker{position:absolute;top:0;transform:translate(-50%);border:none;background:transparent;color:#9f9f9f;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.timeline-marker.active{color:#f06292}.timeline-marker.clustered .timeline-marker-label{background:#e91e632e;border-color:#e91e6373}.timeline-marker-label{font-family:SF Mono,Monaco,monospace;font-size:10px;line-height:1;padding:2px 4px;border-radius:6px;background:#ffffff14;border:1px solid rgba(255,255,255,.15)}.timeline-marker-dot{width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:currentColor}.timeline-cluster-popover{position:absolute;bottom:calc(100% + 8px);transform:translate(-50%);width:min(320px,78vw);background:#181818fa;border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:0 16px 34px #00000080;z-index:9;overflow:hidden}.timeline-cluster-title{font-size:11px;color:#bcbcbc;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.08)}.timeline-cluster-list{max-height:160px;overflow:auto}.timeline-cluster-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.06)}.timeline-cluster-row:last-child{border-bottom:none}.timeline-cluster-row.active .timeline-cluster-item{background:#e91e632e}.timeline-cluster-item{flex:1;border:none;background:transparent;color:#ececec;display:flex;align-items:center;gap:8px;text-align:left;padding:9px 10px;cursor:pointer}.timeline-cluster-time{font-family:SF Mono,Monaco,monospace;color:#f48fb1;font-size:11px;min-width:42px}.timeline-cluster-name{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-cluster-delete{border:none;background:transparent;color:#ff8a9a;font-size:11px;padding:0 10px;cursor:pointer}#progress-bar{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#444;border-radius:2px;outline:none;cursor:pointer;touch-action:none}#progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#e91e63;border-radius:50%;border:2px solid #fff}#speed-btn{border:1px solid #555;background:#ffffff0f;color:#ddd;padding:4px 9px;border-radius:999px;font-size:12px;font-family:SF Mono,Monaco,monospace;cursor:pointer;min-width:64px;text-align:center}#toolbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:8px;padding:10px 16px 12px;height:76px;max-width:920px;margin:0 auto;width:100%}.tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;color:#bbb;gap:5px;width:100%;cursor:pointer;transition:all .2s;padding:6px 4px;border-radius:12px;min-width:0}.tool-btn:hover{color:#fff;background:#ffffff1a}.tool-btn span{font-size:11px;font-weight:500}.tool-icon{font-size:22px}#play-btn{width:60px;height:60px;background:linear-gradient(135deg,#e91e63,#c2185b);border-radius:50%;color:#fff;font-size:24px;border:none;box-shadow:0 4px 15px #e91e6366;transform:translateY(-5px);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;justify-self:center;align-self:center}#play-btn.playing{background:linear-gradient(135deg,#4caf50,#388e3c);box-shadow:0 4px 15px #4caf5066}#formation-drawer{position:absolute;left:0;right:0;bottom:0;height:60vh;max-height:600px;background:#1e1e1efa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px 20px 0 0;z-index:50;display:flex;flex-direction:column;box-shadow:0 -5px 30px #0009}.drawer-header{padding:18px 20px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700}.close-btn{background:none;border:none;color:#888;font-size:24px;cursor:pointer}#drawer-list{flex:1;overflow-y:auto;padding:12px}.empty-formation{text-align:center;color:#666;padding:40px 20px}.empty-formation-icon{font-size:40px;margin-bottom:10px;opacity:.3}.empty-formation-tip{font-size:12px;margin-top:8px;opacity:.6}.list-item{background:#2a2a2a;margin-bottom:8px;padding:4px 4px 4px 16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;border-left:4px solid transparent}.list-item.active{background:#3a3a3a;border-left-color:#e91e63}.list-content{flex:1;display:flex;align-items:center;overflow:hidden;cursor:pointer}.list-time{font-family:SF Mono,Monaco,monospace;color:#e91e63;font-weight:700;margin-right:12px;font-size:14px;min-width:45px}.list-name{flex:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}.list-del-btn{background:transparent;border:none;color:#ff4757;font-size:18px;padding:10px 12px;cursor:pointer}.list-edit-btn{background:transparent;border:none;color:#f6c453;font-size:18px;padding:10px 12px;cursor:pointer}.formation-edit-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:center;justify-content:center;z-index:125;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.formation-edit-box{width:min(780px,94vw);max-height:92vh;background:#252525;border:1px solid #464646;border-radius:20px;padding:16px;box-shadow:0 24px 68px #0000008c}.formation-edit-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}.formation-edit-title{font-size:16px;font-weight:700;color:#fff}.formation-edit-subtitle{font-family:SF Mono,Monaco,monospace;color:#e91e63;font-weight:700;font-size:13px}.formation-edit-tip{color:#a9a9a9;font-size:12px;margin-bottom:10px}.formation-edit-stage{position:relative;width:100%;border-radius:14px;overflow:hidden;background:#191919;border:1px solid #3b3b3b;--edit-grid-size: 36px;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:var(--edit-grid-size) var(--edit-grid-size);touch-action:none}.formation-edit-center{position:absolute;width:14px;height:14px;margin-left:-7px;margin-top:-7px;border:2px solid rgba(76,175,80,.95);border-radius:50%;background:#4caf5033;pointer-events:none}.formation-edit-node{position:absolute;width:44px;height:44px;margin-left:-22px;margin-top:-22px;border-radius:50%;border:2px solid rgba(255,255,255,.9);color:#fff;font-weight:700;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.6);box-shadow:0 4px 12px #00000073;cursor:grab;touch-action:none}.formation-edit-node:active{cursor:grabbing}.formation-edit-actions{display:flex;gap:12px;margin-top:14px}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:110}.menu-sheet{width:min(560px,100%);background:#1b1b1bfa;border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid #3a3a3a;border-bottom:none;padding:10px 12px 14px;box-shadow:0 -12px 40px #00000073}.menu-title{padding:10px 12px;font-size:14px;color:#9f9f9f;text-align:center}.menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.menu-action{border:1px solid #3f3f3f;background:#242424;color:#f0f0f0;border-radius:12px;font-size:14px;padding:12px 10px;cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:120;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-box{background:#2d2d2d;width:90%;max-width:360px;padding:24px;border-radius:20px;text-align:center;box-shadow:0 20px 60px #0009;border:1px solid #444}.modal-title{margin:0 0 20px;font-size:18px;font-weight:600}.modal-message{margin:0 0 20px;color:#cfcfcf;line-height:1.5;font-size:13px;text-align:left;white-space:pre-line;max-height:180px;overflow:auto}.modal-input{width:100%;padding:14px;background:#1a1a1a;border:1px solid #444;color:#fff;border-radius:12px;font-size:16px;margin-bottom:20px;outline:none}.modal-actions{display:flex;gap:12px}.modal-btn{flex:1;padding:12px;border:none;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer}.btn-cancel{background:#444;color:#ccc}.btn-confirm{background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff}.video-export-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:center;justify-content:center;z-index:122;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.video-export-box{background:#2d2d2d;width:min(420px,92vw);padding:22px 20px 18px;border-radius:18px;border:1px solid #444;box-shadow:0 20px 60px #0000008c}.video-export-title{margin:0;font-size:18px;font-weight:700;text-align:center}.video-export-message{margin:12px 0 0;color:#cfcfcf;font-size:13px;line-height:1.5;min-height:20px;text-align:center}.video-export-progress-track{margin-top:12px;width:100%;height:8px;border-radius:999px;background:#ffffff1f;overflow:hidden}.video-export-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(135deg,#e91e63,#c2185b);transition:width .12s linear}.video-export-percent{margin-top:8px;font-size:12px;color:#f2a6bf;font-family:SF Mono,Monaco,monospace;text-align:center}.video-export-file{margin-top:12px;font-family:SF Mono,Monaco,monospace;font-size:12px;color:#f0f0f0;text-align:center;word-break:break-all;opacity:.9}.video-export-actions{margin-top:14px;display:flex;gap:10px}.video-export-btn{flex:1;border:none;border-radius:12px;padding:11px 10px;font-size:14px;font-weight:600;cursor:pointer}.video-export-btn-cancel{background:#444;color:#d8d8d8}.video-export-btn-open{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff}.video-export-btn-close{background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff}.auth-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:123;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-modal-panel{width:min(420px,92vw);border-radius:18px;border:1px solid rgba(255,255,255,.18);background:#1a1a1afa;box-shadow:0 24px 62px #00000094;padding:16px}.auth-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.auth-modal-title{font-size:18px;font-weight:700;color:#f0f0f0}.auth-modal-close{border:none;background:transparent;color:#a8a8a8;font-size:22px;cursor:pointer;line-height:1}.auth-modal-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}.auth-modal-tab{border:1px solid #474747;border-radius:10px;background:#212121;color:#bdbdbd;font-size:14px;padding:10px 0;cursor:pointer}.auth-modal-tab.active{border-color:#ff2f7dcc;background:#ff2f7d29;color:#fff}.auth-modal-form{display:grid;gap:12px}.auth-modal-label{display:grid;gap:7px;color:#b5b5b5;font-size:13px}.auth-modal-input{width:100%;border:none;border-bottom:2px solid #464646;background:#1a1a1a;color:#fff;border-radius:10px 10px 0 0;padding:13px 12px 11px;font-size:16px;outline:none}.auth-modal-input:focus{border-bottom-color:#ff2f7d}.auth-modal-error{border:1px solid rgba(255,107,107,.45);border-radius:10px;background:#ff6b6b1f;color:#ffc8c8;font-size:13px;padding:10px 12px}.auth-modal-hint{border:1px solid rgba(255,194,97,.4);border-radius:10px;background:#ffc2611f;color:#ffe2a6;font-size:13px;padding:10px 12px}.auth-modal-submit{border:none;border-radius:12px;background:linear-gradient(135deg,#ff2f7d,#c2185b);color:#fff;font-size:15px;font-weight:700;padding:12px 16px;cursor:pointer;margin-top:2px}.auth-modal-submit:disabled{opacity:.72;cursor:not-allowed}.toast{position:fixed;top:70px;left:50%;transform:translate(-50%) translateY(-20px);background:#323232f2;color:#fff;padding:12px 24px;border-radius:24px;font-size:14px;opacity:0;pointer-events:none;transition:all .3s;z-index:200;border:1px solid rgba(255,255,255,.1)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(min-width:1024px){#stage-container{--grid-size: 60px}.dancer{width:64px;height:64px;font-size:18px}#toolbar{max-width:980px;height:80px;padding:10px 20px 12px;gap:12px}#timeline-container{max-width:1120px;padding-left:36px;padding-right:36px}.timeline-progress-wrap{padding-top:20px}.timeline-marker-label{font-size:11px}.timeline-cluster-popover{width:min(360px,42vw)}#play-btn{width:64px;height:64px;font-size:28px}}.color-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:115}.color-sheet{width:min(520px,100%);background:#1b1b1bfa;border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid #3a3a3a;border-bottom:none;padding:10px 12px 14px;box-shadow:0 -12px 40px #00000073}.color-header{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 12px;color:#e0e0e0;font-size:14px}.color-close-btn{background:transparent;border:none;color:#999;font-size:22px;cursor:pointer;line-height:1}.color-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.color-swatch{width:100%;aspect-ratio:1;border-radius:12px;border:2px solid rgba(255,255,255,.38);cursor:pointer}@media(max-width:820px){.app-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px}.header-brand{max-width:30vw;font-size:14px}.header-project{position:static;left:auto;transform:none;justify-self:start;text-align:left;max-width:100%;min-width:0;font-size:14px}.header-btn{padding:5px 10px;font-size:12px}.header-actions{gap:6px}.header-auth-btn{padding:5px 10px;font-size:12px}.header-avatar-btn{width:30px;height:30px;font-size:12px}#toolbar{padding:10px 8px 12px;gap:4px;height:74px}#timeline-container{gap:8px}.timeline-progress-wrap{padding-top:17px}.timeline-marker-label{font-size:9px;padding:2px 3px}.timeline-cluster-popover{width:min(300px,88vw)}.timeline-cluster-title{font-size:10px;padding:6px 8px}.timeline-cluster-item{padding:8px;gap:6px}.timeline-cluster-time{font-size:10px;min-width:38px}.timeline-cluster-name{font-size:11px}.timeline-cluster-delete{font-size:10px;padding:0 8px}.tool-btn{padding:6px 2px}.tool-btn span{font-size:10px}.tool-icon{font-size:18px}#play-btn{width:54px;height:54px;font-size:22px;transform:translateY(-2px)}.formation-edit-box{width:min(760px,95vw);padding:14px}.formation-edit-node{width:40px;height:40px;margin-left:-20px;margin-top:-20px;font-size:12px}.video-export-box{width:min(400px,94vw);padding:18px 16px 14px}.video-export-actions{gap:8px}}