:root { --accent: #14b8a6; --fundo: #f4f6f9; }
body.hub-body { margin: 0; background: var(--fundo); font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #1e293b; }
.hub-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.hub-card { width: 100%; max-width: 360px; border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.hub-marca { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem; }
.hub-marca i { color: var(--accent); font-size: 1.6rem; }
.hub-topo { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.5rem; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.hub-topo .hub-marca { justify-content: flex-start; }
.hub-usuario { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.hub-conteudo { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
.hub-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.hub-app { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: 1.5rem 1rem; background: #fff; border-radius: .6rem; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: transform .12s, box-shadow .12s; }
.hub-app:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); color: inherit; }
.hub-app i { font-size: 2.6rem; color: var(--accent); }
.hub-app small { color: #64748b; }
.hub-largo { max-width: 1100px; }
.hub-tabela { border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.hub-topo .btn { display: inline-flex; align-items: center; gap: .3rem; }