/* Masc Axolotl Hub Styles */

body { margin: 0; font-family: Arial, sans-serif; background: #0f1b1f; color: #e6f7f5; }

.container { display: flex; height: 100vh; overflow: hidden; }

/* Vertical nav */ .nav { width: 180px; background: #14292e; display: flex; flex-direction: column; padding: 20px 10px; gap: 10px; border-right: 2px solid #1f3d44; }

.nav button { background: #1f3d44; color: #bdf3ea; border: none; padding: 12px; cursor: pointer; border-radius: 8px; transition: 0.2s; font-weight: bold; }

.nav button:hover { background: #2d5b63; }

/* Main area */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Top row */ .top-row { display: flex; padding: 20px; gap: 20px; align-items: stretch; }

.hero-img { width: 320px; height: 320px; object-fit: cover; background: #1f3d44; border-radius: 12px; border: 2px solid #2d5b63; }

.info-box { flex: 1; background: #14292e; border-radius: 12px; padding: 20px; border: 2px solid #1f3d44; display: flex; flex-direction: column; justify-content: center; }

.info-box h1 { margin: 0; color: #7fffd4; }

/* Updates section */ .updates { flex: 1; margin: 0 20px 20px 20px; background: #14292e; border-radius: 12px; border: 2px solid #1f3d44; overflow-y: auto; padding: 15px; }

.update { background: #1f3d44; margin-bottom: 10px; padding: 12px; border-radius: 8px; }

.update h3 { margin: 0 0 5px 0; color: #bdf3ea; }

.update p { margin: 0; font-size: 14px; }