body { margin: 0; background: #1a1a1a; color: white; font-family: 'Segoe UI', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#user-bar { height: 60px; background: #1e1e1e; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom: 1px solid #333; }
.left-section { display: flex; align-items: center; gap: 15px; }
.logo img { height: 30px; }

#announcement-bar { background: #ffab19; color: black; text-align: center; padding: 8px; font-weight: bold; display: none; }

.share-btn { background: #ffab19; color: black; border: none; padding: 6px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; }
.cloud-btn { background: #2ecc71; color: white; border: none; padding: 6px 10px; border-radius: 4px; margin-left: 5px; cursor: pointer; font-size: 11px; }

#owner-panel { display: none; background: #2c2412; border: 1px solid #ffab19; margin: 20px; padding: 15px; border-radius: 8px; }
.admin-input { background: #1a1a1a; border: 1px solid #ffab19; color: white; padding: 5px; width: 60%; margin-top: 10px; }

#vertex-hub { padding: 20px; overflow-y: auto; flex-grow: 1; }
.banner { padding: 40px; background: linear-gradient(45deg, #007acc, #9966ff); border-radius: 12px; text-align: center; }
.search-container { margin-top: 15px; }

.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.project-card { background: #252526; padding: 15px; border-radius: 8px; border: 1px solid #333; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.like-btn { background: #333; border: none; color: #ff4d4d; padding: 8px; border-radius: 5px; cursor: pointer; }
.delete-btn { background: none; border: 1px solid #444; color: #888; font-size: 10px; cursor: pointer; margin-top: 5px; }
.delete-btn:hover { background: #d44c4c; color: white; }

#app { display: flex; flex-grow: 1; }
#toolbar { width: 240px; background: #252526; padding: 15px; border-right: 1px solid #333; }
.block { display: block; width: 100%; padding: 10px; margin-bottom: 10px; background: #4c97ff; border: none; color: white; border-radius: 5px; cursor: pointer; text-align: left; }
#stage-container { flex-grow: 1; background: #000; display: flex; justify-content: center; align-items: center; }
canvas { background: white; border-radius: 4px; }

.modal { display: none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; }
.modal-content { background: #252526; width: 300px; margin: 10% auto; padding: 30px; border-radius: 10px; text-align: center; }