body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background-color: #f4f7f6; color: #333; margin: 0; padding: 0; display: flex; min-height: 100vh; }
.sidebar { width: 220px; background-color: #1a3a3a; color: #fff; padding: 30px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: 2px 0 10px rgba(0,0,0,0.05); }
.sidebar-title { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #a3c2c2; margin-bottom: 20px; padding-left: 10px; }
.nav-link { display: block; padding: 12px 15px; color: #cbdbe5; text-decoration: none; font-weight: 600; border-radius: 6px; transition: all 0.2s ease; }
.nav-link:hover, .nav-link.active { background-color: #2c5252; color: #fff; }
.main-content { flex: 1; padding: 40px; display: flex; flex-direction: column; align-items: center; }
.container { max-width: 800px; width: 100%; background: #ffffff; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 12px; text-align: center; }
h1 { color: #1a3a3a; font-size: 2.2rem; margin-top: 0; margin-bottom: 20px; }
p { font-size: 1.1rem; line-height: 1.6; color: #555; margin-bottom: 30px; }
.hub-title { font-size: 1.3rem; color: #2c5252; margin-bottom: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 30px; }
.portal-btn { display: flex; align-items: center; justify-content: center; padding: 15px 20px; background: #e6f0fa; color: #1a3a3a; text-decoration: none; font-weight: 600; border-radius: 8px; border: 2px solid #cbdbe5; transition: all 0.2s ease; font-size: 1.1rem; }
.portal-btn:hover { background: #1a3a3a; color: #ffffff; border-color: #1a3a3a; transform: translateY(-2px); }
.hobby-grid { grid-template-columns: repeat(3, 1fr); }
.hobby-grid .hobby-center { grid-column: 2; }
@media (max-width: 980px) { .hobby-grid { grid-template-columns: 1fr; } .hobby-grid .hobby-center { grid-column: auto; } }