body {
      background: #1e0f4f;
      color: white;
  }

  .calendar {
      min-height: 100vh;
      padding: 40px;
      display: none;
  }

  body:not(:has(:target)) #feb {
      display: block;
  }

  .header {
      display: flex;
      align-items: center;
      gap: 15px;
      font-weight: bold;
      margin-bottom: 25px;
  }

  .nav-btn {
      text-decoration: none;
      color: white;
      font-size: 15px;
  }

  /* ✅ TRUE GRID CALENDAR */
  .weekdays,
  .days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      text-align: center;
  }

  .weekdays div {
      opacity: 0.7;
      font-size: 14px;
      padding: 10px 0;
  }

  .day {
      position: relative;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Smooth hover glow */
  .day::before {
      content: "";
      position: absolute;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: radial-gradient(circle, #ff3df5, #a100ff);
      box-shadow: 0 0 20px rgba(255, 0, 200, 0.6);

      opacity: 0;
      transform: scale(0.6);
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
  }

  .day:hover::before {
      opacity: 1;
      transform: scale(1);
  }

  .day:hover {
      transform: translateY(-4px);
  }

  .day span {
      position: relative;
      z-index: 2;
  }