.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px}.login-card h1{text-align:center;margin-bottom:2rem;color:#333}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#667eea}.error-message{color:#e53e3e;background:#fff5f5;padding:.75rem;border-radius:4px;margin-bottom:1rem;font-size:.875rem}button[type=submit]{width:100%;padding:.75rem;background:#667eea;color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}button[type=submit]:hover:not(:disabled){background:#5568d3}button[type=submit]:disabled{background:#a0aec0;cursor:not-allowed}.confirm-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.confirm-dialog-content{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;min-width:400px;max-width:500px;animation:slideUp .3s ease-out}.confirm-dialog-header{padding:1.5rem;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;border-top-left-radius:12px;border-top-right-radius:12px}.confirm-dialog-header.info{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.confirm-dialog-header.warning{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.confirm-dialog-header.danger{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.confirm-dialog-header h3{margin:0;font-size:1.25rem;font-weight:600}.confirm-dialog-header .close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:inherit;opacity:.8;transition:opacity .2s;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.confirm-dialog-header .close-button:hover{opacity:1}.confirm-dialog-body{padding:2rem 1.5rem}.confirm-dialog-body p{margin:0;font-size:1rem;color:#334155;line-height:1.6}.confirm-dialog-footer{padding:1rem 1.5rem;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end}.confirm-dialog-footer button{padding:.75rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.btn-cancel{background:#f1f5f9;color:#64748b}.btn-cancel:hover{background:#e2e8f0;color:#475569}.btn-confirm{color:#fff}.btn-confirm.warning{background:linear-gradient(135deg,#f093fb,#f5576c)}.btn-confirm.danger{background:linear-gradient(135deg,#fa709a,#fee140)}.alert-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.alert-dialog-content{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;min-width:400px;max-width:500px;padding:2rem;text-align:center;animation:slideUp .3s ease-out}.alert-dialog-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;margin:0 auto 1.5rem;color:#fff}.alert-dialog-icon.success{background:linear-gradient(135deg,#48bb78,#38a169)}.alert-dialog-icon.error{background:linear-gradient(135deg,#f56565,#e53e3e)}.alert-dialog-icon.warning{background:linear-gradient(135deg,#ed8936,#dd6b20)}.alert-dialog-icon.info{background:linear-gradient(135deg,#667eea,#764ba2)}.alert-dialog-title{margin:0 0 1rem;font-size:1.5rem;font-weight:600;color:#1e293b}.alert-dialog-message{margin-bottom:1.5rem}.alert-dialog-message p{margin:0;font-size:1rem;color:#64748b;line-height:1.6}.alert-dialog-footer{display:flex;justify-content:center}.alert-dialog-footer .btn-confirm{padding:.75rem 2rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;color:#fff;min-width:120px}.btn-confirm.success{background:linear-gradient(135deg,#48bb78,#38a169)}.btn-confirm.error{background:linear-gradient(135deg,#f56565,#e53e3e)}.btn-confirm.warning{background:linear-gradient(135deg,#ed8936,#dd6b20)}.btn-confirm.info{background:linear-gradient(135deg,#667eea,#764ba2)}.btn-confirm:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.btn-confirm:active{transform:translateY(0)}.device-assign-modal{width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column}.device-info-box{background:#f7fafc;border-radius:6px;padding:1rem;margin-bottom:1rem}.info-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #e2e8f0}.info-row:last-child{border-bottom:none}.info-row .label{font-weight:500;color:#4a5568;font-size:.875rem}.info-row .value{color:#2d3748;font-size:.875rem}.current-user{color:#2c5282;font-weight:500;padding:.25rem .5rem;background:#bee3f8;border-radius:4px}.unassigned-text{color:#718096;font-style:italic}.user-list{max-height:300px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:6px;margin-top:1rem}.user-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-bottom:1px solid #e2e8f0;cursor:pointer;transition:background-color .2s}.user-item:last-child{border-bottom:none}.user-item:hover{background:#f7fafc}.user-item.selected{background:#ebf8ff;border-left:3px solid #4299e1}.user-item input[type=radio]{cursor:pointer}.user-info{flex:1}.user-name{font-weight:500;color:#2d3748;font-size:.875rem;margin-bottom:.25rem}.user-details{display:flex;gap:.75rem;font-size:.75rem;color:#718096}.full-name{color:#4a5568}.email{color:#718096}.no-users{padding:2rem;text-align:center;color:#718096;font-size:.875rem}.device-edit-modal{width:90%;max-width:600px}.device-info-summary{background:#f7fafc;border-radius:6px;padding:1rem;margin-bottom:1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.info-item{display:flex;flex-direction:column;gap:.25rem}.info-item .label{font-size:.75rem;color:#718096;font-weight:500}.info-item .value{font-size:.875rem;color:#2d3748}.form-group textarea{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;font-family:inherit;resize:vertical;transition:border-color .2s}.form-group textarea:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.loading-groups,.no-groups{padding:1rem;text-align:center;color:#718096;font-size:.875rem;background:#f7fafc;border-radius:6px}.groups-list{display:flex;flex-direction:column;gap:.75rem;max-height:200px;overflow-y:auto;padding:.5rem;border:1px solid #e2e8f0;border-radius:6px;background:#f7fafc}.group-checkbox{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;background:#fff;border-radius:6px;cursor:pointer;transition:all .2s;border:1px solid #e2e8f0}.group-checkbox:hover{border-color:#cbd5e0;box-shadow:0 1px 3px #0000001a}.group-checkbox input[type=checkbox]{margin-top:.125rem;cursor:pointer;width:16px;height:16px;flex-shrink:0}.group-name{font-weight:500;color:#2d3748;font-size:.875rem;flex:1}.group-description{font-size:.75rem;color:#718096;margin-left:auto;max-width:200px;text-align:right}.device-filter-bar{background:#fff;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #00000014}.filter-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.search-box{position:relative;flex:1;min-width:300px}.search-input{width:100%;padding:.75rem 2.5rem .75rem 1rem;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;transition:all .2s}.search-input:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.search-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-size:1.125rem;pointer-events:none}.filter-buttons{display:flex;gap:1.5rem;flex-wrap:wrap}.filter-group{display:flex;align-items:center;gap:.5rem}.filter-group label{font-size:.75rem;color:#718096;font-weight:500;white-space:nowrap}.filter-btn{padding:.5rem 1rem;border:1px solid #e2e8f0;background:#fff;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s;white-space:nowrap}.filter-btn:hover{border-color:#cbd5e0;background:#f7fafc}.filter-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.group-select{padding:.5rem .75rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem;cursor:pointer;background:#fff;transition:all .2s}.group-select:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.btn-clear-filters{padding:.5rem 1rem;background:#fff5f5;color:#c53030;border:1px solid #feb2b2;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-clear-filters:hover{background:#fed7d7}.filter-summary{font-size:.875rem;color:#718096;display:flex;align-items:center;gap:.5rem;white-space:nowrap;margin-left:auto}.filter-active-indicator{color:#4299e1;font-weight:500}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.search-box{min-width:100%}.filter-buttons{flex-direction:column;gap:1rem}.filter-group{flex-wrap:wrap}}.device-list-container{padding:2rem;width:100%;max-width:100%;margin:0;box-sizing:border-box}.device-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.device-list-header h2{margin:0;color:#333}.header-actions{display:flex;gap:.75rem;align-items:center}.group-management-button{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #667eea4d}.group-management-button:hover{background:linear-gradient(135deg,#5a67d8,#6b46c1);box-shadow:0 4px 8px #667eea66;transform:translateY(-1px)}.group-management-button:active{transform:translateY(0);box-shadow:0 2px 4px #667eea4d}.refresh-button{padding:.5rem 1rem;background:#4299e1;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #4299e14d}.refresh-button:hover{background:#3182ce;box-shadow:0 4px 8px #4299e166;transform:translateY(-1px)}.refresh-button:active{transform:translateY(0);box-shadow:0 2px 4px #4299e14d}.device-table-wrapper{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow-x:auto}.device-table{width:100%;border-collapse:collapse;font-size:.875rem}.device-table thead{background:#f7fafc;border-bottom:2px solid #e2e8f0}.device-table th{padding:1rem .75rem;text-align:left;font-weight:600;color:#4a5568;white-space:nowrap}.device-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.device-table th.sortable:hover{background-color:#edf2f7}.device-table tbody tr{border-bottom:1px solid #e2e8f0;transition:all .3s ease}.device-table tbody tr:hover{background:#f7fafc}.device-table tbody tr.online{background:#f0fff4}.device-table tbody tr.offline{opacity:.6}.device-table td{padding:1rem .75rem;color:#2d3748;transition:all .3s ease}.device-name-cell{display:flex;align-items:center;gap:.5rem;font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all .3s ease}.status-dot.online{background:#48bb78;box-shadow:0 0 6px #48bb7880;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.status-badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.status-badge.assigned{background:#bee3f8;color:#2c5282}.status-badge.unassigned{background:#e2e8f0;color:#4a5568}.control-button{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#4299e1);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #4299e14d;min-width:70px}.control-button:hover:not(:disabled){background:linear-gradient(135deg,#5a67d8,#3182ce);box-shadow:0 4px 8px #4299e166;transform:translateY(-1px)}.control-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #4299e14d}.control-button:disabled{background:linear-gradient(135deg,#e2e8f0,#cbd5e0);cursor:not-allowed;box-shadow:none;opacity:.6}.delete-button{padding:.5rem 1rem;background:linear-gradient(135deg,#fc8181,#f56565);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #f565654d;min-width:70px}.delete-button:hover:not(:disabled){background:linear-gradient(135deg,#f56565,#e53e3e);box-shadow:0 4px 8px #f5656566;transform:translateY(-1px)}.delete-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #f565654d}.delete-button:disabled{background:linear-gradient(135deg,#e2e8f0,#cbd5e0);cursor:not-allowed;box-shadow:none;opacity:.6}.action-buttons{display:flex;gap:.75rem;flex-wrap:nowrap;align-items:center}.loading,.error,.empty-state{text-align:center;padding:3rem 2rem;font-size:1rem;color:#718096}.assignment-info{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.assigned-user{font-size:.75rem;color:#2c5282;font-weight:500;padding:.125rem .375rem;background:#e6fffa;border-radius:3px}.assign-button{padding:.5rem 1rem;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #48bb784d;min-width:70px}.assign-button:hover{background:linear-gradient(135deg,#38a169,#2f855a);box-shadow:0 4px 8px #48bb7866;transform:translateY(-1px)}.assign-button:active{transform:translateY(0);box-shadow:0 2px 4px #48bb784d}.edit-button{padding:.5rem 1rem;background:linear-gradient(135deg,#ed8936,#dd6b20);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #ed89364d;min-width:70px}.edit-button:hover{background:linear-gradient(135deg,#dd6b20,#c05621);box-shadow:0 4px 8px #ed893666;transform:translateY(-1px)}.edit-button:active{transform:translateY(0);box-shadow:0 2px 4px #ed89364d}.device-groups{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}.group-tag{display:inline-block;padding:.125rem .5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;font-size:.75rem;font-weight:500;white-space:nowrap}.device-control-container{height:100vh;display:flex;flex-direction:column;background:#f7fafc;overflow:hidden}.control-header{display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;box-shadow:0 1px 3px #0000001a}.back-button{padding:.5rem 1rem;background:#4299e1;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.back-button:hover{background:#3182ce}.control-header h2{margin:0;flex:1;color:#2d3748;font-size:1.25rem;font-weight:600}.connection-status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#4a5568}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.connected{background:#48bb78;box-shadow:0 0 6px #48bb7880}.status-dot.disconnected{background:#cbd5e0}.fps-counter{margin-left:.5rem;padding:.25rem .5rem;background:#edf2f7;border-radius:4px;font-size:.75rem;font-weight:600;color:#48bb78}.control-content{flex:1;display:grid;grid-template-columns:1fr 200px auto auto;gap:1rem;padding:1.5rem 2rem;overflow:hidden;min-height:0;align-items:start}.log-panel{background:#fff;border-radius:8px;padding:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.log-panel.collapsed{width:50px;min-width:50px}.log-panel-header{padding:1rem;background:#f7fafc;border-bottom:2px solid #e2e8f0;flex-shrink:0}.log-panel.collapsed .log-panel-header{padding:.75rem .5rem}.log-panel.collapsed .log-panel-header h3{display:none}.collapse-button{background:#4299e1;color:#fff;border:none;border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;transition:all .2s;flex-shrink:0}.collapse-button:hover{background:#3182ce;transform:scale(1.1)}.log-panel.collapsed .collapse-button{margin:0 auto}.log-panel-header h3{margin:0;color:#2d3748;font-size:.875rem;font-weight:600}.log-list{flex:1;overflow-y:auto;padding:.75rem;max-height:calc(100vh - 250px)}.log-item{padding:.75rem;margin-bottom:.5rem;background:#f7fafc;border-radius:4px;font-size:.75rem;border-left:3px solid transparent;transition:all .2s}.log-item:hover{background:#edf2f7;border-left-color:#4299e1}.log-item-time{color:#718096;font-size:.7rem;margin-bottom:.25rem}.log-item-type{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.65rem;font-weight:600;margin-right:.5rem;text-transform:uppercase}.log-item-type.info{background:#bee3f8;color:#2c5282}.log-item-type.success{background:#c6f6d5;color:#22543d}.log-item-type.warning{background:#feebc8;color:#7c2d12}.log-item-type.error{background:#fed7d7;color:#742a2a}.log-item-message{color:#2d3748;line-height:1.4}.button-panel{background:#fff;border-radius:8px;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;box-shadow:0 2px 4px #0000001a;max-height:calc(100vh - 120px)}.screen-area{display:flex;flex-direction:column;gap:.75rem}.screen-controls{display:flex;gap:.5rem;padding:.75rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.screen-control-button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s;text-transform:none;min-width:60px}.screen-control-button.start{background:#4299e1;color:#fff}.screen-control-button.stop{background:#cbd5e0;color:#4a5568}.screen-control-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.screen-control-button.start:hover:not(:disabled){background:#3182ce}.screen-control-button.stop:hover:not(:disabled){background:#a0aec0}.screen-control-button:disabled{opacity:.5;cursor:not-allowed}.screen-container{display:flex;justify-content:center;align-items:center;background:#f7fafc;border-radius:8px;position:relative;overflow:hidden;border:1px solid #e2e8f0;box-shadow:0 2px 4px #0000001a}.ui-hierarchy-panel{display:flex;flex-direction:column;gap:.75rem}.ui-hierarchy-header{padding:.75rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;gap:.5rem}.ui-hierarchy-button{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s;text-transform:none;min-width:60px}.ui-hierarchy-button.start{background:#4299e1;color:#fff}.ui-hierarchy-button.refresh{background:#48bb78;color:#fff;min-width:40px;font-size:1rem;padding:.5rem .75rem}.ui-hierarchy-button.stop{background:#cbd5e0;color:#4a5568}.ui-hierarchy-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.ui-hierarchy-button.start:hover:not(:disabled){background:#3182ce}.ui-hierarchy-button.refresh:hover:not(:disabled){background:#38a169}.ui-hierarchy-button.stop:hover:not(:disabled){background:#a0aec0}.ui-hierarchy-button:disabled{opacity:.5;cursor:not-allowed}.ui-hierarchy-content{overflow:hidden;padding:0;position:relative;background:#f7fafc;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 2px 4px #0000001a}.ui-hierarchy-canvas{background:#f7fafc;display:block;transition:opacity .2s}.ui-hierarchy-canvas:hover{opacity:.95}.ui-hierarchy-canvas:active{opacity:.9}.ui-layout-grid{position:relative;width:100%;height:100%}.ui-layout-box{position:absolute;border:2px solid;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.8);cursor:pointer;transition:all .2s}.ui-layout-box:hover{filter:brightness(1.3);z-index:10}.ui-layout-box.selected{border-width:3px;filter:brightness(1.5);z-index:20}.ui-tree{font-size:.75rem;color:#ccc}.ui-tree-node{padding:.3rem .5rem;margin:.2rem 0;background:#0f3460;border-radius:3px;border-left:2px solid transparent;cursor:pointer;transition:all .2s}.ui-tree-node:hover{background:#1e5a8e;border-left-color:#0f8}.ui-tree-node.selected{background:#1e5a8e;border-left-color:#0f8;color:#0f8}.ui-tree-node-label{display:flex;align-items:center;gap:.5rem}.ui-tree-node-icon{color:#666;font-size:.7rem}.ui-tree-node-text{flex:1}.ui-tree-node-bounds{color:#666;font-size:.65rem}.ui-tree-children{margin-left:1rem;border-left:1px solid #0f3460;padding-left:.5rem}.device-screen{cursor:crosshair;display:block;background:#f7fafc;-webkit-user-select:none;user-select:none;touch-action:none;transition:opacity .1s ease}.device-screen:active{opacity:.9}.device-screen:hover{cursor:pointer}.screen-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay-message{color:#fff;font-size:1.1rem;font-weight:500;text-align:center;padding:1rem}.control-panel{background:#16213e;border-radius:6px;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.panel-section{margin-bottom:.5rem}.panel-section h3{margin:0 0 .75rem;color:#fff;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #0f3460;padding-bottom:.5rem}.info-grid{display:flex;flex-direction:column;gap:.5rem}.info-item{display:flex;justify-content:space-between;font-size:.8rem;padding:.4rem .6rem;background:#0f3460;border-radius:4px}.info-label{color:#a0a0a0;font-weight:500}.info-item span:last-child{color:#fff;font-weight:600}.loading{display:flex;justify-content:center;align-items:center;height:100%;font-size:1rem;color:#718096}.log-list::-webkit-scrollbar,.button-panel::-webkit-scrollbar,.ui-hierarchy-content::-webkit-scrollbar,.control-panel::-webkit-scrollbar{width:6px}.log-list::-webkit-scrollbar-track,.button-panel::-webkit-scrollbar-track,.ui-hierarchy-content::-webkit-scrollbar-track,.control-panel::-webkit-scrollbar-track{background:#edf2f7;border-radius:3px}.log-list::-webkit-scrollbar-thumb,.button-panel::-webkit-scrollbar-thumb,.ui-hierarchy-content::-webkit-scrollbar-thumb,.control-panel::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}.log-list::-webkit-scrollbar-thumb:hover,.button-panel::-webkit-scrollbar-thumb:hover,.ui-hierarchy-content::-webkit-scrollbar-thumb:hover,.control-panel::-webkit-scrollbar-thumb:hover{background:#a0aec0}@media (max-width: 1600px){.control-content{grid-template-columns:1fr 180px auto auto}}@media (max-width: 1400px){.control-content{grid-template-columns:1fr 160px auto auto}}@media (max-width: 1200px){.control-content{grid-template-columns:1fr auto auto}.button-panel{display:none}}@media (max-width: 900px){.control-content{grid-template-columns:1fr}.log-panel,.button-panel,.ui-hierarchy-panel{display:none}.screen-area,.screen-container{max-width:100%}}.control-button{width:100%;padding:.5rem;border:none;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.control-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #00000026}.control-button:active:not(:disabled){transform:translateY(0)}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button.primary{background:#805ad5;color:#fff}.control-button.primary:hover:not(:disabled){background:#6b46c1}.control-button.success{background:#48bb78;color:#fff}.control-button.success:hover:not(:disabled){background:#38a169}.control-button.danger{background:#f56565;color:#fff}.control-button.danger:hover:not(:disabled){background:#e53e3e}.control-button.warning{background:#ed8936;color:#fff}.control-button.warning:hover:not(:disabled){background:#dd6b20}.control-button.info{background:#4299e1;color:#fff}.control-button.info:hover:not(:disabled){background:#3182ce}.system-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.system-button{padding:.8rem .5rem;background:#0f3460;color:#fff;border:1px solid #1e5a8e;border-radius:4px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}.system-button:hover:not(:disabled){background:#1e5a8e;border-color:#2d7ab8;transform:translateY(-1px)}.system-button:disabled{opacity:.3;cursor:not-allowed}.mask-controls{display:flex;flex-direction:column;gap:.5rem}.mask-status{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;padding:.4rem .6rem;background:#0f3460;border-radius:4px}.mask-badge{padding:.2rem .6rem;border-radius:10px;font-size:.7rem;font-weight:700;text-transform:uppercase}.mask-badge.enabled{background:#0f8;color:#0f0f1e}.mask-badge.disabled{background:#666;color:#ccc}.mask-toggle-button{width:100%;padding:.6rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase}.mask-toggle-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #667eea66}.mask-toggle-button.active{background:linear-gradient(135deg,#e94560,#c72c41)}.mask-toggle-button:disabled{opacity:.4;cursor:not-allowed}.mask-text-display{display:flex;justify-content:space-between;align-items:center;padding:.6rem;background:#0f3460;border-radius:4px;font-size:.8rem}.mask-text-display span:last-child{color:#0f8;font-weight:600}.mask-text-input-group{display:flex;gap:.4rem}.mask-text-input{flex:1;padding:.5rem;background:#0f3460;border:1px solid #1e5a8e;border-radius:4px;font-size:.8rem;color:#fff}.mask-text-input::placeholder{color:#666}.mask-text-input:focus{outline:none;border-color:#0f8;box-shadow:0 0 0 2px #0f83}.mask-text-input:disabled{opacity:.4;cursor:not-allowed}.update-mask-button{padding:.5rem 1rem;background:linear-gradient(135deg,#0f8,#00cc6a);color:#0f0f1e;border:none;border-radius:4px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.update-mask-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #0f86}.update-mask-button:disabled{opacity:.4;cursor:not-allowed}.screen-capture-controls{display:flex;flex-direction:column;gap:.5rem}.screen-capture-status{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;padding:.4rem .6rem;background:#0f3460;border-radius:4px}.capture-badge{padding:.2rem .6rem;border-radius:10px;font-size:.7rem;font-weight:700;text-transform:uppercase}.capture-badge.enabled{background:#3b82f6;color:#fff}.capture-badge.disabled{background:#666;color:#ccc}.screen-capture-button{width:100%;padding:.6rem;color:#fff;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase}.screen-capture-button.start{background:linear-gradient(135deg,#0f8,#00cc6a);color:#0f0f1e}.screen-capture-button.start:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #0f86}.screen-capture-button.stop{background:linear-gradient(135deg,#e94560,#c72c41)}.screen-capture-button.stop:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #e9456066}.screen-capture-button:disabled{opacity:.4;cursor:not-allowed}.screen-capture-hint{padding:.6rem;background:#f59e0b1a;border-left:3px solid #f59e0b;border-radius:4px;font-size:.7rem;color:#f59e0b}.screen-capture-hint p{margin:0}.left-panel::-webkit-scrollbar,.control-panel::-webkit-scrollbar{width:6px}.left-panel::-webkit-scrollbar-track,.control-panel::-webkit-scrollbar-track{background:#0f3460;border-radius:3px}.left-panel::-webkit-scrollbar-thumb,.control-panel::-webkit-scrollbar-thumb{background:#1e5a8e;border-radius:3px}.left-panel::-webkit-scrollbar-thumb:hover,.control-panel::-webkit-scrollbar-thumb:hover{background:#2d7ab8}@media (max-width: 1400px){.control-content{grid-template-columns:240px 1fr 240px}}@media (max-width: 1200px){.control-content{grid-template-columns:1fr 240px}.left-panel{display:none}}@media (max-width: 768px){.control-content{grid-template-columns:1fr}.control-panel{display:none}}.quality-indicator{color:#fff}.quality-indicator.quality-excellent{background:#48bb78}.quality-indicator.quality-good{background:#ecc94b}.quality-indicator.quality-fair{background:#ed8936}.quality-indicator.quality-poor{background:#f56565}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 6px #0000001a}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e2e8f0}.modal-header h3{margin:0;color:#333}.modal-close{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.modal-close:hover{background:#f7fafc}.modal-content form{padding:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500}.form-group input[type=text],.form-group input[type=email],.form-group input[type=password],.form-group textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.role-checkboxes{display:flex;flex-direction:column;gap:.75rem;padding:.5rem;background:#f7fafc;border-radius:4px}.role-desc{color:#666;font-size:.875rem;margin-left:.5rem}.modal-footer{display:flex;justify-content:flex-end;gap:1rem;padding:1.5rem;border-top:1px solid #e2e8f0}.btn-secondary{padding:.75rem 1.5rem;background:#e2e8f0;color:#4a5568;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#cbd5e0}.device-assignment-modal{max-width:700px;max-height:80vh;display:flex;flex-direction:column}.device-assignment-modal .modal-body{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:1rem}.search-box{margin-bottom:.5rem}.search-input{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;transition:all .2s}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.selection-actions{display:flex;gap:.5rem;align-items:center;padding:.5rem 0;border-bottom:1px solid #e2e8f0}.selection-actions .btn-secondary{padding:.5rem 1rem;font-size:.875rem}.selection-count{margin-left:auto;font-size:.875rem;color:#64748b;font-weight:500}.device-list{flex:1;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;padding:.5rem;background:#f8fafc;min-height:0;max-height:400px}.device-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#fff;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s}.device-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.device-item.selected{border-color:#667eea;background:#f0f4ff}.device-item input[type=checkbox]{width:18px;height:18px;cursor:pointer}.device-info{flex:1;min-width:0}.device-name{display:flex;align-items:center;gap:.5rem;font-weight:500;color:#1e293b;margin-bottom:.25rem}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.online{background:#48bb78;box-shadow:0 0 0 2px #48bb7833}.status-dot.offline{background:#cbd5e0}.device-details{display:flex;gap:.75rem;font-size:.75rem;color:#64748b}.device-model{font-weight:500}.device-id{font-family:Courier New,monospace}.no-devices{text-align:center;padding:2rem;color:#94a3b8;font-size:.875rem}.error-message{padding:.75rem;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:.875rem}.device-list::-webkit-scrollbar{width:8px}.device-list::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.device-list::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.device-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.user-management-container{padding:2rem;max-width:1400px;margin:0 auto}.management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.management-header h2{margin:0;color:#333}.btn-primary{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#5568d3}.error-message{color:#e53e3e;background:#fff5f5;padding:.75rem;border-radius:4px;margin-bottom:1rem}.user-table-container{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.user-table{width:100%;border-collapse:collapse}.user-table thead{background:#f7fafc}.user-table th{padding:1rem;text-align:left;font-weight:600;color:#4a5568;border-bottom:2px solid #e2e8f0}.user-table td{padding:1rem;border-bottom:1px solid #e2e8f0}.user-table tbody tr:hover{background:#f7fafc}.role-tags{display:flex;flex-wrap:wrap;gap:.5rem}.role-tag{padding:.25rem .75rem;background:#edf2f7;border-radius:12px;font-size:.875rem;color:#4a5568}.status-badge{padding:.25rem .75rem;border-radius:12px;font-size:.875rem;font-weight:500}.status-badge.active{background:#c6f6d5;color:#22543d}.status-badge.inactive{background:#fed7d7;color:#742a2a}.action-buttons{display:flex;gap:.5rem}.btn-edit,.btn-delete{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-edit{background:#edf2f7;color:#4a5568}.btn-edit:hover{background:#e2e8f0}.btn-delete{background:#fed7d7;color:#742a2a}.btn-delete:hover{background:#fc8181;color:#fff}.table-footer{padding:1rem;background:#fff;border-top:1px solid #e2e8f0;text-align:right;color:#666;font-size:.875rem}.loading{display:flex;justify-content:center;align-items:center;height:400px;font-size:1.125rem;color:#666}.device-key-cell{display:flex;align-items:center;gap:.5rem}.device-key{font-family:Courier New,monospace;font-size:.875rem;background:#f7fafc;padding:.25rem .5rem;border-radius:4px;color:#2d3748;border:1px solid #e2e8f0}.device-key-actions{display:flex;gap:.25rem}.btn-icon{background:none;border:none;cursor:pointer;font-size:1.125rem;padding:.25rem;border-radius:4px;transition:background .2s;line-height:1}.btn-icon:hover{background:#edf2f7}.text-muted{color:#a0aec0}.btn-secondary{padding:.5rem 1rem;background:#edf2f7;color:#4a5568;border:none;border-radius:4px;font-size:.875rem;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#e2e8f0}.role-management-container{padding:2rem;max-width:1400px;margin:0 auto}.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-bottom:2rem}.role-card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a;transition:all .2s}.role-card:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.role-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.role-card-header h3{margin:0 0 .5rem;color:#333;font-size:1.25rem}.system-badge{display:inline-block;padding:.25rem .75rem;background:#bee3f8;color:#2c5282;border-radius:12px;font-size:.75rem;font-weight:500}.role-actions{display:flex;gap:.5rem}.role-description{color:#666;font-size:.875rem;margin-bottom:1rem;line-height:1.5}.permissions-section{margin-bottom:1rem}.permissions-section h4{margin:0 0 .75rem;color:#4a5568;font-size:.875rem;font-weight:600}.permission-tags{display:flex;flex-wrap:wrap;gap:.5rem}.permission-tag{padding:.25rem .75rem;background:#edf2f7;border-radius:12px;font-size:.75rem;color:#4a5568}.role-footer{padding-top:1rem;border-top:1px solid #e2e8f0}.role-date{color:#999;font-size:.75rem}.permission-groups{max-height:400px;overflow-y:auto;padding:.5rem;background:#f7fafc;border-radius:4px}.permission-group{margin-bottom:1.5rem}.permission-group:last-child{margin-bottom:0}.resource-title{margin:0 0 .75rem;color:#2d3748;font-size:1rem;font-weight:600;text-transform:capitalize;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}.permission-checkboxes{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.permission-desc{color:#666;font-size:.875rem;margin-left:.5rem}.session-history-container{padding:24px}.stat-value.active{color:#10b981}.sessions-table-container{background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;margin-bottom:20px}.sessions-table{width:100%;border-collapse:collapse}.sessions-table thead{background:#f9fafb;border-bottom:1px solid #e5e7eb}.sessions-table th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.sessions-table td{padding:16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#1a1a1a}.sessions-table tbody tr:last-child td{border-bottom:none}.sessions-table tbody tr:hover{background:#f9fafb}.device-model{font-size:12px;color:#6b7280}.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500}.status-active{background:#d1fae5;color:#065f46}.status-completed{background:#dbeafe;color:#1e40af}.status-interrupted{background:#fee2e2;color:#991b1b}.delete-button{padding:6px 12px;background:#ef4444;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.delete-button:hover{background:#dc2626}.audit-logs-container{padding:24px}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-header h1{font-size:24px;font-weight:600;color:#1a1a1a;margin:0}.clear-button{padding:8px 16px;background:#ef4444;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background .2s}.clear-button:hover{background:#dc2626}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:20px}.stat-label{font-size:14px;color:#6b7280;margin-bottom:8px}.stat-value{font-size:28px;font-weight:600;color:#1a1a1a}.stat-value.error{color:#ef4444}.stat-value.warning{color:#f59e0b}.stat-value.info{color:#3b82f6}.filters{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.filter-select,.filter-input{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff}.filter-select{min-width:150px}.filter-input{flex:1;min-width:200px}.refresh-button{padding:8px 16px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background .2s}.refresh-button:hover{background:#2563eb}.loading{text-align:center;padding:40px;color:#6b7280}.logs-table-container{background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;margin-bottom:20px}.logs-table{width:100%;border-collapse:collapse}.logs-table thead{background:#f9fafb;border-bottom:1px solid #e5e7eb}.logs-table th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.logs-table td{padding:16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#1a1a1a}.logs-table tbody tr:last-child td{border-bottom:none}.logs-table tbody tr:hover{background:#f9fafb}.device-info{display:flex;flex-direction:column;gap:4px}.device-name{font-weight:500}.device-id{font-size:12px;color:#6b7280}.message-cell{max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:600;letter-spacing:.05em}.level-debug{background:#f3f4f6;color:#6b7280}.level-info{background:#dbeafe;color:#1e40af}.level-warning{background:#fef3c7;color:#92400e}.level-error{background:#fee2e2;color:#991b1b}.view-button{padding:6px 12px;background:#3b82f6;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.view-button:hover{background:#2563eb}.no-data{text-align:center;padding:40px;color:#9ca3af}.pagination{display:flex;justify-content:center;align-items:center;gap:16px}.pagination-button{padding:8px 16px;background:#fff;border:1px solid #d1d5db;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.pagination-button:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.pagination-button:disabled{opacity:.5;cursor:not-allowed}.pagination-info{font-size:14px;color:#6b7280}.modal-content{background:#fff;border-radius:12px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.modal-header h2{font-size:18px;font-weight:600;color:#1a1a1a;margin:0}.close-button{background:none;border:none;font-size:28px;color:#9ca3af;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.close-button:hover{background:#f3f4f6;color:#1a1a1a}.modal-body{padding:24px;overflow-y:auto}.detail-row{display:flex;gap:12px;margin-bottom:16px}.detail-label{font-weight:600;color:#6b7280;min-width:100px}.detail-value{flex:1;color:#1a1a1a}.detail-json{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:12px;font-size:12px;font-family:Courier New,monospace;overflow-x:auto;margin:0;flex:1}.group-modal{width:90%;max-width:500px}.required{color:#e53e3e}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#2d3748;font-size:.875rem}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-size:.875rem;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.form-group textarea{resize:vertical;min-height:100px}.char-count{text-align:right;font-size:.75rem;color:#718096;margin-top:.25rem}.error-message{background:#fff5f5;color:#c53030;padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.875rem;border-left:4px solid #fc8181}.group-management-container{padding:2rem;max-width:1400px;margin:0 auto}.group-management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem}.group-management-header h2{margin:0;font-size:1.75rem;color:#2d3748;flex:1}.btn-back{padding:.75rem 1.5rem;background:#f7fafc;color:#4a5568;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s;white-space:nowrap}.btn-back:hover{background:#edf2f7;border-color:#cbd5e0;transform:translate(-2px)}.btn-create{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s;box-shadow:0 4px 6px #667eea4d}.btn-create:hover{transform:translateY(-2px);box-shadow:0 6px 12px #667eea66}.empty-state{text-align:center;padding:4rem 2rem;background:#f7fafc;border-radius:12px;border:2px dashed #cbd5e0}.empty-state p{font-size:1.125rem;color:#718096;margin-bottom:1.5rem}.btn-create-empty{padding:.875rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s}.btn-create-empty:hover{transform:translateY(-2px);box-shadow:0 6px 12px #667eea66}.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.group-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #00000014;transition:all .3s;border:1px solid #e2e8f0}.group-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000001f}.group-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.group-card-header h3{margin:0;font-size:1.25rem;color:#2d3748;flex:1}.group-card-actions{display:flex;gap:.5rem}.btn-icon{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s}.btn-edit:hover{background:#ebf8ff}.group-description{color:#718096;font-size:.875rem;line-height:1.5;margin-bottom:1rem;min-height:2.5rem}.group-stats{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #e2e8f0;font-size:.75rem}.device-count{color:#4299e1;font-weight:600;background:#ebf8ff;padding:.25rem .75rem;border-radius:12px}.created-at{color:#a0aec0}.loading,.error{text-align:center;padding:3rem;font-size:1.125rem}.error{color:#e53e3e}.rc-tree{margin:0;border:1px solid transparent}.rc-tree-focused:not(.rc-tree-active-focused){border-color:#0ff}.rc-tree .rc-tree-treenode{margin:0;padding:0;line-height:24px;white-space:nowrap;list-style:none;outline:0}.rc-tree .rc-tree-treenode .draggable{color:#333;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.rc-tree .rc-tree-treenode.dragging{background:#6464ff1a}.rc-tree .rc-tree-treenode.drop-container>.draggable:after{position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 2px red;content:""}.rc-tree .rc-tree-treenode.drop-container~.rc-tree-treenode{border-left:2px solid chocolate}.rc-tree .rc-tree-treenode.drop-target{background-color:#9acd32}.rc-tree .rc-tree-treenode.drop-target~.rc-tree-treenode{border-left:none}.rc-tree .rc-tree-treenode.filter-node>.rc-tree-node-content-wrapper{color:#a60000!important;font-weight:700!important}.rc-tree .rc-tree-treenode ul{margin:0;padding:0 0 0 18px}.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper{position:relative;display:inline-block;height:24px;margin:0;padding:0;text-decoration:none;vertical-align:top;cursor:pointer}.rc-tree .rc-tree-treenode span.rc-tree-switcher,.rc-tree .rc-tree-treenode span.rc-tree-checkbox,.rc-tree .rc-tree-treenode span.rc-tree-iconEle{display:inline-block;width:16px;height:16px;margin-right:2px;line-height:16px;vertical-align:-.125em;background-color:transparent;background-image:url(data:image/png;base64,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);background-repeat:no-repeat;background-attachment:scroll;border:0 none;outline:none;cursor:pointer}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-icon__customize,.rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize{background-image:none}.rc-tree .rc-tree-treenode span.rc-tree-icon_loading{margin-right:2px;vertical-align:top;background:url(data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7) no-repeat scroll 0 0 transparent}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop{cursor:auto}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open{background-position:-93px -56px}.rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close{background-position:-75px -56px}.rc-tree .rc-tree-treenode span.rc-tree-checkbox{width:13px;height:13px;margin:0 3px;background-position:0 0}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-checked{background-position:-14px 0}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-indeterminate{background-position:-14px -28px}.rc-tree .rc-tree-treenode span.rc-tree-checkbox-disabled{background-position:0 -56px}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled{background-position:-14px -56px}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled{position:relative;background:#ccc;border-radius:3px}.rc-tree .rc-tree-treenode span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled:after{position:absolute;top:5px;left:3px;width:5px;height:0;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:scale(1);transform:scale(1);content:" "}.rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop{background:none}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child)>ul{background:url(data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7) 0 0 repeat-y}.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child)>.rc-tree-switcher-noop{background-position:-56px -18px}.rc-tree.rc-tree-show-line .rc-tree-treenode:last-child>.rc-tree-switcher-noop{background-position:-56px -36px}.rc-tree-child-tree{display:none}.rc-tree-child-tree-open{display:block}.rc-tree-treenode-disabled>span:not(.rc-tree-switcher),.rc-tree-treenode-disabled>a,.rc-tree-treenode-disabled>a span{color:#767676;cursor:not-allowed}.rc-tree-treenode-active{background:#0000001a}.rc-tree-node-selected{background-color:#ffe6b0;box-shadow:0 0 0 1px #ffb951;opacity:.8}.rc-tree-icon__open{margin-right:2px;vertical-align:top;background-position:-110px -16px}.rc-tree-icon__close{margin-right:2px;vertical-align:top;background-position:-110px 0}.rc-tree-icon__docu{margin-right:2px;vertical-align:top;background-position:-110px -32px}.rc-tree-icon__customize{margin-right:2px;vertical-align:top}.rc-tree-title{display:inline-block}.rc-tree-indent{display:inline-block;height:0;vertical-align:bottom}.rc-tree-indent-unit{display:inline-block;width:16px}.rc-tree-draggable-icon{display:inline-flex;justify-content:center;width:16px}.layout-analyzer-container{display:flex;flex-direction:column;height:100vh;background:#f7fafc;overflow:hidden}.analyzer-header{background:#fff;padding:16px 24px;box-shadow:0 1px 3px #0000001a;border-bottom:1px solid #e2e8f0;flex-shrink:0}.analyzer-header h1{font-size:20px;color:#2d3748;margin:0;font-weight:600}.analyzer-subtitle{color:#718096;font-size:13px;margin:4px 0 0}.analyzer-main{display:flex;gap:12px;padding:12px;flex:1;overflow:hidden}.layout-sidebar{width:320px;background:#f7fafc;border-radius:8px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.layout-list-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#fff;flex-shrink:0}.layout-list-header h3{margin:0;font-size:14px;color:#2d3748;font-weight:600}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#fff;flex-shrink:0}.sidebar-header h3{margin:0;font-size:14px;color:#2d3748;font-weight:600}.btn-refresh{background:#fff;border:1px solid #e2e8f0;color:#4a5568;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.btn-refresh:hover{background:#f7fafc;border-color:#cbd5e0;transform:rotate(180deg)}.btn-refresh:disabled{opacity:.5;cursor:not-allowed}.sidebar-content{flex:1;overflow-y:auto;padding:8px 0}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;color:#718096}.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#4299e1;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.empty-icon{font-size:3rem;margin-bottom:1rem}.empty-state p{color:#718096;margin:.5rem 0}.empty-hint{font-size:.875rem;color:#a0aec0}.layout-list{display:flex;flex-direction:column;gap:0}.layout-card{padding:12px;margin:0 8px 8px;border-radius:6px;cursor:pointer;transition:all .2s;background:#fff;border:1px solid #e2e8f0}.layout-card:hover{background:#f7fafc;border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.layout-card.selected{background:#ebf8ff;border-color:#4299e1;border-left-width:3px;box-shadow:0 2px 8px #4299e126}.layout-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}.layout-card-title{font-weight:500;color:#2d3748;font-size:13px;flex:1;line-height:1.4;word-break:break-word}.btn-icon{background:none;border:none;font-size:16px;cursor:pointer;padding:2px;border-radius:4px;transition:all .2s;flex-shrink:0}.btn-icon:hover{background:#f7fafc}.btn-delete:hover{background:#fff5f5}.layout-card-meta{display:flex;flex-direction:column;gap:4px}.meta-item{display:flex;align-items:center;gap:6px;font-size:11px;color:#718096}.layout-card.selected .meta-item{color:#4a5568}.meta-icon{font-size:12px;flex-shrink:0}.viewer-content{flex:1;display:grid;grid-template-columns:minmax(300px,1fr) minmax(280px,.8fr) 280px;grid-template-rows:1fr;gap:12px;overflow:hidden}.empty-viewer{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;text-align:center;padding:3rem}.empty-viewer .empty-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.5}.empty-viewer h3{color:#2d3748;margin:0 0 .5rem}.empty-viewer p{color:#718096;margin:0}.canvas-panel{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #e2e8f0;background:#f7fafc;flex-shrink:0}.panel-header h3{margin:0;font-size:14px;color:#2d3748;font-weight:600}.canvas-info{font-size:11px;color:#718096;font-weight:500}.node-count{font-size:11px;color:#718096;background:#fff;padding:2px 8px;border-radius:10px;border:1px solid #e2e8f0}.canvas-wrapper{flex:1;padding:16px;overflow:auto;display:flex;align-items:center;justify-content:center;background:#f7fafc}.layout-canvas{border:1px solid #e2e8f0;border-radius:4px;box-shadow:0 2px 8px #00000014;cursor:crosshair;background:#fff}.tree-panel{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;overflow:hidden}.tree-content{flex:1;overflow-y:auto;padding:8px}.details-panel-standalone{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;overflow:hidden}.tree-node{padding:6px 8px;border-radius:4px;cursor:pointer;transition:all .15s;margin-bottom:2px;border-left:2px solid transparent}.tree-node:hover{background:#f7fafc;border-left-color:#90cdf4}.tree-node.hovered{background:#f7fafc;border-left-color:#cbd5e0}.tree-node.selected{background:#ebf8ff;border-left-color:#4299e1}.tree-node-content{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.tree-node-toggle{font-size:10px;color:#718096;cursor:pointer;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:2px;flex-shrink:0;transition:all .2s;-webkit-user-select:none;user-select:none}.tree-node-toggle:hover{background:#e2e8f0;color:#2d3748}.tree-node-spacer{width:14px;flex-shrink:0}.tree-node-icon{font-size:12px;flex-shrink:0}.tree-node-label{font-size:12px;color:#2d3748;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node.selected .tree-node-label{color:#2c5282;font-weight:600}.tree-node-class{font-size:10px;color:#718096;background:#f7fafc;padding:2px 5px;border-radius:3px;flex-shrink:0}.tree-node.selected .tree-node-class{background:#bee3f8;color:#2c5282}.node-badge{display:inline-block;padding:2px 5px;border-radius:8px;font-size:9px;font-weight:500;margin-left:4px;flex-shrink:0}.node-badge.clickable{background:#c6f6d5;color:#22543d}.node-badge.scrollable{background:#bee3f8;color:#2c5282}.details-panel{border-top:1px solid #e2e8f0;background:#f7fafc;max-height:280px;display:flex;flex-direction:column;overflow:hidden}.details-panel-standalone .details-content{flex:1;overflow-y:auto;padding:12px}.btn-close-details{background:transparent;border:none;color:#718096;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.btn-close-details:hover{background:#e2e8f0;color:#2d3748}.details-content{flex:1;overflow-y:auto;padding:12px}.detail-section{margin-bottom:12px}.detail-section:last-child{margin-bottom:0}.detail-section h4{margin:0 0 8px;font-size:11px;color:#718096;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.detail-item{display:flex;flex-direction:column;gap:2px;background:#fff;padding:6px 8px;border-radius:4px;border:1px solid #e2e8f0}.detail-label{font-size:10px;color:#718096;font-weight:600}.detail-value{font-size:11px;color:#2d3748;font-weight:500;word-break:break-all}.detail-badges{display:flex;flex-wrap:wrap;gap:4px}.detail-badge{padding:4px 8px;border-radius:4px;font-size:10px;font-weight:500;background:#fff;color:#718096;border:1px solid #e2e8f0}.detail-badge.active{background:#4299e1;color:#fff;border-color:#4299e1}.tree-node-rc{padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s;margin-bottom:2px;border-left:2px solid transparent;display:flex;align-items:center;justify-content:space-between;width:100%}.tree-node-rc:hover{background:#f7fafc;border-left-color:#90cdf4}.tree-node-rc.selected{background:#ebf8ff;border-left-color:#4299e1}.tree-node-rc .tree-node-content{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.tree-node-rc .tree-node-icon{font-size:12px;flex-shrink:0}.tree-node-rc .tree-node-label{font-size:12px;color:#2d3748;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node-rc.selected .tree-node-label{color:#2c5282;font-weight:600}.tree-node-rc .tree-node-class{font-size:10px;color:#718096;background:#f7fafc;padding:2px 5px;border-radius:3px;flex-shrink:0}.tree-node-rc.selected .tree-node-class{background:#bee3f8;color:#2c5282}.tree-node-rc .tree-node-badges{display:flex;gap:4px;flex-shrink:0}.tree-node-rc .node-badge{display:inline-block;padding:2px 5px;border-radius:8px;font-size:9px;font-weight:500}.tree-node-rc .node-badge.clickable{background:#c6f6d5;color:#22543d}.tree-node-rc .node-badge.scrollable{background:#bee3f8;color:#2c5282}.rc-tree{background:transparent;border:none}.rc-tree .rc-tree-node-content-wrapper{padding:0;border-radius:0;cursor:default;transition:none}.rc-tree .rc-tree-node-content-wrapper:hover{background:transparent}.rc-tree .rc-tree-switcher{width:16px;height:16px;margin-right:4px;background:none;border:none;cursor:pointer}.rc-tree .rc-tree-switcher-icon{font-size:10px;color:#718096}.rc-tree .rc-tree-indent-unit{width:20px}.tree-node-arborist{padding:6px 8px;border-radius:4px;cursor:pointer;transition:all .15s;margin-bottom:2px;border-left:2px solid transparent;display:flex;align-items:center;justify-content:space-between}.tree-node-arborist:hover{background:#f7fafc;border-left-color:#90cdf4}.tree-node-arborist.hovered{background:#f7fafc;border-left-color:#cbd5e0}.tree-node-arborist.selected{background:#ebf8ff;border-left-color:#4299e1}.tree-node-arborist .tree-node-content{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.tree-node-arborist .tree-node-icon{font-size:12px;flex-shrink:0}.tree-node-arborist .tree-node-label{font-size:12px;color:#2d3748;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-node-arborist.selected .tree-node-label{color:#2c5282;font-weight:600}.tree-node-arborist .tree-node-class{font-size:10px;color:#718096;background:#f7fafc;padding:2px 5px;border-radius:3px;flex-shrink:0}.tree-node-arborist.selected .tree-node-class{background:#bee3f8;color:#2c5282}.tree-node-arborist .node-badge{display:inline-block;padding:2px 5px;border-radius:8px;font-size:9px;font-weight:500;margin-left:4px;flex-shrink:0}.tree-node-arborist .node-badge.clickable{background:#c6f6d5;color:#22543d}.tree-node-arborist .node-badge.scrollable{background:#bee3f8;color:#2c5282}.sidebar-content::-webkit-scrollbar,.tree-content::-webkit-scrollbar,.details-content::-webkit-scrollbar,.canvas-wrapper::-webkit-scrollbar{width:8px;height:8px}.sidebar-content::-webkit-scrollbar-track,.tree-content::-webkit-scrollbar-track,.details-content::-webkit-scrollbar-track,.canvas-wrapper::-webkit-scrollbar-track{background:#f7fafc}.sidebar-content::-webkit-scrollbar-thumb,.tree-content::-webkit-scrollbar-thumb,.details-content::-webkit-scrollbar-thumb,.canvas-wrapper::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.sidebar-content::-webkit-scrollbar-thumb:hover,.tree-content::-webkit-scrollbar-thumb:hover,.details-content::-webkit-scrollbar-thumb:hover,.canvas-wrapper::-webkit-scrollbar-thumb:hover{background:#a0aec0}.keyboard-records-container{padding:24px;max-width:1600px;margin:0 auto}.page-header{margin-bottom:24px}.page-header h1{margin:0 0 8px;font-size:28px;color:#1a1a1a}.page-description{margin:0;color:#666;font-size:14px}.device-selector{margin-bottom:24px;display:flex;align-items:center;gap:12px}.device-selector label{font-weight:500;color:#333}.device-select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;min-width:300px}.statistics-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;border-radius:8px;color:#fff;box-shadow:0 2px 8px #0000001a}.stat-card:nth-child(2){background:linear-gradient(135deg,#f093fb,#f5576c)}.stat-card:nth-child(3){background:linear-gradient(135deg,#4facfe,#00f2fe)}.stat-card:nth-child(4){background:linear-gradient(135deg,#43e97b,#38f9d7)}.stat-card:nth-child(5){background:linear-gradient(135deg,#fa709a,#fee140)}.stat-label{font-size:12px;opacity:.9;margin-bottom:8px}.stat-value{font-size:28px;font-weight:700}.filters-panel{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;margin-bottom:24px}.filters-panel h3{margin:0 0 16px;font-size:18px;color:#333}.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:16px}.filter-item{display:flex;flex-direction:column;gap:6px}.filter-item.full-width{grid-column:1 / -1}.filter-item label{font-size:13px;font-weight:500;color:#555}.filter-item input,.filter-item select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.filter-item input:focus,.filter-item select:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px #2196f31a}.filter-actions{display:flex;gap:12px;flex-wrap:wrap}.btn-primary,.btn-secondary,.btn-danger{padding:10px 20px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s}.btn-secondary{background:#f5f5f5;color:#333}.btn-secondary:hover{background:#e0e0e0}.records-section{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h3{margin:0;font-size:18px;color:#333}.record-count{font-size:13px;color:#666}.loading,.error-message,.empty-message{text-align:center;padding:40px;color:#666}.error-message{color:#f44336}.records-table-container{overflow-x:auto}.records-table{width:100%;border-collapse:collapse;font-size:13px}.records-table thead{background:#f5f5f5}.records-table th{padding:12px;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #e0e0e0}.records-table td{padding:12px;border-bottom:1px solid #f0f0f0}.records-table tbody tr:hover{background:#fafafa}.timestamp-cell{white-space:nowrap;color:#666;font-size:12px}.app-name-cell{font-weight:500;color:#333}.event-type-cell{text-align:center}.event-type-badge{display:inline-block;padding:4px 12px;border-radius:12px;color:#fff;font-size:11px;font-weight:500}.text-cell{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333}.window-title-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:12px}.package-name-cell{color:#999;font-size:11px;font-family:monospace}.pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}.pagination-btn{padding:8px 16px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#f5f5f5;border-color:#2196f3}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{font-size:13px;color:#666;padding:0 12px}@media (max-width: 768px){.keyboard-records-container{padding:16px}.filters-grid{grid-template-columns:1fr}.statistics-panel{grid-template-columns:repeat(2,1fr)}.records-table{font-size:12px}.records-table th,.records-table td{padding:8px}}.dynamic-ui-manager{padding:20px;max-width:1400px;margin:0 auto}.manager-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.manager-header h1{margin:0;font-size:28px;color:#333}.btn-create{padding:12px 24px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.btn-create:hover{background:#1976d2}.manager-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;text-align:center}.stat-value{font-size:36px;font-weight:700;color:#2196f3;margin-bottom:5px}.stat-label{font-size:14px;color:#666}.empty-state{padding:80px 20px;text-align:center;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.empty-icon{font-size:64px;margin-bottom:20px}.empty-state h2{margin:0 0 10px;font-size:24px;color:#333}.empty-state p{margin:0 0 30px;font-size:16px;color:#666}.btn-create-large{padding:15px 30px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;font-weight:500}.btn-create-large:hover{background:#1976d2}.layouts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.layouts-list{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.list-header{display:grid;grid-template-columns:80px 200px 1fr 80px 80px 180px 280px;gap:16px;padding:16px 20px;background:#f5f5f5;border-bottom:2px solid #e0e0e0;font-weight:600;font-size:14px;color:#333}.list-row{display:grid;grid-template-columns:80px 200px 1fr 80px 80px 180px 280px;gap:16px;padding:16px 20px;border-bottom:1px solid #f0f0f0;align-items:center;transition:background-color .2s}.list-row:hover{background-color:#f9f9f9}.list-row:last-child{border-bottom:none}.list-row.inactive{opacity:.6}.col-status{display:flex;align-items:center;gap:8px;flex:0 0 120px}.status-controls{display:flex;align-items:center;gap:8px}.col-status input[type=checkbox]{cursor:pointer;width:18px;height:18px;margin:0;accent-color:#4caf50}.default-badge{background:#4caf50;color:#fff;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500;white-space:nowrap}.col-id{font-family:monospace;font-size:13px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-name{font-weight:500;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-version{font-family:monospace;font-size:13px;color:#666;text-align:center}.col-components{text-align:center;color:#666}.col-time{font-size:13px;color:#999}.col-actions{display:flex;gap:8px;justify-content:flex-end}.btn-action{padding:6px 12px;border:none;border-radius:4px;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-action:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.btn-edit{background:#1890ff;color:#fff}.btn-edit:hover{background:#40a9ff}.btn-push{background:#52c41a;color:#fff}.btn-push:hover{background:#73d13d}.btn-delete{background:#ff4d4f;color:#fff}.btn-delete:hover{background:#ff7875}.layout-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:transform .2s,box-shadow .2s}.layout-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.layout-card.inactive{opacity:.7}.card-header{padding:15px 20px;background:#f5f5f5;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:flex-start}.card-title{flex:1}.card-title h3{margin:0 0 8px;font-size:18px;color:#333}.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;white-space:nowrap}.status-badge.active{background:#e6f7ff;color:#1890ff;border:1px solid #91d5ff}.status-badge.inactive{background:#f5f5f5;color:#999;border:1px solid #d9d9d9}.card-actions{display:flex;gap:8px}.btn-icon{background:none;border:none;font-size:20px;cursor:pointer;padding:4px;opacity:.7;transition:opacity .2s}.btn-icon:hover{opacity:1}.card-body{padding:20px}.card-info{margin-bottom:15px}.info-item{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.info-label{color:#666;font-weight:500}.info-value{color:#333}.card-description{padding:12px;background:#f5f5f5;border-radius:4px;font-size:13px;color:#666;margin-bottom:15px}.card-meta{font-size:12px;color:#999}.meta-item{display:flex;justify-content:space-between;margin-bottom:4px}.card-footer{padding:15px 20px;background:#f5f5f5;border-top:1px solid #e0e0e0;display:flex;gap:10px}.btn-primary,.btn-secondary,.btn-danger{flex:1;padding:10px;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;transition:background .2s}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover{background:#1976d2}.btn-secondary{background:#757575;color:#fff}.btn-secondary:hover{background:#616161}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#d32f2f}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 30px #0000004d}.modal-header{padding:20px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;font-size:20px}.modal-close{background:none;border:none;font-size:28px;cursor:pointer;color:#666;line-height:1}.modal-close:hover{color:#333}.modal-body{padding:20px;overflow-y:auto;flex:1}.layout-info{padding:15px;background:#f5f5f5;border-radius:4px;margin-bottom:20px}.layout-info h3{margin:0 0 8px;font-size:18px}.layout-info p{margin:4px 0;font-size:13px;color:#666}.device-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.device-list-header h4{margin:0;font-size:16px}.btn-select-all{padding:6px 12px;background:#f0f0f0;border:none;border-radius:4px;cursor:pointer;font-size:13px}.btn-select-all:hover{background:#e0e0e0}.device-list{max-height:300px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:4px}.device-item{padding:15px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s}.device-item:last-child{border-bottom:none}.device-item:hover{background:#f5f5f5}.device-item.selected{background:#e3f2fd}.device-item input[type=checkbox]{cursor:pointer}.device-info{flex:1}.device-name{font-size:14px;font-weight:500;color:#333;margin-bottom:4px}.device-id{font-size:12px;color:#666}.device-status{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500}.device-status.online{background:#e8f5e9;color:#2e7d32}.push-options{margin-top:20px;padding:15px;background:#fff3cd;border-radius:4px}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}.checkbox-label input[type=checkbox]{cursor:pointer}.modal-footer{padding:20px;border-top:1px solid #e0e0e0;display:flex;gap:10px;justify-content:flex-end}.modal-footer .btn-primary,.modal-footer .btn-secondary{flex:0 0 auto;min-width:120px}.loading{padding:40px;text-align:center;color:#666}.error-message{padding:12px;background:#ffebee;color:#c62828;border-radius:4px;margin-bottom:15px}.dynamic-ui-editor{height:100vh;display:flex;flex-direction:column;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #00000026;z-index:10}.header-left{display:flex;align-items:center;gap:15px}.header-left h1{margin:0;font-size:22px;font-weight:600;color:#fff}.btn-back{padding:8px 16px;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-back:hover{background:#ffffff4d;border-color:#ffffff80;transform:translate(-2px)}.btn-save{padding:10px 28px;background:#fff;color:#667eea;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;box-shadow:0 2px 8px #00000026;transition:all .2s}.btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.btn-save:disabled{background:#ffffff80;color:#667eea80;cursor:not-allowed;transform:none;box-shadow:none}.error-message{padding:14px 24px;background:linear-gradient(135deg,#ffebee,#ffcdd2);color:#c62828;display:flex;justify-content:space-between;align-items:center;border-left:4px solid #c62828;font-size:14px;font-weight:500}.error-message button{background:none;border:none;font-size:24px;cursor:pointer;color:#c62828;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.error-message button:hover{background:#c628281a}.editor-form{padding:24px;background:#fff;border-bottom:1px solid #e9ecef;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;box-shadow:0 1px 3px #0000000d}.form-group{display:flex;flex-direction:column;gap:5px}.form-group label{font-weight:600;font-size:13px;color:#495057;text-transform:uppercase;letter-spacing:.5px}.form-group input,.form-group textarea{padding:12px 14px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;transition:all .2s;background:#f8f9fa}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.form-group input:disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed}.editor-content{flex:1;display:grid;grid-template-columns:260px 380px 1fr 360px;gap:1px;overflow:hidden;min-height:500px;background:#e9ecef}.editor-column{background:#fff;overflow-y:auto;display:flex;flex-direction:column}.editor-palette-column{box-shadow:2px 0 8px #0000000d;z-index:4}.editor-preview-column{background:linear-gradient(135deg,#f8f9fa,#e9ecef);z-index:3}.editor-tree-column{z-index:2}.editor-properties-column{box-shadow:-2px 0 8px #0000000d;z-index:4}.component-palette{padding:24px 20px;flex:1}.component-palette h3{margin:0 0 20px;font-size:15px;font-weight:700;color:#212529;text-transform:uppercase;letter-spacing:.5px;padding-bottom:12px;border-bottom:2px solid #667eea}.palette-grid{display:grid;grid-template-columns:1fr;gap:10px}.palette-item{padding:14px 16px;background:linear-gradient(135deg,#f8f9fa,#fff);border:2px solid #e9ecef;border-radius:10px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:flex;align-items:center;gap:12px}.palette-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea,#764ba2);opacity:0;transition:opacity .3s;z-index:0}.palette-item:hover:before{opacity:.1}.palette-item:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 8px 16px #667eea33}.palette-icon{font-size:28px;position:relative;z-index:1;filter:grayscale(.3);transition:filter .3s;flex-shrink:0}.palette-item:hover .palette-icon{filter:grayscale(0)}.palette-name{font-size:13px;font-weight:600;color:#495057;position:relative;z-index:1;flex:1;text-align:left}.palette-hint{margin-top:24px;padding:14px 16px;background:linear-gradient(135deg,#fff3cd,#fff8e1);border-left:4px solid #ffc107;border-radius:8px;font-size:12px;color:#856404;line-height:1.6}.preview-header{padding:20px 24px;background:#fff;border-bottom:2px solid #dee2e6;position:sticky;top:0;z-index:10}.preview-header h3{margin:0;font-size:15px;font-weight:700;color:#212529;text-transform:uppercase;letter-spacing:.5px;text-align:center}.preview-container{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto}.layout-preview{display:flex;justify-content:center;align-items:center;width:100%}.preview-phone{width:320px;height:580px;border:12px solid #1a1a1a;border-radius:36px;background:#fff;box-shadow:0 20px 60px #0000004d,0 0 0 1px #0000001a;overflow:hidden;position:relative}.preview-phone:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:60px;height:6px;background:#333;border-radius:3px;z-index:10}.preview-screen{width:100%;height:100%;overflow-y:auto;background:#fff;padding-top:20px}.preview-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#adb5bd;font-size:14px;padding:40px 20px}.preview-empty:before{content:"📱";display:block;font-size:64px;margin-bottom:16px;opacity:.5}.preview-button{border:none;border-radius:4px;cursor:pointer;font-size:14px}.preview-input{border:1px solid #ddd;border-radius:4px;font-size:14px}.preview-image{display:block;max-width:100%}.preview-divider{width:100%;background-color:#e0e0e0}.preview-spacer{width:100%;background-color:transparent}.preview-card{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.preview-list{background:#fff;border:1px solid #ddd;overflow-y:auto}.tree-header{padding:20px 24px;background:#fff;border-bottom:2px solid #dee2e6;position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center}.tree-header h3{margin:0;font-size:15px;font-weight:700;color:#212529;text-transform:uppercase;letter-spacing:.5px}.tree-stats{display:flex;align-items:baseline;gap:6px;background:linear-gradient(135deg,#667eea,#764ba2);padding:6px 14px;border-radius:20px;box-shadow:0 2px 8px #667eea4d}.component-count{font-size:20px;font-weight:700;color:#fff}.component-label{font-size:12px;color:#ffffffe6;font-weight:500}.tree-toolbar{padding:12px 24px;background:#f8f9fa;border-bottom:1px solid #dee2e6;display:flex;gap:8px;justify-content:center}.tree-hint{padding:12px 20px;background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-left:4px solid #667eea;display:flex;align-items:center;gap:12px;font-size:13px;color:#495057;line-height:1.5;border-bottom:1px solid #dee2e6}.hint-icon{font-size:20px;flex-shrink:0}.hint-text{flex:1}.hint-text strong{color:#667eea;font-weight:700}.btn-toolbar-icon{width:40px;height:40px;background:#fff;border:2px solid #dee2e6;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:all .2s;color:#495057;display:flex;align-items:center;justify-content:center}.btn-toolbar-icon:hover{background:#667eea;border-color:#667eea;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.component-tree{padding:20px;flex:1}.tree-empty{padding:60px 20px;text-align:center;color:#adb5bd;font-size:14px}.tree-empty:before{content:"📦";display:block;font-size:48px;margin-bottom:16px;opacity:.5}.tree-item{padding:14px 16px;margin:8px 0;background:#f8f9fa;border:2px solid transparent;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s cubic-bezier(.4,0,.2,1)}.tree-item:hover{background:#e9ecef;transform:translate(4px)}.tree-item.selected{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-color:#667eea;box-shadow:0 4px 12px #667eea26}.tree-icon{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d}.tree-label{flex:1;font-size:14px;font-weight:600;color:#212529}.tree-type{font-size:11px;color:#6c757d;background:#fff;padding:4px 10px;border-radius:12px;font-weight:500}.tree-delete{background:#fff;border:1px solid #dee2e6;cursor:pointer;font-size:16px;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s}.tree-item:hover .tree-delete{opacity:1}.tree-delete:hover{background:#dc3545;border-color:#dc3545;color:#fff}.tree-actions{display:flex;gap:5px;margin-left:auto}.tree-action-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 6px;opacity:.6;transition:opacity .2s}.tree-action-btn:hover{opacity:1;background:#0000000d;border-radius:3px}.component-properties{padding:24px 20px;flex:1}.component-properties h3{margin:0 0 24px;font-size:15px;font-weight:700;color:#212529;text-transform:uppercase;letter-spacing:.5px;padding-bottom:12px;border-bottom:2px solid #667eea}.property-section{margin-bottom:32px;padding:20px;background:#f8f9fa;border-radius:12px;border:1px solid #e9ecef}.property-section h4{margin:0 0 18px;font-size:13px;font-weight:700;color:#495057;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.property-section h4:before{content:"";width:4px;height:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.property-group{margin-bottom:18px}.property-group label{display:block;margin-bottom:8px;font-size:12px;font-weight:600;color:#495057;text-transform:uppercase;letter-spacing:.3px}.property-group input,.property-group select,.property-group textarea{width:100%;padding:10px 12px;border:2px solid #dee2e6;border-radius:8px;font-size:13px;background:#fff;transition:all .2s}.property-group input:focus,.property-group select:focus,.property-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.property-group input[type=color]{height:44px;cursor:pointer;padding:4px}.no-selection{padding:80px 20px;text-align:center;color:#adb5bd}.no-selection:before{content:"👈";display:block;font-size:64px;margin-bottom:20px;opacity:.5}.no-selection p{font-size:15px;line-height:1.6}.btn-add-event{width:100%;padding:12px;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;margin-bottom:16px;transition:all .2s;box-shadow:0 2px 8px #4caf504d}.btn-add-event:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.event-item{padding:16px;background:#fff;border:2px solid #dee2e6;border-radius:10px;margin-bottom:12px}.btn-delete-event{width:100%;padding:10px;background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;margin-top:12px;transition:all .2s}.btn-delete-event:hover{transform:translateY(-1px);box-shadow:0 4px 12px #dc35454d}.loading{padding:80px 40px;text-align:center;font-size:16px;color:#6c757d;font-weight:500}.loading:before{content:"⏳";display:block;font-size:48px;margin-bottom:20px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.color-input-group{display:flex;gap:10px;align-items:center}.color-input-group input[type=color]{width:60px;flex-shrink:0}.color-input-group input[type=text]{flex:1}.toolbar-actions{display:inline-flex;gap:8px;margin-left:16px}.btn-toolbar{padding:6px 14px;background:#fff;border:2px solid #dee2e6;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s;color:#495057}.btn-toolbar:hover{background:#667eea;border-color:#667eea;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.editor-toolbar{padding:12px 24px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid #dee2e6;font-size:13px;color:#6c757d;display:flex;justify-content:space-between;align-items:center;font-weight:500}.success-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.success-modal{background:#fff;border-radius:16px;padding:48px 40px;box-shadow:0 20px 60px #0000004d;text-align:center;min-width:400px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.success-icon{width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg,#4caf50,#45a049);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff;font-weight:700;box-shadow:0 8px 24px #4caf5066;animation:scaleIn .4s ease-out .2s both}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.success-title{margin:0 0 32px;font-size:24px;font-weight:600;color:#212529}.success-button{padding:12px 48px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea4d}.success-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.success-button:active{transform:translateY(0)}.overlay-template-container{padding:20px;background:#f8fafc}.overlay-template-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.header-actions{display:flex;gap:10px}.template-three-columns{display:grid;grid-template-columns:20% 40% 40%;gap:14px;min-height:calc(100vh - 180px)}.overlay-template-panel{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;box-shadow:0 6px 20px #0f172a0f}.column-left,.column-center,.column-right{overflow:auto}.list-toolbar{display:grid;grid-template-columns:1fr 96px;gap:8px;margin-bottom:10px}.default-filter{grid-column:1 / -1;display:flex;align-items:center;gap:8px;color:#475569;font-size:12px}.search-input,.list-toolbar select{border:1px solid #d1d5db;border-radius:8px;padding:8px}.template-list{display:flex;flex-direction:column;gap:10px}.template-card{border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#fff;cursor:pointer}.template-card.default{border-color:#22c55e;background:#f0fdf4}.template-card.active{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb2e}.template-title-row{display:flex;justify-content:space-between;align-items:center}.template-id{font-size:12px;color:#6b7280}.template-meta{margin-top:6px;color:#6b7280;font-size:12px}.template-actions{display:flex;gap:6px;margin-top:10px}.preview-panel{display:flex;flex-direction:column;gap:10px}.preview-controls{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#475569}.phone-preview-shell{border-radius:18px;background:#0f172a;padding:14px;min-height:500px;display:flex;align-items:stretch;justify-content:center}.phone-preview{border-radius:16px;background:linear-gradient(180deg,#dbeafe,#e2e8f0);transition:transform .2s ease;width:100%;min-height:470px}.phone-preview.fullscreen-mode{width:100%;height:470px}.phone-preview.window-mode{align-self:center;justify-self:center;min-height:280px;border:1px solid rgba(255,255,255,.35)}.mask-layer{min-height:390px;border-radius:14px;padding:24px 16px;display:flex;align-items:center;justify-content:center}.miui-overlay-preview{width:100%;max-width:560px;background:#0000}.miui-top-row{display:flex;margin-bottom:20px}.miui-text-block{margin-bottom:16px}.miui-bottom-block{margin-top:10px}.logo-row{display:flex;align-items:center;margin-bottom:8px}.logo-dot{border-radius:999px;background:#fb923c;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:34px;flex:0 0 auto}.logo-image{object-fit:cover;border-radius:999px}.update-mode{font-size:12px;color:#c7d2fe;margin-bottom:8px}.update-title{margin-bottom:8px}.update-hint{margin-bottom:12px}.progress-row{display:flex;margin-bottom:12px}.progress-track{width:100%;height:8px;border-radius:999px;background:#ffffff40;overflow:hidden}.progress-bar{height:100%;border-radius:999px;transition:width .2s ease}.update-meta{font-size:11px;color:#94a3b8}.style-grid{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center}.style-grid input,.style-grid select,.form-grid input,.form-grid select{border:1px solid #d1d5db;border-radius:8px;padding:8px;min-width:0}.style-grid input[type=color]{width:84px;height:40px;padding:2px;border-radius:10px;cursor:pointer;background:#fff}.style-grid input[type=color]::-webkit-color-swatch-wrapper{padding:0}.style-grid input[type=color]::-webkit-color-swatch{border:none;border-radius:8px}.panel-toggle{width:100%;text-align:left;border:1px solid #dbe3f0;border-radius:8px;background:#f8fbff;color:#1e3a8a;padding:8px 10px;margin:10px 0 8px;cursor:pointer;font-weight:600}.style-actions{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.style-json-input{width:100%;min-height:110px;margin-top:10px;border:1px solid #d1d5db;border-radius:8px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.form-grid{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}.form-actions{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}.primary-button,.secondary-button,.refresh-button,.ghost-button,.template-actions button{border:none;border-radius:8px;padding:8px 12px;cursor:pointer}.primary-button{background:#2563eb;color:#fff}.secondary-button,.refresh-button,.template-actions button{background:#eef2ff;color:#1e3a8a}.template-actions .danger{background:#fee2e2;color:#991b1b}.ghost-button{background:#f1f5f9;color:#334155}.editor-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0206178c;display:flex;align-items:center;justify-content:center;z-index:1000}.editor-modal{width:min(860px,92vw);max-height:84vh;overflow:auto;background:#fff;border-radius:14px;padding:16px}.autosave-indicator{font-size:12px;color:#2563eb;margin-top:-4px;margin-bottom:8px}.editor-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.empty{color:#94a3b8;text-align:center;padding:18px}@media (max-width: 1280px){.template-three-columns{grid-template-columns:1fr}}.js-api-docs-page{padding:24px;color:#0f172a;background:#f8fafc;min-height:100%;box-sizing:border-box}.js-api-docs-header{margin-bottom:20px}.js-api-docs-header h2{margin:0 0 8px;font-size:22px}.js-api-docs-header p{margin:0;color:#475569}.js-api-toolbar{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 18px}.js-api-search,.js-api-select{border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}.js-api-search{flex:1 1 260px;min-width:220px}.js-api-select{min-width:160px}.js-api-empty{margin:10px 0 16px;color:#64748b;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;padding:14px}.js-api-group{margin-bottom:24px}.js-api-group h3{margin-bottom:12px;font-size:18px;color:#0f172a}.js-api-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}.js-api-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px;box-shadow:0 6px 16px #0f172a0f;display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease;max-height:420px;overflow:auto}.js-api-card:hover{box-shadow:0 10px 20px #0f172a1f;transform:translateY(-1px)}.js-api-card:focus{outline:2px solid rgba(59,130,246,.4);outline-offset:2px}.js-api-title-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 12px}.js-api-title-row strong{font-size:15px}.js-api-title-row code{font-size:12px;background:#f1f5f9;border-radius:8px;padding:4px 8px;color:#0f172a;max-width:100%;white-space:normal;word-break:break-word}.js-api-desc{margin:0;color:#334155;line-height:1.5}.js-api-block{margin-top:2px}.js-api-block h4{margin:0;font-size:13px;color:#1e293b}.js-api-block-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.js-api-example{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.js-api-example:last-child{margin-bottom:0}.js-api-example-label{font-size:12px;color:#64748b}.js-api-copy{border:1px solid #cbd5e1;background:#fff;color:#1e293b;border-radius:8px;padding:2px 10px;font-size:12px;cursor:pointer;transition:all .2s ease}.js-api-copy:hover{background:#f1f5f9}.js-api-copy.copied{background:#ecfdf3;border-color:#34d399;color:#047857}.js-api-block p,.js-api-block li{font-size:13px;color:#334155;line-height:1.45;word-break:break-word}.js-api-block ul{margin:0;padding-left:16px}.js-api-block code{background:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:1px 5px;word-break:break-word}.js-api-block .type{color:#475569;font-size:12px;margin-left:4px}.js-api-block pre{margin:0;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:12px;font-size:12px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}.js-api-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.js-api-modal-card{background:#fff;border-radius:16px;max-width:720px;width:min(720px,100%);max-height:85vh;overflow:auto;padding:20px;box-shadow:0 20px 40px #0f172a40;display:flex;flex-direction:column;gap:12px}.js-api-modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.js-api-modal-header h3{margin:0 0 6px;font-size:18px}.js-api-modal-header code{background:#f1f5f9;border-radius:8px;padding:4px 8px;font-size:12px;word-break:break-word;display:inline-block}.js-api-modal-close{border:none;background:#f1f5f9;border-radius:8px;padding:4px 10px;font-size:18px;cursor:pointer;color:#0f172a}.js-api-modal-close:hover{background:#e2e8f0}.change-password-modal{max-width:450px;width:90%}.change-password-modal .modal-body{padding:20px}.change-password-modal .form-group{margin-bottom:20px}.change-password-modal .form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.change-password-modal .form-group input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .2s}.change-password-modal .form-group input:focus{outline:none;border-color:#4caf50}.change-password-modal .form-group input:disabled{background-color:#f5f5f5;cursor:not-allowed}.change-password-modal .error-message{padding:10px;margin-bottom:15px;background-color:#ffebee;color:#c62828;border-radius:4px;font-size:14px}.layout-container{display:flex;height:100vh;background:#f7fafc}.sidebar{width:260px;background:#2d3748;color:#fff;display:flex;flex-direction:column;box-shadow:2px 0 4px #0000001a;transition:width .3s ease}.sidebar.collapsed{width:70px}.sidebar-header{padding:2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#2d3748}.sidebar.collapsed .sidebar-header{padding:1.5rem .75rem;flex-direction:column;gap:.5rem}.sidebar-header h1{margin:0;font-size:1.5rem;font-weight:600;white-space:nowrap;overflow:hidden;transition:font-size .3s ease}.sidebar.collapsed .sidebar-header h1{font-size:1.25rem}.sidebar-toggle{background:#ffffff1a;border:none;color:#fff;width:32px;height:32px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.875rem;transition:all .2s;flex-shrink:0}.sidebar-toggle:hover{background:#fff3;transform:scale(1.1)}.nav-menu{flex:1;padding:1rem 0}.nav-item{width:100%;display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:none;border:none;color:#fffc;font-size:1rem;cursor:pointer;transition:all .2s;text-align:left;white-space:nowrap}.sidebar.collapsed .nav-item{padding:1rem 0;justify-content:center;gap:0}.nav-item:hover{background:#ffffff1a;color:#fff}.nav-item.active{background:#667eea33;color:#fff;border-left:3px solid #667eea}.sidebar.collapsed .nav-item.active{border-left:none;border-bottom:3px solid #667eea}.nav-icon{font-size:1.25rem;flex-shrink:0}.sidebar-footer{padding:1.5rem;border-top:1px solid rgba(255,255,255,.1)}.sidebar.collapsed .sidebar-footer{padding:1rem .5rem}.user-info{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.user-avatar{width:40px;height:40px;border-radius:50%;background:#667eea;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;flex-shrink:0}.user-details{flex:1;overflow:hidden}.user-name{font-weight:500;color:#fff;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.75rem;color:#fff9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.change-password-button{width:100%;padding:.75rem;background:#667eea33;border:none;border-radius:4px;color:#fff;font-size:.875rem;cursor:pointer;transition:background .2s;margin-bottom:.5rem}.change-password-button:hover{background:#667eea4d}.change-password-button.collapsed{font-size:1.25rem;padding:.5rem;margin-bottom:.5rem}.logout-button{width:100%;padding:.75rem;background:#ffffff1a;border:none;border-radius:4px;color:#fff;font-size:.875rem;cursor:pointer;transition:background .2s}.logout-button:hover{background:#fff3}.logout-button.collapsed{font-size:1.25rem;padding:.5rem}.main-content{flex:1;overflow-y:auto}*{box-sizing:border-box}#root{min-height:100vh;background:#f7fafc}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}