button{background-color:#007bff;color:white;padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-size:1rem;margin-top:10px}
button:hover{background-color:#0056b3}.modal{display:none;position:fixed;z-index:1050;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 0.3s ease-in-out}.modal.modal-backdrop-enabled{background-color:rgba(0,0,0,0.5);backdrop-filter:blur(2px)}.modal.show{display:flex;opacity:1}.modal-dialog{position:relative;max-width:500px;width:90%;transform:translateY(-20px);transition:transform 0.3s ease-in-out}.modal.show.modal-dialog{transform:translateY(0)}.modal-dialog{position:relative;max-width:500px;width:90%}.modal.modal-align-top-left.modal-dialog{margin:50px auto auto 50px}.modal.modal-align-left-top.modal-dialog{margin:50px auto auto 50px}.modal.modal-align-top-center.modal-dialog{margin:50px auto auto auto}.modal.modal-align-center-top.modal-dialog{margin:50px auto auto auto}.modal.modal-align-top-right.modal-dialog{margin:50px 50px auto auto}.modal.modal-align-right-top.modal-dialog{margin:50px 50px auto auto}.modal.modal-align-center-left.modal-dialog{margin:auto auto auto 50px}.modal.modal-align-left-center.modal-dialog{margin:auto auto auto 50px}.modal.modal-align-center-center.modal-dialog{margin:auto}.modal.modal-align-center-right.modal-dialog{margin:auto 50px auto auto}.modal.modal-align-right-center.modal-dialog{margin:auto 50px auto auto}.modal.modal-align-bottom-left.modal-dialog{margin:auto auto 50px 50px}.modal.modal-align-left-bottom.modal-dialog{margin:auto auto 50px 50px}.modal.modal-align-bottom-center.modal-dialog{margin:auto auto 50px auto}.modal.modal-align-center-bottom.modal-dialog{margin:auto auto 50px auto}.modal.modal-align-bottom-right.modal-dialog{margin:auto 50px 50px auto}.modal.modal-align-right-bottom.modal-dialog{margin:auto 50px 50px auto}.modal-dialog.modal-small{max-width:300px}.modal-dialog.modal-large{max-width:800px}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.3);overflow:hidden}.modal-header{padding:15px 20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;background-color:#f8f9fa}.modal-title{margin:0;font-size:1.25rem;color:#333}.modal-close{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color 0.2s}.modal-close:hover{background-color:#e9ecef;color:#000}.modal-body{padding:20px;max-height:60vh;overflow-y:auto}.modal-footer{padding:15px 20px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:10px;background-color:#f8f9fa}.splitter-container{display:flex;width:100%;height:100%;min-height:300px;border:1px solid #ddd;border-radius:8px;overflow:hidden}.splitter-container.vertical{flex-direction:column}.splitter-pane{background-color:#f8f9fa;padding:15px;overflow:auto;border:1px solid #eee}.splitter-pane-1{background-color:#e3f2fd}.splitter-pane-2{background-color:#f3e5f5}.splitter-handle{background-color:#ccc;cursor:col-resize;width:5px;transition:background-color 0.2s;position:relative}.splitter-handle:hover{background-color:#007bff}.splitter-handle.vertical{cursor:row-resize;width:100%;height:5px}.splitter-handle::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:#999;border-radius:50%;opacity:0;transition:opacity 0.2s}.splitter-handle:hover::before{opacity:0.7}.draggable{cursor:move;user-select:none;transition:box-shadow 0.2s}.draggable:hover{box-shadow:0 4px 12px rgba(0,0,0,0.2)}.dragging{z-index:1000;box-shadow:0 8px 25px rgba(0,0,0,0.3);transform:rotate(2deg)}.collapsible-container{border:1px solid #ddd;border-radius:8px;margin-bottom:1rem;overflow:hidden}.collapsible-header{background-color:#e9ecef;padding:15px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:bold;color:#333;border-bottom:1px solid #ddd}.collapsible-header:hover{background-color:#dee2e6}.collapsible-header::after{content:'▼';font-size:0.8em;transition:transform 0.3s ease-in-out}.collapsible-container.is-expanded.collapsible-header::after{transform:rotate(180deg)}.collapsible-content{padding:0 20px;background-color:#fff}
@media(max-width:768px){.modal-dialog{margin:20px;width:calc(100%-40px)}.modal-body{max-height:50vh}.splitter-container{flex-direction:column;min-height:200px}.splitter-handle{cursor:row-resize;width:100%;height:5px}}