body { margin:0; font-family: 'Inter', sans-serif; background: #f0f4f8; padding-bottom: 90px; }

/* Top bar */
.top-bar { background-color: #1e3a8a; color: white; padding: 16px; font-size: 20px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; position: sticky; top:0; z-index: 1000; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);}
.hamburger { font-size: 24px; cursor: pointer; display:block; }

/* Desktop Top Menu */
.desktop-menu { display:none; flex-direction: row; gap:20px; }
.desktop-menu a { color:white; text-decoration:none; font-weight:500; padding: 6px 10px; border-radius:6px; transition:background 0.2s;}
.desktop-menu a:hover { background: rgba(255,255,255,0.2); }

/* Mobile Menu */
.mobile-menu { display: none; flex-direction: column; background-color: #1e3a8a; position: absolute; top: 60px; width: 100%; left: 0; z-index: 999; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
.mobile-menu a { padding: 15px 20px; color: white; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); transition: background 0.2s; }
.mobile-menu a:hover { background-color: #3749a0; }
.mobile-menu.active { display: flex; }

/* Dashboard Cards */
.dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; margin-top: 10px; }
.panel { position: relative; color: white; padding: 28px 20px; border-radius: 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.15); transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; }
.panel:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(0,0,0,0.25); }
.panel-icon { font-size: 36px; transition: transform 0.3s ease; }
.panel:hover .panel-icon { transform: scale(1.2) rotate(5deg); }
.panel-title { font-size: 18px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.coming-soon { position: absolute; top: 8px; right: 8px; background-color: rgba(0,0,0,0.3); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 8px; }

/* Android-style Bottom Nav */
.bottom-nav { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-around; width: 95%; max-width: 480px; background: white; padding: 12px 0; border-radius: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); z-index: 1000; }

/* Hide bottom nav on desktop */
@media(min-width:768px){
  .hamburger { display:none; }
  .desktop-menu { display:flex; }
  .mobile-menu { display:none !important; }
  .bottom-nav { display:none; }
}

/* Nav Items */
.nav-item { display: flex; flex-direction: column; align-items: center; font-size: 14px; color: #1e3a8a; text-decoration: none; cursor: pointer; transition: transform 0.2s, color 0.2s; }
.nav-item.active, .nav-item:hover { color: #4facfe; transform: scale(1.1); }
.nav-icon { font-size: 22px; margin-bottom: 4px; }

/* Responsive tweaks */
@media(max-width:420px){
  .dashboard { grid-template-columns: 1fr; gap: 12px; }
  .panel { padding: 22px 16px; gap: 12px; }
  .panel-icon { font-size: 32px; }
  .panel-title { font-size: 16px; }
}