/* =========================================================
   GLOBAL RESET & BASE
========================================================= */
* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  margin: 0;
  background: #f2f5fa;
  color: #111;
}

.app-gradient {
  background: linear-gradient(
    135deg,
    #eef4ff 0%,     /* stronger blue tint */
    #f7f9ff 30%,    /* soft transition */
    #fff3f3 70%,    /* stronger pink tint */
    #ffecec 100%    /* end pink */
  );
  border: 1px solid rgba(0,0,0,0.05);
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;

}

/* =========================================================
   TOP HEADER (APP HEADER)
========================================================= */
.top-header{
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  background:#0b4bb3;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

.header-left,
.header-right{
  position:absolute;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-left{ left:0; }
.header-right{ right:0; }

.header-title{
  color:#fff;
  font-size:26px;
  font-weight:600;
  letter-spacing:0.4px;
}

.header-left img,
.header-right img{
  width:22px;
  height:22px;
}

.header-right .dot{
  position:absolute;
  top:14px;
  right:16px;
  width:8px;
  height:8px;
  background:red;
  border-radius:50%;
}


/* =========================================================
   MAIN CONTENT WRAPPER
========================================================= */
.content {
  padding: 70px 14px 90px; /* header + bottom nav space */
}



/* ===============================
   BOTTOM NAVIGATION (APP STYLE)
================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;                 /* 👈 exact height */
  background: #0b4bb3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

/* nav item */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #fff;
  font-size: 12px;
}

/* icon size control */
.nav-item img {
  width: 20px;                  /* 👈 same size as screenshot */
  height: 20px;
  object-fit: contain;
}

/* active state */
.nav-item.active span {
  font-weight: 600;
}