*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}body{display:flex;flex-direction:column}#shell-header{background:#2c3e50;color:#fff;padding:8px 16px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 4px #0000001a;z-index:1000;flex-shrink:0;max-width:100%;box-sizing:border-box}#shell-header>*{flex-shrink:0}#shell-header h1{font-size:16px;font-weight:500;color:#fff;margin:0}#shell-header h1 a{color:#fff;text-decoration:none;transition:opacity .2s}#shell-header h1 a:hover{opacity:.8}.menu-separator{width:1px;height:20px;background:#fff3}.menu-button{background:#34495e;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}.menu-button:hover{background:#4a6078}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#34495e;min-width:200px;box-shadow:0 8px 16px #0003;z-index:1001;border-radius:4px;top:calc(100% + 4px);left:0}.dropdown-content:before{content:"";position:absolute;top:-4px;left:0;right:0;height:4px}.dropdown-content a,.dropdown-content button{color:#fff;padding:10px 16px;text-decoration:none;display:block;background:transparent;border:none;width:100%;text-align:left;cursor:pointer;font-size:14px;transition:background .2s}.dropdown-content a:hover,.dropdown-content button:hover{background-color:#4a6078}.dropdown-content button:disabled{opacity:.5;cursor:not-allowed;color:#95a5a6}.dropdown-content button:disabled:hover{background-color:transparent}.dropdown-content .danger{color:#e74c3c}.dropdown-content .danger:hover{background-color:#4a6078}.dropdown-separator{height:1px;background:#fff3;margin:4px 0}.dropdown-item-label{color:#95a5a6;padding:8px 16px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.dropdown-select{width:calc(100% - 24px);margin:4px 12px 8px;padding:6px 8px;background:#4a6078;color:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer}.dropdown-select:hover{background:#5a7088}.dropdown-select:focus{outline:none;background:#5a7088}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .menu-button{background:#4a6078}.location-status{position:relative;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;font-size:13px;cursor:default}.location-status .location-icon{animation:pulse-location 2s ease-in-out infinite}@keyframes pulse-location{0%,to{opacity:1}50%{opacity:.5}}.location-status:hover .location-tooltip{display:block}.location-count{font-size:11px;font-weight:600;background:#2ecc714d;color:#2ecc71;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center}.location-stop-btn{background:#e74c3c33;color:#e74c3c;border:none;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;line-height:1;padding:0;margin-left:2px;transition:background .2s}.location-stop-btn:hover{background:#e74c3c66}.location-tooltip{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:#34495e;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:1001;box-shadow:0 2px 8px #0003}.location-tooltip strong{display:block;margin-bottom:4px}.location-tooltip-detail{display:block;color:#95a5a6;font-size:11px}.location-tooltip:before{content:"";position:absolute;top:-6px;right:12px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #34495e}.connection-status{position:relative;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;font-size:13px;cursor:default;color:#2ecc71}.connection-status.disconnected{color:#e74c3c}.connection-status:hover .connection-tooltip{display:block}.connection-tooltip{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:#34495e;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:1001;box-shadow:0 2px 8px #0003}.connection-tooltip:before{content:"";position:absolute;top:-6px;right:12px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #34495e}.connection-tooltip div{padding:2px 0}.read-only-badge{background:#e74c3c;color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap}.btn-icon{background:transparent;border:none;padding:4px 8px;font-size:16px;cursor:pointer;border-radius:4px;transition:background .2s}.btn-icon:hover{background:#ffffff1a}.undo-redo-buttons{display:flex;align-items:center;gap:2px}.undo-redo-buttons .btn-icon{color:#fff;opacity:.9}.undo-redo-buttons .btn-icon:disabled{opacity:.3;cursor:not-allowed}.undo-redo-buttons .btn-icon:disabled:hover{background:transparent}#shell-breadcrumb{display:none;align-items:center;gap:4px;font-size:13px;color:#ffffffb3;overflow:hidden;white-space:nowrap;min-width:0;flex:1;padding:4px 10px;background:#00000026;border-radius:4px;margin-left:4px;border:1px solid rgba(255,255,255,.2)}#shell-breadcrumb.show{display:flex}.breadcrumb-separator-left{display:none}.breadcrumb-separator-left:has(+#shell-breadcrumb.show){display:block}.header-spacer{flex:1}#shell-breadcrumb.show+.header-spacer{display:none}.breadcrumb-link{color:#fffc;text-decoration:none;padding:2px 6px;border-radius:4px;transition:background .15s;overflow:hidden;text-overflow:ellipsis}.breadcrumb-link:hover{background:#ffffff1a;color:#fff;text-decoration:none}.breadcrumb-link.drag-over{background:#4285f499;color:#fff}.breadcrumb-current{color:#fff;font-weight:500;padding:2px 6px;overflow:hidden;text-overflow:ellipsis}.breadcrumb-separator{color:#fff6;font-weight:300;flex-shrink:0}.btn{background:#34495e;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background .2s}.btn:hover{background:#4a6078}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2)}.btn-primary:hover{opacity:.9}.btn-secondary{background:#7f8c8d}.btn-secondary:hover{background:#95a5a6}.btn-user{display:flex;align-items:center;gap:4px}#auth-username{color:#2ecc71}.user-dropdown{position:relative;display:inline-block}.user-dropdown-content{display:none;position:absolute;background-color:#34495e;min-width:120px;box-shadow:0 8px 16px #0003;z-index:1001;border-radius:4px;top:100%;right:0;margin-top:4px}.user-dropdown.open .user-dropdown-content{display:block}.user-dropdown-item{color:#fff;padding:10px 16px;text-decoration:none;display:block;background:transparent;border:none;width:100%;text-align:left;cursor:pointer;font-size:14px;transition:background .2s}.user-dropdown-item:hover{background-color:#4a6078}.user-dropdown-item.danger{color:#e74c3c}.user-dropdown-item.danger:hover{background-color:#4a6078}#shell-content{flex:1;overflow:hidden;position:relative}#app-frame{width:100%;height:100%;border:none;display:block}body.dark-mode #shell-content{background:#1a1a2e}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:2000;display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;padding:30px;border-radius:10px;max-width:400px;width:90%}.modal-content h2{margin-bottom:10px;color:#2c3e50}.modal-content p{margin-bottom:20px;color:#7f8c8d}.modal-content input{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;margin-bottom:10px;font-size:14px}.modal-content input:focus{outline:none;border-color:#667eea}.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.modal-buttons .btn{padding:10px 20px}.error-message{color:#e74c3c;font-size:14px;margin-bottom:10px}@media (prefers-color-scheme: dark){.modal-content{background:#2c3e50}.modal-content h2{color:#fff}.modal-content p{color:#bdc3c7}.modal-content input{background:#34495e;border-color:#4a6078;color:#fff}}.logo-context-menu{position:fixed;background-color:#34495e;min-width:160px;box-shadow:0 8px 16px #0000004d;z-index:2000;border-radius:4px;padding:4px 0}.logo-context-menu button{color:#fff;padding:10px 16px;text-decoration:none;display:block;background:transparent;border:none;width:100%;text-align:left;cursor:pointer;font-size:14px;transition:background .2s}.logo-context-menu button:hover{background-color:#4a6078}@media (max-width: 768px){#shell-header{gap:8px;padding:8px 10px;flex-wrap:wrap}#shell-header h1{font-size:14px}.menu-button{padding:4px 8px;font-size:13px}.breadcrumb-separator-left{display:none!important}#shell-breadcrumb{order:100;flex-basis:100%;max-width:100%;margin-left:0;margin-top:4px;background:#0003;font-size:12px}.header-spacer{display:block!important}}@media (max-width: 500px){.menu-separator{display:none}}